/* Skins — EXPERIMENTAL. One block per skin, and nothing but custom properties.

   The default card is not in here. It is style.css's `:root`, and every token below
   falls back to it, so a skin is only its DIFFERENCES from the shipped card. That is
   deliberate: the default cannot be broken by a skin, because no skin describes it.

   THE ONE RULE, and a test enforces it (TestASkinCannotReachPastItsTokens):

       a skin may declare custom properties and nothing else.

   No selectors of its own, no widths, no paddings, no `display`. The whole point is
   that skins cost testing ONCE, on the token surface, rather than nineteen times on the
   card — the card's fixed 620×544 (embed 348×320), its one control height and the
   height it reports to embed.js cannot be reached from this file at all. A skin that
   wants a heavy bezel draws it inside the box it was given, with a border and a
   gradient, and the layout never hears about it.

   Colour: a skin brings its own palette, and most of these only make sense in one —
   Terminal is not a light look and Paper is not a dark one — so the light/dark toggle
   does nothing while a skin is on. That is said in the setting's own help text rather
   than left for a caller to wonder about. The STATION's palette still wins over
   everything here: `swtv:theme` sets these same properties inline on :root, which
   outranks any rule in this file.

   ART — read this before drawing one. `--skin-art` is a picture in the transcript box
   while there is no conversation in it, and it goes the moment a call starts. Three
   things were learned making the first pass of these look like anything at all, after
   the operator's verdict ("sometimes it's just a bunch of lines or a circle in the
   middle of the screen for an unknown reason and looks weird"):

     * EVERY LAYER SHARES ONE TILE unless it carries its own `position / size`. A
       drawing is built by placing shapes inside one tile — either with `at x% y%`
       inside a gradient, or by giving that layer its own `<pos> / <size>` — which is
       what makes a recognisable OBJECT possible instead of one shape per skin.
     * PLACE IT OUT OF THE WAY. The idle board's headline and status own the middle of
       the box. `--skin-art-pos` defaults low; a drawing that sits in the centre has to
       be one that FRAMES the text (a reticle, a gauge), or it reads as a circle resting
       on the words for no reason.
     * ANYTHING THAT MOVES uses one of the keyframes style.css defines — skinspin,
       skinblink, skinpulse, skinbouncex, skinbouncey, skinfall (travel by
       --skin-fall, seamless when every moving layer's period divides it), and
       skinflicker (a neon stutter) — because a skin cannot declare a @keyframes of
       its own here either. A rotation must be centred (`--skin-art-pos:
       center`) or it orbits the middle of the box instead of turning on the spot.

   `--skin-word-display: block` turns on the WORD instead — the station's programme
   name, filled by call.js — for a skin whose artefact is type rather than shape. */

/* --- broadcast and telephony ------------------------------------------------------
   The station's own furniture. These read as equipment rather than as costume, which
   is why they are first: the widget IS a piece of studio gear. */

/* Switchboard — the operator's plate: a jackfield with two lines patched. */
:root[data-skin="switchboard"] {
  --pine: #14100c; --granite: #1c1712; --granite-hi: #241d16;
  --alpenglow: #f0e6d4; --sage: #a8977c; --sage-dim: #7b6c55;
  --coral: #e8913a; --amber: #d9c15a;
  --hairline: #302619; --edge: #3d3020;
  /* moss, so the lamp reads warm against the brass */
  --ok: #86b464; --cool: #6a8f92;
  --shadow: 0 2px 0 rgba(0,0,0,.5);
  --font-mono: "Courier New", ui-monospace, Consolas, monospace;
  --skin-radius: 4px; --skin-radius-ctl: 2px; --skin-border: 2px;
  --skin-card-bg: linear-gradient(180deg, rgba(255,224,170,.07), transparent 38%);
  --skin-well-bg: linear-gradient(180deg, rgba(0,0,0,.4), transparent 55%);
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,224,170,.05), rgba(0,0,0,.15));
  --skin-glow: 0 0 10px rgba(232,145,58,.45);
  /* A jackfield that owns its panel: two rows of four sockets, one line
     PATCHED — a cord running from a lit jack in the top row to a lit jack in
     the bottom row, with a plug boss at each end. The cord is the whole
     point: without it the first pass was "random dot brightness", not a
     switchboard. An engraved rule with per-socket ticks sits under the field
     like a real strip label. The first pass also hugged the foot of the box
     and ended up ON the headline once the board moved down; the field now
     sits in the drawing's own upper two-thirds. */
  --skin-art-bg:
    /* the patch cord: straight down column 2, top-row jack to the jack
       below it. Vertical on purpose — a diagonal drawn as a gradient band
       tapers off before it reaches its tile's corners, which is why two
       passes of this cord floated near the jacks instead of plugging in.
       A vertical stroke has no corners to miss. The plug bosses cap it. */
    linear-gradient(180deg, rgba(232,145,58,.5) 0 100%) 42.2% 40% / 3px 49px no-repeat,
    radial-gradient(circle 6px at 50% 50%, rgba(232,145,58,.9) 70%, transparent 76%) 42% 22% / 26px 26px no-repeat,
    radial-gradient(circle 6px at 50% 50%, rgba(232,145,58,.9) 70%, transparent 76%) 42% 62% / 26px 26px no-repeat,
    /* top row */
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 26% 22% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(232,145,58,.7) 56%, transparent 74%) 42% 22% / 26px 26px no-repeat,
    radial-gradient(circle 4.5px at 50% 50%, rgba(232,145,58,.95) 60%, transparent 64%) 42% 22% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 58% 22% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 74% 22% / 26px 26px no-repeat,
    /* bottom row — the patched line is column 2, straight under its mate */
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 26% 62% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(232,145,58,.7) 56%, transparent 74%) 42% 62% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 58% 62% / 26px 26px no-repeat,
    radial-gradient(circle 10px at 50% 50%, transparent 52%, rgba(168,151,124,.4) 56%, transparent 74%) 74% 62% / 26px 26px no-repeat,
    /* the strip label: engraved rule, a tick under each socket column */
    linear-gradient(90deg, rgba(168,151,124,.4) 0 100%) 50% 88% / 56% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(168,151,124,.38) 0 1px, transparent 1px 33%) 50% 95% / 50% 6px no-repeat;
  /* The station's own name as the panel's engraved designation plate — type
     is what a strip label carries, and the word slot is exactly that. */
  --skin-word-display: block;
  --skin-word-size: 10px;
  --skin-word-ink: var(--sage-dim);
  --skin-word-inset: auto auto 8px 14px;
}

