@charset "UTF-8";
/* index.html page styles, moved out of the document head (build-static) */
  /* ===== vs chatbots — ported 1a (ledger + live example) ===== */
  .lg{max-width:860px;margin:46px auto 0}
  .lg-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
  .lg-head .hc{display:flex;align-items:flex-end;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .lg-head .hc span{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:-.014em;color:var(--muted);line-height:1}
  .lg-head .hc-desk{border-bottom:2px solid var(--green);padding-bottom:11px}
  .lg-head img{height:16px;width:auto;display:block}
  .lg-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:15px 2px;border-bottom:1px solid var(--line-2)}
  .lg-row p{margin:0;font-size:14.5px;line-height:1.55}
  .lg-row .n{color:var(--muted);display:flex;gap:11px;align-items:baseline}
  .lg-row .n i{font-style:normal;flex:none;color:var(--muted-2);font-weight:600;width:13px}
  .lg-row .y{color:var(--ink-2);display:flex;gap:11px;align-items:baseline}
  .lg-row .y i{font-style:normal;flex:none;color:var(--green-deep);font-weight:600;width:13px}
  .lg-row .y b{font-weight:560;color:var(--ink)}
  /* .lg-row: a drawn rule per row, not one line stamped 5 times */
  .lg-row{border-bottom:0;position:relative}
  .lg-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--line-2);pointer-events:none}
  .lg-row:nth-of-type(5n+1)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.6Q150 2.8 340 3.7Q540 4.6 740 3.5Q940 2.6 1200 3.9' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.6Q150 2.8 340 3.7Q540 4.6 740 3.5Q940 2.6 1200 3.9' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .lg-row:nth-of-type(5n+2)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q120 4.8 290 3.8Q430 2.9 520 3.4' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M534 3.45Q700 4.3 900 3.3Q1060 2.6 1200 3.5' fill='none' stroke='%23fff' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q120 4.8 290 3.8Q430 2.9 520 3.4' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M534 3.45Q700 4.3 900 3.3Q1060 2.6 1200 3.5' fill='none' stroke='%23fff' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .lg-row:nth-of-type(5n+3)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.3Q90 2.7 190 3.5' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3Cpath d='M204 3.55Q360 4.4 520 3.4Q640 2.7 700 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M714 3.15Q900 2.6 1060 3.7Q1140 4.3 1200 3.9' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.3Q90 2.7 190 3.5' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3Cpath d='M204 3.55Q360 4.4 520 3.4Q640 2.7 700 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M714 3.15Q900 2.6 1060 3.7Q1140 4.3 1200 3.9' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .lg-row:nth-of-type(5n+4)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2Q200 3.2 420 4.1Q620 4.9 780 3.8' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M794 3.75Q960 3 1200 4.2' fill='none' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2Q200 3.2 420 4.1Q620 4.9 780 3.8' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M794 3.75Q960 3 1200 4.2' fill='none' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .lg-row:nth-of-type(5n+5)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5Q110 4.3 250 3.4Q380 2.6 470 3.2' fill='none' stroke='%23fff' stroke-width='0.95' stroke-linecap='round'/%3E%3Cpath d='M486 3.25Q640 2.6 790 3.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M806 3.65Q980 4.5 1200 3.4' fill='none' stroke='%23fff' stroke-width='0.75' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5Q110 4.3 250 3.4Q380 2.6 470 3.2' fill='none' stroke='%23fff' stroke-width='0.95' stroke-linecap='round'/%3E%3Cpath d='M486 3.25Q640 2.6 790 3.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M806 3.65Q980 4.5 1200 3.4' fill='none' stroke='%23fff' stroke-width='0.75' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  /* one step darker for the one section that argues rather than shows — clean edges */
  .band-step{position:relative;background:#F1F0EA}
  /* the ground steps up behind the closing line above, so the change lands on the claim */
  .band-step.paper::after{display:none}
  /* .paper's own ::after is taken by the step above, so the right gutter is a real element */
  .bs-rt{position:absolute;top:0;bottom:0;right:0;z-index:0;pointer-events:none;width:calc((100% - var(--maxw)) / 2 + 168px);
    background-image:var(--paper);
    -webkit-mask-image:var(--paper-in-r),var(--paper-v);mask-image:var(--paper-in-r),var(--paper-v);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  /* the graph ground is fainter than the page's other papers, arrives over a long fade and
     dissolves inward rather than stopping on a line */
  .band-step.paper-graph::before,.band-step.paper-graph .bs-rt{color:rgba(26,26,26,.02)}
  html[data-theme="dark"] .band-step.paper-graph::before,html[data-theme="dark"] .band-step.paper-graph .bs-rt{color:rgba(255,255,255,.022)}
  #values.paper-dots{--paper-v:linear-gradient(180deg,transparent 0,#000 20%,#000 66%,transparent 88%)}
  /* the hero's ruling now starts at the very top edge rather than a third of the way down, so
     the paper introduces itself in both top corners. It stays weakest where the headline is and
     builds as it descends; the diagonal wedge keeps the top rules short, hugging the corners. */
  .hero.paper{--paper-v:linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.82) 7%,rgba(0,0,0,.45) 18%,rgba(0,0,0,.6) 27%,#000 38%,#000 calc(100% - 356px),transparent calc(100% - 314px))}
  #about.paper-ruled::before,#about.paper-ruled::after{color:rgba(26,26,26,.017)}
  html[data-theme="dark"] #about.paper-ruled::before,html[data-theme="dark"] #about.paper-ruled::after{color:rgba(255,255,255,.022)}
  #about.paper-ruled::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  #about.paper-ruled::after{
    -webkit-mask-image:linear-gradient(270deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);
    mask-image:linear-gradient(270deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .band-step.paper-graph::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,transparent 0 3%,rgba(0,0,0,.5) 15%,#000 32%,#000 74%,transparent 90%);
    mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,transparent 0 3%,rgba(0,0,0,.5) 15%,#000 32%,#000 74%,transparent 90%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .band-step.paper-graph .bs-rt{
    -webkit-mask-image:linear-gradient(270deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,transparent 0 3%,rgba(0,0,0,.5) 15%,#000 32%,#000 74%,transparent 90%);
    mask-image:linear-gradient(270deg,#000 0 44%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.25) 90%,transparent 100%),linear-gradient(180deg,transparent 0 3%,rgba(0,0,0,.5) 15%,#000 32%,#000 74%,transparent 90%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  html[data-theme="dark"] .band-step{background:#191b16}
  /* the professor's bookshelf: pencil work astride the step into the chatbot band —
     drawn by the same hand as the features-page sketches; one green spine */
  .shelf-break{position:relative;z-index:1;width:min(480px,62vw);margin:-92px auto 22px;pointer-events:none;color:rgba(26,26,26,.22);
    -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
  .shelf-break svg{display:block;width:100%;height:auto}
  html[data-theme="dark"] .shelf-break{color:rgba(255,255,255,.2)}
  @media (max-width:900px){.shelf-break{display:none}}
  /* sketch objects standing on the footer hairline, page left — same standard as shelf/desk */
  .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}}
  /* sister sketch: the professor's desk, closing the coloured band */
  .desk-break{position:relative;z-index:1;width:min(520px,66vw);margin:20px auto -34px;pointer-events:none;color:rgba(26,26,26,.22);
    -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}
  .desk-break svg{display:block;width:100%;height:auto}
  html[data-theme="dark"] .desk-break{color:rgba(255,255,255,.2)}
  @media (max-width:900px){.desk-break{display:none}}
  /* ===== not just another chatbot: prompts, twin clouds, ledger ===== */
  .cmp{max-width:860px;margin:0 auto}
  .qb-row{display:flex;justify-content:center;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:34px}
  .qb-cell{display:flex;flex-direction:column;align-items:center;gap:7px}
  .qb-lab{font:600 9.5px var(--font-mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);transition:color .18s var(--ease)}
  .qb{border:0;background:#EBEBE4;border-radius:14px 14px 5px 14px;padding:8px 15px;font:400 12.5px/1.45 var(--font-sans);letter-spacing:-.005em;color:var(--ink-2);cursor:pointer;box-shadow:0 1px 2px rgba(20,24,12,.04);transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
  .qb:hover{background:#E2E2DA}
  html[data-theme="dark"] .qb{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
  html[data-theme="dark"] .qb:hover{background:rgba(255,255,255,.12)}
  [data-q="0"] .qb-cell:nth-child(1) .qb-lab,[data-q="2"] .qb-cell:nth-child(2) .qb-lab,[data-q="1"] .qb-cell:nth-child(3) .qb-lab{color:var(--green-ink)}
  [data-q="0"] .qb[data-i="0"],[data-q="1"] .qb[data-i="1"],[data-q="2"] .qb[data-i="2"]{background:var(--dark);color:#fff;cursor:default;box-shadow:0 3px 10px rgba(20,24,12,.16)}
  html[data-theme="dark"] [data-q="0"] .qb[data-i="0"],html[data-theme="dark"] [data-q="1"] .qb[data-i="1"],html[data-theme="dark"] [data-q="2"] .qb[data-i="2"]{background:rgba(255,255,255,.92);color:#161613}
  /* all three states share one grid cell so the block height never changes */
  .qt-stack{display:grid;margin-top:34px}
  .qt{display:grid;grid-area:1/1;grid-template-columns:1fr 1fr;gap:26px;align-items:start;visibility:hidden;pointer-events:none}
  [data-q="0"] .qt[data-i="0"],[data-q="1"] .qt[data-i="1"],[data-q="2"] .qt[data-i="2"]{visibility:visible;pointer-events:auto}
  .cloud{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:20px 20px 22px;background:rgba(255,255,255,.75);border-radius:26px;box-shadow:0 2px 6px rgba(20,24,12,.04),0 16px 40px rgba(20,24,12,.06);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  html[data-theme="dark"] .cloud{background:rgba(255,255,255,.05)}
  .cloud-ink{background:var(--dark);box-shadow:0 18px 48px rgba(20,24,12,.14)}
  html[data-theme="dark"] .cloud-ink{border:1px solid rgba(255,255,255,.09)}
  .cl-tag{font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
  .cl-tag-img{height:11px;width:auto;display:block;margin-bottom:3px}
  .cb-u{align-self:flex-end;max-width:84%;padding:6.5px 12px;border-radius:13px 13px 4px 13px;background:#EBEBE5;font:400 11px/1.5 var(--font-sans);color:#22221f}
  .cloud-ink .cb-u{background:rgba(255,255,255,.13);color:#fff}
  .cb-a{position:relative;display:flex;gap:8px;padding-right:4px}
  .cb-a>i{flex:none;width:15px;height:15px;margin-top:2px;border-radius:50%;background:conic-gradient(from 210deg,#DCDCD6,#ADADA5,#DCDCD6)}
  /* text always holds its space; dots sit over it, so the bubble never resizes */
  .cb-a .cb-txt{visibility:hidden;font:400 11px/1.55 var(--font-sans);color:#4a4a45;text-wrap:pretty}
  .cb-a.done .cb-txt{visibility:visible}
  .cb-a.done .cb-dots{display:none}
  .cb-dots{position:absolute;left:23px;top:0;display:inline-flex;gap:3px;padding:6px 0 0}
  .cb-dots i{width:4.5px;height:4.5px;border-radius:50%;background:#C4C4BC;animation:cbDot 1s ease-in-out infinite}
  .cb-dots i:nth-child(2){animation-delay:.15s}
  .cb-dots i:nth-child(3){animation-delay:.3s}
  @keyframes cbDot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-2px)}}
  .cw-a{display:flex;gap:8px;padding-right:4px}
  .cw-a>i{flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--green)}
  .cw-ans{min-width:0;font:400 11px/1.6 var(--font-sans);color:rgba(255,255,255,.92);text-wrap:pretty}
  .cw-ans b{color:var(--green);font-weight:600}
  .lgc-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .lgc-src .sc{display:inline-flex;align-items:center;gap:5px;font:500 10px var(--font-mono);letter-spacing:.02em;color:#A9D95E;background:rgba(143,210,19,.16);border-radius:100px;padding:3.5px 10px;white-space:nowrap}
  .lgc-src svg{width:10px;height:10px}
  /* reveal engine — desk-page.js walks the exchange */
  .cloud .cb-u,.cloud .cb-a,.cloud .cw-a{opacity:0;transform:translateY(7px);transition:opacity .38s var(--ease),transform .38s var(--ease)}
  /* the desk side is the answer, not a performance — it is simply there */
  .cloud-ink .cb-u,.cloud-ink .cw-a{opacity:1;transform:none;transition:none}
  .cloud .cb-u.on,.cloud .cb-a.on,.cloud .cw-a.on{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.cloud .cb-u,.cloud .cb-a,.cloud .cw-a{transition:none}}
  .mini-k{display:flex;align-items:center;gap:14px;margin:56px 0 0}
  .mini-k::before,.mini-k::after{content:"";flex:1;height:1px;background:var(--line-2)}
  .mini-k span{font:600 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .lg-compact{max-width:760px;margin:38px auto 0}
  .lg-compact .lg-head{gap:48px}
  .lg-compact .lg-head .hc{padding-bottom:10px}
  .lg-compact .lg-head .hc span{font-size:13.5px}
  .lg-compact .lg-head img{height:13px}
  .lg-compact .lg-row{gap:48px;padding:11px 2px}
  .lg-compact .lg-row p{font-size:12.5px;line-height:1.5}
  .lg-compact .lg-row .n i,.lg-compact .lg-row .y i{width:12px}
  html[data-theme="dark"] .lg-head img{content:url("assets/desk-wordmark-reversed.png")}
  .cmp-tail{height:4px}
  /* study-together marginalia: a pencilled coursemate exchange astride the section —
     same graphite standard as shelf/desk; the reply's read-ticks are the one green mark */
  .sg-note{position:absolute;z-index:1;width:216px;pointer-events:none;color:rgba(26,26,26,.3)}
  .sg-note svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .sgn-ini{position:absolute;top:7px;left:7px;width:20px;text-align:center;font:600 13px/20px "Caveat",cursive;color:rgba(26,26,26,.44)}
  .sgn-meta{position:absolute;top:13px;left:34px;font:600 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(26,26,26,.34);white-space:nowrap}
  .sgn-txt{position:absolute;left:17px;right:15px;top:45px;font:500 16px/1.18 "Caveat",cursive;letter-spacing:.01em;color:rgba(26,26,26,.58)}
  html[data-theme="dark"] .sg-note{color:rgba(255,255,255,.27)}
  html[data-theme="dark"] .sgn-ini{color:rgba(255,255,255,.4)}
  html[data-theme="dark"] .sgn-meta{color:rgba(255,255,255,.32)}
  html[data-theme="dark"] .sgn-txt{color:rgba(255,255,255,.56)}
  .sg-n0{left:calc((100% - var(--maxw)) / 2 - 6px);top:-40px;width:120px;height:84px;transform:rotate(-4deg)}
  .sg-n0 .sgn-txt{top:40px}
  .sg-n1{left:calc((100% - var(--maxw)) / 2 - 18px);top:10px;height:120px;transform:rotate(-3deg)}
  .sg-n2{right:calc((100% - var(--maxw)) / 2 - 16px);top:158px;width:224px;height:124px;transform:rotate(2.2deg)}
  .sg-n2 .sgn-ini{left:auto;right:7px}
  .sg-n2 .sgn-meta{left:auto;right:34px}
  .sg-n4{right:calc((100% - var(--maxw)) / 2 - 8px);bottom:-58px;width:150px;height:124px;transform:rotate(2deg)}
  .sg-n4 .sgn-meta{left:auto;right:4px;top:0}
  .sg-n3{left:calc((100% - var(--maxw)) / 2 + 4px);bottom:96px;width:150px;height:84px;transform:rotate(-2deg)}
  .sg-n3 .sgn-txt{top:40px}
  .sgn-tick{color:var(--green)}
  @media (max-width:1240px){.sg-note{display:none}}
  /* the cards carry the people themselves — same disc language as the setup window's chats */
  .sg-ppl{display:flex;align-items:center;margin-bottom:18px}
  .sg-ppl i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;margin-left:-8px;font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.02em;color:var(--ink-2);background:#E9E7DF;border:2px solid #fff}
  .sg-ppl i:first-child{margin-left:0;background:var(--green-tint);color:var(--green-deep)}
  .sg-ppl i:nth-child(3){background:var(--dark);color:rgba(255,255,255,.8)}
  .sg-ppl u{text-decoration:none;margin-left:9px;font:600 9px var(--font-mono);letter-spacing:.1em;color:var(--muted-2)}
  html[data-theme="dark"] .sg-ppl i{border-color:#24261f;background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
  html[data-theme="dark"] .sg-ppl i:first-child{background:rgba(110,183,4,.22);color:#B7E36A}
  html[data-theme="dark"] .sg-ppl i:nth-child(3){background:rgba(255,255,255,.92);color:#1A1A1A}
  /* each card ends with the thing itself — a static pane, cropped by the card edge */
  .sg-cap{display:flex;flex-direction:column}
  .sg-crew{display:flex;align-items:center;justify-content:center;gap:13px;margin:36px 0 14px}
  .sg-crew .sg-ppl{margin:0}
  .sg-crew .sg-ppl i{width:30px;height:30px;font-size:9px;margin-left:-9px}
  .sg-crew .sg-ppl i:first-child{margin-left:0}
  .sg-crew .sg-ppl i:nth-child(5){background:var(--green-tint-2);color:var(--green-deep)}
  .sg-crew u{text-decoration:none;font:600 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .sg-fig{position:absolute;left:0;right:0;bottom:0;height:132px;overflow:hidden;border-radius:0 0 26px 26px}
  .sg-fig>div{position:absolute;left:24px;right:24px;top:14px;display:flex;flex-direction:column;gap:7px}
  /* the chat pane holds its newest line at the bottom, older ones running off the top */
  .sg-fig.chat>div{top:auto;bottom:13px}
  .sg-fig.chat{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 46%);mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 46%)}
  .sg-fig .sgf-av{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:600 7px var(--font-mono);font-style:normal;letter-spacing:.02em;background:#E9E7DF;color:var(--ink-2)}
  html[data-theme="dark"] .sg-fig .sgf-av{background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
  .sg-fig .sgf-ca{display:flex;gap:8px;padding-right:4px}
  .sg-fig .sgf-ca .sgf-av{width:17px;height:17px;font-size:6.5px;margin-top:1px}
  .sg-fig .sgf-ca span{flex:1;min-width:0;font:400 11px/1.5 var(--font-sans);color:#4a4a45;text-wrap:pretty}
  html[data-theme="dark"] .sg-fig .sgf-ca span{color:rgba(255,255,255,.72)}
  .sg-fig .sgf-ca b{display:block;margin:0 0 1px;font:600 8px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .sg-fig .sgf-cu{align-self:flex-end;max-width:84%;padding:6.5px 12px;border-radius:13px 13px 4px 13px;background:var(--green-tint-2);font:400 11px/1.5 var(--font-sans);color:var(--green-deep)}
  .sg-fig .sgf-msg{display:flex;align-items:flex-end;gap:7px}
  .sg-fig .sgf-bub{background:var(--card);border-radius:11px 11px 11px 4px;padding:6px 11px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.35;letter-spacing:-.005em;color:var(--ink-2);box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05)}
  .sg-fig .sgf-msg.me{justify-content:flex-end}
  .sg-fig .sgf-msg.me .sgf-bub{background:var(--green-tint-2);border-color:transparent;border-radius:11px 11px 4px 11px;color:var(--green-deep)}
  .sg-fig .sgf-head{display:block;font:600 8.5px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin:0 0 1px}
  .sg-fig .sgf-file{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:11px;padding:7px 11px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05)}
  .sg-fig .sgf-file svg{width:13px;height:13px;flex:none;color:var(--green-ink)}
  .sg-fig .sgf-file span{min-width:0;flex:1;line-height:1.3}
  .sg-fig .sgf-file b{display:block;margin:0;font:600 11px var(--font-sans);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-fig .sgf-file u{text-decoration:none;font:500 9px var(--font-sans);color:var(--muted-2)}
  .sg-fig .sgf-file .sgf-av{margin-left:auto}
  .sg-fig .sgf-post{background:var(--card);border-radius:11px;padding:8px 11px 9px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05)}
  .sg-fig .sgf-hd{display:flex;align-items:center;gap:7px}
  .sg-fig .sgf-who{min-width:0;line-height:1.3}
  .sg-fig .sgf-who b{display:block;margin:0;font:600 10.5px var(--font-sans);letter-spacing:-.005em;color:var(--ink)}
  .sg-fig .sgf-who u{text-decoration:none;display:block;font:500 8.5px var(--font-sans);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-fig .sgf-hd em{margin-left:auto;flex:none;font:600 7.5px var(--font-mono);font-style:normal;letter-spacing:.12em;background:var(--green-tint);color:var(--green-deep);border-radius:5px;padding:3px 6px}
  .sg-fig .sgf-post p{margin:7px 0 0;font-size:11px;line-height:1.4;letter-spacing:-.005em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-fig .sgf-post .pt{margin:8px 0 0;font:600 12px var(--font-sans);letter-spacing:-.01em;color:var(--ink);white-space:normal}
  .sg-fig .sgf-post .px{margin:5px 0 0;font:400 10.5px/1.55 var(--font-sans);color:var(--muted);white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .sg-fig .sgf-reply{display:flex;gap:7px;margin-top:9px;padding:7px 9px;background:rgba(20,24,12,.035);border-radius:9px}
  html[data-theme="dark"] .sg-fig .sgf-reply{background:rgba(255,255,255,.05)}
  .sg-fig .sgf-reply .sgf-av{width:16px;height:16px;font-size:6px}
  .sg-fig .sgf-reply span{flex:1;min-width:0;font:400 10px/1.45 var(--font-sans);color:var(--ink-2)}
  .sg-fig .sgf-reply b{font-weight:600;margin:0}
  .sg-fig .sgf-post2{background:var(--card);border-radius:14px;padding:14px 16px 13px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 8px 24px rgba(20,24,12,.06)}
  .sg-fig .sgf-post2 .sgf-av{width:22px;height:22px;font-size:7.5px}
  .sg-fig .sgf-post2 .pt2{margin:9px 0 0;font:600 14px/1.24 var(--font-display);letter-spacing:-.02em;color:var(--ink);white-space:normal;text-wrap:balance}
  .sg-fig .sgf-post2 .px2{margin:7px 0 0;font:400 10.5px/1.6 var(--font-sans);color:var(--muted);white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
  .sg-fig .sgf-post2 .pf{display:flex;align-items:center;gap:11px;margin-top:9px}
  .sg-fig .sgf-post2 .px2{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2)}
  .sg-fig .sgf-post2 .up{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--green-tint);color:var(--green-deep);font:600 10px var(--font-mono)}
  .sg-fig .sgf-post2 .up svg{width:10px;height:10px}
  .sg-fig .sgf-post2 .pm{font:500 9.5px var(--font-mono);letter-spacing:.04em;color:var(--muted-2)}
  /* the photo post needs a deeper well than the list panes, or the crop eats the collage */
  .sg-fig.sgf-photo{height:132px}
  .sgf-photo > div{top:8px}
  .sgf-photo .sgf-post2{padding:12px 16px 13px}
  .sg-fig.sgf-photo .sgf-post2 .pt2{font-size:12.5px;margin-top:7px}
  /* the post opens onto its photos: one large, two small, cropped by the card edge */
  .sg-fig .sgf-post2 .pgal{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:5px;height:88px;margin-top:9px}
  /* a horizon of colour rather than a picture: pale sky, a green band, a deeper bank */
  .sg-fig .sgf-post2 .pg{position:relative;border-radius:7px;overflow:hidden;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(142,166,182,.26) 0%,rgba(142,166,182,.13) 44%,rgba(110,183,4,.15) 58%,rgba(88,108,58,.2) 100%),linear-gradient(158deg,rgba(26,26,26,.05),rgba(26,26,26,.03))}
  .sg-fig .sgf-post2 .pg:nth-of-type(2){background:linear-gradient(180deg,rgba(196,183,154,.28) 0%,rgba(176,172,142,.14) 50%,rgba(110,183,4,.13) 62%,rgba(80,100,55,.18) 100%),linear-gradient(158deg,rgba(26,26,26,.045),rgba(26,26,26,.03))}
  .sg-fig .sgf-post2 .pg:nth-of-type(3){background:linear-gradient(180deg,rgba(142,166,182,.2) 0%,rgba(110,183,4,.12) 38%,rgba(72,96,52,.22) 100%),linear-gradient(158deg,rgba(26,26,26,.045),rgba(26,26,26,.03))}
  .sg-fig .sgf-post2 .pg-a{grid-row:span 2;
    background:
      radial-gradient(34px 14px at 24% 20%,rgba(255,255,255,.72),rgba(255,255,255,0) 72%),
      radial-gradient(22px 10px at 40% 15%,rgba(255,255,255,.5),rgba(255,255,255,0) 74%),
      radial-gradient(26px 11px at 63% 26%,rgba(255,255,255,.44),rgba(255,255,255,0) 76%),
      radial-gradient(14px 7px at 78% 17%,rgba(255,255,255,.34),rgba(255,255,255,0) 78%),
      linear-gradient(180deg,rgba(132,158,178,.34) 0%,rgba(142,166,182,.17) 46%,rgba(110,183,4,.16) 60%,rgba(84,104,56,.22) 100%),
      linear-gradient(158deg,rgba(26,26,26,.05),rgba(26,26,26,.03))}
  .sg-fig .sgf-post2 .pg-a::after{content:"";position:absolute;left:0;right:0;top:57%;height:1px;background:rgba(255,255,255,.28)}
  .sg-fig .sgf-post2 .pg svg{width:16px;height:16px;color:rgba(26,26,26,.26)}
  .sg-fig .sgf-post2 .pg u{text-decoration:none;font:600 9.5px var(--font-mono);color:rgba(26,26,26,.4)}
  html[data-theme="dark"] .sg-fig .sgf-post2 .pg-a{background:
      radial-gradient(34px 14px at 24% 20%,rgba(255,255,255,.34),rgba(255,255,255,0) 72%),
      radial-gradient(24px 10px at 46% 16%,rgba(255,255,255,.24),rgba(255,255,255,0) 75%),
      radial-gradient(26px 11px at 66% 26%,rgba(255,255,255,.2),rgba(255,255,255,0) 76%),
      linear-gradient(180deg,rgba(132,158,178,.24) 0%,rgba(110,183,4,.13) 54%,rgba(72,96,52,.24) 100%),
      linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
  html[data-theme="dark"] .sg-fig .sgf-post2 .pg:not(.pg-a),html[data-theme="dark"] .sg-fig .sgf-post2 .pg:nth-of-type(2),html[data-theme="dark"] .sg-fig .sgf-post2 .pg:nth-of-type(3){background:linear-gradient(180deg,rgba(142,166,182,.2) 0%,rgba(110,183,4,.12) 52%,rgba(72,96,52,.22) 100%),linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
  html[data-theme="dark"] .sg-fig .sgf-post2 .pg svg,html[data-theme="dark"] .sg-fig .sgf-post2 .pg u{color:rgba(255,255,255,.4)}
  .sg-fig .sgf-eng{display:flex;align-items:center;gap:5px;margin-top:6px;font:600 8.5px var(--font-mono);letter-spacing:.06em;color:var(--muted-2)}
  .sg-fig .sgf-eng svg{width:10px;height:10px;color:var(--green-ink)}
  .sg-fig .sgf-eng s{text-decoration:none;width:3px;height:3px;border-radius:50%;background:var(--line);margin:0 2px}
  .sg-fig .sgf-note{position:relative;background:var(--card);border-radius:11px;padding:10px 12px 12px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05)}
  .sg-fig .sgf-note b{display:block;margin:0;font:600 11px var(--font-sans);letter-spacing:-.005em;color:var(--ink)}
  .sg-fig .sgf-note i{display:block;height:5px;border-radius:3px;background:var(--line-2);margin:8px 0 0}
  .sg-fig .sgf-cur{position:absolute;font:600 7.5px var(--font-mono);letter-spacing:.06em;padding:2.5px 6px;border-radius:0 6px 6px 6px;white-space:nowrap}
  .sg-fig .sgf-cur u{text-decoration:none;position:absolute;left:0;top:-7px;width:1.5px;height:7px;background:inherit}
  .sg-fig .sgf-cur.c1{background:var(--green);color:var(--on-green);top:33px;right:16px}
  .sg-fig .sgf-cur.c2{background:var(--ink);color:var(--bg);top:57px;left:36%}
  .sg-fig .sgf-task{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:11px;padding:7px 11px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 5px 14px rgba(20,24,12,.05)}
  .sg-fig .sgf-task .tt{flex:1;min-width:0;line-height:1.3}
  .sg-fig .sgf-task .tt b{display:block;margin:0;font:600 11px var(--font-sans);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-fig .sgf-task .tt u{text-decoration:none;font:500 9px var(--font-sans);color:var(--muted-2);white-space:nowrap}
  .sg-fig .sgf-task.done .tt b{color:var(--muted-2);text-decoration:line-through}
  .sg-fig .sgf-task .tk{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--on-green)}
  .sg-fig .sgf-task .tk svg{width:9px;height:9px}
  .sg-fig .sgf-task.done .tk{background:var(--green);border-color:var(--green)}
  .sg-fig .sgf-task .sgf-av{margin-left:auto}
  .sg-fig .sgf-ai{flex:none;width:20px;height:20px;border-radius:50%;background:var(--dark);display:grid;place-items:center}
  .sg-fig .sgf-ai b{width:7px;height:7px;border-radius:50%;background:var(--green);margin:0}
  .sg-fig .sgf-cite{display:inline-flex;align-items:center;gap:4px;margin-left:16px;align-self:flex-start;font:600 8px var(--font-mono);letter-spacing:.08em;color:var(--green-deep);background:var(--green-tint);border-radius:5px;padding:3px 7px;white-space:nowrap}
  .sg-fig .sgf-cite svg{width:9px;height:9px}
  .sg-fig .sgf-prog{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;margin:2px 0}
  .sg-fig .sgf-qa{display:flex;align-items:flex-end;justify-content:flex-end;gap:7px}
  .sg-fig .sgf-qa .sgf-av{width:17px;height:17px;font-size:6.5px;margin-bottom:1px}
  .sg-fig .sgf-qa span{max-width:80%;padding:6.5px 12px;border-radius:13px 13px 4px 13px;background:#EBEBE5;font:400 11px/1.5 var(--font-sans);color:#22221f}
  html[data-theme="dark"] .sg-fig .sgf-qa span{background:rgba(255,255,255,.13);color:#fff}
  .sg-fig .sgf-da{display:flex;gap:8px;padding-right:4px}
  .sg-fig .sgf-da .sgf-ai{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--green)}
  .sg-fig .sgf-da span{flex:1;min-width:0;font:400 11px/1.55 var(--font-sans);color:#4a4a45;text-wrap:pretty}
  html[data-theme="dark"] .sg-fig .sgf-da span{color:rgba(255,255,255,.72)}
  .sg-fig .sgf-da span b{display:inline;font:600 11px/1.55 var(--font-sans);color:var(--green-ink);margin:0}
  .sg-fig .sgf-prog i{display:block;width:26%;height:100%;border-radius:3px;background:var(--green)}
  html[data-theme="dark"] .sg-fig .sgf-bub,html[data-theme="dark"] .sg-fig .sgf-file,html[data-theme="dark"] .sg-fig .sgf-post,html[data-theme="dark"] .sg-fig .sgf-note,html[data-theme="dark"] .sg-fig .sgf-task,html[data-theme="dark"] .sg-fig .sgf-post2{background:rgba(255,255,255,.07);box-shadow:none}
  /* study together — three clouded cards, each opening with a small drawn vignette */
  .sg{max-width:1040px;margin:0 auto}
  .sg-car{position:relative}
  .sg-caps{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:8px 26px 48px;margin:8px -26px -48px;scroll-padding:0 26px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
  .sg-caps::-webkit-scrollbar{display:none}
  .sg-cap{flex:0 0 calc((100% - 28px) / 3);scroll-snap-align:start;scroll-snap-stop:always}
  .sg-caps.drag{cursor:grabbing}
  .sg-caps.drag .sg-cap{transform:none!important;box-shadow:0 1px 3px rgba(20,24,12,.04),0 12px 28px rgba(20,24,12,.05)}
  /* carousel controls: a scrub rail with the arrows either side, under the track */
  .sg-bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
  .sg-nav{position:relative;width:30px;height:30px;border-radius:50%;background:none;border:0;display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0;transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)}
  .sg-nav::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%}
  .sg-nav:hover{background:var(--green-tint);color:var(--green-deep)}
  .sg-nav svg{width:15px;height:15px}
  .sg-nav.off{opacity:.25;pointer-events:none}
  .sg-rail{position:relative;width:186px;height:5px;background:rgba(26,26,26,.2);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20186%205%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%202.3Q18.5%202.3%2035.1%202.4Q51.6%202.9%2068.2%202.9Q84.7%202.7%20101.3%202.8Q117.8%202.5%20134.4%202.4Q150.9%202.4%20167.5%202.8L184%202.6%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20186%205%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%202.3Q18.5%202.3%2035.1%202.4Q51.6%202.9%2068.2%202.9Q84.7%202.7%20101.3%202.8Q117.8%202.5%20134.4%202.4Q150.9%202.4%20167.5%202.8L184%202.6%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;cursor:pointer;touch-action:none}
  html[data-theme="dark"] .sg-rail{background:rgba(255,255,255,.24)}
  .sg-rail::before{content:"";position:absolute;inset:-11px 0;border-radius:11px}
  .sg-rail i{position:absolute;top:-1px;bottom:-1px;left:0;width:60%;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20186%205%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%202.3Q18.5%202.3%2035.1%202.4Q51.6%202.9%2068.2%202.9Q84.7%202.7%20101.3%202.8Q117.8%202.5%20134.4%202.4Q150.9%202.4%20167.5%202.8L184%202.6%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20186%205%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%202.3Q18.5%202.3%2035.1%202.4Q51.6%202.9%2068.2%202.9Q84.7%202.7%20101.3%202.8Q117.8%202.5%20134.4%202.4Q150.9%202.4%20167.5%202.8L184%202.6%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;transition:left .35s var(--ease),width .35s var(--ease)}
  .sg-rail.drag{cursor:grabbing}
  .sg-rail.drag i{transition:none}
  .sg-rail.idle{opacity:.4;cursor:default;pointer-events:none}
  @media (prefers-reduced-motion:reduce){.sg-rail i{transition:none}}
  .sg-cap{background:rgba(255,255,255,.75);border-radius:26px;padding:30px 28px 28px;position:relative;overflow:hidden;height:306px;
    box-shadow:0 1px 3px rgba(20,24,12,.04),0 12px 28px rgba(20,24,12,.05);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .sg-cap:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(20,24,12,.04),0 14px 30px rgba(20,24,12,.06)}
  html[data-theme="dark"] .sg-cap,html[data-theme="dark"] .sg-cap:hover{background:rgba(255,255,255,.045);
    box-shadow:0 2px 6px rgba(0,0,0,.18),0 16px 40px rgba(0,0,0,.22)}
  .sg-pic{width:44px;height:44px;border-radius:12px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;margin-bottom:18px}
  .sg-pic svg{width:22px;height:22px}
  .sg-cap b{display:block;font:600 17px var(--font-display);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
  .sg-cap span{font-size:13.5px;line-height:1.58;color:var(--muted);text-wrap:pretty}
  @media (max-width:860px){.sg-cap{flex-basis:min(320px,82%)}}
  /* three framed certificates on the wall, between the two bands */
  .certs{width:min(360px,100%);margin:-22px auto 0;padding:0 0 48px;color:rgba(26,26,26,.22);pointer-events:none}
  .certs svg{display:block;width:100%;height:auto}
  .certs .seal{fill:var(--green);stroke:none}
  html[data-theme="dark"] .certs{color:rgba(255,255,255,.2)}
  /* built to keep you focused — a table, then the hour drawn twice */
  .bf{max-width:900px;margin:0 auto}
  .bf-t{display:grid}
  .bf-th,.bf-tr{display:grid;grid-template-columns:190px 1fr 1fr;gap:22px;align-items:baseline}
  .bf-th{padding:0 0 12px;border-bottom:1px solid var(--line);font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .bf-thd{color:var(--green-ink)}
  .bf-tr{padding:16px 0;border-bottom:1px solid var(--line-2)}
  /* .bf-tr: a drawn rule per row, not one line stamped 4 times */
  .bf-tr{border-bottom:0;position:relative}
  .bf-tr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--line-2);pointer-events:none}
  .bf-tr:nth-of-type(4n+1)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.6Q150 2.8 340 3.7Q540 4.6 740 3.5Q940 2.6 1200 3.9' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.6Q150 2.8 340 3.7Q540 4.6 740 3.5Q940 2.6 1200 3.9' fill='none' stroke='%23fff' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .bf-tr:nth-of-type(4n+2)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q120 4.8 290 3.8Q430 2.9 520 3.4' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M534 3.45Q700 4.3 900 3.3Q1060 2.6 1200 3.5' fill='none' stroke='%23fff' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q120 4.8 290 3.8Q430 2.9 520 3.4' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M534 3.45Q700 4.3 900 3.3Q1060 2.6 1200 3.5' fill='none' stroke='%23fff' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .bf-tr:nth-of-type(4n+3)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.3Q90 2.7 190 3.5' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3Cpath d='M204 3.55Q360 4.4 520 3.4Q640 2.7 700 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M714 3.15Q900 2.6 1060 3.7Q1140 4.3 1200 3.9' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.3Q90 2.7 190 3.5' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3Cpath d='M204 3.55Q360 4.4 520 3.4Q640 2.7 700 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M714 3.15Q900 2.6 1060 3.7Q1140 4.3 1200 3.9' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .bf-tr:nth-of-type(4n+4)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2Q200 3.2 420 4.1Q620 4.9 780 3.8' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M794 3.75Q960 3 1200 4.2' fill='none' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2Q200 3.2 420 4.1Q620 4.9 780 3.8' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M794 3.75Q960 3 1200 4.2' fill='none' stroke='%23fff' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .bf-tr b{font:600 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .bf-tr span{font-size:13.5px;line-height:1.5;color:var(--muted-2)}
  .bf-tr span.y{color:var(--ink-2)}
  .bf-fig{margin-top:44px;padding-right:0}
  .bf-cta{justify-content:center;margin-top:26px}
  .bf-figk{display:block;font:600 9.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);margin:34px 0 0;text-align:center}
  .bf-lane{display:grid;grid-template-columns:116px 1fr;gap:16px;align-items:center;margin-bottom:10px}
  .bf-lane em{font-style:normal;font:600 11.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);text-align:right}
  .bf-mark{display:flex;align-items:center;justify-content:flex-end;gap:6px}
  .bf-mark img{height:11px;width:auto;display:block;position:relative;top:.5px}
  html[data-theme="dark"] .bf-mark img{content:url("assets/desk-wordmark-reversed.png")}
  .bf-on em{color:var(--green-ink)}
  .bf-band{position:relative;height:18px}
  /* what the hour was actually spent in, labelled per fragment on two rows */
  .bf-lb{position:absolute;left:0;bottom:16px;text-decoration:none;white-space:nowrap;font:500 8.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .bf-lb.lo{bottom:auto;top:16px}
  .bf-fig .bf-lane:first-of-type{margin-bottom:28px}
  .bf-fig .bf-lane:first-of-type .bf-band{margin:22px 0}
  .bf-band i{position:absolute;top:4px;height:10px;border-radius:4px;background:rgba(26,26,26,.13);display:block}
  html[data-theme="dark"] .bf-band i{background:rgba(255,255,255,.16)}
  .bf-band i.bf-solid{left:0;width:100%;top:2px;height:14px;border-radius:6px;background:var(--green)}
  /* the hour is played back rather than assembled: a single left-to-right reveal crosses
     each lane, so the fragments appear exactly where they fall in the hour */
  .bf-fig .bf-band{clip-path:inset(-40px 100% -40px 0)}
  .reveal.in .bf-fig .bf-band{animation:bfSweep 1.25s cubic-bezier(.36,.02,.2,1) .3s forwards}
  .reveal.in .bf-on .bf-band{animation-delay:1.5s;animation-duration:1.1s}
  @keyframes bfSweep{to{clip-path:inset(-40px 0 -40px 0)}}
  /* the playhead itself — a hairline that travels with the reveal and leaves with it */
  .bf-fig .bf-band::after{content:"";position:absolute;top:-7px;bottom:-7px;left:0;width:1px;background:var(--muted-2);opacity:0}
  .reveal.in .bf-fig .bf-band::after{animation:bfHead 1.25s cubic-bezier(.36,.02,.2,1) .3s forwards}
  .reveal.in .bf-on .bf-band::after{background:var(--green);animation-delay:1.5s;animation-duration:1.1s}
  @keyframes bfHead{0%{opacity:.5;left:0}92%{opacity:.5}100%{opacity:0;left:100%}}
  @media (prefers-reduced-motion:reduce){.bf-fig .bf-band{clip-path:none;animation:none}.bf-fig .bf-band::after{display:none}}
  /* the note lands only once the 'without Desk' sweep has finished (.3s delay + 1.25s run) */
  .bf-note{display:flex;flex-direction:column;align-items:flex-end;margin:-4px 0 8px 0;pointer-events:none;opacity:0}
  .reveal.in .bf-note{animation:fadeUp .5s var(--ease) 1.62s both}
  @media (prefers-reduced-motion:reduce){.bf-note{opacity:1}.reveal.in .bf-note{animation:none}}
  .bf-note b{font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;font-weight:600;color:rgba(26,26,26,.56);text-align:right;transform:translate(27px,1px) rotate(7deg)}
  .bf-note b em{font-style:normal;color:var(--green)}
  .bf-note span{font:600 27px/1.1 "Caveat",cursive;color:rgba(26,26,26,.4);transform:translate(-95px,0) rotate(23deg) scaleY(-1);margin-top:1px}
  html[data-theme="dark"] .bf-note b{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .bf-note span{color:rgba(255,255,255,.4)}
  /* the extra rightward push only where the page has slack for it — no horizontal overflow */
  @media (min-width:1280px){.bf-note{margin-right:-30px}}
  @media (max-width:620px){.bf-note{display:none}}
  .bf-axis{display:flex;justify-content:space-between;margin-left:132px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  @media (max-width:820px){.bf-th,.bf-tr{grid-template-columns:1fr;gap:6px}.bf-th{display:none}}
  .cmp-out{max-width:52ch;margin:44px auto 0;text-align:center;font-size:15px;line-height:1.62;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .cmp-out::before{content:"";display:block;width:18px;height:2px;border-radius:2px;background:var(--green);margin:0 auto 18px}
  @media (max-width:700px){.qt{grid-template-columns:1fr;gap:22px}}

  /* ===== why it's trusted — claim column + ruled rows (replaces the three cards) ===== */
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:860px;margin:0 auto}
  .trust-side h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.028em;margin:16px 0 0;text-wrap:balance}
  .trust-side h2 .g{color:var(--green)}
  .trust-side>p{font-size:16px;line-height:1.62;color:var(--muted);margin:16px 0 0;max-width:34ch;text-wrap:pretty}
  .hero-inner .hero-badge::after{display:none}
  /* the eyebrow, placed */
  .hero-inner .hero-badge{transform:translateY(-26px)}
  .hero-stage .window-link{transform:translateY(-4px)}
  /* a word added afterwards, in the margin above the line, with an insertion caret beneath it */
  .ins{display:inline-block;position:relative;width:0;vertical-align:baseline;pointer-events:none}
  .ins b{position:absolute;left:50%;bottom:.62em;transform:translate(5px,-26px) translateX(-50%) rotate(-6deg);white-space:nowrap;font:600 .46em/1 "Caveat",cursive;letter-spacing:.01em;color:var(--green)}
  .ins i{position:absolute;left:50%;bottom:.16em;transform:translate(2px,24px) translateX(-50%);font:600 .4em/1 "Caveat",cursive;font-style:normal;color:rgba(26,26,26,.42)}
  html[data-theme="dark"] .ins i{color:rgba(255,255,255,.45)}
  /* two rejected tries stay crossed out beside the word that stayed */
  .ins b s{position:relative;top:calc(-.13em - 4px);font-size:.85em;text-decoration:none;color:rgba(26,26,26,.32);margin-right:.34em}
  .ins b s.ins-r{margin:0 0 0 .3em;top:-.19em}
  .ins b s::after{content:"";position:absolute;left:-3px;right:-4px;top:52%;height:1.4px;border-radius:1px;background:currentColor;transform:rotate(-5deg)}
  .ins b s.ins-r::after{transform:rotate(4deg)}
  .ins b em{font-style:normal}
  html[data-theme="dark"] .ins b s{color:rgba(255,255,255,.32)}
  @media (max-width:620px){.ins{display:none}}
  /* supporter credit, centred under the hero window */
  .hero-sup{display:flex;align-items:center;justify-content:center;gap:13px;margin:118px auto -24px}
  .hero-sup img{height:52px;width:auto;display:block;flex:none}
  .hero-sup .hs-note{font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;font-weight:600;color:rgba(26,26,26,.56);transform:rotate(-2deg);text-align:left}
  .hero-sup .hs-note em{font-style:normal;color:var(--green)}
  .hero-sup .hs-caret{font:600 27px/1.1 "Caveat",cursive;color:rgba(26,26,26,.4);transform:rotate(-90deg) translateY(2px) rotate(-6deg);margin:0 -2px}
  html[data-theme="dark"] .hero-sup .hs-note{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] .hero-sup .hs-caret{color:rgba(255,255,255,.4)}
  /* pencilled note hanging under the nav CTA, caret pointing up into it */
  .nav-cta-w{position:relative;display:inline-flex}
  .nav-cta-w .ncta{position:absolute;top:calc(100% - 3px);right:1px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;white-space:nowrap}
  .nav-cta-w .ncta span{font:600 27px/1.1 "Caveat",cursive;color:rgba(26,26,26,.4);transform:translate(-51px,19px) rotate(-6.3deg)}
  .nav-cta-w .ncta b{font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;font-weight:600;color:rgba(26,26,26,.56);transform:translate(-19px,9px) rotate(2.4deg)}
  .nav-cta-w .ncta em{font-style:normal;color:var(--green)}
  html[data-theme="dark"] .nav-cta-w .ncta span{color:rgba(255,255,255,.4)}
  html[data-theme="dark"] .nav-cta-w .ncta b{color:rgba(255,255,255,.6)}
  @media (max-width:620px){.nav-cta-w .ncta{display:none}}
  /* UCL's mark is black ink on transparent, so it reverses to white for the dark ground */
  html[data-theme="dark"] .hero-sup img{filter:invert(1)}
  @media (max-width:620px){.hero-sup .hs-note,.hero-sup .hs-caret{display:none}}
  /* section rail — quick jump plus a read of what the page holds */
  .trust-sup{display:flex;align-items:center;gap:16px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line-2)}
  .trust-sup img{height:62px;width:auto;display:block;flex:none}
  html[data-theme="dark"] .trust-sup img{filter:invert(1)}
  .trust-sup span{font:500 11px var(--font-mono);letter-spacing:.06em;color:var(--muted-2);line-height:1.5;max-width:20ch}
  /* the first row's heading shares a baseline with the eyebrow opposite it */
  .trust-rows{display:flex;flex-direction:column;gap:12px;padding-top:5px}
  .trust-row{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 22px;border-radius:16px;background:var(--card);box-shadow:0 1px 3px rgba(20,24,12,.05),0 10px 26px rgba(20,24,12,.05);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  html[data-theme="dark"] .trust-row{background:rgba(255,255,255,.05)}
  .trust-row:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(20,24,12,.05),0 18px 40px rgba(20,24,12,.09)}
  .tr-i{font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--green);padding-top:5px}
  .tr-b h3{font-size:19px;font-weight:600;letter-spacing:-.016em;margin:0}
  .tr-b p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:8px 0 0;text-wrap:pretty}
  @media (max-width:920px){
    .trust{grid-template-columns:1fr;gap:44px}
    .trust-side>p{max-width:none}
  }
  @keyframes wlScrim{from{opacity:0}to{opacity:1}}
  @keyframes wlPop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes drawIn{to{stroke-dashoffset:0}}
  @keyframes spineIn{to{opacity:1}}
  .wl-scrim{position:fixed;inset:0;z-index:200;background:rgba(22,24,18,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:wlScrim .35s ease both}
  .wl-wrap{position:fixed;inset:0;z-index:201;display:grid;place-items:center;padding:24px;pointer-events:none}
  .wl-card{position:relative;pointer-events:auto;width:min(392px,100%);background-color:#04332C;border-radius:20px;padding:24px 28px 26px;box-shadow:0 8px 16px rgba(0,20,15,.2),0 40px 90px rgba(0,20,15,.4);animation:wlPop .5s var(--ease) both}
  .wl-x{position:absolute;top:13px;right:13px;width:30px;height:30px;border:0;background:none;border-radius:9px;color:rgba(255,255,255,.55);cursor:pointer;display:grid;place-items:center;z-index:2;transition:background .18s,color .18s}
  .wl-x:hover{background:rgba(255,255,255,.1);color:#fff}
  .wl-head{position:relative;border-bottom:1px solid rgba(255,255,255,.16);padding:10px 0 18px}
  .wl-books{position:absolute;right:42px;bottom:0;width:104px;height:auto;color:rgba(255,255,255,.4);pointer-events:none}
  .wl-t{font:600 22px var(--font-display);letter-spacing:-.02em;color:#fff;margin-top:20px;animation:fadeUp .45s var(--ease) .25s both}
  .wl-t span{color:var(--green)}
  .wl-s{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.68);animation:fadeUp .45s var(--ease) .33s both}
  .wl-pill{display:flex;align-items:center;gap:8px;margin-top:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:7px 7px 7px 18px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);animation:fadeUp .45s var(--ease) .41s both}
  .wl-pill:focus-within{border-color:rgba(143,210,19,.65);box-shadow:0 0 0 4px rgba(143,210,19,.12)}
  .wl-pill .dkin{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:#fff;outline:none}
  .wl-pill .dkin::placeholder{color:rgba(255,255,255,.4)}
  .wl-pill button{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--green);color:var(--on-green);display:grid;place-items:center;cursor:pointer;transition:background .25s var(--ease),transform .2s var(--ease)}
  .wl-pill button:hover{background:#7DC908;transform:scale(1.07)}
  .wl-pill button:active{transform:scale(.98)}
  .wl-note,.wl-note2{font:500 10.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
  .wl-note{margin-top:15px;animation:fadeUp .45s var(--ease) .49s both}
  .wl-done{text-align:center;padding:32px 4px 4px;animation:fadeUp .4s var(--ease) both}
  .wl-tick{width:52px;height:52px;border-radius:50%;background:rgba(110,183,4,.18);color:#8FD213;display:grid;place-items:center;margin:0 auto 20px}
  .wl-t2{font:600 21px var(--font-display);letter-spacing:-.02em;color:#fff}
  .wl-t2 span{color:var(--green)}
  .wl-s2{margin:10px auto 0;max-width:34ch;font-size:15px;line-height:1.55;color:rgba(255,255,255,.68)}
  .wl-share{display:flex;justify-content:center;margin-top:24px}
  .wl-share button{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:100px;padding:10px 18px;font:500 13.5px var(--font-sans);letter-spacing:-.01em;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
  .wl-share button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
  .wl-note2{margin-top:22px}
  .wl-card.done{background-color:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 16px rgba(20,24,12,.1),0 40px 90px rgba(20,24,12,.26),inset 0 1px 0 rgba(255,255,255,.9);transition:background-color .4s var(--ease)}
  .wl-card.done .wl-x{color:var(--muted-2)}
  .wl-card.done .wl-x:hover{background:rgba(26,26,26,.06);color:var(--ink)}
  .wl-card.done .wl-head{border-bottom-color:var(--line)}
  .wl-card.done .wl-books{color:rgba(26,26,26,.26)}
  .wl-mk-rev,.wl-mk-pine{height:15px}
  .wl-mk-rev{display:block}
  .wl-mk-pine{display:none}
  .wl-card.done .wl-mk-rev{display:none}
  .wl-card.done .wl-mk-pine{display:block}
  .wl-card.done .wl-tick{background:var(--green-tint);color:var(--green-deep)}
  .wl-card.done .wl-t2{color:var(--ink)}
  .wl-card.done .wl-s2{color:var(--muted)}
  .wl-card.done .wl-note2{color:var(--muted-2)}
  .wl-card.done .wl-share button{border-color:rgba(26,26,26,.16);background:rgba(255,255,255,.5);color:var(--ink)}
  .wl-card.done .wl-share button:hover{background:var(--green-tint);border-color:var(--green-tint-2);color:var(--green-deep)}
  @media (prefers-reduced-motion:reduce){.wl-card,.wl-scrim,.wl-t,.wl-s,.wl-pill,.wl-note,.wl-done{animation:none}.wl-books *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}