@property --rgb-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --rgb-scrollbar-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff6d7a;
}

@property --rgb-accent-red {
  syntax: "<number>";
  inherits: true;
  initial-value: 255;
}

@property --rgb-accent-green {
  syntax: "<number>";
  inherits: true;
  initial-value: 109;
}

@property --rgb-accent-blue {
  syntax: "<number>";
  inherits: true;
  initial-value: 122;
}

:root {
  color-scheme: dark;
  --bg: #070b0f;
  --panel: #0b1218;
  --panel-2: #101b22;
  --panel-strong: var(--panel-2);
  --ink: #e9f4ee;
  --muted: #82928c;
  --accent: #63d8ff;
  --accent-rgb: 99, 216, 255;
  --accent-soft: rgba(var(--accent-rgb), 0.1);
  --warning: #ffdd65;
  --border: #23332d;
  --shadow: 0 0 42px rgba(var(--accent-rgb), 0.08);
  --shell-bg: rgba(7, 12, 16, 0.92);
  --admin-bg: rgba(7, 12, 16, 0.94);
  --overlay-bg: rgba(7, 12, 16, 0.96);
  --noise-opacity: 0.04;
  --scanline-opacity: 0.05;
  --name-field-opacity: 0.05;
  --icon-filter: brightness(0) invert(1);
  --spotify-accent: var(--accent);
  --body-background:
    radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.14), transparent 40%),
    linear-gradient(rgba(var(--accent-rgb), 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.025) 1px, transparent 1px),
    var(--bg);
  --body-background-size: auto, 28px 28px, 28px 28px, auto;
  --control-radius: 0;
  --font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --material-blur: 12px;
  --shell-radius: 0;
  --window-radius: 0;
}

:root[data-color-scheme="light"] {
  color-scheme: light;
  --bg: #edf3ef;
  --panel: #f8fbf9;
  --panel-2: #e3ece7;
  --ink: #132019;
  --muted: #5c6e64;
  --border: #b7c9be;
  --shadow: 0 0 42px rgba(var(--accent-rgb), 0.1);
  --shell-bg: rgba(248, 251, 249, 0.94);
  --admin-bg: rgba(248, 251, 249, 0.96);
  --overlay-bg: rgba(248, 251, 249, 0.98);
  --noise-opacity: 0.025;
  --scanline-opacity: 0.025;
  --name-field-opacity: 0.06;
  --icon-filter: brightness(0);
  --spotify-accent: color-mix(in srgb, var(--accent) 35%, var(--ink));
}

:root[data-interface-theme="winter"] {
  --accent: #8ee7ff;
  --accent-rgb: 142, 231, 255;
  --bg: #07131f;
  --panel: rgba(10, 31, 48, 0.9);
  --panel-2: rgba(17, 47, 69, 0.92);
  --ink: #eefbff;
  --muted: #9bbdca;
  --border: rgba(174, 235, 255, 0.34);
  --shell-bg: rgba(5, 22, 36, 0.9);
  --admin-bg: rgba(5, 22, 36, 0.96);
  --overlay-bg: rgba(7, 27, 43, 0.97);
  --body-background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(184, 239, 255, 0.18) 0 1px, transparent 2px),
    linear-gradient(150deg, rgba(65, 149, 196, 0.2), transparent 42%),
    var(--bg);
  --body-background-size: 42px 42px, 64px 64px, auto, auto;
  --shadow: 0 0 48px rgba(142, 231, 255, 0.13);
}

:root[data-interface-theme="spooky"] {
  --accent: #ff9f43;
  --accent-rgb: 255, 159, 67;
  --bg: #140b18;
  --panel: rgba(35, 16, 41, 0.92);
  --panel-2: rgba(55, 24, 57, 0.94);
  --ink: #fff0d9;
  --muted: #c0a3bd;
  --warning: #b8ff65;
  --border: rgba(255, 140, 52, 0.35);
  --shell-bg: rgba(25, 10, 31, 0.92);
  --admin-bg: rgba(25, 10, 31, 0.97);
  --overlay-bg: rgba(30, 12, 37, 0.98);
  --body-background:
    radial-gradient(circle at 82% 12%, rgba(255, 128, 32, 0.24), transparent 18%),
    linear-gradient(135deg, rgba(119, 255, 66, 0.07), transparent 38%),
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(255, 159, 67, 0.025) 37px 38px),
    var(--bg);
  --body-background-size: auto;
  --shadow: 0 0 48px rgba(255, 119, 41, 0.14);
}

:root[data-interface-theme="christmas"] {
  --accent: #ffcf5a;
  --accent-rgb: 255, 207, 90;
  --bg: #07150f;
  --panel: rgba(9, 39, 27, 0.92);
  --panel-2: rgba(18, 57, 39, 0.94);
  --ink: #fff8e8;
  --muted: #b7cbbd;
  --warning: #ff6666;
  --border: rgba(255, 207, 90, 0.34);
  --shell-bg: rgba(5, 29, 19, 0.92);
  --admin-bg: rgba(5, 29, 19, 0.97);
  --overlay-bg: rgba(7, 34, 23, 0.98);
  --body-background:
    radial-gradient(circle at 12% 8%, rgba(255, 63, 63, 0.22), transparent 22%),
    radial-gradient(circle at 88% 14%, rgba(255, 220, 102, 0.18), transparent 20%),
    repeating-linear-gradient(135deg, rgba(187, 32, 42, 0.06) 0 12px, transparent 12px 28px),
    var(--bg);
  --body-background-size: auto;
  --shadow: 0 0 50px rgba(255, 207, 90, 0.14);
}

:root[data-interface-theme="new-year"] {
  --accent: #f8d878;
  --accent-rgb: 248, 216, 120;
  --bg: #080a18;
  --panel: rgba(15, 19, 42, 0.93);
  --panel-2: rgba(28, 34, 66, 0.95);
  --ink: #fffbe9;
  --muted: #b8bfd5;
  --warning: #a9e7ff;
  --border: rgba(248, 216, 120, 0.36);
  --shell-bg: rgba(9, 12, 31, 0.93);
  --admin-bg: rgba(9, 12, 31, 0.97);
  --overlay-bg: rgba(11, 15, 36, 0.98);
  --body-background:
    radial-gradient(circle at 18% 12%, rgba(248, 216, 120, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(169, 231, 255, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 75%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    linear-gradient(145deg, #11183a, var(--bg) 54%);
  --body-background-size: 72px 72px, 96px 96px, 52px 52px, auto;
  --shadow: 0 0 54px rgba(248, 216, 120, 0.16);
}

:root:is(
  [data-interface-theme="valentines"],
  [data-interface-theme="st-patricks"],
  [data-interface-theme="easter"],
  [data-interface-theme="earth-day"],
  [data-interface-theme="independence-day"],
  [data-interface-theme="thanksgiving"]
) {
  --panel: color-mix(in srgb, var(--bg) 92%, var(--accent));
  --panel-2: color-mix(in srgb, var(--bg) 84%, var(--accent));
  --ink: #fff5ee;
  --muted: color-mix(in srgb, var(--ink) 65%, var(--bg));
  --border: rgba(var(--accent-rgb), 0.35);
  --shell-bg: color-mix(in srgb, var(--bg) 94%, transparent);
  --admin-bg: color-mix(in srgb, var(--bg) 98%, transparent);
  --overlay-bg: var(--bg);
  --body-background:
    radial-gradient(ellipse at 12% 5%, rgba(var(--accent-rgb), 0.17), transparent 42%),
    radial-gradient(ellipse at 90% 85%, color-mix(in srgb, var(--warning) 12%, transparent), transparent 40%),
    var(--bg);
  --body-background-size: auto;
  --shadow: 0 0 42px rgba(var(--accent-rgb), 0.12);
  --noise-opacity: 0.02;
  --scanline-opacity: 0;
  --control-radius: 8px;
  --shell-radius: 14px;
  --window-radius: 10px;
}

:root[data-interface-theme="valentines"] {
  --accent: #ff8aa8;
  --accent-rgb: 255, 138, 168;
  --warning: #ffc8a5;
  --bg: #210e1a;
}

:root[data-interface-theme="st-patricks"] {
  --accent: #6ee7a0;
  --accent-rgb: 110, 231, 160;
  --warning: #f5d36e;
  --bg: #071c14;
}

:root[data-interface-theme="easter"] {
  --accent: #c9b0ff;
  --accent-rgb: 201, 176, 255;
  --warning: #f6e79e;
  --bg: #19162c;
}

:root[data-interface-theme="earth-day"] {
  --accent: #66d6a1;
  --accent-rgb: 102, 214, 161;
  --warning: #82c7ff;
  --bg: #071c21;
}

:root[data-interface-theme="independence-day"] {
  --accent: #9bbdff;
  --accent-rgb: 155, 189, 255;
  --warning: #ff8792;
  --bg: #0b1530;
  --shell-bg: rgba(11, 21, 48, 0.72);
  --material-blur: 0px;
}

:root[data-interface-theme="thanksgiving"] {
  --accent: #ffad69;
  --accent-rgb: 255, 173, 105;
  --warning: #f2cf77;
  --bg: #24150e;
}

:root[data-interface-theme="aurora"] {
  --accent: #68e1d2;
  --accent-rgb: 104, 225, 210;
  --bg: #071018;
  --panel: rgba(9, 25, 34, 0.82);
  --panel-2: rgba(15, 40, 49, 0.86);
  --ink: #edfffb;
  --muted: #8fb4b7;
  --border: rgba(104, 225, 210, 0.32);
  --shell-bg: rgba(5, 18, 27, 0.78);
  --admin-bg: rgba(5, 18, 27, 0.9);
  --overlay-bg: rgba(6, 20, 29, 0.9);
  --body-background:
    radial-gradient(ellipse at 12% 5%, rgba(79, 255, 198, 0.22), transparent 38%),
    radial-gradient(ellipse at 88% 15%, rgba(127, 108, 255, 0.24), transparent 42%),
    radial-gradient(ellipse at 50% 100%, rgba(41, 173, 255, 0.18), transparent 48%),
    var(--bg);
  --body-background-size: 120% 120%, 120% 120%, 125% 125%, auto;
  --control-radius: 10px;
  --material-blur: 22px;
  --shell-radius: 22px;
  --window-radius: 16px;
}

:root[data-interface-theme="aurora"][data-color-scheme="light"] {
  --bg: #edf7f5;
  --panel: rgba(248, 255, 253, 0.8);
  --panel-2: rgba(224, 243, 240, 0.86);
  --ink: #102c2b;
  --muted: #557472;
  --border: rgba(39, 133, 126, 0.28);
  --shell-bg: rgba(248, 255, 253, 0.8);
  --admin-bg: rgba(248, 255, 253, 0.92);
  --overlay-bg: rgba(246, 255, 252, 0.94);
  --body-background:
    radial-gradient(ellipse at 8% 0%, rgba(102, 255, 190, 0.26), transparent 40%),
    radial-gradient(ellipse at 92% 10%, rgba(166, 137, 255, 0.22), transparent 42%),
    linear-gradient(145deg, #f8fffd, var(--bg));
  --body-background-size: 120% 120%, 120% 120%, auto;
}

:root[data-interface-theme="cozy-blossom"] {
  --accent: #f7a4b8;
  --accent-rgb: 247, 164, 184;
  --bg: #1c1218;
  --panel: rgba(47, 27, 38, 0.9);
  --panel-2: rgba(65, 37, 50, 0.92);
  --ink: #fff2ec;
  --muted: #c8a6ad;
  --border: rgba(247, 164, 184, 0.28);
  --shell-bg: rgba(35, 20, 29, 0.9);
  --admin-bg: rgba(35, 20, 29, 0.95);
  --overlay-bg: rgba(42, 23, 34, 0.96);
  --body-background:
    radial-gradient(circle at 20% 10%, rgba(255, 160, 184, 0.2), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(255, 203, 145, 0.14), transparent 40%),
    linear-gradient(145deg, #271620, var(--bg));
  --body-background-size: auto;
  --control-radius: 12px;
  --font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --material-blur: 16px;
  --shell-radius: 24px;
  --window-radius: 18px;
}

:root[data-interface-theme="cozy-blossom"][data-color-scheme="light"] {
  --bg: #fff4f1;
  --panel: rgba(255, 251, 247, 0.92);
  --panel-2: #f8e5e4;
  --ink: #482d38;
  --muted: #866873;
  --border: #e8c6cb;
  --shell-bg: rgba(255, 251, 247, 0.94);
  --admin-bg: rgba(255, 251, 247, 0.97);
  --overlay-bg: rgba(255, 249, 247, 0.98);
  --body-background:
    radial-gradient(circle at 15% 5%, rgba(255, 182, 193, 0.32), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(255, 213, 164, 0.3), transparent 38%),
    var(--bg);
}

:root[data-interface-theme="mica"] {
  --accent: #7cb7ff;
  --accent-rgb: 124, 183, 255;
  --bg: #202124;
  --panel: rgba(42, 43, 47, 0.78);
  --panel-2: rgba(56, 58, 63, 0.82);
  --ink: #f4f5f7;
  --muted: #aeb2bb;
  --border: rgba(255, 255, 255, 0.14);
  --shell-bg: rgba(32, 33, 36, 0.72);
  --admin-bg: rgba(32, 33, 36, 0.9);
  --overlay-bg: rgba(38, 39, 43, 0.9);
  --body-background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), 0.2), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(105, 125, 160, 0.24), transparent 45%),
    #202124;
  --body-background-size: auto;
  --control-radius: 7px;
  --font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --material-blur: 28px;
  --shell-radius: 12px;
  --window-radius: 10px;
}

:root[data-interface-theme="mica"][data-color-scheme="light"] {
  --bg: #eef3f8;
  --panel: rgba(248, 251, 255, 0.76);
  --panel-2: rgba(228, 235, 244, 0.84);
  --ink: #202226;
  --muted: #626976;
  --border: rgba(43, 52, 64, 0.16);
  --shell-bg: rgba(248, 251, 255, 0.72);
  --admin-bg: rgba(248, 251, 255, 0.92);
  --overlay-bg: rgba(247, 250, 254, 0.92);
  --body-background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb), 0.16), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(145, 169, 205, 0.26), transparent 45%),
    var(--bg);
}

:root[data-interface-theme="fluent"] {
  --accent: #60cdff;
  --accent-rgb: 96, 205, 255;
  --bg: #101722;
  --panel: rgba(20, 31, 45, 0.9);
  --panel-2: rgba(29, 46, 66, 0.92);
  --ink: #f2f7ff;
  --muted: #96a9c0;
  --border: rgba(128, 174, 225, 0.24);
  --shell-bg: rgba(14, 24, 36, 0.88);
  --admin-bg: rgba(14, 24, 36, 0.95);
  --overlay-bg: rgba(17, 28, 42, 0.96);
  --body-background:
    linear-gradient(135deg, rgba(0, 120, 212, 0.2), transparent 38%),
    linear-gradient(315deg, rgba(var(--accent-rgb), 0.12), transparent 42%),
    var(--bg);
  --body-background-size: auto;
  --control-radius: 5px;
  --font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --material-blur: 18px;
  --shell-radius: 8px;
  --window-radius: 8px;
}

:root[data-interface-theme="fluent"][data-color-scheme="light"] {
  --bg: #f3f8ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-2: #e7f0fb;
  --ink: #172334;
  --muted: #627187;
  --border: rgba(49, 91, 139, 0.2);
  --shell-bg: rgba(255, 255, 255, 0.86);
  --admin-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(250, 253, 255, 0.97);
  --body-background:
    linear-gradient(135deg, rgba(0, 120, 212, 0.12), transparent 38%),
    linear-gradient(315deg, rgba(var(--accent-rgb), 0.1), transparent 42%),
    var(--bg);
}

:root[data-interface-theme="midnight-oled"] {
  --accent: #fff;
  --accent-rgb: 255, 255, 255;
  --bg: #000;
  --panel: #030303;
  --panel-2: #080808;
  --ink: #fff;
  --muted: #8b8b8b;
  --border: #252525;
  --shell-bg: #000;
  --admin-bg: #000;
  --overlay-bg: #030303;
  --body-background: #000;
  --body-background-size: auto;
  --control-radius: 2px;
  --material-blur: 0px;
  --shell-radius: 2px;
  --window-radius: 2px;
  --noise-opacity: 0.015;
  --name-field-opacity: 0.025;
}

:root[data-interface-theme="midnight-oled"][data-color-scheme="light"] {
  --bg: #f7f7f7;
  --panel: #fff;
  --panel-2: #ededed;
  --ink: #050505;
  --muted: #626262;
  --border: #cecece;
  --shell-bg: #fff;
  --admin-bg: #fff;
  --overlay-bg: #fff;
  --body-background: #f7f7f7;
}

:root[data-interface-theme="macos"] {
  --accent: #55b0ff;
  --accent-rgb: 85, 176, 255;
  --bg: #18181a;
  --panel: rgba(38, 38, 41, 0.82);
  --panel-2: rgba(54, 54, 58, 0.88);
  --ink: #f5f5f7;
  --muted: #a7a7ad;
  --border: rgba(255, 255, 255, 0.16);
  --shell-bg: rgba(28, 28, 30, 0.82);
  --admin-bg: rgba(28, 28, 30, 0.94);
  --overlay-bg: rgba(32, 32, 35, 0.94);
  --body-background:
    radial-gradient(circle at 20% 0%, rgba(102, 126, 234, 0.28), transparent 38%),
    radial-gradient(circle at 85% 100%, rgba(245, 87, 108, 0.2), transparent 42%),
    var(--bg);
  --body-background-size: auto;
  --control-radius: 9px;
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --material-blur: 30px;
  --shell-radius: 18px;
  --window-radius: 14px;
}

:root[data-interface-theme="macos"][data-color-scheme="light"] {
  --bg: #f5f5f7;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-2: rgba(235, 235, 240, 0.9);
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.14);
  --shell-bg: rgba(255, 255, 255, 0.8);
  --admin-bg: rgba(255, 255, 255, 0.95);
  --overlay-bg: rgba(250, 250, 252, 0.95);
  --body-background:
    radial-gradient(circle at 15% 0%, rgba(102, 126, 234, 0.2), transparent 38%),
    radial-gradient(circle at 90% 100%, rgba(245, 87, 108, 0.14), transparent 42%),
    var(--bg);
}

:root[data-interface-theme="terminal"] {
  --accent: #66ff9a;
  --accent-rgb: 102, 255, 154;
  --bg: #000500;
  --panel: #020b03;
  --panel-2: #061507;
  --ink: #b9ffc7;
  --muted: #5f9c6b;
  --border: #174d22;
  --shell-bg: rgba(0, 8, 1, 0.96);
  --admin-bg: rgba(0, 8, 1, 0.98);
  --overlay-bg: rgba(0, 10, 2, 0.98);
  --body-background:
    repeating-linear-gradient(0deg, rgba(92, 255, 124, 0.025) 0 1px, transparent 1px 4px),
    #000500;
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "Cascadia Mono", "Courier New", monospace;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --scanline-opacity: 0.1;
  --name-field-opacity: 0.035;
}

:root[data-interface-theme="terminal"][data-color-scheme="light"] {
  --bg: #e8f4e8;
  --panel: #f4fff4;
  --panel-2: #dbeadb;
  --ink: #0b3814;
  --muted: #497052;
  --border: #85a98b;
  --shell-bg: rgba(244, 255, 244, 0.96);
  --admin-bg: rgba(244, 255, 244, 0.98);
  --overlay-bg: rgba(246, 255, 246, 0.98);
  --body-background:
    repeating-linear-gradient(0deg, rgba(18, 80, 30, 0.035) 0 1px, transparent 1px 4px),
    var(--bg);
}

