:root{--paper:#f7f5ee;--white:#fffdf8;--ink:#173f36;--muted:#53675f;--line:#d6ded3;--soft:#e8eee5;--blue:#afd5e7;--coral:#f2bca5;--dock-height:76px;--dock-space:76px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding:76px 0 calc(var(--dock-space) + 12px)}body{margin:0;padding-bottom:calc(var(--dock-height) + 16px);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;cursor:pointer}a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #9e6b27;outline-offset:3px}button:disabled{cursor:default;opacity:.45}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;line-height:1.1}h1{font-size:clamp(52px,5.7vw,76px);margin-bottom:20px}h1 em{font-weight:400;color:#42705c}h2{font-size:clamp(30px,3.8vw,44px)}h3{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.015em}p{color:var(--muted)}p+p{margin-top:14px}.wrap{width:calc(100% - 96px);max-width:1120px;margin-inline:auto}.sr-only,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{clip-path:none;width:auto;height:auto;top:8px;left:12px;padding:10px 16px;background:var(--ink);color:white;z-index:100}.site-header{height:76px;position:sticky;top:0;z-index:30;padding-inline:max(32px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--paper);border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:18px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}.desktop-nav{display:flex;gap:26px;font-size:14px}.desktop-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}.mobile-menu{display:none}.hero{display:grid;grid-template-columns:1fr 1.06fr;gap:14px 76px;align-items:center;padding-block:54px 30px}.hero-copy{padding-block:8px}.lead{font-size:19px;line-height:1.6;max-width:430px}.lesson-jump,.reading-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;font-size:14px;font-weight:600;text-underline-offset:5px}.lesson-jump{margin-top:20px}.example-scale{grid-column:2;font-size:12px;line-height:1.6;max-width:480px}.lesson-card{min-width:0;padding:24px;background:var(--soft);border:1px solid #cad7c3;border-radius:10px;scroll-margin-block:84px calc(var(--dock-space) + 12px)}.lesson-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.stage-tabs{display:flex;gap:6px}.stage-tabs button{border:1px solid #b7c8b1;border-radius:50%;min-height:44px;min-width:44px;background:var(--white);color:var(--ink);padding:4px;font-size:14px;line-height:1.2}.stage-tabs button:first-child{border-radius:6px;min-width:50px}.stage-tabs button[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}.pour-route{font-size:17px;line-height:1.2;font-weight:600;white-space:nowrap;min-width:66px;text-align:right}.bottles{display:flex;justify-content:space-between;gap:22px;padding:0;margin:0;list-style:none}.bottles>li{flex:1;min-width:0;text-align:center}.bottle-name{display:flex;justify-content:center;align-items:center;gap:5px;min-height:26px;margin-bottom:7px;font-size:16px}.bottle-name span{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);min-width:28px}.bottle{position:relative;display:flex;flex-direction:column-reverse;overflow:hidden;border:solid #547b6e;border-width:0 2px 3px;border-radius:0 0 16px 16px;background:#fdfdf7}.layer{display:flex;align-items:center;justify-content:center;flex:0 0 50%;height:74px;min-height:74px;font-size:14px;font-weight:600;line-height:1.2;color:#274b57}.blue{background:var(--blue)}.coral{background:var(--coral);color:#713f2b}.layer.empty{background:transparent;border-bottom:1px dashed #d3dacc}.empty-bottle:after{content:'Empty';position:absolute;inset:0;display:grid;place-items:center;color:#63776c;font-size:13px}.from .bottle{outline:2px solid #a47635;outline-offset:3px}.to .bottle{outline:2px dashed #47765e;outline-offset:3px}.water-state figcaption{font-size:16px;line-height:1.5;min-height:54px;margin-top:16px;color:var(--ink)}.water-state+.water-state{margin-top:28px}.is-ready .water-state+.water-state{margin-top:0}.is-ready .static-step{display:none}.lesson-actions{display:grid;grid-template-columns:70px 1fr;gap:10px;margin-top:16px}.button,.back-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:1px solid transparent;border-radius:5px;padding:10px 16px;font-size:14px;line-height:1.5;font-weight:650;text-decoration:none;max-width:100%;color:var(--white);background:var(--ink)}.button:hover{background:#285b48}.back-button{border-color:#b8c8b1;background:transparent;color:var(--ink);font-weight:500}.section-jumps{display:flex;gap:30px;border-block:1px solid var(--line)}.section-jumps a{display:flex;align-items:center;min-height:48px;font-size:13px;text-decoration:none}.section{padding-block:64px;scroll-margin-top:88px}.section-intro{max-width:640px;margin-bottom:28px}.section-intro h2{margin-bottom:18px}.rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.rule-card{min-width:0;padding:22px 16px;background:var(--white);border:1px solid var(--line);border-radius:8px}.mini-pour{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}.mini-bottle{height:72px;width:37px;flex-shrink:0;border:solid #547b6e;border-width:0 2px 3px;border-radius:0 0 9px 9px;display:flex;flex-direction:column-reverse;overflow:hidden}.mini-layer{display:block;height:50%;flex:0 0 50%}.mini-arrow{font-size:22px;color:#34654e}.mini-arrow.no{color:#a05a45}.rule-card figcaption{font-size:14px;line-height:1.5}.rule-card figcaption strong,.rule-card figcaption span{display:block}.rule-card figcaption span{margin-top:7px;color:var(--muted)}.rule-note{font-size:15px;max-width:800px;margin-top:24px}.rule-note strong{color:var(--ink)}.strategy-section{background:#e8ede3;border-block:1px solid var(--line)}.strategy-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.strategy-list{padding:0 0 0 20px;margin:0}.strategy-list li{padding:0 0 20px 8px}.strategy-list li+li{border-top:1px solid #c9d5c1;padding-top:20px}.strategy-list li:last-child{padding-bottom:0}.strategy-list p{font-size:16px;margin-top:7px}.mistake-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:28px}.mistake-grid p{font-size:16px;margin-top:10px}.faq-section{border-top:1px solid var(--line);display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;min-height:66px;padding-block:18px;font-size:16px;font-weight:550;line-height:1.5}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:20px;font-weight:400;flex-shrink:0}.faq details[open] summary:after{content:'−'}.faq details p{padding-bottom:20px;font-size:15px}.app-section{background:#e3eadd;border-block:1px solid #d0dcc6;padding-block:54px;scroll-margin-top:88px}.practice-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:80px;align-items:center}.practice-layout h2{margin-bottom:20px}.practice-facts{font-size:14px;margin-top:18px}.platform-note{font-size:12px;margin-top:14px;line-height:1.6}.practice-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.practice-action .reading-link{font-size:13px}.site-footer{padding-block:32px 24px;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:18px}.site-footer nav{display:flex;flex-wrap:wrap;gap:0 22px;font-size:13px}.site-footer nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}.site-footer>p{flex-basis:100%;font-size:11px;border-top:1px solid var(--line);padding-top:18px}.download-dock{position:fixed;z-index:25;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid #c7d4c1;padding:10px max(24px,calc((100% - 1120px)/2)) max(10px,env(safe-area-inset-bottom));box-shadow:0 -5px 20px #1c41270a}.dock-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1120px;margin:auto}.dock-label strong,.dock-label span{display:block}.dock-label strong{font-size:14px;font-weight:650;line-height:1.35}.dock-label span{font-size:12px;line-height:1.4;color:var(--muted);margin-top:3px}.download-dock .button{white-space:nowrap}.download-dock.is-hidden{visibility:hidden;pointer-events:none}.lesson-controls[hidden],.lesson-actions[hidden],.water-state[hidden]{display:none}
@media(max-width:900px){.wrap{width:calc(100% - 64px)}.hero{gap:12px 36px}.lesson-card{padding:18px}.bottles{gap:16px}.desktop-nav{gap:18px}.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.strategy-layout,.faq-section,.practice-layout{gap:44px}.mistake-grid{gap:30px}.water-state figcaption{font-size:15px}}
@media(max-width:650px){html{scroll-padding-top:72px}body{font-size:16px;line-height:1.6}.wrap{width:calc(100% - 32px)}.site-header{height:60px;padding-inline:16px}.brand{font-size:17px;gap:9px}.brand img{width:26px;height:26px}.desktop-nav{display:none}.mobile-menu{display:block}.mobile-menu summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:72px;list-style:none;border:1px solid var(--line);border-radius:5px;font-size:13px;cursor:pointer}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;inset-inline:12px;top:66px;max-height:calc(100dvh - 82px);overflow:auto;padding:10px 16px;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 15px 30px #233a2715}.mobile-menu nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);text-decoration:none;font-size:15px}.mobile-menu nav a:last-child{border:0}.hero{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-block:18px 24px}.hero-copy{padding:0}.hero h1{font-size:36px;line-height:1.06;margin-bottom:10px}.hero h1 br{display:none}.hero h1 em{font-style:normal}.lead{font-size:16px;line-height:1.5;max-width:360px}.lesson-jump{margin-top:5px;font-size:13px;min-height:40px;gap:14px}.lesson-card{padding:12px;border-radius:8px;scroll-margin-top:68px}.lesson-controls{margin-bottom:10px;gap:8px}.stage-tabs{gap:5px}.stage-tabs button{min-width:44px;min-height:44px;font-size:13px}.stage-tabs button:first-child{min-width:48px}.pour-route{font-size:16px;min-width:60px}.bottles{gap:18px;max-width:390px;margin-inline:auto}.bottle-name{min-height:22px;margin-bottom:5px;font-size:15px;gap:4px}.bottle-name span{font-size:9px;min-width:25px}.bottle{border-radius:0 0 13px 13px}.layer{height:48px;min-height:48px;font-size:13px}.water-state figcaption{font-size:14px;line-height:1.4;margin-top:10px;min-height:40px}.lesson-actions{margin-top:10px;gap:8px;grid-template-columns:58px 1fr}.lesson-actions .button,.back-button{min-height:44px;padding:7px 10px;font-size:14px}.example-scale{font-size:11px;line-height:1.6;margin-top:0}.section-jumps{justify-content:space-between;gap:18px}.section-jumps a{min-height:44px;font-size:12px}.section{padding-block:36px;scroll-margin-top:76px}.section-intro{margin-bottom:22px}.section-intro h2{margin-bottom:14px}h2{font-size:31px}.section-intro p{font-size:15px}.rule-grid{gap:12px}.rule-card{padding:18px 12px}.mini-pour{gap:10px;margin-bottom:14px}.mini-bottle{width:32px;height:66px}.rule-card figcaption{font-size:13px}.rule-card figcaption span{font-size:12px}.rule-note{font-size:14px;margin-top:20px}.strategy-layout,.faq-section,.practice-layout{display:block}.strategy-list{margin-top:26px;padding-left:18px}.strategy-list p{font-size:15px}.strategy-list h3{font-size:17px}.mistake-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}.mistake-grid h3{font-size:17px}.mistake-grid p{font-size:15px}.faq summary{font-size:15px;min-height:62px}.faq details p{font-size:14px}.app-section{padding-block:36px;scroll-margin-top:76px}.practice-layout h2{font-size:33px}.practice-layout>div>p{font-size:15px}.practice-layout .practice-facts{font-size:13px}.practice-layout .platform-note{font-size:12px}.practice-action{margin-top:24px;gap:8px}.site-footer{padding-block:26px 20px;gap:16px}.site-footer nav{gap:0 22px;flex-basis:100%;font-size:12px}.site-footer>p{margin-top:0}.download-dock{padding-inline:16px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.dock-inner{gap:12px}.dock-label strong{font-size:13px}.dock-label span{font-size:11px;margin-top:2px}.download-dock .button{font-size:13px;min-height:44px;padding:8px 12px;gap:7px}}
@media(max-width:360px){.hero h1{font-size:33px}.bottles{gap:14px}.stage-tabs{gap:4px}.stage-tabs button{min-width:44px}.pour-route{font-size:14px;min-width:48px}.bottle-name{gap:2px}.bottle-name span{font-size:8px;min-width:22px}.download-dock .button{font-size:12px;padding-inline:10px}.dock-label strong{font-size:12px}.mini-pour{gap:8px}.rule-card{padding-inline:9px}.rule-card figcaption{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:650px){.hero .lesson-jump{display:none}.bottle-name span{font-size:10px;min-width:28px}}
@media(max-width:650px) and (max-height:580px){.hero{padding-top:12px;gap:10px}.hero h1{font-size:30px;margin-bottom:8px}}
@media(min-width:651px){.hero{padding-top:24px}}
@media(max-width:650px) and (max-height:580px){.hero{padding-top:8px;gap:8px}.lesson-card{padding-block:8px}.lesson-controls{margin-bottom:8px}.lesson-actions{margin-top:8px}}
@media(min-width:651px) and (max-height:560px){.site-header{height:60px}.desktop-nav{font-size:13px;gap:16px}.hero{padding-top:12px}.hero h1{font-size:44px;line-height:1.06;margin-bottom:14px}.lead{font-size:16px;line-height:1.5}.lesson-jump{margin-top:10px}.lesson-card{padding:8px 12px;align-self:start}.lesson-controls{margin-bottom:8px}.bottle-name{min-height:22px;margin-bottom:5px;font-size:15px}.layer{height:26px;min-height:26px;font-size:12px}.water-state figcaption{font-size:14px;line-height:1.4;min-height:40px;margin-top:10px}.lesson-actions{margin-top:8px}.lesson-actions .button,.back-button{min-height:44px;padding-block:7px}.download-dock{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.download-dock .button{min-height:44px;padding-block:8px}}
@media(max-width:650px) and (max-height:450px){.lesson-card{padding-block:6px}.lesson-controls{margin-bottom:6px}.layer{height:30px;min-height:30px}.water-state figcaption{font-size:13px;min-height:36px;margin-top:6px}.lesson-actions{margin-top:6px}}
/* Glass silhouettes share the same path as the pouring renderer. */
.bottle-scene{position:relative;isolation:isolate;overflow:hidden}.bottles{padding-top:36px}.bottles>li{display:flex;flex-direction:column-reverse;align-items:stretch}.bottle-name{margin:6px 0 0}.bottle{display:block;height:128px;min-height:0;border:0;border-radius:0;overflow:visible;background:transparent}.bottle svg{display:block;width:auto;height:100%;max-width:100%;margin-inline:auto}.glass-fill{fill:#fffdf8;fill-opacity:.8}.glass-outline{fill:none;stroke:#547b6e;stroke-width:2.3}.glass-mouth{fill:#fffdf8;fill-opacity:.45;stroke:#6f9484;stroke-width:2}.glass-shine{fill:none;stroke:white;stroke-opacity:.65;stroke-width:2.4;stroke-linecap:round}.bottle-shadow{fill:#173f36;fill-opacity:.09}.water-band.blue{fill:var(--blue)}.water-band.coral{fill:var(--coral)}.water-word{fill:#23463d;text-anchor:middle;font:22px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:600}.empty-word{fill:#657b70;text-anchor:middle;font:19px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.from .bottle,.to .bottle{outline:none}.from .glass-outline{stroke:#a47635;stroke-width:3}.to .glass-outline{stroke:#47765e;stroke-width:2.8;stroke-dasharray:4 3}.pour-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.is-pouring .bottle{visibility:hidden}.lesson-card[aria-busy=true] .pour-route{color:#80551f}
@media(min-width:651px){.hero{padding-top:12px}}
@media(max-width:650px){.hero{padding-top:16px;gap:6px}.bottles{padding-top:32px}.bottle{height:102px}.bottle-name{margin:6px 0 0}.water-word{font-size:24px}}
@media(max-width:650px) and (max-height:580px){.hero{padding-top:4px;gap:4px}.bottles{padding-top:28px}.bottle{height:78px}.water-word{font-size:26px}.empty-word{font-size:22px}}
@media(min-width:651px) and (max-height:560px){.lesson-card{padding-block:6px}.lesson-controls{margin-bottom:6px}.water-state{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;align-items:center}.water-state figcaption{min-height:0;margin-top:0}.bottles{padding-top:18px;gap:8px}.bottle{height:90px}.bottle-name{min-height:22px;margin:6px 0 0}.lesson-actions{margin-top:6px}.water-word{font-size:24px}}
@media(min-width:651px){.hero{padding-top:8px}.lesson-card{padding-block:19px}.bottles{padding-top:60px}.bottle{height:112px}}
@media(max-width:650px){.hero{padding-top:8px;gap:4px}.hero h1{font-size:32px;margin-bottom:8px}.lesson-card{padding-block:10px}.bottles{padding-top:56px}}
@media(max-width:360px){.hero h1{font-size:28px}}
@media(max-width:650px) and (max-height:580px){.hero{padding-top:4px}.hero h1{font-size:28px}.lesson-card{padding-block:8px}.bottles{padding-top:48px}}
@media(min-width:651px) and (max-height:560px){.hero{padding-top:8px}.lesson-card{padding-block:4px}.bottles{padding-top:45px}.bottle{height:70px}.water-word{font-size:26px}}
@media(min-width:651px) and (max-height:560px){.lesson-card{padding-block:3px}.lesson-actions{margin-top:4px}}
/* A compact media presentation, with passive progress instead of game controls. */
.lesson-controls{min-height:22px;margin-bottom:10px}.demo-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.demo-toolbar[hidden]{display:none}.demo-progress{display:flex;flex:1;max-width:190px;gap:7px;list-style:none;padding:0;margin:0}.demo-progress li{flex:1;min-width:0;color:#718477;text-align:center;font-size:10px;line-height:1.3;cursor:default}.demo-progress li:before{content:'';display:block;height:3px;background:#c6d2bf;border-radius:2px;margin-bottom:5px}.demo-progress li[aria-current=step]{color:var(--ink);font-weight:650}.demo-progress li[aria-current=step]:before{background:var(--ink)}.demo-progress li[data-passed]:before{background:#83a18b}.media-controls{display:flex;align-items:center;gap:0;flex-shrink:0}.media-control{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:4px;border:0;border-radius:5px;color:var(--ink);background:transparent}.media-control:hover{background:#dbe5d5}.media-control svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.media-control .play-icon{fill:currentColor;stroke:none}.sound-control{flex-direction:column;gap:2px;min-width:58px;font-size:10px;line-height:1.2;font-weight:500}.sound-wave{display:none}.sound-control.is-on .sound-wave{display:block}.sound-control.is-on .sound-slash{display:none}.sound-control[data-audio-state=playing]{color:#80551f}
@media(max-width:650px){.lesson-controls{margin-bottom:10px}.demo-toolbar{margin-top:10px;gap:8px}.demo-progress{gap:5px}.demo-label{font-size:10px}.demo-progress{max-width:180px}}
@media(min-width:651px) and (max-height:560px){.lesson-controls{margin-bottom:6px}.demo-toolbar{margin-top:4px}}