/* suffix — System 7.
   Chicago for chrome, Geneva for reading, the six-colour Apple palette for
   everything that needs to sing. See DESIGN.md. */

@font-face{
  font-family:'ChicagoFLF';
  font-style:normal;font-weight:400;font-display:swap;
  src:local('ChicagoFLF'), local('Chicago'),
      url('https://fonts.cdnfonts.com/s/27099/ChicagoFLF.woff') format('woff');
}

:root{
  --black:#000; --white:#FFF;
  --ink:#000; --field:#FFF;
  --paper:#DEDEDE;          /* window and dialog fill */
  --dim:#555;               /* secondary text */
  --faint:#7A7A7A;
  --shadow:rgba(0,0,0,.34);

  /* The 1977 six-colour logo, used as this design's whole palette. */
  --g:#61BB46; --y:#FDB827; --o:#F5821F; --r:#E03A3E; --p:#963D97; --b:#009DDC;

  /* Krungthep ships with macOS and does Chicago's job; it is what the app
     uses, and it keeps Mac visitors in the same face if the CDN is unreachable. */
  --chrome:'ChicagoFLF','Chicago','Krungthep','Silkscreen',ui-monospace,monospace;
  --read:'Geneva','Verdana','DejaVu Sans',ui-sans-serif,system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* The 1984 pointer, drawn pixel by pixel. */
  --deskA:#8E8E8E; --deskB:#9A9A9A;
  --arrow:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZUlEQVR42uXWMQ4AIAgDwP7/07rohi4CbSNJV7iEAQBgrNBKBkCDaAB2MSBaAAZEE9AJ0QZ0QDwAlRAvQAXEE5AJ8QZkQLwAwQNzijmg80xrAYIB5RANwKXhPwDa80oHvK7MGzABFbjkRhmWL8IAAAAASUVORK5CYII=");
}

