/* 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; }
}
/* project cards: the hover lift is a transform and the accent ring an opacity fade, so neither repaints the layout */
.proj {
  position: relative; margin: 0 0 10px; padding: 12px 14px; border-radius: 8px;
  background: var(--raise); border: 1px solid var(--line); transition: transform .18s var(--ease);
}
.proj::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 { transform: translateY(-2px); }
.proj:hover::after, .proj:focus-within::after { opacity: .75; }
.proj h3 { font-family: var(--mono); color: var(--acc); margin-bottom: .3em; }
.proj p { margin-bottom: .4em; }
.proj .meta { margin: 0; }
.tags, .chips { list-style: none; padding: 0; margin: 0 0 .4em; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li, .chips li { font: 12px/1.6 var(--mono); padding: 0 8px; border-radius: 99px; background: var(--raise); color: var(--dim); }
.chips li { border: 1px dashed var(--line); background: transparent; }
.links { font-size: .9rem; }
.links-list { padding-left: 1.1em; margin: 0 0 1em; }
.links-list li { margin: 2px 0; }
.links-list .h { font-family: var(--mono); font-size: .85em; color: var(--dim); }
.skills { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.skills dt { font-family: var(--mono); color: var(--acc); }
.skills dd { margin: 0; }
.seen { display: block; font: 12px var(--mono); color: var(--dim); }
.sw ul { list-style: none; padding: 0; margin: 0 0 .9em; }
.sw li { padding: 1px 0; color: var(--dim); }
.sw b { color: var(--fg); font-family: var(--mono); font-weight: 600; margin-right: 6px; }
.sw h3 { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.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; }
.contact { list-style: none; padding: 0; margin: 0 0 .8em; font-family: var(--mono); font-size: .92rem; }
.contact li { padding: 4px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.contact b { color: var(--dim); font-weight: 400; min-width: 70px; }
.copy { border: 1px solid var(--line); background: var(--raise); color: var(--dim); border-radius: 6px; padding: 0 8px; cursor: pointer; font: 12px/1.8 var(--mono); }
.copy:hover { color: var(--fg); }
/* 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) {
  .skills { grid-template-columns: 1fr; }
  .skills dd { margin-bottom: 6px; }
  #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; }
.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; }

/* ---------- browser ---------- */
.br-bar { flex: none; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.br-bar button, .br-bar a.br-ext {
  flex: none; height: 28px; min-width: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--raise); color: var(--dim); cursor: pointer; font: 13px var(--mono);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.br-bar button:hover, .br-bar a.br-ext:hover { color: var(--fg); }
.br-bar button:disabled { opacity: .4; cursor: default; }
.br-url { flex: 1; min-width: 0; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 13px var(--mono); }
.br-url:focus { outline: none; border-color: var(--acc); }
.br-marks { flex: none; display: flex; gap: 4px; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--line); font: 12px var(--mono); }
.br-marks button { border: 0; background: transparent; color: var(--dim); cursor: pointer; padding: 2px 6px; border-radius: 5px; font: inherit; }
.br-marks button:hover { background: var(--raise); color: var(--fg); }
.br-marks .no::after { content: " ↗"; color: var(--acc2); }
.br-view { flex: 1; min-height: 0; position: relative; overflow: auto; }
.br-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.br-note { flex: none; padding: 3px 10px; font: 11px var(--mono); color: var(--dim); border-top: 1px solid var(--line); }
.br-load { position: absolute; left: 0; top: 0; height: 2px; width: 30%; background: var(--acc); animation: load 1s linear infinite; z-index: 1; }
@keyframes load { from { translate: -100% 0; } to { translate: 340% 0; } }
.br-page { padding: 22px 24px; font-size: 14px; }
.br-page h3 { font: 600 1.05rem var(--mono); color: var(--acc); }
.br-page.refused h3 { color: var(--acc2); }
.br-page .big { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.br-page code { color: var(--fg); background: var(--raise); padding: 1px 5px; border-radius: 4px; }
.br-page ul { padding-left: 1.1em; }
.br-page .ok { color: var(--ok); } .br-page .no { color: var(--acc2); }
.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; }
  .br-load { animation: none; width: 100%; opacity: .5; }
}
@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; }
}