@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  :root {
    --bg: #000000;
    --g: #00ff7b; --g2: #00c45e; --ink: #d9ffe9; --dim: #5f9c7c; --rgb: 0,255,123;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: var(--bg); color-scheme: dark; }
  body {
    font-family: "Geist Mono", ui-monospace, monospace;
    color: var(--ink); font-size: 14px; line-height: 20px;
    overflow: hidden; -webkit-font-smoothing: antialiased; cursor: crosshair;
    transition: color 700ms var(--ease);
  }
  canvas#rain { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

  .crt { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
  .crt::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
  .crt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%); }
  .flicker { animation: flicker 6s steps(1) infinite; }
  @keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.82; } 98% { opacity: 1; } 99% { opacity: 0.9; } }
  .flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: rgb(var(--rgb)); opacity: 0; }
  .flash.go { animation: flash 600ms var(--ease); }
  @keyframes flash { 0% { opacity: 0.35; } 100% { opacity: 0; } }

  .stage { position: fixed; inset: 0; z-index: 2; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: 24px; perspective: 1400px; pointer-events: none; transition: opacity 900ms var(--ease), filter 900ms var(--ease), visibility 0s; }
  /* idle dissolve: after a quiet minute only the rain remains */
  body.idle .stage { opacity: 0; filter: blur(12px); visibility: hidden; transition: opacity 2400ms var(--ease), filter 2400ms var(--ease), visibility 0s 2400ms; }
  body.idle .stage > * { pointer-events: none; }
  body.idle .hint.on, body.idle .term-btn.on, body.idle .beat-tag.on { opacity: 0; pointer-events: none; }
  .stage > * { pointer-events: auto; }

  .boot { position: absolute; left: 24px; bottom: 24px; right: 24px; max-width: 520px; font-size: 12px; line-height: 16px; color: var(--g); text-shadow: 0 0 8px rgba(var(--rgb),0.6); transition: opacity 900ms var(--ease), filter 900ms var(--ease); pointer-events: none; }
  .boot.gone { opacity: 0; filter: blur(8px); }
  .boot .ok { color: var(--ink); }
  .caret { display: inline-block; width: 8px; height: 16px; background: var(--g); vertical-align: bottom; animation: blink 900ms steps(1) infinite; box-shadow: 0 0 12px var(--g); }
  @keyframes blink { 50% { opacity: 0; } }

  /* Card: outer tilts, inner flips */
  .card {
    margin: auto;
    position: relative; width: 100%; max-width: 480px;
    transform-style: preserve-3d;
    opacity: 0; transform: translateY(64px) rotateX(18deg) scale(0.94); filter: blur(12px);
    transition: opacity 1100ms var(--ease), transform 1100ms var(--ease), filter 1100ms var(--ease);
    will-change: transform;
  }
  .card.live { opacity: 1; filter: none; transform: none; }
  .card.tilting { transition: opacity 1100ms var(--ease), filter 1100ms var(--ease), transform 120ms linear; }
  .card.hit { animation: hit 420ms var(--ease); }
  @keyframes hit { 30% { translate: 0 -8px; } 60% { translate: 0 4px; } }

  .inner { display: grid; transform-style: preserve-3d; transition: transform 1000ms var(--ease); }
  .inner.flipped { transform: rotateY(180deg); }

  .face {
    grid-area: 1 / 1; position: relative;
    padding: 32px; border-radius: 24px;
    border: 1px solid rgba(var(--rgb),0.28);
    background: rgba(0, 10, 5, 0.66);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0 0 1px rgba(var(--rgb),0.08) inset, 0 0 40px rgba(var(--rgb),0.18), 0 0 120px rgba(var(--rgb),0.10), 0 32px 80px rgba(0,0,0,0.8);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease);
  }
  .face.back { transform: rotateY(180deg); display: flex; flex-direction: column; }
  /* rotating holographic edge */
  .face::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--a), transparent 0 62%, rgba(var(--rgb),0.2) 70%, var(--g) 80%, #ffffff 82%, var(--g) 84%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: spin 5200ms linear infinite;
    filter: drop-shadow(0 0 6px var(--g));
  }
  @keyframes spin { to { --a: 360deg; } }
  .face .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--rgb),0.16), transparent 60%); mix-blend-mode: screen; }
  .face .beam { position: absolute; left: 0; right: 0; height: 2px; top: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--rgb),0.9), transparent); box-shadow: 0 0 16px var(--g); opacity: 0; animation: beam 5200ms var(--ease) 2600ms infinite; }
  @keyframes beam { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }

  .head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; }
  .tag { font-size: 12px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
  .live-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--g); letter-spacing: 0.12em; text-transform: uppercase; }
  .live-dot i { width: 8px; height: 8px; border-radius: 9999px; background: var(--g); box-shadow: 0 0 12px var(--g), 0 0 24px var(--g); animation: pulse 1600ms var(--ease) infinite; }
  @keyframes pulse { 50% { opacity: 0.3; transform: scale(0.7); } }

  .name { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-shadow: 0 0 12px rgba(var(--rgb),0.55), 0 0 40px rgba(var(--rgb),0.25); position: relative; }
  .name.glitch::before, .name.glitch::after { content: attr(data-text); position: absolute; inset: 0; }
  .name.glitch::before { color: #00ffd5; clip-path: inset(10% 0 55% 0); mix-blend-mode: screen; animation: gl1 380ms steps(2) 1; }
  .name.glitch::after { color: #b6ff00; clip-path: inset(60% 0 8% 0); mix-blend-mode: screen; animation: gl2 380ms steps(2) 1; }
  @keyframes gl1 { 0% { transform: translate(-4px,-1px); } 50% { transform: translate(3px,1px); } 100% { transform: none; opacity: 0; } }
  @keyframes gl2 { 0% { transform: translate(4px,1px); } 50% { transform: translate(-3px,-1px); } 100% { transform: none; opacity: 0; } }
  .handle { margin-top: 8px; color: var(--g); font-size: 14px; line-height: 20px; }

  .rows { list-style: none; margin-top: 32px; border-top: 1px solid rgba(var(--rgb),0.18); }
  .rows li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(var(--rgb),0.1); transition: background-color 700ms var(--ease), padding 700ms var(--ease); }
  .rows li:hover { background: rgba(var(--rgb),0.06); padding-left: 8px; padding-right: 8px; }
  .rows .k { font-size: 16px; line-height: 24px; color: var(--ink); }
  .rows .v { font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g); border: 1px solid rgba(var(--rgb),0.35); border-radius: 9999px; padding: 2px 8px; white-space: nowrap; }
  .rows .v.priv { color: var(--dim); border-color: rgba(var(--rgb),0.18); }

  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 24px; font-size: 12px; line-height: 16px; color: var(--dim); }
  .meta b { display: block; font-weight: 400; color: var(--ink); margin-top: 2px; }
  .locval { display: block; }
  .meta .locval a { display: inline-block; margin-top: 2px; color: var(--g); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--rgb),0.45); border-radius: 4px; transition: color 700ms var(--ease), text-decoration-color 700ms var(--ease); }
  .meta .locval a:hover { color: var(--ink); text-decoration-color: var(--ink); }
  .meta .locval a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .meta .clock { display: block; margin-top: 2px; padding: 0; background: none; border: 0; color: var(--ink); font: 400 12px/16px "Geist Mono", monospace; text-align: left; cursor: pointer; border-radius: 4px; transition: color 700ms var(--ease); }
  .meta .clock:hover { color: var(--g); }
  .meta .clock:active { transform: translateY(1px); }
  .meta .clock:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .foot { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
  .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 8px 12px; font: 600 16px/24px "Geist Mono", ui-monospace, monospace; cursor: pointer; transition: transform 700ms var(--ease), box-shadow 700ms var(--ease), background-color 700ms var(--ease), color 700ms var(--ease); }
  .btn svg { width: 16px; height: 16px; }
  .btn:active { transform: scale(0.98); }
  .btn:focus-visible, .ghost:focus-visible, .term-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .btn.primary { background: var(--g); color: #00170b; box-shadow: 0 0 24px rgba(var(--rgb),0.5); }
  .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(var(--rgb),0.8); }
  .btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: shine 3600ms var(--ease) 3200ms infinite; }
  @keyframes shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
  .btn.ghost { background: transparent; color: var(--g); border: 1px solid rgba(var(--rgb),0.4); padding: 7px 11px; }
  .btn.ghost:hover { background: rgba(var(--rgb),0.1); transform: translateY(-2px); }
  .note { margin-top: 16px; font-size: 12px; line-height: 16px; color: var(--dim); min-height: 16px; }
  .note.ok { color: var(--g); }

  /* Back face */
  .runename { font-size: 48px; line-height: 1; letter-spacing: 0.08em; color: var(--ink); text-shadow: 0 0 16px rgba(var(--rgb),0.7), 0 0 48px rgba(var(--rgb),0.3); }
  .sigil { display: block; width: 112px; height: 112px; flex: none; color: var(--g); filter: drop-shadow(0 0 8px rgba(var(--rgb),0.8)); }
  .omen { display: flex; align-items: center; gap: 24px; margin: 24px 0; }
  .rotd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 12px; margin: -8px -12px; background: none; border: 0; border-radius: 12px; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background-color 700ms var(--ease), transform 700ms var(--ease); }
  .rotd:hover { background: rgba(var(--rgb),0.08); transform: translateY(-2px); }
  .rotd:active { transform: scale(0.98); }
  .rotd:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .rotd-tag { font-size: 12px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
  .rotd-glyph { font-size: 36px; line-height: 40px; color: var(--g); text-shadow: 0 0 16px rgba(var(--rgb),0.7); }
  .rotd-name { font-size: 16px; line-height: 24px; font-weight: 500; }
  .rotd-mean { font-size: 12px; line-height: 16px; color: var(--dim); text-wrap: pretty; }
  .sigil .rot { transform-origin: 64px 64px; animation: rot 24s linear infinite; }
  .sigil .rot2 { transform-origin: 64px 64px; animation: rot 36s linear infinite reverse; }
  @keyframes rot { to { transform: rotate(360deg); } }
  .runes { list-style: none; border-top: 1px solid rgba(var(--rgb),0.18); }
  .runes li { padding: 12px 0; border-bottom: 1px solid rgba(var(--rgb),0.1); font-size: 16px; line-height: 24px; color: var(--g); cursor: help; letter-spacing: 0.04em; }
  .back .foot { margin-top: auto; padding-top: 24px; justify-content: space-between; }
  .eye { background: none; border: 0; padding: 8px; border-radius: 8px; color: var(--g); opacity: 0.22; cursor: pointer; transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); }
  .eye svg { display: block; width: 40px; height: 24px; }
  .eye:hover, .eye:focus-visible { opacity: 1; transform: translateY(-2px); filter: drop-shadow(0 0 8px var(--g)) drop-shadow(0 0 20px var(--g)); }
  .eye:active { transform: scale(0.98); }
  .eye:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .proj { display: flex; align-items: center; gap: 12px; }
  .eye-sm { padding: 3px 6px; opacity: 0.75; }
  .eye-sm svg { width: 28px; height: 18px; }

  /* Hint + terminal */
  .hint { position: fixed; left: 24px; bottom: 24px; z-index: 6; font-size: 12px; line-height: 16px; color: var(--dim); opacity: 0; transition: opacity 1200ms var(--ease); pointer-events: none; }
  .hint.on { opacity: 1; }
  .hint kbd { font: inherit; color: var(--g); border: 1px solid rgba(var(--rgb),0.35); border-radius: 4px; padding: 0 4px; }
  .term-btn { position: fixed; right: 24px; bottom: 24px; z-index: 6; width: 48px; height: 48px; border-radius: 9999px; border: 1px solid rgba(var(--rgb),0.55); background: rgba(0,10,5,0.8); color: var(--g); font: 600 14px/20px "Geist Mono", monospace; cursor: pointer; box-shadow: 0 0 24px rgba(var(--rgb),0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 1200ms var(--ease), transform 700ms var(--ease), box-shadow 700ms var(--ease); }
  .term-btn.on { opacity: 1; }
  .beat-btn { right: 80px; display: grid; place-items: center; }
  .beat-btn svg { width: 20px; height: 20px; }
  .beat-btn.playing { background: rgba(var(--rgb),0.16); box-shadow: 0 0 40px rgba(var(--rgb),0.7); }
  .beat-btn.playing svg { animation: wave 2400ms var(--ease) infinite; }
  @keyframes wave { 50% { transform: scaleY(0.55); } }
  .beat-tag { position: fixed; right: 24px; bottom: 80px; z-index: 6; font-size: 12px; line-height: 16px; color: var(--g); text-align: right; padding: 4px 8px; border-radius: 8px; background: rgba(0,8,4,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); pointer-events: none; }
  .beat-tag.on { opacity: 1; transform: none; }
  .beat-tag span { display: block; color: var(--dim); }
  .term-btn:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(var(--rgb),0.6); }
  .term-btn:active { transform: scale(0.98); }

  .term {
    position: fixed; left: 50%; bottom: 24px; z-index: 6; width: min(560px, calc(100% - 32px));
    border-radius: 16px; border: 1px solid rgba(var(--rgb),0.4);
    background: rgba(0,6,3,0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 0 48px rgba(var(--rgb),0.3), 0 24px 64px rgba(0,0,0,0.9);
    transform: translate(-50%, 48px) scale(0.98); opacity: 0; pointer-events: none;
    transition: transform 700ms var(--ease), opacity 700ms var(--ease);
  }
  .term.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .term .bar { display: flex; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid rgba(var(--rgb),0.18); font-size: 12px; line-height: 16px; color: var(--dim); }
  .term .bar button { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; }
  .term .bar button:hover { color: var(--g); }
  .term .out { height: min(320px, 44vh); overflow-y: auto; padding: 12px 16px; font-size: 12px; line-height: 16px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
  .term .out .w { color: #ffb347; }
  .term .out a { color: var(--g); text-underline-offset: 3px; }
  .term .out a:hover { color: var(--ink); }
  .term .out .big { font-size: 24px; line-height: 32px; color: var(--g); }
  .term .out .cp { margin-left: 8px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(var(--rgb),0.4); background: none; color: var(--g); font: 500 12px/16px "Geist Mono", monospace; cursor: pointer; vertical-align: baseline; transition: background-color 700ms var(--ease); }
  .term .out .cp:hover { background: rgba(var(--rgb),0.14); }
  .term .out .cp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .term .out .p { color: var(--g); }
  .term .out .e { color: #ff6b7f; }
  .term .out .d { color: var(--dim); }
  .term form { display: flex; gap: 8px; padding: 8px 16px 12px; color: var(--g); font-size: 14px; line-height: 20px; }
  .term input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; caret-color: var(--g); }
  .term .run { width: 32px; height: 32px; margin: -6px 0; border-radius: 8px; border: 1px solid rgba(var(--rgb),0.4); background: rgba(var(--rgb),0.08); color: var(--g); font: 600 16px/1 "Geist Mono", monospace; cursor: pointer; transition: background-color 700ms var(--ease), transform 700ms var(--ease); }
  .term .run:hover { background: rgba(var(--rgb),0.18); }
  .term .run:active { transform: scale(0.98); }
  .term .run:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  @media (max-width: 480px) {
    /* phones: keep the bottom strip free for the round controls, and tighten the card */
    .stage { padding: max(16px, env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
    .beat-btn, .term-btn { bottom: calc(24px + env(safe-area-inset-bottom)); }
    .beat-tag { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .face { padding: 20px; border-radius: 16px; }
    .head { margin-bottom: 20px; }
    .name, .runename { font-size: 36px; line-height: 40px; }
    .tag .dom { display: none; }
    .rows { margin-top: 20px; }
    .rows li, .runes li { padding: 8px 0; }
    .meta { margin-top: 16px; gap: 8px 16px; }
    .meta .clockcell { grid-column: 1 / -1; }
    .foot { margin-top: 20px; flex-wrap: wrap; }
    .front .foot .btn { flex: 1 1 auto; }
    .note { margin-top: 8px; }
    .note:empty { display: none; }
    .sigil { width: 80px; height: 80px; }
    .omen { gap: 16px; margin: 16px 0; }
    .rotd-glyph { font-size: 30px; line-height: 36px; }
    .back .foot { padding-top: 16px; flex-wrap: nowrap; }
    .hint { right: 144px; bottom: calc(24px + env(safe-area-inset-bottom)); text-wrap: pretty; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card, .inner { transition: none; }
    .card { transform: none; filter: none; }
    .beat-btn.playing svg, .face::before, .face .beam, .btn.primary::after, .flicker, .caret, .live-dot i, .sigil .rot, .sigil .rot2 { animation: none; }
  }