:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#302a23;background:#f5f1e7;font-synthesis:none;line-height:1.65}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input{font:inherit}button,.button{cursor:pointer;border:0;border-radius:999px;padding:.8rem 1.35rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none}.primary{background:#354b3d;color:#fff}.secondary{background:#fff;color:#354b3d;border:1px solid #b4c0ad}.plain{background:transparent;color:#51483d;border:1px solid #c9c1b3}button:hover,.button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #b76538;outline-offset:3px}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:white}.site-header{max-width:1280px;margin:auto;padding:1.2rem 5%;display:flex;align-items:center;gap:2rem;border-bottom:1px solid #ded8ca}.brand{text-decoration:none;font-weight:800;letter-spacing:-.04em;font-size:1.3rem;white-space:nowrap}.brand-mark{color:#bc7951;font-size:1.7rem}.site-header nav{display:flex;gap:1.6rem;margin-left:auto}.site-header nav a{text-decoration:none;font-size:.92rem;font-weight:650}.points{font-size:.83rem;background:#e8ecdf;border-radius:99px;padding:.35rem .8rem;white-space:nowrap}.notice{background:#fff0ce;padding:.7rem 5%;text-align:center}main{max-width:1200px;margin:auto;min-height:70vh;padding:0 5%}footer{border-top:1px solid #ded8ca;padding:1.5rem 5%;color:#776e60;display:flex;justify-content:space-between;font-size:.82rem}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem;padding:5rem 0 4rem}.kicker{font-size:.75rem;letter-spacing:.18em;font-weight:800;color:#88745f;text-transform:uppercase}.hero h1{font-size:clamp(2.8rem,6vw,5.2rem);line-height:1.12;letter-spacing:-.05em;margin:.7rem 0 1.5rem}.hero h1 em{font-style:normal;color:#aa6846}.lead{color:#6f675a;font-size:1.08rem;max-width:35rem}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}.hero-art{min-height:390px;border-radius:48% 48% 43% 43%;background:#e8e9d9;display:grid;place-items:center;position:relative}.hero-art:before,.hero-art:after{position:absolute;color:#a9a893;font-size:2rem;content:'✳'}.hero-art:before{top:15%;left:16%}.hero-art:after{bottom:20%;right:14%}.cup{position:relative;width:170px;height:145px;border:8px solid #f9f8f0;border-top:12px solid #f9f8f0;border-radius:12px 12px 70px 70px;background:#71462f;box-shadow:0 14px 0 -6px #d6d4c2,0 25px 30px #354b3d20;overflow:visible}.cup:after{content:'';position:absolute;right:-48px;top:12px;width:40px;height:55px;border:8px solid #f9f8f0;border-left:0;border-radius:0 30px 30px 0}.cup-water{position:absolute;bottom:0;left:0;right:0;background:#b8d0c3;opacity:.85;border-radius:0 0 55px 55px;transition:height .2s}.cup-label{text-align:center;margin-top:1.4rem;color:#736859;font-size:.85rem}.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:0 0 4rem}.intro-strip article,.panel,.card{background:#fffdf8;border:1px solid #e3ddcf;border-radius:22px;padding:1.4rem}.intro-strip strong{display:block;color:#405547}.intro-strip p{margin:.3rem 0 0;color:#766e61;font-size:.9rem}.page-top{padding:3rem 0 1.4rem}.page-top h1{font-size:clamp(2rem,4vw,3rem);line-height:1.2;letter-spacing:-.035em;margin:.5rem 0}.page-top p{color:#746b5d;max-width:43rem}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding-bottom:3rem}.panel h2{margin-top:0;font-size:1.2rem}.visual-panel{background:#e9ecdf;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:330px}.visual-panel .cup{transform:scale(.8);margin:0 auto}.visual-panel p{text-align:center;color:#5b6557}.step{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#8a735f;font-weight:800}.control{margin:1.3rem 0}.control label{display:block;font-weight:700}.control input[type=range]{width:100%;accent-color:#526c57}.control input[type=number]{width:7rem;border:1px solid #bcb7aa;border-radius:8px;padding:.4rem}.choices{display:grid;gap:.6rem;margin:1rem 0}.choice{display:flex;gap:.7rem;align-items:center;border:1px solid #ddd6c8;border-radius:12px;padding:.75rem;cursor:pointer}.choice input{accent-color:#354b3d;width:20px;height:20px}.feedback{border-left:4px solid #bb7951;background:#f8efe7;padding:.75rem 1rem;margin:1rem 0}.success{border-color:#69866e;background:#ecf3e9}.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;padding-bottom:4rem}.tag{font-size:.75rem;color:#806c58}.loading{padding:4rem}.muted{font-size:.85rem;color:#736b5f}.ingredient-list{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.ingredient-list label{padding:.5rem .8rem;border-radius:99px;border:1px solid #b9c5b4;background:#fff}.ingredient-list input{accent-color:#354b3d}.ingredient-list input:focus-visible{outline:3px solid #b76538}
.cup-empty{background:#f4f2e9}.scene-frame{width:100%;height:250px;display:grid;place-items:center;position:relative}.world-scene{height:320px}.scene-fallback{display:grid;place-items:center}.scene-fallback[hidden]{display:none}.scene-canvas{width:100%;height:100%;display:block}.scene-toggle{background:#ffffffc9;border:1px solid #aebbaa;color:#354b3d;font-size:.78rem;min-height:44px;padding:.4rem 1rem}.scene-status{font-size:.8rem;color:#5b6557}.hero-art{grid-template-rows:1fr auto auto;padding:1rem}.hero-art:before,.hero-art:after{pointer-events:none}.references{font-size:.85rem;overflow-wrap:anywhere;margin-top:1rem}.references summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.references summary::before{content:'▸';margin-right:.5rem}.references[open] summary::before{content:'▾'}
.world-map{padding:0 0 3.5rem}.world-map-heading{max-width:44rem}.world-map-heading h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.035em;line-height:1.2;margin:.5rem 0}.world-map-heading p,.world-map-note{color:#6f675a}.world-map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.7rem 0}.map-card{background:#ecefdf;border:1px solid #d7decf;border-radius:20px;padding:1.3rem}.map-number{color:#a86b4b;font-size:.8rem;font-weight:800}.map-card h3{margin:.45rem 0;font-size:1.15rem}.map-card p{color:#5d6759;margin:0}.world-map-note{font-size:.9rem}.world-map-note strong{color:#354b3d}
.display-settings{position:relative;font-size:.85rem}.display-settings summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;white-space:nowrap}.settings-panel{position:absolute;z-index:5;right:0;top:100%;width:min(270px,calc(100vw - 2rem));padding:1rem;background:#fffdf8;border:1px solid #d9d3c7;border-radius:16px;box-shadow:0 12px 30px #302a2322}.settings-panel>label:not(.motion-option){display:block;font-weight:700}.settings-panel select{width:100%;padding:.5rem;border:1px solid #bcb7aa;border-radius:8px;font:inherit;background:#fff}.motion-option{display:flex;align-items:center;gap:.5rem;min-height:44px}.motion-option input{width:20px;height:20px;accent-color:#354b3d}.settings-panel p{margin:0}.ingredient-choices{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.ingredient-choice{min-height:44px;padding:.35rem .85rem;background:#fffdf8;border:1px solid #b9c5b4;color:#354b3d;font-size:.85rem}.ingredient-choice[aria-pressed="true"]{background:#354b3d;color:white}.ingredient-description{font-size:.82rem;color:#425743;text-align:center;max-width:25rem;min-height:3.4em;margin:.35rem 0}.hero-art{grid-template-rows:auto;align-content:center;gap:.35rem}
.extraction-diagram{width:180px;height:225px;position:relative;text-align:center;font-size:.75rem;font-weight:700;color:#354b3d}.diagram-water{position:absolute;top:0;left:58px;width:64px;background:#bed8d0;border-radius:8px;padding:2px}.diagram-puck{position:absolute;top:62px;left:35px;width:110px;background:#674432;color:white;border:4px solid #e5ded0;border-radius:0 0 20px 20px;padding:4px}.diagram-water-flow,.diagram-coffee-flow{position:absolute;left:86px;width:8px;border-radius:5px;opacity:0}.diagram-water-flow{top:27px;height:35px;background:#95beb5}.diagram-coffee-flow{top:97px;height:47px;background:#71462f}.diagram-cup{position:absolute;left:48px;top:140px;width:84px;height:72px;border:6px solid #fffdf8;border-top:5px solid #fffdf8;border-radius:4px 4px 35px 35px;overflow:hidden}.diagram-liquid{position:absolute;bottom:0;left:0;right:0;height:0;background:#71462f}.is-extracting .diagram-water-flow{animation:flow-water 2.4s ease both}.is-extracting .diagram-coffee-flow{animation:flow-coffee 2.4s ease both}.is-extracting .diagram-liquid{animation:fill-coffee 2.4s linear both}.pour-diagram{width:190px;height:220px;position:relative;display:flex;align-items:end;justify-content:center}.pour-diagram .cup{margin-bottom:0}.diagram-pitcher{position:absolute;top:0;right:8px;border-radius:6px 6px 12px 12px;background:#a8c9c0;padding:2px 13px;color:#354b3d;font-size:.75rem;opacity:0}.diagram-pour-flow{position:absolute;z-index:1;top:28px;right:52px;width:8px;height:70px;border-radius:6px;background:#9bc6bd;transform:rotate(24deg);opacity:0}.is-pouring .diagram-pitcher,.is-pouring .diagram-pour-flow{animation:pour-water 1.3s ease both}@keyframes flow-water{0%,100%{opacity:0}10%,85%{opacity:1}}@keyframes flow-coffee{0%,35%,100%{opacity:0}45%,90%{opacity:1}}@keyframes fill-coffee{0%,40%{height:0}100%{height:70%}}@keyframes pour-water{0%,100%{opacity:0}15%,80%{opacity:1}}.reduce-motion .is-extracting .diagram-liquid{animation:none;height:70%}.reduce-motion .is-extracting .diagram-water-flow,.reduce-motion .is-extracting .diagram-coffee-flow,.reduce-motion .is-pouring .diagram-pitcher,.reduce-motion .is-pouring .diagram-pour-flow{animation:none;opacity:0}@media(prefers-reduced-motion:reduce){.is-extracting .diagram-liquid{animation:none;height:70%}.is-extracting .diagram-water-flow,.is-extracting .diagram-coffee-flow,.is-pouring .diagram-pitcher,.is-pouring .diagram-pour-flow{animation:none;opacity:0}}
.cup-diagram{background:#e9ecdf}.cup-liquid{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 55px 55px}.is-pouring .cup-liquid{animation:pour-fill 1.3s ease both}@keyframes pour-fill{from{height:var(--previous-cup-level)}to{height:var(--cup-level)}}.reduce-motion .is-pouring .cup-liquid{animation:none}@media(prefers-reduced-motion:reduce){.is-pouring .cup-liquid{animation:none}}
.process-sequence{font-size:.82rem;font-weight:700;color:#354b3d;letter-spacing:.01em;margin:.35rem 0}
.is-complete .diagram-liquid{height:70%}
.is-extended.is-extracting .diagram-water-flow,.is-extended.is-extracting .diagram-coffee-flow,.is-extended.is-extracting .diagram-liquid{animation-duration:3.6s}.is-extended.is-complete .diagram-liquid{height:90%}.is-extended.is-extracting .diagram-liquid{animation-name:fill-extended}@keyframes fill-extended{0%,40%{height:0}100%{height:90%}}.reduce-motion .is-extended.is-extracting .diagram-liquid{animation:none;height:90%}@media(prefers-reduced-motion:reduce){.is-extended.is-extracting .diagram-liquid{animation:none;height:90%}}
.cappuccino-controls{display:grid;gap:.65rem;margin:1rem 0}.cappuccino-controls button{justify-content:flex-start}.cappuccino-controls button:disabled{cursor:not-allowed;opacity:.55}.cappuccino-diagram{width:190px;height:220px;position:relative;display:flex;align-items:end;justify-content:center}.cappuccino-cup{margin:0}.cappuccino-milk-layer{background:#c9aa83;border-radius:0;z-index:1;animation:none}.cappuccino-foam-layer{display:block;z-index:2;left:35%;width:30%;border-radius:50%;background:#fffdf3;opacity:0;transform:scale(.6)}.has-foam .cappuccino-foam-layer{opacity:1;transform:scale(1)}.cappuccino-action{position:absolute;top:0;left:0;right:0;text-align:center;font-size:.78rem;font-weight:700;color:#526354}.cappuccino-pitcher{display:block;top:28px;right:16px;opacity:.9;background:#f4f0df}.cappuccino-spoon{position:absolute;z-index:3;top:24px;right:18px;font-size:.75rem;color:#526354;transform:rotate(-18deg);transform-origin:bottom right}.cappuccino-flow{display:none;z-index:2;top:48px;right:52px;height:70px;background:#e7d8c0;opacity:.9}.is-cappuccino-milk .cappuccino-flow{display:block;animation:pour-water 1.3s ease both}.is-cappuccino-milk .cappuccino-milk-layer{animation:pour-fill 1.3s ease both}.is-cappuccino-foam .cappuccino-spoon{animation:spoon-foam 1.3s ease both}.is-cappuccino-foam .cappuccino-foam-layer{animation:foam-appear 1.3s ease both}@keyframes spoon-foam{0%,100%{transform:translate(0,0) rotate(-18deg)}40%,72%{transform:translate(-36px,75px) rotate(0)}}@keyframes foam-appear{0%,55%{opacity:0;transform:scale(.4)}78%,100%{opacity:1;transform:scale(1)}}.reduce-motion .is-cappuccino-milk .cappuccino-flow,.reduce-motion .is-cappuccino-foam .cappuccino-spoon{animation:none;opacity:0}.reduce-motion .is-cappuccino-milk .cappuccino-milk-layer,.reduce-motion .is-cappuccino-foam .cappuccino-foam-layer{animation:none}@media(prefers-reduced-motion:reduce){.is-cappuccino-milk .cappuccino-flow,.is-cappuccino-foam .cappuccino-spoon{animation:none;opacity:0}.is-cappuccino-milk .cappuccino-milk-layer,.is-cappuccino-foam .cappuccino-foam-layer{animation:none}}
.is-cappuccino-milk .cappuccino-pitcher{animation:pour-water 1.3s ease both}@keyframes spoon-foam{0%,100%{opacity:0;transform:translate(0,0) rotate(-18deg)}40%,72%{opacity:1;transform:translate(-36px,75px) rotate(0)}}.reduce-motion .is-cappuccino-milk .cappuccino-pitcher{animation:none;opacity:0}@media(prefers-reduced-motion:reduce){.is-cappuccino-milk .cappuccino-pitcher{animation:none;opacity:0}}
.comparison-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;align-items:start}.comparison-card{min-width:0;background:#fffdf8;border:1px solid #d7decf;border-radius:16px;padding:.8rem}.comparison-card h2{font-size:1rem;margin:0}.comparison-card p{font-size:.82rem;text-align:left}.comparison-frame{height:220px}.comparison-card button{width:100%;font-size:.82rem}.comparison-status{color:#596b59;min-height:1.5em}.comparison-card .extraction-diagram,.comparison-card .pour-diagram{transform:scale(.8)}@media(max-width:500px){.comparison-grid{grid-template-columns:1fr}}
.milk-diagram .diagram-pitcher{background:#f8f5e8}.milk-diagram .diagram-pour-flow{background:#fffdf4}.milk-diagram.is-foam .diagram-pour-flow{display:none}.milk-foam{position:absolute;z-index:1;left:40%;width:22%;height:8px;border-radius:50%;background:#fffdf3}.is-foam.is-pouring .milk-foam{animation:foam-mark 1.3s ease both}@keyframes foam-mark{0%,55%{opacity:0}75%,100%{opacity:1}}.reduce-motion .is-foam.is-pouring .milk-foam{animation:none}@media(prefers-reduced-motion:reduce){.is-foam.is-pouring .milk-foam{animation:none}}
@media(max-width:480px){.settings-panel{position:fixed;left:1rem;right:1rem;top:4rem;width:auto}}
@media(max-width:700px){.site-header{flex-wrap:wrap;gap:.7rem}.site-header nav{order:3;width:100%;margin:0;justify-content:space-between;gap:.4rem}.site-header nav a{font-size:.82rem}.points{margin-left:auto}.hero{grid-template-columns:1fr;gap:2rem;padding:3rem 0}.hero-art{min-height:260px}.world-scene{height:240px}.world-map-grid,.intro-strip{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.visual-panel{min-height:260px}.page-top{padding-top:2rem}footer{gap:1rem;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}