/* ─────────────────────────────────────────────────────────────────────────────
 * WYN — Whatever You Need. Interface stylesheet.
 *
 * A blended system: monochrome GLASS panels floating over a NEUMORPHIC base.
 * No colour anywhere — depth carries the whole hierarchy. Glass gives the
 * translucency and the hairline edge; neumorphism gives the soft extrusion and
 * the inset wells. Blended means the two never fight: panels are glass, the
 * things you touch (buttons, fields, chips) are extruded from the base tone, and
 * the things that hold content (inputs, logs, code) are pressed into it.
 *
 *
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── The two depth languages, as reusable primitives ──────────────────────── */
:root {
  /* neumorphic: extruded from the base tone */
  --neu-raise: 7px 7px 16px var(--neu-lo), -7px -7px 16px var(--neu-hi);
  --neu-raise-sm: 4px 4px 9px var(--neu-lo), -4px -4px 9px var(--neu-hi);
  --neu-press: inset 4px 4px 9px var(--neu-lo), inset -3px -3px 8px var(--neu-hi);
  --neu-press-sm: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi);
  /* glass: floating above it */
  --glass-blur: blur(22px) saturate(135%);
  --glass-shadow: 0 1px 2px rgba(0,0,0,.18), 0 14px 40px var(--neu-lo);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.5,.64,1);
}

* { box-sizing: border-box; }
::selection { background: var(--wyn-fg); color: var(--wyn-bg); }
html, body { height: 100%; }
/* The page colour lives on <html>, not <body>. The horizon is a fixed layer
   behind the content, and a z-index:-1 child paints behind its own parent's
   background — so an opaque body would hide it entirely. */
html { background: var(--wyn-bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: "Inter", ui-sans-serif, system-ui, "Segoe UI", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: transparent; color: var(--wyn-fg); letter-spacing: -0.01em;
}
.app { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 1; }
/* Open sky at the foot of every page, so the horizon has somewhere to be seen.
   Without it the content runs to the fold at every scroll position and the arc
   is behind a card wherever it is put. */
.content { padding-bottom: 300px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * THE SHELL — a floating command bar, not a sidebar.
 *
 * WYN is a thing that lives at your cursor, so its interface shouldn't feel like
 * an IDE. There is no left rail: a single glass bar floats at the top with the
 * mark, a centred pill of sections, and the controls. Content runs full width
 * beneath it. Sections that have more than one page reveal a second, quieter row
 * of tabs — so the top level stays five items no matter how much WYN grows.
 * ═══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--wyn-bg) 72%, transparent);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-bottom: 1px solid var(--wyn-border);
}
.topbar::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent); opacity: .5;
}

.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; letter-spacing: -.4px; flex: none; }
.brand .mark {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--wyn-base); box-shadow: var(--neu-raise-sm); padding: 3px;
}
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand small { display: block; color: var(--wyn-fg-muted); font-weight: 500; font-size: 10px; letter-spacing: .3px; margin-top: 1px; }

/* the centred pill of top-level sections */
#nav {
  display: flex; gap: 3px; margin: 0 auto; padding: 4px;
  border-radius: 14px; background: var(--wyn-base); box-shadow: var(--neu-press-sm);
}
#nav a {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  color: var(--wyn-fg-muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color .18s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
#nav a:hover { color: var(--wyn-fg); }
#nav a.active {
  color: var(--wyn-accent); background: var(--wyn-bg-elevated); box-shadow: var(--neu-raise-sm);
}
#nav a .gl { font-size: 13px; filter: grayscale(1) contrast(1.15); opacity: .85; }
#nav a.active .gl { opacity: 1; filter: none; }