/* Rack unit — 1U of brushed steel: a vent panel between two rack screws. */
:root[data-skin="rack"] {
  --pine: #0e0f10; --granite: #1a1c1e; --granite-hi: #131517;
  --alpenglow: #e8ecef; --sage: #98a1a8; --sage-dim: #6b747b;
  --coral: #4fb0c9; --amber: #d2a63f;
  --hairline: #343a40; --edge: #4a525a;
  /* clear green, well clear of the cyan accent */
  --ok: #6ecf72; --cool: #4fb0c9;
  --shadow: 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.5);
  --skin-radius: 3px; --skin-radius-ctl: 2px; --skin-border: 1px;
  /* Brushed metal is a very fine vertical grain — and it has to be VISIBLE:
     the first pass ground it at .035 alpha and the card came out flat matte
     charcoal, indistinguishable from a default dark theme. */
  --skin-card-bg:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.1) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 35%, rgba(0,0,0,.2));
  /* The transcript box IS the vent panel now — full-width slots rather than
     a 40%-wide smudge floating in dead space. Dim enough to sit under the
     idle words. */
  --skin-well-bg:
    repeating-linear-gradient(180deg,
      transparent 0 7px, rgba(255,255,255,.05) 7px 10px, transparent 10px 14px),
    linear-gradient(180deg, rgba(0,0,0,.45), transparent 55%);
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  /* Four rack screws at the panel's own corners — the thing that says "1U
     bolted into a rack" — sized to be seen, slots at opposing angles the
     way real screws never line up. Full frame: the screws mark the box. */
  --skin-art-clear: 0;
  --skin-art-bg:
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.45) 55%, transparent 60%) 3% 7% / 20px 20px no-repeat,
    linear-gradient(45deg, transparent 42%, rgba(0,0,0,.85) 42% 58%, transparent 58%) 3% 7% / 22px 22px no-repeat,
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.45) 55%, transparent 60%) 97% 7% / 20px 20px no-repeat,
    linear-gradient(-30deg, transparent 42%, rgba(0,0,0,.85) 42% 58%, transparent 58%) 97% 7% / 22px 22px no-repeat,
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.45) 55%, transparent 60%) 3% 94% / 20px 20px no-repeat,
    linear-gradient(80deg, transparent 42%, rgba(0,0,0,.85) 42% 58%, transparent 58%) 3% 94% / 22px 22px no-repeat,
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.45) 55%, transparent 60%) 97% 94% / 20px 20px no-repeat,
    linear-gradient(45deg, transparent 42%, rgba(0,0,0,.85) 42% 58%, transparent 58%) 97% 94% / 22px 22px no-repeat;
}

/* Console strip — one channel of the desk: a fader beside its LED ladder. */
:root[data-skin="console"] {
  --pine: #101215; --granite: #171a1e; --granite-hi: #1e2228;
  --alpenglow: #eef1f4; --sage: #93a0ad; --sage-dim: #66707c;
  --coral: #e04f6a; --amber: #efc75e;
  --hairline: #262b31; --edge: #333a42;
  /* the desk's own meter green */
  --ok: #57d18c; --cool: #56a8c4;
  --shadow: 0 2px 6px rgba(0,0,0,.45);
  --skin-radius: 2px; --skin-radius-ctl: 1px; --skin-border: 1px;
  --skin-card-bg: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
  /* The desk's channel seams run the whole box — one hairline every strip
     width, which is what says "one channel OF a desk" instead of a gadget
     floating in a void. */
  --skin-well-bg:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.035) 79px 80px),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.12));
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  /* The channel strip proper: a recessed slot with scale ticks beside it,
     the cap just above unity, and the LED ladder as a tight stack in its
     own meter well — co-registered with the fader's travel, because the
     first pass scattered the LEDs and they read as hyphens in the dark. */
  --skin-art-bg:
    /* fader slot, rail, ticks, cap */
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28)) 64% 42% / 10px 96px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.14) 0 100%) 64% 42% / 2px 96px no-repeat,
    repeating-linear-gradient(180deg, rgba(147,160,173,.32) 0 1px, transparent 1px 11px) 58% 42% / 6px 89px no-repeat,
    linear-gradient(180deg, rgba(238,241,244,.95) 0 100%) 64% 31% / 24px 8px no-repeat,
    /* meter well */
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.25)) 76% 42% / 24px 96px no-repeat,
    /* the ladder, bottom-up: three green, two amber, two dim red */
    repeating-linear-gradient(180deg, rgba(95,201,138,.85) 0 5px, transparent 5px 10px) 76% 56% / 16px 25px no-repeat,
    repeating-linear-gradient(180deg, rgba(239,199,94,.8) 0 5px, transparent 5px 10px) 76% 36% / 16px 15px no-repeat,
    repeating-linear-gradient(180deg, rgba(224,79,106,.3) 0 5px, transparent 5px 10px) 76% 20% / 16px 15px no-repeat;
}

