:root{
    --bg:#E9EEF1;
    --bg-2:#F2F6F8;
    --panel:#FFFFFF;
    --panel-2:#F0F4F6;
    --line:#D6DFE4;
    --line-bright:#B6C5CD;
    --text:#16242C;
    --text-dim:#566A74;
    --text-faint:#82949D;
    --blue:#1B6FA0;
    --blue-deep:#0F5680;
    --amber:#E0902A;
    --green:#239B65;
    --red:#C24A26;
    --radius:4px;
    --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --nav-w:300px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      linear-gradient(transparent 0 0),
      radial-gradient(900px 500px at 78% -8%, rgba(65,169,224,.10), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:16.5px;
    line-height:1.66;
    -webkit-font-smoothing:antialiased;
  }
  /* subtle blueprint grid */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.25));
  }

  a{color:var(--blue);text-decoration:none;}
  a:hover{text-decoration:underline;}

  .mono{font-family:var(--mono);}
  .eyebrow{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--text-faint);
  }

  /* ---------- Top readout bar ---------- */
  .readout{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;gap:18px;
    padding:11px 22px;
    background:rgba(11,18,22,.86);
    backdrop-filter:blur(9px);
    border-bottom:1px solid var(--line);
  }
  .readout .brand{
    display:flex;align-items:center;gap:11px;
    font-family:var(--mono);font-size:13px;letter-spacing:.12em;
    color:var(--text);text-transform:uppercase;white-space:nowrap;
  }
  .pulse{width:9px;height:9px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 rgba(79,192,141,.6);}
  body.animate .pulse{animation:pulse 2.6s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,192,141,.55);}70%{box-shadow:0 0 0 7px rgba(79,192,141,0);}100%{box-shadow:0 0 0 0 rgba(79,192,141,0);}}

  .readout .meter{flex:1;min-width:90px;display:flex;align-items:center;gap:12px;}
  .meter .track{flex:1;height:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  .meter .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue-deep),var(--blue));transition:width .6s cubic-bezier(.2,.7,.2,1);}
  .meter .pct{font-family:var(--mono);font-size:12px;color:var(--text-dim);white-space:nowrap;letter-spacing:.05em;}
  .meter .pct b{color:var(--green);font-weight:600;}

  .menu-btn{display:none;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
    font-family:var(--mono);font-size:12px;padding:7px 11px;border-radius:var(--radius);cursor:pointer;letter-spacing:.08em;}

  /* ---------- Shell ---------- */
  .shell{position:relative;z-index:1;display:flex;align-items:flex-start;max-width:1240px;margin:0 auto;}

  /* ---------- Sidebar ---------- */
  .nav{
    position:sticky;top:49px;align-self:flex-start;
    width:var(--nav-w);flex:0 0 var(--nav-w);
    height:calc(100vh - 49px);overflow-y:auto;
    padding:24px 18px 40px;
    border-right:1px solid var(--line);
  }
  .nav h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-faint);margin:0 0 12px;padding-left:4px;}

  .track-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:24px;}
  .track-box .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:9px;}
  .seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:3px;gap:3px;}
  .seg button{flex:1;background:transparent;border:0;color:var(--text-dim);font-family:var(--sans);
    font-size:13px;font-weight:500;padding:7px 4px;border-radius:3px;cursor:pointer;transition:.18s;}
  .seg button[aria-pressed="true"]{background:var(--blue-deep);color:#fff;}
  .track-box .hint{font-size:12px;color:var(--text-faint);margin-top:9px;line-height:1.4;}

  .checklist{list-style:none;margin:0;padding:0;counter-reset:m;}
  .checklist li{margin:0 0 2px;}
  .checklist a{
    display:flex;align-items:center;gap:11px;
    padding:9px 10px;border-radius:var(--radius);
    color:var(--text-dim);text-decoration:none;font-size:14px;line-height:1.3;
    border:1px solid transparent;transition:.16s;
  }
  .checklist a:hover{background:var(--panel);color:var(--text);text-decoration:none;}
  .checklist a.active{background:var(--panel-2);color:var(--text);border-color:var(--line-bright);}
  .dot{width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:1.5px solid var(--line-bright);
    position:relative;transition:.2s;}
  .checklist a.done .dot{background:var(--green);border-color:var(--green);box-shadow:0 0 7px rgba(79,192,141,.5);}
  .checklist a.done .dot::after{content:"";position:absolute;left:3.4px;top:1px;width:3px;height:6px;
    border:solid #0D1418;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}
  .code{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);letter-spacing:.05em;}
  .checklist a.active .code,.checklist a.done .code{color:var(--blue);}

  /* ---------- Main ---------- */
  main{flex:1;min-width:0;padding:0 clamp(20px,5vw,64px) 120px;}

  .hero{padding:72px 0 30px;}
  .hero .eyebrow{margin-bottom:18px;}
  .hero h1{
    font-size:clamp(34px,5.4vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.02em;
    margin:0 0 20px;
  }
  .hero h1 .hl{color:var(--blue);}
  .hero .lede{font-size:clamp(17px,2vw,20px);color:var(--text-dim);max-width:620px;margin:0 0 30px;line-height:1.55;}
  .cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--amber);color:#1a1205;font-weight:600;font-size:15px;
    padding:13px 22px;border-radius:var(--radius);border:0;cursor:pointer;
    font-family:var(--sans);transition:.18s;text-decoration:none;
  }
  .cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(242,169,60,.22);text-decoration:none;}
  .cta .arr{font-family:var(--mono);}

  .specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
  .spec{font-family:var(--mono);font-size:12px;color:var(--text-dim);
    border:1px solid var(--line);border-radius:20px;padding:6px 14px;background:var(--panel);letter-spacing:.04em;}
  .spec b{color:var(--blue);font-weight:600;}

  /* panel = module block */
  .panel{
    border:1px solid var(--line);border-radius:6px;background:var(--panel);
    margin:30px 0;overflow:hidden;scroll-margin-top:70px;
  }
  body.animate .panel{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
  body.animate .panel.revealed{opacity:1;transform:none;}

  .panel-head{display:flex;align-items:center;gap:14px;padding:16px 22px;
    background:linear-gradient(180deg,var(--panel-2),var(--panel));border-bottom:1px solid var(--line);}
  .panel-head .id{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.1em;
    border:1px solid var(--blue-deep);padding:4px 9px;border-radius:3px;white-space:nowrap;}
  .panel-head h2{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-.01em;}
  .panel-body{padding:24px 26px 28px;}
  .panel-body > p:first-child{margin-top:0;}
  .panel-body p{color:#cdd9df;}
  .lead{font-size:17.5px;color:var(--text)!important;}

  h3{font-size:16px;font-weight:600;margin:26px 0 8px;letter-spacing:.01em;}
  h3 .mono{color:var(--blue);font-size:13px;margin-right:8px;}

  ul.clean{list-style:none;padding:0;margin:12px 0;}
  ul.clean li{position:relative;padding:5px 0 5px 24px;color:#cdd9df;}
  ul.clean li::before{content:"";position:absolute;left:4px;top:13px;width:7px;height:7px;
    background:var(--blue);border-radius:1px;transform:rotate(45deg);}

  ol.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0;}
  ol.steps li{position:relative;padding:3px 0 14px 44px;color:#cdd9df;}
  ol.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
    position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;color:var(--blue);
    border:1px solid var(--line-bright);border-radius:3px;width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;}
  ol.steps li b{color:var(--text);}

  /* platform tabs */
  .tabs{display:flex;gap:6px;margin:6px 0 16px;border-bottom:1px solid var(--line);}
  .tabs button{background:transparent;border:0;border-bottom:2px solid transparent;
    color:var(--text-dim);font-family:var(--mono);font-size:13px;letter-spacing:.05em;
    padding:10px 14px;cursor:pointer;transition:.15s;margin-bottom:-1px;}
  .tabs button:hover{color:var(--text);}
  .tabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue);}
  .tabpane{display:none;}
  .tabpane.show{display:block;animation:fade .35s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

  /* note callouts */
  .note{border-left:3px solid var(--blue);background:var(--bg-2);padding:13px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:16px 0;font-size:14.5px;color:#c4d2d8;}
  .note.tip{border-color:var(--green);}
  .note.warn{border-color:var(--amber);}
  .note.alarm{border-color:var(--red);}
  .note .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:5px;}
  .note.tip .tag{color:var(--green);}
  .note.warn .tag{color:var(--amber);}
  .note .tag{color:var(--blue);}
  .note.alarm .tag{color:var(--red);}

  /* prompt cards */
  .prompt{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);margin:14px 0;overflow:hidden;}
  .prompt .ph{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);}
  .prompt .ph span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;}
  .copy{background:transparent;border:1px solid var(--line-bright);color:var(--text-dim);
    font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:3px;cursor:pointer;transition:.15s;letter-spacing:.05em;}
  .copy:hover{color:var(--text);border-color:var(--blue);}
  .copy.ok{color:var(--green);border-color:var(--green);}
  .prompt .pt{padding:13px 14px;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:#d6e2e8;white-space:pre-wrap;}

  /* before / after */
  .ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;}
  .ba .card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .ba .card .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--line);}
  .ba .bad .h{color:var(--red);background:rgba(229,112,75,.07);}
  .ba .good .h{color:var(--green);background:rgba(79,192,141,.07);}
  .ba .b{padding:12px 13px;font-family:var(--mono);font-size:13px;line-height:1.55;color:#cdd9df;}

  /* feature grid */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:16px 0;}
  .feat{border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;background:var(--bg-2);}
  .feat .ic{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.08em;margin-bottom:7px;}
  .feat h4{margin:0 0 5px;font-size:15px;font-weight:600;}
  .feat p{margin:0;font-size:13.5px;color:var(--text-dim);line-height:1.5;}

  /* conditional content */

  /* quiz */
  .q{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0;background:var(--bg-2);}
  .q .qn{font-weight:600;margin-bottom:12px;}
  .q .qn .mono{color:var(--blue);font-size:12px;margin-right:8px;}
  .opt{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
    color:var(--text);font-family:var(--sans);font-size:14.5px;padding:11px 14px;border-radius:var(--radius);
    margin:7px 0;cursor:pointer;transition:.14s;}
  .opt:hover:not(:disabled){border-color:var(--line-bright);}
  .opt.correct{border-color:var(--green);background:rgba(79,192,141,.12);}
  .opt.wrong{border-color:var(--red);background:rgba(229,112,75,.12);}
  .opt:disabled{cursor:default;}
  .fb{font-size:13.5px;margin-top:10px;display:none;color:#c4d2d8;border-left:2px solid var(--green);padding-left:11px;}
  .fb.show{display:block;}
  .score{font-family:var(--mono);text-align:center;padding:18px;border:1px dashed var(--line-bright);
    border-radius:var(--radius);margin-top:16px;color:var(--text-dim);font-size:14px;}
  .score b{color:var(--green);font-size:18px;}

  .done-banner{display:none;align-items:center;gap:14px;margin:30px 0;padding:18px 22px;
    border:1px solid var(--green);border-radius:6px;background:rgba(79,192,141,.08);}
  .done-banner.show{display:flex;}
  .done-banner .pulse{flex:0 0 auto;}
  .done-banner h3{margin:0;color:var(--green);font-family:var(--mono);letter-spacing:.08em;font-size:15px;}
  .done-banner p{margin:3px 0 0;font-size:13.5px;color:var(--text-dim);}

  footer{border-top:1px solid var(--line);margin-top:40px;padding:26px clamp(20px,5vw,64px);
    color:var(--text-faint);font-size:13px;max-width:1240px;margin-left:auto;margin-right:auto;position:relative;z-index:1;}
  footer .row{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:10px;}

  @media (max-width:860px){
    body{font-size:16px;}
    .menu-btn{display:inline-block;margin-left:auto;}
    .nav{
      position:fixed;top:0;left:0;height:100vh;z-index:50;width:min(86vw,330px);
      background:var(--bg-2);transform:translateX(-101%);transition:transform .28s ease;
      box-shadow:24px 0 60px rgba(0,0,0,.5);padding-top:20px;
    }
    body.nav-open .nav{transform:none;}
    .shell{display:block;}
    main{padding-bottom:90px;}
    .ba{grid-template-columns:1fr;}
    .readout .brand span.full{display:none;}
    .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45;display:none;}
    body.nav-open .scrim{display:block;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    body.animate .panel{opacity:1;transform:none;transition:none;}
    .pulse{animation:none!important;}
  }
  :focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

  /* ---------- Light theme corrections ---------- */
  body{
    background:
      radial-gradient(900px 520px at 80% -10%, rgba(27,111,160,.06), transparent 60%),
      var(--bg);
  }
  body::before{
    background-image:
      linear-gradient(to right, rgba(20,40,52,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20,40,52,.045) 1px, transparent 1px);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.12));
  }
  .readout{background:rgba(233,238,241,.88);}
  .panel{box-shadow:0 1px 2px rgba(20,40,52,.04), 0 6px 18px rgba(20,40,52,.05);}
  .panel-body p,
  ul.clean li,
  ol.steps li,
  .ba .b,
  .prompt .pt{color:#2B3A42;}
  .note,.fb{color:#33434C;}
  .note.warn .tag{color:#A96B0B;}
  .ba .bad .h{background:rgba(194,74,38,.09);}
  .ba .good .h{background:rgba(35,155,101,.10);}
  .opt.correct{background:rgba(35,155,101,.12);}
  .opt.wrong{background:rgba(194,74,38,.12);}
  .done-banner{background:rgba(35,155,101,.09);}
  .cta:hover{box-shadow:0 8px 22px rgba(224,144,42,.28);}
  @media (max-width:860px){
    .nav{box-shadow:18px 0 50px rgba(20,40,52,.20);}
    .scrim{background:rgba(20,40,52,.35);}
  }

  /* ---------- Interactive screen mockups ---------- */
  .mock{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(210px,.85fr);gap:18px;align-items:start;margin:16px 0 6px;}
  .mock-stage{min-width:0;}
  .scr{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(20,40,52,.10);}

  .chrome{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#F3F5F6;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--text-faint);}
  .tl{display:flex;gap:5px;flex:0 0 auto;}
  .tl i{width:9px;height:9px;border-radius:50%;display:block;}
  .tl i:nth-child(1){background:#e6796b;}.tl i:nth-child(2){background:#e8c14b;}.tl i:nth-child(3){background:#6fc06f;}
  .cic{flex:0 0 auto;color:var(--text-faint);}
  .url{flex:1;text-align:center;font-size:11.5px;color:var(--text-dim);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;max-width:220px;margin:0 auto;}
  .chrome .cright{display:flex;gap:9px;flex:0 0 auto;}

  .appbody{display:flex;min-height:340px;font-size:12px;color:var(--text);}
  .mk-side{width:44%;max-width:236px;border-right:1px solid var(--line);background:#FBFBFA;padding:11px 9px;display:flex;flex-direction:column;gap:2px;}
  .mk-main{flex:1;display:flex;flex-direction:column;min-width:0;padding:18px 16px;align-items:center;gap:14px;}

  .sidehead{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 9px;}
  .brandw{font-family:Georgia,"Times New Roman",serif;font-size:16px;font-weight:600;color:var(--text);}
  .sidehead .si{display:flex;gap:9px;color:var(--text-faint);}
  .seclabel{font-size:10.5px;color:var(--text-faint);padding:11px 8px 4px;}

  .region{position:relative;font:inherit;color:var(--text);background:transparent;border:0;text-align:left;cursor:pointer;border-radius:8px;transition:box-shadow .16s,background .16s,opacity .16s;}
  .region:hover{background:rgba(20,40,52,.05);}
  .region.on{background:#fff;box-shadow:0 0 0 2px var(--blue);}
  .mock.has-active .region:not(.on){opacity:.4;}
  .badge{position:absolute;top:-7px;left:-7px;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 3px rgba(20,40,52,.3);z-index:3;}
  .region.on .badge{background:var(--amber);color:#1a1205;}

  .row{display:flex;align-items:center;gap:10px;padding:7px 8px;}
  .row .ri{width:16px;flex:0 0 auto;color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:13px;}
  .row.big .ri{font-size:16px;}
  .grow{flex:1;}
  .gi{width:16px;height:16px;flex:0 0 auto;display:block;}
  .modetab .gi{width:13px;height:13px;}
  .cic{width:15px;height:15px;}
  .ri.sq::before{content:"";width:13px;height:13px;border:1.6px solid currentColor;border-radius:3px;opacity:.55;}

  .modetabs{display:flex;gap:3px;background:#ECECEA;border-radius:9px;padding:3px;}
  .modetab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;padding:6px 3px;border-radius:6px;color:var(--text-dim);}
  .modetab.act{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(20,40,52,.12);font-weight:600;}

  .profile{display:flex;align-items:center;gap:9px;padding:9px 6px 2px;margin-top:auto;border-top:1px solid var(--line);}
  .ava{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7fb4d6,#b59ad6);flex:0 0 auto;}
  .profile .pn{font-size:11.5px;color:var(--text);}

  .greet{display:flex;align-items:center;gap:9px;font-family:Georgia,"Times New Roman",serif;font-size:23px;color:#3a3a36;margin-top:24px;}
  .ast{color:#d97757;font-size:21px;}
  .inputbox{width:100%;max-width:430px;border:1px solid var(--line);border-radius:14px;padding:13px 13px 9px;box-shadow:0 4px 14px rgba(20,40,52,.05);background:#fff;}
  .region.inp{display:block;width:100%;color:var(--text-faint);font-size:13px;padding:2px 5px 12px;border-radius:6px;}
  .inputbar{display:flex;align-items:center;gap:8px;}
  .region.plus{flex:0 0 auto;width:27px;height:27px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-dim);background:#fff;}
  .region.modelsel{font-size:11.5px;color:var(--text-dim);padding:5px 8px;border-radius:7px;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
  .region.modelsel b{color:var(--text);font-weight:600;}
  .micwave{display:flex;gap:10px;color:var(--text-faint);font-size:13px;flex:0 0 auto;}

  .region.sugg-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:7px;border-radius:10px;}
  .sugg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:6px 11px;background:#fff;}

  .region.plusmenu{width:100%;max-width:290px;border:1px solid var(--line);border-radius:12px;padding:6px;background:#fff;box-shadow:0 12px 26px rgba(20,40,52,.16);}
  .pmrow{display:flex;align-items:center;gap:10px;padding:7px 9px;font-size:12px;color:var(--text);border-radius:7px;}
  .pmrow .ri{width:16px;flex:0 0 auto;color:var(--text-dim);font-size:13px;text-align:center;}
  .pmrow .sc{margin-left:auto;color:var(--text-faint);font-size:10px;font-family:var(--mono);}
  .pmrow .chk{margin-left:auto;color:var(--blue);font-weight:700;}
  .pmdiv{height:1px;background:var(--line);margin:5px 8px;}
  .menucap{font-size:10.5px;color:var(--text-faint);text-align:center;margin-top:2px;}

  /* phones */
  .phones{display:flex;flex-direction:column;align-items:center;gap:22px;}
  .phone{width:100%;max-width:340px;flex:0 0 auto;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 14px 32px rgba(20,40,52,.14);overflow:hidden;}
  .pcap{text-align:center;font-size:10.5px;color:var(--text-faint);margin-top:7px;font-family:var(--mono);letter-spacing:.04em;}
  .pstatus{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px;font-size:11px;color:var(--text);font-weight:600;}
  .pstatus .si{letter-spacing:.04em;color:var(--text-dim);}
  .ph-top{display:flex;align-items:center;gap:8px;padding:7px 12px 9px;}
  .ptitle{flex:1;text-align:center;font-weight:700;font-size:15px;}
  .region.circ{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text);flex:0 0 auto;}
  .phbody{min-height:330px;position:relative;display:flex;flex-direction:column;}
  .ph-list{display:flex;flex-direction:column;padding:0 12px;}
  .chatrow{display:flex;align-items:center;gap:8px;padding:12px 6px;border-bottom:1px solid #EEF1F2;width:100%;}
  .chatrow .ct{flex:1;min-width:0;}
  .chatrow .ctt{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chatrow .ctm{font-size:11px;color:var(--text-faint);margin-top:2px;}
  .chatrow .cv{color:var(--text-faint);}
  .region.fab{position:absolute;right:13px;bottom:58px;background:#23211E;color:#fff;font-size:13px;font-weight:600;border-radius:20px;padding:9px 14px;display:flex;align-items:center;gap:6px;box-shadow:0 6px 16px rgba(20,40,52,.25);}
  .region.fab.on{background:#23211E;box-shadow:0 0 0 2px var(--blue),0 6px 16px rgba(20,40,52,.25);}
  .region.searchbar{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:11px 16px;font-size:13px;color:var(--text-faint);display:flex;align-items:center;gap:8px;}
  .drawer{padding:13px 11px;display:flex;flex-direction:column;gap:2px;min-height:330px;position:relative;}
  .drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 11px;}
  .drawer .pp{width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,#7fb4d6,#b59ad6);flex:0 0 auto;}
  .drow .ri{font-size:15px;}
  .drow .dt{font-size:14px;}
  .drow.sel{background:#EDEDEB;}

  .fx{background:#E2E8EC;border-radius:4px;height:8px;}

  .mock-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .mock-legend li{margin:0;}
  .leg{display:block;width:100%;text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:12.5px;color:#33434C;cursor:pointer;transition:.15s;line-height:1.42;}
  .leg:hover{border-color:var(--line-bright);}
  .leg.on{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(27,111,160,.14);}
  .leg b{color:var(--text);font-weight:600;}
  .mock-hint{font-size:13.5px;color:var(--text-dim);margin:6px 0 0;}
  .mock-note{font-size:13px;color:var(--text-dim);margin:12px 0 0;border-left:3px solid var(--blue);padding:7px 12px;background:var(--bg-2);border-radius:0 6px 6px 0;}

  /* feature & platform segmented tabs */
  .seg{display:flex;gap:4px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:4px;margin:14px 0;}
  .seg.sub{background:transparent;border:0;padding:0;gap:6px;margin:12px 0 6px;}
  .segbtn{flex:1;min-width:88px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid transparent;border-radius:8px;padding:9px 10px;cursor:pointer;transition:.15s;}
  .seg.sub .segbtn{flex:0 1 auto;min-width:0;font-size:13px;border:1px solid var(--line);background:#fff;}
  .segbtn:hover{color:var(--text);}
  .segbtn.on{background:#fff;color:var(--blue-deep);border-color:var(--line-bright);box-shadow:0 1px 3px rgba(20,40,52,.10);}
  .seg.sub .segbtn.on{background:var(--blue);color:#fff;border-color:var(--blue);}
  .segbtn .gi{width:16px;height:16px;}
  .view{display:none;}
  .view.on{display:block;animation:fade .3s ease;}
  .vlead{color:var(--text-dim);margin:4px 0 0;}

  /* projects + cowork mockups */
  .rail{width:46px;flex:0 0 auto;border-right:1px solid var(--line);background:#FBFBFA;display:flex;flex-direction:column;align-items:center;gap:15px;padding:14px 0;color:var(--text-faint);}
  .rail .gi{width:18px;height:18px;}
  .pj,.cw{flex:1;display:flex;flex-direction:column;min-width:0;padding:15px;gap:11px;}
  .pj-top{display:flex;align-items:center;gap:9px;font-size:15px;}
  .pj-top .gi{width:18px;height:18px;color:var(--text-dim);}
  .pj-grid,.cw-grid{display:grid;grid-template-columns:1fr .92fr;gap:11px;}
  .cw-grid{grid-template-columns:1fr 1fr;}
  .card{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fff;}
  .card .ch{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-faint);font-weight:600;margin-bottom:7px;}
  .card .ch .gi{width:15px;height:15px;}
  .krow{display:flex;align-items:center;gap:8px;padding:6px 3px;font-size:11.5px;border-top:1px solid #EEF1F2;}
  .krow:first-of-type{border-top:0;}
  .krow .gi{width:14px;height:14px;color:var(--text-dim);flex:0 0 auto;}
  .instr,.cw-task{font-size:11.5px;color:var(--text-dim);line-height:1.5;}
  .inpline{color:var(--text-faint);font-size:13px;padding:2px 4px 10px;}
  .barline{display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:11.5px;}
  .ccircle{width:25px;height:25px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .wsdot{width:18px;height:18px;border-radius:5px;flex:0 0 auto;display:inline-block;}
  .wsdot.t{background:#B05C7A;}
  .wsdot.p{background:#7C8CA3;}
  .cwside{width:170px;flex:0 0 auto;border-right:1px solid var(--line);background:#FBFBFA;display:flex;flex-direction:column;gap:3px;padding:10px 8px;}
  .cwside .modetabs{margin-bottom:6px;}
  .cwside .krow{border-top:0;padding:6px 5px;font-size:12px;color:var(--text-dim);}
  .cwside .krow .gi{color:var(--text-faint);}
  .subhd{display:flex;align-items:baseline;gap:11px;margin:34px 0 8px;padding-top:22px;border-top:2px solid var(--line);}
  .subhd .scode{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.04em;}
  .subhd h3{margin:0;font-size:19px;color:var(--text);}
  .convo{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px;min-width:0;}

  /* standalone + menu (section 03) */
  .plusmenu{width:100%;max-width:300px;border:1px solid var(--line);border-radius:12px;padding:6px;background:#fff;}

  /* artifacts (section 05) */
  .art-split{flex:1;display:grid;grid-template-columns:1fr 1.05fr;min-width:0;}
  .art-conv{padding:13px;display:flex;flex-direction:column;gap:9px;border-right:1px solid var(--line);min-width:0;}
  .bubble2{font-size:11.5px;border-radius:11px;padding:8px 10px;background:#F0F4F6;max-width:92%;line-height:1.4;}
  .bubble2.me{align-self:flex-end;background:#E4EFF6;}
  .art-panel{display:flex;flex-direction:column;min-width:0;background:#FCFCFB;}
  .art-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;}
  .region.arttools{display:flex;gap:9px;color:var(--text-dim);padding:4px 6px;border-radius:7px;}
  .region.arttools .gi{width:15px;height:15px;}
  .region.artbody{flex:1;padding:13px;display:flex;flex-direction:column;gap:7px;border-radius:0;min-height:150px;}

  /* ===== Claude UI skin — warm light palette, scoped to the mockup SCREENS so they read as Claude's interface, distinct from the manual ===== */
  .mock-stage{
    --line:#E6E1D4; --line-bright:#D8D2C2;
    --text:#2C2A25; --text-dim:#706C62; --text-faint:#A6A294;
    --blue:#C96442; --blue-deep:#B4593B;
  }
  .mock-stage .scr,.mock-stage .phone{background:#FAF9F4;}
  .mock-stage .chrome{background:#EFEDE3;}
  .mock-stage .mk-side,.mock-stage .rail,.mock-stage .cwside{background:#F3F1E8;}
  .mock-stage .modetabs{background:#E9E5DA;}
  .mock-stage .krow{border-top-color:#ECE7DA;}
  .mock-stage .chatrow{border-bottom-color:#ECE7DA;}
  .mock-stage .drow.sel{background:#EEE9DC;}
  .mock-stage .bubble2{background:#F1EEE4;}
  .mock-stage .bubble2.me{background:#EFE6D6;}
  .mock-stage .art-panel{background:#FBFAF5;}
  .mock-stage .fx{background:#E7E2D4;}
  .mock-stage .greet{color:#3A372F;}


  @media (max-width:680px){
    .pj-grid,.cw-grid{grid-template-columns:1fr;}
    .art-split{grid-template-columns:1fr;}
  }

  @media (max-width:680px){
    .mock{grid-template-columns:1fr;gap:14px;}
    .appbody{min-height:0;}
  }

/* ============================================================
   Claude-theme fonts (from the design system) — applied inside the
   screen mockups so "what Claude looks like" reads like the real
   product. Newsreader ≈ Tiempos/Copernicus (serif greeting/wordmark),
   Hanken Grotesk ≈ Styrene B (UI sans). The manual's own chrome keeps
   IBM Plex.
   ============================================================ */
:root{
  --font-claude-sans:"Hanken Grotesk","Styrene B",system-ui,-apple-system,sans-serif;
  --font-claude-serif:"Newsreader","Tiempos",Georgia,"Times New Roman",serif;
}
.mock-stage{font-family:var(--font-claude-sans);}
.mock-stage .greet,.mock-stage .brandw{font-family:var(--font-claude-serif);font-weight:500;}

/* ============================================================
   Multi-page additions (index cards, pager, backlink)
   ============================================================ */
.backlink{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--text-dim);margin:26px 0 -6px;}
.backlink:hover{color:var(--blue);text-decoration:none;}

/* "Накратко" plain-language summary box at the top of every module */
.tldr{margin:0 0 22px;padding:15px 18px;border-radius:8px;
  background:linear-gradient(180deg,var(--bg-2),var(--panel));border:1px solid var(--line-bright);}
.tldr-lbl{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:7px;}
.tldr-lbl .gi{width:14px;height:14px;color:var(--amber);}
.tldr p{margin:0;font-size:16px;color:var(--text);line-height:1.55;}

/* index card groups (by topic & level) */
.card-group + .card-group{margin-top:30px;border-top:1px solid var(--line);padding-top:26px;}
.group-h{margin:0 0 15px;font-size:17px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:11px;letter-spacing:-.01em;}
.group-h::before{content:"";width:12px;height:12px;background:var(--blue);border-radius:2px;transform:rotate(45deg);flex:0 0 auto;}
.group-sub{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}

/* index card grid */
.cards-section{padding:14px 0 10px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:16px;}
.card-mod{
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);
  padding:20px 20px 18px;text-decoration:none;color:var(--text);
  box-shadow:0 1px 2px rgba(20,40,52,.04),0 6px 18px rgba(20,40,52,.05);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  position:relative;overflow:hidden;
}
.card-mod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease;}
.card-mod:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--line-bright);
  box-shadow:0 4px 10px rgba(20,40,52,.08),0 14px 32px rgba(20,40,52,.10);}
.card-mod:hover::before{transform:scaleY(1);}
.cm-id{font-size:12px;letter-spacing:.12em;color:var(--blue);border:1px solid var(--blue-deep);
  border-radius:3px;padding:3px 8px;align-self:flex-start;}
.card-mod h3{margin:8px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em;}
.card-mod p{margin:0;font-size:14px;color:var(--text-dim);line-height:1.5;flex:1;}
.cm-go{font-size:12px;letter-spacing:.05em;color:var(--text-faint);margin-top:6px;transition:color .16s;}
.card-mod:hover .cm-go{color:var(--blue);}

/* prev / next pager */
.pager{display:flex;gap:12px;margin:34px 0 0;flex-wrap:wrap;}
.pg-link{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:13px 16px;
  text-decoration:none;color:var(--text);transition:.16s;}
.pg-link:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-1px);}
.pg-link.next{text-align:right;align-items:flex-end;}
.pg-dir{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;}
.pg-t{font-size:14.5px;font-weight:600;color:var(--text);}

@media (max-width:620px){
  .pager{flex-direction:column;}
  .card-grid{grid-template-columns:1fr;}
}

/* on module pages the hero spacing isn't used; keep main top padding tidy */
main > .panel:first-child{margin-top:18px;}

/* mobile contents drawer: sit below the sticky readout so its top isn't
   covered by it (the scrim now lives inside .shell so the nav, z-index:50,
   correctly paints above it, z-index:45 — fixes taps on the menu links). */
@media (max-width:860px){
  .nav{top:49px;height:calc(100vh - 49px);padding-top:18px;}
}

/* ============================================================
   Microsoft Office app mockups (modules 12–14)
   Neutral white "Office window" + the app's signature ribbon colour,
   with the Claude add-in shown as a warm side panel on the right.
   ============================================================ */
.ms-ribbon{display:flex;align-items:center;gap:13px;padding:7px 12px;color:#fff;font-size:11.5px;flex-wrap:wrap;}
.ms-ribbon .ms-tile{width:21px;height:21px;border-radius:3px;background:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ms-ribbon .ms-name{font-weight:600;font-size:12.5px;}
.ms-ribbon .ms-tabs{display:flex;gap:12px;color:rgba(255,255,255,.82);}
.ms-ribbon .ms-tabs b{color:#fff;font-weight:600;border-bottom:2px solid #fff;padding-bottom:3px;}
.ms-area{flex:1;min-width:0;background:#fff;display:flex;flex-direction:column;}

/* Word document */
.wd-page{flex:1;min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:#fff;}
.wd-title{font-family:Georgia,"Times New Roman",serif;font-size:16px;color:var(--text);}

/* Excel */
.xl-formula{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:5px 9px;font-family:var(--mono);font-size:11px;color:var(--text-dim);background:#fff;}
.xl-formula .fx{background:none;color:var(--text-faint);font-style:italic;}
.xl-grid{display:grid;grid-template-columns:24px repeat(3,1fr);background:#fff;}
.xl-grid>div{border-right:1px solid #E7EAEC;border-bottom:1px solid #E7EAEC;padding:4px 7px;font-size:11px;min-height:22px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xl-grid .xh{background:#F4F6F7;color:var(--text-faint);text-align:center;font-family:var(--mono);font-size:10px;}

/* PowerPoint */
.ppt-wrap{flex:1;display:flex;min-width:0;}
.ppt-film{width:66px;flex:0 0 auto;background:#F2F2F1;border-right:1px solid var(--line);padding:8px 6px;display:flex;flex-direction:column;gap:7px;}
.ppt-thumb{border:1px solid var(--line);border-radius:2px;background:#fff;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--text-faint);}
.ppt-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;background:#EDEDEC;min-width:0;}
.ppt-slide{width:100%;max-width:320px;border:1px solid var(--line);border-radius:3px;background:#fff;box-shadow:var(--shadow-1);padding:15px 17px;display:flex;flex-direction:column;gap:8px;}

/* Claude add-in side panel (warm, scoped here so it reads as Claude) */
.cl-side{width:206px;flex:0 0 auto;background:#FBFAF5;border-left:1px solid #E6E1D4;display:flex;flex-direction:column;font-family:var(--font-claude-sans);color:#2C2A25;}
.cl-side .cl-head{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid #E6E1D4;font-size:12px;font-weight:600;}
.cl-side .cl-head .ast{font-family:var(--font-claude-serif);color:#D97757;font-size:14px;}
.cl-side .cl-pad{flex:1;padding:10px;display:flex;flex-direction:column;gap:9px;min-width:0;}
.cl-bub{background:#F1EEE4;border-radius:10px;padding:8px 10px;font-size:11.5px;line-height:1.42;}
.cl-input{border:1px solid #E6E1D4;border-radius:10px;background:#fff;padding:9px 11px;font-size:11.5px;color:#A6A294;}