/* the quieter second row: pages inside the active section */
.subnav {
  display: flex; align-items: center; gap: 4px; justify-content: center;
  padding: 9px 22px 0; position: sticky; top: 63px; z-index: 19;
  background: color-mix(in srgb, var(--wyn-bg) 72%, transparent);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
}
.subnav:empty { display: none; }
.subnav a {
  padding: 6px 13px; border-radius: 9px; text-decoration: none; white-space: nowrap;
  color: var(--wyn-fg-muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: color .16s var(--ease), background .18s var(--ease);
}
.subnav a:hover { color: var(--wyn-fg); background: var(--wyn-accent-soft); }
.subnav a.active { color: var(--wyn-accent); background: var(--wyn-accent-soft); font-weight: 650; }
.subnav a .count { margin-left: 7px; font-size: 10.5px; opacity: .7; }

/* right-hand controls */
.bar-tools { display: flex; align-items: center; gap: 9px; flex: none; margin-left: auto; }
.status-chip {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--wyn-fg-muted);
  padding: 7px 13px; border-radius: 999px; background: var(--wyn-base); box-shadow: var(--neu-press-sm);
  white-space: nowrap;
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
  border: none; background: var(--wyn-base); color: var(--wyn-fg); box-shadow: var(--neu-raise-sm);
  font-size: 15px; padding: 0;
  transition: transform .22s var(--spring), box-shadow .2s var(--ease), color .18s;
}
.iconbtn:hover { transform: translateY(-2px); color: var(--wyn-accent); }
.iconbtn[aria-expanded="true"] { box-shadow: var(--neu-press-sm); color: var(--wyn-accent); transform: none; }

/* ── Appearance popover — the theme picker, out of the corner ─────────────── */
.pop {
  position: absolute; top: 60px; right: 20px; z-index: 40; width: 316px;
  border-radius: 18px; padding: 16px; border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--wyn-bg-elevated) 88%, transparent);
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 24px 70px var(--neu-lo);
  animation: popIn .2s var(--spring);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.97) } to { opacity: 1; transform: none } }
.pop h4 { margin: 0 0 9px; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wyn-fg-muted); font-weight: 700; }
.pop h4:not(:first-child) { margin-top: 18px; }

.mode { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--wyn-base); box-shadow: var(--neu-press-sm); }
.mode .modebtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; box-shadow: none; color: var(--wyn-fg-muted);
  font-size: 11.5px; font-weight: 600;
  transition: color .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.mode .modebtn:hover { color: var(--wyn-fg); transform: none; }
.mode .modebtn.on { color: var(--wyn-accent); background: var(--wyn-bg-elevated); box-shadow: var(--neu-raise-sm); }

/* the palette grid: a real preview of each theme, not an abstract dot */
.palettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.pal {
  /* display:block + width:100% is load-bearing: every child is absolutely
     positioned, so an inline-block button would shrink to zero and vanish. */
  display: block; width: 100%; position: relative;
  cursor: pointer; border: none; padding: 0; background: none;
  border-radius: 12px; overflow: hidden; aspect-ratio: 1;
  box-shadow: var(--neu-raise-sm);
  transition: transform .24s var(--spring), box-shadow .2s var(--ease);
}
.pal:hover { transform: translateY(-3px) scale(1.04); }
.pal .sw-bg { position: absolute; inset: 0; }
.pal .sw-ac { position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pal .sw-tx { position: absolute; left: 6px; top: 6px; width: 15px; height: 3px; border-radius: 2px; opacity: .85; }
.pal[aria-checked="true"] { box-shadow: var(--neu-raise-sm), 0 0 0 2px var(--wyn-accent); }
.pal[aria-checked="true"]::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.pal-name { font-size: 10.5px; color: var(--wyn-fg-muted); text-align: center; margin-top: 5px; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.content { position: relative; z-index: 1; padding: 26px 26px 300px; overflow-y: auto; }
.content > #view { max-width: 1180px; margin: 0 auto; animation: viewin .34s var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
h1 { margin: 0 0 6px; font-size: 31px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
h2 { color: var(--wyn-fg-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.8px; margin: 34px 0 14px; font-weight: 700; display: flex; align-items: center; gap: 14px; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--wyn-border), transparent); }
h3 { letter-spacing: -.3px; margin: 0 0 5px; font-size: 15.5px; font-weight: 700; }
p { line-height: 1.62; }
.muted { color: var(--wyn-fg-muted); }
.small { font-size: 12.5px; }
a { color: var(--wyn-accent); text-decoration-color: color-mix(in srgb, var(--wyn-accent) 45%, transparent); text-underline-offset: 3px; }
.lead { font-size: 15px; color: var(--wyn-fg-muted); max-width: 70ch; margin: 0 0 4px; }
.grad { color: var(--wyn-fg); }

/* ── Cards: glass over the neumorphic base ────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* Stat rows must stay on one line — a 4-up that wraps to 3+1 reads as a bug. */
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative; border-radius: var(--radius); padding: 20px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: transform .3s var(--spring), box-shadow .3s var(--ease), background .25s var(--ease);
}
/* the hairline of light along the top edge that sells glass */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent); opacity: .55; pointer-events: none;
}
.card.hoverable:hover { background: var(--glass-strong); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 22px 56px var(--neu-lo); }
.card p { margin: 0; color: var(--wyn-fg-muted); font-size: 13px; line-height: 1.58; }
.card .ico { font-size: 22px; display: block; margin-bottom: 10px; filter: grayscale(1) contrast(1.1); }
.card.sel { border-color: var(--wyn-accent); box-shadow: 0 0 0 1px var(--wyn-accent), var(--glass-shadow); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 13px 0; }
.row.tight { margin: 9px 0; }

