/* The site is a Termobox terminal, made of its matte black glass.
   A near-black ground with grain and soft neutral light; on it, panes of
   frosted glass: the bar, the first screen (a Termobox window), the demos
   and the command line. One centred column, seven chapters, each the same:
   the command that printed it, a heading, a lead, one demo, three facts.
   Monospace (JetBrains Mono, the app's) for the terminal and the headings;
   Golos Text for reading. The themes come from the app (themes-boot.js). */

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/jbm-cyrillic.woff2?v=6624f1c9c2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/jbm-latin.woff2?v=6624f1c9c2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../fonts/jbm-symbols.woff2?v=6624f1c9c2) format("woff2");
  unicode-range:U+2190-21FF,U+2300-23FF,U+2500-259F,U+25A0-25FF,U+2700-27BF,U+2800-28FF}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/golos-cyrillic.woff2?v=6624f1c9c2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/golos-latin.woff2?v=6624f1c9c2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* «Чёрное стекло»; themes-boot.js rewrites these */
  --bg:#0d0e14; --bg-rgb:13 14 20; --fg:#e2e5f2; --fg-rgb:226 229 242; --acc:#8ea2ff; --on-acc:#0d0e14;
  --head1:#07080b; --head2:#0a0b10;
  --r:#e5566b; --g:#6fdcaa; --y:#f2c46d; --b:#8ea2ff; --m:#b79cff; --c:#7fd3e6;
  --ok:#4f8f7a; --err:#e5566b; --run:#8ea2ff;
  --grain:.06; --light:0;
  --glass:rgb(var(--fg-rgb) / .045);

  --text:color-mix(in srgb,var(--fg) 86%,var(--bg));
  --dim:color-mix(in srgb,var(--fg) 66%,var(--bg));
  --faint:color-mix(in srgb,var(--fg) 52%,var(--bg));
  --edge:rgb(var(--fg-rgb) / .10);
  --edge-2:rgb(var(--fg-rgb) / .18);
  --sel:rgb(var(--fg-rgb) / .08);

  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --t-meta:.75rem; --t-sec:.875rem; --t-body:1rem; --t-18:1.125rem; --t-20:1.25rem; --t-24:1.5rem; --t-32:2rem; --t-40:2.5rem; --t-56:3.5rem; --t-72:4.5rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --pad:max(16px,env(safe-area-inset-left,0px));
  --bar-h:60px;
  --m-150:150ms; --m-200:200ms; --m-300:300ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@supports not (color:color-mix(in srgb,red,blue)){:root{--text:#c9ccd9;--dim:#a1a4b4;--faint:#878a9c}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--bar-h) + var(--s6) + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:400 var(--t-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* soft neutral light behind the glass, so it has something to frost */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% -8%,rgb(var(--fg-rgb) / calc(.11 - var(--light) * .05)),transparent 70%),
    radial-gradient(35% 30% at 88% 38%,rgb(var(--fg-rgb) / .05),transparent 70%),
    radial-gradient(40% 35% at 8% 78%,rgb(var(--fg-rgb) / .045),transparent 70%)}
::selection{background:var(--fg);color:var(--bg)}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:inherit}
code{font:400 .92em var(--mono);color:var(--y)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--s4);top:-80px;z-index:95;background:var(--fg);color:var(--bg);padding:var(--s2) var(--s4)}
.skip:focus{top:calc(var(--s4) + env(safe-area-inset-top,0px))}
.dim{color:var(--dim)} .meta{color:var(--faint);font-size:var(--t-sec)}
.g{color:var(--g)} .r{color:var(--r)} .y{color:var(--y)} .m{color:var(--m)} .c{color:var(--c)}
.wrap{width:100%;max-width:1088px;margin-inline:auto;padding-inline:var(--pad) max(16px,env(safe-area-inset-right,0px))}
@media (min-width:768px){.wrap{padding-inline:32px}}

/* matte glass: frosted, a lit rim on top, grain inside */
.glass{position:relative;background:var(--glass);border:1px solid var(--edge-2);border-radius:16px;
  -webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(.09 - var(--light) * .04)),0 30px 60px -36px rgb(0 0 0 / calc(.7 - var(--light) * .63))}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:calc(var(--grain) * .9);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:color-mix(in srgb,var(--fg) 6%,var(--bg))}}

