@font-face{font-family:Baloo;src:url('assets/baloo.woff2') format('woff2');font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito.woff2') format('woff2');font-display:swap}
:root{--ink:#173d35;--paper:#f5efdd;--gold:#e9b85b;--line:#c6c9aa;--unit:34px;--c0:#ef7d65;--c1:#ecc956;--c2:#64bbc6;--c3:#b2cf75;--c4:#e8a1bc;--c5:#abaff0;color-scheme:light;font-family:Nunito,sans-serif;background:#f5efdd;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#fff9e9,transparent 64%),repeating-linear-gradient(125deg,transparent 0 7px,#8c956007 7px 8px);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:800 14px Nunito,sans-serif;color:var(--ink);border:1px solid var(--line);background:#fff9e9;border-radius:12px;padding:10px 15px;min-height:44px;cursor:pointer;touch-action:manipulation;transition:transform .16s,background .16s}button:hover:enabled{background:#ebe7cc}button:active:enabled{transform:translateY(1px)}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible{outline:3px solid #d25f39;outline-offset:4px}button.primary{background:var(--ink);color:#fff7df;border-color:var(--ink);box-shadow:0 4px 0 #0b251f}button.primary:hover{background:#255b46}button.text-button{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px}h1,h2,p{margin:0}h1,h2{font-family:Baloo,Georgia,serif;font-weight:600;line-height:1.05}h1{font-size:clamp(34px,4.5vw,66px)}h2{font-size:27px}[hidden]{display:none!important}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.7px;text-transform:uppercase}.masthead{max-width:1240px;margin:auto;padding:18px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:10px;font-weight:800;line-height:1.25;text-transform:uppercase;letter-spacing:1.1px}.wordmark strong{display:block;font:600 27px Baloo,Georgia,serif;text-transform:none;letter-spacing:0}.brand-mark{display:grid;place-items:center;width:42px;height:48px;border:2px solid var(--ink);border-radius:8px 8px 19px 19px;font:600 30px Georgia,serif;background:#e4e6cb}.utilities{display:flex;gap:8px}.utilities button{background:transparent}.save-banner{padding:9px 20px;background:#fae4ba;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;border-block:1px solid #b68039}.save-banner button{font-size:12px;flex-shrink:0}main{max-width:1180px;margin:auto;padding:18px 30px 35px}.home-hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:445px;border-radius:18px;overflow:hidden;background:#e7e9d3;border:1px solid #cad0ae;box-shadow:0 20px 40px #2d44200d}.hero-copy{padding:40px 34px;align-self:center}.hero-copy .eyebrow{margin-bottom:19px;max-width:310px}.hero-copy h1{margin-bottom:16px}.hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:360px;margin-bottom:25px}.hero-copy button{margin:0 8px 9px 0}.hero-art{background:#163f34 url('assets/lantern-glasshouse-workbench.png') center 30%/cover;min-height:390px;position:relative}.paper-seal{position:absolute;right:24px;bottom:25px;display:grid;text-align:center;padding:16px;background:#f7ebccef;color:#254431;font:800 10px Nunito,sans-serif;letter-spacing:1.5px;transform:rotate(4deg);border:1px solid #d8ba74;box-shadow:3px 5px 14px #001e1670}.paper-seal strong{font:600 60px Baloo,serif;line-height:1.15}.collection-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:38px 0 20px}.collection-heading .eyebrow{margin-bottom:6px}.collection-heading>p{font-size:14px;font-weight:900;white-space:nowrap}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level-card{min-height:113px;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:left;padding:15px 16px;background:#fff9e9}.level-card:disabled{opacity:1;background:#edeedc;color:#68705d;border-style:dashed}.card-number{font:600 37px Baloo,serif;border-right:1px solid #ccd0b9}.card-title{display:block;font:600 21px Baloo,serif;line-height:1.15}.card-detail{font-size:11px;display:block;margin-top:6px;font-weight:800}.home-note{font-size:13px;line-height:1.6;text-align:center;max-width:640px;margin:26px auto 0;color:#53634f}.challenge-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}.challenge-heading h1{font-size:37px;margin-top:6px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:18px;align-items:start}.workbench{background:linear-gradient(#082a1a12,#05271d24),url('assets/lantern-glasshouse-workbench.png') center 49%/cover;border:5px solid #7a7346;border-radius:17px;box-shadow:0 5px 0 #434a2c,inset 0 0 70px #01140dc0;padding:28px 22px 15px;min-height:395px;color:#fff6d8;position:relative}.bench-label{font-size:9px;font-weight:900;letter-spacing:2px;text-align:center;color:#fff2c7;text-shadow:0 1px 8px #00160e;background:#143b2ac7;border-radius:9px;padding:7px 5px;max-width:380px;margin:0 auto 18px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:22px;align-items:end}.jar{border:0;background:none!important;box-shadow:none;min-width:0;width:100%;padding:9px 4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:end;color:#fff8df;position:relative}.jar:disabled{opacity:1}.jar:focus-visible{outline-color:#fff2ad;outline-offset:1px}.glass{display:flex;flex-direction:column-reverse;position:relative;height:calc(var(--capacity)*var(--unit) + 8px);width:66px;border:3px solid #d2eadbce;border-top:5px solid #fff6dbe3;border-radius:5px 5px 18px 18px;background:linear-gradient(90deg,#f7ffff40,#0c443442 27%,#2c71512e 67%,#f3fff84a);box-shadow:inset 5px 0 7px #e3fff426,4px 6px 7px #001e1b55;transition:transform .2s,filter .2s}.glass::after{content:'';position:absolute;inset:2px 4px 9px 3px;border-left:3px solid #ffffff60;border-radius:0 0 0 9px;pointer-events:none}.unit{height:var(--unit);width:100%;flex-shrink:0;position:relative;border-top:1px solid #eef5c941;background:linear-gradient(100deg,#fff2,var(--liquid,#fff0) 25%,var(--liquid,#fff0) 70%,#002d2425);display:grid;place-items:center}.unit.filled{background:linear-gradient(100deg,#ffffff35,transparent 25%,transparent 70%,#27371935),var(--liquid);color:#213f35;text-shadow:0 1px #ffffff50;font:900 15px Nunito,sans-serif;border-top:1px solid #ffffff90}.unit:first-child{border-radius:0 0 13px 13px}.unit::before{content:attr(data-unit);font:800 10px Nunito,sans-serif;position:absolute;right:-17px;top:0;color:#fff2c2;text-shadow:0 1px 2px #001d10}.unit::after{content:'';position:absolute;right:-6px;top:0;width:6px;height:1px;background:#fff1c7}.jar-label{margin-top:9px;display:block;background:#173e31eb;border:1px solid #d4c48d8c;border-radius:9px;padding:4px 9px;min-width:80px;font-size:12px;white-space:nowrap}.jar-label strong{font-size:15px;color:#ffdda1}.jar[aria-pressed=true] .glass{transform:translateY(-9px) rotate(-4deg);filter:drop-shadow(0 0 7px #ffda84)}.jar.can-pour .glass{border-color:#ffeea4;box-shadow:0 0 0 3px #fff1a547,inset 5px 0 7px #e3fff426}.jar.done .jar-label{background:#eff0c6;color:#183e2a}.jar.last-pour .glass{animation:settle .38s ease-out}.board-status{font-size:13px;font-weight:800;text-align:center;min-height:42px;padding-top:17px;text-shadow:0 1px 4px #00150e;max-width:500px;margin:auto}.toolbox{display:grid;gap:17px}.recipe{border-top:3px double #9ca984;border-bottom:1px solid #b9c3a3;padding:16px 0}.recipe .eyebrow{margin-bottom:11px}.recipe h2{font-size:25px;margin-bottom:12px}.recipe>p:not(.eyebrow){font-size:14px;line-height:1.55}.recipe .unit-note{margin-top:12px;font-size:12px!important;color:#4a6048}.tools{display:grid;grid-template-columns:1fr 1fr;gap:9px}.attempt{font-size:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;color:#526248}.attempt span:first-child{font-weight:900}footer{max-width:1180px;margin:auto;padding:15px 25px 25px;text-align:center;font-size:11px;color:#647052}footer span{margin:0 12px}dialog{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #b4be95;border-radius:20px;background:#faf3df;color:var(--ink);padding:23px;box-shadow:0 22px 100px #001f1790}dialog::backdrop{background:#092a20a3;backdrop-filter:blur(5px)}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-top button{font-size:12px;padding-inline:11px}dialog h2{font-size:34px;margin-bottom:13px}#modal-copy{font-size:15px;line-height:1.6}#modal-copy p+p{margin-top:10px}#modal-copy ul{padding-left:20px}#modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}#modal-actions button{flex:1 1 auto}.immersive #app{min-height:100dvh}.immersive .masthead{padding-top:max(12px,env(safe-area-inset-top))}.immersive footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@keyframes settle{0%{transform:translateY(-6px)}50%{transform:translateY(2px)}100%{transform:none}}
@media(min-width:1060px){.board{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.workbench{padding-top:50px;min-height:420px}.bench-label{margin-bottom:40px}.jar-label{font-size:11px;min-width:78px}.glass{width:62px}}
@media(max-width:720px){.masthead{padding:13px 18px}.wordmark strong{font-size:23px}.brand-mark{display:none}.utilities{gap:5px}.utilities button{font-size:12px;padding:8px 10px}main{padding:12px 18px 24px}.home-hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:26px}.hero-copy h1{font-size:47px}.hero-copy .eyebrow{font-size:10px}.hero-art{min-height:170px;background-position:center 23%;background-size:cover}.paper-seal{padding:10px;right:15px;bottom:13px;font-size:8px}.paper-seal strong{font-size:38px}.collection-heading{margin-top:25px;align-items:start;gap:8px}.collection-heading h2{font-size:25px}.collection-heading>p{font-size:11px;margin-top:5px}.collection-heading .eyebrow{font-size:9px}.levels{grid-template-columns:1fr;gap:9px}.level-card{min-height:82px}.play-layout{grid-template-columns:1fr;gap:20px}.challenge-heading{margin-bottom:13px}.challenge-heading h1{font-size:29px}.challenge-heading .eyebrow{font-size:9px}.challenge-heading>button{font-size:12px;padding:9px}.workbench{padding:20px 16px 12px}.board{gap:15px 14px}.glass{width:62px}.toolbox{grid-template-columns:1fr;gap:12px}.recipe{order:3;padding:14px 0}.recipe h2 br{display:none}.recipe h2{font-size:23px}.recipe .eyebrow{display:none}.recipe .unit-note{margin-top:5px}.tools{grid-template-columns:repeat(4,1fr);gap:7px}.tools button{padding-inline:4px;font-size:13px}.home-note{font-size:12px}.bench-label{font-size:8px;letter-spacing:1.1px}}
@media(max-width:360px){:root{--unit:27px}.masthead{padding:10px}.wordmark strong{font-size:21px}.wordmark{font-size:8px}.utilities button{padding:8px;font-size:11px}main{padding:10px}.hero-copy{padding:23px}.hero-copy h1{font-size:41px}.glass{width:57px}.jar-label{min-width:73px;padding:4px 6px;font-size:11px}.board{column-gap:10px}.workbench{padding-inline:12px}.collection-heading h2{font-size:22px}.challenge-heading h1{font-size:26px}.save-banner{flex-wrap:wrap;padding:8px 10px;gap:5px}}
@media(orientation:landscape) and (max-height:520px){:root{--unit:25px}.masthead{padding:7px 18px}.wordmark strong{font-size:22px}.brand-mark{display:none}main{padding:6px 18px 20px}.challenge-heading{margin-bottom:8px}.challenge-heading h1{font-size:25px;margin-top:2px}.play-layout{grid-template-columns:minmax(0,1fr) 194px;gap:15px}.workbench{min-height:0;padding:12px 14px 7px}.board{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.bench-label{display:none}.glass{width:48px}.jar{padding:7px 1px 2px}.jar-label{font-size:10px;min-width:58px;padding:4px}.jar-label strong{font-size:13px}.unit::before{right:-12px;font-size:8px}.unit.filled{font-size:12px}.board-status{font-size:11px;padding-top:10px;min-height:31px}.recipe{order:0;padding:6px 0 10px}.recipe .eyebrow,.recipe>p:not(.unit-note){display:none}.recipe h2{font-size:21px;margin-bottom:6px}.recipe .unit-note{font-size:11px!important;margin:0}.tools{grid-template-columns:1fr 1fr;gap:6px}.tools button{font-size:12px}.toolbox{gap:9px}.attempt{font-size:10px}footer{padding:0 15px 15px}.home-hero{grid-template-columns:1fr 1fr}.hero-art{min-height:310px}.hero-copy{padding:23px}.hero-copy h1{font-size:40px}.levels{grid-template-columns:repeat(3,1fr)}.level-card{grid-template-columns:30px 1fr;padding:10px}.card-title{font-size:17px}.card-number{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1060px){.board{grid-template-columns:repeat(var(--jars,6),minmax(0,1fr))}}
@media(orientation:landscape) and (max-height:520px){.board{grid-template-columns:repeat(var(--jars,6),minmax(0,1fr))}}
@media(orientation:portrait) and (max-height:700px) and (max-width:480px){
  :root{--unit:19px}.workbench{padding:11px 12px 8px}.bench-label{display:none}.board{row-gap:10px}.jar{padding-top:4px}.jar-label{margin-top:6px}.unit.filled{font-size:12px}.board-status{min-height:30px;padding-top:9px;font-size:11px}.play-layout{gap:12px}.challenge-heading{margin-bottom:9px}.challenge-heading>button{white-space:nowrap;font-size:11px;padding-inline:8px}.challenge-heading h1{font-size:24px}.recipe{margin-top:2px}
}
@media(orientation:portrait) and (max-height:600px) and (max-width:360px){:root{--unit:16px}.unit::before{font-size:9px}.jar-label{font-size:10px;padding:3px 5px}.jar-label strong{font-size:12px}.challenge-heading h1{font-size:23px}}
.capacity-2{--capacity:2}.capacity-3{--capacity:3}.capacity-4{--capacity:4}.capacity-5{--capacity:5}.capacity-6{--capacity:6}
.colour-0{--liquid:var(--c0)}.colour-1{--liquid:var(--c1)}.colour-2{--liquid:var(--c2)}.colour-3{--liquid:var(--c3)}.colour-4{--liquid:var(--c4)}.colour-5{--liquid:var(--c5)}
.board[data-count="5"]{--jars:5}.board[data-count="6"]{--jars:6}
.win-seal{display:none;margin:0 auto 12px;width:76px;height:76px;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe9b1,#d9a54a 72%);color:#173d35;box-shadow:0 3px 0 #ab7834,inset 0 0 0 4px #ffebbf88}
dialog[data-kind="win"]{border:2px solid #d9b563;background:radial-gradient(ellipse at top,#fff6d6,#f6edda 75%)}
dialog[data-kind="win"] .win-seal{display:grid}
dialog.celebrating .win-seal{animation:seal-arrive .6s cubic-bezier(.2,.8,.2,1)}
.auto-next-status{font-size:12px;line-height:1.5;margin-top:16px;color:#365640}
.completion-progress{height:5px;margin-top:10px;border-radius:4px;overflow:hidden;background:#bdc7a5}
.completion-progress span{display:block;height:100%;background:linear-gradient(90deg,#285840,#d3a03f);transform-origin:left;animation:next-workbench 2.2s linear forwards}
@keyframes seal-arrive{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
@keyframes next-workbench{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){dialog.celebrating .win-seal,.completion-progress span{animation:none!important}}
@media(max-width:480px) and (max-height:700px){
 dialog[data-kind="win"]{padding:16px}
 dialog[data-kind="win"] .modal-top{margin-bottom:10px}
 dialog[data-kind="win"] .win-seal{width:52px;height:52px;margin-bottom:10px}
 dialog[data-kind="win"] .win-seal svg{width:46px;height:46px}
 dialog[data-kind="win"] h2{font-size:28px;margin-bottom:10px}
 dialog[data-kind="win"] #modal-copy{font-size:13px;line-height:1.45}
 dialog[data-kind="win"] #modal-copy p+p{margin-top:8px}
 dialog[data-kind="win"] .auto-next-status{font-size:11px;margin-top:10px}
 dialog[data-kind="win"] #modal-actions{margin-top:12px;gap:8px}
 dialog[data-kind="win"] #modal-actions button{flex:1 1 0;padding-inline:8px;font-size:12px}
}
@media(orientation:landscape) and (max-height:520px){
 dialog[data-kind="win"][open]{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 14px;width:min(640px,calc(100% - 28px));padding:16px}
 dialog[data-kind="win"] .modal-top{grid-column:1/-1;margin:0}
 dialog[data-kind="win"] .win-seal{grid-column:1;grid-row:2/5;width:60px;height:60px;margin:0}
 dialog[data-kind="win"] .win-seal svg{width:52px;height:52px}
 dialog[data-kind="win"] h2{grid-column:2;font-size:26px;margin:0}
 dialog[data-kind="win"] #modal-copy{grid-column:2;font-size:12px;line-height:1.4}
 dialog[data-kind="win"] #modal-copy p+p{margin-top:5px}
 dialog[data-kind="win"] .auto-next-status{grid-column:2;font-size:11px;margin:0}
 dialog[data-kind="win"] .completion-progress{grid-column:2;margin:0}
 dialog[data-kind="win"] #modal-actions{grid-column:1/-1;margin-top:4px}
}
@media(orientation:portrait) and (max-height:700px) and (max-width:480px){.workbench{min-height:0}}