/* Shortwave — wood and cream, and a lit dial with the needle on a band. */
:root[data-skin="shortwave"] {
  --pine: #e6d8b8; --granite: #f7eed9; --granite-hi: #e6d7b6;
  --alpenglow: #2b2016; --sage: #6b5a42; --sage-dim: #8d7c62;
  --coral: #a8442a; --amber: #7a5410;
  --hairline: #cbb994; --edge: #a98f63;
  /* bottle green, period-correct and legible on cream */
  --ok: #3d6b3a; --cool: #3d6a72;
  --shadow: 0 2px 5px rgba(80,60,30,.25);
  --font-body: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --skin-radius: 12px; --skin-radius-ctl: 3px; --skin-border: 2px;
  /* Wood as well as cream: a faint diagonal grain under the cabinet's sheen,
     which is the half of the name the first pass never delivered. */
  --skin-card-bg:
    repeating-linear-gradient(94deg, rgba(122,84,16,.05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 42%);
  --skin-well-bg: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.15));
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  /* A LIT dial now: a warm lamp band glows behind the scale, the ticks read
     against it, and the needle crosses the whole band. The first pass drew
     the scale at the foot of the box, which — once the idle board moved down
     — struck the ticks straight through the headline; the dial lives in the
     drawing's own upper region instead. */
  --skin-art-bg:
    linear-gradient(180deg, rgba(255,196,90,0), rgba(255,196,90,.3) 50%, rgba(255,196,90,0)) 50% 30% / 66% 38px no-repeat,
    linear-gradient(180deg, rgba(43,32,22,.5) 0 100%) 50% 37% / 62% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(43,32,22,.42) 0 1px, transparent 1px 9px) 50% 33% / 62% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(43,32,22,.6) 0 1px, transparent 1px 45px) 50% 32% / 62% 14px no-repeat,
    linear-gradient(180deg, rgba(168,68,42,.95) 0 100%) 57% 27% / 2px 34px no-repeat,
    linear-gradient(180deg, transparent 45%, rgba(168,68,42,.95) 45%) 57% 16% / 9px 9px no-repeat;
}

/* Turntable — the platter, and it turns. The operator's own example: it is
   there between calls and gone the moment somebody is on the line. (The id
   stays `tape` — it is a stored settings value on real decks.) */
:root[data-skin="tape"] {
  --pine: #17161a; --granite: #201e24; --granite-hi: #2a272f;
  --alpenglow: #ece7dd; --sage: #a49d92; --sage-dim: #77716a;
  --coral: #d9704a; --amber: #cfa94e;
  --hairline: #322e38; --edge: #423d4a;
  /* a warmer green for the plastic and orange label */
  --ok: #63b184; --cool: #5b8a99;
  --shadow: 0 3px 10px rgba(0,0,0,.5);
  --skin-radius: 8px; --skin-radius-ctl: 2px; --skin-border: 1px;
  --skin-card-bg: linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%);
  --skin-well-bg: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.05), transparent);
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
  /* A record at record size: rim, grooves, label, spindle — and ONE radial
     mark, because without it a rotating disc is indistinguishable from a
     still one. The first pass squeezed a 68px disc into a leftover band and
     it landed tiny, on the headline. The drawing's box is the art frame
     itself now (the base sheet already keeps that clear of the board's
     text), the disc turns about the frame's centre, and at 128px it reads as
     the object the skin is named for. The mark is an ellipse dash drawn off
     the tile's centre, so the spin carries it round the label. */
  --skin-art-anim: skinspin 5.5s linear infinite;
  --skin-art-bg:
    radial-gradient(ellipse 2px 8px at 50% 21%, rgba(236,231,221,.6) 60%, transparent 72%) center / 128px 128px no-repeat,
    radial-gradient(circle 3px at 50% 50%, rgba(23,22,26,.95) 62%, transparent 66%) center / 128px 128px no-repeat,
    radial-gradient(circle 22px at 50% 50%, rgba(217,112,74,.6) 94%, transparent 96%) center / 128px 128px no-repeat,
    radial-gradient(circle 34px at 50% 50%, transparent 94%, rgba(236,231,221,.15) 95%, transparent 97%) center / 128px 128px no-repeat,
    radial-gradient(circle 43px at 50% 50%, transparent 95%, rgba(236,231,221,.13) 96%, transparent 98%) center / 128px 128px no-repeat,
    radial-gradient(circle 52px at 50% 50%, transparent 95%, rgba(236,231,221,.14) 96%, transparent 98%) center / 128px 128px no-repeat,
    radial-gradient(circle 60px at 50% 50%, transparent 96%, rgba(236,231,221,.45) 97%, transparent 99%) center / 128px 128px no-repeat,
    /* the platter's sheen: a soft top light the disc sits in */
    radial-gradient(circle 70px at 50% 42%, rgba(255,255,255,.05), transparent 75%) center / 160px 160px no-repeat;
}

/* --- screen and terminal ----------------------------------------------------------
   One family, four palettes. If the token surface can carry these, it can carry
   anything anyone asks for next. */

