/* taool.com: the page is taool's monitor. The plastic is fixed round the window
   (beige, charcoal, or none on a phone), the glass scrolls inside it, and a tmux status bar
   at the bottom of the glass is the navigation. Shared by every page. */

@font-face {
    font-family: "Departure Mono";
    src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
    font-display: block;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    color-scheme: dark;
    /* The brand's colors: the warm black, the phosphor and the prompt's grey. */
    --ink: #17110d;
    --phosphor: #ecdfc5;
    --dim: #8e8171;
    --faint: #5c5045;
    --line: #2c231c;
    --well: #1d1611;
    --ok: #b9c68c;
    --err: #e8a07f;
    /* The app's amber for what wants attention on the glass, used sparingly. */
    --amber: #f0c870;
    --glass: radial-gradient(ellipse 90% 80% at 50% 45%, #251c15 0%, #1a130f 60%, #110c09 100%);

    /* The plastic: taool.com's beige monitor, as the app icon's light bezel. */
    --plastic: #ddd1b6;
    --plastic-bottom: #c6b797;
    --plastic-ink: #8a7d66;
    --plastic-deep: #6d614d;
    --plastic-light: #f5eddd;

    /* How much of the window the plastic takes. */
    --bz-top: 16px;
    --bz-side: 16px;
    --bz-chin: 64px;
    --bz-radius: 28px;
    --tmux: 28px;
    /* The scrollbar's width, down the glass's right edge (crt.js). */
    --vbar: 16px;

    --pixel: "Departure Mono", ui-monospace, monospace;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --measure: 64ch;
    --page: 1180px;
}

/* The app icon's dark bezel. */
:root[data-bezel="charcoal"] {
    --plastic: #2e261f;
    --plastic-bottom: #1f1914;
    --plastic-ink: #8e8171;
    --plastic-deep: #060403;
    --plastic-light: #5a4d40;
}

@media (max-width: 760px), (max-height: 520px) {
    :root, :root[data-bezel] { --bz-top: 0px; --bz-side: 0px; --bz-chin: 0px; --bz-radius: 0px; --tmux: 30px; --vbar: 12px; }
}

html {
    background: #110c09;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bz-top) + 24px);
    /* Keeps what's focused or scrolled to clear of the tmux bar and the chin. */
    scroll-padding-bottom: calc(var(--bz-chin) + var(--tmux) + 24px);
    scrollbar-color: var(--faint) #110c09;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    min-height: 100vh;
    /* On the right, room for the scrollbar too, so no text runs under it. */
    padding: var(--bz-top) calc(var(--bz-side) + var(--vbar)) calc(var(--bz-chin) + var(--tmux) + env(safe-area-inset-bottom, 0px)) var(--bz-side);
    background: var(--glass) fixed, #110c09;
    color: var(--phosphor);
    font: 16px/1.6 var(--mono);
    overflow-x: hidden;
    /* Phosphor: every line of text glows a little in its own color. */
    text-shadow: 0 0 0.45em color-mix(in srgb, currentColor 38%, transparent);
}

::selection { background: var(--phosphor); color: var(--ink); text-shadow: none; }

a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
a:hover { text-decoration-style: solid; }

:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 3px; border-radius: 3px; }

img { display: block; max-width: 100%; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* What leads to the Indie Index, hidden until the index has apps (indie/source.js), whatever its own display. */
[data-indie][hidden] { display: none; }

/* ---------- The monitor ---------- */

.monitor {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

/* The opening in the plastic: its shadow paints the plastic everywhere outside it, so the
   corners of the glass are rounded whatever the window's size. */
.opening {
    position: absolute;
    inset: var(--bz-top) var(--bz-side) var(--bz-chin);
    border-radius: var(--bz-radius);
    box-shadow:
        0 0 0 100vmax var(--plastic),
        inset 0 3px 2px color-mix(in srgb, var(--plastic-deep) 80%, transparent),
        inset 0 -2px 1px color-mix(in srgb, var(--plastic-light) 70%, transparent),
        inset 0 0 0 2px rgba(0, 0, 0, 0.35),
        inset 0 0 36px rgba(0, 0, 0, 0.55);
    z-index: 1;
    overflow: hidden;
}

.blackout { z-index: 0; }

/* The glass in front of the text: scanlines, a vignette and a faint glare, then a slow
   refresh band. Never takes clicks. */
.opening::before, .opening::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.opening::before {
    background:
        radial-gradient(ellipse 60% 40% at 22% 8%, rgba(236, 223, 197, 0.045), transparent 70%),
        radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.42) 100%),
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 3px);
}