:root[data-interface-theme="vaporwave"] {
  --accent: #ff60e2;
  --accent-rgb: 255, 96, 226;
  --bg: #160d2b;
  --panel: rgba(42, 19, 75, 0.9);
  --panel-2: rgba(66, 27, 96, 0.92);
  --ink: #fff1ff;
  --muted: #d0a9df;
  --border: rgba(255, 96, 226, 0.42);
  --shell-bg: rgba(25, 11, 48, 0.9);
  --admin-bg: rgba(25, 11, 48, 0.96);
  --overlay-bg: rgba(34, 14, 61, 0.97);
  --body-background:
    linear-gradient(rgba(74, 225, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 81, 210, 0.09) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, rgba(255, 76, 210, 0.34), transparent 34%),
    linear-gradient(155deg, #28114d, #0d1838);
  --body-background-size: 34px 34px, 34px 34px, auto, auto;
  --control-radius: 3px;
  --font-family: "Cascadia Code", "Courier New", monospace;
  --material-blur: 14px;
  --shell-radius: 4px;
  --window-radius: 3px;
}

:root[data-interface-theme="vaporwave"][data-color-scheme="light"] {
  --bg: #fff0fb;
  --panel: rgba(255, 249, 254, 0.92);
  --panel-2: #f6daf2;
  --ink: #42194e;
  --muted: #845b8f;
  --border: rgba(180, 61, 161, 0.34);
  --shell-bg: rgba(255, 249, 254, 0.92);
  --admin-bg: rgba(255, 249, 254, 0.97);
  --overlay-bg: rgba(255, 247, 253, 0.98);
  --body-background:
    linear-gradient(rgba(53, 184, 209, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205, 69, 176, 0.1) 1px, transparent 1px),
    linear-gradient(155deg, #fff0fb, #e9f8ff);
  --body-background-size: 34px 34px, 34px 34px, auto;
}

:root[data-interface-theme="amber-crt"] {
  --accent: #ffb237;
  --accent-rgb: 255, 178, 55;
  --bg: #100900;
  --panel: #190e01;
  --panel-2: #241503;
  --ink: #ffd37a;
  --muted: #a97632;
  --border: #714714;
  --shell-bg: rgba(16, 9, 0, 0.96);
  --admin-bg: rgba(16, 9, 0, 0.98);
  --overlay-bg: rgba(20, 11, 0, 0.98);
  --body-background:
    repeating-linear-gradient(0deg, rgba(255, 178, 55, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, #201201, #080400 76%);
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "Cascadia Mono", "Courier New", monospace;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --scanline-opacity: 0.14;
  --name-field-opacity: 0.025;
}

:root[data-interface-theme="amber-crt"][data-color-scheme="light"] {
  --bg: #fff4d6;
  --panel: #fffaf0;
  --panel-2: #f2dfb8;
  --ink: #4d2d00;
  --muted: #815f2a;
  --border: #bd9251;
  --shell-bg: rgba(255, 250, 240, 0.96);
  --admin-bg: rgba(255, 250, 240, 0.98);
  --overlay-bg: rgba(255, 248, 232, 0.98);
  --body-background:
    repeating-linear-gradient(0deg, rgba(110, 69, 10, 0.04) 0 1px, transparent 1px 4px),
    var(--bg);
}

:root[data-interface-theme="y2k-silver"] {
  --accent: #c0e0ff;
  --accent-rgb: 192, 224, 255;
  --bg: #252a33;
  --panel: rgba(61, 69, 82, 0.94);
  --panel-2: rgba(92, 102, 117, 0.94);
  --ink: #f8fbff;
  --muted: #bac6d6;
  --border: rgba(211, 231, 255, 0.34);
  --shell-bg: rgba(38, 44, 54, 0.9);
  --admin-bg: rgba(38, 44, 54, 0.97);
  --overlay-bg: rgba(50, 57, 69, 0.98);
  --body-background:
    radial-gradient(circle at 20% 0%, rgba(152, 214, 255, 0.28), transparent 36%),
    linear-gradient(135deg, #191e27, #4a5360 52%, #202631);
  --body-background-size: auto;
  --control-radius: 14px;
  --font-family: Verdana, "Trebuchet MS", system-ui, sans-serif;
  --material-blur: 18px;
  --shell-radius: 20px;
  --window-radius: 16px;
}

:root[data-interface-theme="y2k-silver"][data-color-scheme="light"] {
  --bg: #e8edf4;
  --panel: rgba(250, 253, 255, 0.94);
  --panel-2: #d2dbe7;
  --ink: #202936;
  --muted: #59697d;
  --border: #9baabd;
  --shell-bg: rgba(249, 252, 255, 0.92);
  --admin-bg: rgba(249, 252, 255, 0.98);
  --overlay-bg: rgba(245, 249, 253, 0.98);
  --body-background:
    radial-gradient(circle at 20% 0%, rgba(123, 196, 239, 0.26), transparent 36%),
    linear-gradient(135deg, #f8fbff, #c8d1dd 52%, #edf2f7);
}

:root[data-interface-theme="cyberpunk"] {
  --accent: #f5f336;
  --accent-rgb: 245, 243, 54;
  --bg: #080712;
  --panel: rgba(17, 16, 35, 0.94);
  --panel-2: rgba(30, 25, 52, 0.96);
  --ink: #f5f336;
  --muted: #8eeaf0;
  --border: rgba(255, 45, 157, 0.48);
  --shell-bg: rgba(8, 7, 18, 0.94);
  --admin-bg: rgba(8, 7, 18, 0.98);
  --overlay-bg: rgba(13, 11, 27, 0.98);
  --body-background:
    linear-gradient(120deg, transparent 0 48%, rgba(245, 243, 54, 0.05) 48% 52%, transparent 52%),
    radial-gradient(circle at 90% 10%, rgba(255, 45, 157, 0.3), transparent 35%),
    #080712;
  --body-background-size: 46px 46px, auto, auto;
  --control-radius: 0;
  --font-family: "Cascadia Code", "Arial Narrow", monospace;
  --material-blur: 8px;
  --shell-radius: 0;
  --window-radius: 0;
}

:root[data-interface-theme="cyberpunk"][data-color-scheme="light"] {
  --bg: #f3f000;
  --panel: rgba(255, 255, 225, 0.94);
  --panel-2: #d9e0d1;
  --ink: #111018;
  --muted: #31515a;
  --border: #ce126e;
  --shell-bg: rgba(255, 255, 225, 0.94);
  --admin-bg: rgba(255, 255, 225, 0.98);
  --overlay-bg: rgba(250, 250, 218, 0.98);
  --body-background:
    linear-gradient(120deg, transparent 0 48%, rgba(10, 8, 20, 0.08) 48% 52%, transparent 52%),
    #f3f000;
  --body-background-size: 46px 46px, auto;
}

:root[data-interface-theme="dos-blue"] {
  --accent: #55ffff;
  --accent-rgb: 85, 255, 255;
  --bg: #0000aa;
  --panel: #000080;
  --panel-2: #000066;
  --ink: #fff;
  --muted: #aaaaff;
  --border: #55ffff;
  --shell-bg: #000080;
  --admin-bg: #000080;
  --overlay-bg: #000066;
  --body-background: #0000aa;
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "Cascadia Mono", "Courier New", monospace;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --noise-opacity: 0;
  --scanline-opacity: 0;
}

:root[data-interface-theme="dos-blue"][data-color-scheme="light"] {
  --bg: #d7d7d7;
  --panel: #f2f2f2;
  --panel-2: #c0c0c0;
  --ink: #000080;
  --muted: #444;
  --border: #000080;
  --shell-bg: #f2f2f2;
  --admin-bg: #f2f2f2;
  --overlay-bg: #e4e4e4;
  --body-background: #d7d7d7;
}

:root[data-interface-theme="windows-95"] {
  color-scheme: light;
  --w95-face: #c0c0c0;
  --w95-panel: #d4d0c8;
  --w95-field: #fff;
  --w95-hi: #fff;
  --w95-light: #dfdfdf;
  --w95-shadow: #808080;
  --w95-dark: #000;
  --w95-pressed: #a0a0a0;
  --w95-text: #000;
  --w95-disabled: #808080;
  --w95-accent-text: #000080;
  --w95-muted: #3d3d3d;
  --w95-warning: #800000;
  --w95-error: #c00000;
  --w95-desktop: #008080;
  --accent: #000080;
  --accent-rgb: 0, 0, 128;
  --bg: #004c4c;
  --panel: var(--w95-panel);
  --panel-2: var(--w95-panel);
  --ink: #101010;
  --muted: var(--w95-muted);
  --border: #5f5f5f;
  --shadow: 0 0 42px rgba(var(--accent-rgb), 0.08);
  --shell-bg: var(--w95-panel);
  --admin-bg: var(--w95-panel);
  --overlay-bg: var(--w95-panel);
  --body-background: var(--bg);
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --noise-opacity: 0;
  --scanline-opacity: 0.035;
  --name-field-opacity: 0;
  --icon-filter: none;
  --spotify-accent: var(--accent);
  --scrollbar-size: 16px;
  --scrollbar-track: var(--w95-panel);
  --scrollbar-track-border: var(--w95-shadow);
  --scrollbar-thumb-color: var(--w95-face);
  --scrollbar-thumb-background: var(--w95-face);
  --scrollbar-thumb-hover: var(--w95-panel);
  --scrollbar-thumb-active: var(--w95-pressed);
  --scrollbar-thumb-border: 2px solid var(--w95-shadow);
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

/* Windows 95 dark mode: the same bevels re-cut in charcoal, as if the shell shipped a night theme. */
:root[data-interface-theme="windows-95"][data-color-scheme="dark"] {
  color-scheme: dark;
  --w95-face: #3c3c3c;
  --w95-panel: #303030;
  --w95-field: #1b1b1b;
  --w95-hi: #6b6b6b;
  --w95-light: #4b4b4b;
  --w95-shadow: #161616;
  --w95-dark: #000;
  --w95-pressed: #262626;
  --w95-text: #ececec;
  --w95-disabled: #8c8c8c;
  --w95-accent-text: #9cc0ff;
  --w95-muted: #bdbdbd;
  --w95-warning: #ff9b8f;
  --w95-error: #ff7070;
  --w95-desktop: #004040;
  --accent: #9cc0ff;
  --accent-rgb: 156, 192, 255;
  --bg: #002b2b;
  --ink: #ececec;
  --border: #5a5a5a;
}

:root[data-interface-theme="solarized"] {
  --accent: #78c7ff;
  --accent-rgb: 120, 199, 255;
  --bg: #002b36;
  --panel: #073642;
  --panel-2: #0c4653;
  --ink: #fdf6e3;
  --muted: #93a1a1;
  --border: #2b6570;
  --shell-bg: rgba(0, 43, 54, 0.94);
  --admin-bg: rgba(0, 43, 54, 0.98);
  --overlay-bg: rgba(7, 54, 66, 0.98);
  --body-background:
    radial-gradient(circle at 50% 0%, rgba(38, 139, 210, 0.14), transparent 40%),
    #002b36;
  --body-background-size: auto;
  --control-radius: 4px;
  --font-family: "Cascadia Code", Consolas, monospace;
  --material-blur: 0px;
  --shell-radius: 6px;
  --window-radius: 5px;
}

:root[data-interface-theme="solarized"][data-color-scheme="light"] {
  --bg: #fdf6e3;
  --panel: #eee8d5;
  --panel-2: #e1dac5;
  --ink: #073642;
  --muted: #657b83;
  --border: #b8ad91;
  --shell-bg: rgba(253, 246, 227, 0.95);
  --admin-bg: rgba(253, 246, 227, 0.98);
  --overlay-bg: rgba(238, 232, 213, 0.98);
  --body-background:
    radial-gradient(circle at 50% 0%, rgba(38, 139, 210, 0.1), transparent 40%),
    #fdf6e3;
}

:root[data-interface-theme="nord"] {
  --accent: #a7d8e5;
  --accent-rgb: 167, 216, 229;
  --bg: #2e3440;
  --panel: #3b4252;
  --panel-2: #434c5e;
  --ink: #eceff4;
  --muted: #aeb8c8;
  --border: #5e81ac;
  --shell-bg: rgba(46, 52, 64, 0.94);
  --admin-bg: rgba(46, 52, 64, 0.98);
  --overlay-bg: rgba(59, 66, 82, 0.98);
  --body-background:
    linear-gradient(145deg, rgba(94, 129, 172, 0.16), transparent 45%),
    #2e3440;
  --body-background-size: auto;
  --control-radius: 6px;
  --font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --material-blur: 10px;
  --shell-radius: 10px;
  --window-radius: 8px;
}

:root[data-interface-theme="nord"][data-color-scheme="light"] {
  --bg: #eceff4;
  --panel: #fff;
  --panel-2: #e5e9f0;
  --ink: #2e3440;
  --muted: #657184;
  --border: #81a1c1;
  --shell-bg: rgba(255, 255, 255, 0.94);
  --admin-bg: rgba(255, 255, 255, 0.98);
  --overlay-bg: rgba(245, 247, 250, 0.98);
  --body-background:
    linear-gradient(145deg, rgba(94, 129, 172, 0.12), transparent 45%),
    #eceff4;
}

:root[data-interface-theme="dracula"] {
  --accent: #d2b7ff;
  --accent-rgb: 210, 183, 255;
  --bg: #282a36;
  --panel: #343746;
  --panel-2: #44475a;
  --ink: #f8f8f2;
  --muted: #b9bad0;
  --border: #6272a4;
  --shell-bg: rgba(40, 42, 54, 0.94);
  --admin-bg: rgba(40, 42, 54, 0.98);
  --overlay-bg: rgba(52, 55, 70, 0.98);
  --body-background:
    radial-gradient(circle at 85% 5%, rgba(189, 147, 249, 0.2), transparent 36%),
    radial-gradient(circle at 5% 95%, rgba(255, 121, 198, 0.13), transparent 40%),
    #282a36;
  --body-background-size: auto;
  --control-radius: 5px;
  --font-family: "Cascadia Code", Consolas, monospace;
  --material-blur: 8px;
  --shell-radius: 8px;
  --window-radius: 7px;
}

:root[data-interface-theme="dracula"][data-color-scheme="light"] {
  --bg: #f8f8f2;
  --panel: #fff;
  --panel-2: #e9e8ef;
  --ink: #282a36;
  --muted: #626579;
  --border: #8d79b8;
  --shell-bg: rgba(255, 255, 255, 0.95);
  --admin-bg: rgba(255, 255, 255, 0.98);
  --overlay-bg: rgba(248, 247, 252, 0.98);
  --body-background:
    radial-gradient(circle at 85% 5%, rgba(189, 147, 249, 0.18), transparent 36%),
    #f8f8f2;
}

:root[data-interface-theme="candy-pop"] {
  --accent: #ff75b7;
  --accent-rgb: 255, 117, 183;
  --bg: #25152d;
  --panel: rgba(61, 32, 72, 0.92);
  --panel-2: rgba(82, 42, 92, 0.94);
  --ink: #fff7fc;
  --muted: #dbb8d7;
  --border: rgba(255, 142, 201, 0.42);
  --shell-bg: rgba(42, 22, 51, 0.92);
  --admin-bg: rgba(42, 22, 51, 0.97);
  --overlay-bg: rgba(52, 26, 62, 0.98);
  --body-background:
    radial-gradient(circle at 14% 12%, rgba(255, 117, 183, 0.3), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(109, 225, 255, 0.24), transparent 28%),
    radial-gradient(circle at 70% 90%, rgba(255, 220, 111, 0.2), transparent 30%),
    #25152d;
  --body-background-size: auto;
  --control-radius: 18px;
  --font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --material-blur: 16px;
  --shell-radius: 28px;
  --window-radius: 22px;
}

:root[data-interface-theme="candy-pop"][data-color-scheme="light"] {
  --bg: #fff4fb;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-2: #fbe1f1;
  --ink: #522542;
  --muted: #93627f;
  --border: #efafd2;
  --shell-bg: rgba(255, 255, 255, 0.92);
  --admin-bg: rgba(255, 255, 255, 0.98);
  --overlay-bg: rgba(255, 249, 253, 0.98);
  --body-background:
    radial-gradient(circle at 14% 12%, rgba(255, 117, 183, 0.24), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(109, 225, 255, 0.22), transparent 28%),
    radial-gradient(circle at 70% 90%, rgba(255, 220, 111, 0.24), transparent 30%),
    #fff4fb;
}

:root[data-interface-theme="rgb"] {
  --accent: rgb(var(--rgb-accent-red), var(--rgb-accent-green), var(--rgb-accent-blue));
  --accent-rgb: var(--rgb-accent-red), var(--rgb-accent-green), var(--rgb-accent-blue);
  --rgb-scrollbar-color: var(--accent);
  --bg: #090713;
  --panel: rgba(22, 17, 38, 0.9);
  --panel-2: rgba(34, 25, 55, 0.94);
  --ink: #fff;
  --muted: #c9bed8;
  --border: rgba(255, 255, 255, 0.24);
  --shell-bg: rgba(12, 9, 23, 0.9);
  --admin-bg: rgba(12, 9, 23, 0.97);
  --overlay-bg: rgba(18, 13, 32, 0.98);
  --body-background:
    radial-gradient(circle at 12% 12%, rgba(var(--accent-rgb), 0.25), transparent 30%),
    radial-gradient(circle at 88% 15%, rgba(var(--accent-rgb), 0.18), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(var(--accent-rgb), 0.22), transparent 34%),
    #090713;
  --body-background-size: auto;
  --control-radius: 8px;
  --font-family: "Cascadia Code", "Segoe UI", monospace;
  --material-blur: 18px;
  --shell-radius: 14px;
  --window-radius: 10px;
  --scrollbar-size: 14px;
  --scrollbar-track: #090713;
  --scrollbar-track-border: rgba(255, 255, 255, 0.24);
  --scrollbar-thumb-color: var(--accent);
  --scrollbar-thumb-background: var(--accent);
  --scrollbar-thumb-hover: #fff;
  --scrollbar-thumb-active: var(--accent);
  --scrollbar-thumb-border: 2px solid #090713;
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: 0 0 9px rgba(var(--accent-rgb), 0.48);
}

:root[data-interface-theme="aero-glass"] {
  --accent: #76d0ff;
  --accent-rgb: 118, 208, 255;
  --bg: #0d3358;
  --panel: rgba(16, 58, 92, 0.48);
  --panel-2: rgba(104, 158, 190, 0.3);
  --ink: #f7fcff;
  --muted: #bed9e8;
  --border: rgba(220, 245, 255, 0.42);
  --shell-bg: rgba(12, 50, 82, 0.38);
  --admin-bg: rgba(12, 48, 78, 0.68);
  --overlay-bg: rgba(18, 62, 96, 0.72);
  --body-background:
    radial-gradient(ellipse at 18% 2%, rgba(218, 248, 255, 0.58), transparent 30%),
    radial-gradient(ellipse at 78% 12%, rgba(78, 176, 255, 0.5), transparent 36%),
    radial-gradient(ellipse at 45% 112%, rgba(83, 229, 138, 0.58), transparent 48%),
    linear-gradient(155deg, #071f3a, #1479bc 52%, #1c8b87);
  --body-background-size: auto;
  --control-radius: 7px;
  --font-family: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
  --material-blur: 26px;
  --shell-radius: 12px;
  --window-radius: 9px;
  --noise-opacity: 0.018;
  --scanline-opacity: 0;
  --name-field-opacity: 0.035;
  --scrollbar-size: 14px;
  --scrollbar-track: rgba(8, 39, 66, 0.54);
  --scrollbar-track-border: rgba(220, 245, 255, 0.32);
  --scrollbar-thumb-color: #79cbfa;
  --scrollbar-thumb-background: linear-gradient(90deg, rgba(255, 255, 255, 0.68), #38b6ff 48%, #1478ba);
  --scrollbar-thumb-hover: linear-gradient(90deg, #fff, #79cbfa 48%, #1b91d4);
  --scrollbar-thumb-active: #fff;
  --scrollbar-thumb-border: 2px solid rgba(9, 50, 82, 0.72);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 0 8px rgba(56, 182, 255, 0.34);
}

:root[data-interface-theme="minebits"] {
  --accent: #a4d878;
  --accent-rgb: 164, 216, 120;
  --bg: #332719;
  --panel: #4a4d45;
  --panel-2: #65452e;
  --panel-strong: #363a36;
  --ink: #f4f0d4;
  --muted: #d1c6a7;
  --warning: #f3c95f;
  --border: #20251e;
  --shadow: 8px 8px 0 rgba(17, 13, 8, 0.58);
  --shell-bg: #45483f;
  --admin-bg: #3b3e38;
  --overlay-bg: #3d403a;
  --noise-opacity: 0.065;
  --scanline-opacity: 0;
  --name-field-opacity: 0.025;
  --icon-filter: brightness(0) invert(0.96) sepia(0.18);
  --body-background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20, 17, 12, 0.16) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(20, 17, 12, 0.16) 31px 32px),
    linear-gradient(
      180deg,
      #6ba0b0 0 18%,
      #9bcf68 18% 21%,
      #5f432b 21% 60%,
      #41443f 60% 84%,
      #282b29 84%
    );
  --body-background-size: 32px 32px, 32px 32px, 100% 100%;
  --control-radius: 0;
  --font-family: "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --material-blur: 0;
  --shell-radius: 0;
  --window-radius: 0;
}

/* ---- Added themes: each ships a dark block plus a light block (tied to the COLOR MODE picker). ---- */

:root[data-interface-theme="catppuccin"] {
  --accent: #cba6f7;
  --accent-rgb: 203, 166, 247;
  --bg: #1e1e2e;
  --panel: rgba(36, 36, 54, 0.94);
  --panel-2: rgba(49, 50, 68, 0.96);
  --ink: #cdd6f4;
  --muted: #a6adc8;
  --warning: #f9e2af;
  --border: #45475a;
  --shell-bg: rgba(24, 24, 37, 0.92);
  --admin-bg: rgba(24, 24, 37, 0.97);
  --overlay-bg: rgba(30, 30, 46, 0.98);
  --body-background:
    radial-gradient(circle at 12% 0%, rgba(203, 166, 247, 0.16), transparent 38%),
    radial-gradient(circle at 92% 100%, rgba(245, 194, 231, 0.12), transparent 42%),
    #1e1e2e;
  --body-background-size: auto;
  --control-radius: 8px;
  --font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --material-blur: 10px;
  --shell-radius: 14px;
  --window-radius: 12px;
  --noise-opacity: 0.02;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #cba6f7, #f5c2e7);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
}

:root[data-interface-theme="catppuccin"][data-color-scheme="light"] {
  --accent: #8839ef;
  --accent-rgb: 136, 57, 239;
  --bg: #eff1f5;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: #e6e9ef;
  --ink: #4c4f69;
  --muted: #6c6f85;
  --warning: #df8e1d;
  --border: #ccd0da;
  --shell-bg: rgba(239, 241, 245, 0.94);
  --admin-bg: rgba(239, 241, 245, 0.98);
  --overlay-bg: rgba(230, 233, 239, 0.98);
  --body-background:
    radial-gradient(circle at 12% 0%, rgba(136, 57, 239, 0.1), transparent 38%),
    radial-gradient(circle at 92% 100%, rgba(234, 118, 203, 0.1), transparent 42%),
    #eff1f5;
  --scrollbar-thumb-background: linear-gradient(180deg, #8839ef, #ea76cb);
}

:root[data-interface-theme="gruvbox"] {
  --accent: #fabd2f;
  --accent-rgb: 250, 189, 47;
  --bg: #282828;
  --panel: #32302f;
  --panel-2: #3c3836;
  --ink: #ebdbb2;
  --muted: #bdae93;
  --warning: #fe8019;
  --border: #665c54;
  --shell-bg: rgba(40, 40, 40, 0.95);
  --admin-bg: rgba(40, 40, 40, 0.98);
  --overlay-bg: rgba(50, 48, 47, 0.98);
  --body-background:
    linear-gradient(160deg, rgba(254, 128, 25, 0.1), transparent 40%),
    linear-gradient(340deg, rgba(184, 187, 38, 0.08), transparent 45%),
    #282828;
  --body-background-size: auto;
  --control-radius: 2px;
  --font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  --material-blur: 4px;
  --shell-radius: 4px;
  --window-radius: 3px;
  --noise-opacity: 0.035;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #fabd2f, #fe8019);
}

:root[data-interface-theme="gruvbox"][data-color-scheme="light"] {
  --accent: #af3a03;
  --accent-rgb: 175, 58, 3;
  --bg: #fbf1c7;
  --panel: #f9f5d7;
  --panel-2: #ebdbb2;
  --ink: #3c3836;
  --muted: #665c54;
  --warning: #b57614;
  --border: #bdae93;
  --shell-bg: rgba(249, 245, 215, 0.95);
  --admin-bg: rgba(249, 245, 215, 0.98);
  --overlay-bg: rgba(242, 229, 188, 0.98);
  --body-background:
    linear-gradient(160deg, rgba(214, 93, 14, 0.1), transparent 40%),
    linear-gradient(340deg, rgba(121, 116, 14, 0.08), transparent 45%),
    #fbf1c7;
  --scrollbar-thumb-background: linear-gradient(180deg, #d65d0e, #af3a03);
}

:root[data-interface-theme="tokyo-night"] {
  --accent: #7aa2f7;
  --accent-rgb: 122, 162, 247;
  --bg: #1a1b26;
  --panel: rgba(31, 35, 53, 0.92);
  --panel-2: rgba(36, 40, 59, 0.95);
  --ink: #c0caf5;
  --muted: #9aa5ce;
  --warning: #e0af68;
  --border: #3b4261;
  --shell-bg: rgba(22, 22, 30, 0.9);
  --admin-bg: rgba(22, 22, 30, 0.97);
  --overlay-bg: rgba(26, 27, 38, 0.98);
  --body-background:
    radial-gradient(ellipse at 80% -10%, rgba(187, 154, 247, 0.22), transparent 45%),
    radial-gradient(ellipse at 10% 110%, rgba(122, 162, 247, 0.18), transparent 50%),
    linear-gradient(180deg, transparent 70%, rgba(247, 118, 142, 0.06)),
    #1a1b26;
  --body-background-size: auto;
  --control-radius: 6px;
  --font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --material-blur: 12px;
  --shell-radius: 10px;
  --window-radius: 8px;
  --noise-opacity: 0.025;
  --scanline-opacity: 0;
  --shadow: 0 0 42px rgba(187, 154, 247, 0.12);
  --scrollbar-thumb-background: linear-gradient(180deg, #7aa2f7, #bb9af7);
  --scrollbar-thumb-radius: 6px;
  --scrollbar-track-radius: 6px;
}

:root[data-interface-theme="tokyo-night"][data-color-scheme="light"] {
  --accent: #2e7de9;
  --accent-rgb: 46, 125, 233;
  --bg: #e1e2e7;
  --panel: rgba(243, 244, 248, 0.95);
  --panel-2: #d5d6db;
  --ink: #3760bf;
  --muted: #5c6697;
  --warning: #8c6c3e;
  --border: #a8aecb;
  --shell-bg: rgba(233, 234, 239, 0.94);
  --admin-bg: rgba(233, 234, 239, 0.98);
  --overlay-bg: rgba(225, 226, 231, 0.98);
  --shadow: 0 0 42px rgba(46, 125, 233, 0.1);
  --body-background:
    radial-gradient(ellipse at 80% -10%, rgba(152, 84, 241, 0.12), transparent 45%),
    radial-gradient(ellipse at 10% 110%, rgba(46, 125, 233, 0.12), transparent 50%),
    #e1e2e7;
  --scrollbar-thumb-background: linear-gradient(180deg, #2e7de9, #9854f1);
}

:root[data-interface-theme="monokai"] {
  --accent: #a6e22e;
  --accent-rgb: 166, 226, 46;
  --bg: #272822;
  --panel: #2d2e27;
  --panel-2: #3e3d32;
  --ink: #f8f8f2;
  --muted: #b8b39b;
  --warning: #e6db74;
  --border: #49483e;
  --shell-bg: rgba(39, 40, 34, 0.96);
  --admin-bg: rgba(39, 40, 34, 0.98);
  --overlay-bg: rgba(45, 46, 39, 0.98);
  --body-background:
    linear-gradient(90deg, rgba(249, 38, 114, 0.08) 0 4px, transparent 4px),
    linear-gradient(rgba(248, 248, 242, 0.025) 1px, transparent 1px),
    #272822;
  --body-background-size: auto, 100% 24px, auto;
  --control-radius: 3px;
  --font-family: Monaco, "Cascadia Code", Consolas, monospace;
  --material-blur: 0px;
  --shell-radius: 4px;
  --window-radius: 4px;
  --noise-opacity: 0.02;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #f92672, #fd971f 50%, #a6e22e);
}

:root[data-interface-theme="monokai"][data-color-scheme="light"] {
  --accent: #c4185c;
  --accent-rgb: 196, 24, 92;
  --bg: #fafaf5;
  --panel: #fff;
  --panel-2: #efefe6;
  --ink: #272822;
  --muted: #6b6753;
  --warning: #9a6a00;
  --border: #cfcfc2;
  --shell-bg: rgba(255, 255, 255, 0.96);
  --admin-bg: rgba(255, 255, 255, 0.98);
  --overlay-bg: rgba(245, 245, 238, 0.98);
  --body-background:
    linear-gradient(90deg, rgba(196, 24, 92, 0.1) 0 4px, transparent 4px),
    linear-gradient(rgba(39, 40, 34, 0.035) 1px, transparent 1px),
    #fafaf5;
  --scrollbar-thumb-background: linear-gradient(180deg, #c4185c, #c76b00 50%, #4d8a0b);
}

:root[data-interface-theme="game-bit"] {
  --accent: #c4dc6a;
  --accent-rgb: 196, 220, 106;
  --bg: #0f380f;
  --panel: #1b471b;
  --panel-2: #306230;
  --ink: #c4dc6a;
  --muted: #9bbc0f;
  --warning: #e0f08a;
  --border: #8bac0f;
  --shell-bg: #163f16;
  --admin-bg: #163f16;
  --overlay-bg: #1b471b;
  --body-background:
    linear-gradient(rgba(15, 56, 15, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 56, 15, 0.55) 1px, transparent 1px),
    #1d4d1d;
  --body-background-size: 4px 4px, 4px 4px, auto;
  --control-radius: 0;
  --font-family: "Press Start 2P", "Lucida Console", "Courier New", monospace;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --noise-opacity: 0;
  --scanline-opacity: 0;
  --name-field-opacity: 0.04;
  --shadow: 4px 4px 0 rgba(15, 56, 15, 0.8);
  --scrollbar-thumb-background: #8bac0f;
  --scrollbar-thumb-border: 3px solid var(--panel);
}

:root[data-interface-theme="game-bit"][data-color-scheme="light"] {
  --accent: #306230;
  --accent-rgb: 48, 98, 48;
  --bg: #9bbc0f;
  --panel: #a8c73a;
  --panel-2: #8bac0f;
  --ink: #0f380f;
  --muted: #234d23;
  --warning: #0f380f;
  --border: #306230;
  --shell-bg: #a8c73a;
  --admin-bg: #a8c73a;
  --overlay-bg: #9bbc0f;
  --shadow: 4px 4px 0 rgba(15, 56, 15, 0.45);
  --body-background:
    linear-gradient(rgba(139, 172, 15, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 172, 15, 0.7) 1px, transparent 1px),
    #9bbc0f;
  --scrollbar-thumb-background: #306230;
}

:root[data-interface-theme="high-contrast"] {
  --accent: #ffff00;
  --accent-rgb: 255, 255, 0;
  --bg: #000;
  --panel: #000;
  --panel-2: #111;
  --ink: #fff;
  --muted: #f0f0f0;
  --warning: #ffb000;
  --border: #fff;
  --shadow: none;
  --shell-bg: #000;
  --admin-bg: #000;
  --overlay-bg: #000;
  --body-background: #000;
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "Segoe UI", Arial, system-ui, sans-serif;
  --material-blur: 0px;
  --shell-radius: 0;
  --window-radius: 0;
  --noise-opacity: 0;
  --scanline-opacity: 0;
  --name-field-opacity: 0;
  --scrollbar-thumb-background: var(--accent);
  --scrollbar-thumb-color: var(--accent);
  --scrollbar-track-border: var(--ink);
}

:root[data-interface-theme="high-contrast"][data-color-scheme="light"] {
  --accent: #0000c8;
  --accent-rgb: 0, 0, 200;
  --bg: #fff;
  --panel: #fff;
  --panel-2: #f0f0f0;
  --ink: #000;
  --muted: #111;
  --warning: #8a3b00;
  --border: #000;
  --shadow: none;
  --shell-bg: #fff;
  --admin-bg: #fff;
  --overlay-bg: #fff;
  --body-background: #fff;
  --noise-opacity: 0;
  --scanline-opacity: 0;
  --name-field-opacity: 0;
}

:root[data-interface-theme="ocean"] {
  --accent: #3fd8d0;
  --accent-rgb: 63, 216, 208;
  --bg: #03141f;
  --panel: rgba(6, 32, 46, 0.9);
  --panel-2: rgba(9, 45, 62, 0.93);
  --ink: #e3f8fb;
  --muted: #94bcc7;
  --warning: #ffd479;
  --border: rgba(64, 196, 214, 0.34);
  --shell-bg: rgba(3, 24, 36, 0.88);
  --admin-bg: rgba(3, 24, 36, 0.96);
  --overlay-bg: rgba(5, 30, 44, 0.97);
  --body-background:
    radial-gradient(ellipse at 30% -10%, rgba(120, 230, 240, 0.2), transparent 40%),
    radial-gradient(ellipse at 75% 0%, rgba(63, 216, 208, 0.12), transparent 35%),
    linear-gradient(180deg, #073247 0%, #03141f 55%, #010a10 100%);
  --body-background-size: auto;
  --control-radius: 10px;
  --font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --material-blur: 14px;
  --shell-radius: 16px;
  --window-radius: 12px;
  --noise-opacity: 0.025;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #7ee8f0, #1a8fa8);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
}

:root[data-interface-theme="ocean"][data-color-scheme="light"] {
  --accent: #00788a;
  --accent-rgb: 0, 120, 138;
  --bg: #e6f6f8;
  --panel: rgba(247, 253, 253, 0.92);
  --panel-2: #d8eff2;
  --ink: #08303d;
  --muted: #45666f;
  --warning: #8a5a00;
  --border: #9bcdd5;
  --shell-bg: rgba(240, 250, 251, 0.9);
  --admin-bg: rgba(240, 250, 251, 0.97);
  --overlay-bg: rgba(232, 246, 248, 0.98);
  --body-background:
    radial-gradient(ellipse at 30% -10%, rgba(255, 255, 255, 0.9), transparent 45%),
    linear-gradient(180deg, #d4f1f5 0%, #e6f6f8 50%, #c9e8ee 100%);
  --scrollbar-thumb-background: linear-gradient(180deg, #2bb3c4, #00788a);
}

:root[data-interface-theme="coffee"] {
  --accent: #e0a96d;
  --accent-rgb: 224, 169, 109;
  --bg: #1f1510;
  --panel: rgba(42, 29, 22, 0.94);
  --panel-2: rgba(58, 42, 32, 0.96);
  --ink: #f3e6d6;
  --muted: #c4ab93;
  --warning: #f2c66d;
  --border: #5c4433;
  --shell-bg: rgba(35, 24, 18, 0.94);
  --admin-bg: rgba(35, 24, 18, 0.98);
  --overlay-bg: rgba(42, 29, 22, 0.98);
  --body-background:
    radial-gradient(circle at 85% 12%, rgba(224, 169, 109, 0.14), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(140, 82, 45, 0.18), transparent 40%),
    #1f1510;
  --body-background-size: auto;
  --control-radius: 8px;
  --font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --material-blur: 6px;
  --shell-radius: 12px;
  --window-radius: 10px;
  --noise-opacity: 0.05;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #e0a96d, #8c522d);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
}

:root[data-interface-theme="coffee"][data-color-scheme="light"] {
  --accent: #8a4f22;
  --accent-rgb: 138, 79, 34;
  --bg: #f6efe4;
  --panel: rgba(255, 250, 243, 0.95);
  --panel-2: #eadfcf;
  --ink: #3b2a20;
  --muted: #6f5848;
  --warning: #8a5a00;
  --border: #cbb59d;
  --shell-bg: rgba(255, 250, 243, 0.94);
  --admin-bg: rgba(255, 250, 243, 0.98);
  --overlay-bg: rgba(246, 239, 228, 0.98);
  --body-background:
    radial-gradient(circle at 85% 12%, rgba(224, 169, 109, 0.22), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(138, 79, 34, 0.1), transparent 40%),
    #f6efe4;
  --scrollbar-thumb-background: linear-gradient(180deg, #c27c3e, #8a4f22);
}

:root[data-interface-theme="matrix"] {
  --accent: #00ff41;
  --accent-rgb: 0, 255, 65;
  --bg: #000a02;
  --panel: rgba(0, 18, 5, 0.9);
  --panel-2: rgba(0, 30, 8, 0.93);
  --ink: #c8ffd4;
  --muted: #6fdc8a;
  --warning: #d8ff4a;
  --border: rgba(0, 255, 65, 0.32);
  --shell-bg: rgba(0, 10, 2, 0.88);
  --admin-bg: rgba(0, 10, 2, 0.96);
  --overlay-bg: rgba(0, 14, 3, 0.97);
  --shadow: 0 0 42px rgba(0, 255, 65, 0.1);
  --body-background:
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.05) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, rgba(0, 255, 65, 0.1), transparent 30%),
    #000a02;
  --body-background-size: auto;
  --control-radius: 0;
  --font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  --material-blur: 6px;
  --shell-radius: 0;
  --window-radius: 0;
  --noise-opacity: 0.03;
  --scanline-opacity: 0.06;
  --scrollbar-thumb-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
}

:root[data-interface-theme="matrix"][data-color-scheme="light"] {
  --accent: #008f2a;
  --accent-rgb: 0, 143, 42;
  --bg: #e9f7ec;
  --panel: rgba(246, 253, 247, 0.94);
  --panel-2: #d8efdd;
  --ink: #06331a;
  --muted: #2f6040;
  --warning: #6a6a00;
  --border: #93c9a2;
  --shell-bg: rgba(246, 253, 247, 0.93);
  --admin-bg: rgba(246, 253, 247, 0.98);
  --overlay-bg: rgba(233, 247, 236, 0.98);
  --shadow: 0 0 42px rgba(0, 143, 42, 0.08);
  --body-background:
    repeating-linear-gradient(90deg, rgba(0, 143, 42, 0.06) 0 1px, transparent 1px 23px),
    #e9f7ec;
  --scanline-opacity: 0.02;
  --scrollbar-thumb-shadow: none;
}

:root[data-interface-theme="sunset"] {
  --accent: #ffa36c;
  --accent-rgb: 255, 163, 108;
  --bg: #1d0f24;
  --panel: rgba(43, 20, 48, 0.9);
  --panel-2: rgba(62, 27, 60, 0.93);
  --ink: #fff1e6;
  --muted: #e6bdb3;
  --warning: #ffd36e;
  --border: rgba(255, 140, 105, 0.38);
  --shell-bg: rgba(33, 15, 38, 0.88);
  --admin-bg: rgba(33, 15, 38, 0.96);
  --overlay-bg: rgba(40, 18, 44, 0.97);
  --body-background:
    radial-gradient(ellipse at 50% 108%, rgba(255, 163, 108, 0.42), transparent 45%),
    linear-gradient(180deg, #1d0f24 0%, #351338 48%, #682140 80%, #9c3a3a 100%);
  --body-background-size: auto;
  --control-radius: 10px;
  --font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --material-blur: 12px;
  --shell-radius: 14px;
  --window-radius: 12px;
  --noise-opacity: 0.03;
  --scanline-opacity: 0;
  --scrollbar-thumb-background: linear-gradient(180deg, #ffa36c, #ff5f8f);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
}

:root[data-interface-theme="sunset"][data-color-scheme="light"] {
  --accent: #c4441c;
  --accent-rgb: 196, 68, 28;
  --bg: #fff1e6;
  --panel: rgba(255, 250, 245, 0.92);
  --panel-2: #ffe3d1;
  --ink: #3a1630;
  --muted: #74465a;
  --warning: #8a4a00;
  --border: #f0b79c;
  --shell-bg: rgba(255, 248, 242, 0.9);
  --admin-bg: rgba(255, 248, 242, 0.97);
  --overlay-bg: rgba(255, 241, 230, 0.98);
  --body-background:
    radial-gradient(ellipse at 50% 108%, rgba(255, 140, 90, 0.35), transparent 50%),
    linear-gradient(180deg, #ffe0cc 0%, #fff1e6 45%, #ffd9e2 100%);
  --scrollbar-thumb-background: linear-gradient(180deg, #e8703a, #c4441c);
}

/* Light modes of the original themes use deeper accents so links and buttons stay readable on pale panels. */
:root[data-interface-theme="aurora"][data-color-scheme="light"] {
  --accent: #0f8a7c;
  --accent-rgb: 15, 138, 124;
}

:root[data-interface-theme="cozy-blossom"][data-color-scheme="light"] {
  --accent: #c2416b;
  --accent-rgb: 194, 65, 107;
}

:root[data-interface-theme="mica"][data-color-scheme="light"] {
  --accent: #0a5fc2;
  --accent-rgb: 10, 95, 194;
}

:root[data-interface-theme="fluent"][data-color-scheme="light"] {
  --accent: #0067c0;
  --accent-rgb: 0, 103, 192;
}

:root[data-interface-theme="midnight-oled"][data-color-scheme="light"] {
  --accent: #111111;
  --accent-rgb: 17, 17, 17;
}

:root[data-interface-theme="macos"][data-color-scheme="light"] {
  --accent: #0066cc;
  --accent-rgb: 0, 102, 204;
}

:root[data-interface-theme="terminal"][data-color-scheme="light"] {
  --accent: #0a7a35;
  --accent-rgb: 10, 122, 53;
}

:root[data-interface-theme="vaporwave"][data-color-scheme="light"] {
  --accent: #b0179a;
  --accent-rgb: 176, 23, 154;
}

:root[data-interface-theme="amber-crt"][data-color-scheme="light"] {
  --accent: #9a5a00;
  --accent-rgb: 154, 90, 0;
}

:root[data-interface-theme="y2k-silver"][data-color-scheme="light"] {
  --accent: #2c5f9e;
  --accent-rgb: 44, 95, 158;
}

:root[data-interface-theme="cyberpunk"][data-color-scheme="light"] {
  --accent: #b0006e;
  --accent-rgb: 176, 0, 110;
}

:root[data-interface-theme="dos-blue"][data-color-scheme="light"] {
  --accent: #000080;
  --accent-rgb: 0, 0, 128;
}

:root[data-interface-theme="solarized"][data-color-scheme="light"] {
  --accent: #1d6fa8;
  --accent-rgb: 29, 111, 168;
}

:root[data-interface-theme="nord"][data-color-scheme="light"] {
  --accent: #4c6f99;
  --accent-rgb: 76, 111, 153;
}

:root[data-interface-theme="dracula"][data-color-scheme="light"] {
  --accent: #7c4dcc;
  --accent-rgb: 124, 77, 204;
}

:root[data-interface-theme="candy-pop"][data-color-scheme="light"] {
  --accent: #c42a7a;
  --accent-rgb: 196, 42, 122;
}

/* Light modes for themes that previously only shipped dark. */
:root[data-interface-theme="rgb"][data-color-scheme="light"] {
  --bg: #f7f4ff;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-2: rgba(241, 236, 255, 0.95);
  --ink: #1d1530;
  --muted: #5d5275;
  --border: rgba(var(--accent-rgb), 0.45);
  --shell-bg: rgba(255, 255, 255, 0.9);
  --admin-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(250, 248, 255, 0.98);
  --body-background:
    radial-gradient(circle at 15% 10%, var(--rgb-glow-0, rgba(255, 109, 122, 0.16)), transparent 35%),
    radial-gradient(circle at 85% 20%, var(--rgb-glow-1, rgba(90, 160, 255, 0.16)), transparent 35%),
    radial-gradient(circle at 50% 100%, var(--rgb-glow-2, rgba(80, 220, 140, 0.14)), transparent 40%),
    #f7f4ff;
}

:root[data-interface-theme="aero-glass"][data-color-scheme="light"] {
  --bg: #cfe8fb;
  --panel: rgba(255, 255, 255, 0.62);
  --panel-2: rgba(240, 249, 255, 0.72);
  --ink: #0b2a45;
  --muted: #35556f;
  --border: rgba(255, 255, 255, 0.85);
  --shell-bg: rgba(255, 255, 255, 0.55);
  --admin-bg: rgba(255, 255, 255, 0.8);
  --overlay-bg: rgba(240, 249, 255, 0.92);
  --accent: #0a6cc2;
  --accent-rgb: 10, 108, 194;
  --body-background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.9), transparent 45%),
    radial-gradient(ellipse at 90% 100%, rgba(120, 220, 160, 0.35), transparent 45%),
    linear-gradient(160deg, #9fd3fa 0%, #cfe8fb 50%, #a8e0c8 100%);
}

:root[data-interface-theme="minebits"][data-color-scheme="light"] {
  --accent: #3f7a1f;
  --accent-rgb: 63, 122, 31;
  --bg: #b8dcf0;
  --panel: #c6c6c6;
  --panel-2: #b7a080;
  --panel-strong: #a8a8a8;
  --ink: #1f1a10;
  --muted: #3e3628;
  --warning: #8a5a00;
  --border: #555;
  --shadow: 8px 8px 0 rgba(40, 40, 40, 0.35);
  --shell-bg: #c6c6c6;
  --admin-bg: #cdcdcd;
  --overlay-bg: #cfcfcf;
  --icon-filter: brightness(0) sepia(0.2);
  --body-background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(40, 30, 20, 0.12) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(40, 30, 20, 0.12) 31px 32px),
    linear-gradient(
      180deg,
      #8fcdf0 0 22%,
      #7fc44c 22% 25%,
      #8a6a45 25% 62%,
      #8d8d8d 62% 86%,
      #6d6d6d 86%
    );
}

/* Seasonal themes get matching daylight variants. */
:root[data-interface-theme="winter"][data-color-scheme="light"] {
  --accent: #0b7fa8;
  --accent-rgb: 11, 127, 168;
  --bg: #eaf7ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-2: rgba(226, 243, 252, 0.94);
  --ink: #0c2a3a;
  --muted: #4a6878;
  --border: rgba(80, 160, 200, 0.4);
  --shell-bg: rgba(255, 255, 255, 0.86);
  --admin-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(240, 249, 255, 0.97);
  --body-background:
    radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    linear-gradient(180deg, #d5eefb 0%, #eaf7ff 60%, #ffffff 100%);
}

:root[data-interface-theme="spooky"][data-color-scheme="light"] {
  --accent: #b34700;
  --accent-rgb: 179, 71, 0;
  --bg: #fff0dc;
  --panel: rgba(255, 249, 240, 0.94);
  --panel-2: rgba(255, 232, 204, 0.96);
  --ink: #2a1530;
  --muted: #6a4a5a;
  --border: rgba(179, 71, 0, 0.35);
  --shell-bg: rgba(255, 247, 236, 0.92);
  --admin-bg: rgba(255, 247, 236, 0.97);
  --overlay-bg: rgba(255, 240, 220, 0.98);
  --body-background:
    radial-gradient(circle at 85% 10%, rgba(255, 166, 0, 0.25), transparent 30%),
    radial-gradient(circle at 10% 95%, rgba(120, 60, 160, 0.12), transparent 40%),
    #fff0dc;
}

:root[data-interface-theme="christmas"][data-color-scheme="light"] {
  --accent: #b3122e;
  --accent-rgb: 179, 18, 46;
  --bg: #fff7e8;
  --panel: rgba(255, 252, 245, 0.95);
  --panel-2: rgba(240, 248, 238, 0.96);
  --ink: #12301f;
  --muted: #4a5f50;
  --border: rgba(30, 110, 60, 0.35);
  --shell-bg: rgba(255, 252, 245, 0.93);
  --admin-bg: rgba(255, 252, 245, 0.98);
  --overlay-bg: rgba(255, 247, 232, 0.98);
  --body-background:
    radial-gradient(circle at 15% 10%, rgba(179, 18, 46, 0.1), transparent 30%),
    radial-gradient(circle at 85% 90%, rgba(30, 110, 60, 0.12), transparent 35%),
    #fff7e8;
}

:root[data-interface-theme="new-year"][data-color-scheme="light"] {
  --accent: #9a6b00;
  --accent-rgb: 154, 107, 0;
  --bg: #fff8dc;
  --panel: rgba(255, 253, 244, 0.95);
  --panel-2: rgba(250, 240, 205, 0.96);
  --ink: #1c1a33;
  --muted: #5a5670;
  --border: rgba(154, 107, 0, 0.35);
  --shell-bg: rgba(255, 253, 244, 0.93);
  --admin-bg: rgba(255, 253, 244, 0.98);
  --overlay-bg: rgba(255, 248, 220, 0.98);
  --body-background:
    radial-gradient(circle at 20% 15%, rgba(255, 210, 90, 0.3), transparent 25%),
    radial-gradient(circle at 80% 25%, rgba(140, 120, 255, 0.14), transparent 30%),
    #fff8dc;
}

:root:is(
  [data-interface-theme="valentines"],
  [data-interface-theme="st-patricks"],
  [data-interface-theme="easter"],
  [data-interface-theme="earth-day"],
  [data-interface-theme="independence-day"],
  [data-interface-theme="thanksgiving"]
)[data-color-scheme="light"] {
  --panel: color-mix(in srgb, var(--bg) 55%, white);
  --panel-2: color-mix(in srgb, var(--bg) 94%, var(--accent));
  --ink: #282638;
  --muted: #625e69;
  --shell-bg: var(--panel);
  --admin-bg: var(--panel);
  --overlay-bg: var(--bg);
}

:root[data-interface-theme="valentines"][data-color-scheme="light"] {
  --accent: #b51f4c;
  --accent-rgb: 181, 31, 76;
  --warning: #a33a28;
  --bg: #fff3ee;
}

:root[data-interface-theme="st-patricks"][data-color-scheme="light"] {
  --accent: #14633a;
  --accent-rgb: 20, 99, 58;
  --warning: #856000;
  --bg: #f5f8e9;
}

:root[data-interface-theme="easter"][data-color-scheme="light"] {
  --accent: #7040a5;
  --accent-rgb: 112, 64, 165;
  --warning: #477157;
  --bg: #fbf5ff;
}

:root[data-interface-theme="earth-day"][data-color-scheme="light"] {
  --accent: #16643e;
  --accent-rgb: 22, 100, 62;
  --warning: #175fa0;
  --bg: #eef8ee;
}

:root[data-interface-theme="independence-day"][data-color-scheme="light"] {
  --accent: #164da8;
  --accent-rgb: 22, 77, 168;
  --warning: #b3233b;
  --bg: #f5f7ff;
  --shell-bg: rgba(245, 247, 255, 0.72);
}

:root[data-interface-theme="thanksgiving"][data-color-scheme="light"] {
  --accent: #a04414;
  --accent-rgb: 160, 68, 20;
  --warning: #795400;
  --bg: #fff5e7;
}

:root {
  --scrollbar-size: 12px;
  --scrollbar-firefox-width: thin;
  --scrollbar-track: var(--panel);
  --scrollbar-track-border: var(--border);
  --scrollbar-thumb-color: rgba(var(--accent-rgb), 0.72);
  --scrollbar-thumb-background: rgba(var(--accent-rgb), 0.72);
  --scrollbar-thumb-hover: var(--accent);
  --scrollbar-thumb-active: var(--ink);
  --scrollbar-thumb-border: 3px solid var(--panel);
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: none;
  --scrollbar-thumb-min: 34px;
}

:root[data-interface-theme="aurora"] {
  --scrollbar-size: 10px;
  --scrollbar-track: var(--panel);
  --scrollbar-track-border: var(--border);
  --scrollbar-thumb-color: rgba(var(--accent-rgb), 0.8);
  --scrollbar-thumb-background: linear-gradient(180deg, var(--accent), #8e7dff);
  --scrollbar-thumb-hover: linear-gradient(180deg, #8e7dff, var(--accent));
  --scrollbar-thumb-active: var(--accent);
  --scrollbar-thumb-border: 2px solid var(--panel);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: 0 0 9px rgba(var(--accent-rgb), 0.28);
}

:root[data-interface-theme="cozy-blossom"] {
  --scrollbar-size: 14px;
  --scrollbar-track: var(--panel-2);
  --scrollbar-track-border: var(--border);
  --scrollbar-thumb-color: rgba(var(--accent-rgb), 0.78);
  --scrollbar-thumb-background: linear-gradient(180deg, var(--accent), #ffc58f);
  --scrollbar-thumb-hover: linear-gradient(180deg, #ffc58f, var(--accent));
  --scrollbar-thumb-active: var(--accent);
  --scrollbar-thumb-border: 3px solid var(--panel);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

:root[data-interface-theme="mica"] {
  --scrollbar-size: 13px;
  --scrollbar-track: var(--panel);
  --scrollbar-track-border: var(--border);
  --scrollbar-thumb-color: rgba(var(--accent-rgb), 0.68);
  --scrollbar-thumb-background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.58), var(--accent));
  --scrollbar-thumb-hover: var(--accent);
  --scrollbar-thumb-active: var(--ink);
  --scrollbar-thumb-border: 3px solid var(--panel);
  --scrollbar-thumb-radius: 6px;
  --scrollbar-track-radius: 6px;
  --scrollbar-thumb-shadow: inset 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-interface-theme="fluent"] {
  --scrollbar-size: 12px;
  --scrollbar-track: var(--panel-2);
  --scrollbar-track-border: var(--border);
  --scrollbar-thumb-color: var(--accent);
  --scrollbar-thumb-background: var(--accent);
  --scrollbar-thumb-hover: var(--ink);
  --scrollbar-thumb-active: var(--warning);
  --scrollbar-thumb-border: 2px solid var(--panel-2);
  --scrollbar-thumb-radius: 2px;
  --scrollbar-track-radius: 2px;
  --scrollbar-thumb-shadow: inset 3px 0 rgba(255, 255, 255, 0.18);
}

:root[data-interface-theme="midnight-oled"] {
  --scrollbar-size: 8px;
  --scrollbar-track: #000;
  --scrollbar-track-border: rgba(var(--accent-rgb), 0.2);
  --scrollbar-thumb-color: var(--accent);
  --scrollbar-thumb-background: var(--accent);
  --scrollbar-thumb-hover: var(--ink);
  --scrollbar-thumb-active: var(--warning);
  --scrollbar-thumb-border: 1px solid #000;
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: 0 0 8px rgba(var(--accent-rgb), 0.72);
}

:root[data-interface-theme="macos"] {
  --scrollbar-size: 11px;
  --scrollbar-track: transparent;
  --scrollbar-track-border: transparent;
  --scrollbar-thumb-color: rgba(var(--accent-rgb), 0.62);
  --scrollbar-thumb-background: rgba(var(--accent-rgb), 0.62);
  --scrollbar-thumb-hover: var(--accent);
  --scrollbar-thumb-active: var(--ink);
  --scrollbar-thumb-border: 3px solid transparent;
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

:root[data-interface-theme="terminal"] {
  --scrollbar-size: 20px;
  --scrollbar-firefox-width: auto;
  --scrollbar-track: var(--bg);
  --scrollbar-track-border: var(--accent);
  --scrollbar-thumb-color: var(--accent);
  --scrollbar-thumb-background:
    repeating-linear-gradient(
      90deg,
      var(--accent) 0 4px,
      rgba(var(--accent-rgb), 0.62) 4px 7px
    );
  --scrollbar-thumb-hover: var(--ink);
  --scrollbar-thumb-active: var(--warning);
  --scrollbar-thumb-border: 3px solid var(--bg);
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset 0 0 0 2px var(--accent);
  --scrollbar-thumb-min: 44px;
}

:root[data-interface-theme="vaporwave"] {
  --scrollbar-size: 14px;
  --scrollbar-track: #190d31;
  --scrollbar-track-border: #4ae1ff;
  --scrollbar-thumb-color: #ff60e2;
  --scrollbar-thumb-background: linear-gradient(180deg, #ff60e2, #4ae1ff);
  --scrollbar-thumb-hover: linear-gradient(180deg, #4ae1ff, #ff60e2);
  --scrollbar-thumb-active: #fff;
  --scrollbar-thumb-border: 2px solid #190d31;
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: 0 0 8px rgba(255, 96, 226, 0.52);
}

:root[data-interface-theme="amber-crt"] {
  --scrollbar-size: 18px;
  --scrollbar-firefox-width: auto;
  --scrollbar-track: var(--bg);
  --scrollbar-track-border: #ffb237;
  --scrollbar-thumb-color: #ffb237;
  --scrollbar-thumb-background: repeating-linear-gradient(0deg, #ffb237 0 5px, #c47b18 5px 7px);
  --scrollbar-thumb-hover: #ffd37a;
  --scrollbar-thumb-active: #fff1c7;
  --scrollbar-thumb-border: 3px solid var(--bg);
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset 0 0 0 1px #ffb237;
  --scrollbar-thumb-min: 42px;
}

:root[data-interface-theme="y2k-silver"] {
  --scrollbar-size: 16px;
  --scrollbar-track: var(--panel-2);
  --scrollbar-track-border: #8b99aa;
  --scrollbar-thumb-color: #c9d6e5;
  --scrollbar-thumb-background: linear-gradient(90deg, #7f8b99, #f7fbff 48%, #8492a5);
  --scrollbar-thumb-hover: linear-gradient(90deg, #9acfff, #fff, #8fb9de);
  --scrollbar-thumb-active: #fff;
  --scrollbar-thumb-border: 2px solid #53606f;
  --scrollbar-thumb-radius: 8px;
  --scrollbar-track-radius: 8px;
  --scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

:root[data-interface-theme="cyberpunk"] {
  --scrollbar-size: 13px;
  --scrollbar-track: #080712;
  --scrollbar-track-border: #ff2d9d;
  --scrollbar-thumb-color: #f5f336;
  --scrollbar-thumb-background: linear-gradient(180deg, #f5f336 0 65%, #ff2d9d 65%);
  --scrollbar-thumb-hover: linear-gradient(180deg, #8eeaf0 0 65%, #ff2d9d 65%);
  --scrollbar-thumb-active: #fff;
  --scrollbar-thumb-border: 1px solid #080712;
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: 3px 0 #8eeaf0;
}

:root[data-interface-theme="dos-blue"] {
  --scrollbar-size: 18px;
  --scrollbar-firefox-width: auto;
  --scrollbar-track: #000080;
  --scrollbar-track-border: #fff;
  --scrollbar-thumb-color: #fff;
  --scrollbar-thumb-background: #aaa;
  --scrollbar-thumb-hover: #fff;
  --scrollbar-thumb-active: #55ffff;
  --scrollbar-thumb-border: 2px solid #fff;
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset -3px -3px #555, inset 3px 3px #fff;
  --scrollbar-thumb-min: 42px;
}

:root[data-interface-theme="windows-95"] {
  --scrollbar-size: 17px;
  --scrollbar-firefox-width: auto;
  --scrollbar-track: var(--w95-face);
  --scrollbar-track-border: var(--w95-dark);
  --scrollbar-thumb-color: var(--w95-shadow);
  --scrollbar-thumb-background: var(--w95-face);
  --scrollbar-thumb-hover: var(--w95-panel);
  --scrollbar-thumb-active: var(--w95-hi);
  --scrollbar-thumb-border: 2px solid var(--w95-shadow);
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset -2px -2px var(--w95-dark), inset 2px 2px var(--w95-hi);
  --scrollbar-thumb-min: 40px;
}

:root[data-interface-theme="minebits"] {
  --scrollbar-size: 18px;
  --scrollbar-firefox-width: auto;
  --scrollbar-track: #272a27;
  --scrollbar-track-border: #121512;
  --scrollbar-thumb-color: #74796f;
  --scrollbar-thumb-background:
    repeating-linear-gradient(
      135deg,
      #7e8378 0 6px,
      #676c63 6px 12px
    );
  --scrollbar-thumb-hover:
    repeating-linear-gradient(
      135deg,
      #8ac653 0 6px,
      #6da23e 6px 12px
    );
  --scrollbar-thumb-active: #a5d76e;
  --scrollbar-thumb-border: 3px solid #20231f;
  --scrollbar-thumb-radius: 0;
  --scrollbar-track-radius: 0;
  --scrollbar-thumb-shadow: inset 2px 2px rgba(255, 255, 255, 0.16), inset -2px -2px rgba(0, 0, 0, 0.38);
  --scrollbar-thumb-min: 42px;
}

:root[data-interface-theme="solarized"] {
  --scrollbar-size: 12px;
  --scrollbar-track: var(--panel);
  --scrollbar-track-border: #586e75;
  --scrollbar-thumb-color: #268bd2;
  --scrollbar-thumb-background: linear-gradient(180deg, #268bd2, #2aa198);
  --scrollbar-thumb-hover: #b58900;
  --scrollbar-thumb-active: #dc322f;
  --scrollbar-thumb-border: 2px solid var(--panel);
  --scrollbar-thumb-radius: 4px;
  --scrollbar-track-radius: 4px;
  --scrollbar-thumb-shadow: none;
}

:root[data-interface-theme="nord"] {
  --scrollbar-size: 10px;
  --scrollbar-track: var(--panel);
  --scrollbar-track-border: #4c566a;
  --scrollbar-thumb-color: #88c0d0;
  --scrollbar-thumb-background: linear-gradient(180deg, #88c0d0, #5e81ac);
  --scrollbar-thumb-hover: #8fbcbb;
  --scrollbar-thumb-active: #eceff4;
  --scrollbar-thumb-border: 2px solid var(--panel);
  --scrollbar-thumb-radius: 6px;
  --scrollbar-track-radius: 6px;
  --scrollbar-thumb-shadow: none;
}

:root[data-interface-theme="dracula"] {
  --scrollbar-size: 12px;
  --scrollbar-track: #282a36;
  --scrollbar-track-border: #6272a4;
  --scrollbar-thumb-color: #bd93f9;
  --scrollbar-thumb-background: linear-gradient(180deg, #bd93f9, #ff79c6);
  --scrollbar-thumb-hover: linear-gradient(180deg, #ff79c6, #bd93f9);
  --scrollbar-thumb-active: #f8f8f2;
  --scrollbar-thumb-border: 2px solid #282a36;
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: 0 0 7px rgba(189, 147, 249, 0.38);
}

:root[data-interface-theme="candy-pop"] {
  --scrollbar-size: 16px;
  --scrollbar-track: var(--panel-2);
  --scrollbar-track-border: #efafd2;
  --scrollbar-thumb-color: #ff75b7;
  --scrollbar-thumb-background: linear-gradient(180deg, #ff75b7, #ffdc6f, #6de1ff);
  --scrollbar-thumb-hover: linear-gradient(180deg, #6de1ff, #ff75b7);
  --scrollbar-thumb-active: #fff;
  --scrollbar-thumb-border: 3px solid var(--panel);
  --scrollbar-thumb-radius: 999px;
  --scrollbar-track-radius: 999px;
  --scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track);
  scrollbar-width: var(--scrollbar-firefox-width);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  border: 1px solid var(--scrollbar-track-border);
  border-radius: var(--scrollbar-track-radius);
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-width: var(--scrollbar-thumb-min);
  min-height: var(--scrollbar-thumb-min);
  border: var(--scrollbar-thumb-border);
  border-radius: var(--scrollbar-thumb-radius);
  background: var(--scrollbar-thumb-background);
  box-shadow: var(--scrollbar-thumb-shadow);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-button {
  display: none;
}

html[data-interface-theme="terminal"] *::-webkit-scrollbar-button:single-button {
  display: block;
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  border: 3px solid var(--bg);
  background: var(--accent);
}

*::-webkit-scrollbar-corner {
  border: 1px solid var(--scrollbar-track-border);
  background: var(--scrollbar-track);
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }

  *::-webkit-scrollbar,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-corner {
    forced-color-adjust: auto;
  }
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  display: flow-root;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--body-background);
  background-size: var(--body-background-size);
  font-family: var(--font-family);
  line-height: 1.5;
}

html[data-interface-theme="aurora"]:not([data-effects="off"]):not([data-contrast="high"]) body {
  background-color: var(--bg);
  background-repeat: no-repeat;
  animation: aurora-background-drift 22s ease-in-out infinite alternate;
}

@keyframes aurora-background-drift {
  from {
    background-position: 0% 0%, 100% 0%, 50% 100%, center;
  }

  to {
    background-position: 9% 11%, 91% 16%, 43% 90%, center;
  }
}

body.is-shutdown,
body.is-red-screen,
body.is-kernel-panic,
body.is-black-screen,
body.is-green-screen,
body.is-virus-screen,
body.is-black-screen-staging {
  overflow: hidden;
}

button,
a,
input,
textarea {
  border-radius: var(--control-radius);
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.name-field {
  position: fixed;
  z-index: 0;
  inset: -6vh -5vw;
  background: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='576' height='56' viewBox='0 0 576 56'%3E%3Cg fill='%23fff' font-family='monospace' font-size='12' font-weight='700' letter-spacing='1'%3E%3Ctext x='0' y='12' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='26' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='40' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='54' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='576' height='56' viewBox='0 0 576 56'%3E%3Cg fill='%23fff' font-family='monospace' font-size='12' font-weight='700' letter-spacing='1'%3E%3Ctext x='0' y='12' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='26' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='40' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3Ctext x='0' y='54' textLength='576' lengthAdjust='spacingAndGlyphs'%3EBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITSOFBITS%3C/text%3E%3C/g%3E%3C/svg%3E");
  mask-repeat: repeat;
  opacity: var(--name-field-opacity);
  pointer-events: none;
  user-select: none;
  animation: drift-name-field 120s ease-in-out infinite alternate;
  contain: strict;
}

.theme-atmosphere {
  --atmosphere-x: 50%;
  --atmosphere-y: 20%;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.theme-atmosphere[hidden] {
  display: none;
}

.theme-atmosphere::before,
.theme-atmosphere::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.theme-particle {
  position: absolute;
  top: var(--particle-y);
  left: var(--particle-x);
  display: block;
  width: var(--particle-size);
  height: var(--particle-size);
  pointer-events: none;
}

.theme-atmosphere[data-theme="default"]::before {
  inset: 0;
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(var(--accent-rgb), 0.24) 50%, transparent 50.4%),
    linear-gradient(transparent 49.6%, rgba(var(--accent-rgb), 0.2) 50%, transparent 50.4%);
  background-size: 160px 160px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
  animation: atmosphere-circuit-shift 18s linear infinite;
}

.theme-atmosphere[data-theme="default"] .theme-particle {
  border: 1px solid rgba(var(--accent-rgb), 0.7);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
  animation: atmosphere-node-pulse var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="aurora"]::before,
.theme-atmosphere[data-theme="aurora"]::after {
  inset: -35% -15%;
  filter: blur(55px);
  opacity: 0.42;
  transform-origin: center;
}

.theme-atmosphere[data-theme="aurora"] {
  inset: -96px;
}

.theme-atmosphere[data-theme="aurora"]::before {
  background:
    conic-gradient(
      from 120deg at 42% 48%,
      transparent 0 22%,
      rgba(92, 255, 205, 0.56) 30%,
      rgba(73, 167, 255, 0.42) 43%,
      transparent 54% 100%
    );
  animation: atmosphere-aurora-drift 15s ease-in-out infinite alternate;
}

.theme-atmosphere[data-theme="aurora"]::after {
  background:
    conic-gradient(
      from 280deg at 60% 46%,
      transparent 0 30%,
      rgba(159, 108, 255, 0.52) 38%,
      rgba(62, 239, 219, 0.34) 52%,
      transparent 62% 100%
    );
  animation: atmosphere-aurora-drift 20s ease-in-out -7s infinite alternate-reverse;
}

.theme-atmosphere[data-theme="cozy-blossom"]::before {
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 185, 201, 0.12), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(255, 215, 162, 0.1), transparent 32%);
}

.theme-atmosphere[data-theme="cozy-blossom"] .theme-particle {
  border-radius: 70% 20% 70% 30%;
  background: rgba(255, 184, 203, 0.58);
  box-shadow: 0 0 8px rgba(255, 184, 203, 0.18);
  animation: atmosphere-petal-fall var(--particle-duration) linear infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="mica"]::before {
  width: 54vmax;
  height: 54vmax;
  top: var(--atmosphere-y);
  left: var(--atmosphere-x);
  border-radius: 50%;
  opacity: 0.2;
  background: radial-gradient(
    circle,
    rgba(var(--accent-rgb), 0.42),
    rgba(120, 150, 190, 0.14) 38%,
    transparent 68%
  );
  filter: blur(16px);
  transform: translate(-50%, -50%);
  transition: top 600ms ease, left 600ms ease;
}

.theme-atmosphere[data-theme="mica"]::after {
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 35%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.018) 19px 20px);
}

.theme-atmosphere[data-theme="fluent"]::before {
  inset: -70% -30%;
  opacity: 0.3;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(0, 120, 212, 0.1) 46%,
    rgba(var(--accent-rgb), 0.3) 50%,
    rgba(255, 255, 255, 0.08) 54%,
    transparent 62%
  );
  animation: atmosphere-fluent-reveal 10s ease-in-out infinite;
}

.theme-atmosphere[data-theme="fluent"] .theme-particle {
  width: calc(var(--particle-size) * 7);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
  animation: atmosphere-fluent-line var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="midnight-oled"] .theme-particle {
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.72);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.65);
  animation: atmosphere-star-twinkle var(--particle-duration) steps(3) infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="macos"]::before,
.theme-atmosphere[data-theme="macos"]::after {
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
}

.theme-atmosphere[data-theme="macos"]::before {
  top: -25vmax;
  left: -12vmax;
  background: linear-gradient(135deg, #0a84ff, #bf5af2 55%, transparent 75%);
  animation: atmosphere-orb-float 16s ease-in-out infinite alternate;
}

.theme-atmosphere[data-theme="macos"]::after {
  right: -18vmax;
  bottom: -30vmax;
  background: linear-gradient(135deg, transparent 10%, #ff9f0a 38%, #ff375f 68%, #64d2ff);
  animation: atmosphere-orb-float 19s ease-in-out -8s infinite alternate-reverse;
}

.theme-atmosphere[data-theme="terminal"]::before {
  inset: 0;
  opacity: 0.18;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(var(--accent-rgb), 0.08) 40px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(var(--accent-rgb), 0.07) 24px);
}

.theme-atmosphere[data-theme="terminal"]::after {
  right: 0;
  left: 0;
  height: 16vh;
  background: linear-gradient(
    transparent,
    rgba(var(--accent-rgb), 0.03),
    rgba(var(--accent-rgb), 0.2),
    transparent
  );
  filter: blur(5px);
  animation: atmosphere-terminal-scan 7s linear infinite;
}

.theme-atmosphere[data-theme="terminal"] .theme-particle {
  width: 2px;
  height: 2px;
  background: var(--accent);
  opacity: 0.32;
  animation: atmosphere-terminal-flicker var(--particle-duration) steps(2) infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="minebits"] .theme-particle {
  border: 1px solid rgba(18, 24, 17, 0.72);
  background: #7fbd45;
  box-shadow:
    inset 2px 2px rgba(255, 255, 255, 0.18),
    inset -2px -2px rgba(0, 0, 0, 0.34);
  animation: atmosphere-minebits-fall var(--particle-duration) steps(12) infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="minebits"] .theme-particle:nth-child(3n + 2) {
  background: #725039;
}

.theme-atmosphere[data-theme="minebits"] .theme-particle:nth-child(3n) {
  background: #777c73;
}

.theme-atmosphere[data-theme="winter"]::before {
  inset: 0;
  background: linear-gradient(165deg, rgba(174, 235, 255, 0.1), transparent 42%);
}

.theme-atmosphere[data-theme="winter"] .theme-particle {
  border-radius: 50%;
  background: rgba(235, 250, 255, 0.76);
  box-shadow: 0 0 8px rgba(174, 235, 255, 0.5);
  animation: atmosphere-petal-fall var(--particle-duration) linear infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="spooky"]::before {
  top: 7vh;
  right: 8vw;
  width: min(22vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 159, 67, 0.13);
  box-shadow: 0 0 60px rgba(255, 128, 32, 0.15);
}

.theme-atmosphere[data-theme="spooky"] .theme-particle {
  border: 1px solid rgba(184, 255, 101, 0.58);
  border-radius: 50% 50% 35% 35%;
  background: rgba(255, 159, 67, 0.18);
  animation: atmosphere-orb-float var(--particle-duration) ease-in-out infinite alternate;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="christmas"] .theme-particle {
  border-radius: 50%;
  background: #e94343;
  box-shadow: 0 0 10px rgba(233, 67, 67, 0.56);
  animation: atmosphere-node-pulse var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="christmas"] .theme-particle:nth-child(3n + 2) {
  background: #ffcf5a;
  box-shadow: 0 0 10px rgba(255, 207, 90, 0.58);
}

.theme-atmosphere[data-theme="christmas"] .theme-particle:nth-child(3n) {
  background: #65d98a;
  box-shadow: 0 0 10px rgba(101, 217, 138, 0.52);
}

.theme-atmosphere[data-theme="new-year"] .theme-particle {
  background: #f8d878;
  box-shadow: 0 0 12px rgba(248, 216, 120, 0.64);
  transform: rotate(45deg);
  animation: atmosphere-star-twinkle var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="new-year"] .theme-particle:nth-child(even) {
  border-radius: 50%;
  background: #a9e7ff;
  box-shadow: 0 0 12px rgba(169, 231, 255, 0.56);
}

.theme-atmosphere:is([data-theme="valentines"], [data-theme="easter"], [data-theme="thanksgiving"]) .theme-particle {
  border-radius: 70% 20% 70% 30%;
  background: var(--accent);
  opacity: 0.4;
  animation: atmosphere-petal-fall var(--particle-duration) linear infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="valentines"] .theme-particle:nth-child(even) {
  background: #ee526b;
}

.theme-atmosphere[data-theme="easter"] .theme-particle {
  border-radius: 50% 50% 45% 45%;
  height: calc(var(--particle-size) * 1.4);
}

.theme-atmosphere[data-theme="easter"] .theme-particle:nth-child(3n + 1) {
  background: #9de6c3;
}

.theme-atmosphere[data-theme="easter"] .theme-particle:nth-child(3n + 2) {
  background: #f6e79e;
}

.theme-atmosphere[data-theme="thanksgiving"] .theme-particle:nth-child(even) {
  background: var(--warning);
}

.theme-atmosphere:is([data-theme="st-patricks"], [data-theme="earth-day"]) .theme-particle {
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: atmosphere-node-pulse var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere:is([data-theme="st-patricks"], [data-theme="earth-day"]) .theme-particle:nth-child(even) {
  background: var(--warning);
}

.theme-atmosphere[data-theme="independence-day"] .theme-particle {
  width: auto;
  height: auto;
  color: #9bbdff;
  font: 700 clamp(10px, 1.1vw, 16px)/1 var(--font-family);
  text-shadow: 0 0 6px currentColor;
  opacity: 0;
  animation: atmosphere-bit-firework 8s ease-out infinite;
  animation-delay: var(--particle-delay);
}

.theme-atmosphere[data-theme="independence-day"] .theme-particle:nth-child(3n + 1) {
  color: #ff727e;
}

.theme-atmosphere[data-theme="independence-day"] .theme-particle:nth-child(3n + 2) {
  color: #fff5ee;
}

.theme-atmosphere[data-theme="independence-day"][data-motion="reduced"] .theme-particle,
html.is-performance-lite .theme-atmosphere[data-theme="independence-day"] .theme-particle {
  opacity: 0.2;
  transform: translate(var(--firework-dx), var(--firework-dy));
}

.theme-atmosphere[data-motion="reduced"]::before,
.theme-atmosphere[data-motion="reduced"]::after,
.theme-atmosphere[data-motion="reduced"] .theme-particle,
html.is-performance-lite .theme-atmosphere::before,
html.is-performance-lite .theme-atmosphere::after,
html.is-performance-lite .theme-atmosphere .theme-particle {
  animation: none !important;
}

@keyframes atmosphere-bit-firework {
  0%, 8% { opacity: 0; transform: translate(0, 38vh) scale(0.4); }
  18% { opacity: 0.35; transform: translate(0, 0) scale(0.5); }
  24% { opacity: 0.65; transform: translate(0, 0) scale(0.6); }
  60% { opacity: 0.45; transform: translate(var(--firework-dx), var(--firework-dy)); }
  85%, 100% { opacity: 0; transform: translate(var(--firework-dx), calc(var(--firework-dy) + 9vh)); }
}

@keyframes atmosphere-circuit-shift {
  to { background-position: 160px 80px, 80px 160px; }
}

@keyframes atmosphere-node-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50% { opacity: 0.75; transform: scale(1.25); }
}

@keyframes atmosphere-aurora-drift {
  0% { transform: rotate(-8deg) translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: rotate(12deg) translate3d(4%, 3%, 0) scale(1.12); }
}

@keyframes atmosphere-petal-fall {
  0% { opacity: 0; transform: translate3d(0, -110vh, 0) rotate(0deg); }
  12% { opacity: 0.7; }
  88% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(var(--particle-drift), 110vh, 0) rotate(540deg); }
}

@keyframes atmosphere-minebits-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0);
  }
  12% { opacity: 0.62; }
  88% { opacity: 0.52; }
  100% {
    opacity: 0;
    transform: translate3d(var(--particle-drift), 108vh, 0) rotate(90deg);
  }
}

@keyframes atmosphere-fluent-reveal {
  0%, 18% { transform: translateX(-28%) rotate(-3deg); }
  55%, 75% { transform: translateX(28%) rotate(3deg); }
  100% { transform: translateX(-28%) rotate(-3deg); }
}

@keyframes atmosphere-fluent-line {
  0%, 100% { opacity: 0.08; transform: translateX(-35px); }
  50% { opacity: 0.62; transform: translateX(35px); }
}

@keyframes atmosphere-star-twinkle {
  0%, 100% { opacity: 0.08; transform: scale(0.7); }
  50% { opacity: 0.9; transform: scale(1.35); }
}

@keyframes atmosphere-orb-float {
  from { transform: translate3d(-4%, -2%, 0) scale(0.96); }
  to { transform: translate3d(7%, 6%, 0) scale(1.08); }
}

@keyframes atmosphere-terminal-scan {
  from { top: -20vh; }
  to { top: 110vh; }
}

@keyframes atmosphere-terminal-flicker {
  0%, 90%, 100% { opacity: 0.06; }
  92%, 96% { opacity: 0.65; }
}

.binary-rain {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.falling-bit {
  position: absolute;
  top: -2rem;
  left: var(--bit-x);
  color: var(--accent);
  font-size: var(--bit-size);
  font-weight: 700;
  opacity: 0;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.75);
  animation: fall-bit var(--bit-speed) linear forwards;
}

.falling-bit.is-forbidden {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px dashed rgba(255, 221, 101, 0.4);
  border-radius: 50%;
  color: #ffdd65;
  background: rgba(255, 221, 101, 0.06);
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  opacity: 0.9;
  pointer-events: auto;
  touch-action: manipulation;
  text-shadow: 0 0 12px #ffdd65;
}

.forbidden-bit-dock {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.forbidden-bit-dock:not(:empty) {
  pointer-events: none;
}

.falling-bit.is-forbidden.is-docked {
  position: absolute;
  top: auto;
  bottom: 14px;
  left: var(--bit-x);
  opacity: 0.9;
  pointer-events: auto;
  transform: translateX(-50%);
  animation: docked-bit-arrival 240ms steps(4);
}

.falling-bit.is-forbidden:hover,
.falling-bit.is-forbidden:focus-visible {
  border-style: solid;
  outline: 2px solid rgba(255, 221, 101, 0.7);
  outline-offset: 3px;
  animation-play-state: paused;
}

.falling-bit.is-rgb-bit {
  color: var(--bit-color);
  text-shadow: 0 0 10px rgba(var(--bit-color-rgb), 0.85);
}

/* Windows 95: pixel-ish bits with a hard shadow, falling at a choppy, low frame rate. */
html[data-interface-theme="windows-95"] .falling-bit:not(.is-forbidden) {
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: round(var(--bit-size), 4px);
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  -webkit-font-smoothing: none;
  animation: fall-bit-win95 calc(var(--bit-speed) * 1.4) steps(70, end) forwards;
}

html[data-interface-theme="windows-95"] .falling-bit.is-forbidden {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi), inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-light);
  font-family: "Courier New", Courier, monospace;
  text-shadow: none;
}

html[data-interface-theme="windows-95"] .falling-bit.is-forbidden:hover,
html[data-interface-theme="windows-95"] .falling-bit.is-forbidden:focus-visible {
  outline: 1px dotted var(--w95-dark);
  outline-offset: -5px;
}

@keyframes fall-bit-win95 {
  0% {
    opacity: calc(var(--bit-opacity) * 1.6);
    transform: translateY(-5vh);
  }

  100% {
    opacity: calc(var(--bit-opacity) * 1.6);
    transform: translateY(110vh);
  }
}

.noise,
.scanlines {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

.noise {
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.scanlines {
  opacity: var(--scanline-opacity);
  background: repeating-linear-gradient(0deg, #000 0, #000 1px, transparent 1px, transparent 4px);
}

.is-colorful-text {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #ff6d7a,
    #ff9b62,
    #ffcc66,
    #66ff9a,
    #63d8ff,
    #7aa7ff,
    #b99aff
  );
  background-clip: text;
  -webkit-background-clip: text;
}

:root[data-color-scheme="light"] .is-colorful-text {
  background-image: linear-gradient(
    90deg,
    #b4232f,
    #a44800,
    #746000,
    #087a2a,
    #006a8e,
    #3155a6,
    #743aa2
  );
}

html.is-performance-lite .name-field {
  animation: none;
}

html.is-performance-lite .noise {
  display: none;
}

html.is-performance-lite .scanlines {
  opacity: calc(var(--scanline-opacity) * 0.55);
}

html.is-performance-lite .shell {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
}

html.is-performance-lite .falling-bit {
  text-shadow: none;
}

html.is-page-hidden * {
  animation-play-state: paused !important;
}

.shell {
  position: relative;
  z-index: 2;
  width: clamp(960px, 68vw, 1120px);
  max-width: calc(100% - 32px);
  margin: 48px auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--shell-radius);
  background: var(--shell-bg);
  box-shadow: var(--shadow), 0 24px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(var(--material-blur));
  transition: width 240ms ease;
}

.system-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 42px;
  padding-left: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.system-bar p {
  margin: 0;
}

.window-controls {
  display: flex;
  align-self: stretch;
  justify-self: end;
}

.app-menu-bar {
  position: relative;
  z-index: 12;
  display: flex;
  min-height: 34px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}

.app-menu {
  position: relative;
}

.app-menu summary {
  padding: 8px 10px;
  color: inherit;
  cursor: default;
  list-style: none;
  user-select: none;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.app-menu summary:hover,
.app-menu summary:focus-visible,
.app-menu[open] summary {
  outline: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.app-menu summary:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.app-menu-popup {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: max(2px, calc(var(--control-radius) / 2));
  background: var(--overlay-bg);
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--material-blur)) saturate(1.18);
}

.app-menu:not([open]) > .app-menu-popup {
  display: none;
}

.app-menu:last-child .app-menu-popup {
  right: 0;
  left: auto;
}

.app-menu-popup button,
.app-menu-popup a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: max(1px, calc(var(--control-radius) / 2));
  color: var(--ink);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.app-menu-popup button:hover,
.app-menu-popup button:focus-visible,
.app-menu-popup a:hover,
.app-menu-popup a:focus-visible {
  outline: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.app-menu-popup button span {
  margin-left: 24px;
  color: var(--accent);
}

.theme-picker-native {
  display: none !important;
}

.theme-picker {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: normal;
}

.app-menu-popup .theme-picker {
  width: min(340px, calc(100vw - 64px));
}

.theme-picker > summary,
.theme-picker .theme-picker-branch > summary {
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--panel-2);
  font: inherit;
  letter-spacing: normal;
}

.theme-picker > summary {
  border: 1px solid var(--border-strong);
}

.theme-picker-list {
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.theme-picker .theme-picker-branch {
  margin-block: 4px;
}

.theme-picker-branch > .theme-picker-branch,
.theme-picker .theme-picker-choice {
  margin-left: 10px;
  width: calc(100% - 10px);
}

.theme-picker .theme-picker-choice {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.theme-picker .theme-picker-choice[aria-pressed="true"] {
  border-color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
}

.theme-picker summary:hover,
.theme-picker .theme-picker-choice:hover {
  background: var(--accent-soft);
}

.theme-picker summary:focus-visible,
.theme-picker .theme-picker-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.arcade-window {
  max-width: none;
  max-height: none;
}

.arcade-window .desktop-window-resize-handle,
.arcade-window .desktop-window-resize-edge {
  display: none;
}

.arcade-window-content {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  height: calc(100% - 42px);
  overflow: hidden;
}

.arcade-header,
.arcade-game-toolbar,
.arcade-leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.arcade-header h2,
.arcade-header p,
.arcade-game-toolbar p,
.arcade-leaderboard-header h3,
.arcade-leaderboard-header p {
  margin: 0;
}

.arcade-header h2,
.arcade-leaderboard-header h3 {
  margin-top: 5px;
}

.arcade-header > p,
.arcade-game-toolbar p {
  color: var(--muted);
  font-size: 0.7rem;
}

.arcade-header strong,
.arcade-game-toolbar strong {
  color: var(--accent);
}

.arcade-tabs {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 5px;
}

.arcade-tabs button,
.arcade-game-toolbar button,
.minesweeper-difficulty button,
.minesweeper-mode button,
.arcade-leaderboard button,
.arcade-score-form button,
.arcade-dpad button,
.tetris-controls button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
}

.arcade-tabs button[aria-selected="true"],
.minesweeper-difficulty button[aria-pressed="true"],
.minesweeper-mode button[aria-pressed="true"],
.arcade-tabs button:hover,
.arcade-tabs button:focus-visible,
.arcade-game-toolbar button:hover,
.arcade-game-toolbar button:focus-visible,
.minesweeper-difficulty button:hover,
.minesweeper-difficulty button:focus-visible,
.minesweeper-mode button:hover,
.minesweeper-mode button:focus-visible,
.arcade-leaderboard button:hover,
.arcade-leaderboard button:focus-visible,
.arcade-score-form button:hover,
.arcade-score-form button:focus-visible,
.arcade-dpad button:hover,
.arcade-dpad button:focus-visible,
.tetris-controls button:hover,
.tetris-controls button:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.arcade-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(280px, 340px);
  gap: 14px;
  min-height: 0;
}

.arcade-game-column,
.arcade-game-panel,
.arcade-leaderboard {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.arcade-game-panel,
.arcade-leaderboard {
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--panel);
}

.arcade-game-panel[hidden] {
  display: none;
}

.arcade-canvas {
  display: block;
  width: min(100%, 900px);
  height: auto;
  max-height: calc(100vh - 265px);
  box-sizing: border-box;
  justify-self: center;
  border: 1px solid var(--border);
  background: var(--panel-2);
  image-rendering: pixelated;
}

.arcade-square-canvas {
  width: min(100%, 500px);
  aspect-ratio: 1;
}

.arcade-dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-areas: ". up ." "left down right";
  justify-content: center;
  gap: 6px;
}

.arcade-dpad [data-snake-direction="up"] { grid-area: up; }
.arcade-dpad [data-snake-direction="left"] { grid-area: left; }
.arcade-dpad [data-snake-direction="down"] { grid-area: down; }
.arcade-dpad [data-snake-direction="right"] { grid-area: right; }

.arcade-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.45;
  text-align: center;
}

.minesweeper-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.minesweeper-difficulty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.minesweeper-board {
  display: grid;
  grid-template-columns: repeat(var(--mine-columns, 9), minmax(18px, 1fr));
  width: min(100%, 760px);
  aspect-ratio: var(--mine-columns, 9) / var(--mine-rows, 9);
  justify-self: center;
  gap: 3px;
}

.minesweeper-board-scroll {
  max-width: 100%;
  overflow: auto;
  padding-bottom: 7px;
}

.minesweeper-board-scroll .minesweeper-board {
  margin-inline: auto;
}

.mine-cell {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel-2);
  cursor: pointer;
  font: 700 clamp(0.65rem, 2vw, 1rem) monospace;
}

.mine-cell:hover,
.mine-cell:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.mine-cell.is-revealed {
  border-color: transparent;
  background: rgba(var(--accent-rgb), 0.08);
  cursor: default;
}

.mine-cell.is-flagged { color: var(--warning); }
.mine-cell.is-mine { color: #ff6d7a; }
.mine-cell[data-adjacent="1"] { color: #66aaff; }
.mine-cell[data-adjacent="2"] { color: #55d88b; }
.mine-cell[data-adjacent="3"],
.mine-cell[data-adjacent="4"],
.mine-cell[data-adjacent="5"],
.mine-cell[data-adjacent="6"],
.mine-cell[data-adjacent="7"],
.mine-cell[data-adjacent="8"] { color: #ff6d7a; }

.bitsweeper-input-label,
.arcade-score-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.tetris-canvas {
  width: min(100%, 300px);
  aspect-ratio: 1 / 2;
}

.tetris-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 7px;
}

.bitsweeper-input-label input,
.arcade-score-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel-2);
  font: inherit;
}

.bitsweeper-input-label input:focus,
.arcade-score-form input:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.arcade-leaderboard {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.arcade-leaderboard-list {
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.arcade-leaderboard-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.arcade-leaderboard-list li > strong,
.arcade-leaderboard-list li > b {
  color: var(--accent);
}

.arcade-leaderboard-list li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.arcade-leaderboard-list span,
.arcade-leaderboard-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-leaderboard-list small {
  color: var(--muted);
  font-size: 0.58rem;
}

.arcade-score-form {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.arcade-score-form[hidden] {
  display: none;
}

.arcade-score-form p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.arcade-score-form strong {
  color: var(--accent);
}

.bititaire-foundations {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 110px));
  justify-content: center;
  gap: 10px;
}

.bititaire-tableau {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  gap: 10px;
  min-height: 260px;
}

.bititaire-pile {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 6px;
  border: 1px dashed var(--border);
  background: rgba(var(--accent-rgb), 0.035);
}

.bititaire-card {
  min-height: 76px;
  margin-top: -52px;
  padding: 8px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel-2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font: 700 0.78rem var(--font-family);
  text-align: left;
}

.bititaire-card:first-child {
  margin-top: 0;
}

.bititaire-card[data-polarity="1"] {
  color: var(--accent);
}

.bititaire-card.is-selected {
  outline: 2px solid var(--accent);
  transform: translateY(-4px);
}

.bititaire-foundation {
  min-height: 86px;
  border: 1px dashed var(--accent);
  color: var(--muted);
  background: rgba(var(--accent-rgb), 0.06);
  cursor: pointer;
  font: inherit;
}

.flappy-canvas {
  aspect-ratio: 16 / 9;
}

.arcade-wide-canvas {
  width: min(100%, 720px);
  aspect-ratio: 12 / 7;
  touch-action: none;
}

.null-tac-toe-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 128px));
  justify-content: center;
  gap: 8px;
}

.null-tac-toe-board button {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  color: var(--accent);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent),
    var(--panel-2);
  cursor: pointer;
  font: 700 clamp(1.6rem, 5vw, 3rem) var(--font-family);
}

.null-tac-toe-board button:hover,
.null-tac-toe-board button:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

.null-tac-toe-board button:disabled {
  cursor: default;
  opacity: 0.82;
}

.null-tac-toe-board button[data-value="1"] {
  color: #ff6d7a;
}

@media (max-width: 900px) {
  .arcade-desktop-launcher {
    display: none !important;
  }
}

.app-menu-select {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
  color: var(--muted);
}

.app-menu-select span {
  font-size: 0.56rem;
}

.app-menu-select select {
  width: 100%;
  min-width: 210px;
}

.app-menu-separator {
  height: 1px;
  margin: 5px 6px;
  background: var(--border);
}

.window-button {
  position: relative;
  width: 44px;
  min-height: 41px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.window-button:hover,
.window-button:focus-visible {
  outline: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.window-button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.close-button:hover,
.close-button:focus-visible {
  color: #fff;
  background: #c42b1c;
  box-shadow: none;
}

.control-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.minimize-button .control-icon {
  height: 1px;
  border-bottom: 1px solid currentColor;
}

.maximize-button .control-icon {
  border: 1px solid currentColor;
}

.close-button .control-icon::before,
.close-button .control-icon::after {
  position: absolute;
  top: 4px;
  left: -1px;
  width: 12px;
  height: 1px;
  content: "";
  background: currentColor;
}

.close-button .control-icon::before {
  transform: rotate(45deg);
}

.close-button .control-icon::after {
  transform: rotate(-45deg);
}

.system-status {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  cursor: help;
}

.system-status:hover,
.system-status:focus-visible {
  outline: none;
  color: var(--ink);
}

.system-status:focus-visible {
  box-shadow: inset 0 -2px var(--accent);
}

/* The status trigger is title-bar text; themed button chrome must not box it. */
#system-status-trigger.system-status {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

:root:not([data-interface-theme="windows-95"]) #system-status-trigger.system-status:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#system-status-trigger.system-status:focus-visible {
  box-shadow: inset 0 -2px var(--accent);
}

.system-status.is-status-probed {
  animation: status-probed 220ms steps(2);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}

.profile {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 34px;
  align-items: center;
  padding: 48px 44px 38px;
}

.profile-portrait {
  width: 100%;
  max-width: 150px;
  margin: 0;
}

.profile-portrait figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.profile-picture {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--accent);
  background: var(--panel-2);
}

.identity {
  min-width: 0;
}

.avatar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.avatar {
  position: relative;
  z-index: 1;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 1px solid var(--accent);
  background:
    linear-gradient(90deg, transparent 49%, rgba(var(--accent-rgb), 0.15) 50%, transparent 51%),
    linear-gradient(transparent 49%, rgba(var(--accent-rgb), 0.15) 50%, transparent 51%),
    var(--panel-2);
  box-shadow: inset 0 0 30px rgba(var(--accent-rgb), 0.08), 8px 8px 0 rgba(var(--accent-rgb), 0.09);
  color: inherit;
  cursor: pointer;
  font: inherit;
  transform: rotate(3deg);
  transition: filter 180ms ease, transform 180ms ease;
}

.avatar:hover,
.avatar:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 6px;
  transform: rotate(-2deg) scale(1.04);
}

.avatar[data-mood="annoyed"] .eye:first-child {
  transform: rotate(22deg);
}

.avatar[data-mood="annoyed"] .eye:nth-child(2) {
  transform: rotate(-22deg);
}

.avatar[data-mood="amused"] .mouth {
  border-radius: 0 0 50% 50%;
}

.avatar[data-mood="wary"] .eye:first-child {
  height: 10px;
  transform: translateY(3px);
}

.avatar[data-mood="wary"] .mouth {
  width: 28px;
  border-right: 0;
  border-left: 0;
}

.avatar[data-mood="angry"] {
  filter: saturate(1.8);
  transform: rotate(-4deg) scale(1.04);
}

.avatar[data-mood="furious"] {
  filter: saturate(2.4) contrast(1.15);
  transform: rotate(5deg) scale(1.08);
  animation: avatar-fury 180ms steps(2) infinite;
}

.avatar[data-mood="angry"] .mouth,
.avatar[data-mood="furious"] .mouth {
  border-top: 4px solid var(--accent);
  border-bottom: 0;
}

.avatar[data-mood="furious"] .eye:first-child {
  transform: rotate(32deg) scaleY(0.7);
}

.avatar[data-mood="furious"] .eye:nth-child(2) {
  transform: rotate(-32deg) scaleY(0.7);
}

.avatar-wrap.is-departing .avatar {
  animation: avatar-storm-off 520ms cubic-bezier(0.7, 0, 0.9, 0.5) forwards;
  pointer-events: none;
}

.avatar-wrap.is-departing .avatar-shadow {
  animation: avatar-shadow-exit 420ms ease-in forwards;
}

.avatar-wrap.has-departed {
  min-height: 150px;
  aspect-ratio: auto;
  border: 1px dashed rgba(var(--accent-rgb), 0.24);
}

.avatar-wrap.has-departed .avatar-shadow {
  display: none;
}

.avatar-departure {
  max-width: 130px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
  animation: avatar-sassy-arrival 320ms steps(4);
}

.avatar-departure:hover,
.avatar-departure:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 6px;
}

.avatar-wrap.is-returning .avatar {
  animation: avatar-return 560ms cubic-bezier(0.2, 1.5, 0.5, 1);
}

.avatar[hidden],
.avatar-departure[hidden] {
  display: none;
}

.avatar-departure[hidden]::before {
  display: none;
}

.avatar-departure::before {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  content: "[AVATAR OFFLINE]";
  font-size: 0.54rem;
  letter-spacing: 0.08em;
}

.avatar::before,
.avatar::after {
  position: absolute;
  width: 18px;
  height: 5px;
  content: "";
  background: var(--accent);
}

.avatar::before {
  top: -6px;
  left: 20px;
}

.avatar::after {
  right: -6px;
  bottom: 22px;
  width: 5px;
  height: 20px;
}

.avatar-reaction {
  position: absolute;
  right: 4px;
  bottom: -24px;
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.avatar-face {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  transform: rotate(-3deg);
}

.eye {
  width: 12px;
  height: 16px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}

.mouth {
  grid-column: 1 / -1;
  width: 38px;
  height: 9px;
  margin: 2px auto 0;
  border-right: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  border-left: 4px solid var(--accent);
}

.avatar-bit {
  position: absolute;
  color: var(--accent);
  font-size: 0.65rem;
}

.bit-a { top: 8px; right: 10px; }
.bit-b { right: 10px; bottom: 8px; }
.bit-c { bottom: 8px; left: 10px; }
.bit-d { top: 8px; left: 10px; }

.avatar-shadow {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 116px;
  height: 116px;
  border: 1px dashed rgba(var(--accent-rgb), 0.25);
  transform: rotate(-5deg);
}

.eyebrow,
.activity-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
}

h1 {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.7rem);
  letter-spacing: -0.09em;
  line-height: 1;
  text-transform: uppercase;
}

#identity-name {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

h1 .dim {
  margin: 0 0.09em;
  color: var(--muted);
  font-size: 0.55em;
  letter-spacing: -0.07em;
  transform: translateY(0.55em);
}

.identity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pronouns {
  display: inline-block;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pronoun-window-launch {
  min-height: 24px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.pronoun-window-launch:hover,
.pronoun-window-launch:focus-visible {
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.pronoun-detail-launch {
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pronoun-detail-launch:hover,
.pronoun-detail-launch:focus-visible {
  outline: none;
  color: var(--ink);
}

.bio {
  max-width: 52ch;
  margin: 18px 0 17px;
  color: var(--muted);
  font-size: 0.86rem;
}

.identity-tags + .bio {
  margin-top: 12px;
}

.command-line {
  height: 3.5em;
  overflow: auto;
  color: var(--ink);
  font-size: 0.75rem;
}

.message-author-box {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--muted);
  background: var(--panel-2);
  font-size: 0.7rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.message-author-box[hidden] {
  display: none;
}

.prompt {
  margin-right: 7px;
  color: var(--accent);
}

.cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}

.terminal-output {
  max-height: 250px;
  margin: 14px 0 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: var(--bg);
  font: inherit;
  font-size: 0.62rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.terminal-output[hidden] {
  display: none;
}

.featured-section[hidden],
.project-tags[hidden],
body:has(#featured-project-section[hidden]) a[href="#featured-heading"] {
  display: none !important;
}

.featured-section,
.content-files-section,
.link-section {
  padding: 0 44px 38px;
}

.section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.section-label h2 {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

.featured-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.07), transparent 60%),
    var(--panel);
}

.featured-project h3,
.featured-project p {
  margin: 0;
}

.featured-project h3 {
  margin-top: 4px;
  font-size: 1rem;
}

.featured-project-copy > p:not(.featured-project-status) {
  max-width: 54ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}

.featured-project-status {
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.project-tags li {
  padding: 3px 6px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.55rem;
}

.featured-project-actions {
  display: grid;
  gap: 8px;
  min-width: 118px;
}

.featured-project-actions a,
.achievement-data-controls button,
.mini-window-launch {
  padding: 8px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.62rem;
  text-align: center;
  text-decoration: none;
}

.featured-project-actions a:hover,
.featured-project-actions a:focus-visible,
.achievement-data-controls button:hover,
.achievement-data-controls button:focus-visible,
.mini-window-launch:hover,
.mini-window-launch:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.content-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.content-file-grid button {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.content-file-grid button:hover,
.content-file-grid button:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.content-file-grid strong {
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.content-file-grid span {
  overflow-wrap: anywhere;
  font-size: 0.66rem;
  line-height: 1.5;
}

.identity > .mini-window-launch {
  margin-bottom: 14px;
}

.spotify-window-launch {
  align-self: center;
}

.monitor-window-launch {
  justify-self: end;
}

.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.link-card {
  --card-accent: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.link-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  content: "";
  background: var(--card-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.link-card:hover,
.link-card:focus-visible {
  border-color: var(--card-accent);
  outline: none;
  background: var(--panel-2);
  transform: translateY(-2px);
}

.link-card:hover::after,
.link-card:focus-visible::after {
  transform: scaleX(1);
}

.link-card:hover .link-arrow,
.link-card:focus-visible .link-arrow {
  color: var(--card-accent);
  transform: translate(2px, -2px);
}

.link-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 8%, transparent);
  font-size: 0.76rem;
  font-weight: 700;
}

.link-icon-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.88;
  filter: var(--icon-filter);
}

.link-copy {
  min-width: 0;
}

.link-title {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.link-description {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-section {
  padding: 0 44px 38px;
}

.contact-form,
.admin-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.profile-editor {
  margin-top: 42px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.pronoun-admin-form {
  max-width: none;
}

.content-admin-form {
  max-width: none;
}

.content-admin-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pronoun-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.curated-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.curated-admin-grid fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
}

.curated-admin-grid legend {
  padding: 0 6px;
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.repeatable-admin-actions,
.repeatable-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.hardware-import {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
}

.hardware-import summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.hardware-import-body {
  margin-top: 12px;
}

.hardware-import-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
}

.hardware-import-script {
  width: 100%;
  min-height: 140px;
  font-family: inherit;
  font-size: 0.64rem;
  white-space: pre;
}

.hardware-devices {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hardware-devices[hidden] {
  display: none;
}

.hardware-devices li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
}

.hardware-devices strong,
.hardware-devices small {
  display: block;
}

.hardware-devices small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.62rem;
}

.repeatable-entry-actions {
  margin-top: auto;
}

.repeatable-entry-remove {
  color: var(--danger);
  border-color: var(--danger);
}

.admin-form .admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-form .admin-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-form label,
.admin-form label {
  display: grid;
  gap: 6px;
  color: var(--accent);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.contact-form label em {
  color: var(--muted);
  font-style: normal;
}

.contact-form input,
.contact-form textarea,
.admin-form input,
.admin-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
  font-size: 0.76rem;
}

.admin-form textarea {
  width: 100%;
  min-height: 78px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
  font-size: 0.75rem;
}

.contact-form input,
.admin-form input,
.admin-form select {
  height: 38px;
  padding: 0 11px;
}

.contact-form textarea {
  min-height: 110px;
  padding: 10px 11px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.admin-form input:focus,
.admin-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.admin-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
}

.contact-turnstile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 4px 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-left: 2px solid var(--muted);
  border-radius: var(--control-radius);
  background: rgba(var(--accent-rgb), 0.05);
  transition: border-color 160ms ease;
}

html[data-interface-theme="windows-95"] .contact-turnstile {
  border: 2px groove var(--w95-hi);
  background: transparent;
}

html[data-interface-theme="windows-95"] .contact-turnstile-label,
html[data-interface-theme="windows-95"] .contact-turnstile-status {
  color: var(--w95-text);
  letter-spacing: 0;
}

.contact-turnstile[data-state="verified"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  border-left-color: var(--accent);
}

.contact-turnstile[data-state="error"] {
  border-left-color: var(--danger, #ff6d7a);
}

.contact-turnstile-label,
.contact-turnstile-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.contact-turnstile-widget {
  flex: 1 0 100%;
  min-height: 65px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: var(--control-radius);
}

/* Not display:none, so the background check keeps running inside the iframe. */
.contact-turnstile-widget.is-collapsed {
  height: 0;
  min-height: 0;
  margin: 0;
}

.contact-turnstile[data-state="verified"] .contact-turnstile-status {
  color: var(--accent);
}

.contact-turnstile[data-state="error"] .contact-turnstile-status {
  color: var(--danger, var(--ink));
}

.contact-turnstile[data-state="pending"] .contact-turnstile-status::after {
  content: "_";
  animation: contact-turnstile-blink 1s steps(1) infinite;
}

@keyframes contact-turnstile-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-turnstile[data-state="pending"] .contact-turnstile-status::after {
    animation: none;
  }
}

html[data-motion="reduced"] .contact-turnstile[data-state="pending"] .contact-turnstile-status::after {
  animation: none;
}

.professional-page .contact-turnstile {
  border-style: solid;
  border-left-width: 1px;
  border-color: var(--border);
  background: transparent;
}

.professional-page .contact-turnstile-label,
.professional-page .contact-turnstile-status {
  font-size: 0.7rem;
  letter-spacing: 0;
}

.professional-page .contact-turnstile[data-state="pending"] .contact-turnstile-status::after {
  content: none;
}

.contact-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.contact-actions button,
.admin-form button,
.inbox-actions button,
.message-actions button,
.repeatable-admin-actions button {
  padding: 9px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  white-space: nowrap;
}

.contact-actions button:hover,
.contact-actions button:focus-visible,
.admin-form button:hover,
.admin-form button:focus-visible,
.inbox-actions button:hover,
.inbox-actions button:focus-visible,
.message-actions button:hover,
.message-actions button:focus-visible,
.repeatable-admin-actions button:hover,
.repeatable-admin-actions button:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.contact-actions button:disabled,
.admin-form button:disabled {
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
  cursor: not-allowed;
}

.form-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.67rem;
}

.form-status[data-state="error"] {
  color: #ff6d7a;
}

.form-status[data-state="success"] {
  color: var(--accent);
}

.link-arrow {
  color: var(--muted);
  font-size: 1rem;
  transition: color 160ms ease, transform 160ms ease;
}

.spotify-widget {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 80px;
  margin: 0 44px 12px;
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--spotify-accent) 38%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--spotify-accent) 7%, transparent), transparent 45%),
    var(--panel);
}

.spotify-artwork,
.spotify-placeholder {
  width: 56px;
  height: 56px;
}

.spotify-artwork {
  grid-area: 1 / 1;
  border-radius: 4px;
  cursor: pointer;
  object-fit: cover;
}

.spotify-artwork.is-spinning {
  border-radius: 50%;
  animation: spin-vinyl var(--vinyl-speed, 2.4s) linear infinite;
}

.spotify-artwork[hidden] {
  display: none;
}

.spotify-placeholder {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--spotify-accent) 35%, transparent);
  background: color-mix(in srgb, var(--spotify-accent) 6%, transparent);
}

.spotify-placeholder img {
  width: 24px;
  height: 24px;
  filter: var(--icon-filter);
  opacity: 0.75;
}

.spotify-widget:has(.spotify-artwork:not([hidden])) .spotify-placeholder {
  display: none;
}

.spotify-copy {
  min-width: 0;
}

.spotify-copy .activity-label {
  color: var(--spotify-accent);
}

.spotify-track,
.spotify-artist {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spotify-track {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.spotify-artist {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

.spotify-timeline {
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.spotify-progress {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--border);
}

.spotify-progress::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--spotify-progress, 0%);
  content: "";
  background: var(--spotify-accent);
  transition: width 400ms linear;
}

.spotify-track-link {
  color: var(--spotify-accent);
  font-size: 0.64rem;
  text-decoration: none;
}

.spotify-track-link:hover,
.spotify-track-link:focus-visible {
  outline: none;
  text-decoration: underline;
}

.spotify-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.spotify-widget[data-state="playing"] {
  box-shadow: inset 3px 0 0 var(--spotify-accent);
}

.now-playing {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  margin: 0 44px 38px;
  padding: 12px 15px;
  border: 1px dashed var(--border);
  background: rgba(var(--accent-rgb), 0.025);
}

.activity-icon {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 24px;
  height: 20px;
}

.activity-icon span {
  width: 3px;
  height: 30%;
  background: var(--accent);
  animation: equalize 800ms ease-in-out infinite alternate;
}

.activity-icon span:nth-child(2) { animation-delay: -400ms; }
.activity-icon span:nth-child(3) { animation-delay: -200ms; }
.activity-icon span:nth-child(4) { animation-delay: -600ms; }

.activity-label {
  margin: 0;
}

.activity-text,
.uptime {
  margin: 0;
  font-size: 0.68rem;
}

.activity-text {
  color: var(--muted);
  transition: opacity 150ms ease, transform 150ms ease;
}

.activity-text.is-changing {
  opacity: 0;
  transform: translateY(3px);
}

.uptime {
  color: var(--muted);
  text-align: right;
}

.uptime span {
  display: block;
  color: var(--ink);
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-align: left;
}

footer p {
  margin: 0;
}

footer span {
  color: var(--accent);
}

.site-switch-link {
  color: var(--accent);
  text-decoration: none;
}

.site-switch-link:hover,
.site-switch-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.build-link {
  color: var(--accent);
  text-decoration: none;
}

.build-link:hover,
.build-link:focus-visible {
  text-decoration: underline;
}

.noscript-fallback {
  position: relative;
  z-index: 100;
  width: min(720px, calc(100% - 32px));
  margin: 32px auto;
  padding: 24px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.noscript-fallback h1,
.noscript-fallback p {
  margin-top: 0;
}

.noscript-fallback nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.noscript-fallback a {
  color: var(--accent);
}

.error-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.error-window {
  width: min(720px, 100%);
  padding: 32px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--panel-strong);
  box-shadow: var(--shadow), 0 0 60px rgba(var(--accent-rgb), 0.12);
}

.error-code {
  margin: 0;
  color: var(--danger);
  font-size: clamp(3rem, 14vw, 8rem);
  line-height: 0.9;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.error-actions a,
.error-actions button {
  padding: 10px 14px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.error-actions a:hover,
.error-actions a:focus-visible,
.error-actions button:hover,
.error-actions button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.error-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.error-achievement {
  margin-top: 24px;
  color: color-mix(in srgb, var(--muted) 50%, var(--ink));
}

.error-page.has-shortbit-display .error-window {
  width: min(1100px, 100%);
}

.shortbit-content h1 {
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.shortbit-content > p:not(.system-kicker) {
  color: var(--muted);
  line-height: 1.7;
}

.shortbit-frame-shell {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.shortbit-frame-shell iframe {
  display: block;
  width: 100%;
  height: clamp(360px, 65vh, 680px);
  border: 0;
}

.shortbit-frame-shell[data-provider="spotify"] iframe {
  height: 352px;
}

html[data-interface-theme="terminal"] body.error-page.has-youtube-shortbit {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(var(--accent-rgb), 0.09) 4px,
      transparent 6px
    ),
    radial-gradient(
      circle at 50% 42%,
      rgba(var(--accent-rgb), 0.14),
      transparent 48%
    ),
    radial-gradient(
      circle at center,
      #031108 0,
      #010503 72%
    );
  background-position: 0 0, center, center;
  background-size: auto, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.82);
  animation: shortbit-crt-background-roll 8s linear infinite;
}

@keyframes shortbit-crt-background-roll {
  to {
    background-position: 0 12px, center, center;
  }
}

.shortbit-notice {
  margin: 14px 0 0;
  color: var(--accent) !important;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.source-window {
  width: min(900px, 100%);
}

.source-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}

.source-file-list a {
  display: block;
  padding: 12px;
  border: 1px solid var(--border);
  color: var(--accent);
  text-decoration: none;
}

.source-file-list a:hover,
.source-file-list a:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.useless-page {
  align-items: start;
}

.useless-window {
  width: min(1040px, 100%);
  margin-block: 24px;
}

.useless-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.7fr);
  gap: 32px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.useless-header h1 {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.useless-header h1 span {
  color: var(--accent);
}

.useless-summary {
  max-width: 64ch;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--muted) 50%, var(--ink));
  line-height: 1.7;
}

.useless-diagnostic {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
}

.useless-diagnostic span {
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.useless-diagnostic strong {
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--accent) 30%, var(--ink));
  font-size: 0.88rem;
}

.useless-warning {
  margin: 24px 0 32px;
  padding: 14px 16px;
  border-left: 3px solid var(--warning);
  color: var(--ink);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  line-height: 1.6;
}

.useless-warning strong {
  color: color-mix(in srgb, var(--warning) 50%, var(--ink));
}

.useless-window h2 {
  margin: 8px 0 18px;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.useless-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: useless-step;
}

.useless-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.useless-step-number {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
}

.useless-steps h3 {
  margin: 2px 0 8px;
  font-size: 1rem;
}

.useless-steps p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.useless-steps code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.useless-tools {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.useless-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.useless-tool-grid button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.useless-tool-grid button:hover,
.useless-tool-grid button:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.useless-tool-grid button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.useless-tool-grid button.is-retired:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.useless-tool-grid button strong {
  overflow-wrap: anywhere;
  font-size: 0.72rem;
}

.useless-tool-grid button span {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.5;
}

.useless-tool-console {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.useless-tool-console > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}

.useless-tool-state {
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.useless-tool-result {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.6;
}

.useless-tool-progress {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.useless-tool-progress[hidden] {
  display: none;
}

.useless-tool-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 80ms steps(2);
}

.useless-resolution {
  margin-top: 32px;
  padding: 24px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
}

.useless-resolution h2 {
  margin-bottom: 10px;
}

.useless-resolution p:last-child {
  margin-bottom: 0;
  line-height: 1.7;
}

.useless-source {
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--muted) 50%, var(--ink));
  font-size: 0.75rem;
  line-height: 1.5;
}

.useless-footer-result {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 1.5;
}

.useless-source a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
}

.useless-window .system-kicker {
  color: color-mix(in srgb, var(--accent) 30%, var(--ink));
}

@media (max-width: 720px) {
  .useless-window {
    padding: 22px;
  }

  .useless-header,
  .useless-steps {
    grid-template-columns: 1fr;
  }

  .useless-tool-grid {
    grid-template-columns: 1fr;
  }

  .useless-tool-console > div:first-child {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.skip-link {
 clip-path: inset(50%);
 position: fixed;
 z-index: 10000;
 top: 8px;
 left: 8px;
 padding: 10px 14px;
 border: 2px solid var(--accent);
 color: var(--bg);
 background: var(--accent);
 transform: translateY(-160%);
}

.skip-link:focus {
 clip-path: none;
 transform: translateY(0);
}

.visually-hidden {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}

.blog-page {
 min-height: 100vh;
 color: var(--ink);
 background:
   radial-gradient(circle at 50% 0, rgba(var(--accent-rgb), 0.1), transparent 42%),
   var(--bg);
}

.blog-shell {
 position: relative;
 z-index: 1;
 width: min(920px, calc(100% - 32px));
 margin: clamp(22px, 6vw, 72px) auto;
 padding: clamp(22px, 5vw, 52px);
 border: 1px solid var(--border);
 background: color-mix(in srgb, var(--panel) 96%, transparent);
 box-shadow: var(--shadow);
}

.blog-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 28px;
 margin-bottom: clamp(28px, 6vw, 54px);
 padding-bottom: 24px;
 border-bottom: 1px solid var(--border);
}

.blog-header h1 {
 margin: 8px 0;
 color: var(--accent);
 font-size: clamp(2rem, 8vw, 4.6rem);
 letter-spacing: -0.07em;
}

.blog-header p:last-child {
 max-width: 58ch;
 margin-bottom: 0;
 color: var(--muted);
 line-height: 1.7;
}

.blog-header > a,
.blog-breadcrumbs a {
 display: inline-flex;
 min-height: 28px;
 align-items: center;
 color: var(--accent);
 font-size: 0.7rem;
 text-decoration: none;
}

.blog-header > a:hover,
.blog-header > a:focus-visible,
.blog-breadcrumbs a:hover,
.blog-breadcrumbs a:focus-visible {
 outline: 1px dashed var(--accent);
 outline-offset: 4px;
}

.blog-status {
 color: var(--muted);
 line-height: 1.7;
}

.blog-post-list {
 display: grid;
 gap: 16px;
}

.blog-post-list article {
 padding: clamp(18px, 4vw, 30px);
 border: 1px solid var(--border);
 background: var(--bg);
 transition: border-color 150ms ease, transform 150ms ease;
}

.blog-post-list article:has(a:hover),
.blog-post-list article:has(a:focus-visible) {
 border-color: var(--accent);
 transform: translateY(-2px);
}

.blog-post-list h3 {
 margin: 0 0 10px;
 font-size: clamp(1rem, 3vw, 1.45rem);
}

.blog-post-list h3 a {
 display: inline-flex;
 min-width: 24px;
 min-height: 24px;
 align-items: center;
 color: var(--ink);
 text-decoration-color: var(--accent);
 text-underline-offset: 4px;
}

.blog-post-list article > p:not(.blog-post-card-meta) {
 margin: 0;
 color: var(--muted);
 line-height: 1.7;
}

.blog-post-card-meta,
.blog-article-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 16px 0 0;
 color: var(--accent);
 font-size: 0.62rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.blog-breadcrumbs {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: clamp(24px, 5vw, 48px);
 color: var(--muted);
}

.blog-article > header {
 margin-bottom: clamp(30px, 7vw, 64px);
 padding-bottom: clamp(22px, 5vw, 38px);
 border-bottom: 1px solid var(--border);
}

.blog-article h1 {
 max-width: 20ch;
 margin: 10px 0;
 color: var(--ink);
 font-size: clamp(2rem, 7vw, 4rem);
 line-height: 1.05;
 overflow-wrap: anywhere;
}

.blog-article-excerpt {
 max-width: 68ch;
 color: var(--muted);
 font-size: clamp(0.9rem, 2vw, 1.1rem);
 line-height: 1.7;
}

.blog-markdown {
 color: var(--ink);
 font-family: var(--font-family);
 font-size: clamp(0.82rem, 1.8vw, 1rem);
 line-height: 1.8;
 overflow-wrap: anywhere;
}

.blog-markdown > * {
 max-width: 72ch;
}

.blog-markdown h2,
.blog-markdown h3,
.blog-markdown h4,
.blog-markdown h5,
.blog-markdown h6 {
 margin: 2.2em 0 0.7em;
 color: var(--accent);
 line-height: 1.25;
}

.blog-markdown h2 {
 padding-bottom: 0.35em;
 border-bottom: 1px solid var(--border);
 font-size: 1.45em;
}

.blog-markdown h3 {
 font-size: 1.2em;
}

.blog-markdown p,
.blog-markdown ul,
.blog-markdown ol,
.blog-markdown blockquote {
 margin-block: 1.15em;
}

.blog-markdown li + li {
 margin-top: 0.45em;
}

.blog-markdown a {
 display: inline-flex;
 min-width: 24px;
 min-height: 24px;
 align-items: center;
 color: var(--accent);
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}

.blog-markdown a:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}

.blog-markdown blockquote {
 padding: 2px 0 2px 20px;
 border-left: 3px solid var(--accent);
 color: var(--muted);
}

.blog-markdown code {
 padding: 0.12em 0.35em;
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.blog-markdown pre {
 max-width: 100%;
 padding: 18px;
 overflow: auto;
 border: 1px solid var(--border);
 background: var(--bg);
 scrollbar-color: var(--accent) var(--bg);
}

.blog-markdown pre code {
 padding: 0;
 color: var(--ink);
 background: transparent;
 white-space: pre;
}

.blog-markdown hr {
 margin: 2.5em 0;
 border: 0;
 border-top: 1px solid var(--border);
}

.blog-markdown mark {
 padding: 0.08em 0.22em;
 color: #111;
 background: #ffe66c;
}

.blog-markdown-image {
 display: grid;
 gap: 8px;
 max-width: 100%;
 margin: 1.8em 0;
}

.blog-markdown-image img {
 display: block;
 width: auto;
 max-width: 100%;
 height: auto;
 border: 1px solid var(--border);
 background: var(--panel);
}

.blog-markdown-image figcaption {
 color: var(--muted);
 font-size: 0.78em;
 line-height: 1.55;
}

.blog-markdown-table {
 max-width: 100%;
 margin: 1.6em 0;
 overflow-x: auto;
 border: 1px solid var(--border);
 scrollbar-color: var(--accent) var(--bg);
}

.blog-markdown-table:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}

.blog-markdown table {
 width: 100%;
 min-width: 420px;
 border-collapse: collapse;
}

.blog-markdown th,
.blog-markdown td {
 padding: 10px 12px;
 border: 1px solid var(--border);
 text-align: left;
 vertical-align: top;
}

.blog-markdown th {
 color: var(--accent);
 background: var(--panel);
}

.blog-task-list {
 padding-left: 0;
 list-style: none;
}

.blog-task-list li {
 display: flex;
 align-items: baseline;
 gap: 9px;
}

.blog-task-list input {
 accent-color: var(--accent);
}

.blog-text-color-accent { color: var(--accent); }
.blog-text-color-red { color: #ff6b78; }
.blog-text-color-orange { color: #ff9f43; }
.blog-text-color-yellow { color: #ffe66c; }
.blog-text-color-green { color: #66e890; }
.blog-text-color-cyan { color: #5ee7ef; }
.blog-text-color-blue { color: #66a3ff; }
.blog-text-color-purple { color: #bd93f9; }
.blog-text-color-pink { color: #ff79c6; }
.blog-text-color-white { color: #fff; }
.blog-text-color-muted { color: #c3ccd5; }

.blog-text-color-red,
.blog-text-color-orange,
.blog-text-color-yellow,
.blog-text-color-green,
.blog-text-color-cyan,
.blog-text-color-blue,
.blog-text-color-purple,
.blog-text-color-pink,
.blog-text-color-white,
.blog-text-color-muted {
  padding: 0.05em 0.22em;
  color-scheme: dark;
  background: #10141a;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.blog-text-color-rainbow {
 color: var(--accent);
 background: linear-gradient(90deg, #ff5f6d, #ffc371, #66e890, #5ee7ef, #7597ff, #bd93f9, #ff79c6);
 background-size: 200% 100%;
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: blog-rainbow-text 5s linear infinite;
}

.blog-text-font-default { font-family: var(--font-family); }
.blog-text-font-serif { font-family: Georgia, "Times New Roman", serif; }
.blog-text-font-sans { font-family: Arial, Helvetica, sans-serif; }
.blog-text-font-mono { font-family: "Cascadia Mono", Consolas, monospace; }
.blog-text-font-display { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 0.03em; }
.blog-text-font-system-ui { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.blog-text-font-arial { font-family: Arial, Helvetica, sans-serif; }
.blog-text-font-helvetica { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.blog-text-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.blog-text-font-tahoma { font-family: Tahoma, Verdana, sans-serif; }
.blog-text-font-trebuchet { font-family: "Trebuchet MS", Arial, sans-serif; }
.blog-text-font-segoe-ui { font-family: "Segoe UI", Tahoma, sans-serif; }
.blog-text-font-georgia { font-family: Georgia, "Times New Roman", serif; }
.blog-text-font-times-new-roman { font-family: "Times New Roman", Times, serif; }
.blog-text-font-palatino { font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; }
.blog-text-font-garamond { font-family: Garamond, "Hoefler Text", Georgia, serif; }
.blog-text-font-cambria { font-family: Cambria, Georgia, serif; }
.blog-text-font-courier-new { font-family: "Courier New", Courier, monospace; }
.blog-text-font-consolas { font-family: Consolas, "Cascadia Mono", "Liberation Mono", monospace; }
.blog-text-font-menlo { font-family: Menlo, Monaco, Consolas, monospace; }
.blog-text-font-monaco { font-family: Monaco, Menlo, Consolas, monospace; }
.blog-text-font-impact { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; }
.blog-text-font-arial-narrow { font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; }
.blog-text-font-comic-sans { font-family: "Comic Sans MS", "Comic Sans", cursive; }

.blog-text-size-small { font-size: 0.78em; }
.blog-text-size-normal { font-size: 1em; }
.blog-text-size-large { font-size: 1.3em; }
.blog-text-size-huge { font-size: 1.75em; line-height: 1.25; }

@keyframes blog-rainbow-text {
 to {
   background-position: 200% 0;
 }
}

.blog-admin-layout {
 display: grid;
 grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
 gap: 16px;
}

.blog-admin-posts {
 min-width: 0;
 padding: 14px;
 border: 1px solid var(--border);
 background: var(--panel);
}

.blog-admin-posts h3,
.blog-admin-preview h3 {
 margin: 0;
 color: var(--accent);
 font-size: 0.66rem;
 letter-spacing: 0.1em;
}

.blog-admin-list {
 display: grid;
 gap: 7px;
 margin-top: 12px;
}

.blog-admin-post-button {
 display: grid;
 gap: 5px;
 width: 100%;
 padding: 10px;
 border: 1px solid var(--border);
 color: var(--ink);
 background: var(--bg);
 cursor: pointer;
 font: inherit;
 text-align: left;
}

.blog-admin-post-button:hover,
.blog-admin-post-button:focus-visible {
 border-color: var(--accent);
 outline: none;
}

.blog-admin-post-button strong {
 font-size: 0.68rem;
 overflow-wrap: anywhere;
}

.blog-admin-post-button span {
 color: var(--muted);
 font-size: 0.52rem;
}

.blog-admin-form {
 max-width: none;
 margin: 0;
}

.blog-admin-form .admin-checkbox input {
 width: 24px;
 height: 24px;
}

.blog-format-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 padding: 9px;
 border: 1px solid var(--border);
 background: var(--panel);
}

.blog-format-toolbar > div {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
}

.blog-format-toolbar label {
 display: block;
}

.blog-format-toolbar select,
.blog-format-toolbar button {
 width: auto;
 min-width: 36px;
 min-height: 36px;
 padding: 6px 9px;
 border: 1px solid var(--border);
 color: var(--ink);
 background: var(--bg);
 font: 0.58rem/1 var(--font-family);
}

.blog-format-toolbar button:hover,
.blog-format-toolbar button:focus-visible,
.blog-format-toolbar select:focus-visible {
 border-color: var(--accent);
 outline: 1px solid var(--accent);
 color: var(--accent);
}

.blog-admin-workspace {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 14px;
 min-height: 420px;
}

.blog-admin-workspace > label {
 min-height: 0;
}

.admin-form #blog-post-markdown {
 height: 100%;
 min-height: 380px;
 font-family: var(--font-family);
 line-height: 1.55;
 tab-size: 2;
}

.blog-admin-preview {
 min-width: 0;
 min-height: 380px;
 max-height: 62vh;
 padding: 14px;
 overflow: auto;
 border: 1px solid var(--border);
 background: var(--bg);
}

.blog-admin-preview .blog-markdown {
 margin-top: 18px;
 font-size: 0.74rem;
}

.blog-markdown-help {
 margin: 0;
 color: var(--muted);
 font-size: 0.58rem;
 line-height: 1.6;
}

.blog-image-dialog {
 width: min(520px, calc(100% - 28px));
 max-height: calc(100dvh - 28px);
 padding: 0;
 border: 1px solid var(--accent);
 color: var(--ink);
 background: var(--panel);
 box-shadow: 0 24px 90px rgba(0, 0, 0, 0.76);
}

.blog-image-dialog::backdrop {
 background: rgba(0, 0, 0, 0.72);
 backdrop-filter: blur(3px);
}

.blog-image-dialog .admin-form {
 max-width: none;
 margin: 0;
}

.blog-image-dialog h2 {
 margin: 0;
 color: var(--accent);
 font-size: 0.9rem;
}

html[data-interface-theme="windows-95"] .blog-page {
 color: var(--w95-text);
 background: var(--w95-desktop);
}

html[data-interface-theme="windows-95"] .blog-shell {
 border: 2px solid var(--w95-shadow);
 color: var(--w95-text);
 background: var(--w95-face);
 box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .blog-post-list article,
html[data-interface-theme="windows-95"] .blog-markdown pre {
 border: 2px solid var(--w95-shadow);
 color: var(--w95-text);
 background: var(--w95-field);
 box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .blog-header p:last-child,
html[data-interface-theme="windows-95"] .blog-post-list article > p:not(.blog-post-card-meta),
html[data-interface-theme="windows-95"] .blog-article-excerpt,
html[data-interface-theme="windows-95"] .blog-markdown,
html[data-interface-theme="windows-95"] .blog-markdown pre code {
 color: var(--w95-text);
}

html[data-interface-theme="windows-95"] .blog-header h1,
html[data-interface-theme="windows-95"] .blog-post-list h3 a,
html[data-interface-theme="windows-95"] .blog-markdown a,
html[data-interface-theme="windows-95"] .blog-markdown h2,
html[data-interface-theme="windows-95"] .blog-markdown h3,
html[data-interface-theme="windows-95"] .blog-markdown h4,
html[data-interface-theme="windows-95"] .blog-markdown h5,
html[data-interface-theme="windows-95"] .blog-markdown h6,
html[data-interface-theme="windows-95"] .blog-post-card-meta,
html[data-interface-theme="windows-95"] .blog-article-meta {
 color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .skip-link {
 border-color: var(--w95-hi);
 color: #fff;
 background: #000080;
}

html[data-interface-theme="windows-95"] .blog-text-color-rainbow {
 color: var(--w95-accent-text);
 background: none;
 -webkit-text-fill-color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] #admin-blog-window > .desktop-window-bar {
 color: #fff;
 background: #000080;
}

html[data-interface-theme="windows-95"] #admin-blog-window-title {
 color: #fff;
}

html[data-interface-theme="windows-95"] .blog-admin-preview {
 color: var(--w95-text);
 background: var(--w95-field);
}

html[data-interface-theme="windows-95"] #blog-preview-heading,
html[data-interface-theme="windows-95"] .blog-admin-preview p {
 color: var(--w95-text);
}

html[data-interface-theme="minebits"] #admin-blog-window-title {
 color: #fff;
 text-shadow: 1px 1px #000;
}

@media (max-width: 760px) {
 .blog-header,
 .blog-admin-layout,
 .blog-admin-workspace {
   grid-template-columns: 1fr;
 }

 .blog-header {
   display: grid;
 }

 .blog-admin-workspace {
   min-height: 0;
 }

 .blog-format-toolbar {
   max-height: 180px;
   overflow-y: auto;
 }

 .admin-form #blog-post-markdown,
 .blog-admin-preview {
   min-height: 300px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .blog-text-color-rainbow {
   animation: none;
 }
}

.admin-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 32px));
  margin: 48px auto;
  border: 1px solid var(--border);
  background: var(--admin-bg);
  box-shadow: var(--shadow), 0 24px 80px rgba(0, 0, 0, 0.55);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.admin-header h1 {
  letter-spacing: -0.05em;
}

.admin-suite-brand {
  display: flex;
  gap: 16px;
  align-items: center;
}

.admin-waffle {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 3px;
  flex: none;
  padding: 9px;
  border: 1px solid var(--border);
}

.admin-waffle i {
  width: 4px;
  height: 4px;
  background: var(--accent);
}

.admin-suite-name {
  margin-right: 0.35em;
  color: var(--accent);
}

.admin-breadcrumb::after {
  content: " > DASHBOARD";
  color: var(--muted);
}

.admin-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.admin-header a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--accent);
  font-size: 0.7rem;
  text-decoration: none;
}

.admin-panel {
  padding: 32px;
}

.admin-panel[hidden] {
  display: none;
}

.admin-form {
  max-width: 440px;
  margin: 0 auto;
}

.inbox-toolbar,
.message-card header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.inbox-toolbar h2 {
  margin: 0;
  font-size: 1.1rem;
}

.inbox-actions,
.message-actions {
  display: flex;
  gap: 8px;
}

.inbox-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-window-counter {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.admin-window-counter strong {
  color: var(--accent);
}

.admin-desktop-dashboard {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.admin-window-launchers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-window-launchers button {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-window-launchers button:hover,
.admin-window-launchers button:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.admin-window-launchers strong {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.admin-window-launchers span {
  overflow-wrap: anywhere;
  font-size: 0.64rem;
  line-height: 1.5;
}

.admin-window-module {
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-window-module .admin-form {
  max-width: none;
  margin: 0;
}

.admin-window-module .curated-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.short-link-create-form {
  max-width: none;
  margin: 0;
}

.short-link-alias-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.short-link-alias-row button {
  min-height: 38px;
}

.short-links-admin-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.short-link-admin-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
}

.short-link-admin-heading,
.short-link-admin-metrics,
.short-link-admin-entry .repeatable-entry-actions {
  grid-column: 1 / -1;
}

.short-link-admin-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.short-link-admin-heading strong {
  color: var(--ink);
}

.short-link-admin-heading a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.short-link-admin-metrics {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.6;
}

#admin-short-links-window {
  --window-default-height: 760px;
  --window-default-width: 980px;
}

@media (max-width: 720px) {
  .short-link-alias-row,
  .short-link-admin-entry {
    grid-template-columns: 1fr;
  }

  .short-link-admin-heading,
  .short-link-admin-metrics,
  .short-link-admin-entry .repeatable-entry-actions {
    grid-column: auto;
  }
}

.admin-window-content {
  padding: 24px;
}

#admin-inbox-window {
  --window-default-height: 650px;
  --window-default-width: 900px;
}

#admin-pronouns-window {
  --window-default-height: 720px;
  --window-default-width: 800px;
}

#admin-playlists-window,
#admin-songs-window {
  --window-default-height: 720px;
  --window-default-width: 1040px;
}

#admin-resume-window {
  --window-default-height: 760px;
  --window-default-width: 1180px;
}

#admin-now-window {
  --window-default-height: 700px;
  --window-default-width: 850px;
}

#admin-changelog-window,
#admin-games-window,
#admin-hardware-window {
  --window-default-height: 760px;
  --window-default-width: 1100px;
}

#admin-blog-window {
  --window-default-height: 800px;
  --window-default-width: 1200px;
}

.message-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.message-card {
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.message-card.is-unread {
  border-left: 3px solid var(--accent);
}

.message-card h3 {
  margin: 0;
  font-size: 0.85rem;
}

.message-card time,
.message-card a {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.63rem;
}

.message-card a {
  color: var(--accent);
}

.message-card > p {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.shell.is-closing {
  animation: close-interface 500ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
  pointer-events: none;
}

.shell.is-maximized {
  width: min(1280px, calc(100% - 32px));
}

.shell.is-minimized {
  display: none;
}

.fake-desktop[hidden] {
  display: none;
}

.fake-desktop {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  padding: 30px 28px 82px;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 24%, rgba(var(--accent-rgb), 0.18), transparent 32%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.12), rgba(var(--accent-rgb), 0.05));
}

.fake-desktop::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "BITS";
  display: grid;
  place-items: center;
  color: rgba(var(--accent-rgb), 0.035);
  font-size: clamp(9rem, 38vw, 34rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 1;
}

.desktop-screensaver {
  position: fixed;
  z-index: 10001;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #02030a;
  cursor: none;
}

.desktop-screensaver[hidden] {
  display: none;
}

.desktop-screensaver canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fake-desktop-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 104px);
  grid-auto-rows: 112px;
  grid-auto-flow: column;
  align-content: start;
  justify-content: start;
  gap: 16px 12px;
  height: calc(100dvh - 112px);
}

.fake-desktop-icons button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid transparent;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.fake-desktop-icons button:hover,
.fake-desktop-icons button:focus-visible {
  border-color: var(--border);
  outline: none;
  background: rgba(var(--accent-rgb), 0.12);
}

.fake-desktop-icons button[hidden],
.fake-process-row[hidden],
.fake-arg-action[hidden] {
  display: none;
}

.fake-desktop-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--panel);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  font-weight: 700;
  text-shadow: none;
}

.fake-desktop-icon-folder {
  position: relative;
  height: 38px;
  margin-top: 14px;
  background: rgba(var(--accent-rgb), 0.18);
}

.fake-desktop-icon-folder::before {
  position: absolute;
  bottom: 100%;
  left: -1px;
  width: 24px;
  height: 9px;
  border: 1px solid var(--accent);
  border-bottom: 0;
  content: "";
  background: rgba(var(--accent-rgb), 0.18);
}

.fake-recycle-bin.is-playing-dead .fake-desktop-icon {
  border-color: var(--danger);
  color: var(--danger);
  animation: fake-playing-dead-twitch 2.4s steps(1) infinite;
}

.fake-arg-signal .fake-desktop-icon {
  border-style: dashed;
  animation: fake-arg-signal-pulse 2.8s steps(2) infinite;
}

.fake-arg-signal.is-reconstructed .fake-desktop-icon {
  border-style: solid;
  box-shadow:
    0 0 18px rgba(var(--accent-rgb), 0.36),
    5px 5px 0 rgba(0, 0, 0, 0.25);
}

@keyframes fake-arg-signal-pulse {
  50% {
    color: var(--warning);
    opacity: 0.58;
  }
}

.fake-playing-dead,
.fake-desktop-app {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100% - 32px));
  overflow: hidden;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.34), var(--shadow);
  transform: translate(-50%, -50%);
  animation: desktop-window-open 180ms steps(3);
}

.fake-playing-dead[hidden],
.fake-desktop-app[hidden],
.fake-action-center[hidden] {
  display: none;
}

.fake-playing-dead > header,
.fake-desktop-app > header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 42px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.fake-playing-dead > header strong,
.fake-desktop-app > header strong {
  align-self: center;
  padding: 0 14px;
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.fake-playing-dead > header button,
.fake-desktop-app > header button {
  width: 44px;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.fake-playing-dead > header button:hover,
.fake-playing-dead > header button:focus-visible,
.fake-desktop-app > header button:hover,
.fake-desktop-app > header button:focus-visible {
  color: #fff;
  outline: none;
  background: #c42b1c;
}

.fake-playing-dead > div,
.fake-desktop-app > div {
  padding: 24px;
}

.fake-playing-dead h2,
.fake-desktop-app h2 {
  margin: 10px 0 20px;
  font-size: clamp(1rem, 4vw, 1.35rem);
}

.fake-playing-dead dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.fake-playing-dead dl div {
  display: grid;
  grid-template-columns: minmax(110px, 0.5fr) 1fr;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.fake-playing-dead dt,
.fake-playing-dead dd {
  margin: 0;
  font-size: 0.68rem;
}

.fake-playing-dead dt {
  color: var(--muted);
}

.fake-playing-dead dd {
  color: var(--accent);
}

.fake-playing-dead-message {
  min-height: 2.9em;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.fake-task-manager {
  width: min(760px, calc(100% - 32px));
}

.fake-process-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.fake-process-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 70px 90px 100px;
  align-items: center;
  min-width: 520px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.fake-process-row > span {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.66rem;
}

.fake-process-row > span:first-child {
  color: var(--ink);
}

.fake-process-heading {
  border-color: transparent;
  background: transparent;
}

.fake-process-heading > span {
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.fake-process-row button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
}

.fake-process-row button:hover,
.fake-process-row button:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.fake-process-row button:disabled {
  color: var(--muted);
  background: transparent;
  cursor: default;
}

.fake-process-row.is-ended {
  opacity: 0.48;
}

.fake-arg-process {
  border-style: dashed;
  box-shadow: inset 3px 0 0 var(--warning);
}

.fake-app-status {
  min-height: 1.5em;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.fake-cobits {
  width: min(680px, calc(100% - 32px));
}

.fake-cobits-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.fake-cobits-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fake-cobits-actions button,
.fake-cobits-clear {
  padding: 6px 8px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

.fake-cobits-clear {
  flex: 0 0 auto;
  color: var(--muted);
}

.fake-cobits-actions button:hover,
.fake-cobits-actions button:focus-visible,
.fake-cobits-clear:hover,
.fake-cobits-clear:focus-visible {
  border-color: var(--accent);
  outline: none;
  background: rgba(var(--accent-rgb), 0.12);
}

.fake-cobits-actions button:disabled,
.fake-cobits-clear:disabled {
  cursor: wait;
  opacity: 0.45;
}

.fake-cobits.is-calculating-impossible {
  animation: cobits-impossible-calculation 900ms steps(2);
}

@keyframes cobits-impossible-calculation {
  0%,
  100% {
    filter: none;
    transform: translate(-50%, -50%);
  }

  20% {
    filter: hue-rotate(90deg) contrast(1.4);
    transform: translate(calc(-50% + 5px), calc(-50% - 2px));
  }

  45% {
    filter: invert(0.8);
    transform: translate(calc(-50% - 4px), calc(-50% + 3px));
  }

  70% {
    filter: saturate(2) brightness(1.3);
    transform: translate(calc(-50% + 2px), -50%);
  }
}

.fake-cobits-log {
  height: min(330px, 42vh);
  margin-top: 14px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--panel);
}

.fake-cobits-log p {
  margin: 0 0 12px;
  font-size: 0.72rem;
  line-height: 1.55;
}

.fake-cobits-log .is-cobits {
  color: var(--accent);
}

.fake-cobits-log .is-user {
  color: var(--ink);
}

.fake-cobits-state {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

.fake-cobits-state p {
  margin: 0;
}

#fake-cobits-typing.is-thinking {
  color: var(--warning);
  animation: cobits-thinking 720ms steps(2) infinite;
}

@keyframes cobits-thinking {
  50% { opacity: 0.48; }
}

.fake-cobits-form {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.fake-cobits-form label {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.fake-cobits-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.fake-cobits-form input,
.fake-cobits-form button {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  font: inherit;
}

.fake-cobits-form button {
  border-left: 0;
  color: var(--accent);
  cursor: pointer;
}

.fake-cobits-form input:focus,
.fake-cobits-form button:hover,
.fake-cobits-form button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.fake-cobits-form input:disabled,
.fake-cobits-form button:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .fake-cobits-toolbar,
  .fake-cobits-state {
    align-items: stretch;
    flex-direction: column;
  }
}

.fake-vpn-ad {
  width: min(640px, calc(100% - 32px));
}

.fake-vpn-ad > div {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), transparent 48%),
    var(--overlay-bg);
}

.fake-vpn-alert {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--warning);
  color: var(--warning);
  background: rgba(255, 171, 0, 0.08);
  font-size: 0.62rem;
  text-align: center;
}

.fake-vpn-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--accent);
}

.fake-vpn-brand span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50% 50% 45% 45%;
  font-weight: 700;
}

.fake-vpn-brand strong {
  font-size: 1.1rem;
}

.fake-vpn-ad h2 {
  margin-bottom: 10px;
}

.fake-vpn-ad p,
.fake-vpn-ad li,
.fake-vpn-ad small {
  font-size: 0.68rem;
  line-height: 1.55;
}

.fake-vpn-ad ul {
  display: grid;
  gap: 5px;
  margin: 16px 0;
  padding-left: 20px;
  color: var(--muted);
}

.fake-vpn-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0 10px;
}

.fake-vpn-actions button {
  min-height: 48px;
  padding: 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
}

.fake-vpn-actions button:first-child {
  color: var(--bg);
  background: var(--accent);
}

.fake-vpn-actions button:hover,
.fake-vpn-actions button:focus-visible {
  filter: brightness(1.18);
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

.fake-vpn-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.fake-vpn-ad small {
  color: var(--muted);
}

.fake-action-center {
  position: fixed;
  z-index: 46;
  right: 10px;
  bottom: 62px;
  width: min(360px, calc(100% - 20px));
  padding: 16px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);
}

.fake-action-center > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.68rem;
}

.fake-action-center > header span {
  color: var(--muted);
}

.fake-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.fake-quick-actions button {
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
}

.fake-quick-action-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
}

.fake-quick-action-split > button {
  min-width: 0;
}

.fake-quick-action-split > button:first-child {
  border-right: 0;
}

.fake-quick-actions .fake-quick-action-more {
  padding: 0;
  border-left: 1px solid rgba(var(--accent-rgb), 0.42);
  font-size: 1.2rem;
}

.fake-quick-action-split:has([aria-pressed="true"]) .fake-quick-action-more {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.fake-quick-actions button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.fake-wifi-picker {
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.fake-wifi-picker[hidden] {
  display: none;
}

.fake-wifi-picker > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-bottom: 1px solid var(--border);
}

.fake-wifi-picker > header button {
  border: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
}

.fake-wifi-picker > header strong {
  font-size: 0.67rem;
}

.fake-wifi-picker > header span {
  color: var(--muted);
  font-size: 0.48rem;
}

.fake-wifi-picker > p {
  margin: 0;
  padding: 9px;
  border-bottom: 1px dashed var(--border);
  color: var(--accent);
  font-size: 0.56rem;
  line-height: 1.4;
}

.fake-wifi-networks {
  max-height: 220px;
  padding: 5px;
  overflow-y: auto;
}

.fake-wifi-networks button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: 100%;
  gap: 2px 8px;
  padding: 9px;
  border: 1px solid transparent;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fake-wifi-networks button:hover,
.fake-wifi-networks button:focus-visible {
  border-color: var(--border);
  background: rgba(var(--accent-rgb), 0.08);
  outline: none;
}

.fake-wifi-networks button.is-connected {
  border-color: var(--accent);
}

.fake-wifi-networks button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.fake-wifi-networks button > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent);
  font-size: 0.5rem;
  letter-spacing: -0.12em;
}

.fake-wifi-networks strong {
  overflow: hidden;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-wifi-networks small {
  color: var(--muted);
  font-size: 0.5rem;
}

.fake-action-notification {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.6rem;
  line-height: 1.45;
}

.fake-action-notification[hidden] {
  display: none;
}

.fake-action-notification > span {
  color: var(--warning);
  font-weight: 700;
}

.fake-action-notification p {
  margin: 0;
}

.fake-action-notification p span {
  color: var(--muted);
}

.fake-action-notification button {
  padding: 0 3px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
}

.fake-desktop.has-night-bits::after {
  content: "";
  position: fixed;
  z-index: 44;
  inset: 0 0 48px;
  pointer-events: none;
  background: rgba(5, 8, 28, 0.3);
  mix-blend-mode: multiply;
}

.fake-desktop.is-action-chaotic {
  animation: action-center-chaos 140ms steps(2, end) 5;
}

@keyframes action-center-chaos {
  0% { transform: translate(0); }
  33% { transform: translate(3px, -2px); }
  66% { transform: translate(-2px, 1px); }
  100% { transform: translate(0); }
}

.fake-action-center > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.fake-arg-action {
  display: grid;
  width: 100%;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--warning);
  color: var(--ink);
  background: rgba(var(--accent-rgb), 0.08);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fake-arg-action:hover,
.fake-arg-action:focus-visible {
  border-color: var(--accent);
  outline: none;
  background: var(--accent-soft);
}

.fake-arg-action strong {
  color: var(--warning);
  font-size: 0.65rem;
}

.fake-arg-action span {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

@keyframes fake-playing-dead-twitch {
  0%,
  88%,
  100% {
    transform: none;
  }

  90% {
    transform: translateX(2px) rotate(1deg);
  }

  92% {
    transform: translateX(-1px);
  }
}

.fake-taskbar {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  min-height: 54px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--overlay-bg);
  backdrop-filter: blur(var(--material-blur));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.32);
}

.fake-taskbar button,
.fake-start-menu summary {
  padding: 8px 14px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
}

.fake-start-menu {
  position: relative;
}

.fake-start-menu summary {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--accent);
  font-weight: 800;
  list-style: none;
}

.fake-start-menu summary::-webkit-details-marker {
  display: none;
}

.fake-start-menu[open] summary,
.fake-taskbar button:hover,
.fake-taskbar button:focus-visible,
.fake-start-menu summary:hover,
.fake-start-menu summary:focus-visible {
  border-color: var(--accent);
  outline: none;
  background: var(--accent-soft);
}

.fake-start-menu > div {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  display: grid;
  width: min(280px, calc(100vw - 20px));
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--accent);
  background: var(--overlay-bg);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);
}

.fake-start-menu strong {
  padding: 6px 4px 11px;
  color: var(--accent);
  font-size: 0.68rem;
}

.fake-start-menu > div button {
  width: 100%;
  text-align: left;
}

.fake-task-running {
  justify-self: start;
  overflow: hidden;
  width: min(260px, 100%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-task-running span {
  margin-right: 8px;
  color: var(--accent);
}

.fake-desktop-clock {
  display: block;
  min-width: 72px;
  color: var(--muted);
  font-size: 0.68rem;
}

.fake-action-center-trigger {
  display: flex;
  gap: 9px;
  align-items: center;
}

.fake-action-center-trigger > span {
  color: var(--accent);
  font-size: 0.58rem;
}

@media (max-width: 640px) {
  .fake-desktop {
    padding: 18px 12px 78px;
  }

  .fake-desktop-icons {
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    grid-auto-flow: row;
    height: auto;
  }

  .fake-taskbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .fake-action-center-trigger {
    padding-inline: 9px;
  }

  .fake-action-center-trigger .fake-desktop-clock {
    display: none;
  }

  .fake-playing-dead > div,
  .fake-desktop-app > div {
    padding: 18px;
  }
}

.death-screen {
  position: fixed;
  z-index: 155;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(28px, 8vw, 110px);
  overflow: auto;
  color: #fff;
}

.death-screen[hidden] {
  display: none;
}

.death-screen-content {
  width: min(760px, 100%);
}

.death-screen-face {
  margin-bottom: 24px;
  font-size: clamp(3.6rem, 14vw, 7.5rem);
  font-weight: 400;
  line-height: 0.8;
}

.death-screen h2 {
  max-width: 700px;
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 4.5vw, 2.35rem);
  font-weight: 400;
  line-height: 1.35;
}

.death-screen-content > p {
  max-width: 680px;
  line-height: 1.65;
}

.death-screen-progress {
  margin: 30px 0 24px;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
}

.death-screen-progress strong {
  font-size: 1.2em;
}

.death-screen-qr {
  display: flex;
  gap: 15px;
  align-items: center;
  width: min(390px, 100%);
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  line-height: 1.5;
  text-decoration: none;
}

.death-screen-qr img {
  width: clamp(74px, 10vw, 96px);
  height: auto;
  padding: 4px;
  background: #fff;
  image-rendering: pixelated;
}

.death-screen-qr:hover,
.death-screen-qr:focus-visible {
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.death-screen-stop-code {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.65rem, 1.8vw, 0.78rem);
  letter-spacing: 0.04em;
}

.virus-screen {
  isolation: isolate;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    #4b075f;
  animation: virus-screen-flicker 2.8s steps(1, end) infinite;
}

.virus-screen::before,
.virus-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.virus-screen::before {
  opacity: 0.45;
  background:
    linear-gradient(
      transparent 0%,
      rgba(97, 255, 242, 0.28) 49%,
      rgba(255, 42, 245, 0.32) 50%,
      transparent 52%
    );
  background-size: 100% 14%;
  animation: virus-scan-roll 2.2s linear infinite;
}

.virus-screen::after {
  opacity: 0.52;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(97, 255, 242, 0.2) 8% 9%,
      transparent 9% 21%,
      rgba(255, 42, 245, 0.18) 21% 23%
    );
  mix-blend-mode: screen;
  animation: virus-tear-bands 1.7s steps(1, end) infinite;
}

.virus-screen .death-screen-content {
  position: relative;
  animation: virus-content-jump 3.4s steps(1, end) infinite;
}

.virus-screen .death-screen-face {
  color: #fff;
  text-shadow:
    -5px 0 #ff2af5,
    5px 0 #61fff2;
  animation: virus-face-corrupt 1.25s steps(2, end) infinite;
}

.virus-screen h2 {
  position: relative;
  text-shadow:
    -2px 0 #ff2af5,
    2px 0 #61fff2;
}

.virus-screen h2::before,
.virus-screen h2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.virus-screen h2::before {
  color: #61fff2;
  clip-path: inset(8% 0 67% 0);
  transform: translateX(-4px);
  animation: virus-heading-slice-a 900ms steps(2, end) infinite;
}

.virus-screen h2::after {
  color: #ff2af5;
  clip-path: inset(64% 0 8% 0);
  transform: translateX(4px);
  animation: virus-heading-slice-b 1.1s steps(2, end) infinite;
}

.virus-screen.is-glitch-spike .death-screen-content {
  filter: contrast(1.5) saturate(1.8);
  transform: translate(7px, -3px) skewX(-2deg);
}

.virus-screen-label {
  color: #61fff2;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.virus-screen-meter {
  width: min(560px, 100%);
  height: 12px;
  margin: -10px 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.virus-screen-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #61fff2;
  transition: width 300ms linear;
}

.virus-screen button {
  margin-top: 20px;
  padding: 12px 16px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
}

.virus-screen button:hover,
.virus-screen button:focus-visible {
  color: #4b075f;
  background: #fff;
  outline: none;
}

@keyframes virus-scan-roll {
  from { background-position: 0 -20vh; }
  to { background-position: 0 120vh; }
}

@keyframes virus-tear-bands {
  0%, 82%, 100% { clip-path: inset(0); transform: translateX(0); }
  83% { clip-path: inset(12% 0 70% 0); transform: translateX(24px); }
  86% { clip-path: inset(68% 0 14% 0); transform: translateX(-30px); }
  89% { clip-path: inset(42% 0 42% 0); transform: translateX(14px); }
}

@keyframes virus-screen-flicker {
  0%, 73%, 76%, 100% { filter: brightness(1); }
  74% { filter: brightness(1.32) hue-rotate(8deg); }
  75% { filter: brightness(0.72); }
}

@keyframes virus-content-jump {
  0%, 86%, 90%, 100% { transform: translate(0); }
  87% { transform: translate(-5px, 2px); }
  88% { transform: translate(7px, -2px); }
  89% { transform: translate(-2px, -1px); }
}

@keyframes virus-face-corrupt {
  0%, 72%, 100% { transform: skewX(0); }
  74% { transform: skewX(8deg) translateX(-5px); }
  78% { transform: skewX(-5deg) translateX(4px); }
}

@keyframes virus-heading-slice-a {
  0%, 62%, 100% { transform: translateX(-3px); }
  64% { transform: translateX(9px); }
  68% { transform: translateX(-7px); }
}

@keyframes virus-heading-slice-b {
  0%, 76%, 100% { transform: translateX(3px); }
  78% { transform: translateX(-10px); }
  82% { transform: translateX(7px); }
}

.kernel-panic {
  z-index: 165;
  place-items: start;
  padding: clamp(24px, 5vw, 70px);
  color: #e8eceb;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.018) 4px,
      transparent 5px
    ),
    #080a0b;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  animation: kernel-panic-arrival 240ms steps(3);
}

.kernel-panic-content {
  width: min(1100px, 100%);
}

.kernel-panic h2 {
  margin: 24px 0 10px;
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.kernel-panic-lead {
  max-width: none;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #5e6663;
  color: #fff;
  font-size: clamp(0.7rem, 1.8vw, 0.88rem);
  overflow-wrap: anywhere;
}

.kernel-panic-content > p:not(.kernel-panic-lead, .kernel-panic-recovery) {
  color: #aeb6b3;
  font-size: clamp(0.68rem, 1.7vw, 0.82rem);
}

.kernel-panic-log {
  min-height: 18.5em;
  margin: 28px 0;
  padding: 0;
  color: #d4dad8;
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  line-height: 1.75;
  list-style: none;
}

.kernel-panic-log li::before {
  color: #77807d;
  content: "[" counter(list-item, decimal-leading-zero) "] ";
}

.kernel-panic-recovery {
  padding-top: 16px;
  border-top: 1px solid #5e6663;
  color: #aeb6b3;
  font-size: clamp(0.68rem, 1.7vw, 0.82rem);
}

.kernel-panic-recovery strong {
  color: #fff;
}

.black-screen {
  z-index: 160;
  background:
    radial-gradient(circle at 46% 36%, #101010 0, #030303 46%, #000 78%),
    #000;
  box-shadow: inset 0 0 22vw #000;
  animation: black-screen-arrival 300ms steps(3);
}

.black-screen-qr {
  color: rgba(255, 255, 255, 0.34);
}

.black-screen-qr img {
  opacity: 0.035;
}

.black-screen-qr:hover img,
.black-screen-qr:focus-visible img {
  opacity: 0.25;
}

body.is-empty-desktop-armed {
  cursor: crosshair;
}

body.is-black-screen-warning .shell {
  animation: black-screen-warning 380ms steps(2);
}

body.is-black-screen-staging .shell,
body.is-black-screen-staging footer,
body.is-black-screen-staging .desktop-window,
body.is-black-screen-staging .insider-watermark,
body.is-black-screen-staging .name-field,
body.is-black-screen-staging .theme-atmosphere,
body.is-black-screen-staging .binary-rain {
  animation: empty-desktop-collapse 650ms steps(5) forwards;
  pointer-events: none;
}

.green-screen {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 4px,
      rgba(255, 255, 255, 0.035) 5px,
      transparent 7px
    ),
    radial-gradient(circle at 30% 24%, #169f45 0, #087c35 52%, #045825 100%);
  box-shadow: inset 0 0 18vw rgba(0, 40, 8, 0.42);
  animation: green-screen-arrival 440ms steps(6);
}

.green-screen-build {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(0.6rem, 1.6vw, 0.74rem);
  letter-spacing: 0.1em;
}

.insider-watermark {
  position: fixed;
  z-index: 25;
  right: clamp(14px, 3vw, 36px);
  bottom: clamp(14px, 3vw, 32px);
  display: grid;
  max-width: min(360px, calc(100% - 28px));
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: clamp(0.6rem, 1.5vw, 0.72rem);
  line-height: 1.45;
  text-align: right;
  text-shadow: 0 1px 4px var(--bg);
  pointer-events: none;
}

.insider-watermark[hidden] {
  display: none;
}

.insider-watermark strong {
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  font-weight: 600;
}

@keyframes black-screen-arrival {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kernel-panic-arrival {
  from {
    opacity: 0;
    filter: brightness(2);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes status-probed {
  50% {
    color: #ffdd65;
    transform: translateX(2px);
  }
}

@keyframes black-screen-warning {
  0%,
  100% {
    filter: none;
  }
  50% {
    filter: brightness(0.42);
  }
}

@keyframes empty-desktop-collapse {
  0% {
    opacity: 1;
    filter: none;
  }
  35% {
    opacity: 0.78;
    filter: grayscale(1) brightness(0.7);
  }
  58% {
    opacity: 0.2;
    filter: grayscale(1) brightness(0.25);
  }
  100% {
    opacity: 0;
    filter: brightness(0);
  }
}

@keyframes green-screen-arrival {
  from {
    opacity: 0;
    transform: translateY(-12px);
    filter: brightness(1.8);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.red-screen {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(26px, 7vw, 90px);
  overflow: auto;
  color: #fff;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.035) 4px,
      transparent 6px
    ),
    radial-gradient(circle at 24% 18%, #e93535 0, #a20f18 48%, #5a0009 100%);
  box-shadow: inset 0 0 20vw rgba(35, 0, 0, 0.5);
  animation: red-screen-boot 420ms steps(6), red-screen-flicker 4s steps(1) 600ms infinite;
}

.red-screen[hidden] {
  display: none;
}

.red-screen-content {
  width: min(820px, 100%);
}

.red-screen-code {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.62rem, 1.8vw, 0.8rem);
  letter-spacing: 0.14em;
}

.red-screen-face {
  font-size: clamp(3rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 5px 0 rgba(255, 215, 215, 0.22), -4px 0 rgba(40, 0, 0, 0.4);
}

.red-screen h2 {
  margin: 24px 0 10px;
  font-size: clamp(1.5rem, 6vw, 3.5rem);
  letter-spacing: 0.04em;
}

.red-screen-content > p:not(.red-screen-code, .red-screen-recovery) {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.7;
}

.red-screen-diagnostics {
  display: grid;
  gap: 8px;
  margin: 28px 0;
}

.red-screen-diagnostics div {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.red-screen-diagnostics dt {
  color: rgba(255, 255, 255, 0.62);
}

.red-screen-diagnostics dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.shutdown-qr.red-screen-qr {
  position: static;
  box-sizing: border-box;
  width: min(360px, 100%);
  max-width: 100%;
  margin: 0 auto 24px 0;
}

.shutdown-qr.red-screen-qr span {
  min-width: 0;
}

.red-screen-recovery {
  margin: 0 0 12px;
  line-height: 1.7;
}

.red-screen-meter {
  width: min(520px, 100%);
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(35, 0, 0, 0.28);
}

.red-screen-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  transition: width 180ms steps(3);
}

@keyframes red-screen-boot {
  from {
    opacity: 0;
    transform: scale(1.04);
    filter: brightness(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@keyframes red-screen-flicker {
  18% {
    filter: saturate(1.1) brightness(1.04);
  }
  19%,
  76% {
    filter: none;
  }
  77% {
    filter: contrast(1.08);
  }
}

.shutdown-screen {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(36px, 9vw, 120px);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgba(255, 255, 255, 0.025) 50%, transparent 50.3%),
    radial-gradient(circle at 30% 30%, #1769c2 0, #0754ad 48%, #003b91 100%);
  background-size: 11px 100%, auto;
  box-shadow: inset 0 0 14vw rgba(0, 16, 62, 0.28);
  text-align: center;
  animation: bsod-boot 620ms steps(8), bsod-glitch 7s steps(1) 900ms infinite;
}

.shutdown-screen::before {
  position: absolute;
  z-index: -1;
  inset: -15%;
  content: "";
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 4px,
      rgba(135, 205, 255, 0.08) 5px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      transparent 0 24%,
      rgba(255, 255, 255, 0.14) 24.3% 25%,
      transparent 25.3% 68%,
      rgba(0, 19, 83, 0.3) 68.2% 70%,
      transparent 70.3%
    );
  opacity: 0.65;
  pointer-events: none;
  animation: bsod-tear 3.8s steps(2) infinite;
}

.shutdown-qr {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(18px, 4vw, 54px);
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 250px;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.55rem, 1.4vw, 0.72rem);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: left;
  text-decoration: none;
}

.shutdown-qr img {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  padding: 4px;
  background: #fff;
  image-rendering: pixelated;
}

.shutdown-qr:hover,
.shutdown-qr:focus-visible {
  color: #fff;
}

.shutdown-qr:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.shutdown-screen[hidden] {
  display: none;
}

.shutdown-screen[hidden]::before {
  display: none;
}

.shutdown-code {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.62rem, 1.8vw, 0.78rem);
  letter-spacing: 0.12em;
}

.shutdown-face {
  color: #fff;
  font-size: clamp(2.4rem, 12vw, 4.5rem);
  font-weight: 700;
  text-shadow: 4px 0 rgba(60, 220, 255, 0.38), -4px 0 rgba(255, 65, 155, 0.24);
}

.shutdown-screen h2 {
  margin: 20px 0 8px;
  font-size: clamp(1.1rem, 4vw, 2rem);
  text-transform: uppercase;
}

.shutdown-screen > p:not(.shutdown-code) {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.72rem, 2vw, 0.9rem);
}

#reboot-button {
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  color: #fff;
  background: rgba(0, 24, 82, 0.24);
  cursor: pointer;
}

#reboot-button:hover,
#reboot-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  color: #064b9f;
  background: #fff;
}

.footer-select-control,
#mode-button,
#achievements-button,
#settings-button {
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--muted);
  background: var(--bg);
  font-size: inherit;
  letter-spacing: inherit;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.footer-select-control {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.footer-select-control select {
  max-width: 130px;
  min-height: 24px;
  padding: 6px 22px 6px 5px;
  border: 0;
  outline: none;
  color: var(--accent);
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 6px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
  cursor: pointer;
  appearance: none;
}

.footer-select-control option {
  color: var(--ink);
  background: var(--panel);
}

.footer-select-control:hover,
.footer-select-control:focus-within,
#mode-button:hover,
#mode-button:focus-visible,
#achievements-button:hover,
#achievements-button:focus-visible,
#settings-button:hover,
#settings-button:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
  outline: none;
  background: rgba(var(--accent-rgb), 0.06);
}

#mode-button,
#achievements-button,
#settings-button {
  padding: 6px 8px;
  cursor: pointer;
}

.achievement {
  position: fixed;
  z-index: 80;
  top: 16px;
  left: 50%;
  width: min(440px, calc(100% - 32px));
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.2);
  pointer-events: none;
  transform: translateX(-50%);
  animation: achievement-in 220ms steps(3);
}

.achievement[hidden] {
  display: none;
}

.achievement span,
.achievement strong {
  display: block;
}

.achievement span {
  color: var(--accent);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.achievement strong {
  margin-top: 3px;
  font-size: 0.82rem;
}

.achievements-panel {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
}

.achievements-panel[hidden] {
  display: none;
}

.achievements-window {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: var(--shadow), 0 24px 80px rgba(0, 0, 0, 0.7);
}

.achievements-window > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.achievements-window header p,
.achievements-window header h2 {
  margin: 0;
}

.achievements-window header p {
  color: var(--accent);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.achievements-window header h2 {
  margin-top: 3px;
  font-size: 1rem;
}

.achievements-window header .achievements-progress {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

#achievements-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  font-size: 1.2rem;
}

#achievements-close:hover,
#achievements-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.achievements-empty {
  margin: 0;
  padding: 24px 18px;
  color: var(--muted);
  font-size: 0.75rem;
}

.achievements-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 18px 18px;
  list-style: none;
}

.achievement-entry {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  background: rgba(var(--accent-rgb), 0.035);
}

.achievement-entry.is-locked {
  border-style: dotted;
  background: transparent;
}

.achievement-entry.is-locked span {
  color: var(--muted);
}

.achievement-entry.is-locked strong {
  color: var(--muted);
  font-weight: 400;
}

.achievement-entry.is-archived {
  opacity: 0.78;
}

.achievement-entry strong,
.achievement-entry span,
.achievement-entry time {
  display: block;
}

.achievement-entry span {
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.achievement-entry strong {
  margin-top: 4px;
  font-size: 0.78rem;
}

.achievement-entry time {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.6rem;
}

.achievement-data-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 18px;
}

.achievement-data-controls button:last-child {
  border-color: #ff6d7a;
  color: #ff6d7a;
}

.achievement-data-controls button:last-child:hover,
.achievement-data-controls button:last-child:focus-visible {
  color: #070b0f;
  background: #ff6d7a;
}

.session-report {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  width: min(460px, 100%);
  margin: 8px 0 24px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.58);
}

.session-report div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.session-report div:last-child {
  grid-column: 1 / -1;
}

.session-report dt,
.session-report dd {
  margin: 0;
  font-size: 0.64rem;
}

.session-report dt {
  opacity: 0.78;
}

.session-report dd {
  font-weight: 700;
}

.system-overlay {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
}

.desktop-window {
  --window-default-height: 560px;
  --window-default-width: 680px;
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  width: min(var(--window-default-width), calc(100vw - 32px));
  height: min(var(--window-default-height), calc(100vh - 32px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  min-width: 280px;
  min-height: 120px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: var(--window-radius);
  color: var(--ink);
  background: var(--overlay-bg);
  backdrop-filter: blur(var(--material-blur));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.14),
    12px 14px 0 rgba(0, 0, 0, 0.28),
    0 24px 70px rgba(0, 0, 0, 0.55);
  animation: desktop-window-open 180ms steps(3);
}

#about-window {
  --window-default-height: 680px;
  --window-default-width: 760px;
}

#pronouns-window {
  --window-default-height: 620px;
  --window-default-width: 760px;
}

#spotify-window {
  --window-default-height: 680px;
  --window-default-width: 1040px;
}

