/* 08 — Code. Tokens first: the page is one IDE theme, plus a paper theme it can flip into. */
:root {
  --bg: #0b0e14; --bg-2: #0e1219; --bg-3: #131823; --bg-4: #1a2030;
  --line: #1f2633; --line-2: #2c3546;
  --fg: #e8edf5; --fg-2: #a4aebd; --fg-3: #6c7789;
  --lime: #b6ff5c; --lime-d: #7dbd38; --lime-ink: #0b0e14;
  --violet: #b794ff; --amber: #ffa24c; --red: #ff6d6d;
  --add-bg: rgba(182,255,92,.09); --del-bg: rgba(255,109,109,.1); --sel: rgba(183,148,255,.12);
  --t-kw: var(--violet); --t-str: var(--lime); --t-num: var(--amber); --t-fn: #d7ffb0; --t-prop: #c8d2e0; --t-type: var(--amber); --t-com: #66728a; --t-op: #8a94a6; --t-err: var(--red);
  --mono: "JetBrains Mono", "M PLUS 1 Code", ui-monospace, "SF Mono", Menlo, monospace;
  --disp: "Martian Mono", "M PLUS 1 Code", "JetBrains Mono", ui-monospace, monospace;
  --gut: 56px; --pad: clamp(16px, 3.2vw, 48px); --hdr: 44px; --st: 26px;
  --ease: cubic-bezier(.2,.9,.2,1);
}
.chrome { color: var(--fg-2); }
html[data-theme="light"] .chrome, .paper {
  --bg: #f5f4ee; --bg-2: #efeee6; --bg-3: #e8e6dc; --bg-4: #dcdace;
  --line: #dbd9cd; --line-2: #c5c2b4;
  --fg: #13161d; --fg-2: #4a5160; --fg-3: #737b89;
  --lime: #3f7d00; --lime-d: #356a00; --lime-ink: #f5f4ee;
  --violet: #6a3fd1; --amber: #b45400; --red: #c92a2a;
  --add-bg: rgba(63,125,0,.1); --del-bg: rgba(201,42,42,.09); --sel: rgba(106,63,209,.1);
  --t-kw: #6a3fd1; --t-str: #3f7d00; --t-num: #b45400; --t-fn: #1d5b00; --t-prop: #2f3a4a; --t-type: #b45400; --t-com: #7a8293; --t-op: #6b7280; --t-err: #c92a2a;
}

* { box-sizing: border-box; }
html { background: #0b0e14; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg); position: relative; overflow-x: clip;
  font: 400 14px/1.75 var(--mono); font-feature-settings: "calt" 1, "liga" 1; -webkit-font-smoothing: antialiased;
}
body.is-booting { overflow: hidden; height: 100vh; }
.has-caret, .has-caret a, .has-caret button, .has-caret summary, .has-caret select, .has-caret input[type=range], .has-caret [role=tab] { cursor: none; }
.has-caret textarea, .has-caret input:not([type=range]) { cursor: text; }
a { color: inherit; }
pre, code, kbd { font-family: var(--mono); }
pre { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--lime); color: #0b0e14; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 2000; background: var(--lime); color: var(--lime-ink); padding: 6px 12px; text-decoration: none; }
.skip:focus { top: 8px; }
.wrap { padding-left: calc(var(--gut) + var(--pad)); padding-right: var(--pad); }

.mark { fill: none; stroke: currentColor; stroke-width: 34; stroke-linejoin: miter; stroke-linecap: butt; display: block; }
.t-kw { color: var(--t-kw); } .t-str { color: var(--t-str); } .t-num { color: var(--t-num); } .t-fn { color: var(--t-fn); }
.t-prop, .t-id { color: var(--t-prop); } .t-id { color: var(--fg); } .t-type { color: var(--t-type); }
.t-com { color: var(--t-com); font-style: italic; } .t-op { color: var(--t-op); } .t-err { color: var(--t-err); }

/* type */
.cmt { color: var(--t-com); font-size: 13px; }
.h2 { font: 400 clamp(28px, 4.1vw, 60px)/1.2 var(--disp); font-stretch: 75%; letter-spacing: -.035em; color: var(--fg); }
.h2 .ch { opacity: 0; }
.h2 .lat { font-weight: 200; }
.h2.in .ch { opacity: 1; transition: opacity 1ms linear calc(var(--n) * 26ms); }
.lead { color: var(--fg-2); max-width: 58ch; margin-top: 20px; font-size: clamp(14px, 1.08vw, 15.5px); }
.lead code, .faq code { color: var(--lime); background: var(--bg-3); padding: 1px 6px; font-size: .94em; border-radius: 2px; }
/* JP line-break hygiene: keep short phrases together, avoid orphan last lines */
.kp { display: inline-block; }
.lead, .hero__lead, .logos__title, .steps p, .plan__desc, .rev blockquote, .faq details > div p, .ftr__tag, .foot, .prompt__note { text-wrap: pretty; }
.sec { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-bottom: 56px; }
.sec > .cmt { grid-column: 1 / span 4; padding-top: .5em; }
.sec > div { grid-column: 5 / -1; }
section { position: relative; }
.rv { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in { opacity: 1; translate: 0 0; }
.caret { display: inline-block; width: .6em; height: 1.15em; background: var(--lime); vertical-align: text-bottom; margin-left: 1px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* boot */
.boot { position: fixed; inset: 0; z-index: 1500; }
.boot__bg { position: absolute; inset: 0; background: #0b0e14; transition: opacity .7s linear; }
.boot.is-leaving .boot__bg { opacity: 0; }
.boot__win {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100vw - 24px));
  border: 1px solid var(--line-2); background: var(--bg-2); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.boot__body { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 22px 24px 26px; align-items: center; min-height: 300px; transition: opacity .28s linear; }
.boot.is-leaving .boot__body { opacity: 0; }
.boot__mark { position: relative; }
.boot__mark pre { line-height: 1.18; white-space: pre; }
#bootNoise { color: #2e3647; }
#bootResolved { position: absolute; inset: 0; color: var(--lime); }
.boot__log { font-size: 11.5px; line-height: 1.75; color: var(--fg-2); white-space: pre; overflow: hidden; }
.boot__win .t-com { font-style: normal; }

.winbar { display: flex; align-items: center; height: 34px; border-bottom: 1px solid var(--line); background: var(--bg-3); padding-left: 12px; font-size: 12px; color: var(--fg-3); gap: 0; white-space: nowrap; flex: none; }
.winbar__dots { display: inline-flex; gap: 6px; margin-right: 14px; }
.winbar__dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); }
.winbar__title { color: var(--fg-2); }
.winbar__tab { padding: 0 14px; height: 100%; display: inline-flex; align-items: center; border-left: 1px solid var(--line); }
.winbar__tab:last-of-type { border-right: 1px solid var(--line); }
.winbar__tab.is-on { background: var(--bg-2); color: var(--fg); box-shadow: inset 0 1px 0 var(--lime); }