/* ── the bar ────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:rgb(var(--bg-rgb) / .62);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
  border-bottom:1px solid var(--edge);box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(.06 - var(--light) * .06))}
.bar-in{position:relative;display:flex;align-items:center;gap:var(--s4);min-height:var(--bar-h)}
.brand{display:flex;align-items:center;min-height:44px;flex:none}
.brand .mark{width:auto;height:16px;margin:0}
.brand .mark-shade{display:none}
.nav{display:flex;justify-content:center;gap:var(--s1);flex:1;min-width:0}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--dim);text-decoration:none;font:400 var(--t-sec)/1 var(--mono);white-space:nowrap}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="true"]{color:var(--fg)}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:10px;height:1px;background:var(--fg)}
.snd{position:relative;display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s3);border:1px solid var(--edge-2);border-radius:8px;background:none;color:var(--dim);font:400 var(--t-sec)/1 var(--mono);cursor:pointer;flex:none}
.snd::after{content:"";position:absolute;inset:-4px 0}
.snd svg{width:16px;height:16px}
.snd[aria-pressed="false"] .w{opacity:.25}
.snd[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.snd:hover{color:var(--fg)}
.menu-btn{display:none}

/* ── buttons ────────────────────────────────────────────── */
.inv{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6);border:0;border-radius:10px;
  background:var(--fg);color:var(--bg);font:600 var(--t-body)/1 var(--mono);text-decoration:none;cursor:pointer;transition:background-color var(--m-150)}
.inv::before{content:"↓";margin-right:var(--s3);font-weight:400}
.inv:hover{background:color-mix(in srgb,var(--fg) 86%,var(--bg))}
.inv.sm{min-height:36px;padding:0 var(--s4);font-size:var(--t-sec);border-radius:8px;position:relative;flex:none}
.inv.sm::after{content:"";position:absolute;inset:-4px 0}
#reopen.inv::before{content:"❯"}
.ghost-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s6);border:1px solid var(--edge-2);border-radius:10px;background:none;
  color:var(--fg);font:400 var(--t-body)/1 var(--mono);cursor:pointer;transition:border-color var(--m-150)}
.ghost-btn:hover{border-color:var(--fg)}
.ghost-btn.sm{min-height:44px;padding:0 var(--s4);font-size:var(--t-sec)}
.link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
.link:hover{text-decoration-color:var(--fg)}
.chip{min-height:44px;padding:0 var(--s4);border:1px solid var(--edge-2);border-radius:999px;background:rgb(var(--fg-rgb) / .03);color:var(--fg);font:400 var(--t-sec)/1 var(--mono);cursor:pointer}
.chip:hover{border-color:var(--fg)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}

/* ── the first screen: a Termobox window ────────────────── */
.window{margin-top:var(--s12);border-radius:18px;overflow:hidden}
.titlebar{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);border-bottom:1px solid var(--edge);
  background:linear-gradient(rgb(var(--bg-rgb) / .55),rgb(var(--bg-rgb) / .35))}
