*,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{margin:0}
  img{max-width:100%;display:block}
  button{font:inherit;color:inherit;cursor:pointer}
  a{color:inherit}

  :root{
    color-scheme:light dark;
    --ground:#f3eee4;--surface:#fffdf8;--surface-2:#ece4d5;
    --ink:#221d15;--ink-soft:#4a4234;--muted:#665c44;
    --line:rgba(34,29,21,.13);--line-strong:rgba(34,29,21,.22);
    --accent:#bd7412;--accent-ink:#fff;--teal:#2f7a6f;--coral:#bd5540;--violet:#7a5bb0;
    --add:#3c8b50;--del:#bd4f3e;
    --t-bg:#161209;--t-bg2:#1e1910;--t-ink:#ece3d1;--t-muted:#988c73;
    --t-accent:#f2ab3c;--t-add:#84cc8e;--t-del:#ea8471;--t-teal:#78bcb1;
    --maxw:1080px;--spine:44rem;--radius:14px;--radius-sm:9px;--fs-body:1.0625rem;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
    --shadow:0 1px 2px rgba(20,15,5,.05),0 14px 40px -18px rgba(20,15,5,.28);
    --shadow-t:0 24px 60px -24px rgba(0,0,0,.6);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ground:#14110c;--surface:#1c1811;--surface-2:#241f16;
      --ink:#f1e9db;--ink-soft:#d6cdba;--muted:#a3977f;
      --line:rgba(241,233,219,.12);--line-strong:rgba(241,233,219,.2);
      --accent:#f2ab3c;--accent-ink:#1a1204;--teal:#74bcb1;--coral:#e87c64;--violet:#b39ae6;
      --add:#84cc8e;--del:#ea8471;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -20px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"]{
    --ground:#f3eee4;--surface:#fffdf8;--surface-2:#ece4d5;--ink:#221d15;--ink-soft:#4a4234;
    --muted:#665c44;--line:rgba(34,29,21,.13);--line-strong:rgba(34,29,21,.22);
    --accent:#bd7412;--accent-ink:#fff;--teal:#2f7a6f;--coral:#bd5540;--violet:#7a5bb0;--add:#3c8b50;--del:#bd4f3e;
    --shadow:0 1px 2px rgba(20,15,5,.05),0 14px 40px -18px rgba(20,15,5,.28);
  }
  :root[data-theme="dark"]{
    --ground:#14110c;--surface:#1c1811;--surface-2:#241f16;--ink:#f1e9db;--ink-soft:#d6cdba;
    --muted:#a3977f;--line:rgba(241,233,219,.12);--line-strong:rgba(241,233,219,.2);
    --accent:#f2ab3c;--accent-ink:#1a1204;--teal:#74bcb1;--coral:#e87c64;--violet:#b39ae6;--add:#84cc8e;--del:#ea8471;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -20px rgba(0,0,0,.7);
  }

  body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);
    line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(120% 80% at 50% -10%,rgba(0,0,0,.5),transparent 70%);
            mask-image:radial-gradient(120% 80% at 50% -10%,rgba(0,0,0,.5),transparent 70%);opacity:.5}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
  .spine{max-width:var(--spine);margin-inline:auto}

  h1,h2,h3{margin:0;text-wrap:balance;line-height:1.08;letter-spacing:-.02em;font-weight:800}
  h1{font-size:clamp(2.35rem,7vw,4.15rem)}
  h2{font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:-.025em}
  h3{font-size:1.2rem;letter-spacing:-.01em;font-weight:750}
  p{margin:0}
  .eyebrow{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
    color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:.55em}
  .eyebrow::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.7}
  .lead{font-size:clamp(1.08rem,2.4vw,1.32rem);color:var(--ink-soft);line-height:1.55}

  .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;
    box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}

  /* logo */
  .logo{width:30px;height:30px;flex-shrink:0;border-radius:8px;box-shadow:0 2px 8px -2px color-mix(in srgb,var(--accent) 60%,transparent)}
  .logo .bg{fill:var(--accent)}
  .logo .fg{stroke:var(--accent-ink);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .logo .cur{fill:var(--accent-ink)}

  header.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 82%,transparent);
    backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
  .bar-in{max-width:var(--maxw);margin-inline:auto;padding:10px clamp(18px,5vw,40px);display:flex;align-items:center;gap:16px}
  .brand{display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
  .brand .wm{font-family:var(--mono);font-weight:700;font-size:1.12rem;letter-spacing:-.03em;display:flex;align-items:baseline;color:var(--ink)}
  .brand .car{color:var(--accent);animation:blink 1.6s step-end infinite;font-weight:400;margin-left:1px}
  .brand small{font-family:var(--sans);font-size:.66rem;color:var(--muted);letter-spacing:.02em;margin-left:.4em;font-weight:600}
  .bar-nav{display:flex;gap:20px;margin-left:auto;align-items:center}
  .bar-nav a{font-size:.9rem;color:var(--ink-soft);text-decoration:none;font-weight:550;transition:color .15s}
  .bar-nav a:hover{color:var(--accent)}
  .bar-tools{display:flex;align-items:center;gap:10px;margin-left:auto}

  .seg{display:inline-flex;position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;font-family:var(--mono)}
  .seg-thumb{position:absolute;top:3px;bottom:3px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);
    transition:transform .28s cubic-bezier(.4,1.3,.5,1),width .28s;z-index:0}
  .seg-btn{position:relative;z-index:1;border:0;background:transparent;padding:5px 13px;border-radius:999px;
    font-size:.8rem;font-weight:600;color:var(--muted);transition:color .2s;line-height:1.2}
  .seg-btn[aria-pressed="true"]{color:var(--ink)}
  .icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
    background:var(--surface-2);border-radius:10px;font-size:1rem;color:var(--ink-soft);transition:.15s}
  .icon-btn:hover{border-color:var(--line-strong);color:var(--accent)}

  .btn{display:inline-flex;align-items:center;gap:.6em;border:1px solid transparent;border-radius:11px;
    padding:.82em 1.35em;font-weight:650;font-size:.98rem;text-decoration:none;letter-spacing:-.01em;
    transition:transform .12s,box-shadow .2s,background .2s;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,#fff 9%,var(--accent)),var(--accent));color:var(--accent-ink);box-shadow:0 8px 24px -10px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
  .btn-primary:hover{box-shadow:0 13px 32px -8px color-mix(in srgb,var(--accent) 78%,transparent),inset 0 1px 0 rgba(255,255,255,.26)}
  .btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn .k{font-family:var(--mono);font-size:.9em}

  .hero{padding:clamp(52px,9vw,100px) 0 clamp(26px,5vw,48px)}
  .hero-grid{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1fr;align-items:center}
  @media(min-width:940px){.hero-grid{grid-template-columns:1.02fr .98fr}}
  .hero h1{margin-top:18px}
  .hero h1 .hl{color:var(--accent);white-space:nowrap}
  .hero .lead{margin-top:20px;max-width:35rem}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:.85rem;color:var(--muted)}
  .hero-meta span{display:inline-flex;align-items:center;gap:.5em}
  .hero-meta .dotm{width:6px;height:6px;border-radius:50%;background:var(--teal)}

  .term{background:var(--t-bg);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
    box-shadow:var(--shadow-t);overflow:hidden;font-family:var(--mono);color:var(--t-ink)}
  .term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--t-bg2);border-bottom:1px solid rgba(255,255,255,.07)}
  .term-bar .dot{width:11px;height:11px;border-radius:50%;background:#4a4238}
  .term-bar .dot:nth-child(1){background:#e0685a}.term-bar .dot:nth-child(2){background:#e6b34e}.term-bar .dot:nth-child(3){background:#63c07a}
  .term-title{margin-left:8px;font-size:.72rem;color:var(--t-muted);letter-spacing:.02em}
  .term-src{display:none}
  .term-body{padding:16px 16px 18px;font-size:.83rem;line-height:1.85;min-height:2.5em;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
  .tl{opacity:0;transform:translateY(3px);animation:tlin .28s ease forwards}
  @keyframes tlin{to{opacity:1;transform:none}}
  .tl .pr{color:var(--t-accent);font-weight:600;margin-right:.55em;user-select:none}
  .tl .pru{color:var(--t-teal);font-weight:600;margin-right:.55em;user-select:none}
  .tl .cmd{color:var(--t-ink)}
  .tl .out{color:var(--t-muted)}
  .tl.ok .out{color:var(--t-add)}
  .tl.dot .out{color:var(--t-ink)}
  .tl.cmt .out{color:#6f6650;font-style:italic}
  .caret{display:inline-block;width:.6em;height:1.05em;transform:translateY(.18em);background:var(--t-accent);
    animation:blink 1.05s step-end infinite;border-radius:1px}
  @keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
  .term-cap{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:9px;display:flex;align-items:flex-start;gap:.5em;line-height:1.5}
  .term-cap .ic{color:var(--accent);flex-shrink:0}

  .section{padding:clamp(46px,8vw,92px) 0}
  .sec-head{max-width:40rem;margin-bottom:clamp(28px,4vw,46px)}
  .sec-head h2{margin-top:14px}
  .sec-head p{margin-top:14px;color:var(--ink-soft)}

  .surf{display:grid;gap:14px;grid-template-columns:1fr}
  @media(min-width:680px){.surf{grid-template-columns:1fr 1fr}}
  .surf-card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.18s}
  .surf-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
  .surf-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
    padding:.28em .7em;border-radius:999px;display:inline-flex;align-items:center;gap:.4em}
  .surf-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .surf-tag.web{color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,transparent)}
  .surf-tag.desk{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
  .surf-tag.mob{color:var(--coral);background:color-mix(in srgb,var(--coral) 14%,transparent)}
  .surf-tag.term{color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,transparent)}
  .surf-card h3{margin:12px 0 0;font-size:1.12rem}
  .surf-card .wt{margin-top:8px;font-size:.92rem;color:var(--ink-soft)}
  .surf-card .wn{margin-top:12px;font-size:.86rem;color:var(--muted);padding-top:12px;border-top:1px dashed var(--line)}
  .surf-card .wn b{color:var(--accent);font-weight:600;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:3px}

  /* capabilities strip */
  .caps{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
  .cap-chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78rem;font-weight:600;
    padding:.4em .8em;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
  .cap-chip .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}

  .curr{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr))}
  .curr-mod{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
  .curr-mod:first-child{margin-top:0}
  .curr-mod .ml{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent)}
  .curr-mod .mt{font-size:.88rem;color:var(--muted)}
  .cc{display:flex;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    text-decoration:none;transition:.18s;position:relative;overflow:hidden}
  .cc:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow)}
  .cc .num{font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:700;flex-shrink:0;padding-top:2px}
  .cc h3{font-size:.98rem;font-weight:700}
  .cc p{font-size:.83rem;color:var(--muted);margin-top:4px}

  .badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
    letter-spacing:.08em;font-weight:650;padding:.28em .7em;border-radius:999px;border:1px solid transparent;white-space:nowrap}
  .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .badge.lv-b{color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,transparent)}
  .badge.lv-o{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .badge.lv-p{color:var(--coral);background:color-mix(in srgb,var(--coral) 15%,transparent)}

  .mod{margin-top:clamp(34px,6vw,64px);padding-top:clamp(28px,4vw,46px);border-top:2px solid var(--line-strong)}
  .mod:first-child{border-top:0;padding-top:0;margin-top:0}
  .mod h3{font-size:clamp(1.35rem,3.4vw,2rem);margin-top:10px;font-weight:800;letter-spacing:-.02em}
  .mod p{margin-top:10px;color:var(--muted);max-width:54ch;font-size:.98rem}

  .lesson{padding:clamp(38px,6vw,60px) 0;border-top:1px solid var(--line);scroll-margin-top:74px}
  .lesson-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
  .lesson-num{font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--accent);
    border:1px solid var(--line-strong);border-radius:9px;padding:.2em .6em;letter-spacing:-.02em}
  .lesson h2{margin:6px 0 0;max-width:26ch}
  .lesson-body{margin-top:22px}
  .lesson-body p{margin-top:1.05em;color:var(--ink-soft)}
  .lesson-body p:first-child{margin-top:0}
  .lesson-media{margin-top:26px}
  code.ic{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--line);
    padding:.08em .42em;border-radius:6px;color:var(--ink);white-space:nowrap}

  .tip{display:flex;gap:13px;margin-top:24px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:var(--radius-sm)}
  .tip .lbl{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);
    font-weight:700;flex-shrink:0;padding-top:2px}
  .tip p{font-size:.92rem;color:var(--ink-soft);margin:0}

  /* app / chat mockup */
  .appwin{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin-top:24px}
  .appwin-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
  .appwin-bar .dots{display:flex;gap:6px}
  .appwin-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
  .appwin-bar .ttl{font-family:var(--mono);font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:.45em}
  .appwin-bar .ttl .sp{color:var(--accent)}
  .appwin-body{padding:16px;display:grid;gap:11px}
  .msg{max-width:86%;padding:10px 14px;border-radius:15px;font-size:.9rem;line-height:1.5}
  .msg .who{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:4px}
  .msg.user{justify-self:end;background:color-mix(in srgb,var(--accent) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-bottom-right-radius:5px}
  .msg.user .who{color:var(--accent)}
  .msg.claude{justify-self:start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
  .msg.claude .who{color:var(--teal)}
  .note{justify-self:center;max-width:94%;text-align:center;font-size:.79rem;color:var(--muted);font-style:italic;
    background:transparent;border:1px dashed var(--line-strong);border-radius:9px;padding:8px 13px}
  .note.perm{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));color:var(--ink-soft);font-style:normal}
  .note.perm::before{content:"🔒 ";font-style:normal}
  .appwin .msg,.appwin .note{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
  .appwin .msg.show,.appwin .note.show{opacity:1;transform:none}
  /* typing indicator */
  .appwin-body .typing{justify-self:start;background:var(--surface-2);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px;padding:13px 16px;display:inline-flex;gap:5px;align-items:center}
  .appwin-body .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tdot 1s infinite ease-in-out}
  .appwin-body .typing i:nth-child(2){animation-delay:.15s}
  .appwin-body .typing i:nth-child(3){animation-delay:.3s}
  @keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

  /* animated "Claude web" browser demo */
  .browser{margin-top:26px;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
  .br-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--surface-2);border-bottom:1px solid var(--line)}
  .br-bar .bd{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
  .br-bar .url{margin-left:12px;font-family:var(--mono);font-size:.75rem;color:var(--muted);background:var(--ground);border:1px solid var(--line);border-radius:7px;padding:4px 12px;flex:1;max-width:280px}
  .br-body{display:grid;grid-template-columns:1fr}
  @media(min-width:600px){.br-body{grid-template-columns:1fr 1fr}}
  .br-chat{padding:18px;display:grid;gap:11px;align-content:start;border-bottom:1px solid var(--line)}
  @media(min-width:600px){.br-chat{border-bottom:0;border-right:1px solid var(--line)}}
  .bmsg{max-width:94%;padding:10px 14px;border-radius:15px;font-size:.87rem;line-height:1.5;opacity:0;transform:translateY(8px)}
  .browser.in .bmsg{opacity:1;transform:none;transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
  .browser.in .bmsg:nth-child(1){transition-delay:.2s}
  .browser.in .bmsg:nth-child(2){transition-delay:.7s}
  .bmsg.user{justify-self:end;background:color-mix(in srgb,var(--accent) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-bottom-right-radius:5px}
  .bmsg.claude{justify-self:start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
  .br-artifact{padding:16px;display:grid;gap:10px;align-content:start;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));opacity:0;transform:translateX(22px) scale(.98)}
  .browser.in .br-artifact{opacity:1;transform:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1);transition-delay:1.15s}
  .fa-badge{font-family:var(--mono);font-size:.66rem;color:var(--accent);font-weight:700;letter-spacing:.04em}
  .fa-hero{background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:9px;justify-items:start}
  .fa-hero .fa-h{width:70%;height:13px;border-radius:5px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--coral)))}
  .fa-hero .fa-sub{width:88%;height:8px;border-radius:4px;background:var(--line-strong)}
  .fa-hero .fa-sub.s2{width:58%}
  .fa-hero .fa-btn{margin-top:5px;width:38%;height:22px;border-radius:7px;background:var(--accent)}
  .fa-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .fa-cards span{height:46px;border-radius:8px;background:var(--ground);border:1px solid var(--line)}

  /* install steps */
  .steps{margin-top:24px}
  .steplist{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:10px}
  .steplist li{counter-increment:st;display:flex;gap:13px;padding:13px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem;color:var(--ink-soft)}
  .steplist li::before{content:counter(st);font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 13%,transparent);width:1.7em;height:1.7em;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
  .steps-os{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:.5em}
  .steps-os b{color:var(--accent)}

  /* code GUI mockups */
  .mock,.planbox,.permbox,.mcpbox{background:var(--t-bg);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
    box-shadow:var(--shadow-t);overflow:hidden;font-family:var(--mono);font-size:.82rem;margin-top:22px;color:var(--t-ink)}
  .mock-h{padding:9px 14px;background:var(--t-bg2);border-bottom:1px solid rgba(255,255,255,.07);color:var(--t-muted);
    font-size:.72rem;display:flex;justify-content:space-between;gap:10px}
  .mock-b{padding:6px 0}
  .dline{padding:1px 14px;white-space:pre-wrap;color:var(--t-muted)}
  .dline.add{background:rgba(132,204,142,.11);color:var(--t-add)}
  .dline.add::before{content:"+ ";opacity:.7}
  .dline.del{background:rgba(234,132,113,.1);color:var(--t-del)}
  .dline.del::before{content:"- ";opacity:.7}
  .dline.ctx::before{content:"  "}
  .mock-ask{padding:11px 14px;border-top:1px solid rgba(255,255,255,.07);color:var(--t-ink);display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
  .mock-ask .y{color:var(--t-accent)}
  .kbd{font-family:var(--mono);font-size:.72em;border:1px solid var(--t-muted);border-radius:5px;padding:.05em .45em;color:var(--t-ink)}
  .planbox .mock-h{color:var(--t-accent)}
  .plan-b{padding:12px 16px;display:grid;gap:7px}
  .plan-b .pl{display:flex;gap:.7em;color:var(--t-ink)}
  .plan-b .pl i{color:var(--t-accent);font-style:normal}
  .plan-foot{padding:11px 16px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:8px;flex-wrap:wrap}
  .pill-btn{border:1px solid var(--t-muted);border-radius:7px;padding:.3em .8em;font-size:.75rem;color:var(--t-ink)}
  .pill-btn.go{background:var(--t-accent);color:#1a1204;border-color:transparent;font-weight:700}
  .perm-b{padding:12px 16px;display:grid;gap:10px}
  .perm-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .perm-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:.18em .6em;border-radius:6px;flex-shrink:0}
  .perm-tag.allow{color:var(--t-add);background:rgba(132,204,142,.14)}
  .perm-tag.ask{color:var(--t-accent);background:rgba(242,171,60,.14)}
  .perm-tag.deny{color:var(--t-del);background:rgba(234,132,113,.14)}
  .perm-row .chips{display:flex;gap:6px;flex-wrap:wrap}
  .chip{font-size:.74rem;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:.15em .55em;color:var(--t-ink)}
  .mcp-b{padding:12px 16px;display:grid;gap:8px}
  .mcp-row{display:flex;align-items:center;gap:10px}
  .mcp-row .st{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .mcp-row .st.on{background:var(--t-add);box-shadow:0 0 8px var(--t-add)}
  .mcp-row .st.off{background:var(--t-muted)}
  .mcp-row .nm{color:var(--t-ink);min-width:88px}
  .mcp-row .lb{color:var(--t-muted);font-size:.76rem}
  .ctxrow{display:flex;align-items:center;gap:14px;margin-top:22px;padding:15px 18px;background:var(--t-bg);
    border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);font-family:var(--mono);font-size:.8rem;
    color:var(--t-ink);box-shadow:var(--shadow-t);flex-wrap:wrap}
  .ctxgrid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;flex:1;min-width:200px}
  .ctxgrid i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.08)}
  .ctxgrid i.f{background:linear-gradient(135deg,var(--t-accent),#e6b34e)}
  .ctxpct{color:var(--t-accent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .deploy{display:inline-flex;align-items:center;gap:.7em;margin-top:20px;padding:.7em 1em;border-radius:11px;
    background:color-mix(in srgb,var(--add) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--add) 30%,var(--line));
    font-family:var(--mono);font-size:.85rem;flex-wrap:wrap}
  .deploy .live{display:inline-flex;align-items:center;gap:.4em;color:var(--add);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
  .deploy .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--add);box-shadow:0 0 8px var(--add)}
  .deploy a{color:var(--ink);text-decoration:none;font-weight:600}
  .cmp{display:grid;gap:14px;margin-top:22px;grid-template-columns:1fr}
  @media(min-width:620px){.cmp{grid-template-columns:1fr 1fr}}
  .cmp-card{padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
  .cmp-card.weak{border-color:color-mix(in srgb,var(--del) 30%,var(--line))}
  .cmp-card.strong{border-color:color-mix(in srgb,var(--add) 34%,var(--line));background:color-mix(in srgb,var(--add) 5%,var(--surface))}
  .cmp-card .tag{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:inline-flex;align-items:center;gap:.4em}
  .cmp-card.weak .tag{color:var(--del)}.cmp-card.strong .tag{color:var(--add)}
  .cmp-card .pr{font-family:var(--mono);font-size:.84rem;color:var(--ink);margin-top:10px;line-height:1.5}
  .cmp-card .rz{font-size:.82rem;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .shot{margin-top:22px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface);padding:24px 22px;text-align:center;color:var(--muted)}
  .shot .win{max-width:340px;margin:0 auto 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
  .shot .win-b{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
  .shot .win-b i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
  .shot .win-c{padding:24px 14px;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
  .shot .cap{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
  .shot .cap b{color:var(--accent);font-weight:600}

  .trig-soft{margin:30px 0 4px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:15px 20px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:var(--radius)}
  .trig-soft .sp{font-size:.94rem;color:var(--ink-soft);flex:1;min-width:220px}
  .trig-soft .sp b{color:var(--ink);font-weight:700}
  .trig-soft a{font-family:var(--mono);font-size:.82rem;color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
  .trig-soft a:hover{text-decoration:underline}
  .trig-mid{margin:34px 0;padding:clamp(24px,4vw,38px);border-radius:var(--radius);background:var(--surface);
    border:1px solid var(--line-strong);box-shadow:var(--shadow);position:relative;overflow:hidden}
  .trig-mid::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%);pointer-events:none}
  .trig-mid h3{font-size:clamp(1.3rem,3vw,1.75rem);font-weight:800;letter-spacing:-.02em;max-width:24ch;position:relative;margin-top:10px}
  .trig-mid p{margin-top:12px;color:var(--ink-soft);max-width:48ch;position:relative}
  .trig-mid ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;position:relative}
  .trig-mid li{display:flex;gap:.6em;font-size:.94rem;color:var(--ink-soft)}
  .trig-mid li::before{content:"→";color:var(--accent);font-weight:700}
  .trig-mid .btn{margin-top:22px;position:relative}

  .cta{scroll-margin-top:74px;margin-top:clamp(40px,7vw,80px);padding:clamp(34px,6vw,72px) 0;background:var(--surface);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 65%)}
  .cta-in{position:relative}
  .cta h2{max-width:20ch;margin-top:16px}
  .cta .bridge{margin-top:20px;color:var(--ink-soft);max-width:56ch;font-size:1.06rem}
  .cta-cols{display:grid;gap:26px;margin-top:38px;grid-template-columns:1fr}
  @media(min-width:860px){.cta-cols{grid-template-columns:1.15fr .85fr;align-items:start;gap:40px}}
  .incl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .incl li{display:flex;gap:12px;font-size:.98rem;color:var(--ink)}
  .incl .ck{color:var(--add);flex-shrink:0;font-weight:800}
  .incl b{font-weight:700}
  .offer{background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:sticky;top:82px}
  .offer .price{display:flex;align-items:baseline;gap:.45em;font-weight:800;letter-spacing:-.03em;flex-wrap:wrap}
  .offer .price .old{font-size:1.05rem;color:var(--muted);font-weight:600;text-decoration:line-through;text-decoration-color:var(--del)}
  .offer .price .amt{font-size:2.2rem;color:var(--ink)}
  .offer .price .cur{font-size:1rem;color:var(--muted);font-weight:600}
  .offer .price .disc{font-family:var(--mono);font-size:.7rem;font-weight:700;color:#fff;background:var(--del);padding:.28em .62em;border-radius:999px;align-self:center;letter-spacing:.03em}
  .offer .pn{font-size:.82rem;color:var(--muted);margin-top:3px}
  .offer .limited{display:flex;align-items:center;gap:.5em;margin:16px 0 2px;font-size:.86rem;color:var(--ink-soft);font-weight:600}
  .seat{margin:20px 0 6px}
  .seat-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem;margin-bottom:8px}
  .seat-top .left{color:var(--ink-soft)}
  .seat-top .rem{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
  .seat-bar{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
  .seat-bar i{display:block;height:100%;width:63%;border-radius:6px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--coral)));transition:width 1.1s cubic-bezier(.3,1,.4,1)}
  .seat-note{font-size:.72rem;color:var(--muted);margin-top:8px;font-family:var(--mono)}
  .offer .btn{width:100%;justify-content:center;margin-top:18px;padding-block:.95em;font-size:1.02rem}
  .offer .guar{display:flex;gap:.5em;align-items:center;justify-content:center;margin-top:12px;font-size:.82rem;color:var(--muted)}
  .offer .tme-fallback{display:block;text-align:center;margin-top:9px;font-size:.78rem;color:var(--muted);text-decoration:underline}
  .offer .tme-fallback:hover{color:var(--accent)}
  .honest{margin-top:26px;padding:16px 18px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--teal) 9%,transparent);
    border:1px solid color-mix(in srgb,var(--teal) 22%,var(--line));font-size:.9rem;color:var(--ink-soft)}
  .honest b{color:var(--teal)}

  .faq{display:grid;gap:12px;max-width:var(--spine);margin-inline:auto}
  details.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
  details.q summary{padding:16px 20px;font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:1rem}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.3em;transition:transform .2s;flex-shrink:0}
  details.q[open] summary::after{transform:rotate(45deg)}
  details.q .a{padding:0 20px 18px;color:var(--ink-soft);font-size:.95rem}

  footer{padding:clamp(40px,6vw,70px) 0 60px}
  .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
  .foot-brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:1.05rem}
  footer p{color:var(--muted);font-size:.86rem;margin-top:10px;max-width:36ch}
  .todo{margin-top:26px;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
    font-size:.82rem;color:var(--muted);font-family:var(--mono);line-height:1.7;max-width:700px}
  .todo b{color:var(--accent)}

  .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none!important;transition:none!important}
    .rv,.appwin .msg,.appwin .note,.browser .bmsg,.browser .br-artifact,.surf.rv .surf-card,.plans.rv .plan,.hero-grid>div:first-child>*{opacity:1;transform:none}
    .caret{animation:none!important;opacity:1}
  }
  .bar-cta{padding:.5em .95em;font-size:.85rem;border-radius:9px;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
  .bar-cta .cta-s{display:none}
  @media(max-width:560px){.bar-cta .cta-l{display:none}.bar-cta .cta-s{display:inline}.bar-cta{padding:.5em .8em}}

  @media(max-width:820px){.bar-nav{display:none}}
  @media(max-width:720px){.offer{position:static}.seg-btn{padding:5px 10px}}

  /* what-is intro */
  .whatis{padding:clamp(40px,7vw,80px) 0}
  .whatis .in{max-width:46rem;margin-inline:auto}
  .whatis h2{margin-top:14px}
  .whatis .in>p{margin-top:16px;color:var(--ink-soft);font-size:1.06rem}
  .anlg{margin-top:22px;padding:18px 20px;border-radius:var(--radius);
    background:color-mix(in srgb,var(--teal) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 24%,var(--line));
    display:flex;gap:12px;align-items:flex-start}
  .anlg .em{font-size:1.4rem;flex-shrink:0;line-height:1.2}
  .anlg p{margin:0;font-size:.98rem;color:var(--ink-soft)}

  /* plain-language callout in lessons */
  .plain{display:flex;gap:12px;margin-top:20px;padding:14px 16px;border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--teal) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 22%,var(--line))}
  .plain .lbl{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-weight:700;flex-shrink:0;padding-top:2px}
  .plain p{font-size:.92rem;color:var(--ink-soft);margin:0}

  /* personas */
  .persona{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))}
  .pcard{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:.18s}
  .pcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
  .pcard .ph{display:flex;align-items:center;gap:10px}
  .pcard .em{font-size:1.5rem}
  .pcard h3{font-size:1.02rem}
  .pcard ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
  .pcard li{display:flex;gap:.55em;font-size:.87rem;color:var(--ink-soft)}
  .pcard li::before{content:"→";color:var(--accent);font-weight:700;flex-shrink:0}

  /* decision guide */
  .decide{display:grid;gap:10px}
  .drow{display:grid;grid-template-columns:1fr;gap:6px;padding:15px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
  @media(min-width:720px){.drow{grid-template-columns:1fr 1.2fr;gap:20px;align-items:start}}
  .drow .need{font-weight:650;color:var(--ink)}
  .drow .use{font-size:.92rem;color:var(--ink-soft)}
  .drow .use b{color:var(--accent);font-weight:700}

  /* plans */
  .plans{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:640px){.plans{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:980px){.plans{grid-template-columns:repeat(4,1fr)}}
  .plan{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}
  .plan.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--shadow)}
  .plan .tagpop{align-self:flex-start;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);padding:.2em .6em;border-radius:999px;margin-bottom:10px}
  .plan .pn{font-family:var(--mono);font-weight:700;font-size:1.05rem}
  .plan .pp{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:6px}
  .plan .pp small{font-size:.8rem;color:var(--muted);font-weight:600}
  .plan .pf{font-size:.83rem;color:var(--muted);margin-top:6px;min-height:2.6em}
  .plan ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
  .plan li{display:flex;gap:.5em;font-size:.85rem;color:var(--ink-soft)}
  .plan li::before{content:"✓";color:var(--add);font-weight:800;flex-shrink:0}
  .plans-note{margin-top:18px;font-size:.82rem;color:var(--muted);max-width:64ch}

  /* glossary */
  .gloss{display:grid;gap:12px;grid-template-columns:1fr;margin:0}
  @media(min-width:720px){.gloss{grid-template-columns:1fr 1fr}}
  .gitem{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .gitem dt{font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--accent)}
  .gitem dd{margin:6px 0 0;font-size:.88rem;color:var(--ink-soft)}

  /* hero rotating profession word */
  .hero h1 .rot{color:var(--accent);display:inline-block}
  .hero h1 .rot.swap{animation:rotswap .45s cubic-bezier(.2,.7,.3,1)}
  @keyframes rotswap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* task marquee */
  .marquee-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 5%,var(--surface));overflow:hidden;padding:13px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mq-track{display:flex;gap:11px;width:max-content;animation:mqscroll 48s linear infinite}
  .marquee-band:hover .mq-track{animation-play-state:paused}
  .mq-item{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;padding:.5em 1em;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.88rem;font-weight:600;color:var(--ink-soft)}
  .mq-item::before{content:"✦";color:var(--accent);font-size:.82em}
  @keyframes mqscroll{to{transform:translateX(-50%)}}

  /* interactive professions */
  .prof{display:grid;gap:20px;margin-top:4px}
  .prof-chips{display:flex;flex-wrap:wrap;gap:9px}
  .pchip{display:inline-flex;align-items:center;gap:.45em;padding:.5em .95em;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;transition:transform .12s,background .15s,border-color .15s;font-family:inherit;line-height:1.3}
  .pchip:hover{border-color:var(--line-strong);transform:translateY(-1px)}
  .pchip.on{background:var(--pc,var(--accent));color:var(--accent-ink);border-color:transparent;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--pc,var(--accent)) 70%,transparent)}
  .pchip .e{font-size:1.05em}
  .prof-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow)}
  .prof-panel .ph{display:flex;align-items:center;gap:14px}
  .prof-panel .ph .em{font-size:2.4rem;line-height:1;flex-shrink:0}
  .prof-panel .ph h3{font-size:clamp(1.3rem,3vw,1.7rem)}
  .prof-panel .tl{margin-top:3px;color:var(--pc,var(--accent));font-weight:600;font-size:.98rem}
  .prof-panel ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px}
  .prof-panel li{display:flex;gap:.6em;font-size:.98rem;color:var(--ink-soft)}
  .prof-panel li .ck{color:var(--pc,var(--add));font-weight:800;flex-shrink:0}
  .prof-eg{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
  .prof-eg .lbl{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
  .prof-eg .bubble{margin-top:10px;background:color-mix(in srgb,var(--pc,var(--accent)) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--pc,var(--accent)) 26%,var(--line));border-radius:15px;border-bottom-left-radius:5px;padding:13px 16px;font-size:.96rem;color:var(--ink);line-height:1.55}
  .prof-panel.swap{animation:rotswap .35s ease}

  /* ===== v12 premium polish ===== */
  @keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero-grid>div:first-child>*{animation:heroUp .7s cubic-bezier(.2,.7,.3,1) both}
  .hero-grid>div:first-child>*:nth-child(1){animation-delay:.02s}
  .hero-grid>div:first-child>*:nth-child(2){animation-delay:.10s}
  .hero-grid>div:first-child>*:nth-child(3){animation-delay:.20s}
  .hero-grid>div:first-child>*:nth-child(4){animation-delay:.30s}
  .hero-grid>div:first-child>*:nth-child(5){animation-delay:.38s}
  .hero{position:relative}
  .hero::before{content:"";position:absolute;inset:-12% 0 auto;height:440px;z-index:-1;pointer-events:none;
    background:radial-gradient(58% 100% at 50% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%)}

  /* card grids: staggered reveal + smooth hover */
  .surf.rv .surf-card,.plans.rv .plan{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .18s}
  .surf.rv.in .surf-card,.plans.rv.in .plan{opacity:1;transform:none}
  .surf.rv.in .surf-card:nth-child(2),.plans.rv.in .plan:nth-child(2){transition-delay:.06s}
  .surf.rv.in .surf-card:nth-child(3),.plans.rv.in .plan:nth-child(3){transition-delay:.12s}
  .surf.rv.in .surf-card:nth-child(4),.plans.rv.in .plan:nth-child(4){transition-delay:.18s}
  .plan:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}

  /* tabular / lining numerals */
  .offer .price .amt,.offer .price .old,.plan .pp,.lesson-num,.cc .num,.hero-meta{font-variant-numeric:tabular-nums lining-nums}
  .term,.mock,.planbox,.ctxrow,.mcpbox,.permbox{font-variant-numeric:tabular-nums slashed-zero}

  /* text-wrap + reading measure */
  p,li,dd,summary{text-wrap:pretty}
  .lead,.sec-head p,.whatis .in>p,.cta .bridge{max-width:64ch}

  /* display heading tightness */
  h1{letter-spacing:-.032em;line-height:1.04}
  h2{letter-spacing:-.03em;line-height:1.06}
  h1,h2,h3{font-optical-sizing:auto}

  /* header condenses on scroll */
  header.bar{transition:box-shadow .25s,background .25s}
  header.bar.scrolled{background:color-mix(in srgb,var(--ground) 90%,transparent);box-shadow:0 10px 26px -20px rgba(20,15,5,.55)}

  /* selection + form accent + pill focus halo */
  ::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
  :root{accent-color:var(--accent)}
  .btn:focus-visible,.pchip:focus-visible,.icon-btn:focus-visible,.seg-btn:focus-visible,summary:focus-visible,.brand:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}

  /* perf + rotating word crossfade */
  .mq-track{will-change:transform}
  .hero h1 .rot{text-align:left}
  .hero h1 .rot.out{opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}

  /* ===== "Sinab ko'ring" playground ===== */
  .play{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .play::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 55% at 50% -8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%)}
  .play .in{position:relative}
  .play-grid{display:grid;gap:22px;margin-top:clamp(22px,3vw,34px);grid-template-columns:1fr}
  @media(min-width:880px){.play-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
  .play-chips{display:flex;flex-wrap:wrap;gap:9px;align-content:start}
  .qchip{display:inline-flex;align-items:center;gap:.5em;padding:.62em 1em;border-radius:13px;border:1px solid var(--line);
    background:var(--ground);font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;
    transition:transform .13s,border-color .15s,box-shadow .2s;text-align:left;line-height:1.35}
  .qchip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px);box-shadow:var(--shadow)}
  .qchip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--ground))}
  .qchip:disabled{opacity:.55;cursor:default;transform:none}
  .qchip .e{font-size:1.1em}
  .play-hint{flex-basis:100%;font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:4px}
  .play-win .appwin-body{min-height:280px;align-content:start}
  .play-win .msg.claude .txt{white-space:pre-wrap}
  .play-win .caret2{display:inline-block;width:.55em;height:1em;background:var(--accent);border-radius:1px;
    vertical-align:text-bottom;margin-left:1px;animation:blink 1s step-end infinite}
  .play-empty{justify-self:center;align-self:center;text-align:center;color:var(--muted);font-size:.94rem;padding:40px 16px;max-width:34ch}
  .play-empty .big{font-size:2rem;display:block;margin-bottom:10px}

  /* ===== Vaqt kalkulyatori ===== */
  .calc-card{margin-top:clamp(22px,3vw,32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:clamp(22px,4vw,36px);display:grid;gap:22px;grid-template-columns:1fr;position:relative;overflow:hidden}
  @media(min-width:820px){.calc-card{grid-template-columns:1.1fr .9fr;align-items:center;gap:36px}}
  .calc-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 90% at 100% 0,color-mix(in srgb,var(--teal) 10%,transparent),transparent 60%)}
  .calc-l{position:relative}
  .calc-l label{display:block;font-weight:650;margin-bottom:14px}
  .calc-val{font-family:var(--mono);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  input[type=range].crange{width:100%;appearance:none;-webkit-appearance:none;height:12px;border-radius:6px;outline-offset:4px;
    background:linear-gradient(90deg,var(--accent) var(--fill,25%),var(--surface-2) var(--fill,25%));border:1px solid var(--line)}
  input[type=range].crange::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
    background:linear-gradient(180deg,color-mix(in srgb,#fff 12%,var(--accent)),var(--accent));border:2px solid var(--surface);
    box-shadow:0 3px 10px -2px color-mix(in srgb,var(--accent) 70%,transparent);cursor:grab}
  input[type=range].crange::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:grab}
  .calc-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:8px}
  .calc-note{font-size:.78rem;color:var(--muted);margin-top:16px;max-width:44ch}
  .calc-r{position:relative;text-align:center;padding:18px 10px;border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--teal) 8%,transparent);border:1px solid color-mix(in srgb,var(--teal) 22%,var(--line))}
  .calc-big{font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;letter-spacing:-.03em;color:var(--teal);
    font-variant-numeric:tabular-nums;line-height:1.05}
  .calc-big small{font-size:.32em;font-weight:700;letter-spacing:0}
  .calc-sub{margin-top:6px;color:var(--ink-soft);font-size:.95rem}
  .calc-sub b{color:var(--teal);font-variant-numeric:tabular-nums}
  .calc-cta{margin-top:16px}

  /* haqiqiy skrinshot ramkasi — saytdagi qora terminal-oynalar uslubida */
  .realshot{margin-top:24px;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);overflow:hidden;background:var(--t-bg);box-shadow:var(--shadow-t)}
  .realshot .rs-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--t-bg2);border-bottom:1px solid rgba(255,255,255,.07)}
  .realshot .rs-bar .dots{display:flex;gap:7px}
  .realshot .rs-bar .dots i{width:11px;height:11px;border-radius:50%}
  .realshot .rs-bar .dots i:nth-child(1){background:#e0685a}
  .realshot .rs-bar .dots i:nth-child(2){background:#e6b34e}
  .realshot .rs-bar .dots i:nth-child(3){background:#63c07a}
  .realshot .rs-bar .ttl{margin-left:8px;font-family:var(--mono);font-size:.72rem;color:var(--t-muted);letter-spacing:.02em}
  .realshot .rs-bar .live{margin-left:auto;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.06em;color:var(--t-add);display:inline-flex;align-items:center;gap:.45em}
  .realshot .rs-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t-add);box-shadow:0 0 8px var(--t-add)}
  .realshot img{display:block;width:100%;height:auto}
  .surf-card.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--shadow);position:relative}
  .surf-card.hl .kursbadge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.3em .7em;border-radius:999px}

  /* mobil: gorizontal overflow'ni oldini olish (grid/flex bolalari qisqaradi) */
  .hero-grid>div,.cta-cols>*,.br-body>*,.foot-grid>*,.lesson-media>*{min-width:0}
  .hero h1 .rot{max-width:100%}
  @media(max-width:560px){
    .brand small{display:none}
    .bar-in{gap:10px}
    .seg-btn{padding:5px 9px;font-size:.74rem}
    h1{letter-spacing:-.018em}
    .hero h1 .rot{min-width:0!important}
  }