/* The TWTS website, after "The Creator": 80s Japanese hardware seen at night — warm charcoal, bone-coloured labels,
   sodium-light orange, an amber phosphor screen, signage in many languages. One dark look only. */
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap; src: url("/assets/twts/fonts/barlow-condensed-latin-400-normal.woff2?v=1.0.0") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap; src: url("/assets/twts/fonts/barlow-condensed-latin-ext-400-normal.woff2?v=1.0.0") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/twts/fonts/barlow-condensed-latin-600-normal.woff2?v=1.0.0") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/twts/fonts/barlow-condensed-latin-ext-600-normal.woff2?v=1.0.0") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/twts/fonts/ibm-plex-mono-latin-400-normal.woff2?v=1.0.0") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/assets/twts/fonts/ibm-plex-mono-latin-600-normal.woff2?v=1.0.0") format("woff2"); }
:root {
  --night: #12100d; --panel: #1b1814; --panel-2: #231f1a; --bone: #ece3d2; --sand: #b9ab92; --dust: #82776a;
  --line: #3b342b; --sodium: #ff6a13; --sodium-ink: #1a0b02; --amber: #ffb347; --screen: #0c0a07;
  --display: "Barlow Condensed", "Arial Narrow", "Noto Sans", sans-serif;
  --body: system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--bone); font: 16px/1.6 var(--body); }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
.mono { font-family: var(--mono); }
.tag { font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
a { color: var(--amber); }
a:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }

/* the maker's plate */
header { border-bottom: 1px solid var(--line); }
.plate { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; flex-wrap: wrap; padding-block: .6rem; }
.mark { display: flex; align-items: center; gap: .8rem; color: var(--bone); text-decoration: none; }
.mark .block { width: 1.6rem; height: 1.6rem; background: var(--sodium); display: grid; place-items: center; font: 600 .9rem/1 var(--body); color: var(--sodium-ink); }
.mark b { font: 600 1.7rem/1 var(--display); letter-spacing: .06em; }
.mark small { font: .62rem/1.3 var(--mono); color: var(--dust); letter-spacing: .12em; text-transform: uppercase; border-left: 1px solid var(--line); padding-left: .8rem; }
nav { order: 3; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.plate .mark { margin-right: auto; }
@media (min-width: 761px) { nav { order: 1; } .lang { order: 2; text-decoration: none; } }
@media (max-width: 760px) { nav { flex-basis: 100%; gap: .6rem 1.2rem; } }
nav a { font: 600 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); text-decoration: none; }
nav a:hover { color: var(--bone); }
.lang { order: 2; text-decoration: none; font: 600 .74rem var(--mono); letter-spacing: .14em; color: var(--bone); border: 1px solid var(--line); padding: .35rem .6rem; }

