@font-face{font-family:"Heming";src:url(fonts/heming-lofi.woff) format("woff");font-weight:300 700;font-style:normal;font-display:block}
@font-face{font-family:"LOFI IPA";src:url(fonts/lofi-ipa.woff) format("woff");font-weight:300 700;font-style:normal;font-display:swap;size-adjust:91%;unicode-range:U+0250-02FF,U+00F0,U+03B8,U+0361,U+1D7B,U+1D7F}
:root{
  /* LOFI Practice Room: a navy field, cream type, everything in Heming.
     Each world is a coloured plate with its own line drawing; inside a world the plate colour becomes the accent.
     Layout: one centred column (max 1080px); mono editorial labels frame every section; the twisted ring is the hero and the radio. */
  --navy:#17172D; --navy-2:#1F1F3C; --deep:#0F0F20;
  --cream:#ECEAE3; --mist:#B4B3C4; --dim:#85849E;
  --line:rgba(236,234,227,.14); --line-2:rgba(236,234,227,.3);
  --blue:#9DB8FF;
  --good:#A6E79D; --warn:#F3E38A; --bad:#FF8F80;
  --font:"Heming","LOFI IPA","Heming Variable","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ipa:"Heming","LOFI IPA","Noto Sans Mono",ui-monospace,Menlo,"Segoe UI Symbol",monospace;
  --r:22px; --r-sm:16px;
  --acc:var(--blue); --acc-soft:rgba(157,184,255,.3); --ink:#15152B; --on-acc:#15152B;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;margin:0;background:var(--navy);color:var(--cream);font:400 15px/1.55 var(--font);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 32% at 82% 10%,rgba(157,184,255,.2),transparent 70%),
             radial-gradient(34% 30% at 6% 42%,rgba(222,99,120,.1),transparent 70%),
             radial-gradient(40% 30% at 62% 96%,rgba(212,122,72,.1),transparent 70%);
  animation:drift 46s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@keyframes drift{to{transform:translate3d(4%,-3%,0) rotate(5deg)}}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.it{font-weight:300;color:var(--mist)}
.label{display:block;margin-bottom:6px;font:500 10.5px/1.35 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.mono{font:500 10.5px/1.35 var(--font);letter-spacing:.16em;text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stack{display:grid;gap:6px}
.small{font-size:13px;color:var(--mist);line-height:1.5}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,calc((100% - 1080px)/2),env(safe-area-inset-right,0px)) 12px max(16px,calc((100% - 1080px)/2),env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(23,23,45,.98),rgba(23,23,45,.92));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:8px;align-items:baseline;text-decoration:none;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;min-width:0}
.brand i{font-style:normal;color:var(--blue)}
.brand .crumb{color:var(--mist);overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;border:1.5px solid var(--line-2);text-decoration:none;font:600 10.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;background:rgba(255,255,255,.03)}
.chip.on{border-color:var(--good);color:var(--good)}
.chip[hidden]{display:none}
.chip svg{width:14px;height:14px}
@media(max-width:520px){.hide-sm{display:none}}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 18px 150px}
.eyebrow{display:flex;justify-content:space-between;gap:16px;font:500 10.5px/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.eyebrow span:last-child{text-align:right}
section{margin-top:40px}
.sec-title{font:700 clamp(30px,5.4vw,48px)/.95 var(--font);letter-spacing:-.045em;margin:10px 0 6px}

/* hero */
.hero{display:grid;gap:26px;align-items:center;margin-top:22px}
@media(min-width:880px){.hero{grid-template-columns:1.08fr .92fr;gap:40px;margin-top:44px}}
.display{font:700 clamp(48px,10.5vw,104px)/.9 var(--font);letter-spacing:-.06em;margin:16px 0 18px}
.lede{font:400 clamp(16px,2vw,19px)/1.45 var(--font);max-width:36ch;letter-spacing:-.01em}
.lede-it{font-size:clamp(13.5px,1.6vw,15px);line-height:1.5;max-width:44ch;margin-top:8px}
.hero .row{margin-top:24px}
.progress{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font:500 11px/1.5 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.progress b{color:var(--cream);font-weight:600}
.install{margin-top:14px}

/* orb + ring */
.orb-wrap{display:grid;justify-items:center;gap:14px}
.orb{position:relative;width:min(80vw,420px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 56%,#24244c 0%,#16162e 60%,#0f0f20 100%);
  box-shadow:0 44px 90px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.5),0 0 0 14px rgba(255,255,255,.05),
    inset 0 -22px 48px rgba(157,184,255,.24),inset 0 10px 30px rgba(255,255,255,.12)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 42%)}
.orb .glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(157,184,255,.55),transparent 66%);opacity:.35;filter:blur(18px)}
.spin{position:absolute;inset:4%;animation:spin 110s linear infinite}
.ring-svg{width:100%;height:100%;display:block;color:var(--cream);stroke:currentColor;stroke-width:.75px;fill:none;overflow:visible}
@keyframes spin{to{transform:rotate(360deg)}}
.fig{font:500 10.5px/1.4 var(--font);letter-spacing:.04em;color:var(--blue);display:flex;gap:10px;align-items:center}
.fig::before{content:"";width:36px;height:1px;background:currentColor}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 17px;border-radius:999px;border:1.5px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--cream);font:600 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--cream)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.btn.acc{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.btn.small{min-height:36px;padding:0 13px;font-size:10px}
.btn svg{width:16px;height:16px;flex:none}
.btn[disabled]{opacity:.45;cursor:default}

/* cards */
.card{position:relative;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.card + .card{margin-top:12px}
.card h3{font:700 21px/1.15 var(--font);letter-spacing:-.03em;margin:10px 0 6px}

/* world plates */
.plates{display:grid;gap:12px;margin-top:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{position:relative;display:flex;flex-direction:column;aspect-ratio:4/5;padding:14px;border-radius:20px;overflow:hidden;text-decoration:none;
  background:var(--bg);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,0) 70%,rgba(0,0,0,.1) 100%)}
.plate:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 26px 50px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.25)}
.plate .pl-top{display:flex;justify-content:space-between;gap:8px;font:500 9.5px/1.3 var(--font);letter-spacing:.13em;text-transform:uppercase;opacity:.85;position:relative;z-index:1}
.plate .pl-art{position:absolute;inset:13% 12% 35% 12%;display:grid;place-items:center}
.plate .pl-art svg{width:100%;height:100%}
.plate .pl-title{margin-top:auto;font:700 clamp(19px,2.6vw,25px)/.96 var(--font);letter-spacing:-.05em;position:relative;z-index:1}
.plate .pl-it{font:300 11px/1.3 var(--font);opacity:.85;margin-top:5px;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.group-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:30px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.group-h b{font:700 22px/1 var(--font);letter-spacing:-.04em}
.group-h span{font:500 10.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* pass + coach */
.passband{display:grid;gap:16px;align-items:center}
@media(min-width:760px){.passband{grid-template-columns:1.4fr 1fr}}
.price{font:600 32px/1 var(--font);letter-spacing:-.04em}
.price small{font:500 11px var(--font);letter-spacing:.1em;color:var(--mist);margin-left:4px}
.cta-it{font:700 clamp(24px,4.4vw,38px)/1 var(--font);letter-spacing:-.05em;margin:8px 0 12px}

/* world header */
.back{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 10.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mist)}
.back svg{width:16px;height:16px}
.whead{position:relative;margin-top:14px;padding:22px;border-radius:26px;overflow:hidden;background:var(--bg);color:var(--ink);display:grid;gap:10px;
  box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.whead::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%)}
