/* Variation E demo: a computer running Claude Code beside carbon.
   The page around the laptop is black, white and grey. Inside the screen the two apps use their real colours.
   The screen is drawn at a fixed logical size (1280x800, or 520x1000 on narrow pages) and scaled to fit. */
#demo .w{max-width:1320px}
.dm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.dm-tabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(247,240,224,.6);border:1px solid #f7f0e0;box-shadow:inset 0 1px 0 #f7f0e0,0 10px 30px -14px rgba(0,0,0,.3)}
.dm-tabs button{border:0;background:transparent;color:#555;font:500 13.5px Inter,system-ui,sans-serif;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.dm-tabs button:hover{color:#111}
.dm-tabs button[aria-selected=true]{background:#7a2236;color:#ebe0cb}
@media(max-width:900px){.dm-head{grid-template-columns:1fr}.dm-tabs{justify-self:start;max-width:100%;overflow-x:auto}}

.mac{position:relative;margin:0 auto;max-width:1180px}
.mac-lid{position:relative;background:#0a0a0a;border:1px solid #3d3d3d;border-radius:22px 22px 8px 8px;padding:16px 16px 18px;box-shadow:inset 0 0 0 2px #191919,inset 0 1px 0 2px #2c2c2c,0 60px 110px -50px rgba(0,0,0,.75)}
.mac-lid::before{content:"";position:absolute;left:50%;top:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2e2e2e}
.mac-scr{position:relative;aspect-ratio:1280/800;overflow:hidden;border-radius:6px;background:#161616}
.mac-base{position:relative;height:15px;margin:0 -5.5%;border-radius:3px 3px 16px 16px;background:linear-gradient(#dcdcdc,#a9a9a9 30%,#6b6b6b 85%,#3a3a3a);box-shadow:0 30px 40px -20px rgba(0,0,0,.55)}
.mac-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:6px;transform:translateX(-50%);border-radius:0 0 9px 9px;background:linear-gradient(#8a8a8a,#b5b5b5)}
/* between these widths the laptop fills the page, and its base (wider than the lid) must stay inside the gutter */
@media(min-width:720px) and (max-width:1320px){.mac-base{margin:0 max(-5.5%,calc(4px - var(--gut)))}}
/* phone: the screen is taller than it is wide, which no laptop is. The lid and the base go, and the screen stands on its own. */
@media(max-width:719px){.mac-lid{padding:0;border:0;background:none;border-radius:14px;box-shadow:0 0 0 1px rgba(13,20,36,.9),0 34px 60px -36px rgba(13,20,36,.7)}.mac-lid::before{display:none}.mac-scr{aspect-ratio:520/1000;border-radius:14px}.mac-base{display:none}}

.scr{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(calc(var(--k,1)*var(--z,1)));transition:transform .6s cubic-bezier(.23,1,.32,1);color:#eaeaea;font:400 13px/1.45 Inter,system-ui,sans-serif;
  background:radial-gradient(#2a3a5c 1px,transparent 1.4px) 0 0/9px 9px,radial-gradient(70% 80% at 28% 18%,#7a2236,#1b2b4b 55%,#0a1020)}
.scr.tall{width:520px;height:1000px}
.scr *{box-sizing:border-box}
.mb{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:18px;padding:0 14px;background:rgba(18,18,18,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:12px;color:#d6d6d6}
.mb b{font-weight:600}.mb .r{margin-left:auto;display:flex;gap:14px;color:#bdbdbd}
.mb .lg{width:11px;height:11px;border-radius:3px;background:#d6d6d6}
.win{position:absolute;display:flex;flex-direction:column;border-radius:11px;overflow:hidden;background:#0f0f0f;border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 80px -22px rgba(0,0,0,.85)}
.win-t{left:20px;top:44px;width:470px;height:736px}
.win-b{left:502px;top:44px;width:758px;height:736px}
.tall .win-t{left:12px;top:38px;width:496px;height:350px}
.tall .win-b{left:12px;top:400px;width:496px;height:588px}
.win-bar{flex:none;height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#2a2a2c;border-bottom:1px solid rgba(0,0,0,.5);font-size:12px;color:#a8a8a8}
.tl3{display:flex;gap:7px}.tl3 i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.tl3 i:nth-child(2){background:#febc2e}.tl3 i:nth-child(3){background:#28c840}
.win-bar .ttl{flex:1;text-align:center;margin-right:46px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url{flex:1;display:flex;align-items:center;gap:7px;height:23px;padding:0 10px;border-radius:7px;background:#1b1b1d;font:400 11.5px 'JetBrains Mono',monospace;color:#c8c8c8}
.url i{width:7px;height:7px;border-radius:50%;border:1.5px solid #888}

/* ---- terminal: a Claude Code session, in its own colours ---- */
.term{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px 9px;font:400 12.5px/1.55 'JetBrains Mono',ui-monospace,Menlo,monospace;background:#1b1b1d;color:#d7d7d7;--or:#d97757;--gr:#4eba65;--rd:#ff6b80;--dim:#8a8a8a;--pu:#af87ff;--bl:#8fb2ff}
.tlog{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.tw{border:1px solid var(--or);border-radius:6px;padding:8px 12px;margin-bottom:4px}
.tw b{color:var(--or);font-weight:500}.tw span{display:block;color:var(--dim)}.tw em{font-style:normal;color:var(--gr)}
.tln{margin-top:9px;white-space:pre-wrap;animation:dm-in .35s both}
.tln.p{color:#9d9d9d}.tln.p::before{content:"> "}
.tln.h{color:var(--dim);padding-left:16px}.tln.h::before{content:"⎿  "}
.tln.a,.tln.t,.tln.e{padding-left:17px;text-indent:-17px}
.tln.a::before{content:"● ";color:#fff}
.tln.t::before,.tln.e::before{content:"● ";color:var(--gr)}
.tln b{color:#fff;font-weight:500}
.tln u{text-decoration:none;color:var(--bl)}
.tln .ar{color:var(--dim)}
.tr{display:block;text-indent:0;color:var(--dim);margin-top:1px}.tr::before{content:"⎿  "}
.df{display:block;text-indent:0;margin:1px 0 0 22px;padding:0 6px;white-space:pre;overflow:hidden}
.df.ad{background:#1f3d2a;color:#b9f0c8}.df.rm{background:#4a2227;color:#ffc2c9}
.busy{margin-top:10px;color:var(--or)}
.busy i{display:inline-block;font-style:normal;animation:dm-spin 1.2s steps(6) infinite}
.busy span{color:var(--dim)}
@keyframes dm-spin{0%{opacity:1}50%{opacity:.35}}
.tin{flex:none;display:flex;gap:8px;align-items:center;margin-top:10px;border:1px solid #5b5b5b;border-radius:7px;padding:6px 10px;color:#9d9d9d}
.tin:focus-within{border-color:#c9c9c9}
.tin input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;caret-color:#fff;padding:0}
.tin input::placeholder{color:#6f6f6f}
.tst{flex:none;display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:11px;color:#6f6f6f;white-space:nowrap;overflow:hidden}
.tst b{color:var(--pu);font-weight:400}
@keyframes dm-in{from{opacity:0;transform:translateY(5px)}}

/* ---- carbon web app: the real navy theme, fonts and wording ---- */
.cb{flex:1;min-height:0;overflow:auto;background:var(--g);color:var(--t);font:400 13px/1.55 'Instrument Sans',Inter,system-ui,sans-serif;
  --g:#0d1424;--raised:#121b30;--well:#0a1020;--blue:#1b2b4b;--t:#ebe0cb;--m:#aaa797;--l:rgba(235,224,203,.14);--l2:rgba(235,224,203,.32);--burg:#7a2236;--bh:#e0929f;--gh:#8fcaa7}
.cb-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:20px;padding:11px 20px;background:var(--g);border-bottom:1px solid var(--l)}
.lgo{display:flex;align-items:center;gap:7px}
.lgo svg{width:19px;height:19px}
.wm{font:700 18px/1 'Kode Mono',ui-monospace,monospace;letter-spacing:-.04em;color:var(--t)}
.wm sup{font:500 8px 'JetBrains Mono',monospace;color:var(--gh);margin-left:1px;vertical-align:8px}
.cb-nav{display:flex;gap:15px;font-size:12.5px}
.cb-nav button{border:0;background:none;padding:3px 0;color:var(--m);font:inherit;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.cb-nav button:hover{color:var(--t)}
.cb-nav button[aria-current=page]{color:var(--t);border-bottom-color:var(--bh)}
.tall .cb-nav{gap:10px;font-size:11px}.tall .cb-me,.tall .cbn,.tall .lgo svg{display:none}
.cbn{margin-left:auto;border-radius:999px;background:var(--burg);color:var(--t);font-size:11.5px;font-weight:500;padding:5px 12px;white-space:nowrap}
.cb-me{font-size:12px;white-space:nowrap}.cb-me span{color:var(--m)}
.pg{padding:20px 20px 30px;animation:dm-in .4s both}
.ml{font:500 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--m)}
.hl{font:400 36px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.015em;margin:7px 0 9px;color:var(--t)}
.hl i{font-style:normal;color:var(--bh)}
.pg .ld{color:var(--m);font-size:13px;max-width:60ch}
.sl{display:flex;justify-content:space-between;gap:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--m);margin:24px 0 0;padding-bottom:9px;border-bottom:1px solid var(--l2)}
.st4{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--l);margin-top:16px}
.st4>div{padding:11px 13px;border-left:1px solid var(--l)}.st4>div:first-child{border-left:0}
.st4 b{display:block;font:400 32px/1.1 'Instrument Serif',Georgia,serif;color:var(--t)}
.st4 .hot b,.st4 .hot .ml{color:var(--bh)}
.tg{display:inline-flex;align-items:center;gap:5px;font:500 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--l2);color:var(--t);white-space:nowrap}
.tg.act{color:var(--gh);border-color:var(--gh)}.tg.act::before{content:"";width:5px;height:5px;background:var(--gh)}
.tg.al{color:var(--bh);border-color:var(--bh)}.tg.al::before{content:"";border:3.5px solid transparent;border-bottom:6px solid var(--bh);border-top:0}
.tg.dn{color:var(--m)}.tg.dn::before{content:"✓"}
.tg.pl{color:var(--m);border-style:dashed}
.tg.qt{color:var(--m);border-color:var(--l)}
.look{border:1px solid var(--l2);background:var(--raised);padding:14px;margin-top:12px;animation:dm-in .5s both}
.look h4{font:500 15.5px/1.3 'Instrument Sans',sans-serif;margin:10px 0;color:var(--t)}
.tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tags .ml{margin-left:auto}
.well{background:var(--well);border:1px solid var(--l)}
.well>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--l)}.well>div:first-child{border-top:0}
.well .tx{font-size:13.5px;color:var(--t);margin-top:2px}.well small,.sm{color:var(--m);font-size:12px}
.nt{color:var(--m);font-size:12px;margin:10px 0}
.bt{white-space:nowrap;flex:none;display:inline-flex;gap:6px;align-items:center;border:1px solid var(--l2);background:transparent;color:var(--t);font:500 12.5px 'Instrument Sans',sans-serif;padding:7px 13px;cursor:pointer}
.bt:hover{background:var(--blue)}
.bt.pr{background:var(--t);color:var(--g);border-color:var(--t)}.bt.pr:hover{background:#fff}
.per{padding:12px 0;border-bottom:1px solid var(--l)}
.per-h{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center}
.av{width:28px;height:28px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:11.5px;color:var(--t)}
.av.c{background:var(--burg);font:700 13px 'Kode Mono',monospace}
.nm{font-weight:500;color:var(--t)}
.wk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;margin:9px 0 0 38px;animation:dm-in .5s both}
.wk .i{color:var(--t);font-size:13px}.wk .rt{text-align:right}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.side2{border:1px solid var(--l);background:var(--raised);padding:11px 12px}.side2 .tx{font-size:14px;color:var(--t);margin:3px 0}
.decide{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin-top:18px}
.tall .decide,.tall .sides,.tall .two2{grid-template-columns:1fr}
.q{font:400 23px/1.15 'Instrument Serif',Georgia,serif;margin:2px 0 10px;color:var(--t)}
.op{display:grid;grid-template-columns:16px 1fr;gap:10px;width:100%;text-align:left;border:1px solid var(--l);background:transparent;color:inherit;font:inherit;padding:9px 11px;margin-top:6px;cursor:pointer}
.op:hover{border-color:var(--l2)}
.op i{width:13px;height:13px;border-radius:50%;border:1px solid var(--m);margin-top:3px}
.op[aria-checked=true]{border-color:var(--t);background:var(--blue)}
.op[aria-checked=true] i{background:radial-gradient(var(--t) 42%,transparent 46%);border-color:var(--t)}
.op strong{font-weight:500;color:var(--t);margin-right:7px}.op small{display:block;color:var(--m);font-size:11.5px;line-height:1.4;margin-top:2px}
.sub{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:11.5px;color:var(--m)}
.wait .op-box{animation:dm-wait 1.9s ease-out infinite}
@keyframes dm-wait{0%{box-shadow:0 0 0 0 rgba(224,146,159,.45)}100%{box-shadow:0 0 0 14px rgba(224,146,159,0)}}
.out{border:1px solid var(--l);align-self:start}
.out .strip{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;border-bottom:1px solid var(--l);background:var(--raised)}
.out ol{list-style:none;margin:0;padding:4px 11px 8px}
.out li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:7px 0;font-size:12px;border-top:1px solid var(--l)}.out li:first-child{border-top:0}
.day{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--m);margin:18px 0 2px}
.fd{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--l);font-size:13px}
.fd.new{animation:dm-new 1.8s both}
@keyframes dm-new{from{background:rgba(143,202,167,.2)}to{background:transparent}}
.fd .who{color:var(--t);font-weight:600;margin-left:7px}
.fd .mt{display:flex;gap:4px 14px;flex-wrap:wrap;margin-top:3px;font:400 11px 'JetBrains Mono',monospace;color:var(--m)}
.cb code{font:400 11.5px 'JetBrains Mono',monospace;background:rgba(235,224,203,.1);padding:1px 4px}
.kbr{display:grid;grid-template-columns:1fr 150px;gap:14px;padding:12px 0;border-bottom:1px solid var(--l);animation:dm-in .4s both}
.kbr .tx{font-size:14px;color:var(--t);margin:6px 0 4px}
.kbr .sd{font-size:11.5px;color:var(--m);text-align:right}
.tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.chat{display:grid;grid-template-columns:168px 1fr;min-height:100%}
.tall .chat{grid-template-columns:128px 1fr}
.chs{border-right:1px solid var(--l);padding:14px 10px;background:var(--well)}
.chs .ml{margin:14px 6px 5px}.chs .ml:first-child{margin-top:0}
.chs button{display:flex;justify-content:space-between;gap:6px;width:100%;text-align:left;border:0;background:none;color:var(--m);font:inherit;font-size:12.5px;padding:4px 6px;cursor:pointer}
.chs button:hover{color:var(--t)}.chs button[aria-current=true]{background:var(--blue);color:var(--t)}
.chs .ag{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--m);padding:3px 6px}
.chs .ag::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--m)}.chs .ag.on::before{background:var(--gh);border-color:var(--gh)}
.chm{padding:16px 18px 26px;min-width:0}
.chm-h{display:flex;justify-content:space-between;gap:10px;align-items:start;border-bottom:1px solid var(--l);padding-bottom:12px}
.chm-h h3{font:400 24px/1.1 'Instrument Serif',serif;margin:0 0 3px}
.msg{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--l);animation:dm-in .4s both}
.msg .w1{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.msg .w1 b{font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tall .fgrid{grid-template-columns:repeat(2,1fr)}
.fc{border:1px solid var(--l);background:var(--raised)}
.fc .pv{height:92px;display:grid;place-items:center;background:var(--well);border-bottom:1px solid var(--l);font:700 20px 'Kode Mono',monospace;color:var(--m);overflow:hidden;position:relative}
.fc .pv pre{position:absolute;inset:8px;margin:0;font:400 8px/1.5 'JetBrains Mono',monospace;color:var(--m);text-align:left;white-space:pre;overflow:hidden}
.fc .pv .im{position:absolute;inset:10px;border:1px solid var(--l2);background:linear-gradient(var(--blue) 0 22%,transparent 22%),repeating-linear-gradient(var(--l) 0 1px,transparent 1px 14px)}
.fc .mt{padding:8px 10px}.fc .fn{font:500 11.5px 'JetBrains Mono',monospace;color:var(--t)}
.box{border:1px solid var(--l2);background:var(--raised);padding:12px 14px;margin-top:14px}
.box.al{border-color:var(--bh)}
.box li{margin:5px 0 0 16px;font-size:13px}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cn{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--l)}
.emp{border:1px dashed var(--l2);padding:14px;color:var(--m);font-size:12.5px;margin-top:14px}
.lnk{border:0;background:none;padding:0;color:var(--t);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Slack mirror (#carbon-agents) ---- */
.cb.slk{background:#1a1d21;color:#d1d2d3;font-family:Lato,Inter,system-ui,sans-serif}
.slack{display:grid;grid-template-columns:170px 1fr;min-height:100%}
.tall .slack{grid-template-columns:120px 1fr}
.sk-s{background:#3f0e40;padding:12px 0;color:#cfc3cf;font-size:13px}
.sk-s h5{margin:0 14px 12px;font:700 15px Inter,sans-serif;color:#fff}
.sk-s div{padding:4px 14px}.sk-s .on{background:#1164a3;color:#fff}
.sk-s .ml{color:#b9a9b9;margin-top:10px}
.sk-m{min-width:0}
.sk-h{padding:12px 16px;border-bottom:1px solid #35373b;font:700 15px Inter,sans-serif;color:#fff;display:flex;justify-content:space-between;gap:10px;align-items:center}
.sk-h button{font:500 11.5px Inter,sans-serif;color:#d1d2d3;background:none;border:1px solid #565856;border-radius:5px;padding:4px 9px;cursor:pointer}
.sk-r{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:8px 16px;animation:dm-in .4s both}
.sk-r:hover{background:#222529}
.sk-a{width:34px;height:34px;border-radius:6px;background:#4a154b;display:grid;place-items:center;font-size:17px}
.sk-r b{color:#fff;font-weight:700}.sk-r .app{font:700 9.5px Inter,sans-serif;background:#35373b;color:#b9babd;padding:1px 4px;border-radius:3px;margin:0 6px}
.sk-r time{font-size:11px;color:#9a9b9e}
.sk-r .cx{font-size:11.5px;color:#9a9b9e;margin-top:2px}

.cur{position:absolute;z-index:9;left:640px;top:520px;width:18px;height:18px;pointer-events:none;transition:left .75s cubic-bezier(.3,.7,.2,1),top .75s cubic-bezier(.3,.7,.2,1),opacity .3s;opacity:0}
.cur.show{opacity:1}
.cur svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cur::after{content:"";position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;opacity:0}
.cur.tap::after{animation:dm-tap .32s ease-out}
@keyframes dm-tap{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.3)}}

.dm-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 26px;align-items:center;max-width:1180px;margin:clamp(34px,4vw,52px) auto 0;padding:16px 20px}
.dm-foot .n{font:400 10.5px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#666;white-space:nowrap}
.dm-foot p{font-size:15.5px;line-height:1.45;color:#0d1424;min-height:2.9em}
.dm-foot p b{font-weight:600;color:#7a2236;border-bottom:1px solid #7a2236}
.dm-foot code{font:400 13px 'JetBrains Mono',monospace;background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px}
.dm-ctl{display:flex;gap:6px}
.dm-ctl button{border:1px solid rgba(0,0,0,.22);background:rgba(255,255,255,.5);color:#0d1424;font:500 13px Inter,sans-serif;padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.dm-ctl button:hover{background:#fff}
.dm-ctl button[disabled]{opacity:.3;pointer-events:none}
.dm-ctl .pri,.dm-ctl .pri:hover{background:#7a2236;color:#ebe0cb;border-color:#7a2236}
.dm-note{max-width:1180px;margin:16px auto 0;font:400 11px/1.6 'JetBrains Mono',monospace;letter-spacing:.04em;color:#777}
@media(max-width:900px){.dm-foot{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.scr,.scr *,.cur{animation:none!important;transition:none!important}}

/* ---- variation G: overlap link in the terminal, setup pages ---- */
.tlink{all:unset;color:var(--bl);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tlink:focus-visible,.scr button:focus-visible{outline:2px solid #e0929f;outline-offset:2px}
.tln.sh{color:#d7d7d7}.tln.sh::before{content:"$ ";color:var(--dim)}
button.cbn{border:0;font:inherit;font-size:11.5px;font-weight:500;cursor:pointer}
.sl .lnk{letter-spacing:.08em}
.wys{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--l);margin-top:10px}
.wy{display:flex;flex-direction:column;gap:5px;text-align:left;border:0;border-left:1px solid var(--l);background:var(--raised);color:inherit;font:inherit;padding:12px;cursor:pointer}
.wy:first-child{border-left:0}.wy:hover{background:var(--blue)}
.wy>div{display:flex;justify-content:space-between;align-items:center;gap:6px}
.wn{font:400 24px/1 'Instrument Serif',Georgia,serif;color:var(--bh)}
.wy strong{font-weight:500;font-size:14.5px;color:var(--t)}
.wy small{color:var(--m);font-size:12px;line-height:1.4}
.wy .ml{margin-top:auto;padding-top:4px;color:var(--t)}
.tall .wys{grid-template-columns:1fr!important}.tall .wy{border-left:0;border-top:1px solid var(--l)}.tall .wy:first-child{border-top:0}
.stp{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--l)}
.stp>b{font:400 22px/1 'Instrument Serif',Georgia,serif;color:var(--bh)}
.stp strong{display:block;font-weight:500;color:var(--t)}
.stp small{display:block;color:var(--m);font-size:12px;margin:2px 0 6px}
.auth{max-width:380px;margin:26px auto;border:1px solid var(--l2);background:var(--raised);padding:20px;animation:dm-in .4s both}
.auth .tabs2{margin:0 0 14px;gap:16px}
.auth .tabs2 .on{color:var(--t);border-bottom:2px solid var(--bh);padding-bottom:3px}
.fl{margin-top:11px}
.fl span{display:block;font-size:12px;color:var(--m);margin-bottom:4px}
.fl div{border:1px solid var(--l2);background:var(--well);padding:7px 10px;min-height:33px;color:var(--t);font-size:13px}
.fl small{color:var(--m);font-size:11.5px}
.auth>.bt{margin-top:14px}
.perm{display:grid;grid-template-columns:16px 1fr;gap:8px;padding:6px 0;font-size:13px}
.perm b{color:var(--gh);font-weight:400}.perm b.no{color:var(--bh)}

/* reading along while zoomed in */
.reading .rw{opacity:.42;border-radius:3px;transition:opacity .12s,background .12s}
.reading .rw.rd{opacity:1}
.reading .rw.now{background:rgba(235,224,203,.24);box-shadow:0 0 0 2px rgba(235,224,203,.24)}
@media(prefers-reduced-motion:reduce){.reading .rw{opacity:1;transition:none}}