/* Terminal — phosphor green, scanlines, a prompt waiting in the corner. */
:root[data-skin="terminal"] {
  --pine: #020705; --granite: #05100b; --granite-hi: #071a10;
  --alpenglow: #7dffb0; --sage: #3fbf78; --sage-dim: #2a8a55;
  --coral: #4dff9b; --amber: #9dff6a;
  --hairline: #0d3d24; --edge: #135633;
  /* paler phosphor, so live is not the accent */
  --ok: #9dffc4; --cool: #35c9a0;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  --skin-texture: repeating-linear-gradient(180deg,
    rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  --skin-glow: 0 0 9px rgba(77,255,155,.55);
  /* The tube breathes at its edges: a vignette on the well so the box reads
     as glass with phosphor behind it, not a flat dark rectangle. */
  --skin-well-bg: radial-gradient(130% 140% at 50% 50%, transparent 52%, rgba(0,0,0,.5));
  /* A session, not a floating glyph: the prompt sits at the TOP LEFT where a
     terminal actually starts, and it has printed something — the station's
     own programme name, via the word slot, like an echoed command. The
     cursor blinks on the line below it. */
  --skin-art-bg:
    linear-gradient(45deg, transparent 40%, rgba(77,255,155,.8) 40% 60%, transparent 60%) 4.5% 8% / 8px 8px no-repeat,
    linear-gradient(-45deg, transparent 40%, rgba(77,255,155,.8) 40% 60%, transparent 60%) 4.5% 13% / 8px 8px no-repeat,
    linear-gradient(90deg, rgba(77,255,155,.85) 0 100%) 4.5% 28% / 9px 16px no-repeat;
  --skin-art-anim: skinblink 1.15s steps(1, end) infinite;
  --skin-word-display: block;
  --skin-word-size: 12px;
  --skin-word-ink: var(--sage);
  --skin-word-inset: 12px auto auto 42px;
}

/* Amber CRT — the same tube, the other phosphor, and a curved glass. */
:root[data-skin="amber"] {
  --pine: #0a0500; --granite: #140c02; --granite-hi: #1d1204;
  --alpenglow: #ffc45e; --sage: #c98f2c; --sage-dim: #8f6519;
  --coral: #ffb02e; --amber: #ffd77a;
  --hairline: #3d2708; --edge: #573809;
  /* The palest phosphor, because the mid one is already --amber: on a
     single-phosphor skin ringing and live were the SAME COLOUR, which is
     the state channel gone rather than a shade off. */
  --ok: #ffe9b8; --cool: #d99a3c;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  --skin-texture:
    radial-gradient(135% 135% at 50% 50%, transparent 62%, rgba(0,0,0,.55)),
    repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  --skin-glow: 0 0 10px rgba(255,176,46,.55);
  /* Not the green terminal with the hue swapped any more: this tube's tell
     is the RETRACE — a soft bright band sweeping slowly down the glass, the
     way a tired CRT actually looked. The band underlays the whole box (no
     clear zone), repeats on the exact distance the fall travels, and the
     drawing starts a full period above the frame so the loop's seam never
     shows. */
  --skin-art-clear: 0;
  --skin-art-inset: -160px 0 0 0;
  --skin-fall: 160px;
  --skin-art-anim: skinfall 6.5s linear infinite;
  --skin-art-bg:
    linear-gradient(180deg,
      transparent 0 30px, rgba(255,176,46,.09) 42px, rgba(255,176,46,.26) 50px,
      rgba(255,176,46,.09) 58px, transparent 70px 160px) 0 0 / 100% 160px repeat-y;
}

/* Datastream — the same tube with the rain coming down it. */
:root[data-skin="datastream"] {
  --pine: #000402; --granite: #020a05; --granite-hi: #04140a;
  --alpenglow: #8fff9c; --sage: #34c04a; --sage-dim: #1f8030;
  --coral: #57ff6a; --amber: #b6ff57;
  --hairline: #0a3312; --edge: #10501c;
  /* paler phosphor, so live is not the accent */
  --ok: #b6ffc0; --cool: #2fc98d;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  /* Scanlines run ACROSS a tube; the first pass striped them vertically,
     which no phosphor screen ever did. */
  --skin-texture: repeating-linear-gradient(180deg,
    rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  --skin-glow: 0 0 8px rgba(87,255,106,.5);
  /* The rain actually FALLS now. Ten columns spanning the whole box, each a
     vertically-repeating dash train — near columns brighter and coarser, far
     ones dim and fine — kept quiet enough in the middle to sit UNDER the
     idle words (the art keeps no clear zone here: rain behind text is the
     whole picture). Every dash period divides the 88px travel, so the loop's
     snap lands on identical pixels and the fall never visibly restarts; the
     drawing's box starts 88px above the frame so its edge never enters. */
  --skin-art-clear: 0;
  --skin-art-inset: -88px 0 0 0;
  --skin-fall: 88px;
  --skin-art-anim: skinfall 2.6s linear infinite;
  --skin-art-bg:
    repeating-linear-gradient(180deg, rgba(87,255,106,.32) 0 26px, transparent 26px 44px) 5% 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.14) 0 13px, transparent 13px 22px) 14% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.26) 0 52px, transparent 52px 88px) 24% 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.1) 0 12px, transparent 12px 22px) 35% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.08) 0 24px, transparent 24px 44px) 47% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.09) 0 20px, transparent 20px 44px) 58% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.22) 0 30px, transparent 30px 44px) 68% 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.12) 0 12px, transparent 12px 22px) 78% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.36) 0 56px, transparent 56px 88px) 88% 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(87,255,106,.16) 0 22px, transparent 22px 44px) 96% 0 / 2px 100% no-repeat;
}

