@charset "UTF-8";
/* features.html page styles, moved out of the document head (build-static) */
  a{color:var(--green-ink)}a:hover{color:var(--green-deep)}
  /* study-room hero */
  .fd-hero.paper::before,.fd-hero.paper::after{color:rgba(26,26,26,.024)}
  html[data-theme="dark"] .fd-hero.paper::before,html[data-theme="dark"] .fd-hero.paper::after{color:rgba(255,255,255,.024)}
  .fd-hero{padding:148px 0 64px;
    --paper-v:linear-gradient(180deg,transparent 0,#000 6%,#000 78%,transparent 100%);
    --paper-w:linear-gradient(to bottom right,#000 0 34%,transparent 64%);
    --paper-w-r:linear-gradient(to bottom left,#000 0 34%,transparent 64%)}
  .fd-hero.paper::before,.fd-hero.paper::after{width:calc((100% - var(--maxw)) / 2 + 420px)}
  .fd-room{width:min(520px,58ch,100%);margin:0 auto 34px;color:rgba(26,26,26,.22);pointer-events:none}
  .fd-room svg{display:block;width:100%;height:auto}
  .fd-books{width:min(206px,56%);margin:46px auto 0;color:rgba(26,26,26,.3);pointer-events:none}
  .fd-books svg{display:block;width:100%;height:auto}
  html[data-theme="dark"] .fd-books{color:rgba(255,255,255,.28)}
   html[data-theme="dark"] .fd-room{color:rgba(255,255,255,.2)}
  .fd-eye{display:block;text-align:center;font:600 11.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:2px 0 6px}
  .fd-eye::after{content:".";color:var(--green);letter-spacing:0}
  .fd-lede{max-width:58ch;margin:20px auto 0;text-align:center;font-size:17px;line-height:1.62;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .fd-lede a{color:var(--green-ink);text-decoration:underline;text-decoration-color:var(--green-tint-2);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
  .fd-lede a:hover{color:var(--green-deep);text-decoration-color:var(--green-ink)}
  /* the count descends 172 → 10 → 1: everything you can do, where you do it, how many apps it takes */
  /* the count descends 172 → 10 → 1: everything you can do, where you do it, how many apps it takes.
     figure over label, stacked — so the small type reads as a caption, not as shrunken body copy */
  /* the figure rides in a white token inside the chip, like a counter on a tab */
  .fd-stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:32px 0 0}
  .fd-stats span{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 5px;border-radius:100px;
    background:rgba(26,26,26,.045);font:500 13px var(--font-sans);letter-spacing:-.004em;
    color:var(--muted);cursor:default;transition:background .22s var(--ease)}
  .fd-stats b{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 10px;
    border-radius:100px;background:#fff;box-shadow:0 1px 2px rgba(20,24,12,.06);
    font:600 14px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
    color:var(--ink);transition:color .22s var(--ease)}
  .fd-stats span:hover{background:rgba(26,26,26,.065)}
  .fd-stats span:hover b{color:var(--green-ink)}
  .fd-stats span.last b{color:var(--green)}
  html[data-theme="dark"] .fd-stats span{background:rgba(255,255,255,.06)}
  html[data-theme="dark"] .fd-stats span:hover{background:rgba(255,255,255,.09)}
  html[data-theme="dark"] .fd-stats b{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
  /* graduation caps thrown above the tracker — the pricing band's sketch, reused */
  .kcaps{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% - 110px);z-index:0;width:min(830px,100%);color:rgba(26,26,26,.24);pointer-events:none;-webkit-mask-image:linear-gradient(#000 0 calc(100% - 110px),transparent calc(100% - 110px));mask-image:linear-gradient(#000 0 calc(100% - 110px),transparent calc(100% - 110px))}
  .kcaps svg{display:block;width:100%;height:auto}
  .kcaps .sd{fill:var(--bg)}
  .kcaps .gb{fill:var(--green);stroke:var(--green)}
  .kcaps .gb-s{stroke:var(--green);fill:none}
  .kcaps .tr{display:none}
  html[data-theme="dark"] .kcaps{color:rgba(255,255,255,.22)}
  @media (max-width:860px){.kcaps{display:none}}
  /* feature wall, row one: the card carries the drawing, a glass panel carries the words.
     58/42 against the tracker's full measure, card overlapping the panel so they read joined */
  /* card is one third of the tracker's measure (three cards + two 14px gaps = tracker width);
     the same 14px separates the row from the tracker above */
  .fw-pair{position:relative;display:grid;grid-template-columns:calc((100% - 28px)/3) minmax(0,1fr);align-items:stretch;margin-top:14px}
  .fw-card{position:relative;z-index:1;height:352px}
  .fw-card > .scp1{width:100%}
  .fw-list{margin:0 0 0 -26px;padding:24px 30px 22px 54px;border:1px solid var(--line);border-radius:0 26px 26px 0;
    background:rgba(255,255,255,.34);display:flex;flex-direction:column;min-width:0}
  html[data-theme="dark"] .fw-list{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
  .fw-k{display:flex;align-items:baseline;gap:14px;padding-bottom:4px}
  .fw-k span{flex:none;font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .fw-k i{flex:1;height:0;border-bottom:1px solid var(--line-2)}
  .fw-k b{flex:none;font:600 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
  .fw-list ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;justify-content:space-evenly;flex:1;min-height:0}
  .fw-list li{position:relative;padding:0 0 0 16px}
  .fw-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.6}
  .fw-list li b{display:block;font:600 13px var(--font-sans);letter-spacing:-.012em;color:var(--ink)}
  .fw-list li span{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted);text-wrap:pretty;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  @media (max-width:860px){.fw-pair{grid-template-columns:1fr}.fw-card{height:330px}
    .fw-list{margin:-14px 12px 0;border-radius:0 0 26px 26px;padding:38px 26px 22px}}
  .fw-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  .fw-row > .scp1{width:100%}
  .fw-pair.rev{grid-template-columns:minmax(0,1fr) calc((100% - 28px)/3)}
  .fw-pair.rev .fw-list{margin:0 -26px 0 0;border-radius:26px 0 0 26px;padding:24px 54px 22px 30px}
  @media (max-width:860px){.fw-row{grid-template-columns:1fr}
    .fw-pair.rev .fw-card{order:-1}
    .fw-pair.rev .fw-list{margin:-14px 12px 0;border-radius:0 0 26px 26px;padding:38px 26px 22px}}
  /* down-connected unit: the card carries the drawing, its panel hangs off the bottom edge */
  .fw-down{display:flex;flex-direction:column}
  .fw-down > .scp1{flex:none;z-index:1}
  .fw-list.below{margin:-26px 0 0;border-radius:0 0 26px 26px;padding:46px 24px 20px;flex:1}
  .fw-list.below ul{justify-content:space-evenly}
  /* explainer prose opposite the card: no box, just type on the paper */
  .fw-prose{display:flex;flex-direction:column;justify-content:center;padding:8px 0 8px 46px;min-width:0}
  .fw-pair.rev .fw-prose{padding:8px 46px 8px 0;text-align:right;align-items:flex-end}
  .fw-pair.rev .fw-prose-go{align-self:flex-end}
  .fw-pair + .fw-pair{margin-top:34px}
  .fw-prose-k{font:600 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .fw-prose h3{margin:12px 0 0;font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.032em;line-height:1.02;color:var(--ink)}
  .fw-prose p{margin:14px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
  .fw-prose p.fw-prose-s{margin-top:10px;font-size:14px;color:var(--muted)}
  .fw-prose-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;align-self:flex-start;font:600 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);text-decoration:none}
  .fw-prose-go svg{width:14px;height:14px;transition:transform .22s var(--ease)}
  .fw-prose-go:hover svg{transform:translateX(3px)}
  @media (max-width:860px){.fw-prose{padding:20px 12px 0}}
  /* interface panels: copy left, the interface's own drawing bleeding off the panel edge */
  /* interface explorer: a rule, then a recessed band — chips choose, the panel shows */
  .ix-rule{height:1px;margin:34px 0 0;background:var(--line)}
  .ix-band{padding:clamp(32px,3.2vw,46px) 0 clamp(34px,3.4vw,46px)}
  .ix-head{display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap;margin-bottom:24px}
  .ix-lab{display:inline-flex;align-items:center;gap:11px;flex:none;font:600 10px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
  .ix-lab::before{content:"";width:18px;height:1px;background:var(--green)}
  .ix-head::after{content:"";order:2;flex:1;height:1px;min-width:24px;background:var(--line-2)}
  .ix-search{order:3;display:flex;align-items:center;gap:9px;height:34px;padding:0 2px;border-radius:0;background:none;
    border-bottom:1px solid var(--line);color:var(--muted-2);transition:border-color .22s var(--ease)}
  .ix-search:focus-within{border-bottom-color:var(--green)}
  .ix-search svg{width:15px;height:15px;flex:none}
  .ix-search input{border:0;outline:0;background:none;width:148px;font:500 13px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .ix-search input::placeholder{color:var(--muted-2)}
  html[data-theme="dark"] .ix-search{border-bottom-color:rgba(255,255,255,.14)}
  .ixscope{position:relative}
  .ixdock{position:sticky;top:20px;z-index:30;padding:14px 0 16px;margin-bottom:134px}
  .ixdock > .wrap{position:relative}
  .ixdock::before{content:"";position:absolute;inset:-88px 0 -44px 0;pointer-events:none;opacity:0;transition:opacity .2s var(--ease);
    background:linear-gradient(180deg,
      rgba(247,246,243,.94) 0%, rgba(247,246,243,.94) 62%, rgba(247,246,243,.86) 74%,
      rgba(247,246,243,.56) 84%, rgba(247,246,243,.24) 93%, rgba(247,246,243,0) 100%);
    -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.9) 78%,rgba(0,0,0,.6) 87%,rgba(0,0,0,.24) 95%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.9) 78%,rgba(0,0,0,.6) 87%,rgba(0,0,0,.24) 95%,rgba(0,0,0,0) 100%)}
  .ixdock.stuck::before{opacity:1}
  html[data-theme="dark"] .ixdock::before{background:linear-gradient(180deg,
      rgba(27,29,24,.94) 0%, rgba(27,29,24,.94) 62%, rgba(27,29,24,.84) 74%,
      rgba(27,29,24,.54) 84%, rgba(27,29,24,.22) 93%, rgba(27,29,24,0) 100%)}
  .ixdock > .ix-chips{position:relative}
  .ix-chips{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}
  @media (max-width:1280px){.ix-chips{flex-wrap:wrap}}
  .ix-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 5px;border:0;border-radius:100px;
    background:rgba(26,26,26,.05);font:600 12px var(--font-sans);letter-spacing:-.004em;color:var(--muted);cursor:pointer;
    transition:background .22s var(--ease),color .22s var(--ease)}
  .ix-chip b{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:26px;padding:0 7px;border-radius:100px;
    background:#fff;box-shadow:0 1px 2px rgba(20,24,12,.06);font:600 11.5px/1 var(--font-display);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;color:var(--ink);transition:color .22s var(--ease),background .22s var(--ease)}
  .ix-chip:hover{background:rgba(26,26,26,.075);color:var(--ink)}
  .ix-chip.on{color:var(--ink)}
  .ix-chip i{font-style:normal;width:4px;margin-left:-7px;font:700 14px/1 var(--font-display);color:var(--green);opacity:0;transform:translateY(1px);transition:opacity .22s var(--ease)}
  .ix-chip.on i{opacity:0}
  .ix-chip.on b{background:var(--green);box-shadow:0 1px 2px rgba(63,105,3,.3);color:var(--on-green)}
  html[data-theme="dark"] .ix-chip{background:rgba(255,255,255,.07)}
  html[data-theme="dark"] .ix-chip b{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
  html[data-theme="dark"] .ix-chip.on{color:#fff}
  html[data-theme="dark"] .ix-chip.on b{background:var(--green);color:var(--on-green)}
  /* the coming-soon chip: pencilled in, not yet solid — dashed outline, no fill, no hover */
  .ix-chip.soon{background:transparent;box-shadow:inset 0 0 0 1px transparent;border:1px dashed rgba(26,26,26,.26);color:var(--muted-2);cursor:default}
  .ix-chip.soon:hover{background:transparent;color:var(--muted-2)}
  .ix-chip.soon b{background:transparent;box-shadow:none;border:1px dashed rgba(26,26,26,.2);color:var(--muted-2)}
  .ix-chip.soon em{font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);margin-left:2px;transform:translateY(-4px)}
  html[data-theme="dark"] .ix-chip.soon{background:transparent;border-color:rgba(255,255,255,.24)}
  html[data-theme="dark"] .ix-chip.soon b{background:transparent;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.55)}
  html[data-theme="dark"] .ix-chip.soon em{color:var(--green)}
  .ix-title{margin-top:34px;padding-top:28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
  .ix-title h3{margin:0;flex:none;white-space:nowrap;font-family:var(--font-display);font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:.98;color:var(--ink)}
  .ix-title p{margin:0 0 2px;flex:1;min-width:260px;max-width:64ch;font:400 14.5px/1.55 var(--font-sans);letter-spacing:-.01em;color:var(--muted);text-wrap:pretty}
  .ix-panel{display:grid;grid-template-columns:minmax(0,1fr);margin-top:4px}
  .ix-detail{order:1}
  .ix-plates{order:2}
  .ix-plates{position:relative;display:flex;align-items:flex-start;margin-right:-14px;margin-top:-28px}
  html[data-theme="dark"] .ix-plates{background:none;box-shadow:none}
  .ix-plate{display:none;width:100%;color:rgba(26,26,26,.5)}
  .ix-plate.on{display:block}
  .ix-plate:not(.real) svg{display:block;width:100%;height:auto;overflow:visible;opacity:.8;-webkit-mask-image:radial-gradient(128% 122% at 48% 48%,#000 74%,transparent 99%);mask-image:radial-gradient(128% 122% at 48% 48%,#000 74%,transparent 99%)}
  html[data-theme="dark"] .ix-plate:not(.real) svg{filter:invert(.9) hue-rotate(180deg) saturate(1.2);opacity:.85}
  .ix-detail{min-width:0}
  .ix-cols{column-count:2;column-gap:clamp(26px,2.6vw,42px);min-height:330px}
  .ix-t{break-inside:avoid;padding:0 0 20px}
  .ix-t b{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:600 13.5px var(--font-sans);letter-spacing:-.014em;color:var(--ink)}
  .ix-t span{display:block;margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
  .ix-b{text-decoration:none;padding:2px 7px;border-radius:100px;font:600 8px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:1.5px}
  .ix-b.prem{background:#F0EFEA;color:var(--muted)}
  .ix-b.soon{background:var(--green-tint);color:var(--green-deep)}
  html[data-theme="dark"] .ix-b.prem{background:rgba(255,255,255,.1);color:var(--ink-2)}
  .ix-sys{margin:16px 0 0;max-width:64ch;font:400 13.5px/1.55 var(--font-sans);letter-spacing:-.008em;color:var(--muted-2);text-wrap:pretty}
  .ix-foot{margin-top:6px;padding-top:16px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .ix-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ix-linklab{font:600 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .ix-link{border:1px solid var(--line);background:none;border-radius:100px;padding:5px 12px;cursor:pointer;
    font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--muted);
    transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
  .ix-link:hover{border-color:var(--green-tint-2);background:var(--green-tint);color:var(--green-deep)}
  html[data-theme="dark"] .ix-link{border-color:rgba(255,255,255,.14)}
  .ix-more{display:inline-block;font:600 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink)}
  @media (max-width:960px){.ix-panel{grid-template-columns:1fr}.ix-cols{column-count:1;min-height:0}.ix-plates{display:none}}
  /* the card sells one interface: a line that lands, the drawing as evidence.
     depth comes from a raised paper plate overlapping the card, not from gradients */
  .ap-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,52%);align-items:center;
    gap:clamp(20px,2.4vw,40px);margin-top:40px;padding:clamp(30px,3vw,42px) 0 clamp(30px,3vw,42px) clamp(34px,3.4vw,48px);
    border-radius:24px;overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,24,12,.04),0 10px 24px rgba(20,24,12,.05),0 34px 64px rgba(20,24,12,.07);
    background:radial-gradient(64% 80% at 88% 96%,rgba(110,183,4,.13),transparent 66%),linear-gradient(168deg,#fff 0%,rgba(255,255,255,.62) 58%,rgba(243,242,237,.72) 100%)}
  html[data-theme="dark"] .ap-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.3),0 26px 56px rgba(0,0,0,.4);
    background:radial-gradient(64% 80% at 88% 96%,rgba(110,183,4,.12),transparent 66%),linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
  .ap-hero::before{content:"";position:absolute;top:0;right:0;width:52%;height:64%;z-index:0;pointer-events:none;
    background-image:linear-gradient(rgba(26,26,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,.045) 1px,transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 0 34%,transparent 70%);
    mask-image:radial-gradient(120% 120% at 100% 0%,#000 0 34%,transparent 70%)}
  html[data-theme="dark"] .ap-hero::before{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)}
  .ap-left{position:relative;z-index:2;min-width:0}
  .ap-left h3{margin:0;font-family:var(--font-display);font-size:clamp(32px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:.98;color:var(--ink)}
  .ap-left p{margin:16px 0 0;max-width:26ch;font:400 16px/1.52 var(--font-sans);letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .ap-tools{margin-top:26px;max-width:340px}
  .ap-tool{display:flex;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line-2)}
  .ap-tool:first-child{border-top:0;padding-top:0}
  .ap-tool b{font:600 15px var(--font-sans);letter-spacing:-.016em;color:var(--ink)}
  .ap-proof{display:inline-block;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2);
    font:600 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
  .ap-plate{position:relative;z-index:1;margin:0 -10px 0 0;padding:57px 26px 53px;border-radius:22px 0 0 22px;background:#fff;
    box-shadow:0 1px 2px rgba(20,24,12,.05),0 14px 30px rgba(20,24,12,.07),0 40px 80px rgba(20,24,12,.09);
    transform:rotate(-.5deg)}
  html[data-theme="dark"] .ap-plate{background:#23251f;box-shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px rgba(0,0,0,.45)}
  .ap-art{color:rgba(26,26,26,.5)}
  .ap-art svg{display:block;width:90%;margin:0 auto;height:auto;overflow:visible;opacity:.76}
  html[data-theme="dark"] .ap-art svg{filter:invert(.9) hue-rotate(180deg) saturate(1.2);opacity:.85}
  @media (max-width:900px){.ap-hero{grid-template-columns:1fr;padding:34px 24px 0}
    .ap-plate{margin:22px -24px -1px;border-radius:18px 18px 0 0;transform:none}}
  .ap-k{display:block;margin-bottom:9px;font:600 10.5px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--green-ink)}
  .ap-hero p,.ap-card p{color:var(--ink-2)}
  .ap-morex{display:inline-block;margin-top:15px;font:600 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink)}
  .ap-more{margin-top:22px}
  .ap-more span{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 5px;border-radius:100px;
    background:rgba(26,26,26,.045);font:500 13px var(--font-sans);letter-spacing:-.004em;color:var(--muted)}
  .ap-more b{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 10px;border-radius:100px;
    background:#fff;box-shadow:0 1px 2px rgba(20,24,12,.06);font:600 14px/1 var(--font-display);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;color:var(--green-ink)}
  html[data-theme="dark"] .ap-more span{background:rgba(255,255,255,.06)}
  html[data-theme="dark"] .ap-more b{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
  html[data-theme="dark"] .ap-hero{background:linear-gradient(112deg,rgba(255,255,255,.05) 0 42%,rgba(110,183,4,.12) 100%)}
  .ap-copy{min-width:0;padding-right:8px}
  .ap-hero h3,.ap-card h3{margin:0;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.036em;line-height:1.02;color:var(--ink)}
  .ap-hero p,.ap-card p{margin:14px 0 0;max-width:48ch;font-size:15px;line-height:1.6;letter-spacing:-.01em;color:var(--muted);text-wrap:pretty}
  .ap-rows{margin-top:24px;max-width:48ch}
  .ap-rows{display:flex;flex-direction:column;gap:11px}
  .ap-line{margin:0;font:400 14.5px/1.5 var(--font-sans);letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .ap-line b{font-weight:600;color:var(--ink)}
  .ap-line i{font-style:normal;color:var(--green);margin:0 8px}
  html[data-theme="dark"] .ap-art svg{filter:invert(.9) hue-rotate(180deg) saturate(1.2);opacity:.85}
  .ap-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
  .ap-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:520px;padding:clamp(26px,2.4vw,34px) clamp(24px,2.4vw,34px) 0;
    border-radius:22px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(20,24,12,.04),0 8px 20px rgba(20,24,12,.05);background:rgba(255,255,255,.66)}
  html[data-theme="dark"] .ap-card{border-color:rgba(255,255,255,.1);box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 30px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ap-card{background:rgba(255,255,255,.045)}
  .ap-hero:hover,.ap-card:hover{transition:box-shadow .25s var(--ease)}
  .ap-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .ap-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
  .ap-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.65}
  .ap-list li b{font-weight:600;color:var(--ink)}
  .ap-art.bottom{margin:auto -46px -56px;align-self:stretch}
  @media (max-width:900px){.ap-hero{grid-template-columns:1fr;grid-template-areas:"head" "art" "rows";grid-template-rows:auto auto auto;padding:34px 24px 0}.ap-art{margin:18px -34px -40px}
    .ap-duo{grid-template-columns:1fr}.ap-card{min-height:0;padding:30px 26px 0}}
  /* in-slot panel: occupies a grid cell and reaches 26px under the card to its left */
  .fw-row > .scp1{z-index:1}
  .fw-list.slot{margin:0 0 0 -40px;border-radius:0 26px 26px 0;padding:24px 26px 20px 62px}
  @media (max-width:860px){.fw-list.slot{margin:-14px 12px 0;border-radius:0 0 26px 26px;padding:38px 26px 22px}}
  .fd-head{text-align:center;margin:0;font-size:clamp(32px,4.2vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:600}
  .fd-head .g{color:var(--green)}
  /* sketch objects standing on the footer hairline, page left */
  .foot-shelf{position:absolute;bottom:100%;left:calc((100% - var(--maxw)) / 2 - 8px);width:300px;margin-bottom:0;pointer-events:none;color:rgba(26,26,26,.22);transform:translateZ(0);backface-visibility:hidden}
  .foot-shelf svg{display:block;width:100%;height:112px}
  html[data-theme="dark"] .foot-shelf{color:rgba(255,255,255,.2)}
  @media (max-width:1080px){.foot-shelf{display:none}}
  /* the engine: a pine intake pane feeding a black instrument pane */
  /* a pencilled note under the box, caret pointing up into it — the same hand and the same
     construction as the "Desk Lite coming soon" note on the landing page */
  /* pencilled notes around the box: a pair above pointing down, a pair below pointing up */
  /* the ten boxes sit in a shallow tray, so the set reads as one object */
  .tray{position:relative;background:rgba(26,26,26,.018);border-radius:32px;padding:14px;border-top:1px solid var(--line)}
  html[data-theme="dark"] .tray{background:rgba(255,255,255,.02);border-top-color:rgba(255,255,255,.12)}
  /* a small stack of books resting on the tray's top-right edge */
  .kco[data-kco="keys"] b{transform:translate(16px,0) rotate(-3deg)}
  .kco[data-kco="keys"] span{transform:translate(-4px,-9px) rotate(8deg) scaleY(-1)}
  .tray-books{position:absolute;right:34px;bottom:100%;width:min(118px,15vw);height:auto;display:block;color:rgba(26,26,26,.22);pointer-events:none}
  html[data-theme="dark"] .tray-books{color:rgba(255,255,255,.2)}
  @media (max-width:760px){.tray-books{display:none}}
  /* the credits note: only on hover of the asterisk */
  .fn{position:relative;font-size:.5em;font-weight:600;vertical-align:super;margin-left:1px;cursor:help}
  .fn i{font-style:normal;color:var(--muted-2);transition:color .16s ease}
  .fn:hover i{color:var(--green-deep)}
  .fn u{position:absolute;left:50%;top:calc(100% + 9px);transform:translate(-50%,3px);width:230px;padding:9px 12px;border-radius:10px;background:var(--ink);color:rgba(247,246,243,.86);font:500 11.5px/1.45 var(--font-sans);letter-spacing:0;text-decoration:none;text-align:left;text-wrap:pretty;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s var(--ease),visibility .16s;pointer-events:none;z-index:5}
  .fn:hover u{opacity:1;visibility:visible;transform:translate(-50%,0)}

  .kco-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 clamp(0px,0.6%,10px)}
  .kco-row.above{margin-bottom:2px;justify-content:space-between;padding:0 clamp(0px,1%,14px)}
  .kco{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:1px;width:fit-content;margin:0;font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;color:rgba(26,26,26,.56);text-align:right}
  .kco.l{align-items:flex-start;text-align:left}
  .kco span{font:600 27px/1.1 "Caveat",cursive;color:rgba(26,26,26,.4);transform:scaleY(-1);margin:9px 14px 0 0}
  .kco.l span{margin:9px 0 0 14px}
  /* placed positions — dragged into place at desktop width, so they apply there only */

  .kco.fidx{margin:2px auto 18px;align-items:center;text-align:center}
  .kco.fidx b{transform:rotate(-2deg)}
  .kco.fidx span{margin:7px 0 0;transform:translate(-30px,-6px) rotate(-8deg) scaleY(-1)}
  .kco.up span{order:-1;transform:none;margin:0 14px 2px 0}
  .kco.l.up span{margin:0 0 2px 14px}
  .kco[data-kco="talks"] b{transform:rotate(-3deg)}
  .kco[data-kco="talks"] span{transform:translate(34px,-6px) rotate(6deg) scaleY(-1)}
  .kco[data-kco="tutor"] b{transform:rotate(3deg)}
  .kco[data-kco="tutor"] span{transform:translate(-26px,-6px) rotate(-7deg) scaleY(-1)}
  .kco[data-kco="whole"] b{transform:rotate(2deg)}
  .kco[data-kco="whole"] span{transform:translate(30px,2px) rotate(-8deg)}
  .kco[data-kco="together"] b{transform:rotate(-2deg)}
  .kco[data-kco="together"] span{transform:translate(-24px,2px) rotate(9deg)}
  .kco[data-kco="perform"] b{transform:rotate(3deg)}
  .kco[data-kco="perform"] span{transform:translate(-16px,-8px) rotate(9deg) scaleY(-1)}
  .kco[data-kco="check"] b{transform:rotate(-2deg)}
  .kco[data-kco="check"] span{transform:translate(-32px,-6px) rotate(-8deg) scaleY(-1)}
  .kco[data-kco="track"] b{transform:rotate(2.5deg)}
  .kco[data-kco="track"] span{transform:translate(30px,2px) rotate(-9deg)}
  .kco b,.kco span{transform-origin:50% 50%}
  .kco .pp{display:inline-block;font-style:normal;transform-origin:50% 50%}
  @keyframes kcoIn{from{opacity:0;scale:.955;filter:blur(2.5px)}70%{opacity:1}to{opacity:1;scale:1;filter:blur(0)}}
  

  .fx-toc{display:flex;align-items:center;justify-content:center;gap:18px;margin:38px auto 0;width:fit-content}
  .fx-toc a{display:inline-flex;align-items:baseline;gap:8px;font:500 10.5px var(--font-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s ease}
  .fx-toc a b{font-weight:600;color:var(--green-ink)}
  .fx-toc a:hover{color:var(--ink)}
  .fx-toc > i{width:26px;height:0;border-bottom:1px solid var(--line)}
  @media (max-width:620px){.fx-toc{flex-direction:column;gap:10px}.fx-toc > i{display:none}}
  @media (max-width:620px){.kco{display:none}}
  .kco b{font-weight:600;line-height:1.05;text-align:right}
  .kco em{font-style:normal;color:var(--green)}
  html[data-theme="dark"] .kco{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .kco span{color:rgba(255,255,255,.4)}
  /* the index sits on a slightly deeper paper, bookshelf and all */
  /* the index is a recess in the desktop: the paper deepens into it and lifts back out,
     with a soft step-shadow at the lip instead of a seam */
  /* the band is darker than the page, so its hairlines need their own values */
  .idx-band{--line-2:rgba(26,26,26,.10);--line:rgba(26,26,26,.14);
    background:linear-gradient(to bottom,#EDEBE4 0,#EDEBE4 calc(100% - 120px),#F7F6F3 100%);
    border-top:1px solid rgba(26,26,26,.09);box-shadow:inset 0 16px 30px -8px rgba(20,24,12,.11)}
  html[data-theme="dark"] .idx-band{--line-2:rgba(255,255,255,.1);--line:rgba(255,255,255,.14);
    background:linear-gradient(to bottom,rgba(0,0,0,.24) 0,rgba(0,0,0,.24) calc(100% - 120px),rgba(0,0,0,0) 100%);
    border-top-color:rgba(255,255,255,.08);box-shadow:inset 0 16px 32px -8px rgba(0,0,0,.45)}
  /* the books stand on the band’s top edge, on the lighter paper above it */
  .fshelf{max-width:930px;margin:6px auto 26px;color:rgba(26,26,26,.19)}
  /* index masthead, set like the head of a printed reference: a running head, then one statement */
  .idx-mast{padding:2px 30px 0}
  .idx-run{display:flex;align-items:center;gap:18px;padding-bottom:28px}
  .idx-run > span{flex:none;font:500 9.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.36)}
  .idx-run > i{flex:1;height:0;border-bottom:1px solid rgba(26,26,26,.11)}
  html[data-theme="dark"] .idx-run > i{border-bottom-color:rgba(255,255,255,.11)}
  html[data-theme="dark"] .idx-run > span{color:rgba(255,255,255,.38)}
  .idx-stmt{margin:0;max-width:24ch;font:600 clamp(28px,3.8vw,46px)/1.06 var(--font-display);letter-spacing:-.038em;font-variant-numeric:tabular-nums;color:var(--ink);text-wrap:pretty}
  .idx-deck{margin:18px 0 0;max-width:42ch;font-size:15px;line-height:1.55;letter-spacing:-.008em;color:var(--muted);text-wrap:pretty}
  .idx-serv{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:34px 30px 12px;padding-top:19px;border-top:1px solid var(--line-2)}
  .idx-leg{display:flex;align-items:center;flex-wrap:wrap}
  .idx-leg > span{display:flex;align-items:center;gap:9px}
  .idx-leg > span + span{margin-left:20px;padding-left:20px;border-left:1px solid var(--line)}
  .idx-leg i{font-style:normal;font-size:11.5px;letter-spacing:-.005em;color:var(--muted-2)}
  /* premium badge wears the premium payment card: ink ground, white type */
  .pbadge{background:var(--dark);color:rgba(255,255,255,.94);box-shadow:0 1px 2px rgba(20,24,12,.16)}
  html[data-theme="dark"] .pbadge{background:#161613;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  @media (max-width:560px){.idx-run > span:last-child{display:none}}
  .fshelf svg{display:block;width:100%;height:auto}
  html[data-theme="dark"] .fshelf{color:rgba(255,255,255,.32)}
  /* index search: matches a tool name, its description, or the interface it sits in */
  #idx-s{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 18px;border-radius:100px;background:#fff;
    box-shadow:0 1px 2px rgba(20,24,12,.03),0 6px 18px rgba(20,24,12,.05);transition:box-shadow .18s var(--ease)}
  #idx-s:focus-within{box-shadow:0 0 0 1.5px rgba(110,183,4,.5),0 6px 18px rgba(20,24,12,.06)}
  #idx-s > svg{width:14px;height:14px;flex:none;color:var(--muted-2)}
  #idx-s input{width:212px;max-width:50vw;border:0;outline:0;background:transparent;font:500 13.5px var(--font-sans);letter-spacing:-.012em;color:var(--ink)}
  #idx-s input::placeholder{color:var(--muted-2)}
  #idx-x{flex:none;border:0;background:transparent;padding:0 10px;font:500 9.5px var(--font-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted-2);cursor:pointer;transition:color .16s var(--ease)}
  #idx-x:hover{color:var(--ink)}
  html[data-theme="dark"] #idx-s{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
  html[data-theme="dark"] #idx-s:focus-within{box-shadow:inset 0 0 0 1.5px rgba(143,210,19,.5)}
  html[data-theme="dark"] #idx-s input{color:#F7F6F3}
  html[data-theme="dark"] #idx-s input::placeholder{color:rgba(255,255,255,.42)}
  /* the filter field in dark mode */
  html[data-theme="dark"] #tools label{background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important}
  html[data-theme="dark"] #tools label input{color:#F7F6F3}
  html[data-theme="dark"] #tools label input::placeholder{color:rgba(255,255,255,.42)}
  /* the nine cards hover exactly like the landing group-study cards: lift + cast, no tint */
  .scp1:hover{background:rgba(255,255,255,.75)!important}
  html[data-theme="dark"] .scp1:hover{background:rgba(255,255,255,.075)!important}
  /* the nine cards in dark mode: dark pane, hairline edge, sketches flipped to light ink */
  html[data-theme="dark"] .scp1{background:rgba(255,255,255,.055)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 3px rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.35)!important}
  html[data-theme="dark"] .scp1:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.34),0 16px 34px rgba(0,0,0,.45)!important}
  html[data-theme="dark"] .scp1 svg{filter:invert(.9) hue-rotate(180deg) saturate(1.2);opacity:.85}
  /* back to the grid — appears once the grid is behind you */
  #to-grid{position:fixed;left:50%;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:7px;
    height:38px;padding:0 15px;border-radius:100px;background:#fff;color:var(--ink);
    font:600 12px var(--font-display);letter-spacing:-.01em;text-decoration:none;
    box-shadow:0 1px 3px rgba(20,24,12,.06),0 10px 26px rgba(20,24,12,.12);
    opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
  #to-grid.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
  #to-grid:hover{box-shadow:0 2px 6px rgba(20,24,12,.08),0 14px 32px rgba(20,24,12,.16)}
  #to-grid svg{width:11px;height:11px;color:var(--green)}
  html[data-theme="dark"] #to-grid{background:#12211C;color:#F7F6F3;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.5)}
  @media (max-width:560px){#to-grid{bottom:14px}}
  @media (max-width:640px){.jhow{display:none}}
  html[data-theme="dark"]{--band:rgba(255,255,255,.055)}
  html[data-theme="dark"] .fd-room img,html[data-theme="dark"] .jhow,html[data-theme="dark"] .mco{filter:invert(.88) hue-rotate(180deg)}
  .stx{position:relative;display:grid;grid-template-columns:1fr 1.04fr;align-items:stretch;gap:clamp(24px,3vw,46px);border-radius:22px;overflow:hidden;border:1px solid rgba(247,246,243,.13);box-shadow:0 2px 3px rgba(20,24,12,.16),0 6px 12px rgba(20,24,12,.13),0 18px 34px rgba(20,24,12,.15),0 44px 80px rgba(20,24,12,.26),inset 0 1px 0 rgba(247,246,243,.1),inset 0 -1px 0 rgba(0,0,0,.4);background:radial-gradient(74% 100% at 72% 46%,rgba(110,183,4,.075),transparent 66%),radial-gradient(90% 120% at 6% 0%,rgba(247,246,243,.042),transparent 58%),linear-gradient(162deg,rgba(11,12,9,.98),rgba(3,4,3,.97));-webkit-backdrop-filter:blur(26px) saturate(130%);backdrop-filter:blur(26px) saturate(130%);padding:clamp(22px,2.2vw,32px)}
  .stx{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .stx:hover{transform:translateY(-1px);box-shadow:0 2px 3px rgba(20,24,12,.16),0 6px 12px rgba(20,24,12,.13),0 22px 42px rgba(20,24,12,.18),0 52px 96px rgba(20,24,12,.3),inset 0 1px 0 rgba(247,246,243,.1),inset 0 -1px 0 rgba(0,0,0,.4)}
  .stx > *{position:relative;z-index:1}
  .stx-copy{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0 clamp(6px,1.4vw,20px) 0 0}
  .stx-copy > *{position:relative;z-index:1}
  .stx-k{font:600 11px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:#8FD213}
  .stx h2{font-size:43px;letter-spacing:-.036em;line-height:.98;margin:15px 0 0;color:#fff;text-wrap:balance}
  .stx h2 .g{color:#8FD213}
  .stx .lede{font-size:15.5px;line-height:1.6;color:rgba(247,246,243,.8);margin:19px 0 0;max-width:44ch;text-wrap:pretty}
  .spec{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
  .spec-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:9px 17px;border-radius:16px;background:rgba(247,246,243,.032)}

  .spec-row u{text-decoration:none;flex:0 0 auto;font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(247,246,243,.5)}
  .spec-row b{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.016em;color:#fff;text-align:right;text-wrap:pretty}
  .stx.dark .ktk{align-self:center;position:relative;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.5),0 28px 56px rgba(0,0,0,.55),0 44px 90px rgba(0,0,0,.4)}
  @media (max-width:920px){.stx{grid-template-columns:1fr}}
  /* one surface, driven by the chips: black for the engine, clouded glass for an interface */
  .stx .ktk,.stx .ixfig{grid-column:2;grid-row:1}
  @media (max-width:920px){.stx .ktk,.stx .ixfig{grid-column:1;grid-row:auto}}
  .stx-kn,.stx-ix{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
  /* the same list on the interface cards, in the chips' own tone */
  .ixm{margin-top:auto;padding-top:0}
  .stx-kn{display:flex;flex-direction:column}
  .stx-kn .spec{margin-top:auto}
  .stx.glass .spec-row{background:rgba(26,26,26,.026)}
  .stx.glass .spec-row u{color:var(--muted-2)}
  .stx.glass .spec-row b{color:var(--ink)}
  html[data-theme="dark"] .stx.glass .spec-row{background:rgba(255,255,255,.032)}
  html[data-theme="dark"] .stx.glass .spec-row u{color:rgba(247,246,243,.5)}
  html[data-theme="dark"] .stx.glass .spec-row b{color:#fff}
  /* below the card: the explanation holds the left column, the tools stack on the right */
  .ixb{margin-top:14px;padding:0 0 clamp(10px,1.4vw,18px)}
  .ixb{position:relative}
  .ixb-h{margin:0 0 14px;font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
  html[data-theme="dark"] .ixb-h{color:#fff}
  .ixb-lede{margin:0;max-width:74ch;font:400 16px/1.62 var(--font-sans);letter-spacing:-.014em;color:var(--ink-2);text-wrap:pretty}
  /* no panel: the interface's own list stands on the page, headed by the interface it belongs to */
  /* the tray sits inside the card's own margins: left on the card title, right on the tracker's edge */
  .ixtray{margin-top:clamp(46px,5vw,74px);padding-left:clamp(22px,2.2vw,32px);padding-right:clamp(23px,2.3vw,33px)}
  .ixtray-hd{margin-bottom:26px}
  .ixtray h4{margin:0;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.034em;line-height:1;color:#1A1A1A}
  .ixtray h4::after{content:".";color:var(--green)}
  html[data-theme="dark"] .ixtray h4{color:#fff}
  /* the tray heading: a hairline the full width, the title sitting on it, count at the far end */
  .ixtray-hd{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:48px}
  .ixtray h4.ixtray-chip{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.032em;line-height:1;color:#1A1A1A}
  .ixtray h4.ixtray-chip::after{content:none}
  .ixtray-chip b{font:inherit;font-weight:600;color:var(--muted-2)}
  .ixtray-chip > span::after{content:".";color:var(--green)}
  .ixtray-hd u{flex:none;text-decoration:none;font:500 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-variant-numeric:tabular-nums}
  html[data-theme="dark"] .ixtray h4.ixtray-chip{color:#fff}
  @media (max-width:620px){.ixtray{padding-left:0;padding-right:0}.ixtray-hd{flex-direction:column;align-items:flex-start;gap:8px}.ixtray h4.ixtray-chip{font-size:20px}}
  /* index: numbered rows, no rules — the number gutter carries the alignment */
  .ixkey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:0 56px;margin:0;max-width:none}
  .ixkey ul{display:contents}
  .ixkey li{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;align-content:start;gap:2px 14px;
    padding:17px 0 20px;border-top:1px solid var(--line)}
  .ixk-tag{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    font:500 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
  .ixk-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
  .ixk-tag[data-s="soon"]::before{background:var(--muted-2);opacity:.45}
  .ixkey li > span{grid-column:2/-1}
  .ixk-fig{grid-column:2/-1;margin-top:16px;display:flex;flex-direction:column;gap:9px}
  .ixk-bar{display:flex;gap:3px;height:6px}
  .ixk-bar i{border-radius:3px}
  .ixk-bar .mut{background:rgba(26,26,26,.12)}
  .ixk-leg{display:flex;flex-wrap:wrap;gap:5px 16px}
  .ixk-leg em{display:inline-flex;align-items:center;gap:6px;font:500 9.5px var(--font-mono);letter-spacing:.06em;color:var(--muted-2);font-style:normal;font-variant-numeric:tabular-nums}
  .ixk-leg em i{width:7px;height:7px;border-radius:2px}
  .ixk-leg .mut{background:rgba(26,26,26,.25)}
  html[data-theme="dark"] .ixk-bar .mut{background:rgba(255,255,255,.16)}
  html[data-theme="dark"] .ixk-leg .mut{background:rgba(255,255,255,.3)}
  .ixkey li:last-child{border-bottom:1px solid var(--line)}
  .ixkey li::before{content:attr(data-n);grid-row:span 2;align-self:start;padding-top:5px;
    font:500 11px var(--font-mono);letter-spacing:.04em;color:var(--muted-2);font-variant-numeric:tabular-nums;
    transition:color .18s var(--ease)}
  .ixkey li:hover::before{color:var(--green-ink)}
  .ixkey b::after{content:none}
  html[data-theme="dark"] .ixkey li{border-top-color:rgba(255,255,255,.11)}
  html[data-theme="dark"] .ixkey li:last-child{border-bottom-color:rgba(255,255,255,.11)}
  .ixkey b{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.036em;line-height:1.02;color:#1A1A1A}
  .ixkey b span{font:inherit;color:inherit;letter-spacing:inherit}
  .ixkey li > span{grid-column:2;margin-top:6px;max-width:40ch;font:400 13.5px/1.5 var(--font-sans);letter-spacing:-.008em;color:var(--muted-2);text-wrap:pretty}
  html[data-theme="dark"] .ixkey b{color:#fff}
  @media (max-width:760px){.ixkey{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
    .ixkey li:last-child{border-bottom:0}
    .ixkey ul:last-child li:last-child{border-bottom:1px solid var(--line)}}
  /* a wall of sub-points: widths vary, the gutter never does */
  .ixb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  @media (max-width:620px){.ixb-grid{grid-template-columns:minmax(0,1fr)}}
  .ixb-box{position:relative;min-height:290px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:24px 28px 26px;border-radius:26px;
    background:rgba(255,255,255,.75);
    box-shadow:0 2px 6px rgba(20,24,12,.04),0 16px 40px rgba(20,24,12,.06)}
  .ixb-box{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .ixb-box:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(20,24,12,.05),0 20px 46px rgba(20,24,12,.08)}
  .ixb[data-ix="-1"] .ixb-box:hover{box-shadow:0 2px 3px rgba(20,24,12,.16),0 8px 16px rgba(20,24,12,.14),0 22px 40px rgba(20,24,12,.16),inset 0 1px 0 rgba(247,246,243,.1),inset 0 -1px 0 rgba(0,0,0,.4)}
  html[data-theme="dark"] .ixb-box:hover{box-shadow:0 2px 4px rgba(0,0,0,.26),0 14px 32px rgba(0,0,0,.24)}
  @media (prefers-reduced-motion:reduce){.ixb-box{transition:none}.ixb-box:hover{transform:none}}
  .ixb-box[data-sz="u"]{grid-column:span 3}
  .ixb-box[data-sz="d"]{grid-column:span 6}
  .ixb-box[data-sz="t"]{grid-column:span 3;grid-row:span 2}
  .ixb-box[data-sz="T"]{grid-column:span 6;grid-row:span 2}
  .ixb-box.ov{justify-content:flex-start;padding:26px 30px 28px}
  .ixb-box .lm-list b::after{content:none}
  .ixb-box.wide,.ixb-box.tall{justify-content:flex-start;padding:26px 30px 28px}
  @media (max-width:880px){.ixb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:1240px){
    .ixb-box{padding:22px 26px}
    .ixb-box.wide,.ixb-box.tall,.ixb-box.ov,.ixb-box.lm{padding:24px 28px}
    .ixb-box h4{font-size:22px}
    .ixb-box p.lg,.ixb-box.lm p.lg{margin-top:12px}
    .ixb-box b{font-size:17px}
    .ixb-box p,.ixb-box p.lg{font-size:12.5px;line-height:1.45}
    .lm-list{margin-top:10px;gap:7px}
    .lm-list li{padding-top:7px;gap:9px}
    .lm-list b{font-size:9.5px;letter-spacing:.12em}
    .lm-list span{font-size:12px;line-height:1.4}
    .ov-stats{gap:8px;margin-top:11px}}
  /* one more fixed step down, rather than type that slides with every pixel of window */
  @media (max-width:1000px){
    .ixb-box h4{font-size:20px}
    .ixb-box b{font-size:15.5px}
    .ixb-box p,.ixb-box p.lg{font-size:11.5px}
    .lm-list span{font-size:11px}
    .ixb-h{font-size:23px}
    .ix-title h3{font-size:32px}
    .stx h2{font-size:34px}}
  @media (max-width:620px){.ixb-grid{grid-template-columns:minmax(0,1fr)}.ixb-box{min-height:200px}}
  /* study space: the assessment card itself, sitting at the foot of the tile and cropped by its edge */
  .ixb-box.wide{justify-content:flex-start;padding-bottom:0}
  .ixb-box.wide p.lg{flex:0 0 auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  @media (max-width:1240px){.ixb-box.wide p.lg{-webkit-line-clamp:3}}
  .ixb-fig{display:none;flex:1 1 auto;min-height:0;margin-top:auto;padding-top:28px;pointer-events:none}
  .ixb[data-ix="1"] .ixb-fig{display:block}
  .acard{width:100%;background:#fff;border-radius:16px 16px 0 0;padding:13px 14px 16px;
    box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05),0 18px 40px rgba(20,24,12,.05)}
  html[data-theme="dark"] .acard{background:#1A1C15}
  .ac-row{display:flex;gap:12px}
  .ac-rule{flex:0 0 auto;width:3.5px;border-radius:4px;background:#22B8CF}
  .ac-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}
  .ac-sub{display:flex;align-items:center;gap:8px}
  .ac-ic{flex:0 0 auto;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:#22B8CF}
  .ac-ic svg{width:11px;height:11px}
  .ac-sub span{font:500 12.5px var(--font-sans);letter-spacing:-.006em;color:#9a9b92}
  .acard h5{margin:0;font:700 13.5px/1.3 var(--font-sans);letter-spacing:-.026em;color:#1A1A1A;text-wrap:pretty}
  html[data-theme="dark"] .acard h5{color:#fff}
  .ac-meta{display:flex;align-items:center;gap:9px}
  .ac-meta span{font:500 10.5px var(--font-sans);letter-spacing:-.006em;color:#76776f}
  .ac-meta .ac-dot{width:4px;height:4px;border-radius:50%;background:#c9cac2}
  .ac-w{display:inline-flex;align-items:center;gap:6px}
  .ac-w svg{width:12.5px;height:12.5px}
  .ac-faces{display:inline-flex;align-items:center}
  .ac-faces i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #fff;font:600 8px/1 var(--font-sans);font-style:normal}
  .ac-faces i+i{margin-left:-7px}
  .ac-track{margin-left:auto;flex:0 0 auto;width:66px;height:20px;border-radius:100px;border:1px solid #ececE7;background:#fff;display:flex;align-items:center;padding:0 5px}
  .ac-track i{display:block;height:7px;width:15%;border-radius:100px;background:#22B8CF}
  .ixb-box u{text-decoration:none;font:600 10.5px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--green-ink)}
  .ixb-box b{position:relative;font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.034em;line-height:1.02;color:var(--ink);text-wrap:balance}
  .ixb-box b::after{content:".";color:var(--green)}
  .ixb-box.wide b,.ixb-box.tall b{margin-top:8px}
  .ixb-hd{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
  .ixb-badge{position:absolute;top:26px;right:30px}
  @media (max-width:1240px){.ixb-badge{top:24px;right:28px}}
  /* one fixed measure for everything inside the tiles: the copy wraps the same way at
     every window width, so titles and rows never shift as the card grows */
  .ixb-box h4,.ixb-box p,.ixb-box p.lg{max-width:250px}
  .ixb-box.tall h4{padding-right:0;max-width:186px}
  /* the drives read as the spec rows do in the copy column */
  .lmspec{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
  .lmspec li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:7px 13px;border-radius:12px;background:rgba(26,26,26,.026)}
  .lmspec u{text-decoration:none;flex:0 0 auto;font:500 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .lmspec span{font:600 12.5px/1.3 var(--font-sans);letter-spacing:-.014em;color:var(--ink);text-align:right;text-wrap:pretty}
  .ixb[data-ix="-1"] .lmspec li{background:rgba(247,246,243,.045)}
  .ixb[data-ix="-1"] .lmspec u{color:rgba(247,246,243,.5)}
  .ixb[data-ix="-1"] .lmspec span{color:#fff}
  html[data-theme="dark"] .lmspec li{background:rgba(255,255,255,.04)}
  html[data-theme="dark"] .lmspec span{color:#fff}
  /* the careers page's stack of faces, at tile scale */
  .ixb-faces{flex:none;display:flex;align-items:center;padding:2px 0}
  .ixb-faces span{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
    border:1.5px solid var(--bg);box-shadow:0 1px 2px rgba(20,24,12,.1),0 3px 9px rgba(20,24,12,.07);
    font:600 9.5px var(--font-sans);letter-spacing:.01em;
}
  .ixb-faces span + span{margin-left:-9px}
  .ixb-faces span:nth-child(1){background:#DCE6C6;color:#3D5411}
  .ixb-faces span:nth-child(2){background:#E7DFCB;color:#59492A}
  .ixb-faces span:nth-child(3){background:#CFE0DA;color:#1F4A41}
  .ixb-faces span:nth-child(4){background:#E8D6D2;color:#6A3A33}
  .ixb[data-ix="-1"] .ixb-faces span{border-color:#0F120C}
  html[data-theme="dark"] .ixb-faces span{border-color:#23251f}
  @media (prefers-reduced-motion:reduce){.ixb-faces span{transition:none}}
  .ixb-box.lm{justify-content:flex-start}
  .ixb-bar{flex:none;box-sizing:border-box;display:flex;align-items:center;gap:3px;width:96px;height:26px}
  .ixb-bar i{height:6px}
  .ixb-bar i{border-radius:4px}
  .ixb-bar i:nth-child(1){flex:44;background:#6EB704}
  .ixb-bar i:nth-child(2){flex:24;background:#D9A514}
  .ixb-bar i:nth-child(3){flex:14;background:#DE5B6D}
  .ixb-bar i:nth-child(4){flex:18;background:rgba(26,26,26,.16)}
  .ixb-bar i:nth-child(4){background:rgba(26,26,26,.14)}
  .lm-list{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .lm-list li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:12px;padding-top:9px;border-top:1px solid rgba(26,26,26,.07)}
  .lm-list li:first-child{padding-top:0;border-top:0}
  .ixb-box .lm-list b::after{content:none}
  .lm-list b{font:600 10.5px var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green-ink);white-space:nowrap}
  .lm-list span{font:400 12.5px/1.5 var(--font-sans);letter-spacing:-.006em;color:var(--muted);text-wrap:pretty}
  .ixb[data-ix="-1"] .lm-list li{border-top-color:rgba(247,246,243,.12)}
  .ixb[data-ix="-1"] .lm-list b{color:#8FD213}
  .ixb[data-ix="-1"] .lm-list span{color:rgba(247,246,243,.66)}
  html[data-theme="dark"] .lm-list li{border-top-color:rgba(255,255,255,.1)}
  html[data-theme="dark"] .lm-list span{color:rgba(247,246,243,.72)}
  .ov-stats{display:flex;flex-direction:column;gap:11px;margin-top:16px}
  .ov-stats span{display:flex;align-items:baseline;gap:10px;font:400 13px var(--font-sans);letter-spacing:-.008em;color:var(--muted)}
  .ov-stats b::after{content:none}
  .ov-stats b{min-width:2.2ch;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
  .ixb[data-ix="-1"] .ov-stats b{color:#fff}
  .ixb[data-ix="-1"] .ov-stats span{color:rgba(255,255,255,.62)}
  html[data-theme="dark"] .ov-stats b{color:#fff}

  .ixb-box h4{margin:0;font-family:var(--font-display);font-size:clamp(24px,2.2vw,29px);font-weight:600;letter-spacing:-.038em;line-height:1;color:var(--ink);text-wrap:balance}
  .ixb-box h4::after{content:".";color:var(--green)}
  .ixb[data-ix="-1"] .ixb-box h4{color:#fff}
  html[data-theme="dark"] .ixb-box h4{color:#fff}
  .ixb-box p{position:relative;margin:9px 0 0;font:400 13.5px/1.58 var(--font-sans);letter-spacing:-.012em;color:var(--ink-2);text-wrap:pretty}
  /* the feature number sits full-height behind the words, never beside them */
  .ixb-n{position:absolute;right:20px;top:-2px;bottom:-2px;display:flex;align-items:center;pointer-events:none;
    font:700 74px/1 var(--font-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:rgba(26,26,26,.055)}
  .ixb-box[data-sz="d"] .ixb-n{font-size:96px}
  .ixb-box[data-sz="t"] .ixb-n,.ixb-box[data-sz="T"] .ixb-n{font-size:150px}
  html[data-theme="dark"] .ixb-n{color:rgba(255,255,255,.07)}
  /* the engine keeps its own chrome: black tiles under the black card */
  .ixb[data-ix="-1"] .ixb-box{border:1px solid rgba(247,246,243,.13);
    background:radial-gradient(74% 100% at 72% 46%,rgba(110,183,4,.075),transparent 66%),radial-gradient(90% 120% at 6% 0%,rgba(247,246,243,.042),transparent 58%),linear-gradient(162deg,rgba(11,12,9,.98),rgba(3,4,3,.97));
    box-shadow:0 2px 3px rgba(20,24,12,.16),0 6px 12px rgba(20,24,12,.13),0 18px 34px rgba(20,24,12,.15),inset 0 1px 0 rgba(247,246,243,.1),inset 0 -1px 0 rgba(0,0,0,.4)}
  .ixb[data-ix="-1"] .ixb-box b{color:#fff}
  .ixb[data-ix="-1"] .ixb-box p{color:rgba(255,255,255,.72)}
  .ixb[data-ix="-1"] .ixb-box u{color:#8FD213}
  .ixb[data-ix="-1"] .ixb-n{color:rgba(255,255,255,.075)}
  .ixb[data-ix="-1"] .ixb-sig li{border-top-color:rgba(255,255,255,.13)}
  .ixb[data-ix="-1"] .ixb-sig b{color:#fff}
  .ixb[data-ix="-1"] .ixb-sig span,.ixb[data-ix="-1"] .ixb-box p.lg{color:rgba(255,255,255,.62)}
  .ixb-box.lm p.lg{margin-top:14px;font-size:13.5px;line-height:1.55}
  .ixb-box p.lg{margin-top:22px;font-size:15px;line-height:1.6;color:var(--ink-2)}
  .ixb-sig{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .ixb-sig li{display:flex;flex-direction:column;gap:2px;padding-top:9px;border-top:1px solid var(--line-2)}
  .ixb-sig li:first-child{border-top:0;padding-top:0}
  .ixb-sig b{margin:0;font:600 14px var(--font-sans);letter-spacing:-.016em;color:var(--ink)}
  .ixb-sig b::after{content:none}
  .ixb-sig span{font:400 12.5px/1.5 var(--font-sans);letter-spacing:-.008em;color:var(--muted)}
  html[data-theme="dark"] .ixb-sig li{border-top-color:rgba(255,255,255,.12)}
  html[data-theme="dark"] .ixb-sig b{color:#fff}
  html[data-theme="dark"] .ixb-sig span,html[data-theme="dark"] .ixb-box p.lg{color:rgba(247,246,243,.66)}
  /* the interface's own colour surfaces on a few tiles, as on the card */
  html[data-theme="dark"] .ixb-box{background:rgba(255,255,255,.055);box-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 20px rgba(0,0,0,.22)}
  html[data-theme="dark"] .ixb-box b{color:#fff}
  html[data-theme="dark"] .ixb-box p{color:rgba(247,246,243,.72)}
  html[data-theme="dark"] .ixb-lede{color:rgba(247,246,243,.78)}
  .ix-key div{min-width:0}
  .ix-key b{display:block;font:600 14.5px var(--font-sans);letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
  .ix-key p{margin:4px 0 0;font:400 12.5px/1.5 var(--font-sans);letter-spacing:-.006em;color:var(--muted);text-wrap:pretty}
  html[data-theme="dark"] .ix-key b{color:#fff}
  html[data-theme="dark"] .ix-key p{color:rgba(247,246,243,.62)}
  /* dark state hides the interface plates but keeps their layout, so the card keeps the interfaces' exact height and the swap is seamless */
  .stx.dark .stx-ix,.stx.dark .ixfig{visibility:hidden;pointer-events:none}
  .stx.glass .stx-kn{visibility:hidden;pointer-events:none}
  .stx.glass .ktk{visibility:hidden;pointer-events:none}
  .stx.glass{border-color:rgba(26,26,26,.07);background:#FCFBF8;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,24,12,.05),0 10px 26px rgba(20,24,12,.07),0 40px 84px rgba(20,24,12,.1)}
  .stx.glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,24,12,.05),0 14px 32px rgba(20,24,12,.08),0 52px 100px rgba(20,24,12,.11)}
  html[data-theme="dark"] .stx.glass{background:#16180F;border-color:rgba(255,255,255,.12)}
  .stx.glass .stx-k{color:var(--green-ink)}
  .stx.glass h2{color:var(--ink);text-shadow:0 0 26px rgba(110,183,4,.16),0 0 7px rgba(255,255,255,.75),0 1px 0 rgba(255,255,255,.85)}
  .stx.glass h2 .g{text-shadow:0 0 16px rgba(110,183,4,.5)}
  html[data-theme="dark"] .stx.glass h2{text-shadow:0 0 28px rgba(143,210,19,.22),0 0 9px rgba(255,255,255,.16)}
  .stx.glass h2 .g{color:var(--green)}
  .stx.glass .lede{color:var(--muted)}
  .stx.glass .spec-row u{color:var(--muted-2)}
  .stx.glass .spec-row b{color:var(--ink)}
  .ix-lede{max-width:52ch;margin-top:16px;font:400 16px/1.6 var(--font-sans);letter-spacing:-.012em}
  .stx.glass .ix-lede{color:var(--ink-2)}
  .stx.glass .stx-ix{justify-content:flex-start}
  .ix-how{margin:15px 0 0;max-width:50ch;font:400 14px/1.62 var(--font-sans);letter-spacing:-.008em;color:var(--muted);text-wrap:pretty}
  html[data-theme="dark"] .ix-how{color:rgba(247,246,243,.62)}
  .ixfig{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:394px}
  /* one surface: the copy runs across the card and the diagram is raised on it, as on the engine card */
  .stx.glass .stx-copy,.stx.glass .ixfig{background:none;margin:0;border-radius:0}
  .stx.glass .ixfig{padding:0;align-self:center}
  .stx.glass .cal{box-shadow:0 1px 2px rgba(20,24,12,.035),0 6px 14px rgba(20,24,12,.04),0 16px 32px rgba(20,24,12,.04)}
  html[data-theme="dark"] .stx.glass .cal{background:#0B0D08;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.45)}
  
  /* the switch reads as one instrument retuning */
  .stx-ix,.ixfig,.ixb{transition:opacity .2s var(--ease),transform .26s var(--ease)}
  .stx.fade .stx-ix,.stx.fade .ixfig,.ixb.fade{opacity:0}
  .stx.fade .ixfig{transform:translateY(4px) scale(.995)}
  .stx.fade .stx-ix{transform:translateY(3px)}
  /* the card's own surface changes with the switch, so black↔white is a dissolve too */
  .stx{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
  @media (prefers-reduced-motion:reduce){.stx-ix,.ixfig,.ixb{transition:none}.stx.fade .ixfig,.stx.fade .stx-ix{transform:none}}
  /* tool count, bottom right of the figure panel */
  .stxw{position:relative}
  .ixbadges{position:absolute;right:clamp(22px,2.2vw,32px);bottom:clamp(20px,2vw,28px);z-index:20;display:flex;align-items:center;gap:8px}
  .stx.dark .ixbadges{display:none}
  .ixcue{display:inline-flex;align-items:center;gap:8px;background:#00312D;color:#fff;border:0;border-radius:100px;padding:7px 9px 7px 14px;
    font:600 12px var(--font-sans);letter-spacing:-.008em;white-space:nowrap;cursor:pointer;
    box-shadow:0 1px 2px rgba(0,20,15,.16),0 8px 22px rgba(0,49,45,.18);
    transition:background .18s ease,color .18s ease,box-shadow .18s ease}
  .ixcue svg{width:12px;height:12px;color:#8FD213;transition:transform .24s var(--ease),color .2s ease}
  .ixcue:hover{background:#6EB704;color:#00312D;box-shadow:0 2px 6px rgba(110,183,4,.3),0 12px 32px rgba(110,183,4,.28)}
  .ixcue:hover svg{color:#00312D;transform:translateX(3px)}
  @media (prefers-reduced-motion:reduce){.ixcue,.ixcue svg{transition:none}}
  .ixfig .ix-plate:not(.real){width:112%;max-width:none;margin:0 -6%}
  .ixfig .ix-plate.real{width:100%;max-width:none;margin:0;align-self:stretch}
  .ixui{display:none;width:min(100%,430px);flex-direction:column;gap:12px}
  .ixui.on{display:none}
  .iu{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 8px 20px rgba(20,24,12,.06)}
  .iu-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
  .iu-h em{font-style:normal;display:inline-flex;align-items:center;gap:7px;color:var(--green-ink)}
  .iu-h em::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
  .iu-h em.w{color:#B4485A}
  .iu-h em.w::before{background:#DE5B6D}
  .iu-h span{color:var(--muted-2)}
  .iu-tasks{list-style:none;margin:10px 0 0;padding:0}
  .iu-tasks li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-2)}
  .iu-tasks li:first-child{border-top:0;padding-top:2px}
  .iu-tasks li i{flex:none;width:14px;height:14px;border-radius:5px;border:1.5px solid rgba(26,26,26,.2)}
  .iu-tasks li.done i{background:var(--green);border-color:var(--green)}
  .iu-tasks li b{flex:1;min-width:0;font:500 12.5px var(--font-sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .iu-tasks li.done b{color:var(--muted-2);text-decoration:line-through}
  .iu-tasks li u{text-decoration:none;flex:none;font:500 10px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted-2)}
  .iu p{margin:9px 0 0;font:400 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--muted)}
  .iu p b{font-weight:600;color:var(--ink)}
  .iu-sugrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}
  .iu-sugrow b{min-width:0;font:600 12.5px var(--font-sans);letter-spacing:-.012em;color:var(--ink)}
  .iu-sugrow s{text-decoration:none;flex:none;border-radius:100px;padding:5px 11px;background:var(--green-tint);color:var(--green-deep);font:600 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
  html[data-theme="dark"] .iu{background:#23251f;border-color:rgba(255,255,255,.12);box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.32)}
  html[data-theme="dark"] .iu-h em{color:#8FD213}
  html[data-theme="dark"] .iu-tasks li{border-top-color:rgba(255,255,255,.1)}
  html[data-theme="dark"] .iu-tasks li i{border-color:rgba(255,255,255,.24)}
  html[data-theme="dark"] .iu-tasks li b{color:#fff}
  html[data-theme="dark"] .iu-tasks li.done b,html[data-theme="dark"] .iu-tasks li u,html[data-theme="dark"] .iu-h span{color:rgba(255,255,255,.45)}
  html[data-theme="dark"] .iu p{color:rgba(247,246,243,.6)}
  html[data-theme="dark"] .iu p b,html[data-theme="dark"] .iu-sugrow b{color:#fff}
  html[data-theme="dark"] .stx.glass{border-color:rgba(255,255,255,.14);background:#16180F}
  html[data-theme="dark"] .stx.glass .stx-k{color:#8FD213}
  html[data-theme="dark"] .stx.glass h2{color:#fff}
  html[data-theme="dark"] .stx.glass .lede{color:rgba(247,246,243,.8)}
  html[data-theme="dark"] .stx.glass .spec-row u{color:rgba(247,246,243,.5)}
  html[data-theme="dark"] .stx.glass .spec-row b{color:#fff}
  /* the chip row now sits in the hero, the tracker black at its centre */
  .fd-hero .ix-chips{margin-top:34px}
  .ix-chip.ixkn{background:#0F120C;color:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(10,14,6,.22),0 6px 16px rgba(10,14,6,.14)}
  .ix-chip.ixkn b{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
  .ix-chip.ixkn.on b{background:var(--green);color:var(--on-green)}
  .ix-chip.ixkn:hover{background:#171C13;color:#fff}
  .ix-chip.ixkn.on{color:#fff}
  html[data-theme="dark"] .ix-chip.ixkn{background:#000}
  html[data-theme="dark"] .ix-chip.ixkn:hover{background:#0C0F09}
  /* detail sheet */
  .dsheet-back{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(20,24,12,.42);backdrop-filter:blur(3px);animation:dsFade .18s var(--ease)}
  .dsheet{position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;background:var(--card);border-radius:26px;padding:34px 36px 30px;box-shadow:var(--shadow-lg);animation:dsRise .26s var(--ease)}
  .dsheet-x{position:absolute;z-index:5;top:20px;right:20px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
  .dsheet-x:hover{color:var(--ink);border-color:var(--ink-2)}
  .dsheet-x svg{width:13px;height:13px}
  .dsheet-h{font-family:var(--font-display);font-size:27px;font-weight:600;letter-spacing:-.028em;line-height:1.1;margin:12px 0 0;color:var(--ink);max-width:24ch}
  .dsheet-lede{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:52ch}
  .dsteps{list-style:none;margin:26px 0 0;padding:0}
  .dstep{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line-2)}
  .dstep b{flex:none;font:500 10.5px var(--font-mono);letter-spacing:.14em;color:var(--green-ink);padding-top:3px}
  .dstep em{display:block;font-style:normal;font-size:15px;font-weight:560;letter-spacing:-.014em;color:var(--ink)}
  .dstep span{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:var(--muted)}
  .dsheet-note{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font:500 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  @keyframes dsFade{from{opacity:0}to{opacity:1}}
  @keyframes dsRise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.dsheet,.dsheet-back{animation:none}}
  /* a phrase in the prose that opens the comparison — reads as text, behaves as a link */
  .inlink{display:inline;border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit;color:var(--ink-2);text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3.5px;text-decoration-color:rgba(74,122,3,.5);transition:color .18s,text-decoration-color .18s}
  .inlink:hover{color:var(--green-deep);text-decoration-color:var(--green-ink)}
  .inlink svg{width:12.5px;height:12.5px;margin-left:5px;vertical-align:-1px;color:var(--green-ink);opacity:.75;transition:opacity .18s,transform .18s}
  .inlink:hover svg{opacity:1;transform:translateY(-1px)}
  .inlink:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
  html[data-theme="dark"] .inlink{color:rgba(255,255,255,.86);text-decoration-color:rgba(143,210,19,.5)}
  html[data-theme="dark"] .inlink svg{color:#8FD213}
  /* the dashboard sits on its own paper plate, cropped to a screen ratio and
     bleeding a little past the column so it reads as a view onto something larger */
  /* almost a window: hairline and top corners, no chrome, and no bottom edge — the
     view dissolves into the page instead of closing */
  .plate{position:relative;margin-top:calc(clamp(18px,3vw,44px) + 62px)}

  @media (min-width:981px){
    .plate{width:110%;margin-left:-10%}
    .feature.flip .plate{margin-left:0}
  }
  /* the dot texture in the left margin dies away as it reaches the study space shot,
     so the interface has clear paper beside it rather than grid running up to its edge */
  @media (min-width:1081px){
    #e-space .fshot{position:relative}
    #e-space .fshot::before{content:"";position:absolute;z-index:-1;top:-56px;bottom:-56px;right:calc(100% - 44px);width:360px;pointer-events:none;
      background:linear-gradient(90deg,rgba(247,246,243,0),var(--bg) 58%);
      -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
      mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
    html[data-theme="dark"] #e-space .fshot::before{background:linear-gradient(90deg,rgba(0,0,0,0),var(--bg) 58%)}
  }
  /* the study space screen, cropped just past the first row of note cards — the crop
     layer runs 32px wider than the plate on each side, so a shot nudged sideways
     keeps both its edges and only its foot is cut */
  .plate.space{margin-top:clamp(10px,2vw,26px);aspect-ratio:1.026}
  .spaceclip{position:absolute;inset:0 -32px;overflow:hidden}
  .plate.space .bareshot{position:absolute;left:32px;top:0;width:calc(100% - 64px);max-width:none;margin-left:0}
  .plate.space::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;background:linear-gradient(180deg,rgba(247,246,243,0),var(--bg) 86%)}
  .bareshot{display:block;width:100%;height:auto}
  /* 03: the GPT’s reach, drawn as the same cards used for the tools below — mono kicker,
     the capability as a claim, then the line that explains it */
  .wired{display:grid;grid-template-columns:repeat(2,1fr);align-items:start;gap:12px;margin-top:clamp(10px,2vw,22px)}
  .wc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:17px 18px 19px;background:rgba(255,255,255,.75);border:0;border-radius:22px;box-shadow:0 2px 6px rgba(20,24,12,.04),0 16px 40px rgba(20,24,12,.06)}
  html[data-theme="dark"] .wc{background:rgba(255,255,255,.05)}
  /* same hover as the group-study benefit cards: a 2px lift and a deeper cast */
  .wc{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .wc:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,24,12,.05),0 24px 54px rgba(20,24,12,.1)}
  html[data-theme="dark"] .wc:hover{box-shadow:0 4px 10px rgba(0,0,0,.2),0 24px 54px rgba(0,0,0,.26)}
  .wc-k{font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:-5px}
  .wc b{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.022em;line-height:1.15;color:var(--ink);text-wrap:balance}
  .wc p{margin:-3px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
  @media (max-width:520px){.wired{grid-template-columns:1fr}}
  /* the comparison opens from the figure itself — a cue on approach, not a button in the prose */
  .figbtn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
  .figbtn .window-cue{white-space:nowrap}
  .vsx-cta{display:flex;justify-content:center;align-items:center;margin-top:28px}
  .bn2-btn{display:inline-flex;align-items:center;gap:9px;border-radius:100px;font-family:var(--font-sans);white-space:nowrap;transition:border-color .18s,color .18s,background .18s,transform .18s,box-shadow .25s}
  .bn2-btn.ghost{height:32px;padding:0 16px;font-size:13.5px;font-weight:500;border:1px solid var(--line);background:transparent;color:var(--ink)}
  .bn2-btn.ghost:hover{border-color:transparent;color:var(--ink);background:rgba(255,255,255,.62);transform:translateY(-1px);box-shadow:0 1px 2px rgba(20,24,12,.04),0 12px 32px rgba(20,24,12,.07)}
  html[data-theme="dark"] .bn2-btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
  /* feature manifest — sits with the "available to all students" note, not with the tray:
     what every student gets, in prose, before the tray says what desk does with it */
  /* the availability note returns under the sign: dash, then the mono note */
  .avail2{display:flex;flex-direction:column;align-items:center;gap:26px;margin:-77px 0 0}
  .avail2 i{width:16px;height:1px;background:var(--green)}
  .avail2 span{font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .avail2 em{font-style:normal;color:var(--green-ink)}
  .whatis{display:flex;flex-direction:column;align-items:center;gap:18px;margin:-119px 0 69px;text-align:center;position:relative;z-index:1}
  .band-dash{display:block;width:30px;height:1px;background:var(--line);margin:-18px auto 30px}
  .whatis-k{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .whatis h2{font-size:clamp(30px,3.6vw,42px);letter-spacing:-.028em;line-height:1.06;max-width:22ch;margin:0}
  .whatis h2 .g{color:var(--green)}
  .whatis p{margin:2px 0 0;max-width:56ch;font-size:16.5px;line-height:1.62;letter-spacing:-.014em;color:var(--muted);text-wrap:pretty}
  .whatis p b{font-weight:560;color:var(--ink-2)}
  .avail2-line{margin:-6px 0 0;max-width:54ch;text-align:center;font-size:15.5px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  /* the two-promise spread: statement left, the three doors right in tray furniture,
     "and it learns with you" starting inside the first band and hanging over the tray */
  .fsum{position:relative;margin:98px 0 42px}
  /* the page's dot paper reaches into the section's own empty ground: strongest in the band
     between the two trays, a touch lighter in the space left of the structure tray */
  .fsum::before,.fsum::after{content:"";position:absolute;z-index:0;pointer-events:none;
    background-image:radial-gradient(currentColor 1.05px,transparent 1.4px);background-size:18px 18px}
  .fsum::before{left:136px;top:96px;width:min(34%,330px);bottom:150px;color:rgba(26,26,26,.07);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22% 78%,transparent),linear-gradient(90deg,#000 62%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 22% 78%,transparent),linear-gradient(90deg,#000 62%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .fsum::after{left:136px;right:0;bottom:-46px;height:150px;color:rgba(26,26,26,.062);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 46%,#000 82%,transparent),linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.62) 34%,#000 72%);
    mask-image:linear-gradient(180deg,transparent,#000 46%,#000 82%,transparent),linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.62) 34%,#000 72%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .fsum-grid,.fsum-p2{position:relative;z-index:1}
  .fsum+.bnf{margin-top:14px}
  html[data-theme="dark"] .fsum::before{color:rgba(255,255,255,.085)}
  html[data-theme="dark"] .fsum::after{color:rgba(255,255,255,.1)}
  /* the section's gutter dots stop short of the spread, whose own dot field takes over — no doubled dots */
  .value-tray.paper::before,.value-tray.paper::after{width:calc((100% - var(--maxw)) / 2 + 66px)}
  .value-tray.paper::after{background-position:100% 0}
  @media (max-width:1080px){.fsum::before,.fsum::after{display:none}}
  .fsum-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:stretch}
  .fsum-left{display:flex;flex-direction:column;padding:14px 0 0 42px}
  .fsum-k{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .fsum-k i{display:none}
  .fsum-h{font-size:clamp(26px,2.4vw,31px);letter-spacing:-.028em;line-height:1.1;margin:14px 0 0;max-width:17ch;text-wrap:balance}
  .fsum-h .g{color:var(--green)}
  .fsum-lede{margin:12px 0 0;max-width:46ch;font-size:15px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .fsum-lede b{font-weight:540;color:var(--ink-2)}
  .fsum-p2{margin-top:auto;padding-top:59px}
  .fsum-p2-line{margin:14px 0 0;max-width:60ch;font-size:15px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .fsum-mtray{display:flex;flex-direction:column;gap:9px;padding:9px;margin-right:22px;align-self:start;border-radius:24px;background:rgba(255,255,255,.62)}
  html[data-theme="dark"] .fsum-mtray{background:rgba(255,255,255,.05)}
  .fmt{display:block;border:0;text-align:left;cursor:pointer;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(20,24,12,.03),0 8px 22px rgba(20,24,12,.05);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .fmt:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,24,12,.04),0 14px 30px rgba(20,24,12,.09)}
  .fmt-k{display:block;font:500 9px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
  .fmt-h{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:-.022em;margin:8px 0 0;color:var(--ink)}
  .fmt-h .g{color:var(--green)}
  .fmt-p{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
  @media (max-width:860px){.fsum-grid{grid-template-columns:1fr;gap:30px}.fsum-left{padding-left:0}.fsum-p2{padding-top:44px}.fsum-mtray{margin-right:0}}
  /* the landing page’s frosted "Learn More" chip, verbatim */
  .learn{display:inline-flex;align-items:center;gap:8px;height:32px;margin-top:26px;padding:0 16px;border-radius:100px;font:500 13.5px var(--font-sans);letter-spacing:-.012em;color:var(--ink-2);text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 6px 16px rgba(20,24,12,.05);transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s,color .2s;position:relative;overflow:hidden;isolation:isolate}
  .learn::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:100px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .learn:hover::before{transform:scaleX(1);transition:transform .44s cubic-bezier(.16,1,.3,1)}
  .learn:hover{border-color:#fff;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 6px rgba(20,24,12,.07),0 14px 30px rgba(20,24,12,.11);transition:border-color .26s,color .26s,box-shadow .34s}
  .learn svg{width:13px;height:13px;color:var(--green-ink);transition:transform .36s cubic-bezier(.4,0,.2,1)}
  .learn:hover svg{color:var(--green);animation:flinkGo .46s cubic-bezier(.4,0,.2,1) .06s}
  @keyframes flinkGo{0%{transform:none}44%{transform:translateX(10px);opacity:0}45%{transform:translateX(-10px);opacity:0}100%{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.learn:hover svg{animation:none}.learn::before{transition:none}}
  html[data-theme="dark"] .learn{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .fsum-how{display:inline-flex;align-items:center;gap:6px;margin-top:34px;border:0;background:none;padding:0 0 3px;color:var(--muted);font:500 13.5px var(--font-sans);letter-spacing:-.008em;cursor:pointer;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
  .fsum-how:hover{color:var(--ink-2);border-bottom-color:var(--line)}
  .fsum-how svg{width:12px;height:12px;color:var(--muted-2);transition:transform .22s var(--ease),color .18s}
  .fsum-how:hover svg{color:var(--green-ink);transform:translateX(2px)}
  /* ===== "a better starting point": what each system opens on ===== */
  .dsheet-start{max-width:900px;padding:44px 44px 38px}
  .dsheet-start .dsheet-h,.dsheet-work .dsheet-h{max-width:26ch}
  .dsheet-start .dsheet-lede,.dsheet-work .dsheet-lede{max-width:62ch}
  .trip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
  .trip-c{position:relative}
  .trip-p{position:relative;height:296px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .trip-n{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .trip-n b{font-weight:560;color:var(--ink-2)}
  .db{display:flex;flex-direction:column;height:100%;padding:13px 13px 0;background:#fff}
  .db-top{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #F1F1ED}
  .db-top b{font:600 12px var(--font-sans);color:#22221f}
  .db-top i{font:500 8.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#B4B4AC}
  .db-k{margin:12px 0 6px;font:500 8.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#B4B4AC}
  .db-due{position:relative;padding:9px 10px 10px 12px;border:1px solid #F0E4CB;border-radius:10px;background:#FFFCF5}
  .db-due::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#F0A81E}
  .db-due b{display:block;font:600 11px var(--font-sans);color:#22221f;line-height:1.3}
  .db-due span{display:block;margin-top:4px;font:500 9px var(--font-mono);letter-spacing:.06em;color:#A9A9A1}
  .db-task{display:flex;align-items:center;gap:8px;padding:6px 2px;font:500 10.5px var(--font-sans);color:#5D5D56}
  .db-task i{flex:none;width:12px;height:12px;border:1.4px solid #DCDCD5;border-radius:3.5px}
  .db-task.on i{border-color:#6EB704;background:#6EB704}
  .db-foot{margin-top:auto;padding:9px 0 12px;display:flex;gap:6px}
  .db-pill{padding:4px 9px;border-radius:100px;background:#EEF6DF;font:600 9px var(--font-mono);letter-spacing:.1em;color:#3F6903}
  .db-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
  .db-av{width:26px;height:26px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .db-ask{font:600 13px var(--font-sans);color:#22221f}
  .db-comp{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;padding:8px 10px;border:1px solid #E7E7E2;border-radius:12px}
  .db-comp span{flex:1;text-align:left;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .db-comp .ic{width:13px;height:13px;color:#A9A9A1}
  .db-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
  .db-chip{padding:4px 9px;border:1px solid #EDEDE8;border-radius:100px;font:500 9.5px var(--font-sans);color:#7A7A72}
  .db-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
  .db-tile{display:flex;flex-direction:column;gap:6px;padding:9px 10px;border:1px solid #EFEFEC;border-radius:10px}
  .db-tile .ic{width:14px;height:14px;color:#A9A9A1}
  .db-tile span{font:500 9.5px var(--font-sans);color:#5D5D56;line-height:1.25}
  .db-more{margin:9px 0 12px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}
  /* ===== "a better workspace": the room you work in ===== */
  .dsheet-work{max-width:920px;padding:44px 44px 38px}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
  .duo-p{position:relative;height:344px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .wsp{display:flex;flex-direction:column;height:100%;background:#fff}
  .wsp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px 11px;border-bottom:1px solid #F3F3EF}
  .wsp-top b{font:600 12px/1.3 var(--font-sans);color:#22221f;max-width:28ch}
  .wsp-due{flex:none;padding:3px 8px;border-radius:100px;background:#FFF4E0;font:600 8.5px var(--font-mono);letter-spacing:.08em;color:#B47A08;white-space:nowrap}
  .wsp-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid #F3F3EF;overflow:hidden}
  .wsp-tabs span{padding:5px 9px;border-radius:8px;font:500 10px var(--font-sans);color:#8A8A82;background:#F7F7F4;white-space:nowrap}
  .wsp-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .wsp-b{flex:1;overflow:hidden;padding:12px 14px}
  .wsp-card{padding:10px 11px;border:1px solid #EFEFEC;border-radius:10px}
  .wsp-k{font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#B4B4AC}
  .wsp-card p{margin:6px 0 0;font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .wsp-list{display:flex;flex-direction:column;gap:6px;margin-top:11px}
  .wsp-list span{display:flex;align-items:center;gap:7px;font:500 10px var(--font-sans);color:#7A7A72}
  .wsp-list .ic{width:12px;height:12px;color:#A9A9A1}
  .cbx{display:flex;flex-direction:column;height:100%;background:#fff}
  .cbx-top{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;border-bottom:1px solid #F3F3EF}
  .cbx-top b{font:600 12px var(--font-sans);color:#22221f}
  .cbx-top .ic{width:15px;height:15px;color:#B4B4AC}
  .cbx-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;padding:12px 14px 0}
  .cbx-u{align-self:flex-end;max-width:84%;padding:7px 10px;border-radius:13px 13px 4px 13px;background:#F1F1ED;font:400 10.5px/1.45 var(--font-sans);color:#22221f}
  .cbx-a{display:flex;gap:7px}
  .cbx-a i{flex:none;width:16px;height:16px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .cbx-a p{margin:0;font:400 10.5px/1.5 var(--font-sans);color:#3d3d3b}
  .cbx-comp{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:8px 10px;border:1px solid #E7E7E2;border-radius:13px}
  .cbx-comp span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .cbx-comp .ic{width:13px;height:13px;color:#A9A9A1}
  .cbx-foot{padding:8px 14px 11px;font:500 8.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#C4C4BC;text-align:center}
  .duo-n{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .duo-n b{font-weight:560;color:var(--ink-2)}
  @media (max-width:940px){.dsheet-start,.dsheet-work{max-width:560px;padding:30px 28px 26px;max-height:86vh;overflow:auto}.trip,.duo{grid-template-columns:1fr;gap:16px}}
  /* how it's organised — 4a from the draft: three ways to arrange a degree, fanned like
     cards in a deck. Click a card or a switch row to deal it to the front. */
  .stext{position:relative;z-index:1}
  .sh-k{display:block;font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
  .sh-h{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:12px 0 0}
  .sh-h .g{color:var(--green)}
  .sh-l{font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
  .sh-l b{font-weight:560;color:var(--ink-2)}
  .note{padding-top:15px;border-top:1px solid var(--line-2);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  /* the alternative panel: an endless menu, generic */
  .altui{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .altui-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 13px;border-bottom:1px solid #EFEFEC}
  .altui-top b{font:600 13px var(--font-sans);color:#2b2b28}
  .altui-top i{width:22px;height:22px;border:1px solid #E7E7E2;border-radius:6px}
  .altui-k{margin:13px 4px 5px;font:500 8.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#B4B4AC}
  .altui-l{display:flex;flex-direction:column;gap:1px;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%)}
  .altui-r{display:flex;align-items:center;gap:9px;padding:6px;border-radius:8px;font:500 11.5px var(--font-sans);color:#7A7A72}
  .altui-r i{flex:none;width:12px;height:12px;border:1.2px solid #DCDCD5;border-radius:3px}
  .altui-r.on{background:#F3F3EF;color:#2b2b28}
  .altui-more{margin:0;padding:4px 6px 14px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}

  /* ---- 4a: three mock-ups fanned like cards in a deck; the switch deals one to the top ---- */
  .dsheet-org{max-width:720px;padding:42px 292px 38px 44px;overflow:visible}
  .dsheet-org .sh-h{font-size:27px;max-width:19ch}
  .dsheet-org .sh-l{margin:12px 0 0;max-width:38ch;min-height:104px}
  /* the switch: a stack of labelled rows, active one marked with a green rule */
  .switch{display:flex;flex-direction:column;margin:22px 0 0;border-top:1px solid var(--line-2)}
  .switch button{position:relative;display:flex;align-items:baseline;gap:10px;padding:11px 2px 11px 14px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;cursor:pointer;color:var(--muted);transition:color .18s}
  .switch button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:transparent;transition:background .18s}
  .switch button:hover{color:var(--ink-2)}
  .switch b{font:600 11px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
  .switch span{font-size:12.5px;letter-spacing:-.01em;color:var(--muted-2)}
  .switch button[data-on="true"]{color:var(--ink)}
  .switch button[data-on="true"]::before{background:var(--green)}
  .switch button[data-view="tools"][data-on="true"]::before,.switch button[data-view="chat"][data-on="true"]::before{background:#FA5252}
  .switch button[data-on="true"] span{color:var(--muted)}
  /* the deck */
  .stack{position:absolute;right:-22px;bottom:-44px;width:278px;height:492px}
  .pan{position:absolute;inset:0;cursor:pointer;background:#fff;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 8px 20px rgba(20,24,12,.09),0 34px 84px rgba(20,24,12,.16);transform-origin:50% 108%;transition:transform .42s var(--ease),opacity .3s var(--ease)}
  .pan > .altui,.pan > .chatui,.pan > .dm{overflow:hidden;border-radius:21px}
  .pan img{display:block;width:100%;height:100%;border-radius:21px}
  .pan-tag{position:absolute;z-index:5;top:-9px;right:18px;padding:3px 9px 4px;border-radius:7px;box-shadow:0 1px 3px rgba(20,24,12,.12);font:600 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
  .pan-tag-best{background:var(--green-tint);color:var(--green-deep)}
  .pan-tag-meh{background:#FDECEC;color:#D9614F}
  .pan-tag-poor{background:#F6D9D6;color:#A62D1C}
  .dsheet-org[data-view="desk"] .pan-chat,.dsheet-org[data-view="chat"] .pan-tools,.dsheet-org[data-view="tools"] .pan-desk{z-index:2;opacity:.94;transform:rotate(5.2deg)}
  .dsheet-org[data-view="desk"] .pan-tools,.dsheet-org[data-view="chat"] .pan-desk,.dsheet-org[data-view="tools"] .pan-chat{z-index:1;opacity:.86;transform:rotate(10.6deg)}
  .dsheet-org[data-view="desk"] .pan-desk,.dsheet-org[data-view="tools"] .pan-tools,.dsheet-org[data-view="chat"] .pan-chat{z-index:3;opacity:1;transform:rotate(-1.4deg);cursor:default}
  .dsheet-org[data-view="desk"] .pan-desk:hover,.dsheet-org[data-view="tools"] .pan-tools:hover,.dsheet-org[data-view="chat"] .pan-chat:hover{transform:rotate(-1.4deg) translateY(-7px);box-shadow:0 12px 26px rgba(20,24,12,.11),0 44px 100px rgba(20,24,12,.2)}
  /* a card behind lifts a little when you point at it, so it reads as dealable */
  .dsheet-org[data-view="desk"] .pan-chat:hover,.dsheet-org[data-view="chat"] .pan-tools:hover,.dsheet-org[data-view="tools"] .pan-desk:hover{opacity:1;transform:rotate(4deg) translateY(-6px)}
  .dsheet-org[data-view="desk"] .pan-tools:hover,.dsheet-org[data-view="chat"] .pan-desk:hover,.dsheet-org[data-view="tools"] .pan-chat:hover{opacity:.96;transform:rotate(9deg) translateY(-6px)}
  /* tool-menu mock */
  .altui-top .ic{width:19px;height:19px;color:#9C9C94}
  .altui-r .ic{flex:none;width:14px;height:14px;color:#A9A9A1}
  .altui-r.on .ic{color:#5D5D56}
  /* chat-history mock */
  .chatui{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .altui-new{margin-top:12px;color:#2b2b28}
  .altui-new .ic{color:#7A7A72}
  .chatui-l{display:flex;flex-direction:column;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%)}
  .chatui-k{margin:14px 4px 4px;font:500 8.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#B4B4AC}
  .chatui-r{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;font:500 11.5px var(--font-sans);color:#7A7A72;white-space:nowrap;overflow:hidden}
  .chatui-r em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
  .chatui-r.on{background:#F3F3EF;color:#2b2b28}
  /* pinned chats: kept, but plainly out of date */
  .chatui-pin{color:#B4B4AC}
  .chatui-pin .ic{flex:none;width:12px;height:12px;color:#C9C9C1}
  .chatui-pin i{margin-left:auto;font:500 8px var(--font-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#C9C9C1;white-space:nowrap}
  /* desk's list drawn in the same mock style as the other two cards */
  .dm{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .soloshot{width:380px;height:660px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:24px;box-shadow:0 8px 20px rgba(20,24,12,.09),0 34px 84px rgba(20,24,12,.16)}
  .soloshot .ui-b{padding:16px 18px 0}
  .soloshot .cb-u,.soloshot .cb-a p,.soloshot .cb-a li{font-size:12.5px}
  .soloshot .ui-top b{font-size:14px}
  .soloshot .cb-comp{margin:12px 18px 0;padding:10px 12px}
  .soloshot .cb-comp span{font-size:12.5px}
  /* ===== turn 5: the second main card, whose body is the interface itself ===== */
  .v-f{max-width:860px;padding:24px}
  .mn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:14px 12px 20px}
  .mn-head .sh-h{font-size:24px;max-width:22ch;margin-top:9px}
  .segh{display:inline-flex;gap:3px;flex:none;padding:3px;border:1px solid var(--line);border-radius:100px;background:#FBFBF9}
  .segh button{border:0;border-radius:100px;padding:7px 13px;background:transparent;color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
  .segh button:hover{color:var(--ink-2)}
  .segh button[data-on="true"]{background:var(--green-tint);color:var(--green-deep)}
  .segh button[data-view2="tool"][data-on="true"],.segh button[data-view2="chat"][data-on="true"]{background:#FDECEC;color:#C0392B}
  .app{display:none;grid-template-columns:212px 1fr;height:432px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .v-f[data-view2="space"] .app-space,.v-f[data-view2="tool"] .app-tool,.v-f[data-view2="chat"] .app-chat{display:grid}
  .app-rail{height:100%;border-right:1px solid #EFEFEC;padding-top:0}
  .app-main{display:flex;flex-direction:column;overflow:hidden}
  .mn-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px 12px;border-bottom:1px solid #F3F3EF}
  .mn-k{display:block;font:500 8.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#B4B4AC}
  .mn-top b{display:block;margin-top:4px;font:600 13px/1.3 var(--font-sans);color:#22221f;max-width:34ch}
  .mn-tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid #F3F3EF}
  .mn-tabs span{padding:5px 10px;border-radius:8px;font:500 10.5px var(--font-sans);color:#8A8A82;background:#F7F7F4;white-space:nowrap}
  .mn-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .mn-b{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden}
  .mn-b-1{display:flex;flex-direction:column;grid-template-columns:none}
  .mn-col{padding:14px 16px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
  .mn-side{border-left:1px solid #F3F3EF;background:#FCFCFA;justify-content:space-between}
  .mn-ask{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #E7E7E2;border-radius:12px;background:#fff}
  .mn-ask span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .tl-row{display:flex;align-items:flex-start;gap:12px;margin-top:2px}
  .tl-row .tl-go{margin-top:0;flex:none;padding:9px 18px}
  .tl-row .tl-note{margin-top:0}
  .app-chat .ui-b{padding:12px 16px 0}
  .app-chat .cb-comp{margin:10px 16px 0}
  /* ===== old turn-5 deck styles (kept for reference) ===== what you land in — study space / single tool / chat thread ===== */
  .v-e{max-width:760px;padding:42px 320px 38px 44px}
  .v-e .sh-h{font-size:27px;max-width:19ch}
  .v-e .sh-l{margin:12px 0 0;max-width:38ch}
  .stack2{position:absolute;right:-24px;bottom:-46px;width:300px;height:531px}
  .v-e[data-view2="space"] .pan-space,.v-e[data-view2="tool"] .pan-tool,.v-e[data-view2="chat"] .pan-cb{z-index:3;opacity:1;transform:rotate(-1.4deg);cursor:default}
  .v-e[data-view2="space"] .pan-tool,.v-e[data-view2="tool"] .pan-cb,.v-e[data-view2="chat"] .pan-space{z-index:2;opacity:.94;transform:rotate(5.2deg)}
  .v-e[data-view2="space"] .pan-cb,.v-e[data-view2="tool"] .pan-space,.v-e[data-view2="chat"] .pan-tool{z-index:1;opacity:.86;transform:rotate(10.6deg)}
  .v-e[data-view2="space"] .pan-space:hover,.v-e[data-view2="tool"] .pan-tool:hover,.v-e[data-view2="chat"] .pan-cb:hover{transform:rotate(-1.4deg) translateY(-7px)}
  .v-e[data-view2="space"] .pan-tool:hover,.v-e[data-view2="tool"] .pan-cb:hover,.v-e[data-view2="chat"] .pan-space:hover{opacity:1;transform:rotate(4deg) translateY(-6px)}
  .v-e[data-view2="space"] .pan-cb:hover,.v-e[data-view2="tool"] .pan-space:hover,.v-e[data-view2="chat"] .pan-tool:hover{opacity:.96;transform:rotate(9deg) translateY(-6px)}
  .switch button[data-view2="tool"][data-on="true"]::before,.switch button[data-view2="chat"][data-on="true"]::before{background:#FA5252}
  /* shared chrome for the three interface mocks */
  .ui{display:flex;flex-direction:column;height:100%;background:#fff}
  .ui-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 12px;border-bottom:1px solid #EFEFEC}
  .ui-top b{font:600 12.5px var(--font-sans);color:#22221f}
  .ui-top .ic{width:17px;height:17px;color:#9C9C94}
  .ui-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:12px 14px 0}
  .ui-foot{padding:8px 14px 12px;font:500 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#C4C4BC;text-align:center}
  /* 1 — desk study space */
  .sp-h{display:flex;align-items:flex-start;gap:8px}
  .sp-h b{font:600 12.5px var(--font-sans);line-height:1.3;color:#22221f}
  .sp-due{flex:none;padding:3px 8px;border-radius:100px;background:#FFF4E0;font:600 8.5px var(--font-mono);letter-spacing:.08em;color:#B47A08;white-space:nowrap}
  .sp-tabs{display:flex;gap:4px;margin:12px -1px 0;overflow:hidden}
  .sp-tabs span{padding:5px 9px;border-radius:8px;font:500 10px var(--font-sans);color:#8A8A82;background:#F5F5F1;white-space:nowrap}
  .sp-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .sp-card{margin-top:12px;padding:11px 12px;border:1px solid #EDEDE8;border-radius:11px}
  .sp-k{font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#B4B4AC}
  .sp-card p{margin:7px 0 0;font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .sp-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
  .sp-list span{display:flex;align-items:center;gap:7px;font:500 10px var(--font-sans);color:#7A7A72}
  .sp-list .ic{width:12px;height:12px;color:#A9A9A1}
  .sp-bar{display:flex;align-items:center;gap:8px;margin-top:12px;font:500 8.5px var(--font-mono);letter-spacing:.08em;color:#A9A9A1}
  .sp-bar i{flex:1;height:5px;border-radius:5px;background:#F1F1ED;overflow:hidden}
  .sp-bar i b{display:block;height:100%;width:22%;border-radius:5px;background:#6EB704}
  /* 2 — one tool, no context */
  .tl-f{margin-top:10px}
  .tl-lab{font:500 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}
  .tl-in{margin-top:5px;padding:8px 10px;border:1px solid #EAEAE5;border-radius:9px;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .tl-area{margin-top:5px;height:104px;padding:9px 10px;border:1px solid #EAEAE5;border-radius:9px;font:400 10.5px/1.5 var(--font-sans);color:#C4C4BC}
  .tl-go{margin-top:12px;padding:9px;border-radius:9px;background:#22221f;color:#fff;font:600 10.5px var(--font-sans);text-align:center}
  .tl-note{display:flex;gap:7px;margin-top:12px;padding:9px 10px;border:1px dashed #F0D6D6;border-radius:9px;font:400 9.5px/1.45 var(--font-sans);color:#C86A6A}
  /* 3 — chat thread */
  .cb-th{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;gap:12px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 100%)}
  .cb-u{align-self:flex-end;max-width:82%;padding:7px 11px;border-radius:14px 14px 4px 14px;background:#F1F1ED;font:400 10.5px/1.45 var(--font-sans);color:#22221f}
  .cb-a{display:flex;gap:8px}
  .cb-av{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .cb-a div{flex:1}
  .cb-a p{margin:0 0 6px;font:400 10.5px/1.5 var(--font-sans);color:#3d3d3b}
  .cb-a ul{margin:0 0 6px;padding-left:14px;list-style:disc}
  .cb-a li{font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .cb-a li b{font-weight:600;color:#22221f}
  .cb-tools{display:flex;gap:9px;margin-top:2px}
  .cb-tools .ic{width:12px;height:12px;color:#C4C4BC}
  .cb-typ{display:flex;gap:4px;padding:9px 0 2px}
  .cb-typ i{width:5px;height:5px;border-radius:50%;background:#D8D8D2;animation:cbDot 1.1s ease-in-out infinite}
  .cb-typ i:nth-child(2){animation-delay:.18s}
  .cb-typ i:nth-child(3){animation-delay:.36s}
  @keyframes cbDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
  .cb-comp{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:8px 10px;border:1px solid #E7E7E2;border-radius:14px;box-shadow:0 1px 2px rgba(20,24,12,.03)}
  .cb-comp span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .cb-comp .ic{width:14px;height:14px;color:#A9A9A1}
  .cb-send{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#22221f}
  .cb-send .ic{width:12px;height:12px;color:#fff}
  @media (prefers-reduced-motion:reduce){.cb-typ i{animation:none}}
  html[data-theme="dark"] .orgsw-x{}
  @media (max-width:940px),(max-height:640px){
    .dsheet-org{max-width:540px;padding:30px 30px 26px;max-height:86vh;overflow:auto}
    /* the deck flattens: the selected card sits in flow under the copy, the others drop out */
    .dsheet-org .stack{position:relative;right:auto;bottom:auto;width:100%;height:300px;margin:22px 0 0}
    .dsheet-org[data-view="desk"] .pan-desk,
    .dsheet-org[data-view="chat"] .pan-chat,
    .dsheet-org[data-view="tools"] .pan-tools{transform:none;opacity:1;cursor:default;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.07)}
    .dsheet-org[data-view="desk"] .pan-chat,.dsheet-org[data-view="desk"] .pan-tools,
    .dsheet-org[data-view="chat"] .pan-desk,.dsheet-org[data-view="chat"] .pan-tools,
    .dsheet-org[data-view="tools"] .pan-desk,.dsheet-org[data-view="tools"] .pan-chat{display:none}
    .dsheet-org .pan:hover{transform:none;opacity:1}
    .dsheet-org .pan-tag{top:-9px;right:18px}
  }

  /* a quiet way in, not a demand */
  .learn{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:7px 13px 7px 14px;border:1px solid var(--line);border-radius:100px;background:transparent;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);cursor:pointer;transition:background .18s,border-color .18s,color .18s}
  .learn:hover{background:var(--green-tint);border-color:var(--green-tint-2);color:var(--green-deep)}
  .learn svg{width:13px;height:13px}
  html[data-theme="dark"] .learn{border-color:rgba(255,255,255,.14)}
  /* the desk GPT instrument — the landing page's chat cloud in white, for interface 02 */
  /* the landing page's chat cloud, in white and at the tracker's footprint */
  .gptc{width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;
    padding:26px;background:#fff;border-radius:26px;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  .gptc-th{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;overflow:hidden;
    padding:9px 9px 0;margin:-9px -9px 0;
    -webkit-mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%)}
  .gptc-next{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}
  .gptc-next u{text-decoration:none;display:block;font:500 9.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink)}
  .gptc-next p{margin:5px 0 0;font:400 13.5px/1.6 var(--font-sans);color:var(--ink-2);text-wrap:pretty}
  html[data-theme="dark"] .gptc-next{border-top-color:rgba(255,255,255,.1)}
  html[data-theme="dark"] .gptc-next u{color:var(--green)}
  html[data-theme="dark"] .gptc-next p{color:rgba(255,255,255,.8)}
  .gptc-q{align-self:flex-end;max-width:84%;padding:9px 15px;border-radius:17px 17px 5px 17px;background:#fff;
    box-shadow:0 0 6px rgba(20,24,12,.07),0 0 18px rgba(20,24,12,.055);
    font:400 13.5px/1.5 var(--font-sans);color:#22221f}

  .gptc-a{display:flex;gap:11px;padding-right:4px}
  .gptc-a > i{flex:none;width:11px;height:11px;margin-top:6px;border-radius:50%;background:var(--green)}
  .gptc-ans{min-width:0;margin:0;font:400 13.5px/1.62 var(--font-sans);color:var(--ink-2);text-wrap:pretty}
  .gptc-ans b{color:var(--green-ink);font-weight:600}

  /* the lecturer, quoted — same voice as the answer, one weight up */
  .gptc-quote{position:relative;margin:16px 0 0;padding:14px 18px 14px 38px;border-radius:16px;background:#F7F6F2}
  .gptc-quote::before{content:"\201C";position:absolute;left:14px;top:12px;font:700 30px/1 var(--font-display);color:rgba(110,183,4,.42)}
  .gptc-quote p{margin:0;font:500 15px/1.55 var(--font-sans);letter-spacing:-.014em;color:var(--ink);text-wrap:pretty}
  .gptc-quote cite{display:flex;align-items:center;gap:8px;margin-top:9px;font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted-2)}
  .gptc-quote cite::before{content:"";flex:none;width:16px;height:1px;background:rgba(26,26,26,.2)}

  /* sources, in the landing page's green pill */
  .gptc-src{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
  .gptc-src span{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--font-mono);letter-spacing:.02em;
    color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:4.5px 11px;white-space:nowrap}
  .gptc-src svg{width:10px;height:10px}

  .gptc-bar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex:none;padding:7px 7px 7px 17px;
    border-radius:100px;background:#fff;box-shadow:0 0 6px rgba(20,24,12,.07),0 0 18px rgba(20,24,12,.055)}
  .gptc-bar span{flex:1;min-width:0;font:400 14px var(--font-sans);letter-spacing:-.01em;color:var(--muted)}
  .gptc-bar i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff}
  .gptc-bar i svg{width:14px;height:14px}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .gptc{background:#15170F;box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.42)}
  html[data-theme="dark"] .gptc-q{background:rgba(255,255,255,.13);color:#fff;box-shadow:0 0 6px rgba(0,0,0,.4),0 0 20px rgba(0,0,0,.3)}
  html[data-theme="dark"] .gptc-ans{color:rgba(255,255,255,.86)}
  html[data-theme="dark"] .gptc-ans b{color:var(--green)}
  html[data-theme="dark"] .gptc-quote{background:rgba(255,255,255,.05)}
  html[data-theme="dark"] .gptc-quote::before{color:rgba(143,210,19,.5)}
  html[data-theme="dark"] .gptc-quote p{color:#fff}
  html[data-theme="dark"] .gptc-quote cite{color:rgba(255,255,255,.5)}
  html[data-theme="dark"] .gptc-quote cite::before{background:rgba(255,255,255,.22)}
  html[data-theme="dark"] .gptc-src span{color:#A9D95E;background:rgba(143,210,19,.16)}
  html[data-theme="dark"] .gptc-bar{background:rgba(255,255,255,.07);box-shadow:0 0 6px rgba(0,0,0,.4),0 0 20px rgba(0,0,0,.3)}
  html[data-theme="dark"] .gptc-bar span{color:rgba(255,255,255,.62)}
  html[data-theme="dark"] .gptc-bar i{color:#00312D}
  /* the study-patterns instrument — the metrics tray for interface 09 */
  /* the landing page's metrics tray, rescaled to the tracker's footprint */
  .sp{width:100%;height:394px;max-height:394px;min-height:0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;gap:9px;
    padding:10px;border-radius:22px;background:rgba(255,255,255,.62);font-family:var(--font-display)}
  .sp *:not(svg):not(path):not(circle):not(line):not(rect){font-family:var(--font-display)}
  .sp-row{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:9px;min-height:0}
  .sp-row2{flex:1;display:grid;grid-template-columns:.82fr 1.18fr;gap:9px;min-height:0}
  .sp-tile{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--card);border-radius:15px;padding:13px 15px;
    box-shadow:0 1px 3px rgba(20,24,12,.04),0 10px 24px rgba(20,24,12,.05)}
  .sp-k{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .sp-k b{font:600 14px var(--font-display);letter-spacing:-.012em;color:var(--ink);text-transform:none}
  .sp-ks{font:500 8px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .sp-cap{margin:auto 0 0;padding-top:12px;font:500 10.5px/1.5 var(--font-sans);color:var(--muted);text-wrap:pretty}

  /* this week */
  .sp-bars{display:flex;justify-content:space-between;align-items:flex-end;gap:6px;flex:1;min-height:0;margin-top:12px}
  .sp-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:stretch;justify-content:flex-end}
  .sp-b i{width:100%;max-width:17px;height:var(--h);border-radius:5px;background:rgba(110,183,4,.24)}
  .sp-b.on i{background:var(--green)}
  .sp-b u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.08em;color:var(--muted-2)}

  /* peak hour */
  .sp-peak{position:relative;overflow:hidden;background:var(--dark)}
  .sp-peak::before{content:"";position:absolute;inset:0;background:radial-gradient(110px 80px at 82% 12%,rgba(255,255,255,.08),transparent 70%);pointer-events:none}
  .sp-moon{position:absolute;top:12px;right:14px;width:22px;height:22px;color:#E8E6DA;opacity:.9;filter:drop-shadow(0 0 9px rgba(232,230,218,.35))}
  .sp-s{position:absolute;border-radius:50%;background:rgba(255,255,255,.55)}
  .sp-s1{width:3px;height:3px;top:46px;right:52px;opacity:.5}
  .sp-s2{width:2px;height:2px;top:34px;right:26px;opacity:.6}
  .sp-s3{width:2px;height:2px;top:13px;right:66px;opacity:.4}
  .sp-pk{font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)}
  .sp-peak > b{font:600 30px var(--font-display);letter-spacing:-.02em;color:#fff;margin-top:5px}
  .sp-owl{display:block;margin-top:auto;padding-top:12px;font:500 10.5px/1.4 var(--font-sans);color:rgba(255,255,255,.55)}

  /* streak */
  .sp-str{justify-content:center}
  .sp-str .sp-k{margin-bottom:auto}
  .sp-str .sp-cap{margin:0}
  .sp-str-b{display:flex;align-items:baseline;gap:5px;margin-top:13px;font:600 27px var(--font-display);letter-spacing:-.022em;line-height:1;color:var(--ink)}
  .sp-str-b i{font:600 9px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .sp-wk{display:flex;gap:5px;margin-top:12px}
  .sp-wk span{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
  .sp-wk i{width:100%;height:5px;border-radius:4px;background:var(--line-2)}
  .sp-wk u{text-decoration:none;font:500 8px var(--font-mono);letter-spacing:.08em;color:var(--muted-2)}
  .sp-wk .on i{background:var(--green)}
  .sp-wk .now i{background:var(--green-tint);box-shadow:inset 0 0 0 1.5px var(--green)}
  .sp-wk .now u{color:var(--green-deep);font-weight:600}

  /* most used words */
  .sp-cloud{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;margin-top:13px;min-height:0;overflow:hidden}
  @media (max-width:1150px){.sp-cloud span:nth-child(n+5){display:none}}
  @media (max-width:1010px){.sp-cloud span:nth-child(n+4){display:none}}
  .sp-cloud span{display:inline-flex;align-items:center;gap:8px;height:29px;padding:0 6px 0 12px;border-radius:100px;
    background:rgba(26,26,26,.035);transition:background .16s}
  .sp-cloud span:hover{background:rgba(26,26,26,.06)}
  .sp-cloud span b{font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2)}
  .sp-cloud span i{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:100px;
    background:var(--green-tint);font:600 9.5px var(--font-mono);font-style:normal;letter-spacing:.04em;color:var(--green-deep)}
  html[data-theme="dark"] .sp-cloud span{background:rgba(255,255,255,.07)}
  html[data-theme="dark"] .sp-cloud span b{color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .sp-cloud span i{background:rgba(143,210,19,.18);color:#A9D95E}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .sp{background:rgba(255,255,255,.05)}
  html[data-theme="dark"] .sp-tile{background:#23251f;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.3)}
  html[data-theme="dark"] .sp-peak{background:#000}
  html[data-theme="dark"] .sp-k b,html[data-theme="dark"] .sp-str-b{color:#fff}
  /* the reader instrument — a PDF open in desk, for interface 06 */
  .pv{position:relative;width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;gap:13px;
    padding:14px 14px 0;border-radius:20px;background:#fff;overflow:hidden;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  /* chrome: type and state, not buttons */
  .pv-bar{display:flex;align-items:center;gap:5px;flex:none}
  .pv-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--muted);transition:color .16s,background .16s}
  .pv-ic:hover{background:rgba(26,26,26,.045);color:var(--ink)}
  .pv-ic svg{width:14px;height:14px}
  .pv-ic.on{background:var(--green-tint);color:var(--green-deep)}
  .pv-ic.on:hover{background:var(--green-tint);color:var(--green-deep)}
  .pv-pen{width:auto;gap:4px;padding:0 7px;display:flex;align-items:center}
  .pv-pen svg:last-child{width:9px;height:9px;opacity:.6}
  .pv-x:hover{background:rgba(222,91,109,.1);color:#C2384C}
  .pv-file{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 8px}
  .pv-file b{max-width:100%;font:500 12px var(--font-sans);letter-spacing:-.012em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-file u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

  /* the sheet — white, held by its shadow alone */
  .pv-page{position:relative;flex:1;min-height:0;overflow:hidden;padding:18px 26px 0;border-radius:7px 7px 0 0;background:#fff;
    box-shadow:0 -1px 2px rgba(20,24,12,.04),0 0 14px rgba(20,24,12,.06),0 0 36px rgba(20,24,12,.035)}
  .pv-doc{font-family:Georgia,"Times New Roman",serif;color:#26261f}
  .pv-doc h3{margin:0;text-align:center;font-weight:400;font-size:16px;letter-spacing:.005em}
  .pv-doc .pv-sub{margin:6px 0 0;text-align:center;font-style:italic;font-size:7.5px;line-height:1.5;color:#6f6f63}
  .pv-rule{height:1px;margin:11px 0 0;background:rgba(26,26,26,.09)}
  .pv-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:12px}
  .pv-doc h4{margin:0 0 5px;font-weight:400;font-size:10.5px;color:#1f1f1a}
  .pv-doc p + h4{margin-top:11px}
  .pv-doc p{margin:0;font-size:7.4px;line-height:1.62;text-align:justify;color:#3b3b33}
  .pv-doc p + p{margin-top:8px}

  /* the highlight owns the page: its note hangs off the mark itself */
  .pv-hl{position:relative}
  .pv-hl mark{background:rgba(110,183,4,.3);color:inherit;padding:1px 0}
  .pv-note{position:absolute;top:100%;left:0;margin-top:11px;display:flex;align-items:center;gap:7px;
    padding:5px 11px 5px 9px;border-radius:100px;background:#fff;white-space:nowrap;
    box-shadow:0 0 5px rgba(20,24,12,.08),0 0 18px rgba(20,24,12,.06)}
  .pv-note::before{content:"";position:absolute;left:15px;bottom:100%;width:1.5px;height:7px;border-radius:2px;background:var(--green);opacity:.55}
  .pv-note i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green)}
  .pv-note span{font:500 10px var(--font-sans);font-family:var(--font-sans);letter-spacing:-.004em;color:var(--ink-2)}

  /* one control bar, floating on the sheet */
  .pv-foot{position:absolute;left:0;right:0;bottom:15px;display:flex;justify-content:center}
  .pv-ctl{display:flex;align-items:center;gap:11px;height:31px;padding:0 11px 0 14px;border-radius:100px;background:#fff;
    box-shadow:0 0 5px rgba(20,24,12,.08),0 0 18px rgba(20,24,12,.06)}
  .pv-ctl b{font:600 11px var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .pv-ctl u{text-decoration:none;margin-left:-6px;font:500 11px var(--font-mono);color:var(--muted-2)}
  .pv-div{width:1px;height:13px;background:rgba(26,26,26,.11)}
  .pv-track{position:relative;display:block;width:54px;height:3px;border-radius:3px;background:var(--line-2)}
  .pv-track::after{content:"";position:absolute;left:23px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);
    background:var(--green);box-shadow:0 0 0 2px #fff}
  .pv-ctl em{font-style:normal;font:500 10px var(--font-mono);letter-spacing:.02em;color:var(--muted)}
  .pv-dots{display:flex;flex-direction:column;gap:2.5px;padding:0 3px}
  .pv-dots s{text-decoration:none;width:2.5px;height:2.5px;border-radius:50%;background:var(--muted-2)}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .pv{background:#15170F}
  html[data-theme="dark"] .pv-ic{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .pv-ic:hover{background:rgba(255,255,255,.08);color:#fff}
  html[data-theme="dark"] .pv-ic.on{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .pv-file b{color:#fff}
  html[data-theme="dark"] .pv-page{background:#F7F6F2;box-shadow:0 -1px 2px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.38)}
  html[data-theme="dark"] .pv-ctl,html[data-theme="dark"] .pv-note{background:#23251F;box-shadow:0 0 6px rgba(0,0,0,.45),0 0 20px rgba(0,0,0,.35)}
  html[data-theme="dark"] .pv-ctl b,html[data-theme="dark"] .pv-note span{color:#fff}
  html[data-theme="dark"] .pv-div{background:rgba(255,255,255,.14)}
  html[data-theme="dark"] .pv-track::after{box-shadow:0 0 0 2px #23251F}
  /* the conversation instrument — for interface 08 */
  .ch{position:relative;width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;
    padding:16px 22px 22px;background:#fff;border-radius:26px;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  /* chrome: who you're talking to */
  .ch-hd{display:flex;align-items:center;gap:11px;flex:none}
  .ch-who{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px}
  .ch-av{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--green-tint);
    font:600 10px var(--font-mono);letter-spacing:.04em;color:var(--green-deep)}
  .ch-who b{font:600 14px var(--font-display);letter-spacing:-.018em;color:var(--ink);white-space:nowrap}
  .ch-hd{position:relative}
  .ch-srch{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;color:var(--muted-2)}
  .ch-srch svg{width:14px;height:14px}
  html[data-theme="dark"] .ch-srch{color:rgba(255,255,255,.5)}

  /* the thread, running on behind the composer */
  .ch-th{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:0 9px 0;margin:0 -9px;
    -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.3) 93%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.3) 93%,transparent 100%)}

  .ch-b{max-width:70%;padding:9px 14px;border-radius:16px;font:400 12.5px/1.5 var(--font-sans);letter-spacing:-.01em;color:#22221f;
    box-shadow:0 0 5px rgba(20,24,12,.055),0 0 16px rgba(20,24,12,.045)}
  .ch-b.in{align-self:flex-start;border-bottom-left-radius:5px;background:#fff}
  .ch-b.out{align-self:flex-end;border-bottom-right-radius:5px;background:rgba(110,183,4,.09)}
  .ch-t{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px;
    font:500 9px var(--font-mono);letter-spacing:.04em;color:var(--muted-2)}
  .ch-t svg{width:12px;height:12px;color:var(--green)}

  /* the shared item */
  .ch-b.share{padding:9px 11px}
  .ch-file{display:flex;align-items:center;gap:10px}
  .ch-file > i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--green-tint);color:var(--green-deep)}
  .ch-file > i svg{width:15px;height:15px}
  .ch-file div{min-width:0}
  .ch-file b{display:block;font:500 12px var(--font-sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-file u{text-decoration:none;display:block;margin-top:2px;font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ch-open{flex:none;margin-left:6px;padding:5px 11px;border-radius:100px;background:var(--green);
    font:600 10px var(--font-sans);letter-spacing:.005em;color:#fff}

  /* the composer */
  .ch-bar{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:11px;height:40px;padding:0 5px 0 14px;border-radius:100px;background:#fff;
    box-shadow:0 0 6px rgba(20,24,12,.07),0 0 20px rgba(20,24,12,.055)}
  .ch-bar > svg{flex:none;width:16px;height:16px;color:var(--muted-2);transition:color .16s}
  .ch-bar:hover > svg{color:var(--ink-2)}
  .ch-bar span{flex:1;min-width:0;font:400 13.5px var(--font-sans);letter-spacing:-.01em;color:var(--muted)}
  .ch-send{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;
    box-shadow:0 1px 5px rgba(110,183,4,.35)}
  .ch-send svg{width:13px;height:13px}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .ch{background:#15170F}
  html[data-theme="dark"] .ch-who b,html[data-theme="dark"] .ch-file b{color:#fff}
  html[data-theme="dark"] .ch-av{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .ch-b.in,html[data-theme="dark"] .ch-bar{background:rgba(255,255,255,.07);box-shadow:0 0 6px rgba(0,0,0,.4),0 0 20px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ch-b{color:rgba(255,255,255,.9)}
  html[data-theme="dark"] .ch-b.out{background:rgba(110,183,4,.2)}
  html[data-theme="dark"] .ch-file > i{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .ch-bar span{color:rgba(255,255,255,.62)}
  html[data-theme="dark"] .ch-send{color:#00312D}
  @keyframes nt-caret{0%,45%{opacity:1}55%,100%{opacity:0}}
  /* the editor instrument — a note open in desk, for interface 03 */
  .nt{position:relative;width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;gap:13px;
    padding:14px 14px 0;border-radius:20px;background:#fff;overflow:hidden;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  /* chrome: format tools left, view tools right */
  .nt-bar{display:flex;align-items:center;gap:5px;flex:none}
  .nt-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--muted);transition:color .16s,background .16s}
  .nt-ic:hover{background:rgba(26,26,26,.045);color:var(--ink)}
  .nt-ic svg{width:14px;height:14px}
  .nt-ic.on{background:var(--green-tint);color:var(--green-deep)}
  .nt-ic.off{color:rgba(26,26,26,.2);pointer-events:none}
  html[data-theme="dark"] .nt-ic.off{color:rgba(255,255,255,.2)}
  .nt-div{width:1px;height:14px;margin:0 5px;background:rgba(26,26,26,.1)}
  .nt-sp{flex:1}
  .nt-x:hover{background:rgba(222,91,109,.1);color:#C2384C}
  .nt-aa{font:600 11px var(--font-mono);letter-spacing:.02em}

  /* the note */
  .nt-doc{flex:1;min-height:0;overflow:hidden;padding:6px 26px 0}
  @media (max-width:1080px){.nt-doc h4:nth-of-type(2),.nt-doc p:nth-of-type(2){display:none}}
  .nt-doc h3{margin:0;font:600 21px var(--font-display);letter-spacing:-.028em;color:var(--ink)}
  .nt-meta{display:flex;align-items:center;gap:9px;margin:7px 0 0;font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .nt-meta s{text-decoration:none;width:3px;height:3px;border-radius:50%;background:var(--line)}
  .nt-doc h4{margin:16px 0 5px;font:600 12px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .nt-doc p{margin:0;font:400 10px/1.68 var(--font-sans);letter-spacing:-.004em;color:var(--ink-2);text-wrap:pretty}
  .nt-doc p b{font-weight:600;color:var(--ink)}
  .nt-doc p em{font-style:italic}

  /* the line you're on, and what "/" opens */
  .nt-line{display:flex;align-items:center;gap:5px;margin-top:16px}
  .nt-line i{display:block;width:1.5px;height:14px;border-radius:2px;background:var(--green);animation:nt-caret 1.15s steps(1,end) infinite}
  .nt-line u{text-decoration:none;padding:1px 5px;border-radius:4px;background:rgba(26,26,26,.05);font:500 10px var(--font-mono);color:var(--muted)}
  html[data-theme="dark"] .nt-line u{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}

  .nt-menu{width:214px;margin-top:9px;margin-left:34px;padding:5px;border-radius:12px;background:#fff;
    box-shadow:0 0 6px rgba(20,24,12,.07),0 0 22px rgba(20,24,12,.07)}
  .nt-menu span{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:8px}
  .nt-menu span.on{background:var(--green-tint)}
  .nt-menu span i{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:rgba(26,26,26,.05);color:var(--muted)}
  .nt-menu span.on i{background:var(--green);color:#fff}
  .nt-menu span i svg{width:10px;height:10px}
  .nt-menu span b{flex:1;font:500 10.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2)}
  .nt-menu span.on b{color:var(--green-deep)}
  .nt-menu span u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.1em;color:var(--muted-2)}

  /* the two things that sit on the page */
  .nt-mic{position:absolute;bottom:14px;left:16px;display:grid;place-items:center;border-radius:50%;width:30px;height:30px;background:#fff;color:var(--green-deep);
    box-shadow:0 0 5px rgba(20,24,12,.07),0 0 18px rgba(20,24,12,.055)}
  .nt-mic svg{width:14px;height:14px}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .nt{background:#15170F}
  html[data-theme="dark"] .nt-ic{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .nt-ic:hover{background:rgba(255,255,255,.08);color:#fff}
  html[data-theme="dark"] .nt-ic.on{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .nt-div{background:rgba(255,255,255,.14)}
  html[data-theme="dark"] .nt-doc h3,html[data-theme="dark"] .nt-doc h4,html[data-theme="dark"] .nt-doc p b{color:#fff}
  html[data-theme="dark"] .nt-doc p{color:rgba(255,255,255,.78)}
  html[data-theme="dark"] .nt-menu,html[data-theme="dark"] .nt-mic{background:#23251F;box-shadow:0 0 6px rgba(0,0,0,.45),0 0 20px rgba(0,0,0,.35)}
  html[data-theme="dark"] .nt-menu span i{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .nt-menu span.on{background:rgba(143,210,19,.16)}
  html[data-theme="dark"] .nt-menu span.on i{background:var(--green);color:#00312D}
  html[data-theme="dark"] .nt-menu span b{color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .nt-menu span.on b{color:#A9D95E}
  html[data-theme="dark"] .nt-mic{color:#A9D95E}
  /* the library instrument — everything saved, grouped by module, for interface 07 */
  .lb{position:relative;width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;gap:13px;
    padding:16px 18px 0;background:#fff;border-radius:20px;overflow:hidden;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  .lb-hd{display:flex;align-items:center;gap:10px;flex:none}
  .lb-hd > div{flex:1;min-width:0}
  .lb-hd b{display:block;font:600 16px var(--font-display);letter-spacing:-.024em;color:var(--ink)}
  .lb-hd u{text-decoration:none;display:block;margin-top:3px;font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .lb-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--muted);transition:color .16s,background .16s}
  .lb-ic:hover{background:rgba(26,26,26,.045);color:var(--ink)}
  .lb-ic svg{width:14px;height:14px}
  .lb-add{background:var(--green);color:#fff;border-radius:50%;box-shadow:0 1px 5px rgba(110,183,4,.32)}
  .lb-add:hover{background:var(--green-deep);color:#fff}

  .lb-chips{display:flex;gap:6px;flex:none;margin-top:5px}
  .lb-chips span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:100px;
    background:rgba(26,26,26,.04);font:500 10.5px var(--font-sans);letter-spacing:-.006em;color:var(--muted);transition:background .16s,color .16s}
  .lb-chips span:hover{background:rgba(26,26,26,.07);color:var(--ink-2)}
  .lb-chips span svg{width:11px;height:11px}
  .lb-chips span.on{background:var(--green-tint);color:var(--green-deep)}
  .lb-chips span.on:hover{background:var(--green-tint);color:var(--green-deep)}

  /* the shelves, running on past the bottom edge */
  .lb-body{flex:1;min-height:0;overflow:hidden;padding:0 0 0 9px;margin:0 0 0 -9px;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.3) 94%,transparent 100%),linear-gradient(90deg,#000 88%,rgba(0,0,0,.32) 97%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.3) 94%,transparent 100%),linear-gradient(90deg,#000 88%,rgba(0,0,0,.32) 97%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .lb-grp{display:flex;align-items:baseline;gap:9px;margin:0 0 8px}
  .lb-grp + .lb-grid + .lb-grp{margin-top:15px}
  .lb-grp b{font:600 11px var(--font-display);letter-spacing:-.012em;color:var(--ink)}
  .lb-grp u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .lb-grid{display:flex;gap:9px}

  .lb-card{flex:0 0 112px;display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px 10px 10px;border-radius:12px;background:#fff;
    box-shadow:0 0 5px rgba(20,24,12,.055),0 0 15px rgba(20,24,12,.045);transition:box-shadow .18s,transform .18s}
  .lb-card:hover{box-shadow:0 0 6px rgba(20,24,12,.07),0 0 20px rgba(20,24,12,.07);transform:translateY(-1px)}
  .lb-card.lead{box-shadow:0 0 0 1.5px rgba(110,183,4,.5),0 0 7px rgba(20,24,12,.07),0 0 22px rgba(20,24,12,.075)}
  .lb-menu{position:absolute;left:122px;top:140px;width:186px;padding:5px;border-radius:12px;background:#fff;z-index:3;
    box-shadow:0 0 6px rgba(20,24,12,.08),0 0 24px rgba(20,24,12,.08)}
  .lb-menu span{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:8px}
  .lb-menu span.on{background:var(--green-tint)}
  .lb-menu span i{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:rgba(26,26,26,.05);color:var(--muted)}
  .lb-menu span.on i{background:var(--green);color:#fff}
  .lb-menu span i svg{width:10px;height:10px}
  .lb-menu span b{flex:1;font:500 10.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2)}
  .lb-menu span.on b{color:var(--green-deep)}
  .lb-menu span u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.1em;color:var(--muted-2)}
  html[data-theme="dark"] .lb-menu{background:#23251F;box-shadow:0 0 6px rgba(0,0,0,.45),0 0 22px rgba(0,0,0,.35)}
  html[data-theme="dark"] .lb-menu span i{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .lb-menu span.on{background:rgba(143,210,19,.16)}
  html[data-theme="dark"] .lb-menu span.on i{background:var(--green);color:#00312D}
  html[data-theme="dark"] .lb-menu span b{color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .lb-menu span.on b{color:#A9D95E}
  .lb-card > i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(26,26,26,.05);color:var(--muted)}
  .lb-card > i svg{width:12px;height:12px}
  .lb-card > i.d{background:var(--green-tint);color:var(--green-deep)}
  .lb-card > i.l{background:rgba(217,165,20,.16);color:#9A7509}
  .lb-card b{font:500 10.5px/1.35 var(--font-sans);letter-spacing:-.008em;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lb-card u{text-decoration:none;margin-top:-2px;font:500 8.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .lb{background:#15170F}
  html[data-theme="dark"] .lb-hd b,html[data-theme="dark"] .lb-grp b,html[data-theme="dark"] .lb-card b{color:#fff}
  html[data-theme="dark"] .lb-ic{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .lb-ic:hover{background:rgba(255,255,255,.08);color:#fff}
  html[data-theme="dark"] .lb-add{background:var(--green);color:#00312D}
  html[data-theme="dark"] .lb-chips span{background:rgba(255,255,255,.07);color:rgba(255,255,255,.62)}
  html[data-theme="dark"] .lb-chips span.on{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .lb-card{background:rgba(255,255,255,.07);box-shadow:0 0 6px rgba(0,0,0,.4),0 0 18px rgba(0,0,0,.3)}
  html[data-theme="dark"] .lb-card > i{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .lb-card > i.d{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .lb-card > i.l{background:rgba(217,165,20,.2);color:#E0C05C}
  /* the study-space instrument — the project page, for interface 01 */
  .ss{position:relative;width:100%;height:394px;max-height:394px;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;
    padding:14px 22px 0;background:#fff;border-radius:20px;overflow:hidden;
    box-shadow:0 1px 3px rgba(20,24,12,.03),0 8px 20px rgba(20,24,12,.04),0 18px 36px rgba(20,24,12,.035)}

  /* the strip: what desk knows, who's in here, when it's due */
  .ss-strip{flex:none;display:flex;align-items:center;gap:12px}
  .ss-lm{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
    .ss-lm .lmbar{flex:none;display:flex;gap:2px;width:148px;height:5px}
  .ss-lm .lmbar i{border-radius:4px}
  .ss-lm b{flex:none;font:600 8px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
  .ss-crew{flex:none;display:flex;align-items:center}
  .ss-crew i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;border:2px solid #fff;font:600 7.5px var(--font-mono);font-style:normal}
  .ss-crew i + i{margin-left:-7px}
  .ss-crew .a{background:var(--green-tint);color:var(--green-deep)}
  .ss-crew .b{background:rgba(217,165,20,.18);color:#9A7509}
  .ss-crew .c{background:rgba(26,26,26,.06);color:var(--muted)}

  /* the page head */
  .ss-hd{flex:none;margin-top:11px}
  .ss-hd-r{display:flex;align-items:center;gap:14px}
  .ss-hd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .ss-hd-meta{display:flex;align-items:baseline;gap:12px}
  .ss-hd h3{min-width:0;margin:0;font:600 17px var(--font-display);letter-spacing:-.028em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-crew .add{background:#fff;border:1.5px dashed rgba(26,26,26,.3);color:var(--muted);font-size:10px;font-weight:600}
  html[data-theme="dark"] .ss-crew .add{background:transparent;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.7)}
  .ss-hd-r em{flex:none;font-style:normal;font:500 10.5px var(--font-sans);letter-spacing:-.006em;color:var(--muted)}
  .ss-hd-r em b{font-weight:600;color:#9A7509}
  .ss-hd u{text-decoration:none;display:block;margin-top:4px;font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  html[data-theme="dark"] .ss-hd-r em b{color:#E0C05C}

  /* the GPT bar, carrying the space as context */
  .ss-cmd{flex:none;display:flex;flex-direction:column;gap:6px;margin-top:19px;padding:8px 8px 7px 12px;border-radius:16px;background:#fff;
    box-shadow:0 0 6px rgba(20,24,12,.07),0 0 20px rgba(20,24,12,.06)}
  .ss-cmd-r{display:flex;align-items:center;gap:9px}
  .ss-ctx{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:100px;background:var(--green-tint);
    font:600 8px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
  .ss-ctx svg{width:9px;height:9px}
  .ss-cmd-ctx{display:flex;align-items:center;gap:6px;padding-left:1px}
  .ss-cmd-ctx > s{text-decoration:none;flex:1}
  .ss-cmd-ctx > em{flex:none;display:grid;place-items:center;width:14px;height:14px;color:var(--ink-2)}
  .ss-cmd-ctx > em svg{width:12px;height:12px}
  html[data-theme="dark"] .ss-cmd-ctx > em{color:rgba(255,255,255,.75)}
  .ss-cmd-r > span{flex:1;min-width:0;font:400 11.5px/1.45 var(--font-sans);letter-spacing:-.008em;color:var(--muted-2)}
  .ss-cmd span b{font-weight:500;color:var(--green-ink)}
  .ss-cmd-ctx > i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
    box-shadow:0 1px 4px rgba(110,183,4,.3)}
  .ss-cmd-ctx > i svg{width:11px;height:11px}

  .ss-tray{flex:none;margin:26px -10px 0;padding:11px 0 40px 10px;border-radius:14px 14px 0 0;background:rgba(26,26,26,.014)}
  /* section cards: tap targets that jump to a section of the space */
  .ss-navrow{flex:none;display:flex;gap:8px;margin:12px 14px 0 0}
  .ss-nav{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;background:#fff;
    box-shadow:0 1px 2px rgba(20,24,12,.04),0 4px 12px rgba(20,24,12,.05);cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
  .ss-nav:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(20,24,12,.05),0 8px 18px rgba(20,24,12,.08)}
  .ss-nav i{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:6px}
  .ss-nav i svg{width:9.5px;height:9.5px}
  .ss-nav i.t{background:var(--green-tint);color:var(--green-deep)}
  .ss-nav i.m{background:rgba(217,165,20,.18);color:#9A7509}
  .ss-nav i.n{background:rgba(26,26,26,.06);color:var(--ink-2)}
  .ss-nav b{font:600 9px var(--font-sans);letter-spacing:-.004em;color:var(--ink);white-space:nowrap}
  .ss-nav u{text-decoration:none;margin-left:auto;font:500 7px var(--font-mono);color:var(--muted-2)}
  html[data-theme="dark"] .ss-nav{background:#23251f;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ss-nav b{color:rgba(255,255,255,.85)}
  html[data-theme="dark"] .ss-nav i.n{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
  .ss-tray .ss-k:first-child{margin-top:0}
  html[data-theme="dark"] .ss-tray{background:rgba(255,255,255,.022)}
  .ss-k{flex:none;display:flex;align-items:baseline;gap:9px;margin:15px 0 9px;font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .ss-k em{font-style:normal;font-weight:500;letter-spacing:.1em;opacity:.75}

  /* both shelves: same card footprint, shadows given room to bleed */
  /* the shelf sits flush with the task list: same width, no bleed past the card */
  .ss-shelf{flex:none;display:flex;gap:10px;padding:9px;margin:-9px 5px -9px -9px}
  .ss-card{flex:1 1 0;height:84px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;min-width:0;
    padding:11px 13px;border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(20,24,12,.04),0 4px 12px rgba(20,24,12,.05)}
  .ss-card b{display:flex;align-items:center;gap:7px;font:600 10.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-card b s{text-decoration:none;flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font:600 6.5px var(--font-mono);font-style:normal}
  .ss-card b .a{background:var(--green-tint);color:var(--green-deep)}
  .ss-card b .bb{background:rgba(217,165,20,.18);color:#9A7509}
  .ss-card p{margin:0;font:400 8.5px/1.5 var(--font-sans);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ss-card u{text-decoration:none;margin-top:auto;font:500 7.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

  /* the to-do note */
  .ss-todo{display:flex;flex-direction:column;gap:3px;margin-top:0}
  .ss-todo span{display:flex;align-items:center;gap:6px;font:400 9px var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-todo span s{text-decoration:none;flex:none;display:grid;place-items:center;width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.2px rgba(26,26,26,.22)}
  .ss-todo span s svg{width:7px;height:7px;color:#fff;opacity:0}
  .ss-todo span.done s{background:var(--green);box-shadow:none}
  .ss-todo span.done s svg{opacity:1}
  .ss-todo span.done{color:var(--muted-2);text-decoration:line-through}
  /* the task list — one row per task: check, title, schedule, assignee */
  .ss-tasks{flex:none;display:flex;flex-direction:column;margin:0 14px 0 0;padding:3px 13px;border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(20,24,12,.04),0 4px 12px rgba(20,24,12,.05)}
  .ss-task{display:flex;align-items:center;gap:7px;padding:5px 0;border-top:1px solid var(--line-2)}
  .ss-task:first-child{border-top:0}
  .ss-task s{text-decoration:none;flex:none;display:grid;place-items:center;width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.2px rgba(26,26,26,.22)}
  .ss-task s svg{width:7px;height:7px;color:#fff;opacity:0}
  .ss-task.done s{background:var(--green);box-shadow:none}
  .ss-task.done s svg{opacity:1}
  .ss-task b{flex:1;min-width:0;font:500 9.5px var(--font-sans);letter-spacing:-.006em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ss-task.done b{color:var(--muted-2);font-weight:400;text-decoration:line-through}
  .ss-task u{text-decoration:none;flex:none;font:500 7px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .ss-task u.op{opacity:.6}
  .ss-task i{flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;font:600 6px var(--font-mono);font-style:normal}
  .ss-task i.a{background:var(--green-tint);color:var(--green-deep)}
  .ss-task i.bb{background:rgba(217,165,20,.18);color:#9A7509}
  .ss-task i.un{border:1px dashed rgba(26,26,26,.28)}
  .ss-t-crew{flex:none;display:inline-flex}
  .ss-t-crew i{box-shadow:0 0 0 1.5px #fff}
  .ss-t-crew i:not(:first-child){margin-left:-4px}
  .ss-t-crew i.c,.ss-task i.c{background:rgba(26,26,26,.08);color:var(--ink-2)}
  html[data-theme="dark"] .ss-t-crew i{box-shadow:0 0 0 1.5px #23251f}
  html[data-theme="dark"] .ss-t-crew i.c{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
  html[data-theme="dark"] .ss-tasks{background:#23251f;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ss-task{border-top-color:rgba(255,255,255,.09)}
  html[data-theme="dark"] .ss-task s{box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.3)}
  html[data-theme="dark"] .ss-task.done s{background:var(--green);box-shadow:none}
  html[data-theme="dark"] .ss-task.done s svg{color:#00312D}
  html[data-theme="dark"] .ss-task b{color:rgba(255,255,255,.85)}
  html[data-theme="dark"] .ss-task.done b{color:rgba(255,255,255,.45)}
  html[data-theme="dark"] .ss-task i.a{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .ss-task i.bb{background:rgba(217,165,20,.2);color:#E0C05C}
  html[data-theme="dark"] .ss-task i.un{border-color:rgba(255,255,255,.3)}

  /* article cards, same shape as the notes */
  .ss-card.art{gap:6px}
  .ss-card.art > i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px}
  .ss-card.art > i svg{width:12px;height:12px}
  .ss-card.art > i.d{background:var(--green-tint);color:var(--green-deep)}
  .ss-card.art > i.l{background:rgba(217,165,20,.16);color:#9A7509}
  .ss-card.art b{font-weight:500}

  html[data-theme="dark"] body{background:#111309}
  html[data-theme="dark"] .ss{background:#15170F}
  html[data-theme="dark"] .ss-hd h3,html[data-theme="dark"] .ss-card b{color:#fff}
  html[data-theme="dark"] .ss-crew i{border-color:#15170F}
  html[data-theme="dark"] .ss-crew .c{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .ss-lm b{color:#A9D95E}
  html[data-theme="dark"] .ss-cmd,html[data-theme="dark"] .ss-card{background:rgba(255,255,255,.07);box-shadow:0 1px 3px rgba(0,0,0,.35),0 5px 14px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ss-ctx{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .ss-cmd span b{color:#A9D95E}
  html[data-theme="dark"] .ss-cmd-ctx > i{color:#00312D}
  html[data-theme="dark"] .ss-card p{color:rgba(255,255,255,.55)}
  html[data-theme="dark"] .ss-card b .a,html[data-theme="dark"] .ss-card.art > i.d{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .ss-card b .bb,html[data-theme="dark"] .ss-card.art > i.l{background:rgba(217,165,20,.2);color:#E0C05C}
  html[data-theme="dark"] .ss-todo span{color:rgba(255,255,255,.8)}
  html[data-theme="dark"] .ss-todo span s{box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.3)}
  html[data-theme="dark"] .ss-todo span.done s svg{color:#00312D}
  /* the schedule instrument — the calendar diagram for interface 04 */
  .cal{width:100%;background:#fff;border-radius:18px;padding:14px 14px 17px;font-family:var(--font-sans);
    box-shadow:0 1px 2px rgba(20,24,12,.05),0 10px 26px rgba(20,24,12,.07)}
  .cal-h{display:flex;align-items:center;gap:9px;padding:0 2px 20px}
  .cal-nav{display:inline-flex;align-items:center;gap:7px}
  .cal-nav i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;color:var(--muted-2);transition:background .16s,color .16s}
  .cal-nav i:hover{background:rgba(26,26,26,.05);color:var(--ink)}
  .cal-nav i svg{width:11px;height:11px}
  .cal-nav b{font:600 14px var(--font-display);letter-spacing:-.018em;color:var(--ink);white-space:nowrap}
  .cal-today{font-size:12px;font-weight:500;color:var(--muted-2);padding:4px 9px;border-radius:100px;transition:background .16s,color .16s}
  .cal-today:hover{background:var(--green-tint);color:var(--green-deep)}

  .cal-dow,.cal-week{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
  .cal-dow span{padding:0 8px 4px;text-align:right;font:500 9.5px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
  .cal-day{display:flex;flex-direction:column;gap:4px;min-height:150px;padding:3px 6px 9px;min-width:0;border-radius:13px}
  .cal-day.today{background:linear-gradient(180deg,rgba(110,183,4,.075),rgba(110,183,4,.015))}
  .cal-day u{text-decoration:none;align-self:flex-end;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-bottom:3px;border-radius:100px;
    background:#fff;box-shadow:0 1px 1.5px rgba(20,24,12,.05),0 1px 4px rgba(20,24,12,.035);
    font-size:11.5px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .cal-day u.now{background:var(--green);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(63,105,3,.16),0 2px 7px rgba(110,183,4,.25)}
  .cal-day.off u,.cal-day.off .ce{opacity:.42}
  .cal-day.past .ce{opacity:.5}
  .cal-day.past u{color:var(--muted-2)}
  html[data-theme="dark"] .cal-day.today{background:linear-gradient(180deg,rgba(143,210,19,.1),rgba(143,210,19,.02))}

  .ce{display:flex;align-items:center;gap:6px;min-width:0;height:24px;padding:0 9px;border-radius:100px;
    background:#fff;box-shadow:0 1px 1.5px rgba(20,24,12,.045),0 1px 3px rgba(20,24,12,.03);
    font-size:10.5px;line-height:1.4;color:var(--ink);transition:box-shadow .16s,transform .16s}
  .ce:hover{box-shadow:0 1px 2px rgba(20,24,12,.07),0 3px 8px rgba(20,24,12,.06)}
  .ce > s{text-decoration:none;flex:none;width:6px;height:6px;border-radius:50%;background:var(--bar,var(--green))}
  .ce i{font-style:normal;flex:none;color:rgba(26,26,26,.5);font-variant-numeric:tabular-nums}
  .ce b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ce svg{width:11px;height:11px;flex:none;margin:0 -2.5px;color:var(--green)}
  .ce.done i,.ce.done b{text-decoration:line-through;color:var(--muted-2)}
  .ce.done svg{color:var(--muted-2)}
  .ce.more{justify-content:center;background:none;box-shadow:none;font-size:10px;font-weight:500;color:var(--muted-2)}
  .ce.more:hover{box-shadow:none;color:var(--ink-2)}

  html[data-theme="dark"] .cal{background:#0e100c;box-shadow:0 2px 6px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.4)}
  html[data-theme="dark"] .cal-nav b{color:#fff}
  html[data-theme="dark"] .cal-day u{background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.35)}
  html[data-theme="dark"] .cal-day u.now{background:var(--green);color:#00312D}
  html[data-theme="dark"] .ce{color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);box-shadow:0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
  html[data-theme="dark"] .ce:hover{background:rgba(255,255,255,.11);box-shadow:0 1px 3px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.35)}
  html[data-theme="dark"] .ce i{color:rgba(255,255,255,.5)}
  html[data-theme="dark"] .ce.more{background:none;box-shadow:none;color:rgba(255,255,255,.45)}

  /* the knowledge tracker instrument, ported from the landing page */
  .ktk{position:relative;background:#141611;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px 22px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 5px rgba(20,24,12,.1),0 8px 18px rgba(20,24,12,.16),0 34px 72px rgba(20,24,12,.3);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  .ktk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:600 10.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
  .ktk-h em{font-style:normal;color:#8FD213}
  .ktk-h span{color:rgba(255,255,255,.32)}
  .ktk-mod{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:9px}
  .ktk-mod b{font:600 21px var(--font-display);letter-spacing:-.02em;color:#fff;transition:opacity .42s var(--ease),transform .42s var(--ease)}
  .ktk-bar{display:flex;gap:3px;height:6px;margin-top:12px}
  .ktk-bar i{border-radius:4px;transition:width .8s var(--ease)}
  .ktk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;min-height:30px;align-content:flex-start;transition:opacity .42s var(--ease) .07s,transform .42s var(--ease) .07s}
  .ktk-chips .kchip{cursor:pointer;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.13);background:none;border-radius:100px;padding:6px 12px;font:500 12px var(--font-sans);letter-spacing:-.008em;color:rgba(255,255,255,.88);transition:background .2s ease,border-color .2s ease}
  .ktk-chips .kchip:hover{border-color:rgba(255,255,255,.3)}
  .ktk-chips .kchip.on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34)}
  .ktk-chips .kchip i{flex:none;width:8px;height:8px;border-radius:50%}
  .ktk-chips .kchip s{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:1px;flex:none}
  .ktk-chips .kchip s svg{width:11px;height:11px}
  .ktk-chips .kchip s.up{color:#8FD213}
  .ktk-chips .kchip s.down{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(226,113,127,.16);color:#E2717F;font:700 9px var(--font-sans)}
  .ktk-det{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
  .ktk-det h5{margin:0;display:flex;align-items:center;gap:8px;font:600 14.5px var(--font-display);letter-spacing:-.014em;color:#fff;transition:opacity .42s var(--ease) .12s,transform .42s var(--ease) .12s}
  .ktk-det h5 span{color:rgba(255,255,255,.4);font-size:14px}
  .ktk-det p{margin:8px 0 0;font:400 12px/1.55 var(--font-sans);color:rgba(255,255,255,.66);text-wrap:pretty;height:56px;overflow:hidden;transition:opacity .42s var(--ease) .17s,transform .42s var(--ease) .17s}
  .ktk-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:12px}
  .ktk-foot u{text-decoration:none;font:600 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32)}
  .ktk-cta{display:inline-flex;align-items:center;gap:7px;border-radius:100px;padding:8px 15px;font:600 12px var(--font-sans);letter-spacing:-.008em;color:#1E1A0C;background:#E0AE3C;text-decoration:none;cursor:default;white-space:nowrap}
  .ktk-cta svg{width:12px;height:12px}
  .ktk.sw .ktk-mod b,.ktk.sw .ktk-chips,.ktk.sw .ktk-det h5,.ktk.sw .ktk-det p{opacity:0;transform:translateY(5px);transition-duration:.2s;transition-delay:0s}
  .kn-dots{display:inline-flex;gap:5px;text-decoration:none}
  .kn-dots i{width:6px;height:6px;border-radius:100px;background:rgba(255,255,255,.2);transition:background .3s ease,width .3s ease;display:inline-block}
  .kn-dots i.on{background:#8FD213;width:16px}
  /* the single word that opens the walkthrough, standing on a hairline shelf with a
     few books at either end of it */
  .seqline{position:relative;max-width:min(470px,100%);margin:-14px auto 44px;padding-bottom:0;border-bottom:1px solid var(--line)}
  .seqw{margin:0 0 -6px;text-align:center;font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.032em;line-height:1;color:var(--ink)}
  .seqbk{position:absolute;bottom:0;width:min(96px,13vw);height:auto;display:block;color:rgba(26,26,26,.22);pointer-events:none}
  .seqbk-l{left:0}
  .seqbk-r{right:0}
  html[data-theme="dark"] .seqbk{color:rgba(255,255,255,.2)}
  @media (max-width:620px){.seqbk{display:none}}
  /* tier headers: one line that says what this group of features is */
  .tierh{display:flex;align-items:baseline;gap:16px;margin:0 0 34px}
  .tierh b{font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);flex:0 0 auto}
  .tierh i{font-style:normal;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
  /* the rule is the shelf: a few books stand on the end of it */
  .tierh span{position:relative;flex:1 0 132px;height:1px;background:var(--line);align-self:center}
  .tierh span svg{position:absolute;right:0;bottom:0;width:min(118px,15vw);height:auto;display:block;color:rgba(26,26,26,.22);pointer-events:none}
  html[data-theme="dark"] .tierh span svg{color:rgba(255,255,255,.2)}
  /* section rail — quick jump plus a read of what the page holds */
  @media (max-width:900px){.tierh span svg{display:none}}
  /* tier 3 — the index: every tool in the system, grouped, a line each. Built to take
     about thirty entries without the section growing a second layout */
  .tix{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 34px;margin-top:4px}
  @media (max-width:1040px){.tix{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.tix{grid-template-columns:1fr}}
  .tix-g>b{display:block;font:600 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink);padding-bottom:10px;border-bottom:1px solid var(--line)}
  .tix-g ul{list-style:none;margin:0;padding:0}
  .tix-g li{padding:11px 0 12px;border-bottom:1px solid var(--line-2);scroll-margin-top:90px}
  .tix-g li b{display:block;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}
  .tix-g li span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted);text-wrap:pretty}
  html[data-theme="dark"] .tix-g>b{color:#8FD213}
  /* tier 1 — the two rooms, in the landing page rhythm */
  .fseq .feature + .feature{margin-top:112px}
  .fnum{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .fnum i{font:600 11px var(--font-mono);font-style:normal;letter-spacing:.14em;color:var(--green-ink)}
  .fnum span{flex:1;height:1px;background:var(--line)}
  .fpts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .fpts li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .fpts li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--green-tint)}
  .fpts li::after{content:"";position:absolute;left:4.5px;top:7.5px;width:6px;height:6px;border-radius:50%;background:var(--green)}
  .fpts li b{font-weight:600;color:var(--ink)}
  .shotlab{position:absolute;inset:0;display:grid;place-items:center;font:500 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  /* group study, folded away until asked for */
  .gs{margin-top:26px}
  .gs summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font:600 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:100px;padding:6px 13px;transition:background .18s}
  .gs summary::-webkit-details-marker{display:none}
  .gs summary:hover{background:var(--green-tint-2)}
  .gs summary svg{width:12px;height:12px;transition:transform .22s var(--ease)}
  .gs[open] summary svg{transform:rotate(45deg)}
  .gs p{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);background:var(--green-tint);border-radius:14px;padding:13px 15px;max-width:46ch}
  html[data-theme="dark"] .gs summary{background:rgba(110,183,4,.14);border-color:rgba(110,183,4,.22);color:#CDE59F}
  html[data-theme="dark"] .gs p{background:rgba(110,183,4,.1);color:#d8e8bd}
  /* slim close */
  .endband{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--dark);color:#fff;border-radius:var(--radius-lg);padding:32px 38px}
  .endband h2{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.022em;margin:0}
  .endband p{margin:9px 0 0;font-size:14.5px;color:#b9bbb1;max-width:54ch}
  .endband .btn-cta{background:#242720;flex:0 0 auto}
  .endband .btn-cta:hover{background:#6EB704}
  .fd-when{margin:24px 0 0;text-align:center;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .fd-when a{color:var(--green-ink)}
  @media (max-width:900px){.fseq .feature,.fseq .feature.flip{grid-template-columns:1fr;gap:38px}.fseq .feature.flip .feat-text{order:0;margin-left:0}.fseq .feature + .feature{margin-top:76px}}
  @media (max-width:620px){.endband{flex-direction:column;align-items:flex-start;padding:28px 26px}}
  /* both product shots sit where they were hand-placed and sized */
  .bareshot[data-shot]{transform-origin:50% 0}
  .bareshot[data-shot="dashboard"]{transform:translate(-12px,23px) scale(.886)}
  .bareshot[data-shot="space"]{transform:translate(-40px,43px) scale(.87)}
  .fseq .feature{align-items:center}
  .tr-txt{min-width:0}
  .tr-k{display:flex;align-items:center;gap:9px;font:600 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
  .tr-k b{font-weight:600;color:var(--muted-2)}
  .tr h3{font-family:var(--font-display);font-size:clamp(23px,2.5vw,31px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:15px 0 0;color:var(--ink);text-wrap:balance}
  .tr h3 .g{color:var(--green)}
  .tr-p{margin:14px 0 0;max-width:44ch;font-size:14.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
  .tr-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
  .tr-chips span{font:500 11px var(--font-mono);letter-spacing:.01em;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:100px;padding:5px 11px}
  html[data-theme="dark"] .tr-chips span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
  .tr-fig{min-width:0}
  .tr-shot{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 12px 28px rgba(20,24,12,.07)}
  /* mocked components: enough of a tool to recognise it, never a full screen */
  .mset{display:grid;gap:10px}
  @media (min-width:780px){.mset{grid-template-columns:1fr 1fr}}
  .mck,.chat{background:var(--bg);border:1px solid var(--line-2);border-radius:16px;padding:14px 15px 13px}
  html[data-theme="dark"] .mck,html[data-theme="dark"] .chat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .mck-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .mck-h b{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
  .mck-h u{text-decoration:none;font:500 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .mck ul{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  .mck li{display:flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:-.008em;color:var(--ink-2)}
  .mck li i{position:relative;flex:none;width:13px;height:13px;border:1.4px solid var(--line);border-radius:4px}
  .mck li.done{color:var(--muted-2);text-decoration:line-through;text-decoration-color:var(--line)}
  .mck li.done i{background:var(--green);border-color:var(--green)}
  .mck li.done i::after{content:"";position:absolute;left:3.4px;top:1.4px;width:3.6px;height:6.6px;border:1.6px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
  .mck li em{margin-left:auto;flex:none;font-style:normal;font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .mck li s{flex:none;width:42px;text-decoration:none;font:500 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink)}
  .chat-q{display:flex;align-items:center;gap:9px;margin:0;background:var(--card);border:1px solid var(--line-2);border-radius:100px;padding:10px 15px;font-size:13px;letter-spacing:-.01em;color:var(--ink);box-shadow:0 1px 2px rgba(20,24,12,.03)}
  html[data-theme="dark"] .chat-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
  .chat-q s{flex:none;text-decoration:none;font:600 10px var(--font-mono);color:var(--green-ink);background:var(--green-tint);border-radius:5px;padding:2px 5px}
  .chat-a{margin-top:12px;padding-left:2px}
  .chat-a p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
  .cites{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
  .cites span{font:500 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:100px;padding:4px 9px}
  html[data-theme="dark"] .cites span{background:rgba(110,183,4,.12);border-color:rgba(110,183,4,.2);color:#CDE59F}
  .chat-f{display:flex;align-items:center;gap:8px;margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line-2);font:500 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .chat-f b{color:#B8860B}
  html[data-theme="dark"] .chat-f{border-color:rgba(255,255,255,.08)}
  html[data-theme="dark"] .chat-f b{color:#D9A514}
  @media (max-width:900px){.fseq .feature{grid-template-columns:1fr;gap:30px}.fseq .feature+.feature{margin-top:64px}.feature.flip .feat-text{order:0}}