/* ── Filmstrip ────────────────────────────────────────────────────────────── */
/* The frames WYN actually sampled. Scrolls sideways rather than wrapping, so
   the reading order stays the timeline order. */
.filmstrip {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.filmstrip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
.filmstrip img {
  display: block; height: 104px; width: auto; border-radius: 10px;
  border: 1px solid var(--wyn-border); background: var(--wyn-base);
  transition: transform .25s var(--spring), box-shadow .25s var(--ease);
}
.filmstrip figure:hover img { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px var(--neu-lo); }
.filmstrip figcaption {
  margin-top: 5px; text-align: center; font-size: 11px; color: var(--wyn-fg-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* Collapsed by default: reassurance should be available, not in the way. */
.safety { margin-top: 14px; font-size: 12.5px; color: var(--wyn-fg-muted); }
.safety summary { cursor: pointer; user-select: none; color: var(--wyn-fg); font-weight: 600; font-size: 13px; }
.safety summary:hover { color: var(--wyn-accent); }
.safety ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.55; }
.safety b { color: var(--wyn-fg); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
/* Used when WYN must have an answer before it acts — "exactly how many times?"
   is the case it exists for. Deliberately blocking: guessing a repeat count on
   someone's machine is not a decision to make quietly in the background. */
.modal-wrap {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--wyn-bg) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  animation: modal-in .18s var(--ease) both;
}
.modal {
  width: min(440px, 100%); border-radius: var(--radius); padding: 22px 24px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), var(--glass-shadow);
  animation: modal-rise .28s var(--spring) both;
}
.modal h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.modal .field { margin: 14px 0 4px; }
@keyframes modal-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .modal, .modal-wrap { animation: none } }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; border-radius: 22px; padding: 32px 34px; margin-bottom: 24px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.hero::before {
  content: ""; position: absolute; inset: -55% -20% auto -20%; height: 300px; filter: blur(70px); opacity: .30; z-index: 0;
  background: conic-gradient(from 140deg at 50% 50%, var(--wyn-fg), transparent, var(--wyn-fg), transparent, var(--wyn-fg));
  animation: drift 22s linear infinite;
}
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent); opacity: .6;
}
.hero > * { position: relative; z-index: 1; }
@keyframes drift { to { transform: rotate(1turn) } }
.hero h1 { font-size: 37px; }
.hero .tag { font-size: 15px; color: var(--wyn-fg-muted); margin: 8px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chip {
  font-size: 12.5px; padding: 8px 15px; border-radius: 999px; cursor: pointer; border: none;
  background: var(--wyn-base); color: var(--wyn-fg); box-shadow: var(--neu-raise-sm);
  transition: transform .26s var(--spring), box-shadow .2s var(--ease);
}
.chip:hover { transform: translateY(-2px); box-shadow: 5px 5px 12px var(--neu-lo), -5px -5px 12px var(--neu-hi); }
.chip:active, .chip.on { box-shadow: var(--neu-press-sm); transform: none; color: var(--wyn-accent); }

/* ── Controls: pressed wells and extruded keys ────────────────────────────── */
input, select, textarea {
  font: inherit; border-radius: 12px; border: 1px solid transparent;
  background: var(--wyn-base); color: var(--wyn-fg); padding: 11px 14px; min-width: 140px;
  box-shadow: var(--neu-press-sm);
  transition: box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--neu-press), 0 0 0 2px var(--wyn-accent); }