#source-window {
  --window-default-height: 520px;
  --window-default-width: 720px;
}

#monitor-window {
  --window-default-height: 680px;
  --window-default-width: 760px;
}

#settings-window {
  --window-default-height: 640px;
  --window-default-width: 780px;
}

#resume-window {
  --window-default-height: 680px;
  --window-default-width: 900px;
}

#now-window {
  --window-default-height: 600px;
  --window-default-width: 760px;
}

#changelog-window {
  --window-default-height: 660px;
  --window-default-width: 820px;
}

#games-window {
  --window-default-height: 650px;
  --window-default-width: 880px;
}

#creators-window {
  --window-default-height: 650px;
  --window-default-width: 880px;
}

#hardware-window {
  --window-default-height: 640px;
  --window-default-width: 860px;
}

#guestbook-window {
  --window-default-height: 700px;
  --window-default-width: 900px;
}

#filesystem-window {
  --window-default-height: 620px;
  --window-default-width: 920px;
}

#trace-window {
  --window-default-height: 720px;
  --window-default-width: 900px;
}

#stats-window {
  --window-default-height: 720px;
  --window-default-width: 900px;
}

#notifications-window {
  --window-default-height: 640px;
  --window-default-width: 760px;
}

.desktop-window[hidden] {
  display: none;
}

