/* ============================================================================
   abortion.si — The Deliberation Instrument
   Design system. One 4px baseline. One type ramp. One radius ramp.
   Nothing in this file is arbitrary: every value comes from a scale.
   ========================================================================== */

:root{
  /* ---- surface ------------------------------------------------------- */
  --ink:      #070B12;
  --ink-1:    #0A0F1A;
  --ink-2:    #0E1522;
  --ink-3:    #131C2C;
  --line:     #1B2432;
  --line-2:   #26313f;
  --line-3:   #35414f;

  /* ---- content ------------------------------------------------------- */
  --parch:    #EDE8DC;
  --text:     #DCE3ED;
  --muted:    #8B98AB;
  --dim:      #5C6A7E;
  --faint:    #3D4859;

  /* ---- poles (the two sides; never used to signal good/bad) ---------- */
  --teal:     #4FB3A3;
  --teal-dim: #2C6C63;
  --amber:    #D99A46;
  --amber-dim:#8A6329;
  --blue:     #2D7AFF;

  /* ---- spacing: 4px baseline ---------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10:40px; --s12:48px; --s16:64px;
  --s20:80px; --s24:96px; --s32:128px;

  /* ---- radii --------------------------------------------------------- */
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px; --r5: 28px; --rf: 999px;

  /* ---- type ---------------------------------------------------------- */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --f-serif:"Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* ---- geometry ------------------------------------------------------ */
  --maxw: 1272px;          /* 12 cols x 90 + 11 gutters x 18 */
  --gut:  18px;
  --hdr:  64px;
  --dur:  .34s;
  --ease: cubic-bezier(.22,.61,.36,1);

  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-2: 0 2px 6px rgba(0,0,0,.55), 0 28px 60px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink); color:var(--text);
  font-family:var(--f-sans); font-size:16px; line-height:1.55;
  font-feature-settings:"cv05" 1,"ss01" 1,"tnum" 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overscroll-behavior-y:none;
  min-height:100vh; min-height:100dvh;
}
::selection{ background:rgba(79,179,163,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--r1); }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font:inherit; color:inherit; }

/* ---------------------------------------------------------------- shell -- */
#field{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.shell{ position:relative; z-index:2; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--s6); }

/* --------------------------------------------------------------- header -- */
.hdr{
  position:sticky; top:0; z-index:40; height:var(--hdr);
  display:flex; align-items:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(7,11,18,.92), rgba(7,11,18,.66));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.hdr .wrap{ display:flex; align-items:center; gap:var(--s4); }
.brand{ display:flex; align-items:center; gap:var(--s3); margin-right:auto; min-width:0; }
.brand:hover .mark{ transform:rotate(-4deg) scale(1.03); }
.mark{ width:38px; height:38px; flex:none; transition:transform var(--dur) var(--ease); }
.wm{ min-width:0; }
.wm b{
  display:block; font-weight:700; font-size:15px; letter-spacing:.16em;
  color:var(--parch); line-height:1.1; white-space:nowrap;
}
.wm span{
  display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em;
  color:var(--dim); text-transform:uppercase; margin-top:3px; white-space:nowrap;
}
.hdr-tools{ display:flex; align-items:center; gap:var(--s2); }