.whead .w-art{position:absolute;right:12px;top:12px;width:40%;aspect-ratio:1;opacity:.95}
.whead .w-art svg{width:100%;height:100%}
.whead .ring-svg{color:inherit;stroke-width:.45px;opacity:.9}
.whead .eyebrow{color:inherit;opacity:.85;position:relative;z-index:1}
.whead .w-kicker{position:relative;z-index:1;margin-top:31%;font:600 11.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.whead h1{font:700 clamp(40px,9vw,84px)/.9 var(--font);letter-spacing:-.06em;margin:4px 0 6px;position:relative;z-index:1;max-width:12ch}
.whead p{position:relative;z-index:1;max-width:44ch}
.whead .w-it{font-weight:300;opacity:.85}
.whead .w-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font:500 10.5px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:1}
@media(min-width:760px){.whead{padding:30px}.whead .w-art{right:4%;top:50%;transform:translateY(-50%);width:min(34%,330px)}.whead .w-kicker{margin-top:44px}}
.tabbar{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:15;margin:12px -18px 10px;padding:8px 18px;
  background:linear-gradient(180deg,rgba(23,23,45,.97) 0%,rgba(23,23,45,.93) 78%,rgba(23,23,45,0) 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.tab{border:0;border-radius:999px;background:transparent;color:var(--mist);cursor:pointer;padding:9px 2px 10px;font:600 9.5px/1.1 var(--font);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:clip}
@media(max-width:400px){.tab{font-size:8.6px;letter-spacing:0}}
@media(min-width:560px){.tab{font-size:10px;letter-spacing:.08em}}
.tab b{display:block;font-size:9px;opacity:.65;margin-bottom:3px;font-weight:500}
.tab[aria-selected="true"]{background:var(--acc);color:var(--on-acc)}
.intro{display:grid;gap:4px;margin:4px 0 16px;max-width:62ch}

/* words */
.wordlist{display:grid;gap:10px}
@media(min-width:880px){.wordlist{grid-template-columns:1fr 1fr;align-items:start}}
.word{border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.035);transition:border-color .2s,background .2s}
.word.open{border-color:var(--acc);background:rgba(255,255,255,.06)}
.word-head{display:grid;grid-template-columns:1fr auto;gap:4px 12px;width:100%;padding:16px;text-align:left;background:none;border:0;cursor:pointer;border-radius:var(--r-sm)}
.term{font:700 22px/1.1 var(--font);letter-spacing:-.04em}
.tags{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.ipa{font:400 12px/1.35 var(--ipa);color:var(--mist);grid-column:1/-1}
.word-it{grid-column:1/-1;font-size:13.5px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;border:1px solid var(--acc);color:var(--acc);font:600 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.badge.good{border-color:var(--good);color:var(--good)}
.badge svg{width:11px;height:11px}
.word-body{display:grid;gap:14px;padding:0 16px 18px}
.mean{font-size:15px}
.pos{font:500 10.5px var(--font);letter-spacing:.06em;color:var(--dim);margin-left:4px}
.ex{display:grid;gap:6px;padding:14px;border-radius:12px;background:rgba(0,0,0,.18);border-left:2px solid var(--acc)}
.ex p:first-child{font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);cursor:pointer;font-size:13px}
.chipbtn svg{width:13px;height:13px;color:var(--acc)}
.ff{padding:14px;border-radius:12px;border:1px solid var(--acc-soft);background:linear-gradient(135deg,var(--acc-soft),transparent 62%)}
.ff-line{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:4px 0 8px}
.ff-line span{display:inline-flex;gap:6px;align-items:baseline}
.ff-line em{font:500 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-style:normal}
.ff-line b{font:700 17px/1.2 var(--font);letter-spacing:-.03em}
.ff-line s{font:700 17px/1.2 var(--font);color:var(--bad);text-decoration-thickness:2px}
.ff-line .say b{color:var(--acc)}
.ff p + p{margin-top:4px}
.tip p{font-size:14.5px}

/* practice */
.practice{display:grid;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(15,15,32,.45)}
.p-text{font:600 17.5px/1.36 var(--font);letter-spacing:-.025em}
.focus{font:400 12px/1.5 var(--font);color:var(--mist)}
.rec{position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;color:var(--on-acc);display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,var(--acc) 42%,var(--acc) 70%,rgba(0,0,0,.35) 140%);
  box-shadow:inset 0 -7px 14px rgba(0,0,0,.28),inset 0 4px 10px rgba(255,255,255,.65),0 10px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.55)}