.lights{display:flex;gap:var(--s2)}
.lights i{width:12px;height:12px;border-radius:50%;background:var(--edge-2)}
.title{flex:1;text-align:center;margin-right:52px;font:400 var(--t-sec)/1 var(--mono);color:var(--faint)}
.hero{padding:var(--s8) clamp(20px,5vw,64px) var(--s12)}
.hero .out{gap:var(--s4)}
.mark{display:block;width:min(100%,440px);height:auto;margin-block:var(--s4) var(--s3)}
.mark-lit{fill:var(--fg)}
.mark-shade{fill:var(--faint);opacity:.55}
.mark rect{transition:opacity var(--m-150)}
.mark.is-printing rect.off{opacity:.12}
.kicker{font:400 var(--t-sec)/1.4 var(--mono);color:var(--dim)}
h1{font:300 clamp(36px,4.8vw,60px)/1.12 var(--mono);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.sel{background:var(--fg);color:var(--bg);font-weight:400;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font:400 var(--t-20)/1.55 var(--sans);color:var(--text);max-width:58ch}
.howto{margin:var(--s6) auto 0;text-align:center;color:var(--dim);font-size:var(--t-sec);max-width:64ch}
.howto .link{min-height:auto;margin-left:var(--s1)}

/* ── chapters ───────────────────────────────────────────── */
.chapter{margin-top:clamp(112px,18vh,200px)}
.blk .out{display:grid;gap:var(--s6);min-width:0}
.cmdline{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s3);font:400 var(--t-sec)/1.6 var(--mono);color:var(--dim)}
.cmdline::before{content:"";width:3px;height:1.2em;background:var(--ok);margin-right:var(--s1)}
.blk:has(.rp.err) > .cmdline::before{background:var(--err)}
.blk.is-printing > .cmdline::before{background:var(--y)}
.cwd{font-weight:600;color:var(--fg)}
.arr{color:var(--g)}
.blk:has(.rp.err) > .cmdline .arr{color:var(--r)}
.cmd{color:var(--fg)}
.rp{margin-left:auto;color:var(--faint);white-space:nowrap}
.rp.err{color:var(--r)}
.blk.is-printing .rp{visibility:hidden}
.chapter > .cmdline{margin-bottom:var(--s4)}
h2{font:300 clamp(30px,3.8vw,48px)/1.15 var(--mono);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
h3{font:600 var(--t-18)/1.3 var(--mono)}
.blk.is-on > .cmdline{color:var(--fg)}
.blk.is-on > .cmdline::after{content:"← выбрано";margin-left:var(--s3);color:var(--faint)}

.panel{padding:var(--s6)}
.panel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--edge)}
.term{font:400 var(--t-sec)/1.65 var(--mono)}
.term .ln{white-space:pre-wrap;overflow-wrap:anywhere}
.term .ln + .ln{margin-top:var(--s2)}
.facts{list-style:none;padding:0;display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.facts li{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s4);border-top:1px solid var(--edge)}
.facts b{font:600 var(--t-body)/1.3 var(--mono)}
.facts span{color:var(--dim);font-size:var(--t-sec);line-height:1.55}

/* diff */
.diff{display:grid;gap:2px;font:400 var(--t-sec)/1.55 var(--mono)}
.diff p{display:grid;grid-template-columns:2ch minmax(0,1fr);gap:var(--s2);padding:var(--s1) var(--s3);border-radius:6px}
.diff .del{color:var(--r);background:color-mix(in srgb,var(--r) 9%,transparent)}
.diff .add{color:var(--fg);background:color-mix(in srgb,var(--g) 9%,transparent)}
.diff .add span{color:var(--g)}
.diff .add + .del{margin-top:var(--s3)}

/* tables: the frame belongs to the rows, so it grows as they print */
.tbl{display:grid;font:400 var(--t-sec)/1.5 var(--mono)}
.tbl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--edge-2);border-top-color:var(--edge)}
.tbl > div + div{margin-top:-1px}
.tbl > div:first-child{border-top-color:var(--edge-2);border-radius:8px 8px 0 0}
.tbl > div:last-child{border-radius:0 0 8px 8px}
.tbl .th{color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-meta)}
.tbl.keys > div{grid-template-columns:minmax(0,14em) minmax(0,1fr)}
.tbl.keys span:last-child{color:var(--dim)}

/* sudo */
.split{display:grid;gap:var(--s8);align-items:center;margin-top:var(--s8)}
@media (min-width:880px){.split{grid-template-columns:minmax(0,1fr) 360px}}
.split-text{display:grid;gap:var(--s3)}
.split-text p{color:var(--dim)}
.sudo{display:grid;gap:var(--s3);padding:var(--s4);border-radius:14px;background:#101117;color:#e2e5f2;font:400 var(--t-sec)/1.4 var(--mono);
  border:1px solid rgb(255 255 255 / .16);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 30px 60px -30px rgb(0 0 0 / calc(.6 - var(--light) * .53))}