.pill{
  display:inline-flex; align-items:center; gap:var(--s2);
  height:32px; padding:0 var(--s3); border-radius:var(--rf);
  border:1px solid var(--line-2); background:rgba(19,28,44,.6);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pill:hover{ border-color:var(--line-3); color:var(--text); }
.pill[aria-pressed="true"]{
  border-color:var(--teal-dim); color:var(--teal);
  background:rgba(79,179,163,.10);
}
.pill .led{ width:6px; height:6px; border-radius:50%; background:var(--faint); flex:none; }
.pill[aria-pressed="true"] .led{ background:var(--teal); box-shadow:0 0 0 3px rgba(79,179,163,.18); }

/* inconspicuous account control: a 9px dot, nothing more */
.authdot{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center; position:relative;
  transition:background var(--dur) var(--ease);
}
.authdot:hover{ background:rgba(255,255,255,.05); }
.authdot i{
  width:9px; height:9px; border-radius:50%; display:block;
  background:var(--faint); box-shadow:0 0 0 0 rgba(45,122,255,0);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.authdot[data-state="in"] i{ background:var(--blue); box-shadow:0 0 0 4px rgba(45,122,255,.16); }
.authdot[data-state="pending"] i{ background:var(--amber); animation:blink 1.1s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ----------------------------------------------------------------- hero -- */
.hero{ padding-top:var(--s24); padding-bottom:var(--s16); }
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
  padding:var(--s1) 0 var(--s5);
}
.eyebrow s{ width:28px; height:1px; background:var(--line-2); display:block; }
h1{
  font-family:var(--f-serif); font-weight:300;
  font-size:clamp(34px, 6.4vw, 68px); line-height:1.06;
  letter-spacing:-.022em; color:var(--parch);
  margin:0 0 var(--s6); max-width:20ch;
}
h1 em{ font-style:italic; color:#fff; }
.lede{
  font-size:clamp(15.5px,1.65vw,19px); line-height:1.62;
  color:var(--muted); max-width:62ch; margin:0 0 var(--s10);
}
.lede b{ color:var(--text); font-weight:500; }

.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r3); overflow:hidden; margin-bottom:var(--s6);
}
.metric{ background:var(--ink-1); padding:var(--s4) var(--s5); }
.metric b{
  display:block; font-family:var(--f-mono); font-size:22px; font-weight:500;
  color:var(--parch); letter-spacing:-.01em; line-height:1.2;
}
.metric span{
  display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-top:var(--s2);
}

.notice{
  display:flex; gap:var(--s3); align-items:flex-start;
  border:1px solid var(--line-2); border-left:2px solid var(--amber-dim);
  border-radius:var(--r2); background:rgba(14,21,34,.72);
  padding:var(--s4) var(--s5); font-size:13.5px; line-height:1.6; color:var(--muted);
}
.notice svg{ flex:none; margin-top:2px; }
.notice b{ color:var(--text); font-weight:600; }

/* --------------------------------------------------------------- section -- */
.sec{ padding-block:var(--s16); }
.sec-head{
  display:flex; align-items:baseline; gap:var(--s4);
  padding-bottom:var(--s6); border-bottom:1px solid var(--line);
  margin-bottom:var(--s8);
}
.sec-head h2{
  font-size:13px; font-weight:600; letter-spacing:.02em; margin:0; color:var(--parch);
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.16em;
}
.sec-head p{ margin:0; font-size:13px; color:var(--dim); margin-left:auto; text-align:right; }
.idx{ font-family:var(--f-mono); font-size:11px; color:var(--faint); }

/* ---------------------------------------------------------------- tiles -- */
.grid{
  display:grid; gap:var(--gut);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:640px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1024px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.tile{
  position:relative; display:flex; flex-direction:column; text-align:left;
  aspect-ratio:1/1.135;
  border:1px solid var(--line); border-radius:var(--r4);
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1) 62%);
  overflow:hidden; isolation:isolate;
  padding:var(--s4);
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
@media(min-width:640px){ .tile{ aspect-ratio:1/1.08; padding:var(--s5); } }
.tile canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.9; }
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(7,11,18,.82) 100%);
}
.tile:hover{ transform:translateY(-3px); border-color:var(--line-3); box-shadow:var(--shadow-2); }
.tile:active{ transform:scale(.972); transition-duration:.09s; }
.tile-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2); }
.glyph{
  width:44px; height:44px; border-radius:var(--r2); flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(7,11,18,.55);
  backdrop-filter:blur(6px);
}
.glyph svg{ width:24px; height:24px; }
.tile-n{ font-family:var(--f-mono); font-size:9.5px; color:var(--faint); letter-spacing:.1em; padding-top:var(--s1); }
.tile-body{ margin-top:auto; }
.tile h3{
  margin:0 0 var(--s2); font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--parch);
}
@media(min-width:640px){ .tile h3{ font-size:16.5px; } }
.tile p{
  margin:0; font-size:12.5px; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tile .kick{
  margin-top:var(--s3); font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; gap:var(--s2);
}
.tile .kick s{ height:1px; flex:1; background:var(--line-2); display:block; }

/* --------------------------------------------------------------- ledger -- */
.ledger{ border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; background:rgba(10,15,26,.6); }
.ledger-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4); align-items:center;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);
  font-size:13.5px; transition:background var(--dur) var(--ease);
}
.ledger-row:last-child{ border-bottom:0; }
.ledger-row:hover{ background:rgba(19,28,44,.6); }
.ledger-row .t{ font-family:var(--f-mono); font-size:10.5px; color:var(--dim); letter-spacing:.06em; }
.ledger-row .q{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ledger-row .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.ledger-empty{ padding:var(--s10) var(--s5); text-align:center; color:var(--dim); font-size:13.5px; }

/* --------------------------------------------------------------- footer -- */
footer{
  margin-top:var(--s16); border-top:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(10,15,26,0), rgba(10,15,26,.9));
  padding-block:var(--s12) var(--s10);
}
.foot-grid{ display:grid; gap:var(--s10); grid-template-columns:1fr; }
@media(min-width:860px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr; } }
.foot h4{
  margin:0 0 var(--s4); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
}
.foot ul{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s3); }
.foot a{ font-size:13.5px; color:var(--muted); transition:color var(--dur) var(--ease); }
.foot a:hover{ color:var(--parch); }
.legal{
  margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:center;
  font-size:12px; color:var(--dim); line-height:1.6;
}
.legal .sig{ display:inline-flex; align-items:center; gap:var(--s2); margin-left:auto; white-space:nowrap; }
.bluedot{
  width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none;
  box-shadow:0 0 0 3px rgba(45,122,255,.16);
}
.legal small{ display:block; font-size:11.5px; color:var(--faint); max-width:78ch; }

