@font-face{font-family:DeskSans;src:local('Inter'),local('Arial')}*{box-sizing:border-box} :root{color-scheme:dark;--bg:#0e1523;--ink:#edf2fb;--muted:#9aacc0;--line:#2b3a50;--mint:#91e2cd;--amber:#d8bb83;font-family:DeskSans,Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}body{margin:0;background:var(--bg);color:var(--ink)}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;transition:background .17s,box-shadow .17s,opacity .17s}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.board:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button svg{pointer-events:none}.app{min-height:100dvh;padding:0 40px;background:radial-gradient(ellipse at 78% 8%,#21444422,transparent 50%),var(--bg)}.topbar{max-width:1160px;margin:auto;height:92px;border-bottom:1px solid #253146;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:750;letter-spacing:2px}.brandmark{font-family:Georgia,serif;font-size:43px;letter-spacing:-6px;width:40px}.brandmark span{color:var(--mint)}.brand small{display:block;font-size:8px;letter-spacing:2px;color:#8a9cb5;margin-top:6px}.header-actions{display:flex;align-items:center;gap:12px}.demo-pill{font-size:11px;color:var(--muted);margin-right:9px;display:flex;align-items:center;gap:7px}.demo-pill i,.board-top i{display:inline-block;background:var(--mint);width:5px;height:5px;border-radius:50%}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:#aec0d5;background:transparent;border-radius:8px;font-size:20px}.icon-button:hover{background:#243147;color:var(--ink)}#help{font-size:15px;border:1px solid #334259;border-radius:50%;width:28px;height:28px;margin:7px}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #36485e;background:#19263a;color:#dce7f3;border-radius:7px;padding:12px 16px;font-size:12px;min-height:43px}.secondary:hover{background:#263950}.secondary:disabled:hover{background:#19263a}#fullscreen{font-size:11px}#fullscreen>span:first-child{font-size:20px;line-height:1}main{max-width:1060px;margin:39px auto 0}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:29px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.6px;color:var(--mint);margin:0 0 12px;line-height:1.6}.eyebrow span{color:#7890a8;font-weight:400;letter-spacing:1px}h1{font-family:Georgia,'Times New Roman',serif;font-size:55px;letter-spacing:-1.8px;line-height:1;margin:0 0 15px;font-weight:500}.title-dot{color:var(--mint)}.subtitle{font-size:12px;line-height:1.7;margin:0;color:#a7b6c8}.subtitle em{color:#d7dfeb;font-style:normal}.trip{display:flex;gap:16px;font-size:8px;letter-spacing:1.8px;line-height:2.1;color:#859bb0;align-items:center;padding-top:20px}.trip strong{font-size:10px;letter-spacing:.2px;font-weight:400;color:#b9c9d8}.trip-line{width:40px;height:1px;background:#789f9366}.levels{display:flex;gap:0;border-bottom:1px solid #2b3a50;margin-bottom:27px}.level{display:flex;align-items:center;gap:12px;padding:13px 26px 16px 0;margin-right:24px;border-bottom:2px solid transparent;background:transparent;color:#91a4bc;text-align:left}.level.active{color:#e7f1f8;border-bottom-color:var(--mint)}.level:hover{color:var(--mint)}.level-num{display:grid;place-items:center;width:25px;height:25px;border:1px solid #3b4c63;border-radius:50%;font-size:9px;font-variant-numeric:tabular-nums}.level.active .level-num{background:#91e2cd15;color:var(--mint);border-color:#91e2cd6b}.level.complete .level-num{color:var(--mint)}.level b{display:block;font-size:11px;font-weight:550}.level small{display:block;font-size:8px;color:#788fa6;margin-top:4px;letter-spacing:.4px}.game-layout{display:grid;grid-template-columns:minmax(0,580px) minmax(270px,1fr);gap:59px;align-items:start}.play-column{min-width:0}.board-top{display:flex;align-items:center;gap:14px;margin:0 13px 12px;font-size:10px;height:24px}.board-top>span:first-child{display:flex;align-items:center;gap:8px;flex:1}.board-top strong{font-weight:500}.size-note{color:#768da5;font-size:9px;margin-left:5px}.timer{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#dae6f5}.pause{width:30px;height:30px;font-size:13px}.suitcase{position:relative;padding:18px 19px 30px;background:linear-gradient(115deg,#5b695f,#3d4b46 58%,#4f5c50);border:1px solid #748176;border-radius:26px;box-shadow:0 21px 48px #0005,inset 0 0 0 5px #1a2c252b,inset 0 0 0 7px #7e8a7529;margin:0 10px}.handle{position:absolute;width:92px;height:20px;top:-17px;left:calc(50% - 46px);border:6px solid #58685e;border-bottom:none;border-radius:13px 13px 0 0;z-index:0;box-shadow:0 -1px 0 #849084}.case-inner{background:#e0d6bf;border-radius:12px;padding:8px;box-shadow:inset 0 1px 9px #1c2b2566,0 0 0 2px #a3a18b44}.board{position:relative;width:100%;aspect-ratio:1;background:#e5dcc9;background-image:linear-gradient(#baad934d 1px,transparent 1px),linear-gradient(90deg,#baad934d 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 6);border-radius:6px;outline-offset:2px;touch-action:none;user-select:none;container-type:inline-size}.board:before{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 5px #5e513125;border-radius:6px}.cell{position:absolute;display:block;width:calc(100% / 6);height:calc(100% / 6);border:0;background:transparent;padding:0;z-index:1;border-radius:4px}.cell:hover{background:#65735920}.cell.cursor{box-shadow:inset 0 0 0 2px #335b4d88;background:#658e7526}.case-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:6px;letter-spacing:3px;color:#cfdbc7a8;font-weight:550}.clasp{position:absolute;top:43%;width:9px;height:45px;background:linear-gradient(90deg,#897b60,#c0ad84,#8b8069);border:1px solid #ab9d7c;border-radius:3px}.clasp.left{left:-5px}.clasp.right{right:-5px}.box{display:block;position:relative;padding:0;border:0;border-radius:5px;background:var(--box-color);box-shadow:0 3px 5px #060b144a,0 0 0 1px #ffffff1a;overflow:hidden;touch-action:none;user-select:none;cursor:grab;color:#fff;isolation:isolate}.box:active{cursor:grabbing}.box:before{content:'';position:absolute;inset:3px;border:1px solid #fff4;border-radius:3px;pointer-events:none;z-index:2}.box:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset -3px -4px 0 #0003,inset 2px 2px 0 #fff2;border-radius:5px}.box svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}.box-title{position:absolute;z-index:3;left:8%;right:8%;top:10%;font-family:Georgia,serif;font-size:clamp(10px,2.6cqw,20px);text-shadow:0 1px 4px #0008;line-height:1.1;font-weight:bold;text-align:center;pointer-events:none}.box-title small{display:block;font-family:inherit;font-size:.48em;letter-spacing:1px;margin-top:4px;text-transform:uppercase;font-weight:400}.box-id{position:absolute;bottom:7px;left:8px;z-index:4;font-size:8px;font-weight:bold;color:#fff9;pointer-events:none}.box.selected{box-shadow:0 0 0 2px var(--mint),0 0 0 5px #91e2cd25,0 4px 12px #0007;z-index:5}.board .box{position:absolute;z-index:3;border:2px solid #d7cbb000;container-type:inline-size}.board .box .box-title{font-size:clamp(9px,14cqw,24px)}.board .box .box-id{font-size:7px;bottom:7px;left:7px}.board .box.selected{z-index:5}.placement-preview{position:absolute;border:2px dashed #244b3ccc;border-radius:5px;background:#6baf8550;pointer-events:none;z-index:7;box-shadow:0 0 0 1px #eff4d550}.placement-preview.invalid{border-color:#a34b38;background:#ce6e5555}.below-board{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:#8da1b8;min-height:38px;font-size:10px;line-height:1.6;margin:18px 12px 8px}.below-board #status{max-width:360px}.below-board #status.error{color:#ffc4a8}.keyboard-note{white-space:nowrap;font-size:8px;color:#6f839d;margin-top:2px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border:1px solid #43516a;border-radius:3px;font-size:8px;font-family:inherit;color:#b7c9dc;font-weight:400}.board-tools{display:flex;align-items:center;gap:12px;margin:0 12px}.board-tools .secondary{padding:10px 16px;font-size:11px}.board-tools .secondary>span{font-size:20px;line-height:1}.board-tools kbd{margin-left:10px}.tool{padding:12px 8px;background:transparent;font-size:10px;color:#99aec3;min-height:43px}.tool:hover{color:#e9f5fb}.undo{margin-left:auto;font-size:20px;display:flex;gap:7px;align-items:center}.undo span{font-size:10px}.sidebar{padding-top:1px}.pack-heading{display:flex;align-items:center;justify-content:space-between}.pack-heading .eyebrow{font-size:8px;color:#7791aa;margin-bottom:9px}.pack-heading h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.4px;margin:0}.pack-count{color:var(--mint);font-size:13px;font-variant-numeric:tabular-nums;padding-top:10px}.progress{height:3px;background:#28394d;border-radius:4px;overflow:hidden;margin:19px 0 12px}.progress span{display:block;height:100%;background:var(--mint);transition:width .25s;border-radius:4px}.tray-instruction{font-size:9px;color:#8196ad;margin:0 0 19px;line-height:1.6}.tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 15px;min-height:125px;align-items:start;container-type:inline-size}.tray-item{position:relative;padding:0;min-width:0}.tray-item .box{width:100%;height:90px;max-width:100%;container-type:inline-size}.tray-item .box .box-title{font-size:clamp(12px,13cqw,19px)}.tray-item .box .box-title small{font-size:7px}.tray-item:nth-child(3n) .box{height:81px}.dimensions{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#8298b0;margin-top:7px}.dimensions .d-num{letter-spacing:1px;color:#a8bbcd}.packed-slot{width:100%;height:90px;border:1px dashed #2b4252;border-radius:5px;color:#738a9d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;font-size:8px;background:#17253433}.packed-slot strong{font-size:13px;font-weight:400;color:#91e2cd88}.packed-slot small{font-size:7px;line-height:1.3;text-align:center}.packed-slot:hover{border-color:#91e2cd88;background:#172c3d}.selection{font-size:9px;display:flex;gap:7px;align-items:center;margin:20px 0 17px;color:#b9cbd9;min-height:20px}.selected-dot{width:5px;height:5px;border-radius:50%;background:#72889d}.selection.active .selected-dot{background:var(--mint)}#selection-size{margin-left:auto;color:#8295ac;font-variant-numeric:tabular-nums}.bottom-actions{display:flex;gap:11px}.hint{flex:1;font-size:11px;background:#1c2e3d;border-color:#3b5660}.hint>span{color:var(--mint);font-size:18px}.reset{border:1px solid #344659;font-size:24px;min-width:43px}.hint-note{font-size:9px;color:#7e95ae;margin:10px 0 20px;line-height:1.65;min-height:15px}.personal{border-top:1px solid #2b3a50;padding-top:19px;display:flex;gap:12px;align-items:center}.personal-icon{font-size:26px;color:#78918e}.personal div>span{display:block;font-size:7px;letter-spacing:1.6px;color:#8196ad}.personal strong{font-size:12px;font-weight:500;color:#dce9f5;display:block;margin-top:7px}.personal small{display:block;font-size:8px;color:#647d97;margin-top:6px}footer{display:flex;align-items:center;gap:20px;margin:31px 0 0;border-top:1px solid #26374c;padding:21px 0 25px;font-size:9px;color:#7f94ad}footer a{color:#a9d6ca}footer>span:nth-child(2){margin:auto;font-size:8px;color:#5b728e}.text-button{padding:7px 0;background:transparent;color:#859eb7;font-size:9px}.text-button:hover{color:var(--mint)}dialog{background:#142235;color:var(--ink);border:1px solid #3c526c;border-radius:15px;max-width:475px;width:calc(100% - 32px);padding:0;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#060c17cd;backdrop-filter:blur(8px)}.dialog-content{padding:34px}.dialog-content .eyebrow{font-size:8px}.dialog-content h2{font-family:Georgia,serif;font-weight:400;font-size:34px;line-height:1.15;margin:12px 0 17px}.dialog-content p,.dialog-content li{font-size:12px;line-height:1.8;color:#adc0d4}.dialog-content ul{padding-left:18px}.dialog-content li{margin-bottom:9px}.dialog-content strong{color:#ebf4fa;font-weight:550}.primary{background:var(--mint);color:#10272c;border:1px solid var(--mint);padding:13px 20px;border-radius:7px;font-size:12px;font-weight:650;min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary:hover{background:#b9f0e0}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}.result-data{display:flex;gap:27px;padding:20px 0;margin-top:20px;border-block:1px solid #31465f}.result-data strong{display:block;font-size:27px;font-family:Georgia,serif;font-weight:400;margin-bottom:7px}.result-data span{font-size:9px;color:#8da8c0}.result-symbol{width:55px;height:55px;display:grid;place-items:center;border:1px solid #91e2cd66;border-radius:50%;font-size:28px;color:var(--mint);background:#91e2cd0b;margin-bottom:18px}.drag-ghost{position:fixed;z-index:2000;pointer-events:none;opacity:.82;filter:drop-shadow(0 12px 20px #0005);transform:rotate(-2deg)}.drag-ghost .box{width:100%;height:100%;container-type:inline-size}.drag-ghost .box-title{font-size:clamp(10px,15cqw,22px)}.immersive .topbar{height:52px;border-bottom:0}.immersive .brand{font-size:10px;letter-spacing:1px}.immersive .brandmark,.immersive .brand small,.immersive .demo-pill,.immersive .heading,.immersive footer{display:none}.immersive main{margin-top:10px;max-width:1030px}.immersive .levels{margin-bottom:23px}.immersive .level{padding-top:0;padding-bottom:10px}.immersive .game-layout{grid-template-columns:minmax(0,min(56vw,calc(100dvh - 190px))) minmax(260px,350px);gap:48px;justify-content:center}.immersive .suitcase{border-radius:22px;padding:14px 15px 26px}.immersive .below-board{margin-top:12px}.immersive .tray-item .box,.immersive .packed-slot{height:75px}.immersive .tray{gap:13px}.immersive .personal{display:none}
@media(min-width:1500px){main{margin-top:45px}.suitcase{margin-top:4px}}@media(max-width:1000px){.game-layout{gap:30px;grid-template-columns:minmax(0,1fr) 290px}.app{padding:0 25px}.trip{display:none}.board-tools{gap:5px}.keyboard-note{display:none}.tray{gap:14px}.tray-item .box,.packed-slot{height:80px}.pack-heading h2{font-size:25px}}
@media(max-width:720px){.app{padding:0 17px}.topbar{height:72px}.brand{font-size:11px;letter-spacing:1.2px;gap:8px}.brandmark{font-size:35px;width:32px}.brand small{font-size:7px;letter-spacing:1.3px;margin-top:3px}.demo-pill{display:none}.header-actions{gap:3px}#help{width:30px;height:30px}.full-label{display:none}#fullscreen{min-width:44px;padding:8px}main{margin-top:26px}.heading{margin-bottom:18px}h1{font-size:43px;margin-bottom:12px}.eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:9px}.subtitle{font-size:11px;max-width:300px;line-height:1.8}.subtitle em{display:block}.levels{margin-bottom:25px}.level{flex:1;gap:7px;margin-right:8px;padding:9px 0 12px}.level:last-child{margin-right:0}.level b{font-size:10px}.level small{font-size:7px}.level-num{width:21px;height:21px;font-size:8px}.game-layout{display:flex;flex-direction:column;gap:23px}.play-column,.sidebar{width:100%}.board-top{margin:0 8px 14px;font-size:10px}.size-note{font-size:8px;margin-left:0}.timer{font-size:18px}.suitcase{padding:13px 13px 26px;margin:0 5px;border-radius:21px}.case-inner{padding:6px;border-radius:10px}.case-label{font-size:5px;letter-spacing:2px;bottom:9px}.handle{width:76px;left:calc(50% - 38px);height:18px;top:-15px}.clasp{height:34px;width:8px}.below-board{font-size:10px;margin:14px 5px 6px;min-height:32px}.board-tools{margin:0 5px}.board-tools .secondary{padding:10px 14px}.board-tools kbd{display:none}.tool{font-size:10px;min-height:44px}.undo span{display:none}.pack-heading h2{font-size:25px}.pack-heading .eyebrow{font-size:7px}.pack-count{font-size:12px}.progress{margin:13px 0 10px}.tray-instruction{font-size:9px;margin:0 0 14px}.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;min-height:0}.tray-item .box,.tray-item:nth-child(3n) .box,.packed-slot{height:77px}.tray-item .box .box-title{font-size:clamp(11px,14cqw,17px)}.tray-item .box .box-title small{font-size:6px}.dimensions{font-size:7px;margin-top:6px}.selection{margin:16px 0 11px}.hint-note{margin-bottom:17px}.personal{padding-top:15px}.personal strong{font-size:11px}.personal-icon{font-size:23px}footer{font-size:8px;margin-top:23px;padding:16px 0 23px;gap:12px;flex-wrap:wrap}footer>span:nth-child(2){order:3;flex-basis:100%;margin:0;font-size:7px}.text-button{font-size:8px;margin-left:auto}.dialog-content{padding:28px 25px}.dialog-content h2{font-size:30px}.dialog-content p,.dialog-content li{font-size:11px}.immersive .game-layout{display:flex;gap:20px}.immersive .topbar{height:45px}.immersive main{margin-top:5px}.immersive .levels{margin-bottom:22px}.immersive .suitcase{padding:11px 11px 23px}.immersive .case-label{bottom:8px}.immersive .tray-item .box,.immersive .packed-slot{height:70px}.immersive .tray{gap:11px}.board .box .box-title{font-size:clamp(8px,14cqw,17px)}.box-id,.board .box .box-id{font-size:6px;bottom:6px;left:6px}}
@media(max-width:360px){.app{padding:0 12px}.brand small{display:none}.level{gap:5px}.level small{font-size:6px}.tray{gap:12px 9px}.board-top{gap:7px}.size-note{display:none}.tray-item .box,.tray-item:nth-child(3n) .box,.packed-slot{height:70px}.box-title small{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.pause{gap:3px}.pause::before,.pause::after{content:"";display:block;width:2px;height:10px;background:currentColor;border-radius:1px}

.cover-stage{position:absolute;inset:4px;container-type:size;pointer-events:none;overflow:hidden;border-radius:3px}.box-cover{display:block;position:absolute;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}.box-cover.turned{width:100cqh;height:100cqw;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.box:has(.box-cover) .box-id{background:#0e1523bb;padding:2px 4px;border-radius:3px;color:#fff;left:5px;bottom:5px;font-size:7px}.box:has(.box-cover){background:linear-gradient(120deg,var(--box-color),#283344)}

/* The puzzle and tray use the same rectangular footprint. */
.board{aspect-ratio:var(--cols,6)/var(--rows,6);background-size:calc(100% / var(--cols,6)) calc(100% / var(--rows,6))}
.cell{width:calc(100% / var(--cols,6));height:calc(100% / var(--rows,6))}
.tray .box{width:calc(var(--box-w)*26px);height:calc(var(--box-h)*26px);max-width:100%;margin:auto;aspect-ratio:var(--box-ratio)}
.tray-item{display:flex;flex-direction:column;justify-content:flex-end;min-height:110px}.tray-item .dimensions{width:100%;margin-top:8px}
.tray .packed-slot{min-height:78px;width:100%}

.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.level{margin-right:0;min-height:52px;text-align:left}.level span:last-child{min-width:0}.level b{white-space:normal}@media(max-width:540px){.levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.level{min-height:52px}.level b{font-size:11px}}