.sudo .meta{color:#9a9eb2}
.sudo .c-line{background:rgb(0 0 0 / .4);padding:var(--s2) var(--s3);border-radius:6px;color:#f2c46d;overflow-wrap:anywhere}
.sudo .pw{display:flex;align-items:center;min-height:40px;padding:0 var(--s3);border:1px solid rgb(255 255 255 / .2);border-radius:6px;letter-spacing:.2em;color:#9a9eb2}
.sudo .keep{display:flex;gap:var(--s2);align-items:center;color:#9a9eb2}
.sudo .keep i{width:16px;height:16px;display:grid;place-items:center;border-radius:4px;background:#e2e5f2;color:#101117;font-style:normal;font-size:var(--t-meta)}
.sudo .btns{display:flex;gap:var(--s2);justify-content:flex-end}
.sudo .btns > *{min-height:40px;padding:0 var(--s4);display:inline-flex;align-items:center;border-radius:8px;border:1px solid rgb(255 255 255 / .24);background:none;color:#e2e5f2;font:inherit}
.sudo .btns .ok{background:#e2e5f2;color:#101117;border-color:#e2e5f2}
.sudo button{cursor:pointer;min-height:44px!important}

/* feature cards */
.cards{display:grid;gap:var(--s6)}
@media (min-width:880px){.cards{grid-template-columns:1fr 1fr}#f-sync,#f-tabs{grid-column:1 / -1}}
.card{padding:var(--s6);display:grid;gap:var(--s4);align-content:start}
.card p{color:var(--dim);font-size:var(--t-sec);line-height:1.6;max-width:62ch}
.card-foot{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mini{border:1px solid var(--edge);border-radius:10px;background:rgb(var(--bg-rgb) / .45);padding:var(--s3) var(--s4);font:400 var(--t-sec)/1.55 var(--mono)}
.bdemo{display:grid;gap:var(--s2)}
.mb{border-left:3px solid var(--ok);padding:var(--s1) var(--s3);border-radius:0 6px 6px 0;cursor:pointer}
.mb.err{border-color:var(--err)}
.mb.is-on{background:var(--sel)}
.ps{color:var(--g)}
.ls{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.lk{position:relative;min-height:32px;padding:0 var(--s1);border:0;background:none;color:var(--fg);font:inherit;cursor:pointer}
.lk::after{content:"";position:absolute;inset:-6px -2px}
.lk:hover,.lk:focus-visible{text-decoration:underline;text-underline-offset:4px}
.lk.dir{color:var(--b);font-weight:600} .lk.url{color:var(--c)}
#ldemo .dim{margin-top:var(--s2);font-size:var(--t-sec)}

/* synchronized output */
.sync{display:grid;gap:var(--s4)}
@media (min-width:640px){.sync{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sync figure{display:grid;gap:var(--s2)}
.sync figcaption{font:400 var(--t-meta)/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.tui{margin:0;padding:var(--s3) var(--s4);border:1px solid var(--edge);border-radius:10px;background:rgb(var(--bg-rgb) / .5);font:400 var(--t-meta)/1.5 var(--mono);white-space:pre;overflow:hidden;color:var(--dim);min-height:calc(10 * 1.5em + 2 * var(--s3))}
.tui b{color:var(--fg);font-weight:400}

/* tabs demo */
.mwin{padding:0;overflow:hidden}
.mtabs-row{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);background:linear-gradient(rgb(var(--bg-rgb) / .7),rgb(var(--bg-rgb) / .5));border-bottom:1px solid var(--edge)}
.mtabs{position:relative;flex:1;min-width:0;display:flex;gap:var(--s1);padding:var(--s1);border-radius:9px;background:rgb(0 0 0 / calc(.3 - var(--light) * .26))}
.plate{position:absolute;top:var(--s1);bottom:var(--s1);left:0;width:0;border-radius:7px;pointer-events:none;
  background:rgb(var(--fg-rgb) / .12);border:1px solid var(--edge-2);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);transition:transform var(--m-300) var(--ease-out)}
.mtab{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;border-radius:7px;color:var(--dim);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mtab.on{color:var(--fg)}
.mtab .nm{flex:1;min-width:0;min-height:36px;padding:0 var(--s1) 0 var(--s3);background:none;border:0;color:inherit;font:400 var(--t-sec)/1 var(--mono);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;position:relative}
.mtab .nm::after{content:"";position:absolute;inset:-4px 0}
.mtab .x{flex:none;width:32px;height:32px;border-radius:6px;border:0;background:none;color:var(--faint);font:400 var(--t-body)/1 var(--mono);cursor:pointer;position:relative}
.mtab .x::after{content:"";position:absolute;inset:-6px}
.mtab .x:hover{color:var(--fg);background:var(--edge)}
.mtab.drop{animation:drop var(--m-300) var(--ease-out) both}
.mtab.is-drag{z-index:2;transition:none}
.mtab.slide{transition:transform var(--m-200) var(--ease-out)}
@keyframes drop{from{transform:translateX(var(--from,48px)) scale(.3);opacity:0}}
.plus{flex:none;width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--dim);font:400 var(--t-24)/1 var(--mono);cursor:pointer}
.plus:hover{color:var(--fg);background:var(--edge)}
.mbody{position:relative;overflow:hidden;min-height:96px;padding:var(--s3) var(--s4)}
.ripple{position:absolute;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--fg);opacity:0;pointer-events:none}
.ripple.go{animation:ripple var(--m-300) var(--ease-out)}
@keyframes ripple{from{transform:scale(1);opacity:.2}to{transform:scale(40);opacity:0}}
@media (max-width:767.98px){.mtab:not(.on) .x{display:none}}

/* themes */
.themes{display:grid;gap:var(--s1)}
.th-row{display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr) 9ch;gap:var(--s4);align-items:center;min-height:44px;padding:0 var(--s3);
  border:1px solid transparent;border-radius:10px;background:none;color:var(--fg);font:400 var(--t-sec)/1 var(--mono);text-align:left;cursor:pointer}
.th-row:hover{border-color:var(--edge-2)}
.th-row[aria-pressed="true"]{border-color:var(--fg);background:var(--sel)}
.th-row .sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:20px;border-radius:5px;overflow:hidden;border:1px solid var(--edge)}
.th-row .now{color:var(--faint);text-align:right}
.settings{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s12);margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--edge)}
.set{display:grid;gap:var(--s2)}
.set > span{font:400 var(--t-sec)/1.4 var(--mono);color:var(--dim)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--edge-2);border-radius:10px;overflow:hidden}
.seg button{min-height:44px;padding:0 var(--s4);border:0;background:none;color:var(--dim);font:400 var(--t-sec)/1 var(--mono);cursor:pointer}
.seg button + button{border-left:1px solid var(--edge-2)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* download */
.panel.get{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);align-items:center;padding:var(--s8)}
.panel.get img{width:96px;height:96px}
.get-text{display:grid;gap:var(--s3)}
.get-name{font:600 var(--t-24)/1.2 var(--mono)}
.steps{padding-left:var(--s6);display:grid;gap:var(--s2);color:var(--dim);max-width:72ch}
.steps li::marker{color:var(--faint);font-family:var(--mono)}
.more{border-top:1px solid var(--edge);padding-top:var(--s2)}
.more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:400 var(--t-sec)/1 var(--mono);color:var(--dim);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"›";width:2ch;color:var(--faint);transition:transform var(--m-150)}
.more[open] summary::before{transform:rotate(90deg)}
.more[open] summary{color:var(--fg)}
.more .tbl,.more .plain{margin:var(--s2) 0 var(--s4)}
.plain{color:var(--dim);display:grid;gap:var(--s2);padding-left:var(--s6)}
.foot{margin-top:var(--s24);padding-block:var(--s6) 140px;border-top:1px solid var(--edge);color:var(--faint);font-size:var(--t-sec)}

/* ── the command line, docked; its output in a console above it ── */
.dock{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));
  width:min(760px,calc(100% - 2 * var(--pad)));display:grid;gap:var(--s2)}
.prompt{display:flex;align-items:center;gap:var(--s3);min-height:56px;margin:0;padding:var(--s1) var(--s4);border-radius:14px;
  background:rgb(var(--bg-rgb) / .7);font:400 var(--t-body)/1 var(--mono)}
.prompt .cwd{white-space:nowrap}
.prompt:focus-within{border-color:var(--fg)}
.field{position:relative;flex:1;min-width:0}
.field input{width:100%;min-height:44px;padding:0;border:0;background:transparent;color:var(--fg);caret-color:var(--g);font:400 var(--t-body)/1.6 var(--mono)}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none}
.sugg{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;white-space:pre;overflow:hidden;color:var(--faint);font:400 var(--t-body)/1 var(--mono)}
.sugg .pad{visibility:hidden}
.phint{color:var(--faint);font-size:var(--t-meta);white-space:nowrap}
.console{max-height:min(46vh,420px);display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:14px;background:rgb(var(--bg-rgb) / .78);overflow:hidden;animation:fade var(--m-200) var(--ease-out)}
.console-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s1) var(--s2) var(--s1) var(--s4);border-bottom:1px solid var(--edge);font:400 var(--t-meta)/1 var(--mono)}
.x{width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--faint);font:400 var(--t-20)/1 var(--mono);cursor:pointer}
.x:hover{color:var(--fg);background:var(--edge)}
.live{overflow-y:auto;overscroll-behavior:contain;padding:var(--s3) var(--s4) var(--s4);display:grid;align-content:start;gap:var(--s4);font:400 var(--t-sec)/1.6 var(--mono)}
.live .blk .out{gap:var(--s1)}
.live .cmdline{color:var(--fg)}
.live .ln{white-space:pre-wrap;overflow-wrap:anywhere}
.live button.run{display:inline;min-height:auto;padding:0 2px;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;text-decoration:underline dashed var(--faint) 1px;text-underline-offset:4px}
.ask{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s1)}
.ask .opt{min-height:44px;padding:0 var(--s4);border:1px solid var(--edge-2);border-radius:8px;background:none;color:var(--fg);font:inherit;cursor:pointer}
.ask .opt.yes{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ── printing «по буквам» ───────────────────────────────── */
.tp-r{color:transparent!important;-webkit-text-fill-color:transparent}
.pv{opacity:0}
.is-printing .sel{background:none}
.is-printing .sel .tp > span:first-child{background:var(--fg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tcur{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.14em}
.tcur::after{content:"";position:absolute;left:0;top:0;width:.55em;height:1.05em;background:var(--fg)}

/* ── exit ───────────────────────────────────────────────── */
.gone{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;place-items:center;padding:var(--s8) var(--pad)}
.gone-in{display:grid;gap:var(--s6);width:min(720px,100%);animation:fade var(--m-300) var(--ease-out)}
.gone h2{font-size:var(--t-24)}
.gone .inv{justify-self:start}
body.is-gone .bar,body.is-gone main,body.is-gone .dock{visibility:hidden}
@keyframes fade{from{opacity:0;transform:translateY(4px)}}

/* theme switch: the new look opens as a circle from the chosen row */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:reveal var(--m-300) var(--ease-out)}
@keyframes reveal{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,50%))}}