.rec svg{width:24px;height:24px}
.rec.on{animation:pulse 1.15s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:inset 0 -7px 14px rgba(0,0,0,.28),inset 0 4px 10px rgba(255,255,255,.65),0 10px 24px rgba(0,0,0,.45),0 0 0 12px var(--acc-soft)}}
.live{font:500 12.5px/1.4 var(--font);color:var(--acc);min-height:1.4em}
.err{font-size:13.5px;color:var(--bad)}
.selfrate{display:grid;gap:8px}
.notice{display:grid;gap:6px;padding:14px 16px;border-radius:14px;border:1px solid rgba(243,227,138,.35);background:rgba(243,227,138,.06);font-size:13.5px;line-height:1.5;margin-bottom:14px}
.notice a{color:var(--warn)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 12px;border-radius:999px;cursor:pointer;font:600 10px/1 var(--font);letter-spacing:.12em;color:var(--mist)}
.seg button[aria-pressed="true"]{background:var(--cream);color:var(--navy)}

/* results */
.result{display:grid;grid-template-columns:52px 1fr;gap:12px 14px;align-items:center;padding:14px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.tuner{display:flex;gap:4px;align-items:flex-end;height:40px;width:52px}
.tuner i{flex:1;border-radius:3px;background:rgba(255,255,255,.12)}
.tuner i:nth-child(1){height:35%}.tuner i:nth-child(2){height:55%}.tuner i:nth-child(3){height:75%}.tuner i:nth-child(4){height:100%}
.band-clean .tuner i{background:var(--good)} .band-keeper .tuner i:nth-child(-n+3){background:var(--blue)} .band-rough .tuner i:nth-child(-n+2){background:var(--warn)} .band-again .tuner i:nth-child(1){background:var(--bad)}
.r-title{font:700 16px/1.25 var(--font);letter-spacing:-.02em}
.tws{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 9px;font:600 16px/1.55 var(--font);letter-spacing:-.02em}
.tw{border-bottom:2.5px solid transparent}
.tw.good{border-color:rgba(166,231,157,.75)}
.tw.close{color:var(--warn);border-color:var(--warn)}
.tw.miss{color:var(--bad);border-color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px}
.heardline{grid-column:1/-1;font:400 12px/1.45 var(--font);color:var(--mist)}
.tips{grid-column:1/-1;margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tips li{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);font-size:13.5px;line-height:1.5}
.tips b{font-weight:700}
.tips .h{font-size:11.5px;color:var(--mist);margin-left:8px}
.legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;font:500 10.5px var(--font);letter-spacing:.06em;color:var(--mist)}
.legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* listen */
.transcript{display:grid;gap:6px;margin-top:14px}
.tl{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:8px 10px;border-radius:10px;transition:background .2s;font-size:14px}
.tl b{font:600 10px/1.7 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.tl.now{background:var(--acc-soft)}
.tl.now b{color:var(--cream)}
.q{display:grid;gap:10px;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.q p{font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:10px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;cursor:pointer;font-size:13.5px;text-align:left}
.opt.right{border-color:var(--good);color:var(--good);background:rgba(166,231,157,.08)}
.opt.tried{border-color:var(--line);color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px}
.opt[disabled]{cursor:default}
.gapline{font-size:16px}
.gapline u{text-decoration:none;display:inline-block;min-width:72px;border-bottom:2px solid var(--acc);text-align:center;color:var(--acc);font-weight:700}
.scoreline{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* locked */
.locked{border-style:dashed;background:transparent}
.locked .lockrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.locked svg{width:18px;height:18px;color:var(--mist)}

/* role-play */
.sim-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.bubble{max-width:560px;padding:13px 16px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:15px;line-height:1.45}
.bubble .who{display:block;font:600 10px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.bubble.me{margin-left:auto;border-radius:18px 18px 6px 18px;background:var(--acc-soft);border-color:transparent}
.bubble.me .who{color:var(--cream)}
.convo{display:grid;gap:10px;margin:14px 0}
.task{display:grid;gap:10px;padding:16px;border-radius:16px;border:1px solid var(--acc);background:linear-gradient(160deg,var(--acc-soft),rgba(255,255,255,.02) 70%)}
.task .t{font:700 16.5px/1.35 var(--font);letter-spacing:-.02em}
.keys{display:flex;flex-wrap:wrap;gap:8px}
.key{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font:500 12.5px/1.2 var(--font);border:1px solid var(--line-2)}
.key.hit{border-color:var(--good);color:var(--good)}
.key.miss{border-color:var(--line-2);color:var(--dim)}
.key svg{width:13px;height:13px}
textarea{width:100%;min-height:84px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line-2);background:rgba(0,0,0,.25);color:var(--cream);font:400 15px/1.5 var(--font);resize:vertical}
textarea:focus{outline:2px solid var(--blue);outline-offset:2px}
.fb{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.fb .t{font:700 16.5px/1.3 var(--font);letter-spacing:-.02em}
.done .big{font:700 clamp(44px,8vw,68px)/.9 var(--font);letter-spacing:-.06em;margin:8px 0}

/* plans */
.plans{display:grid;gap:12px;margin-top:16px}
@media(min-width:760px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015))}
.plan.feat{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 24px 60px rgba(157,184,255,.12)}
.plan h3{font:700 28px/.95 var(--font);letter-spacing:-.05em}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.5px}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start}
.plan li svg{width:16px;height:16px;color:var(--good);margin-top:2px}
.plan .btn{margin-top:auto}
.codebox{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.codebox input{flex:1;min-width:220px;min-height:46px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);background:rgba(0,0,0,.25);color:var(--cream);font:600 14px/1 var(--font);letter-spacing:.1em;text-transform:uppercase}
.msg{font-size:13.5px;margin-top:8px}
.msg.ok{color:var(--good)} .msg.no{color:var(--bad)}
.legal{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--mist)}

