:root{color-scheme:light;--paper:#f3f0e7;--ink:#244d3d;--muted:#708275;--line:#d4dace;--green:#3d7054;--wood:#c7985e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{background-image:radial-gradient(#254c3d0c .7px,transparent .7px);background-size:9px 9px}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#faf8f1;touch-action:none}button:active{background:#e4eadd}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.app{height:100dvh;max-width:1420px;display:grid;grid-template-columns:260px minmax(400px,1fr);gap:60px;margin:auto;padding:30px 45px 18px}aside{display:flex;flex-direction:column;justify-content:space-between;padding:10px 0 20px;min-height:0}.brand{font-size:10px;font-weight:800;letter-spacing:1.2px}.brand span{display:block;color:var(--muted);font-weight:400;font-size:8px;letter-spacing:2px;margin-top:8px}.eyebrow{font-size:8px;letter-spacing:1.8px;color:var(--green);font-weight:700;margin:0 0 20px}.identity h1{font-size:67px;line-height:.94;letter-spacing:-3px;margin:0}.identity h1>span{display:block;font-size:16px;letter-spacing:0;margin-bottom:11px}.identity em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:72px;letter-spacing:-4px}.tagline{font-size:23px;line-height:1.3;letter-spacing:-.6px;margin:22px 0 0}.crate-illustration{width:180px;max-height:130px;margin:7px 0 0 16px}.rules{border-top:1px solid var(--line);padding-top:5px}.rules p{font-size:11px;line-height:1.75;color:var(--muted);margin:15px 0}.rules b{display:block;font-weight:500;color:var(--ink);font-size:12px;margin-bottom:4px}.journey{position:relative;text-align:left;border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:17px 0;font-size:12px}.journey>span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.journey>b{position:absolute;right:5px;top:22px;font-size:20px;font-weight:400}main{display:flex;flex-direction:column;min-width:0;min-height:0}header{display:flex;align-items:center;justify-content:space-between;padding:3px 5px 20px;gap:25px}.level-navigation{display:flex;align-items:center;gap:18px}.level-navigation button{background:none;border:0;font-size:20px;width:30px;height:40px}.level-navigation>div{text-align:center}header span{display:block;font-size:8px;letter-spacing:1.6px;color:var(--muted)}header strong{display:block;font-size:27px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:6px}.stats{display:flex;gap:40px;align-items:center;text-align:right}.stats small{font-size:16px;color:var(--muted)}.placed strong{color:var(--green)}.stage{flex:1;position:relative;min-height:0;background:#e7e9dc;border:1px solid #d4dacb;border-radius:19px;overflow:hidden;box-shadow:inset 0 0 50px #c4cbb633;touch-action:none}canvas{width:100%;height:100%;display:block;touch-action:none}.tools{display:flex;gap:10px;margin-top:15px;flex-shrink:0}.tools>button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;padding:13px 8px;font-size:12px;background:#faf8f0}.tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tools small{font-size:8px;color:#849082;margin-left:7px}.bottom-row{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:89px;flex-shrink:0;padding:5px}.bottom-row>p{font-size:12px;line-height:1.5;margin:0}.bottom-row>p>span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.bottom-row>button{border:0;background:none;font-size:10px;padding:10px;color:var(--muted)}.dpad{display:grid;grid-template:repeat(3,23px)/repeat(3,33px);gap:3px}.dpad button{font-size:17px;background:#edf0e6;border-color:#c8d1c2}.dpad button.active{background:#d3dfcd}.dpad button:first-child{grid-area:1/2}.dpad button:nth-child(2){grid-area:2/1}.dpad>span{grid-area:2/2;display:grid;place-items:center;color:#a2af9c}.dpad button:nth-child(4){grid-area:2/3}.dpad button:last-child{grid-area:3/2}footer{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:var(--muted);padding-top:4px;flex-shrink:0}footer>span{font-size:7px;letter-spacing:1.7px}#mobileLevels{display:none;border:0;background:none;font-size:8px;letter-spacing:.5px;color:var(--muted)}.toast{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);padding:11px 17px;background:#f8f7eeeF;border:1px solid #b7c7b2;border-radius:7px;box-shadow:0 5px 20px #244d3d15;font-size:11px;max-width:92%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}.toast.show{opacity:1}.completion,.level-picker{position:absolute;inset:0;display:grid;place-items:center;background:#f3f0e7ed;backdrop-filter:blur(4px);padding:20px;text-align:center}.completion section{width:min(100%,300px)}.seal{width:44px;height:44px;border:1px solid #91ab8c;border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;color:var(--green);font-size:23px}.completion .eyebrow{margin-bottom:17px}.completion h2{font-size:59px;line-height:.95;letter-spacing:-2px;margin:0 0 22px;font-weight:500}.completion h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.completion p:not(.eyebrow){font-size:12px;color:var(--muted)}.completion .record{font-size:10px!important;min-height:15px;margin:13px 0 25px}.primary{padding:16px 18px;background:var(--green);color:#f6f3e8;border:0;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px}.primary:active{background:#2c5c41}.primary span{font-size:20px}.text-button{background:none;border:0;font-size:8px;letter-spacing:1px;margin-top:17px;padding:8px}.level-picker section{width:min(100%,435px)}.picker-title{display:flex;align-items:start;justify-content:space-between;text-align:left;margin-bottom:22px}.picker-title .eyebrow{margin-bottom:8px}.picker-title h2{font-size:27px;line-height:1.1;letter-spacing:-.5px;font-weight:400;margin:0}.picker-title button{border:0;background:none;font-size:25px;padding:0 5px}#levelGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}#levelGrid button{position:relative;aspect-ratio:1.2;font-size:17px;font-variant-numeric:tabular-nums;border-color:#c7d1bf}#levelGrid button.done{background:#dce8d3}#levelGrid button.current{border:2px solid var(--green)}#levelGrid button.done:after{content:'✓';font-size:9px;position:absolute;top:4px;right:5px;color:var(--green)}.pages{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:20px}.pages button{padding:7px 12px;background:none;border:0;font-size:18px}@media(max-width:1120px){.app{grid-template-columns:210px minmax(350px,1fr);gap:35px;padding:22px 28px 14px}.identity h1{font-size:56px}.identity em{font-size:60px}.tagline{font-size:21px}.crate-illustration{width:150px;margin-top:0}.stats{gap:25px}.rules p{font-size:10px}.tools{gap:7px}.tools small{display:none}}@media(max-width:740px){.app{display:flex;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:0}aside{display:none}main{width:100%;height:100%;max-width:800px;margin:auto}header{gap:8px;padding:0 2px 12px}.level-navigation{gap:7px}.level-navigation button{width:23px;font-size:17px}.stats{gap:18px}header span{font-size:7px;letter-spacing:.8px}header strong{font-size:23px;margin-top:5px}.stats small{font-size:13px}.stage{border-radius:13px}.tools{margin-top:10px;gap:6px}.tools>button{font-size:10px;gap:7px;padding:12px 5px}.tools svg{width:16px;height:16px}.bottom-row{min-height:148px;gap:10px;position:relative;padding-bottom:10px}.bottom-row>p{font-size:11px;max-width:150px}.bottom-row>p>span{font-size:9px}.dpad{grid-template:repeat(3,37px)/repeat(3,43px);gap:4px}.dpad button{font-size:23px}.bottom-row>button{position:absolute;bottom:1px;left:0;font-size:9px;padding:0}.completion h2{font-size:49px}.seal{margin-bottom:18px}.completion .record{margin-bottom:20px}#mobileLevels{display:block}footer>span{display:none}.toast{font-size:10px;bottom:11px;width:max-content;max-width:92%}.level-picker{padding:18px}.picker-title{margin-bottom:16px}#levelGrid{gap:6px}}@media(max-height:720px) and (min-width:741px){.app{padding-top:17px}.crate-illustration{display:none}.identity h1{font-size:52px}.identity em{font-size:56px}.tagline{font-size:18px;margin-top:15px}.rules p{margin:10px 0}.bottom-row{min-height:78px}header{padding-bottom:13px}.tools{margin-top:10px}.tools>button{padding:10px}.completion h2{font-size:45px}.seal{margin-bottom:14px}.completion .eyebrow{margin-bottom:12px}}@media(max-height:520px) and (max-width:900px){.bottom-row{min-height:80px}.dpad{grid-template:repeat(3,21px)/repeat(3,37px);gap:2px}.dpad button{font-size:16px}.tools{margin-top:6px}.tools>button{padding:8px}.bottom-row>button{display:none}.seal{display:none}.completion h2{font-size:32px;margin-bottom:12px}.completion .eyebrow{margin-bottom:9px}.completion .record{margin:5px 0 10px}.primary{padding:10px 15px}.text-button{margin-top:6px}#levelGrid{grid-template-columns:repeat(10,1fr)}.level-picker section{width:95%}.picker-title h2{font-size:18px}.pages{margin-top:7px}}

:root{--scene:#e7e5d5;--scene-accent:#c58c51;--scene-soft:#f4ead1}
body{background-image:radial-gradient(ellipse at 0% 0%,#f7e6c755,transparent 50%),radial-gradient(#254c3d0b .7px,transparent .7px);background-size:auto,9px 9px}
.app{gap:45px}.identity{position:relative}.identity .eyebrow{color:#ad7743;font-size:8px;letter-spacing:1.5px}.identity h1{letter-spacing:-3.5px}.identity em{color:#a6713f}.crate-illustration{width:160px;max-height:100px;margin-top:2px;margin-bottom:-8px;filter:drop-shadow(0 5px 8px #b99a6314)}
.chapter-card{border:1px solid #d6cdb7;border-radius:12px;background:#faf5e9;padding:14px 15px;box-shadow:0 4px 14px #7c6d4910}.chapter-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:12px}.chapter-card span{font-size:7px;color:#8d8f75;letter-spacing:1.2px}.chapter-card b{font-size:12px;font-weight:500}.chapter-card>p{font-size:9px;color:var(--muted);line-height:1.4;margin:9px 0 0}.chapter-stamps{display:flex;gap:7px;margin-top:13px}.chapter-stamps i{font-style:normal;width:25px;height:25px;border-radius:50%;border:1px dashed #bfc7af;display:grid;place-items:center;font-size:8px;color:#89957d;background:#f7f4e8}.chapter-stamps i.done{background:#d6e4c6;border:1px solid #90aa7d;color:#406943}.chapter-stamps i.current{border:1.5px solid #b78951;background:#ecd9b3;color:#765832}
.stage{isolation:isolate;background:radial-gradient(ellipse at 20% 15%,#fff7e866,transparent 55%),var(--scene);border-color:#c9cbb4;box-shadow:inset 0 2px 1px #ffffff88,0 14px 36px #4f654710;transition:background-color .4s,border-color .4s}.stage.solved{border-color:#7f9d67;box-shadow:inset 0 2px 1px #ffffff88,0 0 0 3px #98b27922,0 14px 36px #4f654715}.scene-label{position:absolute;top:14px;left:16px;display:flex;align-items:center;gap:7px;font-size:7px;letter-spacing:1.4px;color:#72816a;z-index:1;pointer-events:none}.scene-label i{font-size:7px;font-style:normal;color:#8f9a7c;border-left:1px solid #bbc3ab;padding-left:8px;letter-spacing:.5px}.scene-dot{width:5px;height:5px;background:var(--scene-accent);border-radius:50%}.tools>button{box-shadow:0 3px 0 #c9cdbb55;border-color:#d0d4c3;transition:transform .12s,background-color .12s}.tools>button:active{transform:translateY(2px);box-shadow:0 1px 0 #c9cdbb55}.tools>button:last-child{background:var(--scene-soft);border-color:#d0c5a8}.tools svg{stroke-width:1.8}.level-navigation{background:#faf7ed;border:1px solid #dad9c6;border-radius:12px;padding:5px 7px}.level-navigation>div{min-width:37px}.stats .placed{padding:9px 14px;background:#e2e9d6;border-radius:10px;border:1px solid #ced8bd}.placed>strong{font-weight:600}.stats{gap:32px}
.completion{background:radial-gradient(ellipse at 50% 35%,#fffbeeF5 0%,#f4f0e6f2 70%);z-index:3}.completion section{animation:arrival .5s cubic-bezier(.18,.8,.3,1)}.completion .seal{width:70px;height:70px;border:0;margin-bottom:20px;transform:rotate(-9deg);background:none}.seal svg{width:100%;height:100%;fill:#d9e6c6;stroke:#75945e;stroke-width:1.5;stroke-linejoin:round}.seal svg path:last-child{fill:none;stroke:#4c7549;stroke-width:3.2;stroke-linecap:round}.completion .primary{border-radius:8px;box-shadow:0 4px 0 #315941}.completion .record{color:#87916d!important}.level-picker{z-index:4}#levelGrid button{box-shadow:0 3px 0 #c4ceba44}#levelGrid button.done{border-color:#a0b88e}.toast{z-index:5}@keyframes arrival{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:741px) and (max-height:810px){.crate-illustration{display:none}.chapter-card{padding:11px 12px}.chapter-card>p{font-size:8px}.rules p{font-size:10px;line-height:1.6;margin:11px 0}.tagline{font-size:20px}.identity h1{font-size:55px}.identity em{font-size:60px}.identity .eyebrow{margin-bottom:13px}}
@media(max-width:1120px){.app{gap:28px}.chapter-stamps{gap:5px}.chapter-stamps i{width:22px;height:22px}.chapter-card{padding:12px}.chapter-card b{font-size:11px}.chapter-card span{font-size:6px}.stats{gap:20px}}
@media(max-width:740px){.app{gap:0}.scene-label{top:10px;left:12px;font-size:6px}.scene-label i{font-size:6px}.stats{gap:14px}.stats .placed{padding:8px 9px}.level-navigation{gap:4px;padding:4px 2px}.level-navigation>div{min-width:29px}.tools>button{padding:12px 5px}.completion .seal{width:56px;height:56px}.completion section{width:min(100%,300px)}}
@media(prefers-reduced-motion:reduce){.completion section{animation:none}.tools>button{transition:none}.stage{transition:none}}