input::placeholder, textarea::placeholder { color: var(--wyn-fg-muted); opacity: .8; }
textarea { width: 100%; min-height: 80px; resize: vertical; line-height: 1.55; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--wyn-fg-muted); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
label.field input, label.field select, label.field textarea { font-weight: 400; color: var(--wyn-fg); text-transform: none; letter-spacing: normal; font-size: 14px; }
label.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--wyn-fg); cursor: pointer; }
label.check input { min-width: 0; width: 17px; height: 17px; accent-color: var(--wyn-accent); padding: 0; box-shadow: none; }

button {
  font: inherit; cursor: pointer; font-weight: 700; border: none; border-radius: 12px; padding: 11px 18px;
  background: var(--wyn-accent); color: var(--accent-fg);
  box-shadow: var(--neu-raise-sm);
  transition: transform .24s var(--spring), box-shadow .2s var(--ease), opacity .16s;
}
button:hover { transform: translateY(-2px); box-shadow: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi); }
button:active { transform: none; box-shadow: var(--neu-press-sm); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--neu-press-sm); }
button.ghost { background: var(--wyn-base); color: var(--wyn-fg); font-weight: 500; }
button.ghost:hover { color: var(--wyn-fg); }
button.danger { background: var(--wyn-base); color: var(--wyn-fg); box-shadow: var(--neu-raise-sm), inset 0 0 0 1px var(--wyn-border); }
button.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; box-shadow: var(--neu-raise-sm); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--wyn-fg-muted); font-weight: 700; padding-bottom: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; }
td { padding: 13px 8px 13px 0; border-top: 1px solid var(--wyn-border); vertical-align: middle; }
.pill {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; display: inline-block;
  background: var(--wyn-base); color: var(--wyn-fg-muted); box-shadow: var(--neu-press-sm);
}
.pill.ok { color: var(--wyn-fg); }
.pill.warn { color: var(--wyn-fg-muted); }
.pill.bad { color: var(--wyn-fg); box-shadow: var(--neu-press-sm), inset 0 0 0 1px var(--wyn-border); }
.pill.hot { background: var(--wyn-accent); color: var(--accent-fg); font-weight: 700; box-shadow: var(--neu-raise-sm); }
.ok { color: var(--wyn-fg); } .bad { color: var(--wyn-fg); font-weight: 600; } .warn { color: var(--wyn-fg-muted); }