/* The refresh band: a strip a third of the glass tall, moved rather than repainted. */
.opening::after {
    bottom: auto;
    height: 35%;
    border-radius: 0;
    background: linear-gradient(to bottom, transparent, rgba(236, 223, 197, 0.03), transparent);
    animation: roll 9s linear infinite;
    will-change: transform;
}

@keyframes roll {
    from { transform: translateY(-100%); }
    to { transform: translateY(290%); }
}

@media (prefers-reduced-motion: reduce) { .opening::after { animation: none; display: none; } }

/* The chin: the wordmark pressed into the plastic, the floppy drive and the buttons. */
.chin {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bz-chin);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 calc(var(--bz-side) + 22px);
    background: linear-gradient(var(--plastic), var(--plastic-bottom));
    color: var(--plastic-ink);
    text-shadow: none;
    pointer-events: auto;
    z-index: 2;
}

.chin[hidden], .chin:empty { display: none; }

@media (max-width: 760px), (max-height: 520px) { .chin { display: none; } }

.badge-mark {
    font: 22px/1 var(--pixel);
    color: var(--plastic-ink);
    /* Pressed in: a light edge below, as the plastic catches the room's light. */
    text-shadow: 0 1px 0 color-mix(in srgb, var(--plastic-light) 75%, transparent);
    letter-spacing: 0;
    user-select: none;
}

.chin .spacer { flex: 1; }