/* Vault — green tube behind a heavy moulded frame, the door's wheel turning. */
:root[data-skin="vault"] {
  --pine: #04140b; --granite: #071f10; --granite-hi: #0a2a16;
  --alpenglow: #6fffa8; --sage: #35c072; --sage-dim: #218a4d;
  --coral: #4dffa0; --amber: #8dff7a;
  --hairline: #0d4a29; --edge: #1c6b3c;
  /* paler phosphor, so live is not the accent */
  --ok: #a8ffcf; --cool: #2fbf9a;
  --shadow: inset 0 0 40px rgba(0,0,0,.75);
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-body: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 14px; --skin-radius-ctl: 3px; --skin-border: 6px;
  --skin-texture:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.65)),
    repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  --skin-glow: 0 0 12px rgba(77,255,160,.5);
  /* The door's handwheel, slowly turning. The first pass tried a gauge and
     shipped the trap this file's own header warns about — a multi-layer
     --skin-art with ONE size, so the conic sweep painted at the size of the
     whole box and the "arc" was a wedge across half the card. Rebuilt on the
     full form, and as the honest object for the name: a four-spoke wheel —
     rim, spokes, hub — because spokes run centre-to-rim, which is the one
     radial drawing gradients can say without needing a punch-out. It turns
     the way a vault wheel does: slowly. */
  --skin-art-anim: skinspin 16s linear infinite;
  --skin-art-bg:
    radial-gradient(circle 52px at 50% 50%, transparent 94%, rgba(77,255,160,.5) 95%, transparent 98%) 50% 26% / 118px 118px no-repeat,
    radial-gradient(circle 46px at 50% 50%, transparent 94%, rgba(77,255,160,.2) 95%, transparent 98%) 50% 26% / 118px 118px no-repeat,
    /* the boss BEFORE the spokes — first layer paints on top, and a hub the
       bars run straight over reads as a circle behind an X, not a wheel */
    radial-gradient(circle 9px at 50% 50%, transparent 82%, rgba(77,255,160,.55) 86%, transparent 96%) 50% 26% / 118px 118px no-repeat,
    radial-gradient(circle 5px at 50% 50%, rgba(7,31,16,.95) 80%, transparent 88%) 50% 26% / 118px 118px no-repeat,
    radial-gradient(circle 3px at 50% 50%, rgba(77,255,160,.6) 60%, transparent 66%) 50% 26% / 118px 118px no-repeat,
    linear-gradient(90deg, transparent 47.8%, rgba(77,255,160,.4) 48.4% 51.6%, transparent 52.2%) 50% 36% / 96px 96px no-repeat,
    linear-gradient(180deg, transparent 47.8%, rgba(77,255,160,.4) 48.4% 51.6%, transparent 52.2%) 50% 36% / 96px 96px no-repeat;
}

/* Arcade — 8-bit. Hard pixels, no blur, and an invader on the way down. */
:root[data-skin="arcade"] {
  --pine: #0b0320; --granite: #140831; --granite-hi: #1d0f45;
  --alpenglow: #f4f4ff; --sage: #9a8ce0; --sage-dim: #6d5fb0;
  --coral: #ff3b6b; --amber: #ffd23f;
  --hairline: #2a1a5e; --edge: #3f2a86;
  --ok: #3fe06b; --cool: #3fc9e0;
  --shadow: 0 4px 0 rgba(0,0,0,.6);
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 3px;
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.1), transparent);
  --skin-glow: 0 0 0 2px rgba(255,59,107,.35);
  /* An invader out of hard blocks — antennae, head, body, punched eyes,
     arms, legs — at a size that reads as a SPRITE, marching down the screen
     in hard steps and snapping back for the next wave. The first pass was a
     squat blob wearing the headline as its legs; this one lives in the
     upper field and actually descends. */
  --skin-fall: 24px;
  --skin-art-anim: skinfall 2.8s steps(4, end) infinite;
  --skin-art-bg:
    /* antennae */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 46.8% 8% / 6px 10px no-repeat,
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 53.2% 8% / 6px 10px no-repeat,
    /* head */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 50% 16% / 22px 8px no-repeat,
    /* eyes, punched back to the ground — BEFORE the body in this list,
       because the first background layer paints on top */
    linear-gradient(0deg, #140831 0 100%) 47.2% 27% / 7px 7px no-repeat,
    linear-gradient(0deg, #140831 0 100%) 52.8% 27% / 7px 7px no-repeat,
    /* body */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 50% 28% / 46px 16px no-repeat,
    /* arms */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 42.6% 30% / 7px 24px no-repeat,
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 57.4% 30% / 7px 24px no-repeat,
    /* legs */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 47.4% 42% / 7px 11px no-repeat,
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 52.6% 42% / 7px 11px no-repeat,
    /* feet, turned out */
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 44.8% 46% / 8px 5px no-repeat,
    linear-gradient(0deg, rgba(63,224,107,.95) 0 100%) 55.2% 46% / 8px 5px no-repeat;
}

/* --- screens that are not tubes ---------------------------------------------------- */

/* HUD — angular, cyan, and a target box around what the card is saying. */
:root[data-skin="hud"] {
  --pine: #030a0e; --granite: #06131a; --granite-hi: #081d27;
  --alpenglow: #d7f6ff; --sage: #6fb9d1; --sage-dim: #46829c;
  --coral: #35e0ff; --amber: #ffd166;
  --hairline: #0e3242; --edge: #17506a;
  --ok: #4dffb8; --cool: #35e0ff;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  --skin-card-bg: linear-gradient(180deg, rgba(53,224,255,.06), transparent 30%);
  --skin-glow: 0 0 10px rgba(53,224,255,.5);
  --skin-texture: repeating-linear-gradient(180deg,
    rgba(53,224,255,.04) 0 2px, transparent 2px 6px);
  /* Four corner brackets locked around the words — the target box really
     frames the headline and status now (the first pass framed the empty
     upper region, and its ranging ring sat ON the text). The lock breathes
     the way an acquiring HUD does. Full frame, because the thing being
     framed is the board's own text zone. */
  --skin-art-clear: 0;
  --skin-art-anim: skinpulse 2.8s ease-in-out infinite;
  --skin-art-bg:
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 16% 40% / 1.5px 20px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 16% 38% / 20px 1.5px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 84% 40% / 1.5px 20px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 84% 38% / 20px 1.5px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 16% 84% / 1.5px 20px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 16% 87% / 20px 1.5px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 84% 84% / 1.5px 20px no-repeat,
    linear-gradient(0deg, rgba(53,224,255,.65) 0 100%) 84% 87% / 20px 1.5px no-repeat,
    /* the range readout: three ticks and a hairline, top centre, clear of
       the lock */
    linear-gradient(90deg, rgba(53,224,255,.4) 0 100%) 50% 10% / 120px 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(53,224,255,.5) 0 1.5px, transparent 1.5px 59px) 50% 13% / 120px 5px no-repeat;
}