.desktop-window.is-dragging {
  user-select: none;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.3),
    18px 20px 0 rgba(0, 0, 0, 0.34),
    0 30px 90px rgba(0, 0, 0, 0.65);
}

.desktop-window.is-resizing {
  user-select: none;
}

.desktop-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  cursor: move;
  touch-action: none;
}

.desktop-window-bar > p {
  align-self: center;
  margin: 0;
  padding: 0 12px;
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.desktop-window-controls {
  display: flex;
}

.desktop-window-controls button {
  width: 40px;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.desktop-window-controls button:hover,
.desktop-window-controls button:focus-visible {
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.desktop-window-controls [data-window-close]:hover,
.desktop-window-controls [data-window-close]:focus-visible {
  color: #fff;
  background: #c42b1c;
}

.desktop-window-content {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 22px;
  scrollbar-color: var(--accent) var(--panel);
  scrollbar-width: thin;
}

.desktop-window-content::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.desktop-window-content::-webkit-scrollbar-track {
  border-left: 1px solid var(--border);
  background: var(--panel);
}

.desktop-window-content::-webkit-scrollbar-thumb {
  border: 3px solid var(--panel);
  background: var(--accent);
}

.desktop-window-content::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}

.desktop-window-content::-webkit-scrollbar-corner {
  background: var(--panel);
}

.desktop-window-content > * {
  min-width: 0;
  max-width: none;
}

.desktop-window-content h2 {
  margin: 4px 0 12px;
  color: var(--ink);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.desktop-window-content h2,
.desktop-window-content p,
.desktop-window-content dd,
.desktop-window-content a {
  overflow-wrap: anywhere;
}

.desktop-window-content > p:not(.system-kicker) {
  color: var(--muted);
  line-height: 1.65;
}

.desktop-window.is-minimized {
  width: min(300px, calc(100vw - 32px)) !important;
  min-height: 0;
  height: auto !important;
}

.desktop-window.is-minimized .desktop-window-content {
  display: none;
}

.desktop-window.is-minimized .desktop-window-bar {
  border-bottom: 0;
}

.desktop-window.is-minimized .desktop-window-resize-handle,
.desktop-window.is-minimized .desktop-window-resize-edge {
  display: none;
}

.guestbook-window-content {
  display: grid;
  align-content: start;
  gap: 18px;
}

.guestbook-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(260px, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.guestbook-form label {
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.guestbook-form input,
.guestbook-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--panel-2);
  font: inherit;
  resize: vertical;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.guestbook-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.guestbook-form-actions .form-status {
  margin: 0;
}

.guestbook-form button,
.guestbook-log-header button,
.filesystem-toolbar button {
  padding: 9px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.guestbook-form button:hover,
.guestbook-form button:focus-visible,
.guestbook-log-header button:hover,
.guestbook-log-header button:focus-visible,
.filesystem-toolbar button:hover,
.filesystem-toolbar button:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.guestbook-form button:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: wait;
  background: transparent;
}

.guestbook-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.guestbook-log-header h2 {
  margin: 0;
}

.guestbook-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guestbook-list li {
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.guestbook-list header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent);
}

.guestbook-list time {
  color: var(--muted);
  font-size: 0.66rem;
}

.guestbook-list p {
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-wrap;
}

.filesystem-window-content {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.arg-fragment-button {
  width: 100%;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--danger) 65%, var(--border));
  color: var(--danger);
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  text-align: left;
  cursor: pointer;
}

.arg-fragment-button:hover,
.arg-fragment-button:focus-visible {
  border-color: var(--danger);
  outline: none;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.trace-window-content {
  display: grid;
  align-content: start;
  gap: 16px;
}

.arg-progress,
.arg-page-status {
  margin: 0;
  color: var(--danger);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.arg-fragment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arg-fragment-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
}

.arg-fragment-list li > span {
  grid-row: 1 / 3;
  color: var(--muted);
  font-size: 0.68rem;
}

.arg-fragment-list strong,
.arg-fragment-list code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.arg-fragment-list strong {
  color: var(--muted);
  font-size: 0.68rem;
}

.arg-fragment-list code {
  color: var(--danger);
  font-size: 0.66rem;
}

.arg-fragment-list .is-recovered {
  border-color: var(--accent);
}

.arg-fragment-list .is-recovered strong,
.arg-fragment-list .is-recovered code {
  color: var(--accent);
}

.arg-next-hint {
  margin: 0;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 0.7rem;
}

.arg-assembly,
.arg-archive {
  padding: 16px;
  border: 1px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.arg-assembly {
  display: grid;
  gap: 8px;
  text-align: center;
}

.arg-assembly span {
  color: var(--muted);
  font-size: 0.65rem;
}

.arg-assembly strong {
  color: var(--danger);
  font-size: 1.7rem;
  letter-spacing: 0.25em;
}

.arg-assembly code {
  color: var(--ink);
}

.arg-archive h3 {
  margin: 4px 0 14px;
}

.arg-archive pre {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--border);
  color: var(--danger);
  background: var(--bg);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.arg-outcome-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.arg-outcome-actions button,
.arg-reset {
  padding: 10px 12px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}

.arg-outcome-actions button:hover,
.arg-outcome-actions button:focus-visible,
.arg-reset:hover,
.arg-reset:focus-visible {
  border-color: var(--accent);
  outline: none;
  background: var(--accent-soft);
}

.arg-outcome {
  margin: 14px 0 0;
  color: var(--accent);
  font-size: 0.68rem;
}

.arg-reset {
  justify-self: start;
  color: var(--muted);
}

@media (max-width: 720px) {
  .arg-fragment-list,
  .arg-outcome-actions {
    grid-template-columns: 1fr;
  }
  overflow: hidden;
}

.filesystem-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filesystem-toolbar code {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filesystem-toolbar button:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.filesystem-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(280px, 1.3fr);
  min-height: 0;
  border: 1px solid var(--border);
}

.filesystem-list {
  min-width: 0;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border-right: 1px solid var(--border);
  list-style: none;
  scrollbar-color: var(--accent) var(--panel);
  scrollbar-width: thin;
}

.filesystem-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.filesystem-list button:hover,
.filesystem-list button:focus-visible {
  outline: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.filesystem-list button span {
  color: var(--accent);
  font-size: 0.66rem;
}

.filesystem-list button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filesystem-preview {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  min-height: 0;
  padding: 16px;
}

.filesystem-preview pre {
  min-width: 0;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  line-height: 1.6;
  white-space: pre-wrap;
}

.stats-window-content {
  display: grid;
  align-content: start;
  gap: 16px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.stats-header h2,
.stats-header p,
.stats-section h3,
.stats-privacy p {
  margin: 0;
}

.stats-header h2 {
  margin-top: 5px;
}

.stats-header button {
  padding: 9px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.stats-header button:hover,
.stats-header button:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.stats-header button:disabled {
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
  cursor: wait;
}

.stats-section {
  display: grid;
  gap: 10px;
}

.stats-section h3 {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.stats-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stats-metric-grid article {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.stats-metric-grid span {
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.stats-metric-grid strong {
  overflow: hidden;
  color: var(--accent);
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-overflow: ellipsis;
}

.stats-popular-windows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-popular-windows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.stats-popular-windows li > strong,
.stats-popular-windows li > b {
  color: var(--accent);
}

.stats-popular-windows li > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.stats-popular-windows span {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-popular-windows i {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  background: var(--panel-2);
}

.stats-popular-windows i::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--stats-meter);
  background: var(--accent);
  content: "";
}

.stats-popular-windows .stats-empty {
  display: block;
  color: var(--muted);
}

.stats-privacy {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.55;
}

.stats-privacy strong,
.stats-privacy #stats-privacy-status {
  color: var(--accent);
}

@media (max-width: 600px) {
  .stats-header {
    align-items: stretch;
    flex-direction: column;
  }

  .stats-metric-grid {
    grid-template-columns: 1fr;
  }
}

.notification-center-content {
  display: grid;
  align-content: start;
  gap: 16px;
}

.notification-center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.notification-center-header h2,
.notification-center-header .system-kicker {
  margin: 0;
}

.notification-center-header h2 {
  margin-top: 5px;
}

.notification-center-header button,
.notifications-list button {
  padding: 8px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
}

.notification-center-header button:hover,
.notification-center-header button:focus-visible,
.notifications-list button:hover,
.notifications-list button:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.notification-center-header button:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.notifications-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notifications-list li,
.notification-toast {
  --notice-color: var(--accent);
  position: relative;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--notice-color);
  color: var(--ink);
  background: var(--panel);
}

.notifications-list li[data-type="success"],
.notification-toast[data-type="success"] {
  --notice-color: #4fd88a;
}

.notifications-list li[data-type="warning"],
.notification-toast[data-type="warning"] {
  --notice-color: var(--warning);
}

.notifications-list li[data-type="achievement"],
.notification-toast[data-type="achievement"] {
  --notice-color: #b99aff;
}

.notifications-list li.is-unread {
  box-shadow: inset 4px 0 18px rgba(var(--accent-rgb), 0.12);
}

.notifications-list header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.notifications-list header > div {
  display: grid;
  gap: 4px;
}

.notifications-list header span,
.notification-toast span {
  color: var(--notice-color);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

.notifications-list time {
  color: var(--muted);
  font-size: 0.62rem;
}

.notifications-list p,
.notification-toast p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

.notifications-list button {
  justify-self: end;
}

.notification-toasts {
  position: fixed;
  z-index: 85;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.notification-toast {
  grid-template-columns: minmax(0, 1fr) auto;
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  animation: notification-toast-in 220ms steps(4);
}

.notification-toast > div {
  display: grid;
  gap: 5px;
}

.notification-toast button {
  align-self: start;
  padding: 0 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
}

.notification-toast button:hover,
.notification-toast button:focus-visible {
  outline: 1px solid var(--accent);
  color: var(--ink);
}

.has-unread-notifications {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.24);
}

@keyframes notification-toast-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html[data-boot="pending"] .shell,
html[data-boot="pending"] .desktop-window {
  visibility: hidden;
}

.boot-screen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--ink);
  background: var(--bg);
}

.boot-screen[hidden] {
  display: none;
}

html[data-boot="pending"] .boot-screen[hidden] {
  display: grid;
}

.boot-console {
  width: min(760px, 100%);
  padding: clamp(22px, 5vw, 46px);
  box-sizing: border-box;
  border: 1px solid var(--accent);
  background: var(--panel);
  box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.32);
}

.boot-console h2 {
  margin: 8px 0 24px;
  color: var(--accent);
  font-size: clamp(1.1rem, 3vw, 1.8rem);
}

.boot-log {
  display: grid;
  gap: 10px;
  min-height: 190px;
  margin: 0;
  padding: 0;
  color: var(--ink);
  list-style: none;
  line-height: 1.5;
}

.boot-log li::before {
  content: "> ";
  color: var(--accent);
}

.boot-progress {
  height: 8px;
  margin: 22px 0 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}

.boot-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 180ms steps(3);
}

.endless-boot-page {
  width: 100%;
  height: 100vh;
  height: var(--boot-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.1), transparent 42%),
    var(--bg);
}

.endless-boot-console {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  width: calc(100vw - 4px);
  height: calc(100vh - 4px);
  height: calc(var(--boot-viewport-height, 100dvh) - 4px);
  min-height: 0;
  margin: 2px;
  padding: clamp(18px, 3.5vw, 52px);
  box-sizing: border-box;
  font-family: var(--font-family);
}

.endless-boot-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 28px;
  padding-bottom: clamp(14px, 2vh, 28px);
  border-bottom: 1px solid var(--border);
}

.endless-boot-header h1,
.endless-boot-header p,
.endless-boot-footer p {
  margin: 0;
}

.endless-boot-header h1 {
  margin-top: 8px;
  color: var(--accent);
  font-size: clamp(1.15rem, 3.4vw, 2.5rem);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.34);
}

.endless-boot-indicators {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
  color: var(--muted);
  font-size: clamp(0.48rem, 1.25vw, 0.67rem);
}

.endless-boot-indicators button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.endless-boot-indicators button:hover,
.endless-boot-indicators button:focus-visible {
  outline: 1px solid var(--accent);
  color: var(--accent);
}

.endless-boot-indicators i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: endless-boot-led 2.4s steps(2) infinite;
}