/* hero: words on the left, the unit on the right */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; padding-block: 4rem 3rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem 2rem; } }
h1 { margin: .8rem 0 1.2rem; font: 600 clamp(2.6rem, 6.2vw, 4.6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--sodium); }
.lead { margin: 0 0 1.8rem; color: var(--sand); font-size: 1.06rem; max-width: 34rem; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn { font: 600 .82rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: .9rem 1.3rem; text-decoration: none; background: var(--sodium); color: var(--sodium-ink); border: 1px solid var(--sodium); }
.btn:hover { background: #ff7d33; }
.btn.line { background: transparent; color: var(--bone); border-color: var(--line); }
.btn.line:hover { border-color: var(--sand); }
.status { margin-top: 1.6rem; display: flex; gap: .5rem; align-items: center; }
.status i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* the unit */
.unit { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 6px; padding: .9rem; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .04); }
.unit-top { display: flex; justify-content: space-between; align-items: baseline; padding: .1rem .2rem .7rem; gap: 1rem; }
.unit-top .name { font: 600 1.1rem var(--display); letter-spacing: .14em; }
.unit-top .jp { color: var(--sodium); letter-spacing: .3em; margin-left: .5rem; }
.screen { background: var(--screen); border-radius: 4px; border: 1px solid #000; padding: .4rem .2rem .2rem; position: relative; overflow: hidden; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px); }
.screen svg { display: block; width: 100%; height: auto; }
.spec .grid { stroke: #2a2117; stroke-width: 1; }
.spec .tick { stroke: #5a4a33; }
.axis { fill: #8a7350; font: 13px var(--mono); }
.lab { fill: #8a7350; font: 600 12px var(--mono); letter-spacing: .1em; }
.byte { fill: var(--amber); font: 600 14px var(--mono); }
.brk { fill: var(--sodium); font: 700 12px var(--mono); }
.wake { fill: #6b5532; }
.lo, .hi { fill: var(--amber); filter: drop-shadow(0 0 3px rgb(255 179 71 / .7)); }
.link { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 1 3; opacity: .5; }
.mk { fill: var(--sodium); filter: drop-shadow(0 0 3px rgb(255 106 19 / .6)); }
.readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: .8rem; }
.readout div { background: var(--panel); padding: .55rem .6rem; }
.readout b { display: block; font: 600 1.3rem/1.1 var(--display); letter-spacing: .04em; color: var(--bone); }
.unit-foot { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: .8rem; padding-inline: .2rem; flex-wrap: wrap; }
.stripes { height: .55rem; flex: 0 0 5.5rem; background: repeating-linear-gradient(-45deg, var(--sodium) 0 6px, transparent 6px 12px); opacity: .85; }
@media (max-width: 520px) { .readout { grid-template-columns: repeat(2, 1fr); } }

/* the languages: the same words in each, as signage; the current one lit */
.signage { margin-top: 3rem; scroll-margin-top: 1rem; }
.signage ul { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; margin: 0 auto; padding-block: 1.3rem; list-style: none; justify-content: center; }
.signage a { font: 600 1.05rem var(--display); letter-spacing: .08em; color: var(--dust); white-space: nowrap; text-decoration: none; }
.signage a:hover { color: var(--bone); }
.signage a[aria-current] { color: var(--bone); }
.signage a span { font: 600 .62rem var(--mono); color: var(--sodium); margin-right: .45rem; letter-spacing: .1em; vertical-align: .15em; }

/* sections */
section { padding-block: 4rem 1rem; }
.head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.head .num { font: 600 .8rem var(--mono); color: var(--sodium); letter-spacing: .14em; }
h2 { margin: 0; font: 600 2.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.head .tag { margin-left: auto; }

/* downloads: crates */
.crates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 980px) { .crates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crates { grid-template-columns: 1fr; } }
.crate { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.crate .top { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1rem .4rem; }
.crate .n { font: 600 3rem/0.8 var(--display); color: transparent; -webkit-text-stroke: 1px var(--dust); }
.crate h3 { margin: 0 1rem; font: 600 1.45rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.crate p { margin: .3rem 1rem 1rem; color: var(--sand); font-size: .88rem; }
.crate dl { margin: auto 0 0; border-top: 1px solid var(--line); font: .72rem var(--mono); }
.crate dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem 1rem; border-bottom: 1px solid var(--line); }
.crate dt { color: var(--dust); letter-spacing: .1em; text-transform: uppercase; }
.crate dd { margin: 0; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crate .btn { display: block; text-align: center; border: 0; }
.compat { color: var(--sand); margin-top: 1.2rem; font-size: .92rem; }

/* security: the spec sheet */
.sheet { border: 1px solid var(--line); background: var(--panel); }
.sheet div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.sheet div:last-child { border-bottom: 0; }
.sheet dt { font: 600 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); padding-top: .2rem; }
.sheet dd { margin: 0; }
.sheet .open dt { color: var(--sodium); }
@media (max-width: 600px) { .sheet div { grid-template-columns: 1fr; gap: .3rem; } }

footer { margin-top: 4rem; border-top: 1px solid var(--line); }
footer .wrap { display: flex; gap: 1.5rem; align-items: center; padding-block: 1.4rem 2.2rem; flex-wrap: wrap; color: var(--dust); }
footer .stripes { flex-basis: 4rem; }
@media (prefers-reduced-motion: no-preference) {
  .lo, .hi, .mk { animation: on .4s ease-out both; }
  .status i { animation: blink 2.4s ease-in-out infinite; }
  @keyframes on { from { opacity: 0; } }
  @keyframes blink { 50% { opacity: .35; } }
}

/* what it does */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.caps div { background: var(--panel); padding: 1rem 1.1rem; }
.caps h3 { margin: 0 0 .4rem; font: 600 1.15rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.caps p { margin: 0; color: var(--sand); font-size: .9rem; }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .caps { grid-template-columns: 1fr; } }

/* install: one panel per system */
.steps { display: grid; gap: .8rem; }
.steps details { background: var(--panel); border: 1px solid var(--line); }
.steps summary { cursor: pointer; padding: .9rem 1.1rem; font: 600 1.2rem var(--display); text-transform: uppercase; letter-spacing: .04em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary::after { content: "+"; font-family: var(--mono); color: var(--sodium); }
.steps details[open] summary::after { content: "−"; }
.steps summary:focus-visible { outline: 2px solid var(--sodium); outline-offset: -2px; }
.steps ol { margin: 0; padding: 0 1.1rem 1rem 2.6rem; color: var(--bone); }
.steps li { margin-bottom: .6rem; padding-left: .3rem; }
.steps li::marker { font: 600 .8rem var(--mono); color: var(--sodium); }
.steps .note, .note { color: var(--sand); font-size: .9rem; }
.steps details > .note { margin: 0 1.1rem 1rem; }
pre { background: var(--screen); border: 1px solid #000; color: var(--amber); padding: .6rem .8rem; overflow-x: auto; margin: .5rem 0 0; }
code { font: .82rem var(--mono); }

/* the sums */
h3.sub { margin: 2.2rem 0 .8rem; font: 600 1.3rem var(--display); text-transform: uppercase; letter-spacing: .04em; }
.scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font: .75rem var(--mono); }
td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; color: var(--sand); }
td code { font-size: .75rem; overflow-wrap: anywhere; word-break: break-all; color: var(--bone); }
.verify p { margin: 1rem 0 0; }

/* contact */
.contact { font: 600 clamp(1.4rem, 4vw, 2.2rem) var(--display); letter-spacing: .04em; color: var(--amber); text-decoration: none; overflow-wrap: anywhere; }
.contact:hover { color: var(--sodium); }

/* a text not yet translated: shown in English, and marked */
.missing { outline: 1px dashed var(--sodium); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
section { scroll-margin-top: 1rem; }

.mark .block svg { fill: var(--sodium-ink); }
footer .end { margin-left: auto; }
.older { margin-top: 1rem; color: var(--sand); }
.older summary { cursor: pointer; font: 600 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.older ul { padding-left: 1.2rem; font-size: .9rem; }
/* scripts with no capitals (Japanese, Chinese, Hindi, Bengali) read better smaller and looser */
:lang(ja) h1, :lang(zh) h1, :lang(hi) h1, :lang(bn) h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.18; }
:lang(ja) h2, :lang(zh) h2, :lang(hi) h2, :lang(bn) h2 { font-size: 2rem; line-height: 1.2; }