.banner {
  border-radius: 13px; padding: 13px 16px; margin: 15px 0; font-size: 13px; line-height: 1.58;
  background: var(--glass); border: 1px solid var(--glass-edge); color: var(--wyn-fg-muted);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.banner b, .banner strong { color: var(--wyn-fg); }
.banner.info { border-left: 2px solid var(--wyn-fg-muted); }
.banner.good { border-left: 2px solid var(--wyn-accent); color: var(--wyn-fg); }
.banner.bad { border-left: 2px solid var(--wyn-fg); color: var(--wyn-fg); background: var(--glass-strong); }
.banner a { color: var(--wyn-fg); }

/* ── Code + answers ───────────────────────────────────────────────────────── */
pre.code {
  position: relative; margin: 11px 0; padding: 15px 16px; border-radius: 13px; overflow-x: auto;
  background: var(--wyn-base); box-shadow: var(--neu-press); border: none;
  font: 12.8px/1.62 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--wyn-fg);
}
pre.code .copy { position: absolute; top: 9px; right: 9px; padding: 5px 11px; font-size: 11px; border-radius: 8px; opacity: .6; }
pre.code:hover .copy { opacity: 1; }
code.inline { background: var(--wyn-base); box-shadow: var(--neu-press-sm); color: var(--wyn-fg); padding: 2px 7px; border-radius: 7px; font: 12.5px ui-monospace, Consolas, monospace; }
.answer { line-height: 1.66; font-size: 14.2px; }
.answer h4 { margin: 15px 0 7px; font-size: 13.5px; color: var(--wyn-fg); }
.answer ul { margin: 9px 0; padding-left: 20px; }
.answer li { margin: 5px 0; }
.caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: text-bottom; margin-left: 2px; border-radius: 2px; background: var(--wyn-accent); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.shimmer { background: linear-gradient(90deg, var(--wyn-fg-muted) 30%, var(--wyn-fg) 50%, var(--wyn-fg-muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ── The WYN box preview ──────────────────────────────────────────────────── */
.wynbox {
  position: relative; border-radius: 18px; overflow: hidden; max-width: 480px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 64px var(--neu-lo), 0 1px 0 var(--glass-sheen) inset;
}
.wynbox .wb-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--wyn-border); font-size: 12px; }
.wynbox .wb-skill { font-weight: 700; color: var(--wyn-fg); }
.wynbox .wb-body { padding: 13px 15px; max-height: 330px; overflow-y: auto; font-size: 13.4px; line-height: 1.62; }
.wynbox .wb-foot {
  padding: 8px 13px; border-top: 1px solid var(--wyn-border); font-size: 10.5px; color: var(--wyn-fg-muted);
  display: flex; align-items: center; justify-content: center; gap: .35ch; user-select: none;
}
.wyn-float { font-weight: 800; color: var(--wyn-accent); display: inline-block; animation: wynfloat 3.6s ease-in-out infinite; will-change: transform; }
.wyn-float.b { animation-delay: .8s; }
@keyframes wynfloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* ── Steps / logs ─────────────────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 11px; margin-top: 15px; }
.step { border-radius: 14px; padding: 13px 15px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: var(--glass-blur); animation: viewin .26s var(--ease); }
.step .sh { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.step .sn { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--accent-fg); background: var(--wyn-accent); flex: none; }
.step.pending .sn { background: var(--wyn-base); color: var(--wyn-fg-muted); box-shadow: var(--neu-press-sm); }
.step.running { box-shadow: 0 0 0 1px var(--wyn-accent); }
.step.done .sn::after { content: "✓" } .step.done .sn { font-size: 0 }
.step.failed .sn { background: var(--wyn-base); color: var(--wyn-fg); box-shadow: inset 0 0 0 1.5px var(--wyn-fg) }
.step code { display: block; margin: 9px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--wyn-base); box-shadow: var(--neu-press-sm); color: var(--wyn-fg); font-size: 12.4px; word-break: break-all; }
.step .so { margin-top: 9px; white-space: pre-wrap; font-size: 12px; color: var(--wyn-fg-muted); max-height: 220px; overflow: auto; }
.log { font: 12.2px/1.68 ui-monospace, Consolas, monospace; background: var(--wyn-base); box-shadow: var(--neu-press); border-radius: 13px; padding: 14px 16px; max-height: 330px; overflow-y: auto; margin-top: 14px; }
.log div { color: var(--wyn-fg-muted); }
.log div.hi { color: var(--wyn-fg); }
.log div.ok { color: var(--wyn-fg); font-weight: 600; }
.log div.bad { color: var(--wyn-fg); font-weight: 700; }