/* Neon — after dark, wet pavement, and a tube sign that breathes. */
:root[data-skin="neon"] {
  --pine: #0a0417; --granite: #120826; --granite-hi: #1a0d36;
  --alpenglow: #f6e9ff; --sage: #b98ce6; --sage-dim: #8560ac;
  --coral: #ff3ea5; --amber: #47e8ff;
  --hairline: #2a1450; --edge: #3d1d72;
  --ok: #4dffc3; --cool: #47e8ff;
  --shadow: 0 0 24px rgba(255,62,165,.25);
  /* Soft lozenges, NOT full pills: the control radius also rounds the line
     box's foot, and at 999px the box's own corners drew a giant dome around
     the whole transcript (visible in every screenshot as a purple
     superellipse nobody asked for). */
  --skin-radius: 14px; --skin-radius-ctl: 12px; --skin-border: 1px;
  --skin-card-bg: linear-gradient(180deg, rgba(255,62,165,.09), transparent 45%);
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,62,165,.07), transparent);
  --skin-glow: 0 0 14px rgba(255,62,165,.65);
  /* Wet pavement under the sign: the tube's two colours pooling faintly at
     the foot of the box, the reflection every neon window owes the street. */
  --skin-well-bg:
    linear-gradient(180deg, transparent 58%, rgba(255,62,165,.05) 80%, rgba(71,232,255,.05) 100%);
  /* The tube sign, rebuilt on the full form — the conic arcs were shipping
     at the size of the whole box (the one-size-many-layers trap this file's
     header warns about) and painted the card in giant triangles. Now: a
     halo, the pink tube ring with its white-hot core, an inner cyan ring,
     and the two mounting pins. It stutters like a tube warming up rather
     than breathing like a lamp. */
  --skin-art-anim: skinflicker 5.2s linear infinite;
  --skin-art-bg:
    radial-gradient(circle 36px at 50% 50%, rgba(255,62,165,.26), transparent 72%) 50% 28% / 96px 96px no-repeat,
    radial-gradient(circle 30px at 50% 50%, transparent 90%, rgba(255,62,165,.85) 93%, transparent 98%) 50% 28% / 96px 96px no-repeat,
    radial-gradient(circle 30px at 50% 50%, transparent 93%, rgba(255,255,255,.75) 94.5%, transparent 96%) 50% 28% / 96px 96px no-repeat,
    radial-gradient(circle 21px at 50% 50%, transparent 88%, rgba(71,232,255,.7) 92%, transparent 97%) 50% 28% / 96px 96px no-repeat,
    radial-gradient(circle 3px at 50% 17%, rgba(246,233,255,.8) 60%, transparent 68%) 50% 28% / 96px 96px no-repeat,
    radial-gradient(circle 3px at 50% 83%, rgba(246,233,255,.8) 60%, transparent 68%) 50% 28% / 96px 96px no-repeat;
}

/* Glass — frosted and light, everything floating a little off the surface. */
:root[data-skin="glass"] {
  --pine: #ccd5e3; --granite: #eef2f8; --granite-hi: #e2e8f2;
  --alpenglow: #16202c; --sage: #4a5a6c; --sage-dim: #74839a;
  /* warm but clean — the old #8a5100 progress line read as mud on the pale
     track */
  --coral: #2f6df0; --amber: #9a6a00;
  --hairline: #c3cddb; --edge: #aebbcc;
  --ok: #16794a; --cool: #2f6df0;
  --shadow: 0 8px 26px rgba(30,50,80,.18), inset 0 1px 0 rgba(255,255,255,.9);
  --skin-radius: 18px; --skin-radius-ctl: 10px; --skin-border: 1px;
  /* The sheen is the whole idea: one light source top-left, falling off fast,
     and every surface catching a little of it. */
  --skin-card-bg:
    linear-gradient(155deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.18) 36%, transparent 60%);
  /* Frost, carried into the box itself: the same top-left light falls across
     the well, so the transcript area reads as a pane catching the window
     rather than a flat grey slab. */
  --skin-well-bg:
    linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.25) 42%, rgba(255,255,255,.06) 72%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.1));
  --skin-ctl-bg: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.25));
  --skin-glow: 0 4px 14px rgba(47,109,240,.35);
  /* The lens streak, wide and high where light actually crosses a pane —
     the old one was a small white smudge hovering over the headline. It
     breathes slowly, like the light moving. */
  --skin-art:
    linear-gradient(115deg, transparent 30%, rgba(47,109,240,.16) 46%,
                    rgba(47,109,240,.06) 55%, transparent 68%);
  --skin-art-size: 420px 110px;
  --skin-art-pos: 18% 8%;
  --skin-art-anim: skinpulse 6s ease-in-out infinite;
}

/* Screensaver — the logo goes round the box, and one day it will hit a corner.
   The word is the station's programme name, filled in by call.js. */