.endless-boot-indicators button:nth-child(2) i {
  animation-delay: -800ms;
}

.endless-boot-indicators button:nth-child(3) i {
  animation-delay: -1600ms;
}

.endless-boot-transmission {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 30px);
  padding: clamp(10px, 1.8vh, 18px) 0;
  border-bottom: 1px solid var(--border);
}

.endless-boot-transmission > span {
  color: var(--accent);
  font-size: clamp(0.48rem, 1.2vw, 0.64rem);
  letter-spacing: 0.1em;
}

.endless-boot-transmission p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(0.62rem, 1.7vw, 0.96rem);
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: endless-boot-transmission 500ms steps(5);
}

.endless-boot-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(18px, 4vw, 48px);
  padding: clamp(10px, 1.8vh, 18px) 0;
  color: var(--muted);
  font-size: clamp(0.5rem, 1.4vw, 0.72rem);
}

.endless-boot-status strong {
  color: var(--ink);
}

.endless-boot-status-button {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--border);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.endless-boot-status-button:hover,
.endless-boot-status-button:focus-visible {
  border-color: var(--accent);
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}

.endless-boot-machine {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.8vw, 22px);
  min-width: 0;
  min-height: 28px;
  padding: 5px 0;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  color: var(--muted);
  font-size: clamp(0.42rem, 1vw, 0.58rem);
  white-space: nowrap;
}