/* ── Findings ─────────────────────────────────────────────────────────────── */
.finding { border-left: 2px solid var(--wyn-border); padding: 10px 0 10px 14px; margin: 10px 0; }
.finding.critical, .finding.high { border-left-color: var(--wyn-fg); }
.finding.medium { border-left-color: var(--wyn-fg-muted); }
.finding .fl { font: 12px ui-monospace, Consolas, monospace; color: var(--wyn-fg); }
.finding .fn { font-size: 13px; margin-top: 4px; }
.finding .fc { font: 11.6px ui-monospace, Consolas, monospace; color: var(--wyn-fg-muted); margin-top: 6px; white-space: pre-wrap; word-break: break-all; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.wyn-footer {
  display: flex; align-items: center; justify-content: center; gap: .35ch; width: 100%;
  padding: 16px; font-size: 13px; letter-spacing: .2px; color: var(--wyn-fg-muted);
  border-top: 1px solid var(--wyn-border); user-select: none;
}

/* ── Toast + modal ────────────────────────────────────────────────────────── */
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; max-width: 350px;
  background: var(--glass-strong); color: var(--wyn-fg); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 13px 16px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 18px 52px var(--neu-lo); transform: translateY(22px); opacity: 0;
  transition: transform .38s var(--spring), opacity .3s var(--ease); pointer-events: none;
}
.toast.show { transform: none; opacity: 1; }
.toast b { color: var(--wyn-fg); }

.backdrop { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--wyn-bg) 62%, transparent); backdrop-filter: blur(7px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; animation: fadein .16s var(--ease); }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal {
  width: min(640px, 100%); border-radius: 20px; border: 1px solid var(--glass-edge);
  background: var(--glass-strong); backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%);
  box-shadow: 0 30px 90px var(--neu-lo); animation: viewin .2s var(--spring);
}
.modal .mh { padding: 22px 24px 0; }
.modal .mb { padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal .mf { padding: 16px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--wyn-border); margin-top: 4px; }

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--wyn-fg-muted) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px }
*::-webkit-scrollbar-thumb { background: var(--wyn-fg-muted); opacity: .4; border-radius: 10px; border: 3px solid transparent; background-clip: content-box }

/* ═════════════════════════════════════════════════════════════════════════
 * MOTION & VECTOR LAYER
 * ═════════════════════════════════════════════════════════════════════════ */

#aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#aurora canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app, .wyn-footer { position: relative; z-index: 1; }

.card.hoverable { transition: transform .34s var(--spring), box-shadow .3s var(--ease), background .25s var(--ease); }
.card.hoverable:hover { transform: translateY(-5px); }
.card.tilt { transition: transform .12s linear, box-shadow .3s var(--ease); }
.card.hoverable::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), var(--glass-sheen), transparent 68%);
  transition: opacity .3s var(--ease);
}
.card.hoverable:hover::after { opacity: .5; }

.stagger > * { opacity: 0; animation: riseIn .5s var(--spring) forwards; }
.stagger > *:nth-child(1) { animation-delay: .02s } .stagger > *:nth-child(2) { animation-delay: .06s }
.stagger > *:nth-child(3) { animation-delay: .10s } .stagger > *:nth-child(4) { animation-delay: .14s }
.stagger > *:nth-child(5) { animation-delay: .18s } .stagger > *:nth-child(6) { animation-delay: .22s }
.stagger > *:nth-child(7) { animation-delay: .26s } .stagger > *:nth-child(8) { animation-delay: .30s }
.stagger > *:nth-child(n+9) { animation-delay: .34s }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }

