/* youknowchatta.com. One stylesheet for both pages:
   plain.html (body.pp, no JS, all the content) and index.html (body.dt, an empty shell that js/core.js turns into
   a desktop -> html.desk, filled with the sections it fetches from /plain). */

:root {
  --bg: #0c0e13;
  --fg: #d8dae3;
  --dim: #8f95a7;
  --line: #2a2e3a;
  --win: rgba(19, 21, 29, .88);
  --win-solid: #15171f;
  --raise: #1c1f2a;
  --acc: #e8b04b;
  --acc2: #e07a5f;
  --ok: #8fd694;
  --err: #ff7a85;
  --blue: #82aaff;
  --r: 10px;
  --bar: 34px;
  --ease: cubic-bezier(.2, .9, .3, 1);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Cantarell, Ubuntu, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: dark;
}

/* Wallpapers: gradients only. 0 extra requests, sharp at any size, painted once. */
html {
  background:
    radial-gradient(110% 80% at 88% 112%, rgba(232, 176, 75, .20), transparent 60%),
    radial-gradient(80% 70% at 6% -12%, rgba(130, 170, 255, .14), transparent 62%),
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(160deg, #0b0d12, #12141c 55%, #0a0b0f) fixed;
  background-color: var(--bg);
  min-height: 100%;
}
html.wp-grid {
  background:
    linear-gradient(rgba(130, 170, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(130, 170, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(90% 90% at 50% 120%, rgba(130, 170, 255, .16), transparent 70%),
    #0a1020;
}
html.wp-dusk {
  background:
    radial-gradient(60% 50% at 20% 100%, rgba(255, 143, 171, .22), transparent 70%),
    radial-gradient(70% 60% at 85% 0%, rgba(201, 179, 255, .20), transparent 70%),
    linear-gradient(200deg, #171226, #0e0c16 60%, #0b0a10);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--fg); font: 15px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--acc); text-underline-offset: 2px; }
a:hover { color: #f3c674; }
code, kbd, pre { font-family: var(--mono); font-size: .9em; }
kbd {
  display: inline-block; padding: 0 .4em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; background: var(--raise); color: var(--fg);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: 8px; top: -40px; z-index: 100; padding: 6px 10px; background: var(--acc); color: #111; border-radius: 6px; }
.skip:focus { top: 8px; }

/* "owner: fill this in" marker. Every one is listed in the v1 handoff; tools/size.sh counts what's left. */
.ph {
  display: inline-block; font: 11px/1.5 var(--mono); color: #c9b3ff;
  border: 1px dashed #6f5fa8; border-radius: 4px; padding: 0 5px; vertical-align: 1px;
}
.fine { font-size: .85rem; color: var(--dim); }
.meta { font: 12.5px var(--mono); color: var(--dim); margin-bottom: .5em; }

/* ---------- the plain page ---------- */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px 14px;
  flex-wrap: wrap; padding: 10px 16px; font: 13px var(--mono);
  background: rgba(12, 14, 19, .94); border-bottom: 1px solid var(--line);
}
.top-name { color: var(--fg); font-weight: 700; text-decoration: none; }
.top-name::before { content: "▌"; color: var(--acc); margin-right: 4px; }
.top nav { display: flex; gap: 12px; flex-wrap: wrap; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--fg); }
.top-btn {
  margin-left: auto; cursor: pointer; padding: 4px 10px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--acc); background: transparent; color: var(--acc); font: 13px var(--mono);
}
.top-btn:hover { background: rgba(232, 176, 75, .12); }
#main { max-width: 760px; margin: 0 auto; padding: 16px; }
.pane { margin: 0 0 16px; padding: 18px; border-radius: var(--r); background: var(--win-solid); border: 1px solid var(--line); }
.pp .pane { scroll-margin-top: 64px; }
#about h1, .hero h1 { font: 700 2rem/1.1 var(--mono); }
.lede { font-size: 1.05rem; }
.desk-offer { font-size: .9rem; color: var(--dim); margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.narrow-only { display: none; }
@media (max-width: 899px), (max-height: 539px), (pointer: coarse) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}
/* status pill: a dot and a word. Colour says the same thing as the word, never more. */
.st {
  display: inline-flex; align-items: center; gap: 6px; font: 11.5px/1.7 var(--mono); padding: 0 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.on { color: var(--ok); } .st.wip { color: var(--acc); }

/* Now: one row per thing, name and status on one line, a sentence under it */
.now-list { list-style: none; padding: 0; margin: 0; }
.now-list li { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); }
.now-list li + li { margin-top: 2px; }
.now-list .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 .2em; }
.now-list b { font-family: var(--mono); color: var(--fg); }
.now-list p:last-child { margin: 0; color: var(--dim); }

/* cards (projects, socials): the hover lift is a transform and the accent ring an opacity fade, so neither repaints the layout */
.projs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.pp .projs { grid-template-columns: 1fr; } /* the plain column is too narrow for three side by side */
.proj, .soc {
  position: relative; border-radius: 8px; background: var(--raise); border: 1px solid var(--line); transition: transform .18s var(--ease);
}
.proj { display: flex; flex-direction: column; padding: 12px 14px; }
.proj::after, .soc::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--acc);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.proj:hover, .proj:focus-within, .soc:hover, .soc:focus-visible { transform: translateY(-2px); }
.proj:hover::after, .proj:focus-within::after, .soc:hover::after, .soc:focus-visible::after { opacity: .75; }
.proj header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: .5em; }
.proj h3 { font-family: var(--mono); color: var(--acc); margin: 0; }
.proj .one { color: var(--fg); margin-bottom: .4em; }
.proj .more { font-size: .9rem; color: var(--dim); margin-bottom: .7em; }
.proj .tags { margin-top: auto; }
.proj .meta { margin: .4em 0 0; }
.tags { list-style: none; padding: 0; margin: 0 0 .4em; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 12px/1.6 var(--mono); padding: 0 8px; border-radius: 99px; background: var(--bg); color: var(--dim); }

/* Skills: a label per group, then short tags as tiles. No sentences, so it reads at a glance. */
.sk { display: grid; grid-template-columns: max-content 1fr; gap: 12px 18px; align-items: start; }
.sk h3 { margin: 0; padding-top: 6px; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-left: 2px solid var(--acc); border-radius: 6px;
  background: var(--raise); font: 13px/1.5 var(--mono);
}
@media (max-width: 520px) {
  .sk { grid-template-columns: 1fr; gap: 6px; }
  .sk h3:not(:first-child) { padding-top: 10px; }
}

/* Socials: a grid of cards, each a hand-drawn icon, the site and the handle */
.socs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.soc {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; text-decoration: none; color: var(--fg);
}
.soc:hover { color: var(--fg); }
.soc svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.soc svg .fill { fill: var(--acc); stroke: none; }
.soc-name { font-weight: 600; line-height: 1.3; }
.soc-h { font: 12px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contact: a one-thread board. The pinned post is plain HTML; the compose box under it comes from js/apps/contact.js. */
.board { display: grid; gap: 10px; margin-bottom: .8em; }
.post p:last-child { margin-bottom: 0; }
.post { border: 1px solid var(--line); border-radius: 8px; background: var(--raise); padding: 12px 14px; }
.post.pinned { border-left: 3px solid var(--acc); }
.post-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: .6em; font-family: var(--mono); font-size: .9rem; }
.post-h .to { color: var(--dim); font-size: .85em; }
.av {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font: 700 10px var(--mono);
  background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #15120a;
}
.av.you { background: var(--bg); color: var(--dim); border: 1px dashed var(--line); }
.post label { display: block; font: 12px var(--mono); color: var(--dim); margin: 8px 0 4px; }
.c-in {
  display: block; width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); caret-color: var(--acc); resize: vertical;
}
.c-in:focus { outline: none; border-color: var(--acc); }
.c-count { float: right; }
.c-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 8px; }
.c-row .btn-out { margin: 0; }
.c-status:empty { display: none; }
.fetch { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: flex-start; font: 13.5px/1.5 var(--mono); }
.fetch .mark { margin: 0; color: var(--acc); font-size: 13.5px; line-height: 1.5; }
.fetch dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0 10px; }
.fetch dt { color: var(--acc); }
.fetch dt::after { content: ":"; color: var(--fg); }
.fetch dd { margin: 0; }
/* 404.html */
.nf h1 { font: 700 3rem/1 var(--mono); color: var(--acc); }
.nf-out { margin: 0 0 1.2em; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.foot { max-width: 760px; margin: 0 auto; padding: 8px 16px 32px; font-size: .75rem; color: var(--dim); }
@media (max-width: 520px) {
  #about h1, .hero h1 { font-size: 1.6rem; }
  .fetch .mark { display: none; }
}

/* JS-built chrome never shows on a plain layout */
.tb, .bar, .dock, .hint, .ws-empty, .ovl { display: none; }
.pane.jsonly-win { display: none; }

/* index.html: nothing shows until the desktop is laid out (no flash, no layout shift).
   Failsafe: if core.js never runs, a line pointing at /plain appears after 2.5 s. */
.boot-note { max-width: 760px; margin: 0 auto; padding: 32px 16px; color: var(--dim); }
@media (scripting: enabled) {
  html:not(.desk) body.dt > * { visibility: hidden; animation: failsafe 0s 2.5s forwards; }
}
@keyframes failsafe { to { visibility: visible; } }

/* ---------- desktop ---------- */
.desk, .desk body { height: 100%; overflow: hidden; }
.desk .foot, .desk .boot-note { display: none; }
.desk #main { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; }

.desk .pane {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0;
  translate: var(--x, 0) var(--y, 0);
  width: var(--w, 400px); height: var(--h, 300px);
  display: flex; flex-direction: column;
  background: var(--win); border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  contain: strict;
  transition: translate .22s var(--ease), opacity .2s ease, transform .26s var(--ease), visibility 0s;
}
.desk .pane.jsonly-win { display: flex; }
.desk .pane.closed { display: none; }
.desk .pane.away {
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--slide, 0) * 1px));
  transition: translate .22s var(--ease), opacity .2s ease, transform .26s var(--ease), visibility 0s linear .26s;
}
.desk .pane.pop { opacity: 0; transform: translateY(10px) scale(.97); }
.desk .pane.closing { opacity: 0; transform: scale(.96); }
.desk .pane.active { z-index: 2; }
.desk .pane.full { z-index: 3; background: var(--win-solid); } /* a maximised window covers others, so it's solid */
.desk .pane.full.active { z-index: 4; }
/* border: grey when inactive, a gradient when active (Hyprland col.active_border). The gradient is its own layer
   that fades in on focus, because a gradient itself can't transition without repainting. */
