*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-underline-offset:3px;}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;border-radius:2px;}
.shell{display:flex;min-height:100vh;}
.main{flex:1;min-width:0;}
.wrap{max-width:760px;margin:0 auto;padding:0 28px 120px;}
/* sidebar */
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--accent-deep);color:#E9EEED;position:sticky;top:0;height:100vh;overflow-y:auto;padding:30px 22px 40px;}
.brand .mark{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:0.22em;color:var(--signal);font-weight:600;}
.brand h1{font-family:var(--sans);font-size:25px;margin:8px 0 4px;font-weight:600;color:#fff;letter-spacing:-0.02em;line-height:1.05;}
.brand p{font-family:var(--mono);font-size:11px;line-height:1.5;color:#9FB6B3;margin:10px 0 0;}
.pmeter{margin:16px 0 0;}
.pmeter .bar{height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;}
.pmeter .fill{height:100%;background:var(--signal);width:0;transition:width .4s ease;}
.pmeter .lbl{font-family:var(--mono);font-size:10px;color:#9FB6B3;margin-top:6px;letter-spacing:.08em;}
.nav{margin-top:24px;}
.nav-block{margin-bottom:18px;}
.nav-block h2{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#6E938F;margin:0 0 7px;font-weight:700;}
.nav-item{display:flex;gap:11px;align-items:baseline;font-family:var(--sans);font-size:13.5px;line-height:1.3;padding:6px 9px;border-radius:5px;color:#CBD6D4;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;border:none;background:none;text-align:left;width:100%;}
.nav-item .n{font-family:var(--mono);font-size:11px;color:#5E827E;min-width:18px;}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-item.active{background:var(--accent);color:#fff;}
.nav-item.active .n{color:var(--signal);}
.nav-item.locked{opacity:.45;cursor:not-allowed;}
.nav-item .check{margin-left:auto;color:var(--signal);font-family:var(--mono);font-size:12px;opacity:0;}
.nav-item.done .check{opacity:1;}
.topbar{display:none;}
.scrim{display:none;}
/* session header */
.s-head{padding:54px 0 34px;border-bottom:1px solid var(--line);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);}
.s-head h1{font-family:var(--sans);font-weight:600;letter-spacing:-0.02em;font-size:clamp(32px,5vw,46px);line-height:1.04;margin:14px 0 0;}
.s-head .deck{font-size:21px;color:var(--ink-soft);margin:16px 0 0;max-width:58ch;}
.meta{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-2);}
.meta div{flex:1;min-width:150px;padding:14px 16px;border-right:1px solid var(--line);}
.meta div:last-child{border-right:none;}
.meta .k{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);}
.meta .v{font-family:var(--sans);font-size:14.5px;font-weight:500;margin-top:4px;line-height:1.3;}
section{padding:42px 0;border-bottom:1px solid var(--line);}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
h2.sec-title{font-family:var(--sans);font-weight:600;font-size:27px;letter-spacing:-0.015em;margin:0 0 18px;line-height:1.1;}
h3{font-family:var(--sans);font-weight:600;font-size:18px;margin:30px 0 8px;letter-spacing:-0.01em;}
p{margin:0 0 16px;}
.lead{font-size:21px;line-height:1.55;}
strong{font-weight:600;}
em.term{font-style:normal;font-weight:600;color:var(--accent-deep);border-bottom:2px solid var(--signal);}
.callout{background:var(--paper-2);border-left:3px solid var(--accent);padding:18px 22px;border-radius:0 8px 8px 0;margin:24px 0;font-size:17.5px;}
.callout .ct{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.diagram{margin:30px 0;}
.diagram svg{width:100%;height:auto;display:block;}
/* structure instrument */
.instrument{border:1px solid var(--line-strong);border-radius:12px;background:var(--paper-2);padding:8px 0 4px;margin:26px 0;}
.inst-head{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);}
.inst-head .t{font-family:var(--sans);font-weight:600;font-size:15px;}
.inst-head .reset{font-family:var(--mono);font-size:11px;color:var(--ink-soft);background:none;border:none;cursor:pointer;letter-spacing:.06em;}
.inst-head .reset:hover{color:var(--accent);}
.grouphdr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:14px 22px 4px;}
.axis{display:grid;grid-template-columns:128px 1fr;gap:0;align-items:center;padding:9px 22px;border-bottom:1px solid var(--line);}
.axis:last-of-type{border-bottom:none;}
.axis .label{font-family:var(--sans);font-size:13px;font-weight:500;}
.scale{display:flex;gap:4px;}
.seg{flex:1;font-family:var(--mono);font-size:9.5px;text-align:center;padding:8px 2px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;color:var(--ink-soft);cursor:pointer;line-height:1.15;transition:background .12s,color .12s,border-color .12s;}
.seg:hover{border-color:var(--accent);color:var(--ink);}
.seg.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.seg.peak{background:var(--signal);border-color:var(--signal);color:#1a1500;font-weight:700;}
.readout{padding:15px 22px;font-family:var(--mono);font-size:12.5px;color:var(--accent-deep);line-height:1.55;}
.readout .muted{color:var(--ink-soft);}
/* color scale (wine spectrum as content) */
.cscale{margin:22px 0;}
.cscale .crow{margin-bottom:18px;}
.cscale .ct2{font-family:var(--sans);font-size:14px;font-weight:600;margin-bottom:8px;}
.swatches{display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--line-strong);}
.sw{flex:1;height:58px;cursor:pointer;position:relative;border:none;padding:0;transition:flex .2s ease;}
.sw:hover,.sw.sel{flex:1.5;}
.sw span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.axis-ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:5px;letter-spacing:.06em;}
.cnote{font-family:var(--serif);font-size:16px;color:var(--ink-soft);min-height:46px;margin-top:8px;padding:10px 14px;background:var(--paper-2);border-radius:8px;border:1px dashed var(--line-strong);}
/* grape cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin:22px 0;}
.gcard{border:1px solid var(--line-strong);border-radius:10px;background:#fff;padding:15px 16px;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s;}
.gcard:hover{border-color:var(--accent);transform:translateY(-2px);}
.gcard.sel{border-color:var(--accent);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--accent);}
.gcard .gn{font-family:var(--sans);font-weight:600;font-size:16px;}
.gcard .gt{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:3px;letter-spacing:.05em;}
.gdetail{border:1px solid var(--line-strong);border-radius:12px;background:var(--paper-2);padding:0;margin-top:6px;overflow:hidden;}
.gdetail .gd-head{padding:18px 22px 8px;}
.gdetail .gd-name{font-family:var(--sans);font-weight:600;font-size:24px;}
.gdetail .gd-say{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.06em;margin-top:2px;}
.gbars{padding:8px 22px 4px;}
.gbar{display:grid;grid-template-columns:84px 1fr 30px;align-items:center;gap:10px;padding:5px 0;}
.gbar .bl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);}
.gbar .track{height:8px;background:#fff;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;}
.gbar .lvl{height:100%;background:var(--accent);}
.gbar .gv{font-family:var(--mono);font-size:10px;color:var(--accent-deep);text-align:right;}
.gmeta{padding:8px 22px 20px;font-size:16px;}
.gmeta .grow{margin-top:8px;}
.gmeta .gk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
/* protocol */
.steps{counter-reset:step;margin:22px 0 0;padding:0;list-style:none;}
.steps li{position:relative;padding:0 0 22px 52px;}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--accent);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.steps li::after{content:"";position:absolute;left:16px;top:34px;bottom:8px;width:1px;background:var(--line-strong);}
.steps li:last-child::after{display:none;}
.steps h4{font-family:var(--sans);font-size:16px;font-weight:600;margin:4px 0 4px;}
.steps p{font-size:16.5px;margin:0;}
/* flavor wheel */
.flavor-wheel-container{display:flex;justify-content:center;align-items:center;padding:24px 0;max-width:100%;overflow:hidden;}
.fw-svg{width:100%;max-width:360px;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.06));}
.fw-wedge{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:2px;cursor:pointer;transition:fill .15s,stroke .15s;outline:none;}
.fw-wedge:hover{fill:#fff;}
.fw-wedge.sel{fill:var(--accent);stroke:var(--accent-deep);stroke-width:2.5px;}
.fw-text{font-family:var(--sans);font-size:13.5px;font-weight:500;fill:var(--ink-soft);pointer-events:none;transition:fill .15s;letter-spacing:-0.01em;}
.fw-wedge:hover + text .fw-text{fill:var(--ink);}
.fw-wedge.sel + text .fw-text{fill:#fff;font-weight:600;}
/* quiz */
.q{border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-bottom:16px;background:var(--paper-2);}
.q .qn{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em;}
.q .qt{font-family:var(--sans);font-weight:500;font-size:17px;margin:6px 0 14px;line-height:1.35;}
.opt{display:block;width:100%;text-align:left;font-family:var(--serif);font-size:16px;padding:11px 15px;margin-bottom:8px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s;}
.opt:hover{border-color:var(--accent);}
.opt:disabled{cursor:default;}
.opt.correct{border-color:#1d6e3a;background:#e7f3ea;}
.opt.wrong{border-color:#9a2230;background:#f7e7e8;}
.explain{font-size:15px;color:var(--ink-soft);margin-top:8px;padding-left:2px;display:none;}
.explain.show{display:block;}
.quiz-score{font-family:var(--mono);font-size:13px;color:var(--accent-deep);margin-top:4px;}
/* flashcards */
.fc-stage{perspective:1200px;margin:18px 0 12px;}
.fc{position:relative;width:100%;min-height:172px;cursor:pointer;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;}
.fc.flipped{transform:rotateY(180deg);}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;padding:26px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line-strong);}
.fc-front{background:var(--accent-deep);color:#fff;}
.fc-front .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);}
.fc-front .term{font-family:var(--sans);font-weight:600;font-size:25px;margin-top:8px;letter-spacing:-0.01em;}
.fc-front .hint{font-family:var(--mono);font-size:11px;color:#7FA39F;margin-top:auto;}
.fc-back{background:var(--paper-2);transform:rotateY(180deg);}
.fc-back .def{font-size:17px;line-height:1.5;}
.fc-nav{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;}
.fc-nav button{font-family:var(--sans);font-size:13px;font-weight:500;border:1px solid var(--line-strong);background:#fff;border-radius:6px;padding:7px 16px;cursor:pointer;}
.fc-nav button:hover{border-color:var(--accent);color:var(--accent);}
.fc-count{color:var(--ink-soft);}
/* tasting log */
.log{border:1px solid var(--line-strong);border-radius:12px;background:var(--paper-2);padding:22px;margin-top:8px;}
.log .row{margin-bottom:16px;}
.log label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
.log input,.log textarea,.log select{width:100%;font-family:var(--serif);font-size:16px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink);resize:vertical;}
.log textarea{min-height:64px;}
.log .struct-mirror{font-family:var(--mono);font-size:13px;background:#fff;border:1px dashed var(--line-strong);border-radius:7px;padding:11px 13px;color:var(--accent-deep);min-height:42px;}
.log .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;align-items:center;}
.log .actions button{font-family:var(--sans);font-size:14px;font-weight:500;padding:11px 20px;border-radius:7px;cursor:pointer;border:1px solid var(--accent);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-deep);}
.btn-ghost{background:transparent;color:var(--accent);}
.btn-ghost:hover{background:rgba(14,77,74,.07);}
.toast{font-family:var(--mono);font-size:12px;color:#1d6e3a;opacity:0;transition:opacity .2s;}
.toast.show{opacity:1;}
/* review + complete */
.review{background:var(--accent-deep);color:#E9EEED;border-radius:14px;padding:30px 30px 26px;margin-top:42px;}
.review .rl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);}
.review h2{font-family:var(--sans);font-weight:600;font-size:24px;color:#fff;margin:8px 0 6px;}
.review p{color:#B9C9C7;font-size:16px;}
.review ol{margin:14px 0 0;padding-left:20px;}
.review li{margin-bottom:9px;color:#DCE6E5;font-size:16.5px;}
.review li::marker{color:var(--signal);font-family:var(--mono);}
.complete-btn{font-family:var(--sans);font-weight:600;font-size:15px;margin-top:22px;padding:13px 26px;border-radius:8px;border:1px solid var(--signal);background:var(--signal);color:#1a1500;cursor:pointer;}
.complete-btn.is-done{background:transparent;color:var(--signal);}
.next{display:flex;justify-content:space-between;align-items:center;margin-top:34px;font-family:var(--sans);gap:14px;}
.next button, .next a{background:none;border:none;cursor:pointer;text-align:left;color:inherit;text-decoration:none;}
.next button:last-child, .next a:last-child{text-align:right;}
.next .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.next .ttl{font-weight:600;font-size:18px;margin-top:3px;color:var(--ink);}
.next .disabled{opacity:.35;cursor:default;}
.footer{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);padding:30px 0 0;line-height:1.6;}
.storewarn{font-family:var(--mono);font-size:11px;color:#9a6a1b;background:#f7efd9;border:1px solid #e6d39a;border-radius:7px;padding:9px 13px;margin:16px 0 0;display:none;}
.storewarn.show{display:block;}
.session{display:none;}
.session.active{display:block;}
@media (max-width:880px){
.sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 40px rgba(0,0,0,.3);}
.sidebar.open{transform:translateX(0);}
.scrim{display:block;position:fixed;inset:0;background:rgba(9,55,52,.45);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s;}
.scrim.show{opacity:1;pointer-events:auto;}
.topbar{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;background:var(--accent-deep);color:#fff;padding:13px 18px;}
.topbar button{background:none;border:none;color:#fff;cursor:pointer;display:flex;}
.topbar .tt{font-family:var(--sans);font-weight:600;font-size:15px;}
.topbar .ts{font-family:var(--mono);font-size:10px;color:var(--signal);letter-spacing:.12em;}
.wrap{padding:0 20px 90px;}
body{font-size:18px;}
.axis{grid-template-columns:96px 1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto;}.fc{transition:none;}}
.fade{opacity:0;transform:translateY(10px);animation:fin .5s ease forwards;}
@keyframes fin{to{opacity:1;transform:none;}}