/* Skill avatars — monochrome discs, differentiated by geometry not colour. */
.skill-av { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; position: relative; flex: none; overflow: hidden; background: var(--wyn-base); box-shadow: var(--neu-raise-sm); }
.skill-av svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.skill-av .glyph { position: relative; font-size: 20px; line-height: 1; filter: grayscale(1) contrast(1.15); }
.skill-av.sm { width: 30px; height: 30px; border-radius: 9px; box-shadow: var(--neu-raise-sm) }
.skill-av.sm .glyph { font-size: 14px }
.skill-av.lg { width: 62px; height: 62px; border-radius: 18px }
.skill-av.lg .glyph { font-size: 27px }
.card.hoverable:hover .skill-av { animation: avPop .5s var(--spring); }
@keyframes avPop { 0% { transform: scale(1) rotate(0) } 45% { transform: scale(1.1) rotate(-5deg) } 100% { transform: scale(1) rotate(0) } }

/* Stat rings */
.stat { display: flex; align-items: center; gap: 15px; }
.stat .ring { width: 54px; height: 54px; flex: none; }
.stat .ring circle.track { fill: none; stroke: var(--wyn-border); stroke-width: 5 }
.stat .ring circle.val { fill: none; stroke: var(--wyn-accent); stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1.1s var(--ease) }
.stat .n { font-size: 26px; font-weight: 800; letter-spacing: -1.2px; line-height: 1 }
.stat .l { font-size: 11px; color: var(--wyn-fg-muted); text-transform: uppercase; letter-spacing: 1.1px; margin-top: 4px }

/* Flow diagram */
.flow { width: 100%; height: auto }
.flow .node { fill: var(--wyn-base); stroke: var(--wyn-border); stroke-width: 1.2 }
.flow .node.hot { stroke: var(--wyn-accent) }
.flow .lbl { fill: var(--wyn-fg); font: 600 11px "Inter", system-ui, sans-serif }
.flow .sub { fill: var(--wyn-fg-muted); font: 400 9.5px "Inter", system-ui, sans-serif }
.flow .wire { fill: none; stroke: var(--wyn-border); stroke-width: 1.4 }
.flow .pulse { fill: none; stroke: var(--wyn-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 12 260; animation: wireFlow 3.2s linear infinite }
.flow .pulse.d1 { animation-delay: .5s } .flow .pulse.d2 { animation-delay: 1s } .flow .pulse.d3 { animation-delay: 1.5s }
@keyframes wireFlow { to { stroke-dashoffset: -272 } }

/* Cursor demo */
.cursor-demo { position: relative; height: 250px; border-radius: 17px; overflow: hidden; background: var(--wyn-base); box-shadow: var(--neu-press); cursor: crosshair }
.cursor-demo .hintline { position: absolute; inset: auto 0 16px; text-align: center; font-size: 12px; color: var(--wyn-fg-muted); pointer-events: none }
.cursor-demo .ghost-cursor { position: absolute; width: 0; height: 0; pointer-events: none; transition: transform .07s linear }
.cursor-demo .ghost-cursor .nib { position: absolute; width: 52px; height: 52px; transform: translate(-12px, -4px) }
.cursor-demo .mini-box { position: absolute; transform: translate(42px, 34px); width: 258px; border-radius: 14px; padding: 12px 14px; font-size: 12px; line-height: 1.55;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: 0 16px 44px var(--neu-lo); animation: boxIn .34s var(--spring) }
@keyframes boxIn { from { opacity: 0; transform: translate(42px, 44px) scale(.94) } to { opacity: 1; transform: translate(42px, 34px) scale(1) } }

/* Voice waveform */
.wave { display: flex; align-items: center; gap: 3px; height: 26px }
.wave i { display: block; width: 3px; border-radius: 3px; background: var(--wyn-accent); height: 20%; transition: height .09s var(--ease) }
.wave.idle i { animation: waveIdle 1.3s ease-in-out infinite }
.wave.idle i:nth-child(2) { animation-delay: .1s } .wave.idle i:nth-child(3) { animation-delay: .2s }
.wave.idle i:nth-child(4) { animation-delay: .3s } .wave.idle i:nth-child(5) { animation-delay: .4s }
.wave.idle i:nth-child(6) { animation-delay: .5s } .wave.idle i:nth-child(7) { animation-delay: .6s }
@keyframes waveIdle { 0%, 100% { height: 22% } 50% { height: 88% } }

.skel { border-radius: 10px; background: linear-gradient(90deg, var(--wyn-base) 25%, var(--glass-strong) 50%, var(--wyn-base) 75%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; height: 14px }

@media (max-width: 980px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  #nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .status-chip span:last-child { display: none; }
  .subnav { top: 0; position: static; overflow-x: auto; justify-content: flex-start; }
  .content { padding: 20px 16px 210px; }
  .hero { padding: 24px } .hero h1 { font-size: 28px }
  .pop { right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .stagger > * { opacity: 1 }
  #aurora { display: none }
}

/* ── Terminal ─────────────────────────────────────────────────────────────────
 * Pressed into the base like every other container that holds content, but with
 * a real scrollback and a prompt line that stays put at the bottom.
 * ─────────────────────────────────────────────────────────────────────────── */
.term {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--wyn-base); box-shadow: var(--neu-press); margin-top: 16px;
}
.term-out {
  flex: 1; min-height: 260px; max-height: 460px; overflow-y: auto; padding: 14px 16px;
  font: 12.6px/1.62 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--wyn-fg);
}
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.muted { color: var(--wyn-fg-muted); }
.term-line.bad { color: var(--wyn-accent); font-weight: 600; }
.term-line.bad a { color: inherit; }
.term-echo { margin-top: 10px; }
.term-echo:first-child { margin-top: 0; }
.term-prompt { color: var(--wyn-accent); font-weight: 700; }
.term-prompt b { font-weight: 700; opacity: .75; }

.term-in { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--wyn-border); }
.term-in .term-prompt {
  font: 12.4px ui-monospace, Consolas, monospace; white-space: nowrap;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis;
}
.term-in input {
  flex: 1; min-width: 0; background: transparent; box-shadow: none; border: none; padding: 2px 0;
  font: 13px ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--wyn-fg);
}
.term-in input:focus { box-shadow: none; outline: none; }
.term-in input:disabled { opacity: .5; }

