:root{color-scheme:light;--paper:#f4f2eb;--lilac:#e4e1fb;--ink:#211b31;--purple:#4b397f;--white:#fffefa;--yellow:#ead479;--muted:#777286;--line:#ddd9ce;--shadow:0 16px 42px #30274712;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 78% 0%,#e9e5f8 0,transparent 34rem),var(--paper)}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{color:inherit}.topbar{height:66px;border-bottom:1px solid #211b3110;background:#fffefaab;backdrop-filter:blur(14px)}.top-inner,main{width:min(1160px,calc(100% - 48px));margin:auto}.top-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.03em}.account{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.88rem}main{padding:38px 0 20px}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{margin:0 0 9px;color:var(--purple);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin:0 7px 1px 0}h1,h2,h3,p{margin-top:0}h1{font:600 clamp(2.4rem,5vw,4rem)/1 'Playfair Display',Georgia,serif;letter-spacing:-.045em;margin:0}.intro h1 span{color:var(--purple)}.lede{margin:10px 0 0;color:var(--muted);font-size:1rem}.actions{display:flex;gap:9px;align-items:center}.button{min-height:42px;padding:0 15px;border:1px solid #d7d2c8;border-radius:9px;background:var(--white);font-weight:600;font-size:.86rem;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.button:hover{border-color:#a79eb8;background:#fff}.button:active{transform:translateY(1px)}.button:focus-visible,select:focus-visible,input:focus-visible,.board-stage:focus-visible{outline:3px solid #bcb2f4;outline-offset:3px}.button-primary{border-color:var(--purple);background:var(--purple);color:white}.button-primary:hover{background:#392b66;border-color:#392b66}.setup{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fffefaad;border:1px solid #e2ded5;border-radius:12px;box-shadow:0 5px 18px #30274708}.setup>label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.8rem;font-weight:600}.setup select{min-height:36px;min-width:120px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:7px;background:#fffefa;color:var(--ink);font-size:.84rem}.mode-switch{display:flex;align-items:center;gap:4px;margin:0 0 0 6px;padding:0;border:0}.mode-switch legend{float:left;margin-right:8px;color:var(--muted);font-size:.77rem;font-weight:600}.mode-switch label{position:relative;cursor:pointer}.mode-switch input{position:absolute;opacity:0}.mode-switch span{display:block;padding:8px 10px;border-radius:7px;color:#696477;font-size:.8rem;font-weight:600}.mode-switch input:checked+span{background:var(--lilac);color:var(--purple)}.mode-switch input:focus-visible+span{outline:3px solid #bcb2f4}.status{min-height:20px;margin:11px 2px 3px;color:var(--purple);font-size:.85rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}.board-card,.reference{padding:16px;background:var(--white);border:1px solid #e2ded5;border-radius:13px;box-shadow:var(--shadow)}.board-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:13px}.board-head h2,.reference h2,.tray-head h2{margin:0;font:600 1.05rem 'Playfair Display',Georgia,serif}.board-head p{margin:5px 0 0;color:var(--muted);font-size:.78rem}.score{min-width:90px;text-align:right;color:var(--purple);font-size:.8rem;font-weight:700}.score progress{display:block;width:90px;height:4px;margin-top:6px;border:0;border-radius:9px;overflow:hidden;accent-color:var(--purple)}progress::-webkit-progress-bar{background:#ebe8f4}progress::-webkit-progress-value{background:var(--purple);border-radius:9px}.stage-area{display:flex;align-items:center;justify-content:center;min-height:220px;padding:18px;border-radius:9px;background:repeating-linear-gradient(135deg,#f7f5ef,#f7f5ef 12px,#f2efe8 12px,#f2efe8 24px)}.board-stage{position:relative;isolation:isolate;width:min(100%,800px);aspect-ratio:1.6;overflow:visible;border-radius:3px;background:#fffefa;box-shadow:0 5px 20px #211b312a;touch-action:none}.board-image,.piece-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.board-image{background-size:cover;background-position:center;pointer-events:none}.board-stage[data-mode=background] .board-image{opacity:.24;filter:saturate(.72)}.piece-layer{z-index:1}.piece-layer image{pointer-events:none}.piece-layer path{vector-effect:non-scaling-stroke}.piece-layer .placed-piece{filter:drop-shadow(0 1px 1px #211b3133)}.piece-layer .loose-piece{cursor:grab;filter:drop-shadow(0 3px 4px #211b3144);transition:filter .16s}.piece-layer .loose-piece:hover{filter:drop-shadow(0 6px 8px #211b3155)}.piece-layer .loose-piece:active{cursor:grabbing}.piece-layer .is-snapping{animation:snapflash .42s ease-out}.drag-ghost{position:fixed;z-index:20;pointer-events:none;filter:drop-shadow(0 8px 10px #211b3155)}.completion{padding:12px;margin-top:12px;border-radius:8px;background:#f1edff;color:var(--purple);text-align:center;font-weight:700}.completion span{color:#c5a727;margin-left:4px}.reference{position:sticky;top:16px}.reference h2{margin-bottom:12px}.reference img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:6px;box-shadow:0 4px 13px #211b3120}.reference p{margin:9px 0 0;color:var(--muted);font-size:.78rem}.tray-card{margin-top:16px;padding:14px 16px 16px;border-radius:13px;background:var(--ink);color:var(--white);box-shadow:var(--shadow)}.tray-head{display:flex;align-items:center;gap:12px;margin-bottom:11px}.tray-head h2{color:var(--white)}.tray-head p{margin:0 auto 0 0;color:#bdb7ce;font-size:.78rem}.tray-head .button{min-height:36px;border-color:#665c79;background:#302941;color:white}.tray-head .button:hover{background:#403651}.tray{display:flex;gap:10px;min-height:90px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 9px;scrollbar-color:#786d8d #302941;scrollbar-width:thin;overscroll-behavior-x:contain}.tray>*{flex:0 0 auto}.tray .tray-piece{width:94px;height:76px;display:grid;place-items:center;padding:4px;border:1px solid #554b69;border-radius:8px;background:#332c40;color:var(--white);cursor:grab;touch-action:none}.tray .tray-piece:hover{border-color:#b1a4d0;background:#3d344d}.tray .tray-piece:active{cursor:grabbing}.tray .tray-piece[aria-pressed=true]{border-color:var(--yellow);box-shadow:0 0 0 2px #ead47944}.tray .tray-piece svg{width:82px;height:64px;overflow:visible}.tray .tray-piece:focus-visible{outline:3px solid #c5b6ff;outline-offset:2px}.tray-empty{align-self:center;margin:0;color:#c4bfd0;font-size:.82rem}.reference[hidden]{display:none!important}.piece-layer .seam{fill:none;stroke:#fffefa99;stroke-width:1;pointer-events:none}.piece-layer .keyboard-target{fill:#ead47922;stroke:#ead479;stroke-width:3;stroke-dasharray:6 4;pointer-events:none}footer{display:flex;justify-content:space-between;gap:14px;padding:20px 2px 5px;color:#827d8c;font-size:.74rem}dialog{width:min(520px,calc(100% - 28px));padding:26px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);box-shadow:0 24px 90px #211b3155}dialog::backdrop{background:#211b3170;backdrop-filter:blur(3px)}dialog h2{font:600 1.5rem 'Playfair Display',Georgia,serif}dialog p{color:var(--muted);line-height:1.55}.close{float:right;min-width:42px;padding:0;font-size:1.4rem}.upload-choices,.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes snapflash{0%{filter:brightness(1.7) drop-shadow(0 0 7px #ead479)}100%{filter:brightness(1) drop-shadow(0 1px 1px #211b3133)}}
@media(max-width:800px){.workspace{grid-template-columns:minmax(0,1fr)}.reference:not([hidden]){position:static;display:grid;grid-template-columns:1fr minmax(160px,38%);column-gap:14px;align-items:start}.reference h2{grid-column:1/-1}.reference p{align-self:center}.setup{flex-wrap:wrap}.mode-switch{margin-left:0}.board-stage{width:100%}}
@media(max-width:560px){.top-inner,main{width:calc(100% - 28px)}.topbar{height:58px}main{padding-top:25px}.intro{align-items:start;flex-direction:column;margin-bottom:18px;gap:15px}.intro .actions{width:100%}.intro .actions .button{flex:1}.setup{gap:8px;padding:10px}.setup>label{flex:1;justify-content:space-between}.setup select{min-width:0}.mode-switch{flex:1;min-width:calc(50% - 8px);margin-top:4px}.mode-switch legend{float:none;display:block;width:auto;margin:0 0 3px}.mode-switch span{padding:8px}.board-card{padding:11px}.board-head h2{font-size:.96rem}.board-head p{max-width:200px;line-height:1.4}.stage-area{min-height:0;padding:8px}.board-stage{width:100%;border-radius:2px}.tray-card{padding:12px}.tray{min-height:84px}.tray .tray-piece{width:82px;height:68px}.tray .tray-piece svg{width:70px;height:56px}.tray-head{gap:8px}.tray-head .button{padding:0 9px;font-size:.76rem}footer{flex-direction:column;gap:5px}.reference:not([hidden]){grid-template-columns:1fr;}.reference p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Interaction and state overrides follow the base layout. */
:root { font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
a.button { display: inline-flex; align-items: center; color: var(--purple); text-decoration: none; }
.workspace:not(.has-reference) { grid-template-columns: minmax(0, 1fr); }
.board-stage[data-mode=reference] .board-image { opacity: 0; }
.board-stage[data-mode=reference] { background: repeating-linear-gradient(0deg, transparent 0 23px, #4b397f0e 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #4b397f0e 23px 24px), #ebe8f6; }
.board-stage.complete-board .board-image { opacity: 1; filter: none; }
.complete-board .placed-piece { filter: none; }
.complete-board .seam { opacity: 0; }
.drag-ghost { top: 0; left: 0; }
.drag-ghost .seam, .tray .seam { fill: none; stroke: #fffefa9a; stroke-width: .75; }
.piece-hit { pointer-events: all; }
.tray-piece > svg { pointer-events: none; }
.tray-pages { display: flex; gap: 4px; }
.tray-head .tray-pages .button { padding-inline: 9px; font-size: 1.18rem; }
.button:disabled { opacity: .48; cursor: default; }
.library-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.library-row small { display: block; color: var(--muted); }
.library-row .actions { flex-wrap: wrap; }
#photo-list-title { margin-top: 20px; }
.reference img { aspect-ratio: auto; max-height: 260px; object-fit: contain; }
@media (max-width: 560px) {
  .reference:not([hidden]) { grid-row: 1; grid-template-columns: 1fr minmax(100px, 35%); align-items: center; padding: 10px 12px; }
  .reference h2, .reference p { grid-column: 1; margin: 0; }
  .reference h2 { align-self: end; }
  .reference p { align-self: start; margin-top: 4px; }
  .reference img { grid-column: 2; grid-row: 1 / 3; max-height: 76px; }
}