/* chrome */
.hdr { position: fixed; top: 0; left: 0; right: 0; height: var(--hdr); z-index: 900; display: flex; align-items: stretch; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: transform .9s var(--ease) .1s, background .25s, border-color .25s, color .25s; }
.is-booting .hdr { transform: translateY(-100%); }
.hdr__brand { display: flex; align-items: center; gap: 10px; padding: 0 16px; text-decoration: none; color: var(--fg); border-right: 1px solid var(--line); }
.hdr__brand .mark { width: 26px; color: var(--lime); stroke-width: 36; }
.hdr__word { font: 600 12px/1 var(--disp); letter-spacing: .14em; font-stretch: 85%; }
.hdr__sub { color: var(--fg-3); font-size: 12px; }
.hdr__tabs { display: flex; flex: 1; align-items: stretch; overflow: hidden; }
.hdr__tabs a { display: flex; align-items: center; padding: 0 16px; font-size: 12px; text-decoration: none; color: var(--fg-3); border-right: 1px solid var(--line); transition: color .2s, background .2s; white-space: nowrap; }
.hdr__tabs a:hover { color: var(--fg); background: var(--bg-3); }
.hdr__tabs a.is-on { color: var(--fg); background: var(--bg-2); box-shadow: inset 0 -1px 0 var(--lime); }
.hdr__act { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.kbtn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; color: var(--fg-2); border: 1px solid var(--line); min-height: 30px; }
.kbtn:hover { border-color: var(--line-2); color: var(--fg); }
kbd { font-size: 11px; color: var(--fg-3); }
.hdr__cta { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; background: var(--lime); color: var(--lime-ink); text-decoration: none; }
.hdr__cta:hover { filter: brightness(1.1); }
.gutter { position: absolute; left: 0; top: 0; width: var(--gut); text-align: right; padding-right: 14px; font-size: 11px; line-height: 24px; color: var(--fg-3); opacity: .55; border-right: 1px solid var(--line); z-index: 40; user-select: none; pointer-events: none; overflow: hidden; height: 100%; contain: strict; transition: color .25s, border-color .25s; }
.pcline { position: fixed; left: 0; top: 0; width: var(--gut); height: 24px; z-index: 41; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-size: 11px; line-height: 24px; color: var(--lime); background: var(--bg); border-right: 1px solid var(--lime); will-change: transform; transition: background .25s; }
.pcline i { font-style: normal; font-size: 8px; margin-right: auto; padding-left: 6px; }
.is-booting .pcline, .is-booting .status { opacity: 0; }
.status { position: fixed; left: 0; right: 0; bottom: 0; height: var(--st); z-index: 890; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; font-size: 11px; color: var(--fg-3); background: var(--bg-3); border-top: 1px solid var(--line); transition: background .25s, color .25s, opacity .5s; white-space: nowrap; }
.status > div { display: flex; gap: 18px; }
.status__ok { color: var(--lime); }
.cursor { position: fixed; left: 0; top: 0; z-index: 1400; pointer-events: none; background: #fff; mix-blend-mode: difference; opacity: 0; }
.cursor[data-mode="hit"] { background: rgba(255,255,255,.14); mix-blend-mode: difference; outline: 1px solid #fff; }
.cursor[data-mode="text"] { background: #fff; }

/* switcher reskin */
.lk-switch { border-color: var(--line-2); background: rgba(11,14,20,.82); font-family: var(--mono); letter-spacing: .08em; }
.lk-switch a[aria-current="page"] { background: #b6ff5c; color: #0b0e14; }
.lk-switch img { max-width: none; width: 18px; filter: grayscale(1) brightness(2.4); }

/* hero */
.hero { min-height: 100svh; padding-top: var(--hdr); display: flex; }
.hero__glyphs { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.4fr); gap: clamp(20px, 3vw, 48px); align-items: center; width: 100%; padding-top: 20px; padding-bottom: 64px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-2); }
.dot { width: 6px; height: 6px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero__h1 { margin: 22px 0 22px; font: 400 clamp(34px, 4.5vw, 72px)/1.14 var(--disp); font-stretch: 75%; letter-spacing: -.04em; }
.hero__ln { display: block; }
.hero__cmd { color: var(--lime); font-weight: 300; }
.hero__h1 .caret { height: .92em; width: .5em; vertical-align: -.06em; }
.hero__lead { color: var(--fg-2); max-width: 44ch; font-size: clamp(14px, 1.05vw, 15px); }
.hero__in { opacity: 0; translate: 0 18px; }
.is-live .hero__in { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease) calc(var(--d) * 90ms + 180ms), translate .9s var(--ease) calc(var(--d) * 90ms + 180ms); }
.install { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin-top: 26px; border: 1px solid var(--line-2); background: var(--bg-2); max-width: 520px; font-size: 13px; }
.install__prompt { padding-left: 14px; color: var(--lime); }
.install__cmd { flex: 1; min-width: 0; padding: 12px 10px; white-space: nowrap; overflow: auto hidden; scrollbar-width: none; }
.install__btn { padding: 0 16px; min-height: 44px; border-left: 1px solid var(--line-2); color: var(--lime); transition: background .2s, color .2s; align-self: stretch; }
.install__btn:hover { background: var(--lime); color: var(--lime-ink); }
.install__out { display: block; width: 100%; color: var(--lime); font-size: 12px; min-height: 0; padding: 0 14px; border-top: 0 solid var(--line); }
.install.is-done .install__out { padding: 6px 14px; border-top-width: 1px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); text-decoration: none; font-size: 13px; color: var(--fg); transition: background .2s, color .2s, border-color .2s; }
.btn:hover { border-color: var(--fg-2); background: var(--bg-3); }
.btn--solid { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 500; }
.btn--solid:hover { background: var(--lime); filter: brightness(1.08); border-color: var(--lime); color: var(--lime-ink); }
.ledger { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(20px, 3vw, 44px); margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.ledger dt { font-size: 11px; color: var(--fg-3); }
.ledger dd { font: 400 22px/1.3 var(--disp); font-stretch: 75%; letter-spacing: -.03em; }
.ledger small { font-size: .55em; color: var(--fg-3); margin-left: 2px; }

.ide { border: 1px solid var(--line-2); background: var(--bg-2); display: flex; flex-direction: column; height: min(calc(100svh - var(--hdr) - 90px), 700px); min-height: 500px; }
.is-booting .ide { visibility: hidden; }
.runbtn { margin-left: auto; height: 100%; padding: 0 16px; color: var(--lime); border-left: 1px solid var(--line); font-size: 12px; min-width: 110px; transition: background .2s, color .2s; }
.runbtn:hover { background: var(--lime); color: var(--lime-ink); }
.runbtn.is-busy { color: var(--amber); }
.ide__panes { flex: 1; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); min-height: 0; }
.ide__edit { position: relative; border-right: 1px solid var(--line); overflow: hidden; min-height: 0; }
.ide__note { position: absolute; left: 14px; bottom: 8px; font-size: 11.5px; color: var(--t-com); font-style: italic; }
.ide__out { padding: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; font-size: 11.5px; min-width: 0; }
.ide__log { white-space: pre; line-height: 1.75; overflow: hidden; color: var(--fg-2); min-height: 0; }
.ide__log .t-com { font-style: normal; }
.ide__map { font-size: 10px; line-height: 1.22; color: #39445a; opacity: 0; transition: opacity .3s; white-space: pre; overflow: hidden; }
.ide__map.is-on { opacity: 1; }
.pop { font-weight: 400; color: #4b5870; }
.pop.on { color: var(--lime); text-shadow: 0 0 8px var(--lime); }

.code { counter-reset: ln; font-size: clamp(11.5px, .94vw, 13.2px); line-height: 1.72; padding: 12px 0; white-space: pre; overflow: hidden; }
.code li { counter-increment: ln; position: relative; padding-left: 46px; padding-right: 12px; min-height: 1.72em; }
.code li::before { content: counter(ln); position: absolute; left: 0; width: 34px; text-align: right; color: var(--fg-3); opacity: .55; }
.code li.is-cur { background: rgba(255,255,255,.028); }
.code li.is-cur::before { color: var(--fg); opacity: 1; }
.code.is-gone li { color: transparent; background: none; }
.code.is-gone li * { visibility: hidden; }
.code.is-gone li::before { opacity: 0; }
.code li::before { transition: opacity .5s linear; }

/* customers */
.logos { padding-top: 56px; padding-bottom: 88px; border-top: 1px solid var(--line); }
.logos__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 40px; }
.logos__head .cmt { grid-column: 1 / span 4; padding-top: 4px; }
.logos__title { grid-column: 5 / -1; font: 400 clamp(18px, 1.9vw, 28px)/1.4 var(--disp); font-stretch: 75%; letter-spacing: -.02em; }
.logos__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logos__grid li { padding: 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logos__grid pre { color: var(--lime); font-size: clamp(9px, .78vw, 11px); line-height: 1.2; margin-bottom: 14px; min-height: 5em; overflow: hidden; }
.logos__grid strong { font-weight: 500; font-size: 13px; }
.logos__grid span { color: var(--fg-3); font-size: 11.5px; }

/* man */
.features { padding-top: 120px; padding-bottom: 120px; }
.man { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 0; border: 1px solid var(--line); align-items: stretch; }
.man__list { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.man__list button { flex: 1; }
.man__list button { display: grid; grid-template-columns: 26px minmax(150px, auto) 1fr; gap: 10px; align-items: baseline; text-align: left; padding: 15px 18px 15px 14px; border-bottom: 1px solid var(--line); position: relative; transition: background .2s, color .2s; color: var(--fg-2); font-size: 13px; }
.man__list button:last-child { border-bottom: 0; }
.man__list button code { color: var(--fg); }
.man__list button:hover { background: var(--bg-2); }
.man__list button.is-on { background: var(--bg-3); color: var(--fg); box-shadow: inset 2px 0 0 var(--lime); }
.man__list button.is-on code { color: var(--lime); }
.man__n { color: var(--fg-3); font-size: 11px; text-align: right; }
.term { background: var(--bg-2); display: flex; flex-direction: column; }
.man__term { min-height: 360px; }
.term__body { padding: 16px 18px; font-size: 12.5px; line-height: 1.75; color: var(--fg-2); flex: 1; overflow: hidden; white-space: pre; }
.term__body .t-com { font-style: normal; }

/* pinned panes */
.pane { border: 1px solid var(--line); background: var(--bg-2); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane__tab { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 28px; padding: 0 12px; background: var(--bg-3); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--fg-3); flex: none; white-space: nowrap; }
.pane__tab em { font-style: normal; color: var(--amber); }

.pc { padding-top: 40px; }
.pc__intro { margin-bottom: 40px; }
.pc__track { height: 640vh; position: relative; }
.pc__sticky { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); padding: 10px var(--pad) calc(var(--st) + 42px) calc(var(--gut) + var(--pad)); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.dbg { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--fg-3); flex: none; white-space: nowrap; min-height: 34px; }
.dbg__btns { display: flex; gap: 6px; }
.dbg__btn { padding: 0 10px; min-height: 32px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: 12px; transition: border-color .2s, color .2s; }
.dbg__btn:hover { color: var(--lime); border-color: var(--lime); }
.dbg__pc b { font-weight: 500; color: var(--lime); }
.dbg__state { color: var(--bg); background: var(--amber); padding: 1px 8px; font-size: 11px; }
.dbg__state[data-s="editing"] { background: var(--fg-3); color: var(--bg); }
.dbg__state[data-s="request"] { background: var(--violet); }
.dbg__state[data-s="exit"], .dbg__state[data-s="listening"] { background: var(--lime); }
.dbg__meter { margin-left: auto; color: var(--fg-3); }
.pc__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-rows: minmax(0, 5fr) minmax(0, 3.7fr) minmax(0, 2.3fr); gap: 8px; grid-template-areas: "code graph graph" "code watch stack" "code con con"; }
.pane--code { grid-area: code; } .pane--graph { grid-area: graph; } .pane--watch { grid-area: watch; } .pane--stack { grid-area: stack; } .pane--console { grid-area: con; }
.code--pc { padding: 12px 0; font-size: clamp(11.5px, min(1.16vw, 1.85vh), 18px); line-height: 2.05; flex: 1; overflow: hidden; }
.code--pc li { transition: background .18s; display: flex; }
.code--pc li.is-exec { background: var(--sel); box-shadow: inset 2px 0 0 var(--violet); }
.code--pc li.is-exec::before { color: var(--violet); opacity: 1; }
.code--pc li.is-typing { background: rgba(255,255,255,.03); box-shadow: inset 2px 0 0 var(--lime); }
.ghost { color: var(--t-com); font-style: italic; margin-left: 2.2ch; font-size: .88em; }
.pane--graph { min-height: 0; }
.graph { flex: 1; width: 100%; height: 100%; min-height: 0; padding: 4px; display: block; }
.edge { fill: none; stroke: var(--line-2); stroke-width: 1; }
.edge-lit { fill: none; stroke: var(--lime); stroke-width: 1.4; stroke-dasharray: 0 1; }
.edge-lit.is-old { stroke: var(--fg-3); }
.node rect { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1; transition: fill .2s, stroke .2s; }
.node__t { font: 500 9.5px var(--mono); fill: var(--fg); }
.node__s { font: 400 8px var(--mono); fill: var(--fg-3); }
.node.is-hot rect { stroke: var(--lime); fill: rgba(182,255,92,.14); }
.packet { fill: var(--lime); opacity: 0; }
.packet-halo { fill: var(--lime); opacity: 0; filter: blur(3px); fill-opacity: .3; }
#pcLatency.is-fast { color: var(--lime); }
.watch { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.4; }
.watch th { text-align: left; font-weight: 400; color: var(--violet); padding: 3px 8px 3px 12px; white-space: nowrap; vertical-align: top; }
.watch td { color: var(--fg-2); padding: 3px 12px 3px 0; overflow-wrap: anywhere; }
.watch tr.is-new td { animation: flash 1s var(--ease); }
@keyframes flash { 0% { color: var(--lime); background: rgba(182,255,92,.16); } 100% { background: transparent; } }
.watch__empty { color: var(--t-com) !important; padding: 8px 12px !important; font-style: italic; }
.stack { padding: 6px 0; font-size: 11.5px; }
.stack li { padding: 3px 12px; color: var(--fg-3); }
.stack li.is-top { color: var(--fg); background: rgba(255,255,255,.035); }
.stack li.is-top::before { content: "▸ "; color: var(--violet); }
.console { padding: 8px 12px; font-size: 11.5px; line-height: 1.65; color: var(--fg-2); overflow: hidden; flex: 1; white-space: pre-wrap; display: flex; flex-direction: column; justify-content: flex-end; }
.console > * { display: block; }
.no-pin .pc__track, .no-pin .diff__track { height: auto; }
.no-pin .pc__sticky, .no-pin .diff__sticky { position: static; height: auto; }
.no-pin .pc__grid { grid-template-rows: auto auto auto; }
.no-pin .pane--code { min-height: 480px; }

/* diff */
.diff { padding-top: 120px; }
.diff__intro { margin-bottom: 40px; }
.diff__track { height: 380vh; position: relative; }
.diff__sticky { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); padding: 12px var(--pad) calc(var(--st) + 44px) calc(var(--gut) + var(--pad)); }
.diff__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 8px; }
.gitlog { position: relative; padding: 14px 12px; flex: 1; overflow: hidden; font-size: 12px; }
.gl__rails { position: absolute; left: 0; top: 0; pointer-events: none; }
.rail { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.rail.is-merged { stroke: var(--lime); }
.rail--b { stroke: var(--violet); stroke-dasharray: 0 1; }
.gl { position: relative; display: grid; grid-template-columns: 34px 62px minmax(0, 1fr) auto; gap: 6px; align-items: center; height: clamp(40px, 9.6vh, 90px); opacity: .22; transition: opacity .35s; padding-left: 4px; }
.gl.is-on { opacity: 1; }
.gl__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--fg-3); justify-self: start; position: relative; z-index: 1; margin-left: -4px; transition: border-color .2s, background .2s, transform .35s var(--ease); transform: scale(.4); }
.gl--b .gl__dot { margin-left: 14px; }
.gl.is-on .gl__dot { transform: scale(1); }
.gl--b.is-on .gl__dot { border-color: var(--violet); }
.gl.is-head .gl__dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 12px var(--lime); }
.gl code { color: var(--amber); font-size: 11px; }
.gl__m { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl.is-head .gl__m { color: var(--fg); }
.gl__st { font-weight: 500; font-size: 11px; }
.add { color: var(--lime); } .del { color: var(--red); }
.diff__stat { display: inline-flex; gap: 10px; }
.diff__stat b { font-weight: 500; }
.difflines { flex: 1; overflow: hidden; padding: 8px 0; font-size: clamp(11.5px, min(1.02vw, 1.72vh), 15.5px); position: relative; }
.dl { display: flex; gap: 10px; align-items: center; overflow: hidden; padding: 0 12px; white-space: nowrap; color: var(--fg-2); position: relative; }
.dl__s { width: 1.2ch; flex: none; color: var(--fg-3); }
.dl__t { overflow: hidden; text-overflow: ellipsis; }
.dl__tag { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--fg-3); }
.dl--file { color: var(--fg); background: var(--bg-3); margin-top: 1px; font-weight: 500; }
.dl--file.is-folded { color: var(--fg-3); background: none; font-weight: 400; }
.dl--file.is-folded .dl__t { text-decoration: line-through; text-decoration-color: var(--red); }
.dl--file.is-folded .dl__tag { color: var(--red); }
.dl--newfile { color: var(--lime); background: var(--add-bg); font-weight: 500; }
.dl--newfile .dl__tag { color: var(--lime); }
.dl--del { transition: background .3s; }
.dl--del.is-red { background: var(--del-bg); color: var(--red); }
.dl--del.is-red .dl__s { color: var(--red); }
.dl--fold { color: var(--fg-3); font-style: italic; }
.dl--fold.is-red { color: var(--red); background: var(--del-bg); }
.dl--add { background: var(--add-bg); color: var(--fg); }
.dl--add .dl__s { color: var(--lime); }
.dl__sum { position: absolute; left: 12px; right: 12px; bottom: 16px; font: 300 clamp(18px, 2.3vw, 34px)/1.3 var(--disp); font-stretch: 75%; letter-spacing: -.03em; color: var(--fg); opacity: 0; translate: 0 12px; transition: opacity .5s, translate .6s var(--ease); }
.dl__sum.is-on { opacity: 1; translate: 0 0; }
.dl__sum b { font-weight: 400; color: var(--red); }
.dl__sum b + b, .dl__sum b:nth-of-type(2) { color: var(--lime); }
.dl__sum span { display: block; font: 400 clamp(12px, 1vw, 14px)/1.6 var(--mono); color: var(--fg-2); letter-spacing: 0; margin-top: 4px; }