/* ── Gemini-style conversation flow & memory UI ───────────────────────────── */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 24px;
}
.chat-turn {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 36px var(--neu-lo), 0 1px 0 var(--glass-sheen) inset;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chat-turn.user-turn {
  border-left: 3.5px solid var(--wyn-accent);
  background: var(--glass);
}
.chat-turn.assistant-turn {
  border-left: 3.5px solid var(--wyn-fg-muted);
}
.chat-turn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wyn-border);
  font-size: 12.5px;
}
.chat-turn-author {
  font-weight: 700;
  color: var(--wyn-fg);
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-turn-time {
  font-size: 11px;
  color: var(--wyn-fg-muted);
  margin-left: 4px;
}
.chat-turn-body {
  padding: 14px 18px;
  font-size: 14.2px;
  line-height: 1.68;
  color: var(--wyn-fg);
  overflow-wrap: break-word;
}
.chat-turn-body .answer {
  max-height: none !important;
  overflow-y: visible !important;
}
.chat-turn-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--wyn-border);
  background: rgba(0, 0, 0, 0.02);
  flex-wrap: wrap;
}
.followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 12px;
}
.followup-chip {
  background: var(--wyn-base);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--wyn-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--wyn-fg);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.followup-chip:hover {
  border-color: var(--wyn-accent);
  color: var(--wyn-accent);
  transform: translateY(-1px);
}
.chat-session-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--glass);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-edge);
}
.memory-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wyn-base);
  border: 1px solid var(--wyn-border);
  color: var(--wyn-fg-muted);
}
.memory-badge.active {
  color: var(--wyn-fg);
  border-color: var(--wyn-accent);
}
.memory-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.memory-panel {
  background: var(--wyn-bg);
  border: 1px solid var(--wyn-border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  max-width: 580px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.memory-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wyn-border);
}
.memory-panel-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.memory-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wyn-base);
  margin-bottom: 8px;
  border: 1px solid var(--wyn-border);
}