/* The floppy drive: a slot with a disk in it, and a light that flickers while something loads. */
.drive {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.slot {
    position: relative;
    width: 128px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(#1a140f, #2e261f);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8), 0 1px 0 color-mix(in srgb, var(--plastic-light) 70%, transparent);
    overflow: visible;
}

/* The disk's edge in the slot; ejecting slides it out. */
.disk {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 4px;
    height: 4px;
    background: #2b2622;
    border-radius: 1px;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.drive.ejected .disk { transform: translateY(10px); }

.drive-label {
    font: 11px/1 var(--pixel);
    color: var(--plastic-ink);
}

.led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a3127;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.led.on { background: var(--ok); box-shadow: 0 0 6px var(--ok), 0 0 1px #fff; }
.led.busy { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

/* The monitor's buttons: small and square, their names printed above them. */
.knob {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--plastic-ink);
    font: 11px/1 var(--pixel);
    cursor: pointer;
}

.knob i {
    display: block;
    width: 26px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(var(--plastic-light), var(--plastic-bottom));
    box-shadow: 0 1px 0 var(--plastic-deep), 0 2px 3px rgba(0, 0, 0, 0.25);
    transition: transform 80ms, box-shadow 80ms;
}

.knob:active i, .knob[aria-pressed="true"] i { transform: translateY(1px); box-shadow: 0 0 0 var(--plastic-deep), inset 0 1px 2px rgba(0, 0, 0, 0.25); }
.knob:hover { color: var(--plastic-deep); }
:root[data-bezel="charcoal"] .knob:hover { color: var(--phosphor); }

.power { display: flex; align-items: center; gap: 10px; }

/* ---------- Turning the screen off and on, and degaussing ---------- */

/* Off: the glass goes dark behind a picture that squashes to a line, then a dot. On: the
   reverse. A layer over the glass, so the page itself never moves. */
.blackout {
    position: absolute;
    inset: var(--bz-top) var(--bz-side) var(--bz-chin);
    border-radius: var(--bz-radius);
    background: #0b0806;
    opacity: 0;
    visibility: hidden;
}

.blackout::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: inherit;
    background: var(--phosphor);
    box-shadow: 0 0 40px var(--phosphor);
    opacity: 0;
}

.screen-off .blackout { opacity: 1; visibility: visible; transition: opacity 80ms 120ms; }
.screen-off .blackout::after { animation: crt-off 560ms ease-in forwards; }

@keyframes crt-off {
    0% { transform: scale(1, 1); opacity: 0.25; }
    40% { transform: scale(1, 0.004); opacity: 1; }
    80% { transform: scale(0.004, 0.004); opacity: 1; }
    100% { transform: scale(0, 0); opacity: 0; }
}

.screen-on .blackout { visibility: visible; animation: fade-out 520ms ease-out forwards; }
.screen-on .blackout::after { animation: crt-on 520ms ease-out forwards; }

@keyframes crt-on {
    0% { transform: scale(0.5, 0.004); opacity: 1; }
    40% { transform: scale(1, 0.004); opacity: 1; }
    100% { transform: scale(1, 1); opacity: 0; }
}

@keyframes fade-out { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

/* Degaussing: the picture swims in color and shakes, then settles. Only filters and a
   sideways shake, so a long page doesn't swing from its middle. */
.degauss main { animation: degauss 950ms ease-out; }

@keyframes degauss {
    0% { filter: none; transform: none; }
    8% { filter: hue-rotate(80deg) saturate(3.5) blur(0.7px); transform: translateX(-5px); }
    22% { filter: hue-rotate(-70deg) saturate(2.6) blur(0.4px); transform: translateX(4px); }
    40% { filter: hue-rotate(45deg) saturate(2); transform: translateX(-3px); }
    60% { filter: hue-rotate(-25deg) saturate(1.5); transform: translateX(2px); }
    80% { filter: hue-rotate(8deg); transform: translateX(-1px); }
    100% { filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .screen-off .blackout::after, .screen-on .blackout::after, .screen-on .blackout, .degauss main { animation: none; }
}

/* ---------- tmux: the status bar is the navigation ---------- */

.tmux {
    position: fixed;
    left: var(--bz-side);
    right: var(--bz-side);
    bottom: var(--bz-chin);
    z-index: 50;
    height: calc(var(--tmux) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    gap: 2ch;
    padding-left: calc(var(--bz-radius) * 0.7 + 10px);
    padding-right: calc(var(--bz-radius) * 0.7 + 10px);
    background: #241c16;
    border-top: 1px solid var(--line);
    color: var(--phosphor);
    font: 13px/1 var(--mono);
    white-space: nowrap;
}

.tmux .session { color: var(--dim); }

.tmux nav { display: flex; gap: 1.5ch; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tmux nav::-webkit-scrollbar { display: none; }

.tmux nav a {
    padding: 3px 0.6ch;
    border-radius: 2px;
    color: var(--dim);
    text-decoration: none;
}

.tmux nav a:hover { color: var(--phosphor); }

/* tmux marks the window that's open with a star, and here inverse video. */
.tmux nav a[aria-current="true"] { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.tmux nav a[aria-current="true"]::after { content: "*"; }

.tmux .right { margin-left: auto; display: flex; gap: 2ch; align-items: center; color: var(--dim); }

.tmux .hint { color: var(--faint); }
@media (hover: none), (max-width: 960px) { .tmux .hint { display: none; } }

/* The command prompt and its answers take the whole bar, as tmux's do. */
.tmux.prompting > :not(.tmux-prompt), .tmux:has(.tmux-message:not([hidden])) > :not(.tmux-message) { display: none; }

.tmux-prompt { display: flex; flex: 1; align-items: center; gap: 0.5ch; }
.tmux-prompt[hidden] { display: none; }
.tmux-prompt label { color: var(--amber); }

.tmux-prompt input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--phosphor);
    font: inherit;
    font-size: 16px;
    caret-color: var(--phosphor);
    text-shadow: inherit;
}

/* tmux shows its messages in the status line's own colors, inverted. */
.tmux-message { flex: 1; padding: 3px 1ch; background: var(--amber); color: var(--ink); text-shadow: none; overflow: hidden; text-overflow: ellipsis; }
.tmux-message[hidden] { display: none; }

.tmux .menu-btn {
    padding: 3px 0.8ch;
    border: 1px solid var(--faint);
    border-radius: 3px;
    background: none;
    color: var(--phosphor);
    font: inherit;
    cursor: pointer;
}

.tmux .menu-btn:hover { border-color: var(--phosphor); }

/* The monitor's chin has its own menu knob; on a phone, without the monitor, the bar's button. */
@media (min-width: 761px) and (min-height: 521px) {
    .tmux .menu-btn { display: none; }
}

@media (max-width: 960px) { .tmux .clock { display: none; } }

@media (max-width: 760px) {
    .tmux { padding-left: 10px; padding-right: 10px; gap: 1.2ch; font-size: 12px; }
    .tmux .session { display: none; }
}

/* ---------- The on-screen menu: the monitor's own ---------- */

.osd {
    position: fixed;
    right: calc(var(--bz-side) + 22px);
    bottom: calc(var(--bz-chin) + var(--tmux) + 18px);
    z-index: 70;
    width: min(380px, calc(100vw - 32px));
    padding: 14px 16px 12px;
    background: rgba(18, 13, 10, 0.94);
    border: 2px solid var(--phosphor);
    box-shadow: 0 0 0 4px rgba(18, 13, 10, 0.94), 0 0 24px rgba(236, 223, 197, 0.12);
    font: 14px/1.5 var(--mono);
}

.osd[hidden] { display: none; }

.osd h2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font: 22px/1 var(--pixel);
}

.osd h2 button { background: none; border: 0; color: var(--dim); font: 16px var(--mono); cursor: pointer; }
.osd h2 button:hover { color: var(--phosphor); }

.osd dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: center; }
.osd dt { color: var(--dim); }

/* A setting's value between arrows, like a monitor's menu: tap either side, or the arrow keys. */
.osd .stepper { display: flex; align-items: center; gap: 6px; }

.osd .stepper button {
    width: 26px;
    height: 24px;
    border: 1px solid var(--faint);
    border-radius: 3px;
    background: none;
    color: var(--phosphor);
    font: 13px var(--mono);
    cursor: pointer;
}

.osd .stepper button:hover { border-color: var(--phosphor); }

.osd .stepper output {
    flex: 1;
    text-align: center;
    padding: 2px 0;
    background: var(--phosphor);
    color: var(--ink);
    text-shadow: none;
}


/* ---------- Type ---------- */

/* The wordmark: "> taool" and a blinking block cursor, on Departure Mono's 11px grid. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    font: 400 132px/1 var(--pixel);
    letter-spacing: 0;
    white-space: nowrap;
}

.wordmark .prompt { color: var(--dim); margin-right: 0.35ch; }

.cursor {
    display: inline-block;
    width: calc(6em / 11);
    height: calc(8em / 11);
    margin-left: calc(2em / 11);
    background: var(--phosphor);
    box-shadow: 0 0 0.3em color-mix(in srgb, var(--phosphor) 45%, transparent);
    animation: blink 1.06s steps(1, end) infinite;
}

.cursor.still { animation: none; }

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

@media (max-width: 1000px) { .wordmark { font-size: 88px; } }
@media (max-width: 520px) { .wordmark { font-size: 66px; } }
@media (max-width: 360px) { .wordmark { font-size: 55px; } }

/* A section starts as a command at the prompt; it types itself as it comes into view. */
.cmd {
    font: 22px/1.4 var(--pixel);
    color: var(--phosphor);
    min-height: 1.4em;
}

.cmd::before { content: "> "; color: var(--dim); }

/* What the command printed: a sentence in the pixel face, the one place it's set large. */
.lede {
    margin-top: 14px;
    max-width: 22ch;
    font: 44px/1.1 var(--pixel);
    text-wrap: balance;
}

@media (max-width: 700px) {
    .cmd { font-size: 22px; }
    .lede { font-size: 33px; }
}

.prose { max-width: var(--measure); }
.lede + .prose { margin-top: 20px; }
.prose p + p { margin-top: 0.9em; }
.prose .dim, .dim { color: var(--dim); }

/* "#" lines, the machine's comments, as on the waitlist. */
.note { color: var(--dim); }
.note::before { content: "# "; color: var(--phosphor); }

/* A list in ls's columns, words filled down. */
.ls {
    list-style: none;
    display: grid;
    grid-template-rows: repeat(var(--rows, 5), auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 3ch;
}

.ls li::before { content: "*" / ""; color: var(--dim); margin-right: 1ch; }

/* A rank: the one number set in the pixel face, in a capsule outline. */
.rank {
    display: inline-block;
    min-width: 3.4em;
    padding: 0.18em 0.6em 0.12em;
    border: 1px solid var(--dim);
    border-radius: 999px;
    font: 15px/1 var(--pixel);
    text-align: center;
}

.up { color: var(--ok); }
.down { color: var(--err); }

.soon {
    display: inline-block;
    padding: 0.15em 0.5em;
    border: 1px dashed var(--dim);
    border-radius: 999px;
    color: var(--dim);
    font: 12px/1.2 var(--mono);
    vertical-align: 0.15em;
}

/* ---------- The scrollbar ---------- */

/* Drawn in characters down the glass's right edge, as DOS programs drew theirs (crt.js), in place
   of the browser's: arrows, a shaded track and a thumb sized to how much of the page shows. It
   starts below the opening's rounded corner and stops at the tmux bar. */
html:has(> body > .vbar) { scrollbar-width: none; }
html:has(> body > .vbar)::-webkit-scrollbar { display: none; }

.vbar {
    position: fixed;
    z-index: 50;
    top: calc(var(--bz-top) + var(--bz-radius) + env(safe-area-inset-top, 0px));
    right: var(--bz-side);
    bottom: calc(var(--bz-chin) + var(--tmux) + env(safe-area-inset-bottom, 0px));
    width: var(--vbar);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.25);
    font: 11px/1 var(--mono);
}

.vbar[hidden] { display: none; }

.vbar button {
    flex: none;
    height: var(--vbar);
    padding: 0;
    border: 0;
    background: none;
    color: var(--phosphor);
    font: inherit;
    cursor: pointer;
}

.vbar button:hover { background: var(--phosphor); color: var(--ink); text-shadow: none; }

.vbar .track {
    position: relative;
    flex: 1;
    background-image: repeating-conic-gradient(color-mix(in srgb, var(--phosphor) 20%, transparent) 0 25%, transparent 0 50%);
    background-size: 4px 4px;
    cursor: pointer;
}

.vbar .thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--phosphor);
    box-shadow: 0 0 8px rgba(236, 223, 197, 0.35);
    touch-action: none;
    cursor: grab;
}

.dragging, .dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- Buttons ---------- */

/* "[ label ]" as on the waitlist; the primary one in inverse video, as a terminal highlights. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6ch;
    padding: 10px 16px;
    border: 1px solid var(--dim);
    border-radius: 4px;
    background: transparent;
    color: var(--phosphor);
    font: 16px/1.2 var(--mono);
    text-decoration: none;
    text-shadow: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.btn::before { content: "["; color: var(--dim); }
.btn::after { content: "]"; color: var(--dim); }
.btn:hover { border-color: var(--phosphor); }

.btn.primary { background: var(--phosphor); border-color: var(--phosphor); color: var(--ink); text-shadow: none; }
.btn.primary::before, .btn.primary::after { color: color-mix(in srgb, var(--ink) 55%, var(--phosphor)); }
.btn.primary:hover { box-shadow: 0 0 18px rgba(236, 223, 197, 0.35); }

.btn.small { padding: 6px 10px; font-size: 14px; }

/* On a narrow phone a long label wraps rather than running off the glass. */
@media (max-width: 520px) { .btn { white-space: normal; text-align: left; } }
.btn:disabled { opacity: 0.5; cursor: default; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Apple's App Store badge, its own artwork, never restyled: 50 px tall (Apple's least is 40),
   with a quarter of its height clear round it. */
.store-badge { display: inline-block; flex: none; line-height: 0; border-radius: 10.5px; }
.store-badge img { height: 50px; width: auto; }
.store-badge:focus-visible { outline-offset: 4px; }
.actions:has(.store-badge) { align-items: center; gap: 13px; }
/* The devices the taool app runs on, under its App Store badge: an outline of each over its name, in Apple's order. */
.devices { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding: 0; list-style: none; color: var(--dim); font-size: 12px; }
.devices li { display: grid; justify-items: center; gap: 4px; }
.devices svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* A button beside the badge takes its height and corners (the badge's 119.66 × 40 at 50 px
   tall, its corners' radius about a fifth of its height, as Apple draws it), and is never
   narrower than it. */
.actions:has(.store-badge) .btn {
    min-width: calc(50px * 119.66407 / 40);
    height: 50px;
    padding: 0 14px;
    justify-content: center;
    border-radius: 10.5px;
    white-space: nowrap;
}

/* A panel on the glass: a darker well with its own edge, for a demo or a window. */
.panel {
    position: relative;
    background: rgba(12, 9, 7, 0.55);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

/* A window's title bar, as a terminal's: three dots and its title. */
.titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--dim);
    font-size: 13px;
}

.titlebar .dots { display: flex; gap: 6px; }
.titlebar .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--faint); }
.titlebar .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; margin-right: 45px; }