.desk .pane::before, .desk .pane::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.desk .pane::after { background: linear-gradient(45deg, var(--acc), var(--acc2)); opacity: 0; transition: opacity .25s ease; }
.desk .pane.active::after { opacity: 1; }
.desk .pane:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.blur .pane { backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
.noanim .pane { transition: none !important; }

.desk .wbody {
  flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 16px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.desk .wbody > h2 { font: 600 .8rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.desk .wbody.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.desk .wbody.flush > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.desk .proj h3 { font-size: .95rem; }
.desk #about .wbody { padding: 34px 44px 36px; }
.desk #about h1 { font-size: 2rem; margin-bottom: .4em; }
.desk #about .lede { font-size: 1.1rem; line-height: 1.6; max-width: 46ch; color: var(--fg); margin-bottom: 1.6em; }
.desk #about .fetch { font-size: 13px; line-height: 1.75; color: var(--dim); gap: 8px 40px; }
.desk #about .fetch dd { color: var(--fg); }
.desk #about .mark { opacity: .8; }

.tb {
  flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 14px;
  font: 12px var(--mono); color: var(--dim); user-select: none; cursor: default;
}
.desk .tb { display: flex; }
.pane.active .tb { color: var(--fg); }
.tb-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-b { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; font: 14px/22px var(--mono); padding: 0; }
.tb-b:hover { background: var(--raise); color: var(--fg); }
.tb-b.x:hover { background: rgba(255, 122, 133, .18); color: var(--err); }

/* bar: waybar-like, hand-written */
.desk .bar {
  position: fixed; z-index: 10; top: 6px; left: 12px; right: 12px; height: var(--bar);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 6px;
  font: 12.5px var(--mono); border-radius: var(--r);
  background: rgba(13, 15, 21, .78); border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bar-l, .bar-r { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bar-c { color: var(--dim); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar button, .bar a, .bar .wid {
  height: 24px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; text-decoration: none;
  color: var(--dim); font: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.bar button { cursor: pointer; transition: transform .12s var(--ease); }
.bar button:active { transform: scale(.93); }
.bar button:hover, .bar a:hover { background: var(--raise); color: var(--fg); }
.bar .logo { color: var(--acc); font-weight: 700; }
.ws { display: flex; gap: 3px; margin-left: 2px; }
.ws button { min-width: 26px; justify-content: center; padding: 0 7px; }
.ws button.occ { color: var(--fg); }
.ws button:not(.occ):not([aria-current="true"]) { background: transparent; border-color: transparent; color: var(--dim); }
.ws button[aria-current="true"] { background: var(--acc); color: #15120a; min-width: 38px; font-weight: 700; }
.bar .keys { color: var(--acc); font-weight: 700; min-width: 26px; justify-content: center; }
.bar .clock { color: var(--dim); }
.bar .clock b { color: var(--fg); font-weight: 500; }
@media (max-width: 899px), (max-height: 539px) {
  .desk .bar { left: 6px; right: 6px; }
  .bar-c, .bar .date { display: none; }
}

/* dock: every app one click away */
.desk .dock {
  position: fixed; z-index: 10; left: 50%; bottom: 12px; translate: -50% 0; height: 40px;
  display: flex; align-items: center; gap: 2px; padding: 0 6px; max-width: calc(100vw - 24px);
  border-radius: 12px; background: rgba(13, 15, 21, .78); border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dock button {
  position: relative; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font: 12.5px var(--mono); white-space: nowrap;
}
.dock button:hover { background: var(--raise); color: var(--fg); }
.dock .d-ico { color: var(--acc); transition: transform .2s var(--ease); }
.dock button:hover .d-ico { transform: translateY(-2px) scale(1.14); }
.dock button { transition: transform .12s var(--ease); }
.dock button:active { transform: scale(.93); }
.dock button.on { color: var(--fg); }
/* the open-app dot grows in rather than popping */
.dock button::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 14px; height: 2px; translate: -50% 0; border-radius: 2px;
  background: var(--acc); opacity: 0; transform: scaleX(.2); transition: opacity .2s ease, transform .25s var(--ease);
}
.dock button.on::after { opacity: 1; transform: none; }
@media (max-width: 1100px) { .dock .d-lbl { display: none; } .dock button { padding: 0 9px; } }
@media (max-width: 899px), (max-height: 539px) { .desk .dock { bottom: 6px; } }
.desk .hint {
  display: flex; align-items: center; gap: 10px; position: fixed; z-index: 11; left: 50%; bottom: 62px; translate: -50% 0;
  padding: 5px 6px 5px 12px; border-radius: 9px; font: 12px var(--mono); color: var(--dim);
  background: var(--win-solid); border: 1px solid var(--line); white-space: nowrap;
}
.hint button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font: 14px/1 var(--mono); padding: 2px 6px; border-radius: 5px; }
.hint button:hover { color: var(--fg); background: var(--raise); }

.desk .ws-empty {
  display: grid; place-items: center; position: fixed; inset: 46px 12px 12px; pointer-events: none;
  text-align: center; font: 13px/1.9 var(--mono); color: var(--dim); padding: 0 16px 60px;
}
.ws-empty:focus-visible { outline: 1px dashed var(--line); outline-offset: -1px; }
.ws-empty big { display: block; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; color: color-mix(in srgb, var(--acc) 55%, transparent); letter-spacing: -.02em; }

/* overlays: launcher, keys */
.ovl {
  position: fixed; inset: 0; z-index: 60; background: rgba(5, 6, 9, .5);
  align-items: flex-start; justify-content: center; padding-top: 14vh;
}
.desk .ovl.on { display: flex; }
.ovl-box {
  width: min(560px, calc(100vw - 24px)); max-height: 76vh; overflow: auto;
  background: var(--win-solid); border-radius: 12px; border: 2px solid var(--acc);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); font: 13px var(--mono); padding: 10px;
}
.ovl-box h2 { font-size: 13px; color: var(--dim); margin: 4px 6px 10px; font-weight: 500; }
.ovl-box h3 { font-size: 12px; color: var(--acc); margin: 14px 6px 4px; font-weight: 600; }
.l-in {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: 15px var(--mono); caret-color: var(--acc);
}
.l-in:focus { outline: none; border-color: var(--acc); }
.l-list { list-style: none; margin: 8px 0 0; padding: 0; }
.l-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--dim); }
.l-list li b { color: var(--fg); font-weight: 600; }
.l-list li.sel { background: var(--raise); }
.l-list li.sel b { color: var(--acc); }
.l-ico { color: var(--acc); text-align: center; }
.l-key { font-size: 11px; color: var(--dim); }
.l-foot { margin: 8px 6px 2px; font-size: 11px; color: var(--dim); }
.binds { width: 100%; border-collapse: collapse; }
.binds td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.binds td:first-child { white-space: nowrap; width: 1%; }

.help-lead { font: 14px/1.6 var(--sans); color: var(--fg); margin: 0 6px 10px; }

/* ---------- terminal ---------- */
.term {
  flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 14px; cursor: text;
  font: 13.5px/1.45 var(--mono); background: rgba(10, 11, 15, .55); overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.term-note { flex: none; margin: 0; padding: 7px 14px; font: 11.5px var(--mono); color: var(--dim); border-bottom: 1px solid var(--line); }
.t-row { white-space: pre-wrap; word-break: break-word; min-height: 1.45em; }
.t-line { display: flex; white-space: pre; }
.t-in { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); font: inherit; caret-color: var(--acc); outline: none; }
.c-acc { color: var(--acc); } .c-dim { color: var(--dim); } .c-ok { color: var(--ok); } .c-err { color: var(--err); }
.c-blue { color: var(--blue); } .c-acc2 { color: var(--acc2); } .c-b { font-weight: 700; }

.btn-out { display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--acc); text-decoration: none; font: 13px var(--mono); }

/* ---------- settings ---------- */
.set h3 { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 14px 0 8px; }
.set h3:first-child { margin-top: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  width: 92px; height: 64px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer;
  font: 11px var(--mono); color: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
  text-shadow: 0 1px 2px #000;
}
.opt[aria-pressed="true"] { border-color: var(--fg); }
.opt { transition: transform .15s var(--ease); }
.opt:hover { transform: translateY(-2px); }
.opt.sw-ember { background: radial-gradient(110% 80% at 88% 112%, rgba(232, 176, 75, .5), transparent 60%), linear-gradient(160deg, #0b0d12, #12141c); }
.opt.sw-grid { background: linear-gradient(rgba(130, 170, 255, .25) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, rgba(130, 170, 255, .25) 1px, transparent 1px) 0 0 / 12px 12px, #0a1020; }
.opt.sw-dusk { background: radial-gradient(80% 70% at 20% 100%, rgba(255, 143, 171, .5), transparent 70%), linear-gradient(200deg, #171226, #0b0a10); }
.opts .acc { width: 48px; height: 48px; padding: 0; }
.set .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { border: 1px solid var(--line); background: var(--raise); color: var(--fg); border-radius: 7px; padding: 4px 10px; cursor: pointer; font: 12.5px var(--mono); }
.btn[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); }

/* ---------- motion ----------
   Rules (docs/briefs/content-and-polish.md): only transform, translate, opacity and filter move; every animation runs
   once and stops (nothing infinite, no rAF or timer loop, so an idle desktop draws no frames); nothing here changes
   layout (CLS 0); and all of it sits behind prefers-reduced-motion: no-preference, so reduced motion gets none. */
.veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* first load: bar and dock slide in, the About window settles. Its name and tagline are never transparent,
     so the entrance doesn't hold back the content (LCP). core.js drops .boot after 1.2 s. */
  .boot .bar { animation: from-top .45s var(--ease) both; }
  .boot .dock { animation: from-bottom .5s .06s var(--ease) both; }
  .boot #about { animation: settle .5s var(--ease) both; }
  .boot #about .mark { animation: fade .7s .12s ease both; }
  .boot #about .fetch dl { animation: fade-up .5s .1s var(--ease) both; }
  .boot .hint { animation: from-bottom .4s .7s var(--ease) both; }
  /* overlays: the backdrop fades, the box drops in, and the launcher's list staggers on open (not while filtering) */
  .ovl.on { animation: fade .16s ease both; }
  .ovl.on .ovl-box { animation: drop-in .22s var(--ease) both; }
  .l-list.intro li { animation: fade-up .22s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
  /* the clock's minute ticks over once a minute (a new element per minute: core.js bar.tick) */
  .bar .clock b.tick { display: inline-block; animation: tick .45s var(--ease) both; }
  /* an empty workspace's wordmark rises in when you land on it */
  .desk .ws-empty:not([hidden]) > div { animation: fade-up .4s var(--ease) both; }
  /* a new wallpaper dissolves in */
  .veil.on { animation: veil .55s ease-out both; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes fade-up { from { opacity: .4; transform: translateY(6px); } }
@keyframes from-top { from { opacity: 0; transform: translateY(-10px); } }
@keyframes from-bottom { from { opacity: 0; transform: translateY(12px); } }
@keyframes settle { from { transform: translateY(12px) scale(.985); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes tick { from { opacity: 0; transform: translateY(-45%); } }
@keyframes veil { from { opacity: .85; } to { opacity: 0; } }

/* ---------- comfort ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --win: var(--win-solid); }
  .desk .bar, .desk .dock { background: var(--win-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}