/* levels */
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}
@media(min-width:620px){.levels{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.levels{grid-template-columns:repeat(6,1fr)}}
.lvl{display:grid;gap:3px;align-content:start;text-align:left;padding:14px 14px 16px;border-radius:18px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);cursor:pointer;min-height:112px;
  transition:background .2s,border-color .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.lvl b{font:700 42px/.9 var(--font);letter-spacing:-.06em}
.lvl .lv-name{font:600 10px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-top:8px}
.lvl .lv-short{font:400 12.5px/1.35 var(--font);color:var(--mist)}
.lvl:hover{border-color:var(--cream)}
.lvl:active{transform:scale(.98)}
.lvl.on{background:var(--cream);color:var(--navy);border-color:var(--cream);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.lvl.on .lv-name,.lvl.on .lv-short{color:rgba(23,23,45,.7)}
.lvl-can{margin-top:16px;font-size:14.5px;max-width:72ch}
.lvl-can b{font-weight:700;margin-right:6px}
.lvl-can .it{display:block;margin-top:3px;font-size:13.5px}

/* section openers */
.opener{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin:4px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.op-n{font:300 60px/.78 var(--font);letter-spacing:-.07em;color:var(--acc)}
.op-t{font:700 28px/1 var(--font);letter-spacing:-.045em;margin:0 0 8px}
.opener p{font-size:14px;max-width:60ch}
.opener .it{font-size:13px;margin-top:3px}

/* word index */
.windex{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:860px}
.wrow{border-bottom:1px solid var(--line);transition:background .25s}
.wrow.open{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.wr-head{display:grid;grid-template-columns:34px 1fr auto;gap:3px 10px;align-items:baseline;width:100%;padding:18px 4px;background:none;border:0;cursor:pointer;text-align:left;border-radius:10px}
.wr-n{font:500 10.5px/1 var(--font);letter-spacing:.12em;color:var(--dim)}
.wr-term{font:700 25px/1.05 var(--font);letter-spacing:-.045em}
.wr-tags{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.wr-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2)}
.wr-plus svg{width:15px;height:15px;transition:transform .25s}
.wrow.open .wr-plus{border-color:var(--acc);color:var(--acc)}
.wrow.open .wr-plus svg{transform:rotate(45deg)}
.wr-ipa{grid-column:2/-1;font:400 12.5px/1.45 var(--ipa);color:var(--mist)}
.wr-ipa .pos{font-family:var(--font);color:var(--dim)}
.wr-it{grid-column:2/-1;font:300 14.5px/1.35 var(--font);color:var(--mist)}
.wr-body{display:grid;gap:16px;padding:0 4px 24px 48px}
@media(max-width:520px){.wr-body{padding-left:4px}}
.why{margin:0;padding:2px 0 2px 16px;border-left:2px solid var(--acc)}
.why p:first-of-type{font:400 16px/1.55 var(--font);letter-spacing:-.01em}
.why .it{margin-top:4px;font-size:13.5px}

/* grammar */
.gram{padding:6px 0 30px;margin-bottom:26px;border-bottom:1px solid var(--line);max-width:860px}
.g-name{font:700 clamp(32px,6.4vw,50px)/.92 var(--font);letter-spacing:-.055em;margin:14px 0 6px}
.g-name-it{font-size:14px}
.g-sec{display:grid;gap:8px;margin-top:20px}
.g-sec > .label{margin:0}
.forms{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.form{display:inline-block;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font:400 15px/1.35 var(--font)}
.hl{font-weight:700;color:var(--acc)}
.g-why{font:400 17px/1.5 var(--font);letter-spacing:-.012em;max-width:62ch}
.g-why + .it{font-size:14px}
.g-ex{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-ex li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:14px;background:rgba(0,0,0,.2);font:400 16px/1.4 var(--font)}
.ic-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--cream)}
.ic-btn svg{width:16px;height:16px}
.trap{padding:14px 16px;border-radius:16px;border:1px solid var(--acc-soft);background:linear-gradient(135deg,var(--acc-soft),transparent 72%);font-size:14.5px}
.trap .it{font-size:13.5px}
.qc{display:grid;gap:10px;padding:14px 0 4px}
.qc + .qc{border-top:1px dashed var(--line)}
.fbk{font-size:13.5px;line-height:1.5}
.fbk.ok{color:var(--good)}
.fbk.no{color:var(--warn)}

/* transcript notes (footnotes) */
.tl-text{padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;line-height:1.5;text-align:left;cursor:pointer;
  text-decoration:underline dotted var(--acc);text-decoration-thickness:1.5px;text-underline-offset:4px}
.nn{display:inline-block;font:700 9px/1 var(--font);color:var(--acc);margin-left:4px;transform:translateY(-6px)}
.tl.open{background:rgba(255,255,255,.04)}
.tl-note{grid-column:2;margin-top:8px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.24);border-left:2px solid var(--acc);font-size:13.5px;line-height:1.5}
.tl-note .it{margin-top:3px;font-size:13px}

/* unit navigation */
.unitnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
.un{display:grid;gap:5px;align-content:start;padding:16px 18px;border-radius:18px;text-decoration:none;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s}
.un:hover{border-color:var(--acc);transform:translateY(-2px)}
.un .label{margin:0}
.un b{font:600 10.5px/1.35 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.un span:last-child{font:700 18px/1.15 var(--font);letter-spacing:-.03em}
.un-next{text-align:right}
@media(max-width:560px){.unitnav{grid-template-columns:1fr}.un-next{text-align:left}}

/* footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 18px;margin-top:64px;padding-top:18px;border-top:1px solid var(--line);font:500 10.5px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.foot .slogan{font:600 15px/1.2 var(--font);letter-spacing:-.02em;text-transform:none;color:var(--blue)}
.foot a{text-decoration:none}
.foot .copy{flex-basis:100%;letter-spacing:.08em}

/* radio */
.player{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;
  width:min(560px,calc(100% - 24px));padding:7px 14px 7px 7px;border-radius:999px;background:rgba(32,32,62,.76);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16)}
.p-orb{position:relative;flex:none;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;overflow:hidden;color:var(--cream);
  background:radial-gradient(circle at 50% 56%,#2a2a58,#121226);box-shadow:inset 0 -8px 16px rgba(157,184,255,.28),inset 0 4px 10px rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.4)}
.p-orb .spin{inset:6%;animation-duration:24s;animation-play-state:paused}
.p-orb .ring-svg{stroke-width:.45px;opacity:.85}
.playing .p-orb .spin{animation-play-state:running}
.p-orb .p-ic{position:absolute;inset:0;display:grid;place-items:center}
.p-orb .p-ic svg{width:20px;height:20px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.p-meta{flex:1;min-width:0}
.p-title{font:600 9.5px/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.p-station{font:700 14px/1.25 var(--font);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center}
.p-btn svg{width:16px;height:16px}
.p-vol{flex:none;width:92px;accent-color:var(--blue)}
@media(max-width:430px){.p-vol{display:none}}

/* sheet + toast */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:grid;align-items:end;background:rgba(9,9,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(min-width:700px){.sheet-wrap{align-items:center;justify-items:center}}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow:auto;display:grid;gap:12px;padding:22px 20px calc(26px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,#25254b,#1a1a35);border:1px solid var(--line-2);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
@media(min-width:700px){.sheet{border-radius:24px}}
.sheet h2{font:700 30px/.95 var(--font);letter-spacing:-.05em}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;z-index:40;padding:9px 14px;border-radius:999px;background:var(--cream);color:var(--navy);
  font:600 10.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* courses: one per trade */
.eyebrow .switch{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;white-space:nowrap}
.eyebrow .switch:hover{border-color:var(--cream)}
.course-kicker{margin-top:18px;font:600 10.5px/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.course-kicker+.display{margin-top:8px}
.lvl .lv-n{margin-top:auto;padding-top:8px;font:500 9.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lvl.on .lv-n{color:rgba(23,23,45,.55)}
.plate.v2 .pl-art svg{transform:scaleX(-1)}
.plate.v3 .pl-art svg{transform:rotate(-90deg) scale(.92)}
.course-plate .pl-it{-webkit-line-clamp:3}
.soon{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soon li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border-radius:999px;border:1px solid var(--line-2);font:500 12.5px/1 var(--font);color:var(--mist)}
.soon .dot{width:9px;height:9px;border-radius:3px;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(236,234,227,.25)}

/* the method (as on the website) */
.method{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line);display:grid}
@media(min-width:880px){.method{grid-template-columns:repeat(3,1fr);gap:0 28px}}
.method li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.method .m-n{font:700 26px/1 var(--font);letter-spacing:-.05em;color:var(--acc,var(--blue))}
.method b{display:block;font:700 19px/1.1 var(--font);letter-spacing:-.03em}
.method b + .it{display:block;font-size:13px;margin:2px 0 8px}
.method p{font-size:14px;line-height:1.45}

/* listen: cast and voices */
.cast{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:500 10.5px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.cast b{color:var(--cream);margin-right:6px}
.voices{margin-top:12px;display:grid;gap:4px;max-width:70ch}

/* patterns */
.g-note{margin-top:16px;padding-top:10px;border-top:1px dashed var(--line);font:500 10px/1.5 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* project */
.frames{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.frames li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line-2);font-size:15px}
.proj-input{display:block;width:100%;min-height:180px;margin-top:4px;padding:14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(15,15,32,.55);font-size:16px;line-height:1.5;resize:vertical}
.proj-input:focus{outline:2px solid var(--acc);outline-offset:1px}
.own{margin-top:14px}.own-it{font-size:13px;margin-top:2px}
.projband{border-color:var(--acc-soft,var(--line))}
.final{display:grid;gap:0;padding:6px 20px}
.fp{padding:16px 0;border-bottom:1px solid var(--line)}.fp:last-child{border-bottom:0}
.fp h3{font:700 20px/1.1 var(--font);letter-spacing:-.03em;margin:8px 0}
.fp .eyebrow a{color:var(--mist)}
.fp-text{font-size:15.5px;line-height:1.55;white-space:normal}

/* studio */
.slots{display:grid;gap:6px}
@media(min-width:760px){.slots{grid-template-columns:repeat(2,1fr)}}
.slot{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);background:transparent;cursor:pointer;text-align:left;font-size:13.5px}
.slot.on{border-color:var(--blue);background:rgba(157,184,255,.08)}
.slot span{color:var(--mist);font-variant-numeric:tabular-nums}
.studio-list{margin-top:16px}
.st-unit{font:600 11px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:22px 0 6px}
.st-line{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.st-line.have p{color:var(--good)}
.st-id{font-size:10.5px;color:var(--dim);letter-spacing:.06em;text-transform:none}
.rec.small{width:44px;height:44px}.rec.small svg{width:18px;height:18px}

/* words: across time */
.timeblock{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.timeblock h3{margin:10px 0 6px}
.tlines{list-style:none;margin:14px 0 0;padding:0}
.tlines li{display:grid;grid-template-columns:minmax(96px,30%) 1fr auto;gap:10px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.t-when{font:500 10.5px/1.35 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--acc,var(--cream))}
.t-when span{display:block;text-transform:none;letter-spacing:0;font-size:12px;font-weight:400;color:var(--mist);margin-top:2px}
.t-say{font-size:16px;line-height:1.4}
.t-say b,.t-say strong{font-weight:700}
@media(max-width:420px){.tlines li{grid-template-columns:1fr auto}.t-when{grid-column:1/-1}}

/* ---------- readability layer (Nov 2026): bigger labels, brighter secondary text, Italian easier to read ---------- */
:root{--mist:#D2D1DF;--dim:#A9A8C0}
body{font-size:16px;line-height:1.6}
.it{font-weight:400;color:#C9C8D8}
.small{font-size:14px}
.label,.mono,.eyebrow,.group-h span,.back,.whead .w-meta,.ff-line em,.bubble .who,.lvl .lv-name,.wr-n,.un b,.foot,.p-title,
.course-kicker,.lvl .lv-n,.cast,.g-note,.st-unit,.t-when,.plate .pl-top,.whead .w-kicker,.chip,.seg button,.badge{font-size:12px;letter-spacing:.09em}
.plate .pl-top{opacity:1}
.plate .pl-it{font:400 13px/1.35 var(--font);opacity:1;-webkit-line-clamp:3}
.plate .pl-title{font-size:clamp(21px,2.8vw,26px)}
.lvl-can .it,.opener .it,.why .it,.trap .it,.tl-note .it,.method b + .it{font-size:14.5px}
.g-why + .it{font-size:15px}
.nn{font-size:11px}
.tab{font-size:11.5px;letter-spacing:.04em;color:var(--cream)}
.tab b{font-size:10.5px}
@media (max-width:560px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px;gap:4px}
  .tab{padding:10px 4px 11px;font-size:12px}
}
.lede{max-width:40ch}
.plate{aspect-ratio:4/5.5}
.plate .pl-art{inset:14% 18% 47% 18%}