.endless-boot-machine > span,
.endless-boot-post {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.endless-boot-machine strong {
  color: var(--ink);
}

.endless-boot-machine small {
  color: var(--muted);
  font: inherit;
}

.endless-boot-spark {
  display: inline-block;
  width: 14ch;
  overflow: hidden;
  color: var(--accent);
  font: 0.85em/1 var(--font-family);
  letter-spacing: -0.12em;
  opacity: 0.78;
}

html[data-boot-network="offline"] .endless-boot-machine [data-meter="network"] {
  color: #ff6d7a;
}

html[data-boot-network="offline"] .endless-boot-machine [data-meter="network"] i {
  background: #ff6d7a;
  box-shadow: 0 0 7px #ff6d7a;
}

.endless-boot-post {
  min-height: 22px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.endless-boot-post strong {
  min-width: 2.4ch;
  color: var(--accent);
  font-size: 1.2em;
  text-align: center;
}

.endless-boot-post:hover,
.endless-boot-post:focus-visible,
.endless-boot-post[aria-expanded="true"] {
  border-color: var(--accent);
  outline: 0;
  color: var(--accent);
}

.endless-boot-machine [data-meter] i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
}

.endless-boot-machine [data-meter].is-active i {
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent);
  opacity: 1;
  animation: endless-boot-activity 480ms steps(2) infinite;
}

.endless-boot-machine [data-meter].is-hot i {
  background: var(--warning);
  box-shadow: 0 0 7px var(--warning);
}

.endless-boot-eta {
  flex: 0 1 19ch !important;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endless-boot-eta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endless-boot-terminal {
  position: relative;
  display: grid;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

.endless-boot-falling-bits {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.endless-boot-falling-bits span {
  position: absolute;
  top: -1.5em;
  left: var(--falling-bit-x);
  color: var(--accent);
  font: 700 clamp(0.7rem, 1.6vw, 1rem)/1 var(--font-family);
  text-shadow: 0 0 6px var(--accent);
  animation: endless-boot-falling-bit var(--falling-bit-duration) linear both;
}

@keyframes endless-boot-falling-bit {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  12%, 80% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--falling-bit-distance)) rotate(var(--falling-bit-spin));
  }
}

html[data-motion="reduced"] .endless-boot-falling-bits,
html[data-effects="off"] .endless-boot-falling-bits,
html.is-boot-paused .endless-boot-falling-bits,
html.is-boot-powered-off .endless-boot-falling-bits,
html.has-boot-crash .endless-boot-falling-bits {
  display: none;
}

.endless-boot-log {
  position: relative;
  z-index: 1;
  min-height: 0;
  margin: 0;
  padding: 0 8px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(0.56rem, 1.55vw, 0.88rem);
  line-height: 1.55;
  list-style: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 100%);
}

.endless-boot-log li {
  overflow: hidden;
  animation: endless-boot-line 140ms steps(3);
}

.endless-boot-log-entry {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.endless-boot-log-entry > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endless-boot-log-entry > span::before {
  color: var(--accent);
  content: "> ";
}

.endless-boot-log-entry small {
  display: none;
  padding: 2px 0 5px 2ch;
  color: var(--muted);
  font: 0.78em/1.4 var(--font-family);
  white-space: normal;
}

.endless-boot-log li.is-expanded {
  overflow: visible;
}

.endless-boot-log li.is-expanded .endless-boot-log-entry > span {
  overflow: visible;
  white-space: normal;
}

.endless-boot-log li.is-expanded .endless-boot-log-entry small {
  display: block;
}

.endless-boot-log-entry:hover > span,
.endless-boot-log-entry:focus-visible > span {
  color: var(--accent);
}

.endless-boot-log-entry:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 1px;
}

.endless-boot-log li[data-state="warning"] {
  color: var(--warning);
}

.endless-boot-log li[data-state="error"] {
  color: #ff6d7a;
  font-weight: 700;
}

.endless-boot-log li[data-state="rainbow"] .endless-boot-log-entry > span {
  color: transparent;
  background: linear-gradient(
    90deg,
    #ff6d7a,
    #ff9b62,
    #ffdd65,
    #66ff9a,
    #63d8ff,
    #7aa7ff,
    #d99aff
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: endless-boot-rainbow 4s linear infinite;
  font-weight: 700;
}

:root[data-color-scheme="light"] .endless-boot-log li[data-state="error"] {
  color: #b4232f;
}

:root[data-color-scheme="light"] .endless-boot-log li[data-state="rainbow"] .endless-boot-log-entry > span {
  background-image: linear-gradient(
    90deg,
    #b4232f,
    #a44800,
    #746000,
    #087a2a,
    #006a8e,
    #3155a6,
    #743aa2
  );
}

@keyframes endless-boot-rainbow {
  to {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .endless-boot-log li[data-state="rainbow"] .endless-boot-log-entry > span {
    animation: none;
  }
}

html.is-boot-autoscroll-disabled .endless-boot-log {
  overflow-y: auto;
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}

html[data-boot-density="compact"] .endless-boot-log {
  font-size: clamp(0.48rem, 1.25vw, 0.72rem);
  line-height: 1.3;
}

html[data-boot-density="relaxed"] .endless-boot-log {
  font-size: clamp(0.62rem, 1.72vw, 0.96rem);
  line-height: 1.75;
}

.endless-boot-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(7px, 1vh, 12px) 28px;
  align-items: stretch;
  justify-content: stretch;
  gap: 5px;
  padding: clamp(12px, 2vh, 22px) 0 0;
}

.endless-boot-progress {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.46);
}

.endless-boot-progress span {
  display: block;
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, 0.28) 9px 11px),
    var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
  transition: width 180ms steps(5);
}

.endless-boot-footer p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 96px;
  color: var(--muted);
  font-size: clamp(0.48rem, 1.2vw, 0.66rem);
}

.endless-boot-footer p > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endless-boot-footer b {
  flex: none;
  color: var(--accent);
}

