:root{--font-sans:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--font-serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;--cream:#fbf5e8;--paper:#fdfaf2;--paper-raised:#fff;--bg:#f3ede0;--ink:#2f3d35;--ink-soft:#566257;--ink-muted:#6d7970;--green:#2f5a4c;--green-mid:#4b7a63;--green-soft:#dfeadd;--green-soft-ink:#365a44;--coral:#cf6a45;--coral-strong:#b8552f;--coral-soft:#fdeee6;--coral-soft-ink:#a44a29;--gold:#e3a24d;--gold-soft:#f4edc7;--gold-soft-ink:#7a6224;--line:#e3ddce;--line-strong:#cfc7b6;--r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-2xl:26px;--r-pill:999px;--shadow-sm:0 2px 6px #4e422e14;--shadow-md:0 8px 20px #4e422e1a;--shadow-lg:0 16px 34px #4e422e29;--shadow-focus:0 0 0 3px #4b7a6373;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:22px;--s-6:32px;--s-7:48px;--ease:cubic-bezier(.2, .7, .3, 1);color:var(--ink);background:var(--bg);font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%}@media (prefers-color-scheme:dark){:root{--cream:#262521;--paper:#2b2a26;--paper-raised:#322f2a;--bg:#1f1e1b;--ink:#eee7d9;--ink-soft:#c6bfb1;--ink-muted:#a49d8f;--green:#9ec3ad;--green-mid:#86b199;--green-soft:#313a33;--green-soft-ink:#bfe0c9;--coral:#e07d57;--coral-strong:#f0946f;--coral-soft:#3a2c25;--coral-soft-ink:#f0a683;--gold:#e3a24d;--gold-soft:#3a3320;--gold-soft-ink:#e8cf8f;--line:#3d3a33;--line-strong:#4a463d;--shadow-sm:0 2px 6px #0000004d;--shadow-md:0 8px 20px #00000061;--shadow-lg:0 16px 34px #00000080}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}img{max-width:100%}:focus-visible{outline:3px solid var(--green-mid);outline-offset:2px;border-radius:var(--r-sm)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--green-mid);outline-offset:2px}.skip-link{left:var(--s-3);z-index:100;border-radius:var(--r-sm);color:#fff;background:var(--green);transition:top .18s var(--ease);padding:10px 16px;font-size:13px;font-weight:700;text-decoration:none;position:absolute;top:-60px}.skip-link:focus{top:calc(env(safe-area-inset-top,0px) + var(--s-2))}.app-shell{width:min(1220px,100% - 32px);min-height:100vh;padding:calc(env(safe-area-inset-top,0px) + 20px) 0 calc(env(safe-area-inset-bottom,0px) + 96px);margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:var(--s-3);display:flex}.wordmark{color:var(--green);font:700 22px/1 var(--font-serif);letter-spacing:-.03em;border-radius:var(--r-sm);align-items:center;gap:7px;padding:4px 2px;text-decoration:none;display:inline-flex}.wordmark-dot{background:var(--coral);border-radius:50% 50% 50% 3px;width:12px;height:12px;display:inline-block;transform:rotate(-8deg)}.topbar-actions{align-items:center;gap:var(--s-2);display:flex}.language-toggle,.topbar-favorite{border:1px solid var(--line-strong);width:44px;height:44px;color:var(--ink-soft);background:var(--paper);transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);border-radius:50%;place-items:center;font-size:11px;font-weight:700;text-decoration:none;display:grid}.language-toggle:hover,.topbar-favorite:hover{background:var(--green-soft);color:var(--green);border-color:var(--green-mid)}.language-toggle:active,.topbar-favorite:active{transform:scale(.94)}.topbar-favorite.active{color:var(--coral-strong);border-color:var(--coral);background:var(--coral-soft)}.page-content{padding-top:10px}.bottom-nav{z-index:10;right:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);gap:var(--s-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:color-mix(in srgb, var(--paper) 88%, transparent);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:6px;display:flex;position:fixed;transform:translate(50%)}.bottom-nav-item{border-radius:var(--r-md);min-width:76px;min-height:48px;color:var(--ink-muted);transition:color .15s var(--ease), background .15s var(--ease);flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 11px;font-size:10px;font-weight:600;text-decoration:none;display:flex}.bottom-nav-item span{font-size:15px}.bottom-nav-item:hover{color:var(--green)}.bottom-nav-item.active{color:var(--green);background:var(--green-soft);font-weight:700}@media (prefers-reduced-motion:no-preference){.page-enter{animation:page-enter .3s var(--ease) both}@keyframes page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card-rail>*,.browse-rail>*{animation:card-in .4s var(--ease) both}.card-rail>:nth-child(2),.browse-rail>:nth-child(2){animation-delay:50ms}.card-rail>:nth-child(3),.browse-rail>:nth-child(3){animation-delay:.1s}.card-rail>:nth-child(4),.browse-rail>:nth-child(4){animation-delay:.15s}.card-rail>:nth-child(n+5),.browse-rail>:nth-child(n+5){animation-delay:.2s}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}.eyebrow{color:var(--coral-soft-ink);letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px;font-size:10px;font-weight:700}h1,h2,h3,p{overflow-wrap:break-word}h1{color:var(--green);font:700 clamp(36px, 6vw, 68px)/.94 var(--font-serif);letter-spacing:-.03em;margin:0}h2{color:var(--green);font:700 23px/1 var(--font-serif);letter-spacing:-.02em;margin:0}.primary-button{justify-content:center;align-items:center;gap:var(--s-2);border-radius:var(--r-md);color:#fff;background:var(--coral);min-height:48px;box-shadow:var(--shadow-md);transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);border:0;padding:14px 20px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.primary-button:hover{background:var(--coral-strong)}.text-button{min-height:44px;margin:var(--s-3) auto 0;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--ink-soft);transition:color .15s var(--ease);background:0 0;border:0;font-size:12px;font-weight:700;display:block}.text-button:hover{color:var(--coral-strong)}.back-button{align-items:center;gap:var(--s-1);min-height:44px;margin:0 0 var(--s-4);padding:0 var(--s-2) 0 0;border-radius:var(--r-sm);color:var(--ink-soft);transition:color .15s var(--ease), transform .15s var(--ease);background:0 0;border:0;font-size:13px;font-weight:600;display:inline-flex}.back-button:hover{color:var(--green)}@media (prefers-reduced-motion:no-preference){.primary-button:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.primary-button:active{transform:translateY(0)scale(.98)}.back-button:hover{transform:translate(-2px)}}.home-hero{grid-template-columns:minmax(260px,.83fr) minmax(300px,1fr);align-items:center;gap:clamp(22px,7vw,90px);max-width:1030px;margin:48px auto 76px;display:grid}.home-hero-copy{padding:var(--s-5) 0}.hero-description{max-width:360px;color:var(--ink-soft);margin:15px 0 0;font-size:15px;line-height:1.5}.hero-cta{margin-top:var(--s-6)}.hero-note{color:var(--ink-muted);align-items:center;gap:9px;margin-top:15px;font-size:11px;display:flex}.spark{color:var(--gold);flex:none;display:block}.home-hero-card{justify-self:end;width:100%;max-width:380px;position:relative}.hero-card-label{z-index:1;border-radius:var(--r-pill);color:var(--gold-soft-ink);background:var(--gold-soft);box-shadow:var(--shadow-sm);padding:8px 12px;font-size:10px;font-weight:700;position:absolute;top:-14px;left:22px}.section-heading{margin:0 0 var(--s-4);justify-content:space-between;align-items:baseline;gap:15px;display:flex}.section-heading a{color:var(--ink-muted);border-radius:var(--r-sm);transition:color .15s var(--ease);padding:6px 4px;font-size:11px;font-weight:700;text-decoration:none}.section-heading a:hover{color:var(--coral-strong)}.card-rail-section{margin-bottom:var(--s-7)}.card-rail,.browse-rail{scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;-webkit-overflow-scrolling:touch;gap:14px;padding:2px 4px 18px 2px;display:flex;overflow-x:auto}.card-rail:focus-visible,.browse-rail:focus-visible{outline:3px solid var(--green-mid);outline-offset:4px;border-radius:var(--r-lg)}.activity-card{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--shadow-sm);cursor:pointer;scroll-snap-align:start;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);flex:0 0 clamp(245px,27vw,290px);position:relative;overflow:hidden}.activity-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}.activity-card:focus-within{border-color:var(--green-mid)}@media (prefers-reduced-motion:no-preference){.activity-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.activity-card:active{transform:translateY(-1px)scale(.99)}}.activity-card-art{background:var(--green-soft);height:250px;position:relative;overflow:hidden}.activity-card-art img{object-fit:cover;object-position:center 52%;width:100%;height:100%;transition:transform .3s var(--ease);display:block}@media (prefers-reduced-motion:no-preference){.activity-card:hover .activity-card-art img{transform:scale(1.04)}}.card-favorite{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:44px;height:44px;transition:transform .15s var(--ease), background .15s var(--ease);background:#28342b6b;border:1px solid #ffffff8c;border-radius:50%;place-items:center;display:grid;position:absolute;top:10px;right:10px}.card-favorite:hover{background:#28342b99}.card-favorite:active{transform:scale(.9)}.card-favorite.selected{color:var(--coral);background:#fffaf0f0;border-color:#fffc}.activity-card-content{padding:15px 16px 17px}.card-meta{color:var(--ink-muted);gap:6px;font-size:11px;font-weight:600;display:flex}.activity-card h3{min-height:47px;color:var(--green);font:700 25px/.96 var(--font-serif);letter-spacing:-.02em;margin:12px 0}.card-skills{flex-wrap:wrap;gap:5px;display:flex}.card-skills span{border-radius:var(--r-pill);color:var(--gold-soft-ink);background:var(--gold-soft);padding:6px 9px;font-size:10px;font-weight:700}.home-tip{max-width:600px;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink-soft);background:var(--paper);box-shadow:var(--shadow-sm);gap:13px;margin:0 auto 20px;display:flex}.tip-icon{color:var(--gold);flex:none;display:block}.home-tip strong{color:var(--green);font-size:13px;display:block}.home-tip p{margin:4px 0 0;font-size:12px;line-height:1.45}.browse-heading{justify-content:space-between;align-items:end;gap:20px;max-width:900px;margin:51px auto 0;display:flex}.browse-heading h1{font-size:clamp(38px,6vw,62px)}.browse-heading p{color:var(--ink-soft);margin:13px 0 0;font-size:14px}.count-badge{border-radius:var(--r-pill);color:var(--green-soft-ink);background:var(--green-soft);white-space:nowrap;padding:9px 12px;font-size:11px;font-weight:700}.browse-controls{max-width:900px;margin:28px auto}.search-wrap{align-items:center;gap:var(--s-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink-muted);background:var(--paper);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);padding:12px 14px;display:flex}.search-wrap:focus-within{border-color:var(--green-mid);box-shadow:var(--shadow-focus)}.search-wrap svg{color:var(--ink-muted);flex:none}.search-wrap input{width:100%;min-height:24px;color:var(--ink);background:0 0;border:0;outline:none;font-size:15px}.search-wrap input::placeholder{color:var(--ink-muted)}.filter-row{-webkit-overflow-scrolling:touch;gap:7px;margin-top:10px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-chip{border:1px solid var(--line-strong);border-radius:var(--r-sm);min-height:44px;color:var(--ink-soft);background:var(--paper);white-space:nowrap;transition:transform .12s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);flex:none;padding:8px 14px;font-size:12px;font-weight:700}.filter-chip:hover{border-color:var(--green-mid);color:var(--green)}.filter-chip:active{transform:scale(.96)}.filter-chip.active{border-color:var(--green-mid);color:var(--green-soft-ink);background:var(--green-soft)}.filter-group{margin-top:16px}.filter-group-label{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;margin-bottom:2px;font-size:11px;font-weight:700;display:flex}.browse-rail{flex-wrap:wrap;max-width:1100px;margin:auto}.browse-rail .activity-card{flex-basis:clamp(250px,29vw,300px)}.empty-state{gap:var(--s-2);max-width:380px;min-height:240px;padding:var(--s-6) var(--s-4);color:var(--ink-muted);text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--paper);place-items:center;margin:20px auto;font-size:13px;display:grid}.empty-state>svg{color:var(--green-mid);opacity:.8}.empty-state-title{color:var(--green);margin:4px 0 0;font-size:17px;font-weight:700}.empty-state .primary-button{margin-top:var(--s-3)}.detail-page{max-width:1060px;margin:43px auto 40px}.detail-layout{grid-template-columns:minmax(300px,1fr) minmax(320px,.9fr);align-items:start;gap:clamp(25px,6vw,74px);display:grid}.detail-visual{border-radius:var(--r-2xl);background:var(--green-soft);box-shadow:var(--shadow-md);overflow:hidden}.detail-visual img{object-fit:cover;object-position:center 50%;width:100%;height:min(620px,65vw);min-height:430px;display:block}.detail-visual-caption{color:var(--gold-soft-ink);background:var(--gold-soft);justify-content:space-between;padding:13px 16px;font-size:11px;font-weight:700;display:flex}.detail-content{padding-top:var(--s-5)}.detail-heading-row{justify-content:space-between;gap:15px;display:flex}.detail-heading-row h1{font-size:clamp(40px,5vw,65px)}.favorite-button{border:1px solid var(--line-strong);width:48px;height:48px;color:var(--ink-soft);background:var(--paper);transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);border-radius:50%;flex:0 0 48px;place-items:center;display:grid}.favorite-button:hover{border-color:var(--green-mid);color:var(--green)}.favorite-button:active{transform:scale(.92)}.favorite-button.selected{border-color:var(--coral);color:var(--coral);background:var(--coral-soft)}.detail-actions{gap:var(--s-2);flex:none;display:flex}.toast{z-index:20;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);align-items:center;gap:var(--s-2);border-radius:var(--r-md);color:#fdfaf2;background:var(--green);max-width:calc(100% - 32px);box-shadow:var(--shadow-lg);text-align:center;padding:12px 18px;font-size:13px;font-weight:600;display:flex;position:fixed;transform:translate(-50%)}@media (prefers-reduced-motion:no-preference){.toast{animation:toast-in .28s var(--ease) both}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.detail-block{margin-top:var(--s-6)}.detail-block h2{margin-bottom:var(--s-3);font-size:20px}.materials-list,.develops-list{flex-wrap:wrap;gap:7px;display:flex}.material{border-radius:var(--r-sm);color:var(--green-soft-ink);background:var(--green-soft);padding:10px 12px;font-size:12px;font-weight:600}.develops-item{border-radius:var(--r-sm);color:var(--gold-soft-ink);background:var(--gold-soft);padding:10px 12px;font-size:12px;font-weight:600}.nothing{color:var(--ink-muted);font-size:13px}.steps-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.steps-list li{color:var(--ink-soft);align-items:start;gap:10px;font-size:13px;line-height:1.45;display:flex}.steps-list li span{color:#fff;background:var(--green-mid);border-radius:50%;flex:0 0 26px;place-items:center;width:26px;height:26px;font-size:11px;font-weight:700;display:grid}.steps-list li p{margin:3px 0 0}.safety-note{margin-top:var(--s-5);border-left:3px solid var(--coral);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--coral-soft-ink);background:var(--coral-soft);align-items:start;gap:10px;padding:12px 14px;font-size:12px;line-height:1.45;display:flex}.safety-note span{color:#fff;background:var(--coral);border-radius:50%;flex:0 0 20px;place-items:center;width:20px;height:20px;font-size:10px;font-weight:700;display:grid}.safety-note .safety-icon svg{display:block}.safety-note p{margin:2px 0 0}.level-up-block{margin-top:var(--s-5);padding:var(--s-4);border-radius:var(--r-lg);color:var(--green-soft-ink);background:var(--green-soft);font-size:12px;line-height:1.5}.level-up-block .eyebrow{color:var(--green-mid);margin-bottom:6px}.level-up-block p:last-child{margin:0}.start-button{width:100%;margin-top:var(--s-5)}.play-page{max-width:1030px;margin:43px auto 40px}.play-header{color:var(--ink-soft);justify-content:space-between;align-items:center;font-size:12px;font-weight:700;display:flex}.play-header .back-button{margin:0}.play-progress{margin:4px 0 var(--s-5);gap:5px;display:flex}.play-progress i{border-radius:var(--r-pill);background:var(--line-strong);height:5px;transition:background .3s var(--ease);flex:1}.play-progress i.active{background:var(--green-mid)}.play-layout{grid-template-columns:minmax(300px,1fr) minmax(320px,.85fr);align-items:center;gap:clamp(25px,7vw,90px);display:grid}.play-visual{border-radius:var(--r-2xl);background:var(--green-soft);box-shadow:var(--shadow-md);overflow:hidden}.play-visual img{object-fit:cover;object-position:center 50%;width:100%;height:min(590px,62vw);min-height:420px;display:block}.step-number{width:44px;height:44px;margin:var(--s-5) 0 15px;color:#fff;background:var(--green-mid);font:700 19px var(--font-serif);border-radius:50%;place-items:center;display:grid}.play-instruction h1{max-width:480px;font-size:clamp(34px,5vw,62px)}.play-hint{max-width:370px;margin:18px 0 var(--s-5);color:var(--ink-soft);font-size:14px;line-height:1.5}.play-instruction .primary-button{min-width:190px}.done-page{text-align:center;max-width:540px;margin:100px auto 30px}.done-mark{width:76px;height:76px;margin:0 auto var(--s-5);border-radius:var(--r-2xl) var(--r-2xl) var(--r-2xl) 6px;color:var(--coral);background:var(--gold-soft);box-shadow:var(--shadow-sm);place-items:center;display:grid;transform:rotate(-5deg)}.done-mark svg{display:block}.done-page h1{font-size:clamp(40px,7vw,70px)}.done-page>p:not(.eyebrow){color:var(--ink-soft);margin:17px auto 0;font-size:14px;line-height:1.5}.done-level{margin:var(--s-6) 0;padding:var(--s-4);border-radius:var(--r-lg);color:var(--green-soft-ink);background:var(--green-soft);text-align:left}.done-level .eyebrow{color:var(--green-mid);margin-bottom:7px}.done-level strong{color:var(--green);font-size:13px;line-height:1.5;display:block}.done-page .primary-button,.done-page .text-button{width:100%}.favorites-page{margin:50px auto}.favorites-page h1{margin-bottom:var(--s-5)}.not-found-page{text-align:center;max-width:480px;margin:100px auto 30px}.not-found-page h1{font-size:clamp(32px,6vw,48px)}.not-found-page>p:not(.eyebrow){margin:14px auto var(--s-5);color:var(--ink-soft);font-size:14px;line-height:1.5}.not-found-page .primary-button{display:inline-flex}.favorite-rail{padding-left:0}.settings-page{max-width:620px;margin:46px auto 60px}.settings-block{margin-top:var(--s-6);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-sm)}.settings-block h2{margin-bottom:6px}.settings-hint{margin:0 0 var(--s-4);color:var(--ink-soft);font-size:13px;line-height:1.5}.feedback-link{align-items:center;gap:var(--s-2);min-height:44px;color:var(--green);font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.feedback-link:hover{color:var(--coral-strong);text-decoration:underline}@media (width<=780px){.app-shell{width:min(100% - 24px,600px);padding-top:calc(env(safe-area-inset-top,0px) + 15px)}.home-hero{margin:45px auto 58px;display:block}.home-hero-card{max-width:370px;margin:38px auto 0}.home-hero-copy{max-width:490px}.detail-layout,.play-layout{grid-template-columns:1fr}.detail-visual img,.play-visual img{height:560px}.detail-content,.play-instruction{padding:4px 4px 0}.play-layout{gap:28px}.play-instruction h1{font-size:clamp(34px,9vw,46px)}}@media (width<=480px){.bottom-nav{justify-content:space-around;width:calc(100% - 24px)}.bottom-nav-item{flex:1;min-width:0}.activity-card{flex-basis:78vw}.browse-rail .activity-card{flex-basis:100%}.activity-card-art{height:245px}.detail-visual img,.play-visual img{height:470px;min-height:0}.detail-heading-row h1{font-size:clamp(32px,11vw,45px)}.done-page{margin-top:70px}}@media (height<=520px) and (orientation:landscape){.play-page{margin:20px auto}.play-visual img{height:min(70vh,300px);min-height:0}.step-number{margin:12px 0 10px}.play-hint{margin:12px 0 16px}}