@property --bg-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; overflow: hidden; background: #07060d; }

  .stage { position: fixed; inset: 0; will-change: transform; }
  .bg {
    position: absolute; inset: -4%;
    background:
      conic-gradient(from var(--bg-angle) at 50% 50%,
        oklch(16% 0.13 280), oklch(12% 0.10 200), oklch(19% 0.15 330),
        oklch(11% 0.09 150), oklch(16% 0.13 280));
    animation: drift 16s linear infinite; filter: saturate(1.15);
  }
  @keyframes drift { to { --bg-angle: 360deg; } }
  canvas { position: absolute; inset: 0; display: block; touch-action: none; }

  /* ---- live control panel ---- */
  #panel {
    position: fixed; top: 14px; left: 14px; z-index: 10;
    width: min(248px, calc(100vw - 160px)); padding: 14px 16px 16px;
    border-radius: 16px;
    background: oklch(18% 0.04 285 / .55);
    border: 1px solid oklch(80% 0.05 285 / .18);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 12px 40px #0008;
    color: oklch(95% 0.02 285);
    font: 500 13px/1.3 system-ui, sans-serif;
    user-select: none;
  }
  #panel header {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-weight: 700; letter-spacing: .03em;
    margin-bottom: 12px;
  }
  #panel header .tw { color: oklch(82% 0.18 320); }
  #panel .chev { transition: rotate .25s ease; opacity: .7; }
  #panel.collapsed .chev { rotate: -90deg; }
  #panel.collapsed .body { display: none; }
  .row { margin: 11px 0; }
  .row label { display: flex; justify-content: space-between; margin-bottom: 5px; opacity: .92; }
  .row label b { color: oklch(85% 0.16 320); font-variant-numeric: tabular-nums; }
  input[type=range] {
    width: 100%; accent-color: oklch(72% 0.21 320); cursor: pointer; margin: 0;
  }
  .controls { display: flex; gap: 8px; margin-top: 14px; }
  .controls button {
    flex: 1; padding: 7px 0; border-radius: 9px; cursor: pointer;
    border: 1px solid oklch(80% 0.05 285 / .22);
    background: oklch(30% 0.05 285 / .5); color: inherit;
    font: 600 12px system-ui, sans-serif; letter-spacing: .03em;
    transition: background .15s ease;
  }
  .controls button:hover { background: oklch(40% 0.09 320 / .6); }
  .toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
  .toggle input { accent-color: oklch(72% 0.21 320); width: 16px; height: 16px; }

  .hint {
    position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 5;
    max-width: min(90vw, 560px);
    font: 600 13px/1.4 system-ui, sans-serif; letter-spacing: .04em;
    color: oklch(92% 0.02 280 / .8); text-align: center;
    text-shadow: 0 1px 6px #000a; pointer-events: none;
    animation: fade 1s ease 7s forwards;
  }
  @keyframes fade { to { opacity: 0; } }

  #links { position: fixed; right: 14px; bottom: 12px; z-index: 30;
    display: flex; gap: 8px; align-items: center; }
  #links-btn, #contact-btn {
    padding: 7px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid oklch(80% 0.05 285 / .22);
    background: oklch(20% 0.04 285 / .55); color: oklch(88% 0.04 285 / .85);
    backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
    font: 600 12px system-ui, sans-serif; letter-spacing: .05em;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  #links-btn:hover, #contact-btn:hover, #links.open #links-btn, #links.open-contact #contact-btn {
    background: oklch(30% 0.07 320 / .6); color: oklch(90% 0.1 320);
    box-shadow: 0 6px 18px #0007;
  }
  #links-menu, #contact-menu {
    position: absolute; right: 0; bottom: calc(100% + 10px);
    width: min(272px, calc(100vw - 28px));
    max-height: calc(100dvh - 90px); overflow-y: auto;
    padding: 0 0 8px; border-radius: 14px;
    background: oklch(15% 0.03 285 / .92);
    border: 1px solid oklch(80% 0.05 285 / .18);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 18px 54px #000b;
    opacity: 0; translate: 0 8px; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, translate .18s ease, visibility .18s;
  }
  #links.open #links-menu, #links.open-contact #contact-menu { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; }
  #links-menu .doom, #contact-menu .doom {
    display: grid; place-items: center; padding: 12px 10px 8px;
    background:
      radial-gradient(120% 90% at 50% 110%, oklch(22% 0.03 60 / .5), transparent 70%),
      oklch(10% 0.01 285);
    border-bottom: 1px solid oklch(80% 0.05 285 / .12);
    border-radius: 13px 13px 0 0; margin-bottom: 6px;
  }
  #links-menu .doom svg, #contact-menu .doom svg { width: 100%; height: auto; display: block;
    filter: drop-shadow(0 0 14px oklch(60% 0.02 60 / .35)); }
  #links-menu a {
    display: block; padding: 8px 16px; text-decoration: none;
    color: oklch(88% 0.03 285 / .85);
    font: 600 13px/1.3 system-ui, sans-serif; letter-spacing: .02em;
    transition: background .12s ease, color .12s ease;
  }
  #links-menu a:hover { background: oklch(30% 0.07 320 / .45); color: oklch(92% 0.12 320); }
  #links-menu a.sub {
    padding: 5px 16px 7px 26px; font-weight: 500; font-size: 12px;
    color: oklch(72% 0.03 285 / .75);
  }
  #links-menu a.sub::before { content: "– "; opacity: .55; }
  #links-menu .grp { margin-bottom: 2px; }

  #credit {
    position: fixed; top: 34px; right: 16px; z-index: 10;
    font: 500 11px/1.3 system-ui, sans-serif; letter-spacing: .03em;
    color: oklch(85% 0.03 285 / .6); text-align: right;
    text-shadow: 0 1px 5px #000a; pointer-events: none;
    max-width: 130px;
  }
  #credit b { color: oklch(82% 0.16 320); font-weight: 700; }
  #credit b.rt { pointer-events: auto; cursor: default; }
  #credit a {
    color: oklch(82% 0.16 320); font-weight: 700; text-decoration: none;
    pointer-events: auto; transition: color .18s ease, text-shadow .18s ease;
  }
  #credit a:hover { color: oklch(88% 0.2 320); text-shadow: 0 0 10px oklch(72% 0.2 320 / .8); }

  #clock {
    position: fixed; top: 15px; right: 16px; z-index: 10;
    font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em;
    color: oklch(85% 0.03 285 / .5); text-align: right;
    text-shadow: 0 1px 5px #000a; pointer-events: none;
  }
  #clock b { color: oklch(80% 0.16 150); font-weight: 700; }
  #clock .sep { animation: blink 1s step-end infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  /* ---- analytics consent banner ---- */
  #consent {
    position: fixed; left: 50%; bottom: 56px; translate: -50% 0; z-index: 90;
    width: min(430px, calc(100vw - 24px));
    padding: 13px 16px; border-radius: 14px;
    background: oklch(18% 0.04 285 / .72);
    border: 1px solid oklch(80% 0.05 285 / .2);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 14px 44px #000a;
    color: oklch(93% 0.02 285);
    font: 500 13px/1.45 system-ui, sans-serif;
  }
  #consent p { margin: 0 0 10px; }
  .consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .consent-actions button {
    padding: 6px 14px; border-radius: 9px; cursor: pointer;
    border: 1px solid oklch(80% 0.05 285 / .25);
    background: oklch(30% 0.05 285 / .55); color: inherit;
    font: 600 12px system-ui, sans-serif; letter-spacing: .03em;
    transition: background .15s ease;
  }
  .consent-actions button:hover { background: oklch(40% 0.06 285 / .6); }
  .consent-actions button.ok {
    background: oklch(45% 0.13 150 / .55); border-color: oklch(75% 0.14 150 / .4);
  }
  .consent-actions button.ok:hover { background: oklch(52% 0.15 150 / .65); }

  /* ---- terminal launcher + popup ---- */
  #term-btn {
    position: fixed; left: 14px; bottom: 12px; z-index: 20;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 9px; cursor: pointer;
    background: oklch(20% 0.04 285 / .55); border: 1px solid oklch(80% 0.05 285 / .2);
    backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
    color: oklch(84% 0.16 150);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  #term-btn:hover { background: oklch(32% 0.09 150 / .55); transform: translateY(-2px); box-shadow: 0 6px 18px #0007; }
  #term-btn svg { width: 18px; height: 18px; display: block; }

  #term-overlay {
    position: fixed; inset: 0; z-index: 100; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: oklch(8% 0.02 285 / .55); backdrop-filter: blur(3px);
  }
  #term-overlay.show { display: flex; }
  #term-win {
    width: min(680px, 100%); height: min(460px, 82vh);
    display: flex; flex-direction: column; overflow: hidden;
    background: oklch(14% 0.02 265 / .97);
    border: 1px solid oklch(80% 0.05 285 / .2); border-radius: 12px;
    box-shadow: 0 24px 70px #000b;
    font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  #term-head {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 9px 12px; background: oklch(20% 0.02 265 / .9);
    border-bottom: 1px solid oklch(80% 0.05 285 / .12);
    color: oklch(80% 0.02 285 / .8); font-size: 12px;
  }
  #term-head .dots { display: flex; gap: 6px; }
  #term-head .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  #term-head .dots i:nth-child(1){ background:#ff5f57; }
  #term-head .dots i:nth-child(2){ background:#febc2e; }
  #term-head .dots i:nth-child(3){ background:#28c840; }
  #term-head .ttl { flex: 1; text-align: center; letter-spacing: .03em; }
  #term-close { background: none; border: none; color: inherit; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 3px 7px; border-radius: 6px; }
  #term-close:hover { background: oklch(40% 0.02 285 / .5); color: #fff; }
  #term-body {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    color: oklch(90% 0.02 150); white-space: pre-wrap; word-break: break-word;
  }
  #term-body::-webkit-scrollbar { width: 8px; }
  #term-body::-webkit-scrollbar-thumb { background: oklch(40% 0.03 285 / .5); border-radius: 4px; }
  .term-out { margin: 0 0 1px; }
  #term-inputline { display: flex; align-items: baseline; gap: 6px; flex: none; padding: 6px 14px 12px; }
  #term-ps { color: oklch(80% 0.16 150); white-space: pre; flex: none; }
  #term-input { flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: oklch(92% 0.02 150); font: inherit; caret-color: oklch(80% 0.16 150); }
  .c-prompt { color: oklch(80% 0.16 150); }
  .c-dir { color: oklch(74% 0.14 245); font-weight: 600; }
  .c-dim { color: oklch(58% 0.02 285); }
  .c-err { color: oklch(72% 0.19 25); }
  .c-ok  { color: oklch(82% 0.16 150); }
  .c-hint { color: oklch(84% 0.14 95); }
  .c-match { color: oklch(88% 0.19 25); background: oklch(45% 0.12 25 / .3); border-radius: 2px; }

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

  #contact-menu .secret {
    padding: 10px 14px 6px;
    font: 12px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  #contact-menu .intro {
    margin: 0 0 8px;
    font: 500 12.5px/1.4 system-ui, sans-serif; letter-spacing: .01em;
    color: oklch(90% 0.02 285 / .85);
  }
  #contact-menu .cmdline { color: oklch(80% 0.16 150); margin-bottom: 6px; }
  #contact-menu pre {
    margin: 0 0 10px; white-space: pre; overflow-x: auto;
    color: oklch(72% 0.03 285 / .85);
  }
  #contact-menu pre::-webkit-scrollbar { height: 6px; }
  #decode-btn {
    padding: 5px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid oklch(75% 0.14 150 / .4);
    background: oklch(45% 0.13 150 / .5); color: oklch(92% 0.05 150);
    font: 600 12px ui-monospace, "SF Mono", Menlo, monospace;
    transition: background .15s ease;
  }
  #decode-btn:hover { background: oklch(52% 0.15 150 / .65); }
  #email-out { padding: 2px 0 6px; }
  #email-out a {
    color: oklch(84% 0.16 150); font-weight: 700; text-decoration: none;
  }
  #email-out a:hover { text-shadow: 0 0 10px oklch(75% 0.16 150 / .8); }