/* ---------------------------------------------------------------- sheet -- */
.sheet{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(4,7,12,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sheet[data-open]{ display:block; }
.sheet-panel{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--ink-1);
  animation:rise .42s var(--ease);
}
@media(min-width:900px){
  .sheet-panel{
    inset:var(--s6); border:1px solid var(--line-2); border-radius:var(--r5);
    box-shadow:0 40px 120px -30px rgba(0,0,0,.9); overflow:hidden;
  }
}
@keyframes rise{ from{ transform:translateY(3%); opacity:0; } to{ transform:none; opacity:1; } }

.sheet-hdr{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);
  padding-top:max(var(--s4), env(safe-area-inset-top)); flex:none;
  background:rgba(14,21,34,.8);
}
.sheet-hdr .glyph{ width:38px; height:38px; }
.sheet-hdr .glyph svg{ width:21px; height:21px; }
.sheet-id{ min-width:0; margin-right:auto; }
.sheet-id b{ display:block; font-size:15px; font-weight:600; color:var(--parch); line-height:1.25; }
.sheet-id span{
  display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.icobtn{
  width:36px; height:36px; border-radius:var(--r2); display:grid; place-items:center; flex:none;
  border:1px solid transparent; color:var(--muted);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icobtn:hover{ background:rgba(255,255,255,.055); color:var(--parch); border-color:var(--line-2); }
.icobtn:disabled{ opacity:.35; cursor:default; }
.icobtn svg{ width:18px; height:18px; }

.sheet-body{ flex:1; min-height:0; display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
@media(min-width:1000px){
  .sheet-body{ grid-template-rows:none; grid-template-columns:392px 1fr; }
}
.pane-in{
  padding:var(--s5); overflow-y:auto; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s4);
  -webkit-overflow-scrolling:touch;
}
@media(min-width:1000px){ .pane-in{ border-bottom:0; border-right:1px solid var(--line); } }
.pane-out{ overflow-y:auto; position:relative; -webkit-overflow-scrolling:touch; }
.pane-out-inner{ padding:var(--s6) var(--s5) var(--s16); max-width:74ch; margin:0 auto; }
@media(min-width:1000px){ .pane-out-inner{ padding:var(--s8) var(--s10) var(--s24); } }

.fld{ display:grid; gap:var(--s2); }
.fld label{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.fld .hint{ font-size:11.5px; color:var(--faint); line-height:1.5; }
textarea,input[type=text],select{
  width:100%; background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:var(--r2); padding:var(--s3) var(--s4); font-size:14.5px; line-height:1.55;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  resize:vertical; -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238B98AB' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s4) center; padding-right:var(--s10);
}
textarea{ min-height:132px; font-family:var(--f-sans); }
textarea:focus,input:focus,select:focus{ border-color:var(--teal-dim); background:var(--ink-3); outline:none; }
textarea::placeholder,input::placeholder{ color:var(--faint); }

.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{
  padding:var(--s2) var(--s3); border-radius:var(--rf); border:1px solid var(--line-2);
  background:rgba(19,28,44,.5); font-size:12px; color:var(--muted);
  transition:all var(--dur) var(--ease); text-align:left;
}
.chip:hover{ border-color:var(--line-3); color:var(--text); }
.chip[aria-pressed="true"]{ border-color:var(--teal-dim); background:rgba(79,179,163,.12); color:var(--teal); }

.run{
  height:48px; border-radius:var(--r2); width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  background:linear-gradient(180deg,#F3EFE6,#DCD6C7); color:#0A1220;
  font-weight:650; font-size:14.5px; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 24px -12px rgba(237,232,220,.5);
  transition:transform .16s var(--ease), filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.run:hover{ filter:brightness(1.04); }
.run:active{ transform:scale(.985); }
.run:disabled{ opacity:.5; cursor:default; transform:none; }
.run svg{ width:17px; height:17px; }
.run.stop{ background:linear-gradient(180deg,#2A3648,#1E2836); color:var(--parch); box-shadow:none; }

.meta-strip{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); padding-top:var(--s2);
}
.meta-strip b{ color:var(--muted); font-weight:400; }

/* thinking trace */
.think{
  border:1px solid var(--line-2); border-radius:var(--r2); background:rgba(14,21,34,.6);
  margin-bottom:var(--s6); overflow:hidden;
}
.think summary{
  cursor:pointer; padding:var(--s3) var(--s4); list-style:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:var(--s2);
}
.think summary::-webkit-details-marker{ display:none; }
.think .body{
  padding:0 var(--s4) var(--s4); font-family:var(--f-mono); font-size:11.5px; line-height:1.72;
  color:var(--dim); white-space:pre-wrap; max-height:340px; overflow-y:auto;
  border-top:1px solid var(--line);
  padding-top:var(--s4);
}

/* output prose */
.prose{ font-family:var(--f-serif); font-size:17px; line-height:1.72; color:#E4E9F1; }
.prose>*:first-child{ margin-top:0; }
.prose h2{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:var(--s10) 0 var(--s4); font-weight:500;
  padding-bottom:var(--s3); border-bottom:1px solid var(--line);
}
.prose h3{
  font-family:var(--f-sans); font-size:16px; font-weight:650; letter-spacing:-.005em;
  color:var(--parch); margin:var(--s8) 0 var(--s3);
}
.prose h4{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin:var(--s6) 0 var(--s2); font-weight:500;
}
.prose p{ margin:0 0 var(--s5); }
.prose strong{ color:#fff; font-weight:600; }
.prose em{ font-style:italic; color:var(--parch); }
.prose ul,.prose ol{ margin:0 0 var(--s5); padding-left:var(--s6); }
.prose li{ margin-bottom:var(--s3); }
.prose li::marker{ color:var(--faint); }
.prose blockquote{
  margin:0 0 var(--s5); padding:var(--s3) 0 var(--s3) var(--s5);
  border-left:2px solid var(--teal-dim); color:var(--muted); font-style:italic;
}
.prose hr{ border:0; border-top:1px solid var(--line); margin:var(--s8) 0; }
.prose code{
  font-family:var(--f-mono); font-size:.855em; background:rgba(19,28,44,.9);
  border:1px solid var(--line); border-radius:var(--r1); padding:1px 5px; color:var(--teal);
}
.prose pre{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.65; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r2); padding:var(--s4);
  overflow-x:auto; margin:0 0 var(--s5);
}
.prose pre code{ background:none; border:0; padding:0; color:var(--text); }
.prose table{
  width:100%; border-collapse:collapse; font-family:var(--f-sans); font-size:13.5px;
  margin:0 0 var(--s5); display:block; overflow-x:auto; white-space:nowrap;
}
@media(min-width:700px){ .prose table{ display:table; white-space:normal; } }
.prose th{
  text-align:left; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-2); vertical-align:bottom;
}
.prose td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); vertical-align:top; color:var(--text); }
.prose tr:last-child td{ border-bottom:0; }
.cursor{
  display:inline-block; width:8px; height:1.02em; vertical-align:-2px;
  background:var(--teal); animation:caret .9s steps(2) infinite; margin-left:2px; border-radius:1px;
}
@keyframes caret{ 50%{ opacity:0; } }

/* pole blocks: symmetric by construction */
.poles{ display:grid; gap:var(--gut); margin:0 0 var(--s6); }
@media(min-width:760px){ .poles{ grid-template-columns:1fr 1fr; } }
.pole{ border:1px solid var(--line-2); border-radius:var(--r3); padding:var(--s5); background:rgba(14,21,34,.55); }
.pole.a{ border-top:2px solid var(--teal); }
.pole.b{ border-top:2px solid var(--amber); }
.pole h5{
  margin:0 0 var(--s3); font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500;
}
.pole.a h5{ color:var(--teal); } .pole.b h5{ color:var(--amber); }
.balance{ display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s6); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.balance .bar{ flex:1; height:3px; border-radius:2px; background:var(--line-2); overflow:hidden; display:flex; }
.balance .bar i{ display:block; height:100%; transition:width .8s var(--ease); }
.balance .bar i:first-child{ background:var(--teal); } .balance .bar i:last-child{ background:var(--amber); }

/* timeline render */
.tl{ position:relative; padding-left:var(--s8); }
.tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--line-2); }
.tl-item{ position:relative; padding-bottom:var(--s6); }
.tl-item::before{
  content:""; position:absolute; left:-25px; top:7px; width:9px; height:9px; border-radius:50%;
  background:var(--ink-1); border:2px solid var(--teal);
}
.tl-item .yr{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--amber); }
.tl-item h6{ margin:var(--s1) 0 var(--s2); font-family:var(--f-sans); font-size:15px; font-weight:600; color:var(--parch); }
.tl-item p{ margin:0; font-size:14px; color:var(--muted); line-height:1.62; font-family:var(--f-sans); }

/* matrix render */
.mx{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); }
.mx table{ margin:0; display:table; width:100%; border-collapse:collapse; font-size:13px; }
.mx th.rowh{ text-transform:none; letter-spacing:0; font-family:var(--f-sans); font-size:13px; color:var(--parch); font-weight:600; }