/* bench */
.bench { padding-top: 140px; padding-bottom: 80px; }
.bench__nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.bench__nums > div { padding: 24px 20px 22px 0; border-right: 1px solid var(--line); padding-left: 20px; min-width: 0; }
.bench__nums > div:first-child { padding-left: 0; }
.bench__nums > div:last-child { border-right: 0; }
.bench__nums b { display: block; font: 300 clamp(26px, 4.2vw, 64px)/1.1 var(--disp); font-stretch: 75%; letter-spacing: -.04em; color: var(--fg); white-space: nowrap; }
.bench__nums > div:first-child b { color: var(--lime); }
.bench__nums span { display: block; margin-top: 8px; color: var(--fg-3); font-size: 12px; }
.bench__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.chart figcaption { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.chart figcaption em { font-style: normal; color: var(--fg-3); }
.chart pre { font-size: clamp(11px, .95vw, 13px); line-height: 1.7; white-space: pre; overflow: hidden; color: var(--fg-2); min-height: 7em; }
.ch__b { color: var(--fg-3); }
.ch__b.is-lk, .ch__n.is-lk { color: var(--lime); }
.ch__v.is-lk { color: var(--fg); font-weight: 500; }
.chart--hist { grid-column: 1 / -1; }
.chart--hist pre { line-height: 1; font-size: clamp(11px, .95vw, 13px); }
.chart--hist .is-mk { color: var(--fg); }
.chart--hist .is-lk { color: var(--lime); }
.foot { margin-top: 28px; font-size: 11.5px; color: var(--fg-3); }

/* wipes */
.wipe { height: 260vh; position: relative; z-index: 2; }
.wipe__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wipe__layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.wipe__layer--dark { background: #0b0e14; color: #e8edf5; }
.wipe__layer--dark .wipe__out { color: #b6ff5c; }
.wipe__layer--light { background: #f5f4ee; color: #13161d; }
.wipe__layer--light .wipe__out { color: #3f7d00; }
.wipe__cmd { font-size: var(--fs, 6vw); line-height: 1.15; font-weight: 300; padding-left: 66px; white-space: pre; min-height: 1.15em; font-feature-settings: "calt" 0, "liga" 0; letter-spacing: 0; }
.wipe__out { padding-left: 72px; margin-top: 18px; font-size: clamp(12px, 1.1vw, 15px); opacity: 0; transition: opacity .3s; white-space: pre-wrap; padding-right: 20px; }
.wipe__out.is-on { opacity: 1; }
.wipe__caret { position: absolute; left: 0; top: 50%; width: calc(var(--fs, 6vw) * .6); height: calc(var(--fs, 6vw) * 1.15); margin-top: calc(var(--fs, 6vw) * -.575 - 22px); background: #b6ff5c; will-change: transform; }
.wipe--back .wipe__caret { background: #b794ff; }

/* paper */
.paper { background: var(--bg); color: var(--fg); position: relative; z-index: 1; }
.paper__ide { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 9.6fr); gap: 32px; padding-top: 40px; padding-bottom: 100px; }
.tree { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; font-size: 12px; border: 1px solid var(--line); background: var(--bg-2); padding: 10px 0; }
.tree__h { font-size: 10.5px; letter-spacing: .1em; color: var(--fg-3); padding: 2px 12px 8px; }
.tree li { padding: 3px 12px 3px 24px; color: var(--fg-2); }
.tree li.d { padding-left: 12px; color: var(--fg); }
.tree li.is-on { background: var(--sel); box-shadow: inset 2px 0 0 var(--violet); }
.tree a { text-decoration: none; display: block; }
.tree a:hover { color: var(--violet); }
.paper__doc { max-width: 960px; min-width: 0; }
.h2--paper { margin-top: 8px; }
.steps { margin-top: 56px; border-top: 1px solid var(--line); }
.steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.steps__n { font: 300 clamp(22px, 2.2vw, 32px)/1.1 var(--disp); font-stretch: 75%; color: var(--violet); letter-spacing: -.03em; }
.steps h3 { font-size: 16px; font-weight: 500; }
.steps p { color: var(--fg-2); margin: 6px 0 14px; max-width: 60ch; }
.snip { background: var(--bg-2); border: 1px solid var(--line); padding: 12px 16px; font-size: 13px; overflow-x: auto; line-height: 1.7; }
.reviews { margin-top: 72px; display: grid; gap: 18px; }
.rev { border: 1px solid var(--line); background: var(--bg-2); max-width: 78%; }
.rev--r { margin-left: auto; }
.rev figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 14px; background: var(--bg-3); border-bottom: 1px solid var(--line); font-size: 12px; }
.rev figcaption b { font-weight: 500; }
.rev figcaption span { color: var(--fg-2); }
.rev figcaption em { color: var(--fg-3); font-style: normal; margin-left: auto; }
.rev blockquote { padding: 16px 18px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.75; }

/* playground */
.play { padding-top: 140px; padding-bottom: 120px; }
.play__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.play__presets button { padding: 0 14px; min-height: 36px; border: 1px solid var(--line-2); font-size: 12px; color: var(--fg-2); transition: color .2s, border-color .2s, background .2s; }
.play__presets button:hover { color: var(--fg); border-color: var(--fg-3); }
.play__presets button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.play__presets .is-broken { color: var(--red); border-style: dashed; }
.play__presets .is-broken[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #0b0e14; border-style: solid; }
.play__grid { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: 8px; }
.play__ed { min-height: 560px; }
#playBuild.is-good { color: var(--lime); } #playBuild.is-bad { color: var(--red); }
.ed { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); font-size: 13.5px; line-height: 1.75; height: 290px; flex: none; }
.ed__nums { text-align: right; padding: 12px 10px 12px 0; color: var(--fg-3); opacity: .7; overflow: hidden; user-select: none; }
.ed__nums .e { color: #0b0e14; background: var(--red); padding: 0 3px; opacity: 1; }
.ed__nums .w { color: #0b0e14; background: var(--amber); padding: 0 3px; }
.ed__stage { position: relative; min-width: 0; overflow: hidden; }
.ed__hl, .ed__ta { position: absolute; inset: 0; margin: 0; padding: 12px 12px 12px 4px; font: inherit; line-height: inherit; white-space: pre; overflow: auto; tab-size: 2; letter-spacing: 0; font-feature-settings: "calt" 0, "liga" 0; }
.ed__hl { pointer-events: none; color: var(--fg); scrollbar-width: none; overflow: hidden; }
.ed__ta { background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--lime); border: 0; outline: 0; resize: none; width: 100%; height: 100%; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ed__ta::selection { background: rgba(183,148,255,.3); -webkit-text-fill-color: transparent; color: transparent; }
.ed:focus-within { box-shadow: inset 0 0 0 1px var(--lime); }
.sq-err { text-decoration: underline wavy var(--red); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sq-warn { text-decoration: underline wavy var(--amber); text-underline-offset: 3px; }
.ed__lens { color: var(--red); opacity: .72; font-size: .86em; font-style: italic; }
.ed__lens.is-warn { color: var(--amber); }
.ed__problems { border-top: 1px solid var(--line); padding: 10px 14px 14px; font-size: 12px; line-height: 1.6; flex: 1; min-height: 120px; overflow: auto; background: var(--bg); }
.ed__problems .ok { color: var(--fg-2); }
.ed__problems .bad { color: var(--red); margin-bottom: 6px; }
.diag { color: var(--fg-2); white-space: pre-wrap; margin-top: 8px; font-size: 11.5px; }
.diag b { color: var(--red); font-weight: 500; }
.diag.is-warn b { color: var(--amber); }
.diag__ptr { color: var(--red); }
.more { color: var(--fg-3); margin-top: 8px; }
.play__out { min-height: 560px; }
.play__canvas { width: 100%; flex: 1; min-height: 0; display: block; background: #090b10; }
#playFps { color: var(--fg-3); }

/* pricing */
.pricing { padding-top: 40px; padding-bottom: 120px; }
.est { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--line); margin-bottom: 10px; }
.est__ctl { padding: 22px 24px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; align-content: center; }
.est__ctl label { color: var(--fg-3); font-size: 12px; }
.est__ctl output { font: 300 clamp(36px, 5vw, 76px)/1 var(--disp); font-stretch: 75%; letter-spacing: -.04em; color: var(--lime); }
.est__ctl input[type=range] { grid-column: 1 / -1; margin: 22px 0 6px; width: 100%; height: 30px; background: transparent; appearance: none; -webkit-appearance: none; touch-action: pan-y; }
.est__ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(to right, var(--lime) var(--fill, 37%), var(--bg-4) var(--fill, 37%)); }
.est__ctl input[type=range]::-moz-range-track { height: 8px; background: var(--bg-4); }
.est__ctl input[type=range]::-moz-range-progress { height: 8px; background: var(--lime); }
.est__ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 30px; background: var(--fg); margin-top: -11px; border: 0; }
.est__ctl input[type=range]::-moz-range-thumb { width: 16px; height: 30px; background: var(--fg); border: 0; border-radius: 0; }
.est__scale { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-3); }
.est__out { padding: 20px 22px; font-size: clamp(11.5px, 1vw, 13.5px); line-height: 1.8; color: var(--fg-2); overflow: hidden; background: var(--bg-2); white-space: pre; }
.est__out b { color: var(--fg); font-weight: 500; }
.est__out .t-com { font-style: normal; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.plan { padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: background .25s, box-shadow .25s; position: relative; }
.plan h3 { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.plan__price b { font: 300 clamp(24px, 2.4vw, 36px)/1.1 var(--disp); font-stretch: 75%; letter-spacing: -.03em; }
.plan__price small { color: var(--fg-3); font-size: 12px; margin-left: 4px; }
.plan__desc { color: var(--fg-2); font-size: 12.5px; min-height: 4.4em; }
.plan ul { font-size: 12.5px; color: var(--fg-2); margin-bottom: 8px; flex: 1; }
.plan li { padding: 3px 0 3px 16px; position: relative; }
.plan li::before { content: "+"; position: absolute; left: 0; color: var(--lime); }
.plan.is-best { background: var(--bg-3); box-shadow: inset 0 2px 0 var(--lime); }
.plan.is-best h3::after { content: "  ← 見積もりの最適プラン"; color: var(--lime); font-weight: 400; font-size: 11px; }
.plan.is-best .btn { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }

/* shell */
.shell { padding-top: 40px; padding-bottom: 120px; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 32px; align-items: stretch; }
.shell__copy .cmt { margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.chips button { padding: 0 12px; min-height: 36px; border: 1px solid var(--line-2); font-size: 12px; color: var(--lime); transition: background .2s, color .2s; }
.chips button:hover { background: var(--lime); color: var(--lime-ink); }
.shell__term { border: 1px solid var(--line-2); min-height: 440px; max-height: 520px; }
.term__scroll { flex: 1; overflow-y: auto; padding: 14px 16px; font-size: 12.5px; line-height: 1.7; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ln { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-2); }
.ln .t-com { font-style: normal; }
.term__in { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.term__ps { white-space: nowrap; }
.term__in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; caret-color: var(--lime); padding: 2px 0; color: var(--fg); font-size: 16px; }
@media (min-width: 761px) { .term__in input { font-size: inherit; } }

/* faq */
.faq { padding-top: 40px; padding-bottom: 120px; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; gap: 14px; padding: 18px 0; font-size: clamp(14px, 1.25vw, 17px); align-items: baseline; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--lime); }
.faq__i::before { content: "[+]"; color: var(--lime); font-size: 13px; }
.faq details[open] .faq__i::before { content: "[-]"; color: var(--violet); }
.faq details > div { padding: 0 0 22px 40px; color: var(--fg-2); max-width: 76ch; }

/* signup */
.signup { padding-top: 40px; padding-bottom: 120px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.h2--big { font-size: clamp(36px, 6vw, 96px); margin-top: 12px; line-height: 1.12; }
.prompt { border: 1px solid var(--line-2); background: var(--bg-2); }
.prompt__body { padding: 18px 20px 20px; display: grid; gap: 14px; }
.prompt__row label { display: block; font-size: 13px; color: var(--fg); }
.prompt__row input, .prompt__row select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 8px 0; color: var(--lime); outline: 0; font-size: 16px; border-radius: 0; }
.prompt__row select { color: var(--fg); appearance: auto; background: var(--bg-2); }
.prompt__row input::placeholder { color: var(--fg-3); }
.prompt__row input:focus, .prompt__row select:focus { border-color: var(--lime); }
.prompt__row input[aria-invalid="true"] { border-color: var(--red); }
.prompt__err { color: var(--red); font-size: 12px; margin-top: 4px; }
.prompt__go { width: 100%; margin-top: 4px; }
.prompt__note { color: var(--fg-3); font-size: 11.5px; }
.prompt__done { padding: 18px 20px; min-height: 280px; font-size: 13px; line-height: 1.75; color: var(--fg-2); white-space: pre-wrap; outline: 0; }
.prompt__done .t-com { font-style: normal; }

/* footer */
.ftr { border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: calc(var(--st) + 56px); overflow: hidden; position: relative; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 24px; margin-bottom: 44px; }
.ftr__lock { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 14px/1 var(--disp); letter-spacing: .14em; font-stretch: 85%; }
.ftr__lock .mark { width: 42px; color: var(--lime); }
.ftr__tag { color: var(--fg-2); margin: 14px 0; max-width: 40ch; font-size: 13px; }
.ftr__mail { color: var(--lime); font-size: 13px; }
.ftr__col h3 { font-size: 11px; font-weight: 400; color: var(--fg-3); margin-bottom: 10px; }
.ftr__col a { display: block; text-decoration: none; padding: 4px 0; font-size: 13px; color: var(--fg-2); transition: color .2s; }
.ftr__col a:hover { color: var(--lime); }
.ftr__ascii { padding-left: calc(var(--gut) + 8px); padding-right: 8px; color: var(--lime); white-space: pre; overflow: hidden; opacity: .78; font-weight: 500; }
.ftr__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: 12px; color: var(--fg-3); }

/* palette */
.palette { width: min(640px, calc(100vw - 24px)); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); padding: 0; margin: 14vh auto auto; box-shadow: 0 30px 90px rgba(0,0,0,.6); font-size: 13px; }
.palette::backdrop { background: rgba(5,7,11,.66); backdrop-filter: blur(3px); }
.palette__in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.palette__ps { color: var(--lime); }
.palette__in input { flex: 1; min-width: 0; height: 46px; background: none; border: 0; outline: 0; font-size: 16px; color: var(--fg); }
.palette__list { max-height: min(50vh, 380px); overflow: auto; padding: 4px 0; }
.palette__list li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 7px 14px; align-items: baseline; }
.palette__list li em { font-style: normal; color: var(--violet); font-size: 11px; }
.palette__list li b { font-weight: 400; }
.palette__list li span { color: var(--fg-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.palette__list li[aria-selected="true"] { background: var(--sel); box-shadow: inset 2px 0 0 var(--lime); }
.palette__list .empty { display: block; color: var(--red); }

/* --------- responsive --------- */
@media (max-width: 1180px) {
  .hdr__tabs a { padding: 0 10px; }
  .hdr__sub { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
  .man { grid-template-columns: 1fr; }
  .man__list { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .hdr__tabs { visibility: hidden; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 72px; }
  .ide { height: 680px; }
  .logos__grid { grid-template-columns: repeat(3, 1fr); }
  .sec, .logos__head { display: block; }
  .sec > .cmt, .logos__head .cmt { margin-bottom: 14px; padding: 0; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bench__charts { grid-template-columns: minmax(0, 1fr); }
  .shell, .signup { grid-template-columns: minmax(0, 1fr); }
  .play__grid { grid-template-columns: minmax(0, 1fr); }
  .play__out { order: -1; min-height: 0; }
  .play__canvas { height: 62vw; max-height: 520px; flex: none; }
  .play__ed { min-height: 0; }
  .est { grid-template-columns: minmax(0, 1fr); }
  .est__ctl { border-right: 0; border-bottom: 1px solid var(--line); }
  .paper__ide { grid-template-columns: minmax(0, 1fr); }
  .tree { display: none; }
  .ftr__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
  .pc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 6fr) minmax(0, 3.4fr) minmax(0, 2.4fr) minmax(0, 1.8fr); grid-template-areas: "code code" "graph graph" "watch stack" "con con"; }
}
@media (max-width: 760px) {
  :root { --gut: 0px; --pad: 16px; --hdr: 48px; --st: 0px; }
  .gutter, .pcline, .status { display: none; }
  .hdr__tabs { display: none; }
  .hdr__brand { flex: 1; border-right: 0; padding: 0 12px; }
  .hdr__word { font-size: 11px; }
  .hdr__act { padding: 0 8px; gap: 6px; }
  .kbtn kbd { display: none; }
  .kbtn { min-height: 34px; }
  .hdr__cta { min-height: 34px; }
  .hero__h1 { font-size: clamp(36px, 11vw, 52px); margin: 18px 0 16px; }
  .hero__lead { max-width: none; }
  .install { font-size: 11px; }
  .install__prompt { padding-left: 10px; }
  .install__cmd { padding: 12px 6px; }
  .install__btn { padding: 0 12px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .ledger { display: none; }
  .ide { height: auto; min-height: 0; }
  .ide__panes { grid-template-columns: minmax(0, 1fr); }
  .ide__edit { height: 368px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ide__out { height: 268px; flex: none; }
  .code { font-size: 10.6px; line-height: 1.6; padding: 8px 0; }
  .code li { min-height: 1.6em; }
  .code li { padding-left: 30px; }
  .code li::before { width: 22px; }
  .winbar__tab { padding: 0 10px; }
  .winbar__dots { display: none; }
  .runbtn { min-width: 86px; padding: 0 10px; }
  .logos { padding-top: 44px; padding-bottom: 56px; }
  .logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos__grid li { padding: 14px 12px; }
  .logos__grid pre { font-size: 10px; }
  .h2 { font-size: clamp(28px, 8.2vw, 38px); }
  .features { padding-top: 72px; padding-bottom: 72px; }
  .sec { margin-bottom: 32px; }
  .man__list button { grid-template-columns: 18px minmax(0, 1fr); padding: 12px; font-size: 13px; }
  .man__d { grid-column: 2; font-size: 12px; }
  .man__term { min-height: 260px; }
  .term__body { font-size: 10.5px; padding: 12px; }
  /* pinned */
  .pc { padding-top: 24px; }
  .pc__intro { margin-bottom: 20px; }
  .pc__track { height: 560vh; }
  .pc__sticky { padding: 6px 8px 66px; gap: 6px; }
  .dbg { gap: 8px; font-size: 11px; min-height: 30px; flex-wrap: nowrap; overflow: hidden; }
  .dbg__btn span { display: none; }
  .dbg__btn { min-width: 40px; padding: 0 6px; min-height: 30px; }
  .dbg__meter { display: none; }
  .dbg__pc { margin-left: auto; }
  .pc__grid { gap: 4px; grid-template-rows: 300px minmax(0, 1fr) 96px 62px; }
  .node__t { font-size: 11.5px; }
  .node__s { display: none; }
  .node text { transform: translateY(6px); }
  .watch tr:nth-last-child(n+5) { display: none; }
  .code--pc { font-size: 10.6px; line-height: 1.72; padding: 4px 0; }
  .code--pc li { padding-left: 26px; padding-right: 4px; }
  .code--pc li::before { width: 18px; }
  .ghost { display: none; }
  .pane__tab { height: 22px; font-size: 10px; padding: 0 8px; }
  .watch { font-size: 10px; }
  .watch th { padding: 1px 6px 1px 8px; }
  .watch td { padding: 1px 6px 1px 0; }
  .stack { font-size: 10px; padding: 2px 0; }
  .stack li { padding: 1px 8px; }
  .console { font-size: 10px; padding: 3px 8px; line-height: 1.4; overflow: hidden; }
  /* diff */
  .diff { padding-top: 64px; }
  .diff__intro { margin-bottom: 20px; }
  .diff__track { height: 340vh; }
  .diff__sticky { padding: 6px 8px 66px; }
  .diff__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 4px; }
  .gitlog { padding: 4px 8px; font-size: 10.5px; }
  .gl { height: 23px; grid-template-columns: 30px 52px minmax(0, 1fr) auto; }
  .gl code { font-size: 10px; }
  .difflines { font-size: 11px; padding: 4px 0; }
  .dl { padding: 0 8px; gap: 6px; }
  .dl__sum { font-size: 19px; bottom: 10px; left: 8px; right: 8px; }
  /* bench */
  .bench { padding-top: 72px; }
  .bench__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bench__nums > div { padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .bench__nums > div:nth-child(2n) { border-right: 0; }
  .bench__nums > div:nth-child(odd) { padding-left: 0; }
  .bench__nums > div:nth-last-child(-n+2) { border-bottom: 0; }
  .bench__nums b { font-size: 28px; }
  .chart pre { font-size: 10.6px; }
  .chart--hist pre { font-size: 11px; }
  /* wipe */
  .wipe__cmd { padding-left: 12px; }
  .wipe__out { padding-left: 14px; }
  .wipe { height: 220vh; }
  /* paper */
  .paper__ide { padding-top: 24px; padding-bottom: 72px; }
  .steps { margin-top: 32px; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0; }
  .snip { font-size: 11px; padding: 10px 12px; }
  .reviews { margin-top: 44px; }
  .rev { max-width: 100%; }
  .rev figcaption em { margin-left: 0; width: 100%; }
  /* play */
  .play { padding-top: 72px; padding-bottom: 72px; }
  .play__canvas { height: 76vw; }
  .ed { font-size: 16px; height: 262px; line-height: 1.6; grid-template-columns: 30px minmax(0, 1fr); }
  .ed__nums { padding: 10px 6px 10px 0; font-size: 12px; line-height: 25.6px; }
  .ed__hl, .ed__ta { padding: 10px 8px 10px 4px; }
  .ed__lens { display: none; }
  .ed__problems { font-size: 11.5px; padding: 8px 10px 12px; }
  .diag { font-size: 10.5px; }
  /* pricing */
  .pricing, .faq, .signup, .shell { padding-bottom: 72px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan__desc { min-height: 0; }
  .est__ctl { padding: 16px; }
  .est__out { font-size: 10.6px; padding: 12px; }
  .shell { gap: 20px; }
  .shell__term { min-height: 380px; max-height: 440px; }
  .term__scroll { font-size: 11.5px; padding: 10px 12px; }
  .faq details > div { padding-left: 0; }
  .faq summary { gap: 10px; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr { padding-bottom: 86px; }
  .ftr__ascii { padding-left: 8px; }
  .boot__body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .boot__mark { justify-self: center; }
  .boot__log { font-size: 10.2px; }
}

/* reduced motion: every pinned sequence resolves into a complete, ordinary page */
@media (prefers-reduced-motion: reduce) {
  .h2 .ch { opacity: 1 !important; transition: none !important; }
  .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  .hero__in { opacity: 1 !important; translate: none !important; transition: none !important; }
  .caret { animation: none; }
  .wipe { height: auto; }
  .wipe__sticky { position: relative; height: 34vh; }
  .wipe__caret { display: none; }
  .pc__sticky, .diff__sticky { padding-bottom: 80px; }
  .hdr { transition: none; }
  .watch tr.is-new td { animation: none; }
}