*{box-sizing:border-box}
/* System 7 inverted a selection. Nothing here should ever be browser-blue. */
::selection{background:var(--black);color:var(--white)}
::-moz-selection{background:var(--black);color:var(--white)}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--black);
  font-family:var(--read);
  font-size:15px;line-height:1.62;
  /* The 50% dither desktop, one pixel at a time. */
  background-color:#9A9A9A;
  background-image:
    linear-gradient(45deg,#8E8E8E 25%,transparent 25%,transparent 75%,#8E8E8E 75%),
    linear-gradient(45deg,#8E8E8E 25%,transparent 25%,transparent 75%,#8E8E8E 75%);
  background-size:4px 4px;
  background-position:0 0,2px 2px;
  cursor:var(--arrow) 0 0, default;
}
a{color:var(--black)}
/* Inherited by everything, so no element quietly reverts to the system arrow. */
html,body,button,a,summary,.item,.btn,td,th,input{cursor:var(--arrow) 0 0, default}

/* ── menu bar ─────────────────────────────────────────── */
.menubar{
  position:sticky;top:0;z-index:100;
  background:var(--white);border-bottom:1px solid var(--black);
  font-family:var(--chrome);font-size:13px;
  display:flex;align-items:stretch;height:26px;padding:0 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.menubar .item{
  display:flex;align-items:center;padding:0 11px;position:relative;
  text-decoration:none;color:var(--black);
}
.menubar .item:hover,.menubar .item[aria-expanded="true"],
.menubar a[aria-current="page"]{background:var(--black);color:var(--white)}
.menubar .item:hover .rainbow i,.menubar .item[aria-expanded="true"] .rainbow i{opacity:.9}
.menubar .spacer{margin-left:auto}
.menubar .right{display:flex;align-items:center;padding:0 8px;font-size:11px;color:var(--dim)}

/* the six-colour apple, drawn as stripes */
.rainbow{display:flex;flex-direction:column;width:13px;height:15px;gap:1px}
.rainbow i{display:block;height:2px;border-radius:1px;opacity:1}
.rainbow i:nth-child(1){background:var(--g)}
.rainbow i:nth-child(2){background:var(--y)}
.rainbow i:nth-child(3){background:var(--o)}
.rainbow i:nth-child(4){background:var(--r)}
.rainbow i:nth-child(5){background:var(--p)}
.rainbow i:nth-child(6){background:var(--b)}

.menu{
  display:none;position:absolute;top:100%;left:0;min-width:186px;
  background:var(--white);border:1px solid var(--black);
  box-shadow:2px 2px 0 var(--shadow);padding:3px 0;z-index:120;
}
.menu.open{display:block}
.menu a,.menu span{
  display:block;padding:3px 16px;text-decoration:none;color:var(--black);
  font-family:var(--chrome);font-size:13px;white-space:nowrap;
}
.menu a:hover{background:var(--black);color:var(--white)}
.menu span{color:#A8A8A8}
.menu hr{border:0;border-top:1px solid #BBB;margin:3px 0}
@media(max-width:620px){.menubar .hide{display:none}}

/* ── windows ──────────────────────────────────────────── */
.desk{max-width:min(1560px,94vw);margin:0 auto;padding:24px 0 70px}
@media(max-width:620px){.desk{padding:16px 12px 48px}}

.win{
  background:var(--paper);border:1px solid var(--black);
  box-shadow:2px 2px 0 var(--shadow);margin-bottom:26px;
}
.win.plain{background:var(--white)}
.titlebar{
  display:flex;align-items:center;gap:7px;
  height:21px;padding:0 6px;border-bottom:1px solid var(--black);
  background:repeating-linear-gradient(var(--black) 0 1px, var(--white) 1px 3px);
}
.titlebar .box{
  width:11px;height:11px;background:var(--white);
  border:1px solid var(--black);flex:none;
}
.titlebar .box.zoom{margin-left:auto;position:relative}
.titlebar .box.zoom::after{
  content:"";position:absolute;top:1px;left:1px;width:5px;height:5px;
  border:1px solid var(--black);
}
.titlebar .name{
  font-family:var(--chrome);font-size:12px;background:var(--white);
  padding:0 8px;line-height:15px;
}
.wbody{padding:22px 24px}
@media(max-width:620px){.wbody{padding:16px 14px}}

/* ── type ─────────────────────────────────────────────── */
h1{
  font-family:var(--chrome);font-weight:400;
  font-size:clamp(24px,4vw,40px);line-height:1.16;letter-spacing:.01em;
  margin:0 0 14px;text-wrap:balance;
}
h2{
  font-family:var(--chrome);font-weight:400;
  font-size:clamp(17px,2.2vw,22px);line-height:1.25;margin:0 0 12px;
}
h3{font-family:var(--chrome);font-weight:400;font-size:15px;margin:22px 0 7px}
p{margin:0 0 14px;max-width:68ch}
.lede{font-size:16.5px}
.dim{color:var(--dim)}
small,.small{font-size:13px;color:var(--dim)}

code,.mono{font-family:var(--data);font-size:.9em}
pre{
  font-family:var(--data);font-size:12.5px;line-height:1.65;
  background:var(--white);border:1px solid var(--black);
  padding:12px 14px;overflow-x:auto;margin:0 0 14px;
}

/* the six-colour rule, this design's divider */
.rule{display:flex;height:3px;margin:22px 0;gap:0}
.rule i{flex:1}
.rule i:nth-child(1){background:var(--g)}
.rule i:nth-child(2){background:var(--y)}
.rule i:nth-child(3){background:var(--o)}
.rule i:nth-child(4){background:var(--r)}
.rule i:nth-child(5){background:var(--p)}
.rule i:nth-child(6){background:var(--b)}

/* ── controls ─────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--chrome);font-size:13px;
  background:var(--white);color:var(--black);text-decoration:none;
  border:1px solid var(--black);border-radius:7px;
  padding:6px 18px;box-shadow:1px 1px 0 var(--shadow);
}
.btn:active{background:var(--black);color:var(--white)}
.btn.default{
  position:relative;box-shadow:1px 1px 0 var(--shadow), 0 0 0 3px var(--white), 0 0 0 4px var(--black);
  margin:4px 6px;
}
.btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:18px 0 0}


/* ── layout helpers ───────────────────────────────────── */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:820px){.cols,.cols3{grid-template-columns:1fr;gap:18px}}

.note{
  background:var(--white);border:1px solid var(--black);
  padding:13px 16px;margin:18px 0;max-width:70ch;
  box-shadow:1px 1px 0 var(--shadow);
}
.note p:last-child{margin-bottom:0}
.note .tag{
  font-family:var(--chrome);font-size:11px;display:inline-block;
  background:var(--y);border:1px solid var(--black);padding:0 6px;margin-bottom:7px;
}

/* ── tables ───────────────────────────────────────────── */
.tw{overflow-x:auto;margin:16px 0;border:1px solid var(--black);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th,td{text-align:left;padding:7px 11px;border-bottom:1px solid #C9C9C9}
th{
  font-family:var(--chrome);font-size:11px;font-weight:400;
  background:repeating-linear-gradient(var(--black) 0 1px, var(--white) 1px 3px);
  border-bottom:1px solid var(--black);
}
th span{background:var(--white);padding:0 5px}
tr:last-child td{border-bottom:none}
.mx td,.mx th{text-align:center;padding:6px 5px}
.mx td:first-child,.mx th:first-child{text-align:left;white-space:nowrap}
td.f{font-family:var(--data);font-size:12.5px;white-space:nowrap}
.y{color:#1E7A38;font-weight:700}.n{color:#9A9A9A}.p{color:#B4610F;font-weight:700}

/* the selection: black, inverted, as System 7 did it */
.sel{background:var(--black);color:var(--white);padding:0 3px;font-family:var(--data)}

/* ── the Finder demo ──────────────────────────────────── */
.finder .head-row,.finder .row{
  display:grid;grid-template-columns:minmax(0,1fr) 70px 104px;gap:8px;
  align-items:center;padding:0 10px;
}
.finder .head-row{
  height:19px;font-family:var(--chrome);font-size:10px;color:var(--dim);
  border-bottom:1px solid var(--black);background:var(--white);
}
.finder .list{background:var(--white);padding:3px 0 5px}
.finder .row{height:26px}
.finder .nm{display:flex;align-items:center;gap:7px;min-width:0}
.fname{font-family:var(--data);font-size:12px;white-space:nowrap}
.finder .sz,.finder .kd{font-family:var(--data);font-size:10.5px;color:var(--faint)}
#target.on{background:var(--black)}
#target.on .fname,#target.on .sz,#target.on .kd{color:var(--white)}
#target.edit .fname{background:var(--white);color:var(--black);outline:1px solid var(--black)}
#caret{display:none;width:1px;height:11px;background:var(--black);vertical-align:-2px}
#target.edit #caret{display:inline-block;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* pixel document icons, coloured the way System 7 coloured them */
.doc{width:13px;height:16px;flex:none;background:var(--white);border:1px solid var(--black);position:relative}
.doc::after{
  content:"";position:absolute;left:1px;right:1px;bottom:1px;height:5px;background:var(--b);
}
.doc[data-k="PDF"]::after{background:var(--r)}
.doc[data-k="JPG"]::after{background:var(--g)}
.doc[data-k="MOV"]::after{background:var(--p)}
.doc[data-k="TXT"]::after{background:var(--y)}

/* the notice, as a System 7 alert */
.alert{
  background:var(--white);border:1px solid var(--black);
  box-shadow:2px 2px 0 var(--shadow);padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;max-width:330px;
  opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease;
}
.alert.in{opacity:1;transform:none}
.alert .bang{
  width:26px;height:26px;flex:none;border:1px solid var(--black);border-radius:50%;
  display:grid;place-items:center;font-family:var(--chrome);font-size:15px;background:var(--y);
}
.alert .t{font-family:var(--chrome);font-size:12px;margin-bottom:3px}
.alert .fn{font-family:var(--data);font-size:12px}
.alert .a{font-family:var(--chrome);font-size:11px;color:var(--dim);margin-top:6px}

/* ── footer ───────────────────────────────────────────── */
.trashline{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-top:8px;
}
footer{font-family:var(--chrome);font-size:11px;color:#3A3A3A}
footer a{color:#3A3A3A}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ── movement ─────────────────────────────────────────────
   A file browser should not bounce. These are the three
   places motion says something: a window arriving, a row
   under the pointer, and the colour rule drawing itself. */

/* Transform only — never opacity. An entrance that starts at opacity:0
   leaves the page blank if the animation does not run, and it does not run
   in a background tab. Sliding from 10px costs nothing if it is skipped. */
.win{
  transform:translateY(10px);
  animation:open .34s cubic-bezier(.2,.8,.3,1) forwards;
}
.win:nth-of-type(2){animation-delay:.06s}
.win:nth-of-type(3){animation-delay:.12s}
.win:nth-of-type(4){animation-delay:.18s}
.win:nth-of-type(5){animation-delay:.24s}
.win .win{animation:none;opacity:1;transform:none}
@keyframes open{to{transform:none}}

/* the six-colour rule wipes in, left to right */
.rule i{transform:scaleX(.06);transform-origin:left;animation:wipe .5s ease forwards}
.rule i:nth-child(1){animation-delay:.18s}
.rule i:nth-child(2){animation-delay:.24s}
.rule i:nth-child(3){animation-delay:.30s}
.rule i:nth-child(4){animation-delay:.36s}
.rule i:nth-child(5){animation-delay:.42s}
.rule i:nth-child(6){animation-delay:.48s}
@keyframes wipe{to{transform:scaleX(1)}}

/* rows invert under the pointer, the way a Finder row does */
tbody tr{transition:background .1s steps(1), color .1s steps(1)}
tbody tr:hover{background:var(--black);color:var(--white)}
tbody tr:hover .sel{background:var(--white);color:var(--black)}
tbody tr:hover .y,tbody tr:hover .p,tbody tr:hover .n{color:var(--white)}
tbody tr:hover code{background:transparent;color:var(--white)}

/* windows lift very slightly when pointed at */
.win{transition:box-shadow .16s ease, transform .16s ease}
.win:hover{box-shadow:3px 3px 0 var(--shadow)}

/* the title bar of the window you are pointing at looks active */
.win .titlebar{transition:background .12s steps(1)}
.win:not(:hover) > .titlebar{background:var(--white)}

.btn{transition:transform .08s ease}
.btn:active{transform:translate(1px,1px)}

@media(prefers-reduced-motion:reduce){
  .win,.rule i{transform:none;animation:none}
}


/* ── night ────────────────────────────────────────────────
   System 7 had no dark mode. This is the compromise: the
   desktop dims, windows keep their frames, and the six
   colours stay exactly as bright as they were. */
[data-theme="dark"]{
  --black:#E8E8E6; --white:#1A1A1C;
  --paper:#232326; --dim:#A6A6A2; --faint:#7E7E7A;
  --shadow:rgba(0,0,0,.6);
  --deskA:#242427; --deskB:#2B2B2F;
}
[data-theme="dark"] body{background-color:var(--deskB)}
[data-theme="dark"] .titlebar{
  background:repeating-linear-gradient(var(--black) 0 1px, var(--white) 1px 3px);
}
[data-theme="dark"] th{
  background:repeating-linear-gradient(var(--black) 0 1px, var(--white) 1px 3px);
}
[data-theme="dark"] .doc{background:var(--white);border-color:var(--black)}
[data-theme="dark"] pre,[data-theme="dark"] .note,[data-theme="dark"] .tw,
[data-theme="dark"] .alert,[data-theme="dark"] .menu,[data-theme="dark"] .menubar,
[data-theme="dark"] .finder .list,[data-theme="dark"] .finder .head-row{background:var(--white)}
[data-theme="dark"] td{border-bottom-color:#3A3A3E}
body{
  background-image:
    linear-gradient(45deg,var(--deskA) 25%,transparent 25%,transparent 75%,var(--deskA) 75%),
    linear-gradient(45deg,var(--deskA) 25%,transparent 25%,transparent 75%,var(--deskA) 75%);
}

/* ── 2. the footer sits at the bottom, not wherever content ended ── */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
.pagefoot{margin-top:auto}
footer{
  border-top:1px solid var(--black);
  background:var(--white);
  padding:10px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}

/* ── 1. every command box can be copied ── */
.cmd{position:relative}
.cmd pre{margin:0;padding-right:78px}
.copy{
  position:absolute;top:7px;right:7px;
  font-family:var(--chrome);font-size:10px;
  background:var(--white);color:var(--black);
  border:1px solid var(--black);border-radius:5px;
  padding:3px 9px;box-shadow:1px 1px 0 var(--shadow);
}
.copy:hover{background:var(--black);color:var(--white)}
.copy:active{transform:translate(1px,1px)}
.copy[data-done="1"]{background:var(--g);color:var(--black)}

/* ── 3. the apple, in its own shape ── */
.applelogo{width:17px;height:21px;vertical-align:-4px;margin-right:9px;flex:none}
/* 13px was the honest historical size and far too small to read as a rainbow.
   17px is where the six stripes become six stripes again. */
.btn{display:inline-flex;align-items:center}

/* ── the trash, drawn properly, and it does something ── */
.bin{width:30px;height:34px;position:relative;flex:none;background:none;border:0;padding:0}
.bin .lid,.bin .can{position:absolute;border:1.5px solid var(--black);background:var(--white)}
.bin .lid{top:0;left:4px;right:4px;height:5px;border-radius:2px 2px 0 0}
.bin .can{top:6px;left:1px;right:1px;bottom:0;border-radius:0 0 5px 5px}
.bin .can::after{
  content:"";position:absolute;inset:4px 6px 4px 6px;
  background:repeating-linear-gradient(90deg,var(--black) 0 1.5px,transparent 1.5px 6px);
  opacity:.55;
}
.bin:hover{animation:wiggle .4s ease-in-out}
@keyframes wiggle{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

/* ── dialogs: About, and the trash joke ── */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.28);
}
.modal.open{display:flex}
.dialog{
  background:var(--paper);border:2px solid var(--black);
  box-shadow:4px 4px 0 var(--shadow);max-width:430px;width:100%;
}
.dialog .dbody{padding:20px 22px}
.dialog h2{margin-bottom:8px}
.meter{border:1px solid var(--black);height:13px;background:var(--white);margin:5px 0 3px;position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,var(--b) 0 3px,var(--white) 3px 5px)}

/* ── the waitlist form ── */
.field{margin-bottom:20px;max-width:560px}
.field label{display:block;font-family:var(--chrome);font-size:13px;margin-bottom:5px}
.field .hint{font-size:13px;color:var(--dim);margin-bottom:7px}
.field input,.field textarea{
  width:100%;font-family:var(--read);font-size:15px;
  background:var(--white);color:var(--black);
  border:1px solid var(--black);border-radius:0;padding:8px 10px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--b);outline-offset:1px}

/* ── theme switch, dressed as a System 7 control ── */
.themeswitch{
  font-family:var(--chrome);font-size:11px;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;color:var(--black);padding:0;
}
.themeswitch .lamp{
  width:11px;height:11px;border:1px solid var(--black);background:var(--white);
  display:inline-block;position:relative;
}
[data-theme="dark"] .themeswitch .lamp::after{
  content:"";position:absolute;inset:2px;background:var(--y);
}

/* ── the menu bar clock ─────────────────────────────────
   System 7 shipped one as a desk accessory, and everyone
   installed it. Click it and it shows the date, same as
   it did then. */
.clock{
  font-family:var(--chrome);font-size:11px;
  padding:0 10px;height:22px;display:flex;align-items:center;
  background:none;border:0;color:var(--black);
}
.clock:hover{background:var(--black);color:var(--white)}

/* ── the practice folder ────────────────────────────────
   The demo you can drive yourself. Same rules as the app:
   it reads what the file is, not what it is called. */
.play .row{cursor:default;user-select:none}
.play .row.on{background:var(--black);color:var(--white)}
.play .row.on .sz,.play .row.on .kd{color:var(--white)}
.play .row.on .doc{background:var(--white)}
.play .row:hover:not(.on){background:rgba(0,0,0,.05)}
[data-theme="dark"] .play .row:hover:not(.on){background:rgba(255,255,255,.07)}
.play .fname .edit{
  font-family:var(--data);font-size:12px;line-height:1;
  background:var(--white);color:var(--black);
  border:1px solid var(--black);border-radius:0;
  padding:1px 2px;width:8.5ch;
}
.play .fname .edit:focus{outline:0}
.play .row.done{animation:flick .5s steps(1) 2}
@keyframes flick{50%{background:var(--black);color:var(--white)}}

.playbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;font-family:var(--chrome);font-size:11px;color:var(--dim);
  border-top:1px solid var(--black);padding:7px 10px;background:var(--paper);
}
.score{font-family:var(--data);font-size:11px;color:var(--black)}

/* the System 7 alert: an icon, a sentence, one button */
.s7alert{
  display:none;gap:14px;align-items:flex-start;
  border:1px solid var(--black);background:var(--white);
  padding:14px 16px;margin-top:16px;box-shadow:2px 2px 0 var(--shadow);
}
.s7alert.on{display:flex;animation:nudge .22s ease}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.s7alert .ico{
  width:32px;height:32px;flex:none;border:2px solid var(--black);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--chrome);font-size:19px;
}
.s7alert .msg{display:block;font-size:14px;line-height:1.45}
.s7alert .msg b{font-family:var(--data);font-weight:400}
.s7alert .why{display:block;color:var(--dim);font-size:13px;margin-top:5px}

/* more document colours, one per family */
.doc[data-k="PNG"]::after,.doc[data-k="HEIC"]::after{background:var(--b)}
.doc[data-k="DOCX"]::after,.doc[data-k="PAGES"]::after{background:var(--o)}
.doc[data-k="KEY"]::after{background:var(--p)}
.doc[data-k="M4A"]::after,.doc[data-k="MP3"]::after{background:var(--y)}
.doc[data-k="ZIP"]::after{background:var(--dim)}

/* closed windows go to the Trash, and can come back out */
.binlist{font-family:var(--data);font-size:12px;margin:10px 0 4px}
.binlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--line,#D8D6D0)}
.binlist button{
  font-family:var(--chrome);font-size:10px;background:var(--white);color:var(--black);
  border:1px solid var(--black);border-radius:5px;padding:2px 8px;
}
.binlist button:hover{background:var(--black);color:var(--white)}
.bin.full .lid{transform:translate(3px,-3px) rotate(-14deg)}
.bin .lid{transition:transform .18s ease}

/* ── the DOS box on the windows page ────────────────────
   The one place this site is allowed to stop being a Mac. */
.dos{
  background:#000;color:#C8C8C8;border:1px solid var(--black);
  font-family:var(--data);font-size:12.5px;line-height:1.5;
  padding:14px 16px;min-height:150px;white-space:pre-wrap;
}
.dos .caret{display:inline-block;width:8px;height:14px;background:#C8C8C8;vertical-align:-2px;
  animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dos .err{color:#E8E8E8}
[data-theme="dark"] .dos{border-color:var(--black)}

.spec{font-family:var(--data);font-size:12px;margin-top:4px}
.spec li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:6px 0;
  border-bottom:1px solid rgba(128,128,128,.35)}
.spec li:last-child{border-bottom:0}
.spec .no{color:var(--r);font-family:var(--chrome);font-size:11px}