/* ── narrow ─────────────────────────────────────────────── */
@media (max-width:899.98px){
  .nav{position:absolute;top:calc(100% + var(--s2));left:var(--pad);right:var(--pad);display:grid;justify-content:stretch;gap:0;padding:var(--s2);border-radius:14px;
    background:var(--bg);border:1px solid var(--edge-2);box-shadow:0 30px 60px -20px rgb(0 0 0 / calc(.6 - var(--light) * .53))}
  .nav a{padding:0 var(--s4);border-radius:8px}
  .nav a[aria-current="true"]{background:var(--sel)}
  .nav:not(.open){display:none}
  .nav a{min-height:44px;font-size:var(--t-body)}
  .nav a[aria-current="true"]::after{display:none}
  .menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--edge-2);border-radius:8px;background:none;color:var(--fg);font:400 var(--t-sec)/1 var(--mono);cursor:pointer;order:5}
  .brand{margin-right:auto}
  .snd span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:767.98px){
  .bar .get,.phint,.rp,.title{display:none}
  .window{margin-top:var(--s6)}
  .hero{padding:var(--s6) var(--s4) var(--s8)}
  .lead{font-size:var(--t-18)}
  .tbl > div{grid-template-columns:1fr;gap:0}
  .tbl > .th{display:none}
  .tbl > .th + div{border-top-color:var(--edge-2);border-radius:8px 8px 0 0}
  .tbl.keys > div{grid-template-columns:1fr}
  .th-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .th-row .now{display:none}
  .panel.get{grid-template-columns:1fr;padding:var(--s6)}
  .panel.get img{width:72px;height:72px}
  .panel,.card{padding:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}