html[data-interface-theme="aurora"] .endless-boot-progress span {
  background: linear-gradient(90deg, #38f0bd, #5bc7ff 46%, #a178ff 78%, #ff76c8);
}

html[data-interface-theme="cozy-blossom"] .endless-boot-progress span {
  background: linear-gradient(90deg, #ff8ea8, #ffc58f 48%, #ffb9d3);
}

html[data-interface-theme="mica"] .endless-boot-progress span,
html[data-interface-theme="fluent"] .endless-boot-progress span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 48%),
    linear-gradient(90deg, #1583dc, #57b7ff);
}

html[data-interface-theme="midnight-oled"] .endless-boot-progress span {
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

html[data-interface-theme="macos"] .endless-boot-progress {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

html[data-interface-theme="macos"] .endless-boot-progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, #2997ff, #64d2ff);
}

html[data-interface-theme="terminal"] .endless-boot-progress span {
  background: repeating-linear-gradient(90deg, #66ff9a 0 10px, transparent 10px 12px);
  box-shadow: 0 0 10px rgba(102, 255, 154, 0.55);
}

html[data-interface-theme="vaporwave"] .endless-boot-progress span {
  background: linear-gradient(90deg, #ff60e2, #a178ff 48%, #4ae1ff);
}

html[data-interface-theme="amber-crt"] .endless-boot-progress span {
  background: repeating-linear-gradient(90deg, #ffb237 0 10px, transparent 10px 12px);
  box-shadow: 0 0 10px rgba(255, 178, 55, 0.55);
}

html[data-interface-theme="y2k-silver"] .endless-boot-progress span {
  background:
    linear-gradient(180deg, #fff, transparent 42%),
    linear-gradient(90deg, #6caeff, #c0e0ff 52%, #8194ff);
}

html[data-interface-theme="cyberpunk"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(120deg, transparent 0 7px, rgba(0, 0, 0, 0.45) 7px 9px),
    linear-gradient(90deg, #f5f336, #ff2d9d);
}

html[data-interface-theme="dos-blue"] .endless-boot-progress span {
  background: repeating-linear-gradient(90deg, #55ffff 0 9px, transparent 9px 11px);
  box-shadow: none;
}

html[data-interface-theme="solarized"] .endless-boot-progress span {
  background: linear-gradient(90deg, #2aa198, #78c7ff);
}

html[data-interface-theme="nord"] .endless-boot-progress span {
  background: linear-gradient(90deg, #88c0d0, #a7d8e5 55%, #b48ead);
}

html[data-interface-theme="dracula"] .endless-boot-progress span {
  background: linear-gradient(90deg, #bd93f9, #ff79c6);
}

html[data-interface-theme="candy-pop"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, #ff75b7, #ffdc6f 50%, #6de1ff);
}

html[data-interface-theme="rgb"] .endless-boot-progress span {
  background: linear-gradient(90deg, #ff4057, #ffcc42, #52e676, #4dc7ff, #b97aff, #ff4057);
  background-size: 200% 100%;
  animation: rgb-progress-shift 3s linear infinite;
}

html[data-interface-theme="aero-glass"] .endless-boot-progress {
  border-color: rgba(235, 250, 255, 0.7);
  border-radius: 999px;
  background: rgba(4, 30, 55, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

html[data-interface-theme="aero-glass"] .endless-boot-progress span {
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 48%),
    linear-gradient(90deg, #1b91d4, #76d0ff);
}

html[data-interface-theme="minebits"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.35) 12px 15px),
    linear-gradient(180deg, #a4d878 0 48%, #6c9c43 48%);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

html[data-interface-theme="catppuccin"] .endless-boot-progress span {
  background: linear-gradient(90deg, #cba6f7, #f5c2e7 50%, #89b4fa);
}

html[data-interface-theme="gruvbox"] .endless-boot-progress span {
  background: linear-gradient(90deg, #fe8019, #fabd2f 50%, #b8bb26);
}

html[data-interface-theme="tokyo-night"] .endless-boot-progress span {
  background: linear-gradient(90deg, #7aa2f7, #bb9af7 60%, #f7768e);
}

html[data-interface-theme="monokai"] .endless-boot-progress span {
  background: linear-gradient(90deg, #f92672, #fd971f 33%, #e6db74 55%, #a6e22e 78%, #66d9ef);
}

html[data-interface-theme="game-bit"] .endless-boot-progress span {
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px);
  box-shadow: none;
}

html[data-interface-theme="high-contrast"] .endless-boot-progress span {
  background: var(--accent);
  box-shadow: none;
}

html[data-interface-theme="ocean"] .endless-boot-progress span {
  background: linear-gradient(90deg, #1a8fa8, #3fd8d0 60%, #b8f5ef);
}

html[data-interface-theme="coffee"] .endless-boot-progress span {
  background: linear-gradient(90deg, #5a3420, #8c522d 40%, #e0a96d 85%, #f3e6d6);
}

html[data-interface-theme="matrix"] .endless-boot-progress span {
  background: repeating-linear-gradient(90deg, #00ff41 0 3px, #008f2a 3px 5px);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.55);
}

html[data-interface-theme="sunset"] .endless-boot-progress span {
  background: linear-gradient(90deg, #6a2c70, #ff5f8f 45%, #ffa36c 80%, #ffd36e);
}

html[data-interface-theme="winter"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 5px, transparent 5px 10px),
    linear-gradient(90deg, #8ee7ff, #d8f7ff);
}

html[data-interface-theme="spooky"] .endless-boot-progress span {
  background: linear-gradient(90deg, #ff8a2a, #9c4dff 58%, #56d66b);
  box-shadow: 0 0 12px rgba(255, 107, 31, 0.48);
}

html[data-interface-theme="christmas"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(135deg, #d82929 0 8px, #fff7e8 8px 14px, #168447 14px 22px);
}

html[data-interface-theme="new-year"] .endless-boot-progress span {
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #f5ca57, #fff2a6 48%, #9f7cff);
  box-shadow: 0 0 13px rgba(245, 202, 87, 0.58);
}

@keyframes rgb-progress-shift {
  to {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-interface-theme="rgb"] .endless-boot-progress span {
    animation: none;
  }
}

.endless-boot-settings {
  position: absolute;
  z-index: 5;
  right: clamp(8px, 1.5vw, 20px);
  bottom: clamp(8px, 1.5vw, 18px);
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  gap: 6px;
}

.endless-boot-settings > a,
.endless-boot-settings > button {
  display: grid;
  place-items: center;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  cursor: pointer;
  font: 0.52rem/1 var(--font-family);
  opacity: 0.82;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.endless-boot-settings > a {
  padding: 0 8px;
}

.endless-boot-settings > button {
  width: 28px;
  font: 1rem/1 sans-serif;
}

.endless-boot-settings > a:hover,
.endless-boot-settings > a:focus-visible,
.endless-boot-settings > button:hover,
.endless-boot-settings > button:focus-visible,
.endless-boot-settings > button[aria-expanded="true"] {
  border-color: var(--accent);
  outline: none;
  color: var(--accent);
  opacity: 1;
}

.endless-boot-settings-panel {
  grid-column: 1 / -1;
  display: grid;
  width: min(210px, calc(100vw - 24px));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.52);
  max-height: calc(100vh - 54px);
  max-height: calc(var(--boot-viewport-height, 100dvh) - 54px);
  overflow: auto;
}

.endless-boot-settings-panel[hidden] {
  display: none;
}

.endless-boot-settings-panel p {
  margin: 0;
  color: var(--accent);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.endless-boot-settings-panel label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.46rem;
}

.endless-boot-settings-panel select,
.endless-boot-setting-action {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 6px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.55rem;
}

.endless-boot-settings-panel select:focus-visible,
.endless-boot-setting-action:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.endless-boot-setting-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.endless-boot-setting-check input {
  accent-color: var(--accent);
}

.endless-boot-setting-action {
  cursor: pointer;
  text-align: left;
}

.endless-boot-setting-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.endless-boot-settings-panel .endless-boot-settings-hint {
  color: var(--muted);
  font-size: 0.38rem;
  line-height: 1.45;
}

.endless-boot-command {
  position: absolute;
  z-index: 8;
  right: clamp(12px, 3vw, 48px);
  bottom: clamp(54px, 8vh, 88px);
  left: clamp(12px, 3vw, 48px);
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.72);
}

.endless-boot-command[hidden],
.endless-boot-event[hidden],
.endless-boot-hardware[hidden],
.endless-boot-inspector[hidden],
.endless-boot-achievement[hidden],
.endless-boot-crash[hidden],
.endless-boot-power-restore[hidden] {
  display: none;
}

.endless-boot-command-output {
  min-height: 2.8em;
  max-height: 8em;
  overflow: auto;
  color: var(--muted);
  font-size: clamp(0.48rem, 1.2vw, 0.62rem);
  line-height: 1.45;
  white-space: pre-wrap;
}

.endless-boot-command form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 0.65rem;
}

.endless-boot-command input,
.endless-boot-command button {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}

.endless-boot-command button {
  cursor: pointer;
}

.endless-boot-command input:focus-visible,
.endless-boot-command button:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.endless-boot-event {
  position: absolute;
  z-index: 9;
  inset: clamp(18px, 6vw, 90px);
  display: grid;
  place-content: center;
  padding: clamp(20px, 5vw, 60px);
  border: 2px solid var(--warning);
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 94%, #000);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.72);
  text-align: center;
  clip-path: inset(-100vmax);
  animation: endless-boot-event-in 220ms steps(3);
}

.endless-boot-event p {
  margin: 8px 0;
  color: var(--muted);
  font-size: clamp(0.52rem, 1.2vw, 0.72rem);
}

.endless-boot-event h2 {
  margin: 8px 0;
  color: var(--warning);
  font-size: clamp(1rem, 4vw, 2.7rem);
}

.endless-boot-event[data-kind="bsod"] {
  border-color: #fff;
  color: #fff;
  background: #0000aa;
}

.endless-boot-event[data-kind="bsod"] h2,
.endless-boot-event[data-kind="bsod"] p {
  color: #fff;
}

.endless-boot-event[data-kind="panic"] {
  border-color: #fff;
  color: #fff;
  background: #000;
}

.endless-boot-event[data-kind="bios"] {
  border-color: #aaa;
  color: #000;
  background: #c0c0c0;
}

.endless-boot-event[data-kind="bios"] h2,
.endless-boot-event[data-kind="bios"] p {
  color: #000080;
}

.endless-boot-event[data-kind="recovery"] {
  border-color: #fff;
  color: #fff;
  background: #087cca;
}

.endless-boot-event[data-kind="recovery"] h2,
.endless-boot-event[data-kind="recovery"] p {
  color: #fff;
}

.endless-boot-hardware {
  position: absolute;
  z-index: 10;
  inset: clamp(14px, 5vw, 72px);
  display: grid;
  align-content: center;
  width: min(620px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  margin: auto;
  padding: clamp(14px, 3vw, 28px);
  overflow: auto;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 97%, #000);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.76), 0 0 30px rgba(var(--accent-rgb), 0.2);
  clip-path: inset(-100vmax);
}

.endless-boot-hardware header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.endless-boot-hardware h2,
.endless-boot-hardware p {
  margin: 0;
}

.endless-boot-hardware header p {
  color: var(--muted);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.endless-boot-hardware h2 {
  margin-top: 5px;
  color: var(--accent);
  font-size: clamp(0.9rem, 3vw, 1.4rem);
}

.endless-boot-hardware header button {
  flex: none;
  width: 30px;
  min-height: 30px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: 0.7rem/1 var(--font-family);
}

.endless-boot-hardware header button:hover,
.endless-boot-hardware header button:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  color: var(--accent);
}

.endless-boot-hardware dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 18px;
  margin: 16px 0;
  font-size: clamp(0.5rem, 1.4vw, 0.7rem);
}

.endless-boot-hardware dt {
  color: var(--muted);
}

.endless-boot-hardware dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.endless-boot-hardware > p {
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.5;
}

.endless-boot-inspector {
  position: absolute;
  z-index: 12;
  inset: clamp(10px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 98%, #000);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.78), 0 0 34px rgba(var(--accent-rgb), 0.24);
  clip-path: inset(-100vmax);
}

.endless-boot-inspector header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.endless-boot-inspector h2,
.endless-boot-inspector p {
  margin: 0;
}

.endless-boot-inspector header p {
  color: var(--muted);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.endless-boot-inspector h2 {
  margin-top: 5px;
  color: var(--accent);
  font-size: clamp(0.8rem, 2.6vw, 1.3rem);
}

.endless-boot-inspector header button,
.endless-boot-crash button {
  flex: none;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 0.65rem/1 var(--font-family);
}

.endless-boot-inspector header button:focus-visible,
.endless-boot-inspector header button:hover,
.endless-boot-crash button:focus-visible,
.endless-boot-crash button:hover {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.endless-boot-inspector-content {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.endless-boot-records {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.endless-boot-records li {
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(var(--accent-rgb), 0.035);
}

.endless-boot-records li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.endless-boot-records strong,
.endless-boot-records time,
.endless-boot-records p,
.endless-boot-records small,
.endless-boot-records-empty {
  margin: 0;
  font-size: clamp(0.46rem, 1.3vw, 0.62rem);
  line-height: 1.5;
}

.endless-boot-records strong {
  color: var(--ink);
}

.endless-boot-records time,
.endless-boot-records small {
  color: var(--accent);
}

.endless-boot-records p,
.endless-boot-records-empty {
  margin-top: 5px;
  color: var(--muted);
}

.endless-boot-achievement {
  position: fixed;
  z-index: 25;
  right: clamp(10px, 3vw, 36px);
  top: clamp(10px, 3vw, 36px);
  width: min(320px, calc(100vw - 20px));
  padding: 12px 14px;
  border: 1px solid #ffda62;
  color: #fff5bd;
  background: rgba(20, 15, 0, 0.96);
  box-shadow: 0 0 22px rgba(255, 218, 98, 0.28);
  pointer-events: none;
  animation: endless-boot-achievement-in 380ms steps(5);
}

.endless-boot-achievement p {
  margin: 0;
}

.endless-boot-achievement p:first-child {
  color: #ffda62;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
}

.endless-boot-achievement p:last-child {
  margin-top: 7px;
  font-size: clamp(0.62rem, 2vw, 0.86rem);
}

.endless-boot-crash {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  color: #fff;
  background: #0877d1;
  font-family: var(--font-family);
}

.endless-boot-crash::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.endless-boot-crash-content {
  width: min(920px, 100%);
  padding: clamp(22px, 7vw, 82px);
}

.endless-boot-crash-label {
  margin: 0 0 clamp(18px, 4vh, 40px);
  font-size: clamp(0.5rem, 1.3vw, 0.75rem);
  letter-spacing: 0.12em;
}

.endless-boot-crash-face {
  margin: 0 0 clamp(10px, 2vh, 20px);
  font-size: clamp(2.7rem, 11vw, 7rem);
  line-height: 1;
}

.endless-boot-crash h2 {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(1.1rem, 4.2vw, 2.6rem);
  line-height: 1.2;
}

.endless-boot-crash-copy {
  min-height: 1.5em;
  margin: clamp(16px, 4vh, 36px) 0 8px;
  font-size: clamp(0.6rem, 1.8vw, 0.9rem);
}

.endless-boot-crash-meter {
  width: min(520px, 100%);
  height: 10px;
  border: 1px solid currentColor;
}

.endless-boot-crash-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: currentColor;
  transition: width 600ms steps(6);
}

.endless-boot-crash-progress {
  margin: 8px 0 clamp(18px, 4vh, 34px);
  font-size: clamp(0.7rem, 2vw, 1rem);
}

.endless-boot-crash-code,
.endless-boot-crash-fault,
.endless-boot-crash-build {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: clamp(0.48rem, 1.35vw, 0.7rem);
}

.endless-boot-crash button {
  margin-top: clamp(18px, 4vh, 34px);
  padding: 9px 13px;
}

.endless-boot-crash[data-kind="black"] {
  color: #ddd;
  background: #050505;
}

.endless-boot-crash[data-kind="black"] .endless-boot-crash-content {
  border-left: 1px solid #555;
}

.endless-boot-crash[data-kind="green"] {
  color: #fff;
  background: #008744;
}

.endless-boot-crash[data-kind="green"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.07) 3px 4px);
}

.endless-boot-crash[data-kind="red"] {
  color: #fff;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 180, 120, 0.16), transparent 34%),
    #a20e18;
}

.endless-boot-crash[data-kind="red"] h2,
.endless-boot-crash[data-kind="red"] .endless-boot-crash-face {
  text-shadow: 3px 0 rgba(0, 0, 0, 0.22);
}

.endless-boot-crash[data-kind="purple"] {
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 0, 240, 0.3), transparent 34%),
    linear-gradient(132deg, #180020, #4d075d 58%, #120018);
  animation: endless-boot-virus-flicker 5s steps(2) infinite;
}

.endless-boot-crash[data-kind="purple"]::before {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(0, 255, 255, 0.12) 9% 9.4%, transparent 9.4% 72%, rgba(255, 0, 120, 0.1) 72% 72.5%, transparent 72.5%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.2) 4px 6px);
  animation: endless-boot-virus-tear 1.7s steps(3) infinite;
}

.endless-boot-crash[data-kind="purple"] h2 {
  text-shadow: -3px 0 #00e5ff, 3px 0 #ff127d;
  animation: endless-boot-virus-heading 1.3s steps(2) infinite;
}

.endless-boot-crash[data-kind="purple"] .endless-boot-crash-meter span {
  background: linear-gradient(90deg, #00e5ff, #ff127d);
}

html.is-boot-user-idle .endless-boot-console {
  opacity: 0.86;
}

html.is-boot-user-away .endless-boot-console {
  opacity: 0.68;
}

.endless-boot-console {
  transform: translate(var(--boot-shift-x, 0), var(--boot-shift-y, 0));
  transition: transform 4s ease, opacity 2s ease;
}

.endless-boot-bits-particles {
  position: fixed;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.endless-boot-bits-particles i {
  position: absolute;
  left: var(--bit-x);
  top: var(--bit-y);
  color: var(--accent);
  font: 700 clamp(0.75rem, 2vw, 1.3rem)/1 var(--font-family);
  text-shadow: 0 0 8px var(--accent);
  animation: endless-boot-loose-bit 2.3s var(--bit-delay) ease-out both;
}

#endless-boot-power-restore {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  border: 0;
  color: var(--accent);
  background: var(--bg);
  cursor: pointer;
  font: clamp(0.62rem, 2vw, 1rem)/1.5 var(--font-family);
}

#endless-boot-power-restore[data-state="opening"] {
  animation: endless-boot-power-off 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#endless-boot-power-restore[data-state="closing"] {
  pointer-events: none;
  animation: endless-boot-power-on 650ms cubic-bezier(0.7, 0, 0.3, 1) both;
}

@keyframes endless-boot-power-off {
  0% {
    clip-path: inset(50% 0 50% 0);
    color: transparent;
    filter: brightness(1.8);
    box-shadow: inset 0 0 0 100vmax var(--accent);
  }
  35% {
    clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0);
    color: transparent;
    box-shadow: inset 0 0 0 100vmax var(--accent);
  }
  70% {
    clip-path: inset(0);
    color: transparent;
    filter: brightness(1);
    box-shadow: none;
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes endless-boot-power-on {
  0% {
    clip-path: inset(0);
  }
  30% {
    clip-path: inset(0);
    color: transparent;
    box-shadow: none;
  }
  65% {
    clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0);
    color: transparent;
    filter: brightness(1.8);
    box-shadow: inset 0 0 0 100vmax var(--accent);
  }
  100% {
    clip-path: inset(50% 0 50% 0);
    color: transparent;
    box-shadow: inset 0 0 0 100vmax var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  #endless-boot-power-restore {
    animation: none !important;
  }
}

html.is-boot-paused .endless-boot-indicators i {
  animation-play-state: paused;
  opacity: 0.35;
}

html.is-boot-presentation .endless-boot-settings {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

html.is-boot-presentation .endless-boot-settings.is-revealed,
html.is-boot-presentation .endless-boot-settings:focus-within {
  opacity: 1;
  pointer-events: auto;
}

@keyframes endless-boot-achievement-in {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
}

@keyframes endless-boot-virus-flicker {
  48% {
    filter: none;
  }

  49% {
    filter: contrast(1.3) hue-rotate(8deg);
  }

  51% {
    filter: none;
  }
}

@keyframes endless-boot-virus-tear {
  40% {
    transform: translateX(0);
  }

  42% {
    transform: translateX(7px);
  }

  45% {
    transform: translateX(-4px);
  }

  47% {
    transform: translateX(0);
  }
}

@keyframes endless-boot-virus-heading {
  70% {
    transform: translateX(0);
  }

  72% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes endless-boot-event-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes endless-boot-loose-bit {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(0);
  }

  20% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-120px) rotate(var(--bit-spin));
  }
}

@keyframes endless-boot-led {
  50% {
    opacity: 0.38;
  }

  @keyframes endless-boot-activity {
    50% {
      opacity: 0.42;
    }
  }
}

@keyframes endless-boot-line {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes endless-boot-transmission {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}

@media (orientation: portrait) {
  .endless-boot-console {
    padding: clamp(18px, 5vw, 44px);
  }

  .endless-boot-header {
    display: grid;
  }

  .endless-boot-indicators {
    justify-content: flex-start;
  }

  .endless-boot-log {
    font-size: clamp(0.54rem, 2.1vw, 0.82rem);
  }
}

@media (max-width: 700px) {
  .endless-boot-machine {
    gap: 9px;
  }

  .endless-boot-spark {
    display: none;
  }

  .endless-boot-host,
  .endless-boot-machine [data-meter="network"] {
    display: none;
  }
}

@media (max-width: 440px) {
  .endless-boot-machine [data-meter="memory"],
  .endless-boot-machine [data-meter="disk"] {
    display: none;
  }

  .endless-boot-post > span {
    display: none;
  }

  .endless-boot-hardware {
    inset: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    padding: 12px;
  }

  .endless-boot-hardware dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .endless-boot-hardware dd {
    margin-bottom: 6px;
  }

  .endless-boot-inspector {
    inset: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }

  .endless-boot-records li > div {
    display: grid;
    gap: 2px;
  }
}

@media (max-height: 560px) {
  .endless-boot-console {
    padding: 10px 14px;
  }

  .endless-boot-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
  }

  .endless-boot-header .system-kicker {
    font-size: 0.43rem;
  }

  .endless-boot-header h1 {
    margin-top: 2px;
    font-size: clamp(0.68rem, 3.6vw, 0.95rem);
  }

  .endless-boot-indicators {
    gap: 5px 9px;
    font-size: 0.39rem;
  }

  .endless-boot-indicators i {
    width: 5px;
    height: 5px;
  }

  .endless-boot-transmission {
    gap: 7px;
    padding: 6px 0;
  }

  .endless-boot-transmission > span {
    font-size: 0.38rem;
  }

  .endless-boot-transmission p {
    font-size: 0.5rem;
  }

  .endless-boot-status {
    gap: 4px 12px;
    padding: 5px 0;
    font-size: 0.39rem;
  }

  .endless-boot-machine {
    min-height: 20px;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.37rem;
  }

  .endless-boot-host,
  .endless-boot-machine [data-meter="memory"],
  .endless-boot-machine [data-meter="network"] {
    display: none;
  }

  .endless-boot-post {
    min-height: 18px;
    padding: 1px 4px;
  }

  .endless-boot-log {
    font-size: clamp(0.42rem, 1.8vw, 0.52rem);
    line-height: 1.35;
  }

  .endless-boot-footer {
    grid-template-rows: 5px 28px;
    gap: 3px;
    padding-top: 6px;
  }

  .endless-boot-progress {
    height: 5px;
  }

  .endless-boot-footer p {
    padding-right: 88px;
    font-size: 0.38rem;
  }

  .endless-boot-settings {
    right: 5px;
    bottom: 5px;
  }

  .endless-boot-settings > button {
    width: 24px;
    height: 24px;
    font-size: 0.78rem;
  }

  .endless-boot-settings-panel {
    width: min(170px, calc(100vw - 12px));
    padding: 7px;
  }

  .endless-boot-command {
    right: 8px;
    bottom: 38px;
    left: 8px;
    gap: 4px;
    padding: 6px;
  }

  .endless-boot-command form {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 4px;
    font-size: 0.5rem;
  }

  .endless-boot-event {
    inset: 8px;
    padding: 14px;
  }

  .endless-boot-hardware {
    inset: 6px;
    width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    padding: 10px;
  }

  .endless-boot-hardware header {
    padding-bottom: 6px;
  }

  .endless-boot-hardware dl {
    gap: 3px 12px;
    margin: 8px 0;
    font-size: 0.42rem;
  }

  .endless-boot-inspector {
    inset: 6px;
    width: calc(100% - 12px);
    max-height: calc(100% - 12px);
  }

  .endless-boot-inspector header,
  .endless-boot-inspector-content {
    padding: 9px;
  }

  .endless-boot-crash {
    place-items: start;
  }

  .endless-boot-crash-content {
    padding: 14px;
  }

  .endless-boot-crash-label {
    margin-bottom: 10px;
  }

  .endless-boot-crash-face {
    margin-bottom: 5px;
    font-size: 2rem;
  }

  .endless-boot-crash h2 {
    font-size: 0.86rem;
  }

  .endless-boot-crash-copy {
    margin: 10px 0 6px;
  }

  .endless-boot-crash-progress {
    margin-bottom: 10px;
  }

  .endless-boot-crash button {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .endless-boot-indicators i,
  .endless-boot-machine [data-meter].is-active i,
  .endless-boot-log li,
  .endless-boot-transmission p,
  .endless-boot-event {
    animation: none;
  }

  .endless-boot-console {
    transform: none;
    transition: opacity 200ms linear;
  }

  .endless-boot-achievement,
  .endless-boot-crash,
  .endless-boot-crash::before,
  .endless-boot-crash h2 {
    animation: none !important;
  }

  .endless-boot-crash-meter span {
    transition: none;
  }

  .endless-boot-bits-particles i,
  .endless-boot-falling-bits {
    display: none;
  }
}

html[data-boot-degradation="2"] .endless-boot-eta strong,
html[data-boot-degradation="3"] .endless-boot-eta strong {
  color: var(--warning);
}

html[data-boot-degradation="3"] .endless-boot-machine {
  border-bottom-color: color-mix(in srgb, var(--warning) 55%, var(--border));
}

#boot-skip {
  padding: 9px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

#boot-skip:hover,
#boot-skip:focus-visible {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

@media (max-width: 700px) {
  .guestbook-form {
    grid-template-columns: 1fr;
  }

  .guestbook-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .filesystem-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
    overflow: auto;
  }

  .filesystem-list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .notification-center-header,
  .notifications-list header {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-center-header button {
    align-self: stretch;
  }

  .notification-toasts {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .red-screen-diagnostics div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .boot-log {
    min-height: 250px;
    font-size: 0.72rem;
  }
}

.desktop-window-resize-edge {
  position: absolute;
  z-index: 4;
  display: block;
  padding: 0;
  touch-action: none;
}

.desktop-window-resize-edge[data-resize-direction="n"],
.desktop-window-resize-edge[data-resize-direction="s"] {
  right: 12px;
  left: 12px;
  height: 8px;
  cursor: ns-resize;
}

.desktop-window-resize-edge[data-resize-direction="n"] {
  top: 0;
}

.desktop-window-resize-edge[data-resize-direction="s"] {
  bottom: 0;
}

.desktop-window-resize-edge[data-resize-direction="e"],
.desktop-window-resize-edge[data-resize-direction="w"] {
  top: 12px;
  bottom: 12px;
  width: 8px;
  cursor: ew-resize;
}

.desktop-window-resize-edge[data-resize-direction="e"] {
  right: 0;
}

.desktop-window-resize-edge[data-resize-direction="w"] {
  left: 0;
}

.desktop-window-resize-edge[data-resize-direction="ne"],
.desktop-window-resize-edge[data-resize-direction="nw"],
.desktop-window-resize-edge[data-resize-direction="sw"] {
  width: 16px;
  height: 16px;
}

.desktop-window-resize-edge[data-resize-direction="ne"] {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.desktop-window-resize-edge[data-resize-direction="nw"] {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.desktop-window-resize-edge[data-resize-direction="sw"] {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.desktop-window-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  color: var(--accent);
  background:
    linear-gradient(
      135deg,
      transparent 0 42%,
      currentColor 43% 48%,
      transparent 49% 62%,
      currentColor 63% 68%,
      transparent 69%
    );
  cursor: nwse-resize;
  touch-action: none;
}

.desktop-window-resize-handle:hover,
.desktop-window-resize-handle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -3px;
  background-color: var(--accent-soft);
}

.desktop-window-stats {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
}

.system-monitor-content {
  align-content: start;
}

.system-monitor-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.system-monitor-heading h2,
.system-monitor-heading p {
  margin: 0;
}

.system-monitor-heading h2 {
  margin-top: 5px;
  font-size: clamp(1rem, 3vw, 1.5rem);
}

.system-monitor-process-header {
  color: var(--accent);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.system-monitor-processes {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--border);
}

.system-monitor-processes > p {
  padding: 9px 10px;
}

.system-monitor-processes > div {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(100px, 0.9fr);
  gap: 9px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  font-size: 0.56rem;
}

.system-monitor-processes strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-monitor-processes span {
  color: var(--accent);
}

.system-monitor-processes em {
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-monitor-summary {
  margin-top: 12px;
}

.desktop-window-stats > div {
  display: grid;
  grid-template-columns: minmax(80px, max-content) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.desktop-window-stats dt,
.desktop-window-stats dd {
  margin: 0;
}

.pronoun-profile-set {
  margin: 0 0 18px;
  color: var(--accent) !important;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

.pronoun-examples {
  display: grid;
  gap: 8px;
}

.pronoun-examples p {
  display: grid;
  grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
}

.pronoun-examples strong {
  color: var(--accent);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}

.pronoun-examples span {
  overflow-wrap: anywhere;
  text-align: right;
}

.pronoun-preferences {
  margin-top: 22px;
}

.desktop-window-stats dt {
  color: var(--accent);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}

.desktop-window-stats dd {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.desktop-window-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.desktop-window-actions a,
.desktop-window-actions button {
  flex: 1 1 130px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.65rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.desktop-window-actions a:hover,
.desktop-window-actions a:focus-visible,
.desktop-window-actions button:hover,
.desktop-window-actions button:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--ink);
  background: var(--accent-soft);
}

.desktop-window-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.settings-groups {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.settings-group {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
}

.settings-group legend {
  padding: 0 7px;
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.settings-group label {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.settings-group label:last-child {
  margin-bottom: 0;
}

.settings-group select {
  width: 100%;
  min-width: 0;
  padding: 8px 28px 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}

.settings-group select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-group .settings-check {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  cursor: pointer;
}

.settings-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.settings-group .settings-check[hidden] {
  display: none;
}

#settings-eink-refresh-option {
  margin-top: 12px;
}

.settings-actions {
  display: grid;
  gap: 8px;
}

.settings-actions button {
  padding: 9px 10px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 0.65rem;
  text-align: left;
  cursor: pointer;
}

.settings-actions button:hover,
.settings-actions button:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.settings-actions button:last-child {
  border-color: #ff6d7a;
  color: #ff6d7a;
}

.settings-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
}

.settings-status.is-error {
  color: #ff6d7a;
}

.settings-insider {
  padding: 0;
}

.settings-insider summary {
  padding: 14px 16px;
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.settings-insider summary:hover,
.settings-insider summary:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.settings-insider-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.settings-insider-content strong {
  color: var(--ink);
  font-size: 0.75rem;
}

.settings-insider-content p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.55;
}

.settings-insider-content button {
  padding: 9px 11px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 0.65rem;
  cursor: pointer;
}

.settings-insider-content button:hover,
.settings-insider-content button:focus-visible,
.settings-insider-content button[aria-pressed="true"] {
  outline: none;
  color: var(--bg);
  background: var(--accent);
}

.settings-insider .settings-status {
  margin: 0;
  padding: 0 16px 14px;
}

@media (max-width: 560px) {
  .settings-insider-content {
    grid-template-columns: 1fr;
  }

  .settings-insider-content button {
    width: 100%;
  }

  .death-screen {
    align-items: start;
  }
}

.content-window-empty {
  margin-top: 18px;
  padding: 24px;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: var(--panel);
  font-size: 0.72rem;
  line-height: 1.65;
  text-align: center;
}

.content-window-summary {
  max-width: 76ch;
  color: var(--muted);
  line-height: 1.75;
}

.content-window-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.content-window-meta div {
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.content-window-meta dt,
.content-window-meta dd {
  margin: 0;
}

.content-window-meta dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.content-window-meta dd {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.7rem;
  line-height: 1.55;
}

.content-window-meta-stacked {
  grid-template-columns: 1fr;
}

.content-window-link {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.68rem;
  text-decoration: none;
}

.content-window-link:hover,
.content-window-link:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.resume-entry-list,
.changelog-entry-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-entry-list[hidden],
.changelog-entry-list[hidden] {
  display: none;
}

.resume-entry-list > li,
.changelog-entry-list > li {
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.resume-entry-list header {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.resume-entry-list h3,
.resume-entry-list p,
.changelog-entry-list h3,
.changelog-entry-list p {
  margin: 0;
}

.resume-entry-list h3,
.changelog-entry-list h3 {
  color: var(--ink);
  font-size: 0.82rem;
}

.resume-entry-list header p,
.changelog-entry-list time {
  color: var(--accent);
  font-size: 0.64rem;
}

.resume-entry-list > li > p,
.changelog-entry-list p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.65;
}

.resume-entry-technologies {
  color: var(--accent) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em;
}

.career-period-range,
.career-period-duration {
  display: block;
  white-space: nowrap;
}

.career-period-duration {
  color: var(--muted);
}

.resume-entry-list header p {
  flex-shrink: 0;
  text-align: right;
}

.resume-section-heading {
  margin: 22px 0 10px;
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

.resume-section-heading[hidden] {
  display: none;
}

.resume-certification-meta {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.resume-certification-meta a {
  color: var(--accent);
}

.resume-entry-bullets {
  display: grid;
  gap: 6px;
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.6;
}

.resume-entry-bullets li::marker {
  color: var(--accent);
}

ul.resume-entry-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

ul.resume-entry-technologies li {
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  line-height: 1.4;
}

.changelog-entry-list > li {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 16px;
}

.content-window-updated {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.favorite-games-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.favorite-games-list[hidden] {
  display: none;
}

.favorite-games-list > li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 58%),
    var(--panel);
}

.favorite-games-list h3,
.favorite-games-list p {
  margin: 0;
}

.favorite-games-list h3 {
  color: var(--ink);
  font-size: 0.86rem;
}

.favorite-games-list h3 + p {
  margin-top: 5px;
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.favorite-game-note {
  margin-top: 12px !important;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

.favorite-games-list a {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.62rem;
  text-decoration: none;
}

.favorite-games-list a:hover,
.favorite-games-list a:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--ink);
  background: var(--accent-soft);
}

.creator-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.creator-list[hidden] {
  display: none;
}

.creator-list > li {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  overflow-wrap: anywhere;
}

.creator-list h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.creator-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.creator-heading h3 {
  min-width: 0;
  margin: 0;
}

.creator-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 1rem;
}

.creator-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.creator-avatar img.is-loaded {
  opacity: 1;
}

.creator-list a {
  color: var(--accent);
}

.creator-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.creator-platform,
.creator-latest time {
  color: var(--muted);
  font-size: 0.65rem;
}

.creator-latest {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
}

.creator-latest time {
  display: block;
  margin-top: 8px;
}

.hardware-machines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
  gap: 0 12px;
  align-items: start;
  margin-top: 18px;
}

.hardware-machines[hidden] {
  display: none;
}

.hardware-machine {
  min-width: 0;
  margin-bottom: 12px;
  padding: 0 18px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 58%),
    var(--panel);
}

.hardware-machine > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -18px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.hardware-machine > summary::-webkit-details-marker {
  display: none;
}

.hardware-machine > summary::before {
  content: "[+]";
  color: var(--accent);
  font-size: 0.7rem;
}

.hardware-machine[open] > summary::before {
  content: "[-]";
}

.hardware-machine > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.hardware-machine[open] {
  padding-bottom: 10px;
}

.hardware-part-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.hardware-live-badge {
  padding: 2px 6px;
  border: 1px solid currentColor;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.hardware-live-badge[data-state="online"] {
  color: var(--accent);
}

.hardware-live-badge[data-state="online"]::before {
  content: "\25CF ";
  animation: hardware-live-pulse 1.6s ease-in-out infinite;
}

.hardware-live-badge[data-state="offline"] {
  color: var(--muted);
}

.hardware-live-badge[hidden],
.hardware-live[hidden],
.hardware-meter[hidden] {
  display: none;
}

@keyframes hardware-live-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hardware-live-badge[data-state="online"]::before {
    animation: none;
  }
}

.hardware-live {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
}

.hardware-meter {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.hardware-meter strong {
  color: var(--ink);
  font-weight: 400;
}

.hardware-meter-track {
  height: 6px;
  border: 1px solid var(--border);
}

.hardware-meter-fill {
  display: block;
  width: var(--meter-value, 0%);
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease;
}

.hardware-live-uptime {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.hardware-live.is-offline {
  border-style: dotted;
}

.hardware-live-chatter {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.5;
}

.hardware-live-chatter[hidden] {
  display: none;
}

.hardware-nas[hidden] {
  display: none;
}

.hardware-nas {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: .68rem;
  overflow-wrap: anywhere;
}

.hardware-nas p {
  margin: 0;
}

.hardware-nas-summary {
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.hardware-nas-summary::-webkit-details-marker {
  display: none;
}

.hardware-nas-summary::before {
  content: "[+] ";
}

.hardware-nas[open] > .hardware-nas-summary::before {
  content: "[-] ";
}

.hardware-nas-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hardware-nas-readings {
  display: grid;
  gap: 6px;
  padding-top: 6px;
}

.hardware-nas-note {
  color: var(--muted);
  font-size: .6rem;
}

.hardware-nas-drives {
  display: grid;
  gap: 5px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.hardware-nas-drives li {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 8px;
}

.hardware-nas-drives [data-state="error"] {
  color: var(--danger);
}

.hardware-machine h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

.hardware-machine .hardware-specs {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 10px;
}

.hardware-specs dd span,
.hardware-specs dd small {
  display: block;
}

.hardware-specs dd span {
  color: var(--ink);
}

.hardware-specs dd small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.hardware-updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

@container (min-width: 620px) {
  .settings-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-group-wide {
    grid-column: 1 / -1;
  }

  .settings-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.source-scan-output {
  min-height: 2.5em;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.65rem;
}

.operator-query-output {
  min-height: 3.3em;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.65;
}

.desktop-spotify-content {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
}

.spotify-window-content {
  display: block;
}

.spotify-history-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.spotify-history-section h3 {
  margin: 4px 0 12px;
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.spotify-ranking-columns {
  display: grid;
  gap: 20px;
}

.spotify-history-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.spotify-top-tracks {
  padding-left: 24px;
}

.spotify-top-tracks li {
  padding-left: 4px;
  color: var(--accent);
}

.spotify-history-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
}

.spotify-history-track.has-artwork {
  grid-template-columns: 44px minmax(0, 1fr);
}

.spotify-history-track:hover,
.spotify-history-track:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--ink);
  background: var(--accent-soft);
}

.spotify-history-track img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.spotify-history-track > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.spotify-history-track strong,
.spotify-history-track span,
.spotify-history-track small {
  overflow-wrap: anywhere;
}

.spotify-history-track strong {
  color: var(--ink);
  font-size: 0.7rem;
}

.spotify-history-track small {
  color: var(--muted);
  font-size: 0.56rem;
}

.spotify-history-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
}

@container (min-width: 700px) {
  .desktop-window-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .pronoun-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .desktop-window-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .desktop-window-actions a,
  .desktop-window-actions button {
    min-width: 0;
  }

  .spotify-ranking-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@container (min-width: 900px) {
  .spotify-window-content {
    display: grid;
    grid-template:
      "now rankings" auto
      "recent rankings" 1fr
      / minmax(260px, 0.75fr) minmax(0, 1.5fr);
    gap: 22px 28px;
    align-items: start;
  }

  @container (min-width: 1100px) {
    .spotify-ranking-columns {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container (min-width: 1400px) {
    .spotify-ranking-columns {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .spotify-window-content > .desktop-spotify-content {
    grid-area: now;
  }

  .spotify-recent-section {
    grid-area: recent;
  }

  .spotify-rankings-section {
    grid-area: rankings;
  }

  .spotify-window-content > .spotify-history-section {
    margin-top: 0;
  }
}

.desktop-spotify-content > div {
  min-width: 0;
}

.desktop-spotify-art[hidden] + div {
  grid-column: 1 / -1;
}

.desktop-spotify-art {
  width: 92px;
  height: 92px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.desktop-spotify-time {
  display: flex;
  gap: 7px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

@keyframes desktop-window-open {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.system-overlay[hidden],
.bits-assistant[hidden],
.cookie-notice[hidden] {
  display: none;
}

.system-window {
  width: min(640px, 100%);
  padding: clamp(20px, 5vw, 38px);
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: 12px 12px 0 rgba(var(--accent-rgb), 0.15);
  animation: system-window-in 220ms steps(4);
}

.system-window > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
}

.system-window > header p,
.system-window h2,
.system-kicker {
  margin: 0;
}

.system-window h2 {
  margin: 24px 0 18px;
  font-size: clamp(1rem, 4vw, 1.5rem);
}

.system-window button {
  padding: 8px 11px;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.system-window button:hover,
.system-window button:focus-visible {
  color: var(--bg);
  outline: none;
  background: var(--accent);
}

.bios-panel {
  background: #001b78;
}

.bios-panel .system-window {
  border: 2px solid #d5dfff;
  color: #eaf0ff;
  background: #0028a6;
  box-shadow: 14px 14px 0 #00145d;
}

.bios-settings {
  display: grid;
  gap: 3px;
  margin: 0;
}

.bios-settings div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 8px 10px;
}

.bios-settings div:nth-child(odd) {
  background: rgba(255, 255, 255, 0.09);
}

.bios-settings dt {
  color: #a9c8ff;
}

.bios-settings dd {
  margin: 0;
  color: #fff46b;
}

.system-hint,
.update-panel p {
  color: var(--muted);
  font-size: 0.7rem;
}

.bios-panel .system-hint {
  margin: 24px 0 0;
  color: #a9c8ff;
}

.update-panel .system-window {
  width: 100%;
  text-align: center;
}

.update-panel {
  position: relative;
  z-index: 2;
  inset: auto;
  display: block;
  width: min(640px, calc(100% - 32px));
  min-height: 0;
  margin: 16px auto;
  padding: 0;
  background: transparent;
}

.system-kicker {
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
}

.update-track {
  height: 18px;
  margin: 24px 0 14px;
  padding: 3px;
  border: 1px solid var(--border);
}

.update-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  transition: width 180ms steps(4);
}

.bits-assistant,
.cookie-notice {
  width: min(330px, calc(100% - 40px));
  padding: 18px;
  border: 1px solid var(--accent);
  color: var(--ink);
  background: var(--overlay-bg);
  box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.15);
  animation: assistant-arrival 300ms steps(5);
}

.bits-assistant {
  position: fixed;
  z-index: 25;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-height: calc(100vh - 36px);
  margin: 0;
  overflow: auto;
}

.cookie-notice {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: 18px;
  max-height: calc(100dvh - 36px);
  margin: 0;
  overflow: auto;
  translate: -50% 0;
}

.bits-assistant-avatar {
  position: relative;
  display: grid;
  width: 86px;
  height: 102px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--window-radius);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    var(--panel-2);
  overflow: hidden;
  animation: assistant-avatar-bob 2.8s ease-in-out infinite;
}

.bits-assistant-avatar::after {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: var(--muted);
  content: "BITCLIP";
  font-size: 0.42rem;
  letter-spacing: 0.08em;
}

.bits-assistant-avatar svg {
  width: 78px;
  height: 94px;
  overflow: visible;
}

.assistant-wire {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.3));
}

.assistant-eye {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: assistant-eye-blink 4.6s steps(1, end) infinite;
}

.assistant-pupil {
  fill: var(--panel);
  pointer-events: none;
}

.assistant-mouth {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-width: 3;
}

.assistant-bit {
  fill: var(--warning);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
}

.assistant-bit-zero {
  transform: rotate(-12deg);
  transform-origin: 9px 89px;
}

.assistant-bit-one {
  transform: rotate(10deg);
  transform-origin: 83px 24px;
}

.bits-assistant-copy {
  min-width: 0;
}

.bits-assistant p,
.cookie-notice p {
  margin: 0 0 10px;
  font-size: 0.75rem;
}

.bits-assistant-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

@keyframes assistant-avatar-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes assistant-eye-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.12); }
}

.bits-assistant button,
.cookie-notice button {
  padding: 7px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
}

.bits-assistant button:hover,
.bits-assistant button:focus-visible,
.cookie-notice button:hover,
.cookie-notice button:focus-visible {
  color: var(--bg);
  outline: none;
  background: var(--accent);
}

.cookie-notice {
  display: flex;
  width: min(620px, calc(100% - 32px));
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.cookie-notice p {
  margin: 0;
}

.root-panel {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(102, 255, 154, 0.05) 4px),
    rgba(0, 10, 3, 0.94);
}

.root-panel .system-window {
  border-width: 2px;
  box-shadow:
    0 0 40px rgba(var(--accent-rgb), 0.34),
    14px 14px 0 rgba(var(--accent-rgb), 0.12);
}

.root-panel pre {
  overflow-x: auto;
  padding: 14px;
  border: 1px dashed var(--border);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.04);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.8;
}

.link-card.is-fake-404 {
  --card-accent: #ff6d7a !important;
  border-style: dashed;
  animation: fake-404-flicker 1.3s steps(2) infinite;
}

button.link-card {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.link-card.is-fake-404 .link-icon {
  color: #ff6d7a;
  font-weight: 700;
}

.cursor-bit {
  position: fixed;
  z-index: 1;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
  animation: cursor-bit-fade 700ms ease-out forwards;
}

html.is-gravity-mode .falling-bit:not(.is-forbidden) {
  animation: gravity-bit-drop 1.3s cubic-bezier(0.6, 0, 1, 0.5) forwards;
}

html.is-antigravity-mode .falling-bit:not(.is-forbidden) {
  top: auto;
  bottom: -2rem;
  animation: antigravity-bit-rise 4s ease-in forwards;
}

html.is-friday-thirteen {
  --accent: #ff3e4d;
  --accent-rgb: 255, 62, 77;
}

html.is-friday-thirteen .shell {
  animation: friday-thirteen 8s steps(1) infinite;
}

html.is-birthday .shell {
  box-shadow:
    0 0 28px #ff6d7a,
    0 0 48px #ffcc66,
    0 0 68px #63d8ff;
}

html.is-birthday .falling-bit:nth-child(4n + 1) { color: #ff6d7a; }
html.is-birthday .falling-bit:nth-child(4n + 2) { color: #ffcc66; }
html.is-birthday .falling-bit:nth-child(4n + 3) { color: #63d8ff; }
html.is-birthday .falling-bit:nth-child(4n) { color: #b99aff; }

.avatar-wrap.is-sleepy .eye {
  height: 5px;
  transform: translateY(6px);
}

#identity-name.is-expanding {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}

#identity-name.is-collapsed-bits {
  letter-spacing: 0;
}

.command-line.is-correcting {
  animation: typo-correction 160ms steps(2) infinite;
}

.shell.is-crashing {
  animation: system-crash 700ms steps(6);
}

.avatar-wrap.is-idle {
  z-index: auto;
}

.avatar.is-screen-roaming {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: center;
  will-change: transform;
}

.avatar-corner-confetti {
  position: fixed;
  z-index: 10002;
  display: block;
  width: 0.9em;
  height: 0.9em;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--confetti-size);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 0 7px currentColor;
  forced-color-adjust: none;
  animation: avatar-corner-confetti 1.65s cubic-bezier(0.12, 0.72, 0.28, 1) both;
  animation-delay: var(--confetti-delay);
}

.avatar-wrap.is-idle .avatar-shadow {
  animation: avatar-idle-shadow 4.8s ease-in-out infinite;
}

html.is-chaos-mode .shell {
  animation: chaos-shell 500ms steps(2) infinite;
  box-shadow:
    0 0 18px #ff6d7a,
    0 0 36px #ffcc66,
    0 0 54px #63d8ff;
}

html.is-chaos-mode .falling-bit {
  opacity: 0.8;
}

html:not([data-interface-theme="default"]) .featured-project,
html:not([data-interface-theme="default"]) .link-card,
html:not([data-interface-theme="default"]) .spotify-widget,
html:not([data-interface-theme="default"]) .desktop-spotify-content,
html:not([data-interface-theme="default"]) .spotify-history-section {
  border-radius: min(var(--control-radius), 14px);
}

html:not([data-interface-theme="default"]) :is(.contact-form, .guestbook-form, .guestbook-list li, .settings-group) {
  border-radius: min(var(--control-radius), 14px);
}

html:not([data-interface-theme="default"]) :is(
  .contact-form input,
  .contact-form textarea,
  .admin-form input:not([type="checkbox"]):not([type="radio"]),
  .admin-form select,
  .admin-form textarea,
  .guestbook-form input,
  .guestbook-form textarea,
  .settings-group select,
  .contact-turnstile,
  .contact-turnstile-widget
) {
  border-radius: min(var(--control-radius), 8px);
}

html[data-interface-theme="aurora"] .shell,
html[data-interface-theme="aurora"] .desktop-window {
  box-shadow:
    0 0 0 1px rgba(100, 255, 220, 0.12),
    0 22px 70px rgba(14, 5, 40, 0.5),
    0 0 55px rgba(89, 255, 211, 0.08);
}

html[data-interface-theme="aurora"] .system-bar,
html[data-interface-theme="aurora"] .desktop-window-bar {
  background:
    linear-gradient(90deg, rgba(84, 255, 207, 0.08), rgba(128, 104, 255, 0.1)),
    var(--panel);
}

html[data-interface-theme="cozy-blossom"] .shell,
html[data-interface-theme="cozy-blossom"] .desktop-window {
  box-shadow:
    0 18px 55px rgba(30, 7, 18, 0.42),
    0 0 30px rgba(255, 165, 185, 0.08);
}

html[data-interface-theme="cozy-blossom"] .system-bar,
html[data-interface-theme="cozy-blossom"] .desktop-window-bar,
html[data-interface-theme="cozy-blossom"] footer {
  background:
    linear-gradient(90deg, rgba(255, 170, 190, 0.08), transparent),
    var(--panel);
}

html[data-interface-theme="mica"] .shell,
html[data-interface-theme="mica"] .desktop-window {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-interface-theme="mica"] .system-bar,
html[data-interface-theme="mica"] .desktop-window-bar {
  background: rgba(255, 255, 255, 0.035);
}

html[data-interface-theme="fluent"] .shell,
html[data-interface-theme="fluent"] .desktop-window {
  box-shadow:
    0 0 0 1px rgba(124, 174, 232, 0.08),
    0 20px 65px rgba(0, 18, 44, 0.38);
}

html[data-interface-theme="fluent"] .link-card:hover,
html[data-interface-theme="fluent"] .link-card:focus-visible {
  border-left-color: var(--accent);
  box-shadow: -3px 0 0 var(--accent);
}

html[data-interface-theme="midnight-oled"] .shell,
html[data-interface-theme="midnight-oled"] .desktop-window {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  backdrop-filter: none;
}

html[data-interface-theme="midnight-oled"] .noise {
  opacity: 0.01;
}

html[data-interface-theme="macos"] .shell,
html[data-interface-theme="macos"] .desktop-window {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.13) inset,
    0 24px 70px rgba(0, 0, 0, 0.38);
}

html[data-interface-theme="macos"] .desktop-window-bar {
  flex-direction: row-reverse;
  min-height: 42px;
  background: rgba(128, 128, 132, 0.12);
}

html[data-interface-theme="macos"] .desktop-window-controls {
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
}

html[data-interface-theme="macos"] .desktop-window-controls button {
  width: 13px;
  height: 13px;
  min-height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

html[data-interface-theme="macos"] .desktop-window-controls [data-window-close] {
  background: #ff5f57;
}

html[data-interface-theme="macos"] .desktop-window-controls [data-window-minimize] {
  background: #febc2e;
}

html[data-interface-theme="macos"] .desktop-window-controls button:hover,
html[data-interface-theme="macos"] .desktop-window-controls button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

html[data-interface-theme="terminal"] .shell,
html[data-interface-theme="terminal"] .desktop-window {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.18),
    0 0 24px rgba(var(--accent-rgb), 0.1);
}

html[data-interface-theme="terminal"] .system-bar,
html[data-interface-theme="terminal"] .app-menu-bar,
html[data-interface-theme="terminal"] .desktop-window-bar,
html[data-interface-theme="terminal"] footer {
  background: #020b03;
}

:root[data-interface-theme="terminal"][data-color-scheme="light"] .system-bar,
:root[data-interface-theme="terminal"][data-color-scheme="light"] .desktop-window-bar,
:root[data-interface-theme="terminal"][data-color-scheme="light"] footer {
  background: var(--panel);
}

html[data-interface-theme="terminal"] button,
html[data-interface-theme="terminal"] input,
html[data-interface-theme="terminal"] textarea {
  letter-spacing: 0.04em;
}

html[data-interface-theme="vaporwave"] .system-bar,
html[data-interface-theme="vaporwave"] .desktop-window-bar {
  background: linear-gradient(90deg, rgba(255, 96, 226, 0.24), rgba(74, 225, 255, 0.2));
}

html[data-interface-theme="amber-crt"] .shell,
html[data-interface-theme="amber-crt"] .desktop-window {
  text-shadow: 0 0 5px rgba(255, 178, 55, 0.32);
}

html[data-interface-theme="y2k-silver"] .system-bar,
html[data-interface-theme="y2k-silver"] .desktop-window-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(97, 116, 140, 0.18));
}

html[data-interface-theme="cyberpunk"] .system-bar,
html[data-interface-theme="cyberpunk"] .desktop-window-bar {
  border-bottom: 2px solid #f5f336;
  box-shadow: inset 0 -1px #ff2d9d;
}

html[data-interface-theme="dos-blue"] .shell,
html[data-interface-theme="dos-blue"] .desktop-window,
html[data-interface-theme="dos-blue"] .system-window {
  border: 3px double currentColor;
  box-shadow: 8px 8px 0 #000;
}

html[data-interface-theme="dos-blue"] button,
html[data-interface-theme="dos-blue"] input,
html[data-interface-theme="dos-blue"] select {
  text-transform: uppercase;
}

html[data-interface-theme="windows-95"] .shell,
html[data-interface-theme="windows-95"] .desktop-window,
html[data-interface-theme="windows-95"] .system-window,
html[data-interface-theme="windows-95"] .fake-desktop-app {
  border: 2px solid var(--w95-shadow);
  box-shadow:
    inset -2px -2px var(--w95-dark),
    inset 2px 2px var(--w95-hi),
    5px 5px 0 rgba(0, 0, 0, 0.46);
}

html[data-interface-theme="windows-95"] button,
html[data-interface-theme="windows-95"] input,
html[data-interface-theme="windows-95"] select {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] input,
html[data-interface-theme="windows-95"] textarea,
html[data-interface-theme="windows-95"] select {
  color: var(--w95-text);
  background: var(--w95-field);
}

html[data-interface-theme="windows-95"] button:hover,
html[data-interface-theme="windows-95"] button:focus-visible {
  color: #fff;
  background: #000080;
}

html[data-interface-theme="windows-95"] .system-bar,
html[data-interface-theme="windows-95"] .desktop-window-bar,
html[data-interface-theme="windows-95"] .fake-desktop-app > header {
  color: #fff;
  background: #000080 linear-gradient(90deg, #000080, #1084d0);
}

html[data-interface-theme="windows-95"] .system-bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 40px;
  padding-left: 5px;
  border-bottom: 2px solid var(--w95-shadow);
}

html[data-interface-theme="windows-95"] .system-bar > p {
  justify-self: start;
  margin-left: 7px;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-interface-theme="windows-95"] .system-status {
  justify-self: start;
  padding: 3px 6px;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

html[data-interface-theme="windows-95"] .system-status:hover,
html[data-interface-theme="windows-95"] .system-status:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

html[data-interface-theme="windows-95"] #achievements-button,
html[data-interface-theme="windows-95"] #settings-button {
  color: var(--w95-text);
  background: var(--w95-face);
}

html[data-interface-theme="windows-95"] .status-dot {
  border-radius: 0;
  background: #00d000;
  box-shadow: 0 0 0 1px #003800;
}

html[data-interface-theme="windows-95"] .app-menu-bar {
  border-bottom: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-panel);
  font-family: "Pixel UI", "Courier New", monospace;
}

html[data-interface-theme="windows-95"] .app-menu summary:hover,
html[data-interface-theme="windows-95"] .app-menu summary:focus-visible,
html[data-interface-theme="windows-95"] .app-menu[open] summary {
  color: #fff;
  background: #000080;
  box-shadow: none;
}

html[data-interface-theme="windows-95"] .app-menu-popup {
  border: 2px solid var(--w95-shadow);
  border-radius: 0;
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi), 4px 4px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

html[data-interface-theme="windows-95"] .app-menu-popup button,
html[data-interface-theme="windows-95"] .app-menu-popup a {
  border: 0;
  border-radius: 0;
  color: var(--w95-text);
  background: transparent;
  box-shadow: none;
}

html[data-interface-theme="windows-95"] .app-menu-popup button:hover,
html[data-interface-theme="windows-95"] .app-menu-popup button:focus-visible,
html[data-interface-theme="windows-95"] .app-menu-popup a:hover,
html[data-interface-theme="windows-95"] .app-menu-popup a:focus-visible {
  color: #fff;
  background: #000080;
  box-shadow: none;
}

html[data-interface-theme="windows-95"] .app-menu-select {
  color: var(--w95-text);
}

html[data-interface-theme="windows-95"] .app-menu-separator {
  background: var(--w95-shadow);
  box-shadow: 0 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .window-controls {
  gap: 2px;
  padding: 3px;
}

html[data-interface-theme="windows-95"] .window-button {
  width: 36px;
  min-height: 30px;
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .window-button:hover,
html[data-interface-theme="windows-95"] .window-button:focus-visible {
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .close-button:hover,
html[data-interface-theme="windows-95"] .close-button:focus-visible {
  color: #fff;
  background: #c42b1c;
}

html[data-interface-theme="windows-95"] .link-icon,
html[data-interface-theme="windows-95"] .link-arrow {
  color: color-mix(in srgb, var(--card-accent) 58%, var(--w95-text));
}

html[data-interface-theme="windows-95"] .link-icon {
  border-color: color-mix(in srgb, var(--card-accent) 45%, #444);
  background: color-mix(in srgb, var(--card-accent) 8%, var(--w95-panel));
}

html[data-interface-theme="windows-95"] .fake-playing-dead > header strong,
html[data-interface-theme="windows-95"] .fake-desktop-app > header strong {
  color: #fff;
}

html[data-interface-theme="windows-95"] .endless-boot-console {
  --accent: #7fbfff;
  --accent-rgb: 127, 191, 255;
  --border: #808080;
  --ink: #fff;
  --muted: #c0c0c0;
  --panel: #202020;
  --warning: #ffff00;
  background: #000;
}

html[data-interface-theme="windows-95"] .useless-tool-console {
  background: var(--w95-field);
}

html[data-interface-theme="windows-95"] .useless-warning strong {
  color: #704d00;
}

html[data-interface-theme="windows-95"] body {
  -webkit-font-smoothing: none;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  font-smooth: never;
  letter-spacing: 0.015em;
  text-rendering: optimizeSpeed;
  text-shadow:
    0.35px 0 rgba(176, 0, 0, 0.24),
    -0.35px 0 rgba(0, 40, 176, 0.24);
}

html[data-interface-theme="windows-95"] ::selection {
  color: #fff;
  background: #000080;
  text-shadow: none;
}

html[data-interface-theme="windows-95"] :focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -4px;
}

html[data-interface-theme="windows-95"] button,
html[data-interface-theme="windows-95"] input,
html[data-interface-theme="windows-95"] select,
html[data-interface-theme="windows-95"] textarea,
html[data-interface-theme="windows-95"] .footer-select-control {
  border-radius: 0;
}

html[data-interface-theme="windows-95"] button:active:not(:disabled),
html[data-interface-theme="windows-95"] .error-actions a:active,
html[data-interface-theme="windows-95"] .endless-boot-settings > a:active {
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
  transform: translate(1px, 1px);
}

html[data-interface-theme="windows-95"] button:hover :is(span, strong, em, b),
html[data-interface-theme="windows-95"] button:focus-visible :is(span, strong, em, b),
html[data-interface-theme="windows-95"] .app-menu-popup button:hover span,
html[data-interface-theme="windows-95"] .app-menu-popup button:focus-visible span {
  color: inherit;
}

html[data-interface-theme="windows-95"] .link-card:hover,
html[data-interface-theme="windows-95"] .link-card:focus-visible,
html[data-interface-theme="windows-95"] .source-file-list a:hover,
html[data-interface-theme="windows-95"] .source-file-list a:focus-visible,
html[data-interface-theme="windows-95"] .error-actions a:hover,
html[data-interface-theme="windows-95"] .error-actions a:focus-visible,
html[data-interface-theme="windows-95"] .error-actions button:hover,
html[data-interface-theme="windows-95"] .error-actions button:focus-visible {
  border-color: var(--w95-dark);
  color: #fff;
  background: #000080;
  box-shadow: none;
  transform: none;
}

html[data-interface-theme="windows-95"] .error-actions a,
html[data-interface-theme="windows-95"] .error-actions button {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .link-card:hover :is(.link-title, .link-description, .link-arrow, .link-icon),
html[data-interface-theme="windows-95"] .link-card:focus-visible :is(.link-title, .link-description, .link-arrow, .link-icon) {
  border-color: #fff;
  color: #fff;
  text-shadow: none;
}

html[data-interface-theme="windows-95"] .content-file-grid button:hover,
html[data-interface-theme="windows-95"] .content-file-grid button:focus-visible,
html[data-interface-theme="windows-95"] .useless-tool-grid button:hover,
html[data-interface-theme="windows-95"] .useless-tool-grid button:focus-visible {
  color: #fff;
  background: #000080;
}

html[data-interface-theme="windows-95"] .content-file-grid button:hover *,
html[data-interface-theme="windows-95"] .content-file-grid button:focus-visible *,
html[data-interface-theme="windows-95"] .useless-tool-grid button:hover *,
html[data-interface-theme="windows-95"] .useless-tool-grid button:focus-visible * {
  color: #fff;
}

html[data-interface-theme="windows-95"] .error-window,
html[data-interface-theme="windows-95"] .admin-shell {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow:
    inset -2px -2px var(--w95-dark),
    inset 2px 2px var(--w95-hi),
    6px 6px 0 rgba(0, 0, 0, 0.42);
}

html[data-interface-theme="windows-95"] .error-window::before {
  display: block;
  margin: -26px -26px 24px;
  padding: 4px 6px;
  color: #fff;
  background: #000080 linear-gradient(90deg, #000080, #1084d0);
  font-weight: 700;
  text-shadow: none;
  content: "BITSOFBITS.EXE";
}

html[data-interface-theme="windows-95"] body:has(.source-window) .error-window::before {
  content: "SOURCE EXPLORER";
}

html[data-interface-theme="windows-95"] body:has(.useless-window) .error-window::before {
  content: "BITS SUPPORT";
}

html[data-interface-theme="windows-95"] .admin-header {
  margin: 4px;
  padding: 6px 8px;
  border: 0;
  color: #fff;
  background: #000080 linear-gradient(90deg, #000080, #1084d0);
}

html[data-interface-theme="windows-95"] .admin-header .eyebrow {
  display: none;
}

html[data-interface-theme="windows-95"] .admin-header h1 {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0;
}

html[data-interface-theme="windows-95"] .admin-header :is(h1, p, span) {
  color: #fff;
  text-shadow: none;
}

html[data-interface-theme="windows-95"] .admin-header a {
  padding: 5px 8px;
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .admin-panel {
  color: var(--w95-text);
  background: var(--w95-panel);
}

html[data-interface-theme="windows-95"] .endless-boot-page {
  padding: clamp(4px, 1.5vw, 12px);
  background: var(--w95-desktop);
}

html[data-interface-theme="windows-95"] .endless-boot-console {
  --accent: var(--w95-accent-text);
  --border: var(--w95-shadow);
  --ink: var(--w95-text);
  --muted: var(--w95-muted);
  --panel: var(--w95-panel);
  --warning: var(--w95-warning);
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow:
    inset -2px -2px var(--w95-dark),
    inset 2px 2px var(--w95-hi),
    5px 5px 0 rgba(0, 0, 0, 0.38);
}

html[data-interface-theme="windows-95"] .endless-boot-header {
  align-items: center;
  gap: 8px 16px;
  padding: 4px 6px;
  border: 0;
  color: #fff;
  background: #000080 linear-gradient(90deg, #000080, #1084d0);
}

html[data-interface-theme="windows-95"] .endless-boot-header .system-kicker {
  display: none;
}

html[data-interface-theme="windows-95"] .endless-boot-header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(0.72rem, 2.4vw, 0.92rem);
  letter-spacing: 0;
  text-shadow: none;
}

html[data-interface-theme="windows-95"] .endless-boot-indicators {
  gap: 5px 10px;
  color: #fff;
  font-size: clamp(0.46rem, 1.2vw, 0.58rem);
  text-shadow: none;
}

html[data-interface-theme="windows-95"] .endless-boot-indicators i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--w95-hi);
  border-radius: 0;
  background: #00c000;
  box-shadow: 1px 1px var(--w95-dark);
}

html[data-interface-theme="windows-95"] .endless-boot-transmission {
  margin: 5px 4px 0;
  padding: 7px 8px;
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-field);
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .endless-boot-transmission > span {
  color: var(--w95-accent-text);
  font-weight: 700;
  letter-spacing: 0;
}

html[data-interface-theme="windows-95"] .endless-boot-transmission p {
  color: var(--w95-text);
}

html[data-interface-theme="windows-95"] .endless-boot-status {
  margin: 0 4px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--w95-shadow);
  color: var(--w95-muted);
}

html[data-interface-theme="windows-95"] .endless-boot-status strong {
  color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .endless-boot-machine {
  margin: 0 4px;
  padding-inline: 4px;
  border-color: var(--w95-shadow);
  color: var(--w95-muted);
}

html[data-interface-theme="windows-95"] .endless-boot-machine strong {
  color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .endless-boot-post {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .endless-boot-machine [data-meter] i {
  border-radius: 0;
}

html[data-interface-theme="windows-95"] .endless-boot-terminal {
  background: var(--w95-field);
}

html[data-interface-theme="windows-95"] .endless-boot-log {
  margin: 4px;
  padding: 7px 8px;
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: transparent;
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
  mask-image: none;
}

html[data-interface-theme="windows-95"] .endless-boot-log li::before {
  color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .endless-boot-log li[data-state="warning"] {
  color: var(--w95-warning);
  font-weight: 700;
}

html[data-interface-theme="windows-95"] .endless-boot-log li[data-state="error"] {
  color: var(--w95-error);
}

html[data-interface-theme="windows-95"] .endless-boot-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 14px 28px;
  align-items: stretch;
  justify-content: stretch;
  gap: 3px;
  margin: 0 4px 4px;
  padding: 4px 0 0;
}

html[data-interface-theme="windows-95"] .endless-boot-progress {
  height: 14px;
  padding: 2px;
  box-sizing: border-box;
  border: 2px solid var(--w95-shadow);
  background: var(--w95-field);
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .endless-boot-progress span {
  min-width: 10px;
  max-width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
  box-shadow: none;
}

html[data-interface-theme="windows-95"] .endless-boot-footer p {
  align-items: center;
  padding-top: 0;
  padding-right: 96px;
  box-sizing: border-box;
  color: var(--w95-muted);
}

html[data-interface-theme="windows-95"] .endless-boot-footer p > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-interface-theme="windows-95"] .endless-boot-footer b {
  flex: none;
  color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .endless-boot-settings {
  right: 9px;
  bottom: 8px;
}

html[data-interface-theme="windows-95"] .endless-boot-settings > a,
html[data-interface-theme="windows-95"] .endless-boot-settings > button {
  height: 28px;
  border: 2px solid var(--w95-shadow);
  border-radius: 0;
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
  opacity: 1;
}

html[data-interface-theme="windows-95"] .endless-boot-settings > button {
  width: 28px;
}

html[data-interface-theme="windows-95"] .endless-boot-settings > a:hover,
html[data-interface-theme="windows-95"] .endless-boot-settings > a:focus-visible,
html[data-interface-theme="windows-95"] .endless-boot-settings > button:hover,
html[data-interface-theme="windows-95"] .endless-boot-settings > button:focus-visible,
html[data-interface-theme="windows-95"] .endless-boot-settings > button[aria-expanded="true"] {
  border-color: var(--w95-shadow);
  color: #fff;
  background: #000080;
}

html[data-interface-theme="windows-95"] .endless-boot-settings-panel {
  border: 2px solid var(--w95-shadow);
  border-radius: 0;
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow:
    inset -1px -1px var(--w95-dark),
    inset 1px 1px var(--w95-hi),
    4px 4px 0 rgba(0, 0, 0, 0.38);
}

html[data-interface-theme="windows-95"] .endless-boot-settings-panel p,
html[data-interface-theme="windows-95"] .endless-boot-settings-panel label {
  color: var(--w95-text);
}

html[data-interface-theme="windows-95"] .endless-boot-settings-panel select {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-field);
  box-shadow: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-hi);
}

html[data-interface-theme="windows-95"] .endless-boot-hardware {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-panel);
  box-shadow:
    inset -1px -1px var(--w95-dark),
    inset 1px 1px var(--w95-hi),
    0 0 0 100vmax rgba(0, 0, 0, 0.66);
}

html[data-interface-theme="windows-95"] .endless-boot-hardware h2,
html[data-interface-theme="windows-95"] .endless-boot-hardware dd {
  color: var(--w95-accent-text);
}

html[data-interface-theme="windows-95"] .endless-boot-hardware header button {
  border: 2px solid var(--w95-shadow);
  color: var(--w95-text);
  background: var(--w95-face);
  box-shadow: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi);
}

@media (max-height: 560px) {
  html[data-interface-theme="windows-95"] .endless-boot-console {
    padding: 3px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-header {
    padding: 3px 5px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-transmission {
    margin-top: 3px;
    padding: 4px 6px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-status {
    padding-block: 3px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-machine {
    padding-block: 1px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-log {
    margin-block: 3px;
    padding: 4px 6px;
  }

  html[data-interface-theme="windows-95"] .endless-boot-footer {
    padding-top: 2px;
  }
}

html[data-interface-theme="dracula"] .system-bar,
html[data-interface-theme="dracula"] .desktop-window-bar {
  background: linear-gradient(90deg, rgba(189, 147, 249, 0.2), rgba(255, 121, 198, 0.14));
}

html[data-interface-theme="candy-pop"] .system-bar,
html[data-interface-theme="candy-pop"] .desktop-window-bar {
  background: linear-gradient(90deg, rgba(255, 117, 183, 0.22), rgba(109, 225, 255, 0.18));
}

html[data-interface-theme="minebits"] .shell,
html[data-interface-theme="minebits"] .desktop-window,
html[data-interface-theme="minebits"] .system-window,
html[data-interface-theme="minebits"] .fake-desktop-app {
  border: 4px solid #20251e;
  background: var(--shell-bg);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.14),
    inset -3px -3px 0 rgba(0, 0, 0, 0.42),
    9px 9px 0 rgba(18, 13, 8, 0.52);
}

html[data-interface-theme="minebits"] .system-bar,
html[data-interface-theme="minebits"] .desktop-window-bar,
html[data-interface-theme="minebits"] .fake-desktop-app > header {
  border-bottom: 4px solid #20251e;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 16px,
      rgba(0, 0, 0, 0.08) 16px 32px
    ),
    #5d713f;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.58);
}

html[data-interface-theme="minebits"] .system-status,
html[data-interface-theme="minebits"] .system-bar > p,
html[data-interface-theme="minebits"] .fake-playing-dead > header strong,
html[data-interface-theme="minebits"] .fake-desktop-app > header strong {
  color: var(--ink);
}

html[data-interface-theme="minebits"] button,
html[data-interface-theme="minebits"] input,
html[data-interface-theme="minebits"] textarea,
html[data-interface-theme="minebits"] select {
  border-width: 3px;
  border-color: #232821;
  border-radius: 0;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.14),
    inset -2px -2px 0 rgba(0, 0, 0, 0.36);
}

html[data-interface-theme="minebits"] button:hover,
html[data-interface-theme="minebits"] button:focus-visible {
  border-color: #9bd35f;
  background-color: #59634a;
  outline: 2px solid rgba(155, 211, 95, 0.35);
  outline-offset: 1px;
}

html[data-interface-theme="minebits"] .link-card,
html[data-interface-theme="minebits"] .spotify-widget,
html[data-interface-theme="minebits"] .now-playing,
html[data-interface-theme="minebits"] footer {
  border-width: 3px;
  border-color: #252a23;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0 12px,
      rgba(0, 0, 0, 0.035) 12px 24px
    ),
    var(--panel);
  box-shadow:
    inset 2px 2px rgba(255, 255, 255, 0.08),
    inset -2px -2px rgba(0, 0, 0, 0.22);
}

html[data-interface-theme="minebits"] .link-icon,
html[data-interface-theme="minebits"] .fake-desktop-icon {
  border: 3px solid #20251e;
  background:
    linear-gradient(180deg, #87c94c 0 28%, #66452c 28% 100%);
  box-shadow:
    inset 3px 3px rgba(255, 255, 255, 0.14),
    inset -3px -3px rgba(0, 0, 0, 0.34);
  image-rendering: pixelated;
}

html[data-interface-theme="minebits"] .fake-desktop {
  background: var(--body-background);
  background-attachment: fixed;
  background-size: var(--body-background-size);
}

html[data-interface-theme="minebits"] .fake-desktop-icons button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-interface-theme="minebits"] .fake-desktop-icons button:hover,
html[data-interface-theme="minebits"] .fake-desktop-icons button:focus-visible {
  border-color: rgba(155, 211, 95, 0.7);
  background: rgba(43, 57, 35, 0.38);
}

html[data-interface-theme="minebits"] .status-dot {
  border-radius: 0;
  box-shadow: 0 0 0 2px #26301e, 0 0 0 4px rgba(127, 189, 69, 0.24);
}

html[data-interface-theme="aero-glass"] .shell,
html[data-interface-theme="aero-glass"] .desktop-window,
html[data-interface-theme="aero-glass"] .system-window,
html[data-interface-theme="aero-glass"] .fake-desktop-app {
  border: 2px solid rgba(235, 250, 255, 0.74);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.62),
    inset 0 0 0 2px rgba(42, 126, 180, 0.28),
    0 0 0 3px rgba(7, 48, 82, 0.32),
    0 26px 72px rgba(0, 22, 46, 0.52),
    0 0 28px rgba(77, 189, 255, 0.2);
  backdrop-filter: blur(22px) saturate(1.34);
}

html[data-interface-theme="aero-glass"] .shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 118px),
    radial-gradient(ellipse at 28% -30%, rgba(255, 255, 255, 0.28), transparent 46%),
    var(--shell-bg);
}

html[data-interface-theme="aero-glass"] .desktop-window,
html[data-interface-theme="aero-glass"] .system-window,
html[data-interface-theme="aero-glass"] .fake-desktop-app {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 86px),
    var(--overlay-bg);
}

html[data-interface-theme="aero-glass"] body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 18% 20%, rgba(255, 255, 255, 0.36), transparent 16%),
    radial-gradient(ellipse at 82% 28%, rgba(119, 214, 255, 0.26), transparent 19%),
    radial-gradient(ellipse at 52% 108%, rgba(37, 186, 94, 0.82), transparent 35%),
    linear-gradient(165deg, transparent 58%, rgba(143, 240, 153, 0.22) 59%, transparent 74%);
  filter: blur(2px);
}

html[data-interface-theme="aero-glass"] body::after {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.52;
  background:
    radial-gradient(circle at 8% 74%, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 18%, rgba(255, 255, 255, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 68%, rgba(183, 238, 255, 0.3) 0 5px, transparent 6px);
}

html[data-interface-theme="aero-glass"] .system-bar,
html[data-interface-theme="aero-glass"] .desktop-window-bar,
html[data-interface-theme="aero-glass"] .fake-desktop-app > header {
  min-height: 48px;
  border-bottom-color: rgba(225, 247, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 47%, rgba(5, 62, 105, 0.28) 51%),
    rgba(31, 105, 154, 0.42);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px rgba(0, 37, 70, 0.42);
  text-shadow: 0 1px 2px rgba(0, 20, 42, 0.88);
}

html[data-interface-theme="aero-glass"] footer,
html[data-interface-theme="aero-glass"] .link-card,
html[data-interface-theme="aero-glass"] .spotify-widget,
html[data-interface-theme="aero-glass"] .now-playing {
  border-color: rgba(220, 245, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(19, 69, 104, 0.36);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 5px 18px rgba(0, 27, 52, 0.16);
}

html[data-interface-theme="aero-glass"] .window-controls {
  gap: 3px;
  padding: 4px;
}

html[data-interface-theme="aero-glass"] .app-menu-bar {
  border-bottom-color: rgba(225, 247, 255, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05)),
    rgba(20, 82, 125, 0.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
}

html[data-interface-theme="aero-glass"] .app-menu-popup {
  border-color: rgba(235, 250, 255, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 70px),
    rgba(12, 50, 82, 0.82);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.38),
    0 12px 32px rgba(0, 22, 46, 0.46);
  backdrop-filter: blur(24px) saturate(1.3);
}

html[data-interface-theme="aero-glass"] .window-button {
  width: 42px;
  min-height: 34px;
  border: 1px solid rgba(235, 250, 255, 0.54);
  border-radius: 0 0 5px 5px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(16, 79, 124, 0.38)),
    rgba(26, 91, 137, 0.66);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.32),
    0 1px 3px rgba(0, 22, 44, 0.46);
}

html[data-interface-theme="aero-glass"] .window-button:hover,
html[data-interface-theme="aero-glass"] .window-button:focus-visible {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(41, 161, 224, 0.36)),
    rgba(33, 122, 180, 0.72);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.5),
    0 0 9px rgba(80, 203, 255, 0.58);
}

html[data-interface-theme="aero-glass"] .close-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(158, 21, 29, 0.42)),
    rgba(190, 42, 51, 0.74);
}

html[data-interface-theme="aero-glass"] .close-button:hover,
html[data-interface-theme="aero-glass"] .close-button:focus-visible {
  background:
    linear-gradient(180deg, #ff8b82, #b70f19 58%, #77070d);
  box-shadow: 0 0 12px rgba(255, 87, 76, 0.8);
}

html.is-rgb-mode .shell {
  border-width: 2px;
  border-color: transparent;
  background:
    linear-gradient(var(--shell-bg), var(--shell-bg)) padding-box,
    conic-gradient(
      from var(--rgb-edge-angle),
      var(--rgb-edge-colors, #ff6d7a,
      #ff9b62,
      #ffcc66,
      #66ff9a,
      #63d8ff,
      #7aa7ff,
      #b99aff,
      #ff6d7a)
    ) border-box;
  animation: rgb-edge-cycle 7s linear infinite;
}

html.is-rgb-mode .desktop-window {
  border-width: 2px;
  border-color: transparent;
  background:
    linear-gradient(var(--overlay-bg), var(--overlay-bg)) padding-box,
    conic-gradient(
      from var(--rgb-edge-angle),
      var(--rgb-edge-colors, #ff6d7a,
      #ff9b62,
      #ffcc66,
      #66ff9a,
      #63d8ff,
      #7aa7ff,
      #b99aff,
      #ff6d7a)
    ) border-box;
  animation:
    desktop-window-open 180ms steps(3),
    rgb-edge-cycle 7s linear infinite;
}

html.is-rgb-mode {
  animation: rgb-accent-color-cycle 7s linear infinite;
}

html.is-rgb-mode,
html.is-rgb-mode * {
  scrollbar-color: var(--rgb-scrollbar-color) var(--scrollbar-track);
}

html.is-rgb-mode .link-card {
  --card-accent: var(--accent) !important;
}

html.is-rgb-mode::-webkit-scrollbar-thumb,
html.is-rgb-mode *::-webkit-scrollbar-thumb {
  background: var(--rgb-scrollbar-color);
  box-shadow:
    var(--scrollbar-thumb-shadow),
    0 0 8px rgba(var(--accent-rgb), 0.34);
  transition: filter 120ms ease;
}

html.is-rgb-mode::-webkit-scrollbar-thumb:hover,
html.is-rgb-mode *::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.18) saturate(1.2);
}

html.is-rgb-mode::-webkit-scrollbar-thumb:active,
html.is-rgb-mode *::-webkit-scrollbar-thumb:active {
  filter: brightness(1.3) saturate(1.2);
}

html.is-rgb-mode[data-interface-theme="terminal"]::-webkit-scrollbar-thumb,
html.is-rgb-mode[data-interface-theme="terminal"] *::-webkit-scrollbar-thumb {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 4px,
      rgba(0, 0, 0, 0.24) 4px 7px
    ),
    linear-gradient(var(--rgb-scrollbar-color), var(--rgb-scrollbar-color));
}

html.is-root-mode .name-field {
  opacity: 0.13;
  animation-duration: 12s;
}

@keyframes assistant-arrival {
  from {
    opacity: 0;
    transform: translate(12px, 12px);
  }
}

@keyframes system-window-in {
  from {
    filter: brightness(1.8) saturate(0);
    opacity: 0.35;
  }
}

@keyframes fake-404-flicker {
  50% { filter: invert(0.08); }
}

@keyframes cursor-bit-fade {
  to {
    opacity: 0;
    transform: translateY(-24px) rotate(25deg);
  }
}

@keyframes gravity-bit-drop {
  to {
    opacity: 0;
    transform: translateY(110vh) rotate(1turn);
  }
}

@keyframes antigravity-bit-rise {
  12%,
  75% { opacity: var(--bit-opacity); }
  to {
    opacity: 0;
    transform: translateY(-110vh) rotate(-0.5turn);
  }
}

@keyframes docked-bit-arrival {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(-20deg);
  }

  to { transform: translateX(-50%); }
}

@keyframes friday-thirteen {
  48% { filter: none; }
  49% { filter: contrast(1.25) hue-rotate(-12deg); }
  50% { filter: none; }
}

@keyframes typo-correction {
  50% { opacity: 0.72; }
}

@keyframes pulse {
  50% { opacity: 0.4; }
}

@keyframes achievement-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  to { transform: translateX(-50%); }
}

@keyframes spin-vinyl {
  to { transform: rotate(1turn); }
}

@keyframes system-crash {
  20% { filter: hue-rotate(90deg) contrast(1.2); }
  40% { filter: invert(1); }
  60% { filter: hue-rotate(240deg) brightness(1.2); }
  80% { filter: none; }
}

@keyframes avatar-corner-confetti {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.35) rotate(0);
  }
  12% { opacity: 1; }
  70% { opacity: 0.95; }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--confetti-dx) - 50%),
        calc(var(--confetti-dy) - 50%),
        0
      )
      scale(1.15)
      rotate(var(--confetti-spin));
  }
}

@keyframes avatar-idle-shadow {
  0%,
  100% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  36%,
  72% {
    opacity: 0.5;
    transform: rotate(-3deg) scale(0.96);
  }
}

@keyframes avatar-fury {
  0% { transform: translate(-2px, 1px) rotate(5deg) scale(1.08); }
  50% { transform: translate(2px, -1px) rotate(3deg) scale(1.08); }
}

@keyframes avatar-storm-off {
  20% { transform: translateX(-14px) rotate(-8deg) scale(1.08); }
  45% { transform: translateX(9px) rotate(6deg) scale(1.08); }
  100% {
    filter: saturate(3) contrast(1.3);
    opacity: 0;
    transform: translateX(-65vw) rotate(-24deg) scale(0.72);
  }
}

@keyframes avatar-shadow-exit {
  to {
    opacity: 0;
    transform: rotate(-5deg) scale(0.7);
  }
}

@keyframes avatar-return {
  from {
    opacity: 0;
    transform: translateX(-55vw) rotate(-18deg) scale(0.7);
  }
}

@keyframes avatar-sassy-arrival {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes chaos-shell {
  50% { filter: saturate(1.2) contrast(1.05); }
}

@keyframes rgb-edge-cycle {
  to { --rgb-edge-angle: 360deg; }
}

@keyframes rgb-accent-color-cycle {
  0%, 100% {
    --rgb-accent-red: var(--rgb-palette-0-red, 255);
    --rgb-accent-green: var(--rgb-palette-0-green, 109);
    --rgb-accent-blue: var(--rgb-palette-0-blue, 122);
  }
  14% {
    --rgb-accent-red: var(--rgb-palette-1-red, 255);
    --rgb-accent-green: var(--rgb-palette-1-green, 155);
    --rgb-accent-blue: var(--rgb-palette-1-blue, 98);
  }
  28% {
    --rgb-accent-red: var(--rgb-palette-2-red, 255);
    --rgb-accent-green: var(--rgb-palette-2-green, 204);
    --rgb-accent-blue: var(--rgb-palette-2-blue, 102);
  }
  42% {
    --rgb-accent-red: var(--rgb-palette-3-red, 102);
    --rgb-accent-green: var(--rgb-palette-3-green, 255);
    --rgb-accent-blue: var(--rgb-palette-3-blue, 154);
  }
  57% {
    --rgb-accent-red: var(--rgb-palette-4-red, 99);
    --rgb-accent-green: var(--rgb-palette-4-green, 216);
    --rgb-accent-blue: var(--rgb-palette-4-blue, 255);
  }
  71% {
    --rgb-accent-red: var(--rgb-palette-5-red, 122);
    --rgb-accent-green: var(--rgb-palette-5-green, 167);
    --rgb-accent-blue: var(--rgb-palette-5-blue, 255);
  }
  85% {
    --rgb-accent-red: var(--rgb-palette-6-red, 185);
    --rgb-accent-green: var(--rgb-palette-6-green, 154);
    --rgb-accent-blue: var(--rgb-palette-6-blue, 255);
  }
}

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

@keyframes drift-name-field {
  from { transform: translate3d(-1.5vw, -1vh, 0) rotate(-1deg); }
  to { transform: translate3d(1.5vw, 1vh, 0) rotate(1deg); }
}

@keyframes equalize {
  to { height: 100%; }
}

@keyframes fall-bit {
  0% {
    opacity: 0;
    transform: translateY(-5vh);
  }

  12%,
  75% {
    opacity: var(--bit-opacity);
  }

  100% {
    opacity: 0;
    transform: translateY(110vh);
  }
}

@keyframes close-interface {
  45% {
    opacity: 1;
    transform: scaleY(0.01);
  }

  70% {
    opacity: 1;
    transform: scale(0.18, 0.01);
  }

  100% {
    opacity: 0;
    transform: scale(0, 0.01);
  }
}

@keyframes boot-screen {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.05);
  }
}

@keyframes bsod-boot {
  0% {
    filter: brightness(4) saturate(0);
    background-position: -14vw 0, center;
  }
  35% {
    filter: brightness(1.8) saturate(1.8);
    background-position: 9vw 0, center;
  }
  70% {
    filter: brightness(0.7) saturate(2);
    background-position: -3vw 0, center;
  }
  100% {
    filter: none;
    background-position: 0 0, center;
  }
}

@keyframes bsod-glitch {
  0%,
  91%,
  94%,
  100% {
    filter: none;
    background-position: 0 0, center;
  }
  92% {
    filter: contrast(1.35) hue-rotate(8deg);
    background-position: -8px 0, center;
  }
  93% {
    filter: brightness(1.18);
    background-position: 11px 0, center;
  }
}

@keyframes bsod-tear {
  0%,
  82%,
  100% {
    transform: none;
  }
  84% {
    transform: translate(3%, -1%);
  }
  87% {
    transform: translate(-2%, 1%);
  }
}

@media (max-width: 640px) {
  .desktop-window {
    right: 10px;
    bottom: 10px;
    left: 10px !important;
    top: auto !important;
    width: auto !important;
    height: min(var(--window-default-height), calc(100vh - 20px)) !important;
    max-height: calc(100vh - 20px);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
  }

  .desktop-window.is-minimized {
    right: 10px;
    width: auto;
  }

  .desktop-window-resize-handle,
  .desktop-window-resize-edge {
    display: none;
  }

  .desktop-window-bar {
    position: sticky;
    z-index: 1;
    top: 0;
    cursor: default;
  }

  .desktop-spotify-content {
    grid-template-columns: 64px 1fr;
  }

  .desktop-spotify-art {
    width: 64px;
    height: 64px;
  }

  .achievement {
    top: 10px;
    width: calc(100% - 20px);
  }

  body:has(.forbidden-bit-dock:not(:empty)) {
    padding-bottom: 64px;
  }

  .bits-assistant {
    right: 10px;
    bottom: 10px;
    width: min(330px, calc(100% - 20px));
    max-height: calc(100vh - 20px);
  }

  .shell {
    width: min(100% - 20px, 500px);
    margin: 10px auto;
  }

  .system-bar {
    grid-template-columns: 1fr 1fr;
  }

  .system-bar > p {
    display: none;
  }

  .app-menu {
    position: static;
  }

  .app-menu summary {
    padding-inline: 8px;
  }

  .app-menu-popup,
  .app-menu:last-child .app-menu-popup {
    right: 8px;
    left: 8px;
    width: auto;
  }

  .profile {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 24px;
    padding: 34px 24px 30px;
  }

  .avatar-wrap {
    width: 126px;
    justify-self: end;
  }

  .profile > .profile-portrait {
    max-width: 126px;
  }

  .profile > .identity {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .profile > .avatar-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  .featured-section,
  .content-files-section,
  .link-section {
    padding: 0 24px 30px;
  }

  .featured-project {
    grid-template-columns: 1fr;
  }

  .featured-project-actions {
    grid-template-columns: 1fr 1fr;
  }

  .content-file-grid {
    grid-template-columns: 1fr;
  }

  .admin-window-launchers {
    grid-template-columns: 1fr;
  }

  .inbox-actions {
    align-items: stretch;
    justify-content: flex-start;
  }

  .resume-entry-list header {
    align-items: flex-start;
    flex-direction: column;
  }

  .resume-entry-list header p {
    text-align: left;
  }

  .changelog-entry-list > li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-section {
    padding: 0 24px 30px;
  }

  .contact-fields {
    grid-template-columns: 1fr;
  }

  .contact-actions,
  .admin-header,
  .inbox-toolbar,
  .message-card header {
    flex-direction: column;
  }

  .contact-actions {
    align-items: stretch;
  }

  .admin-shell {
    width: min(100% - 20px, 500px);
    margin: 10px auto;
  }

  .admin-header,
  .admin-panel {
    padding: 24px;
  }

  .link-grid {
    grid-template-columns: 1fr;
  }

  .now-playing {
    margin: 0 24px 30px;
  }

  .spotify-widget {
    grid-template-columns: 48px minmax(0, 1fr);
    margin: 0 24px 12px;
  }

  .spotify-artwork,
  .spotify-placeholder {
    width: 48px;
    height: 48px;
  }

  .spotify-track-link {
    display: none;
  }

  .spotify-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .uptime {
    display: none;
  }

  .now-playing {
    grid-template-columns: auto 1fr;
  }

  .monitor-window-launch {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  footer {
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  .achievement-data-controls {
    flex-direction: column;
  }

  .session-report {
    grid-template-columns: 1fr;
  }

  .session-report div:last-child {
    grid-column: auto;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: #769184;
    --muted: #b5c7bd;
    --shell-bg: #070c10;
    --overlay-bg: #070c10;
  }

  :root[data-color-scheme="light"] {
    --border: #40564a;
    --muted: #344a3e;
    --shell-bg: #fff;
    --overlay-bg: #fff;
  }

  .shell,
  .achievements-window,
  .system-window,
  .desktop-window {
    backdrop-filter: none;
    box-shadow: none;
  }

  .link-card,
  .featured-project,
  .contact-form,
  .achievement-entry {
    border-width: 2px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --shell-bg: #070c10;
    --admin-bg: #070c10;
    --overlay-bg: #070c10;
    --noise-opacity: 0;
  }

  :root[data-color-scheme="light"] {
    --shell-bg: #f8fbf9;
    --admin-bg: #f8fbf9;
    --overlay-bg: #f8fbf9;
  }

  .shell,
  .achievements-window,
  .system-window,
  .desktop-window {
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .name-field,
  .theme-atmosphere,
  .noise,
  .scanlines,
  .binary-rain,
  .cursor-bit {
    display: none;
  }

  .shell,
  .link-card,
  .featured-project,
  .contact-form,
  .spotify-widget,
  .now-playing,
  .achievements-window,
  .achievement-entry,
  .system-window,
  .desktop-window {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .status-dot,
  .cursor,
  .eye,
  .avatar::before,
  .avatar::after {
    background: currentColor;
    box-shadow: none;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}

html[data-textsize="large"] {
  font-size: 112.5%;
}

:root[data-contrast="high"][data-interface-theme][data-color-scheme] {
  --shell-bg: var(--bg);
  --admin-bg: var(--bg);
  --overlay-bg: var(--bg);
  --border: var(--accent);
  --muted: var(--ink);
  --noise-opacity: 0;
  --scanline-opacity: 0;
  --name-field-opacity: 0;
  --material-blur: 0px;
}

html[data-contrast="high"] .shell,
html[data-contrast="high"] .desktop-window,
html[data-contrast="high"] .system-window,
html[data-contrast="high"] .achievements-window {
  backdrop-filter: none;
  box-shadow: 0 0 0 2px var(--accent);
}

html[data-effects="off"] .name-field,
html[data-effects="off"] .theme-atmosphere,
html[data-effects="off"] .binary-rain,
html[data-effects="off"] .noise,
html[data-effects="off"] .scanlines {
  display: none !important;
}

html[data-contrast="high"] .theme-atmosphere {
  display: none !important;
}

html[data-interface-theme="high-contrast"] .theme-atmosphere {
  display: none !important;
}

html[data-interface-theme="high-contrast"] .shell,
html[data-interface-theme="high-contrast"] .desktop-window,
html[data-interface-theme="high-contrast"] .system-window,
html[data-interface-theme="high-contrast"] .achievements-window {
  backdrop-filter: none;
  box-shadow: 0 0 0 2px var(--border);
}

html[data-interface-theme="high-contrast"] a:not([class]) {
  text-decoration: underline;
}

html[data-interface-theme="high-contrast"] :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

html.is-performance-lite .theme-atmosphere {
  opacity: 0.35;
}

html[data-motion="reduced"] .name-field {
  animation: none;
}

html[data-motion="reduced"] .binary-rain {
  display: none;
}

html[data-motion="reduced"][data-interface-theme="aurora"] body {
  animation: none !important;
}

html[data-motion="reduced"].is-rgb-mode {
  animation: none !important;
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-interface-theme="aurora"] body {
    animation: none !important;
  }

  .name-field {
    animation: none;
  }

  .binary-rain {
    display: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Experimental layout notice, shown by /shared/scripts/layouts/runtime.js. Layout themes may restyle it. */
.bits-layout-notice {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(640px, calc(100vw - 24px));
  padding: 8px 8px 8px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(var(--accent-rgb, 125, 255, 175), 0.55);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #10161c) 92%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink, #e8f0ea);
  font: 600 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  backdrop-filter: blur(10px);
}

.bits-layout-notice strong {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent, #7dffaf);
  color: var(--bg, #070b0f);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.bits-layout-notice span {
  min-width: 0;
}

.bits-layout-notice button {
  flex: none;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.bits-layout-notice .bits-layout-notice-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border-color: transparent;
  font-size: 16px;
  line-height: 1;
}

.bits-layout-notice button:hover,
.bits-layout-notice button:focus-visible {
  background: rgba(var(--accent-rgb, 125, 255, 175), 0.18);
}

@media (max-width: 560px) {
  .bits-layout-notice {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 14px;
    text-align: center;
  }
}

@media print {
  .bits-layout-notice,
  [data-layout-chrome] {
    display: none !important;
  }
}