@font-face {
    font-family: "Pixel";
    src: url("/static/fonts/fusion-pixel-10px-proportional-ko.woff2") format("woff2");
    font-display: block;
  }
  .font-loader {
    position: fixed; inset: 0; display: grid; place-items: center;
    background: var(--background); color: var(--text-primary);
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 21px; z-index: 9999;
  }
  .font-loader::after {
    content: "\25AE";
    animation: pixel-blink 1s steps(2, end) infinite;
  }
  @keyframes pixel-blink { 50% { opacity: 0; } }
  html.js:not(.fonts-loaded) body > *:not(.font-loader) { visibility: hidden; }
  html.fonts-loaded .font-loader,
  html:not(.js) .font-loader { display: none; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    background: var(--background);
    color: var(--text-primary);
    font-family: "Pixel", monospace;
    -webkit-font-smoothing: none;
    font-smooth: never;
    transition: background-color .25s ease;
  }
  body { min-height: 100vh; display: flex; flex-direction: column; }
  main {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; padding: 5vh 20px;
  }
  .dom { font-size: clamp(28px, 9vw, 96px); letter-spacing: 1px; user-select: none; }
  .accent { cursor: pointer; display: inline-block; color: var(--primary-light); transition: color .15s; }
  .sub { font-size: 14px; color: var(--text-secondary); letter-spacing: 4px; margin-top: 18px; }
  .caret {
    display: inline-block; width: 10px; height: 14px;
    background: var(--accent-yellow); vertical-align: -2px; margin-left: 6px;
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  body.hot { background-color: var(--surface); }
  body.hot .accent { color: var(--text-primary); }
  body.hot .caret { background-color: var(--accent); }
  body.hot .sub { color: var(--text-primary); }
  ::selection { background: var(--accent-yellow); color: var(--background); }

  @keyframes shake {
    0%, 100% { transform: translate(0,0) rotate(0); }
    10% { transform: translate(-3px, 1px) rotate(-1.5deg); }
    25% { transform: translate(3px, -2px) rotate(1.5deg); }
    40% { transform: translate(-2px, 2px) rotate(-1deg); }
    55% { transform: translate(2px, 1px) rotate(1deg); }
    70% { transform: translate(-1px, -1px) rotate(-.6deg); }
    85% { transform: translate(1px, 1px) rotate(.6deg); }
  }
  .accent.active { animation: shake .45s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .accent.active, .caret { animation: none; }
  }