:root[data-skin="dvd"] {
  --pine: #000000; --granite: #050507; --granite-hi: #0b0b10;
  --alpenglow: #e8e8f2; --sage: #8a8aa0; --sage-dim: #5c5c72;
  --coral: #7b5cff; --amber: #ff5ce1;
  --hairline: #1a1a24; --edge: #26262f;
  --ok: #5cffc0; --cool: #5ce1ff;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  --skin-glow: 0 0 18px rgba(123,92,255,.5);
  /* No drawing at all — the artefact IS the word, and it is the BIGGEST
     type on the screen, the way the real logo was: a 15px whisper bouncing
     around read as a mislaid label. Pink, so it belongs to itself rather
     than to the chrome's purple. Two sweeps on different durations, both
     alternating, which is exactly how the real one worked and why the
     corner is rare: the two axes rarely arrive together. */
  --skin-word-display: block;
  --skin-word-size: 26px;
  --skin-word-ink: var(--amber);
  --skin-word-anim:
    skinbouncex 7.3s linear infinite alternate,
    skinbouncey 4.1s linear infinite alternate;
  /* the tube's face, one shade off the void, so the box reads as a screen */
  --skin-well-bg: linear-gradient(180deg, #0a0a11, #06060a);
}

/* --- paper, ink and old windows ---------------------------------------------------- */

/* Paper — a note left on the desk, with the ring a cup left on it. */
:root[data-skin="paper"] {
  --pine: #e7e0cf; --granite: #fbf7ee; --granite-hi: #f2ecdd;
  --alpenglow: #211d17; --sage: #5d574c; --sage-dim: #857e70;
  --coral: #9c3b23; --amber: #7a5a12;
  --hairline: #ded5c2; --edge: #c9bfa8;
  /* ink green rather than a screen green */
  --ok: #3f6b42; --cool: #3a5f66;
  --shadow: 0 1px 3px rgba(60,50,30,.16);
  --font-mono: "Courier New", Courier, ui-monospace, monospace;
  --font-body: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --skin-label-case: none;
  --skin-radius: 2px; --skin-radius-ctl: 2px; --skin-border: 1px;
  --skin-card-bg: linear-gradient(180deg, rgba(255,255,255,.5), transparent 30%);
  /* Ruled lines AND the margin rule — the one vertical red-brown line down
     the left edge is the cheapest cue ruled paper owns, and the first pass
     left it off. */
  --skin-well-bg:
    linear-gradient(90deg, transparent 30px, rgba(156,59,35,.28) 30px 31px, transparent 31px),
    repeating-linear-gradient(180deg,
      transparent 0 21px, rgba(33,29,23,.09) 21px 22px);
  /* ONE stain, in the corner where a cup actually gets put down. The first
     pass fell into the one-size-many-layers trap and shipped two detached
     ghost circles mid-page; the rings now share a single placed tile, over
     a faint fill bleed, offset so it reads as a stain and not geometry. */
  --skin-art-bg:
    radial-gradient(circle 24px at 50% 50%, rgba(139,94,48,.06) 55%, rgba(120,80,40,.1) 80%, transparent 90%) 89% 12% / 70px 70px no-repeat,
    radial-gradient(circle 25px at 50% 50%, transparent 84%, rgba(120,80,40,.3) 87%, rgba(120,80,40,.12) 92%, transparent 96%) 89% 12% / 70px 70px no-repeat,
    radial-gradient(circle 20px at 43% 57%, transparent 86%, rgba(120,80,40,.18) 89%, transparent 94%) 89% 12% / 70px 70px no-repeat;
}

/* Blueprint — cyan on navy, drafting grid, one dimensioned line. */
:root[data-skin="blueprint"] {
  --pine: #0b2c53; --granite: #103866; --granite-hi: #0d3059;
  --alpenglow: #dbeaff; --sage: #8fb6e4; --sage-dim: #6a90bd;
  --coral: #7fd4ff; --amber: #ffd98a;
  --hairline: #1d4c82; --edge: #2a5f9b;
  --ok: #7dffcb; --cool: #7fd4ff;
  --shadow: none;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 1px;
  /* The grid IS the skin: fine squares with a heavier rule every fifth. */
  --skin-card-bg:
    repeating-linear-gradient(90deg, rgba(127,212,255,.09) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(180deg, rgba(127,212,255,.09) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(127,212,255,.17) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(180deg, rgba(127,212,255,.17) 0 1px, transparent 1px 60px);
  /* The grid reaches the drawing area too — a sheet's grid doesn't stop at
     the title block — plus the usual darkening so the words stay first. */
  --skin-well-bg:
    repeating-linear-gradient(90deg, rgba(127,212,255,.06) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(180deg, rgba(127,212,255,.06) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%);
  --skin-ctl-bg: linear-gradient(180deg, rgba(127,212,255,.06), transparent);
  /* A dimension line: extension lines at both ends, arrow ticks, one rule
     between — up in the sheet's own space now, where the first pass sat it
     on the headline. The measured thing is the station: its name prints
     under the line like a drawing label, via the word slot. */
  --skin-art-bg:
    linear-gradient(90deg, rgba(127,212,255,.55) 0 100%) 50% 14% / 46% 1px no-repeat,
    linear-gradient(180deg, rgba(127,212,255,.55) 0 100%) 27% 14% / 1px 22px no-repeat,
    linear-gradient(180deg, rgba(127,212,255,.55) 0 100%) 73% 14% / 1px 22px no-repeat,
    linear-gradient(45deg, transparent 43%, rgba(127,212,255,.75) 43% 57%, transparent 57%) 28% 14% / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 43%, rgba(127,212,255,.75) 43% 57%, transparent 57%) 72% 14% / 10px 10px no-repeat;
  --skin-word-display: block;
  --skin-word-size: 10px;
  --skin-word-ink: var(--sage);
  --skin-word-inset: 34px auto auto 28%;
}

/* E-ink — greyscale, no glow, nothing moving. The legible one. */
:root[data-skin="eink"] {
  --pine: #dcdcd8; --granite: #f7f7f5; --granite-hi: #e2e2df;
  --alpenglow: #14140f; --sage: #4a4a45; --sage-dim: #6e6e68;
  --coral: #14140f; --amber: #3a3a34;
  --hairline: #c4c4bf; --edge: #9a9a94;
  --ok: #2f2f2a; --cool: #4a4a45;
  --shadow: none;
  --font-body: Charter, "Iowan Old Style", Georgia, serif;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 2px;
  --skin-label-case: none;
  /* The page is the BRIGHTEST surface — on a real e-reader the reading area
     is the paper and the chrome sits back. The first pass had it inverted
     (a grey slab darker than the frame), which read as a broken panel. */
  --skin-well-bg: linear-gradient(0deg, #fbfbf8, #fbfbf8);
  /* Deliberately no art, no texture and no glow beyond that. Every other
     skin here is allowed to be a costume; this is the one to pick when the
     card has to be read rather than admired. */
}

/* Classic Mac — 1-bit, dithered, with the title bar's lines across the top. */
:root[data-skin="mac"] {
  --pine: #8f8f8f; --granite: #ffffff; --granite-hi: #ededed;
  --alpenglow: #000000; --sage: #333333; --sage-dim: #5c5c5c;
  --coral: #000000; --amber: #333333;
  --hairline: #000000; --edge: #000000;
  --ok: #000000; --cool: #333333;
  --shadow: 3px 3px 0 rgba(0,0,0,1);
  --font-body: Charcoal, Geneva, Verdana, sans-serif;
  --font-mono: Monaco, "Courier New", monospace;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 2px;
  --skin-label-case: none;
  /* The title bar's stripes across the top of the card, which is the single
     most recognisable thing about this interface. Spelled as one plain
     gradient with explicit stops: this token feeds background-IMAGE, where a
     position/size suffix is invalid and silently drops the whole layer — the
     stripes had never actually rendered (probed 2026-08-31: the card's
     computed background-image was `none`). */
  --skin-card-bg: linear-gradient(180deg,
    transparent 0 2px, #000 2px 3px, transparent 3px 5px, #000 5px 6px,
    transparent 6px 8px, #000 8px 9px, transparent 9px 11px, #000 11px 12px,
    transparent 12px);
  /* The 50% dither at PIXEL scale — the desktop pattern peeking in along the
     foot of the box. The first pass tiled a 104x26 checker over the whole
     box (no no-repeat, cells 26x the real thing) and buried the headline in
     a chessboard. Three repeat-x strips of 8px cells make a 24px band that
     stays a texture, under everything, out of the words' way. */
  --skin-art-clear: 0;
  --skin-art-bg:
    repeating-conic-gradient(rgba(0,0,0,.4) 0 25%, transparent 0 50%) left calc(100% - 0px) / 8px 8px repeat-x,
    repeating-conic-gradient(rgba(0,0,0,.4) 0 25%, transparent 0 50%) left calc(100% - 8px) / 8px 8px repeat-x,
    repeating-conic-gradient(rgba(0,0,0,.4) 0 25%, transparent 0 50%) left calc(100% - 16px) / 8px 8px repeat-x;
}

/* Windows 95 — outset bevels, system grey, and the grip in the corner. */
:root[data-skin="win95"] {
  --pine: #008080; --granite: #c0c0c0; --granite-hi: #ffffff;
  --alpenglow: #000000; --sage: #404040; --sage-dim: #808080;
  --coral: #000080; --amber: #7f0000;
  --hairline: #808080; --edge: #dfdfdf;
  --ok: #008000; --cool: #000080;
  --shadow: inset -1px -1px 0 #0a0a0a, inset 1px 1px 0 #ffffff,
            inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
  --font-body: "MS Sans Serif", "Segoe UI", Tahoma, sans-serif;
  /* The era's dialogs were set in the system sans, not in Courier — with
     the mono token left on Courier every label read DOS-prompt, and the one
     font choice was carrying the wrong decade. */
  --font-mono: "Segoe UI", Tahoma, "MS Sans Serif", sans-serif;
  --skin-label-case: none;
  --skin-radius: 0; --skin-radius-ctl: 0; --skin-border: 2px;
  /* A real bevel needs a lit top edge AND a shadowed foot, or the key reads
     flat — the first pass had only the highlight. */
  --skin-ctl-bg: linear-gradient(180deg,
    #ffffff 0 2px, #c0c0c0 2px calc(100% - 2px), #6e6e6e calc(100% - 2px));
  /* The transcript box is a SUNKEN WHITE FIELD — the one control this era
     drew everywhere — instead of a slab of bare desktop teal that put navy
     headline text on a teal ground at no contrast at all. The teal survives
     as the page behind the card, where the desktop actually was. */
  --skin-well-bg:
    linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px),
    linear-gradient(0deg, #ffffff, #ffffff);
  /* The resize grip: three stepped diagonals of highlight and shadow, bottom
     right, exactly where every window of this era had one — big enough to
     see this time. */
  --skin-art-clear: 0;
  --skin-art-bg:
    linear-gradient(135deg, transparent 38%, #ffffff 38% 54%, #6e6e6e 54% 70%, transparent 70%) 98.5% 96% / 8px 8px no-repeat,
    linear-gradient(135deg, transparent 38%, #ffffff 38% 54%, #6e6e6e 54% 70%, transparent 70%) 98.5% 96% / 16px 16px no-repeat,
    linear-gradient(135deg, transparent 38%, #ffffff 38% 54%, #6e6e6e 54% 70%, transparent 70%) 98.5% 96% / 24px 24px no-repeat;
}