/* share bar */
.sharebar{
  display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line);
}
.sharebar .lbl{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-right:var(--s2); }
.sbtn{
  display:inline-flex; align-items:center; gap:var(--s2); height:34px; padding:0 var(--s3);
  border:1px solid var(--line-2); border-radius:var(--r2); background:rgba(19,28,44,.5);
  font-size:12.5px; color:var(--muted); transition:all var(--dur) var(--ease);
}
.sbtn:hover{ border-color:var(--line-3); color:var(--parch); background:rgba(19,28,44,.9); }
.sbtn svg{ width:15px; height:15px; }
.sbtn.ok{ border-color:var(--teal-dim); color:var(--teal); }

/* skeleton / status */
.status{
  display:flex; align-items:center; gap:var(--s3); color:var(--dim);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:var(--s5) 0;
}
.spin{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--line-3); border-top-color:var(--teal); animation:sp .8s linear infinite; flex:none; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.err{
  border:1px solid var(--amber-dim); border-left:2px solid var(--amber); border-radius:var(--r2);
  background:rgba(217,154,70,.06); padding:var(--s4) var(--s5); font-size:13.5px; color:var(--text);
  font-family:var(--f-sans); line-height:1.6;
}
.err b{ display:block; margin-bottom:var(--s1); color:var(--amber); font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.blank{ color:var(--faint); font-family:var(--f-sans); font-size:14px; line-height:1.7; max-width:46ch; }

/* modal (auth / share card) */
.modal{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:var(--s5); background:rgba(4,7,12,.78); backdrop-filter:blur(8px); }
.modal[data-open]{ display:grid; }
.card{
  width:100%; max-width:412px; background:var(--ink-1); border:1px solid var(--line-2);
  border-radius:var(--r4); padding:var(--s8) var(--s6) var(--s6); box-shadow:var(--shadow-2);
  animation:rise .3s var(--ease);
}
.card.wide{ max-width:600px; }
.card h3{ margin:0 0 var(--s2); font-size:19px; font-weight:600; color:var(--parch); letter-spacing:-.01em; }
.card p{ margin:0 0 var(--s6); font-size:13.5px; color:var(--muted); line-height:1.62; }
.card .row{ display:flex; gap:var(--s2); margin-top:var(--s4); }
.card .row .run{ flex:1; }
.card .tiny{ font-size:11.5px; color:var(--faint); margin:var(--s5) 0 0; line-height:1.6; }
.sharecanvas{ width:100%; border:1px solid var(--line-2); border-radius:var(--r2); margin-bottom:var(--s4); }

/* utility */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.doc{ max-width:76ch; margin:0 auto; padding-block:var(--s16); }
.doc h1{ font-size:clamp(28px,4vw,42px); margin-bottom:var(--s4); }
.doc h2{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin:var(--s12) 0 var(--s4); }
.doc p,.doc li{ font-size:15px; line-height:1.72; color:var(--muted); }
.doc strong{ color:var(--text); }
.doc .updated{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--s10); }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}