/* ---------- The koala ---------- */

/* Drawn from the app icon's grid into an SVG (crt.js): lit cells in phosphor, glowing. */
.koala svg, .mk svg { display: block; width: 100%; height: auto; overflow: visible; }
svg .lit { fill: var(--phosphor); }
.koala svg { filter: drop-shadow(0 0 6px rgba(236, 223, 197, 0.32)); }
.koala .z { fill: var(--dim); }

/* ---------- Footer ---------- */

.site-foot {
    margin-top: 120px;
    padding: 28px 0 36px;
    border-top: 1px dashed var(--line);
    color: var(--dim);
    font-size: 14px;
}

.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.site-foot a { color: var(--dim); text-decoration: none; }
.site-foot a:hover { color: var(--phosphor); }
.site-foot .mark { font: 22px/1 var(--pixel); color: var(--phosphor); margin-right: auto; }
.site-foot .mark .prompt { color: var(--dim); margin-right: 0.35ch; }

/* ---------- Coming into view ---------- */

/* Output prints, it isn't typed: a block shows all at once, like a terminal's output, the
   moment it scrolls in (crt.js). Only its picture waits: it stays in the accessibility tree,
   and focusing into it shows it. Without script ("js" is set by crt.js as it runs), it all shows. */
.js [data-print]:not(.printed):not(:focus-within) { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .js [data-print] { opacity: 1 !important; } }