:root {
      color-scheme: dark;
      --bg: #090909;
      --fg: #f2f2ee;
      --muted: #85857f;
      --line: rgba(255,255,255,.12);
      --x: 50%;
      --y: 50%;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    body {
      overflow: hidden;
      cursor: crosshair;
    }

    /* Kursorin mukana liikkuva taskulamppu */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        radial-gradient(
          520px circle at var(--x) var(--y),
          rgba(255,255,255,.075),
          rgba(255,255,255,.025) 30%,
          transparent 70%
        );
    }

    /* Videokamera-/CRT-kerros */
    .camera-overlay {
      position: fixed;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 3px,
          rgba(255,255,255,.018) 4px
        ),
        radial-gradient(
          ellipse at center,
          transparent 54%,
          rgba(0,0,0,.42) 100%
        );
    }

    /* Filmikohina */
    .camera-overlay::after {
      content: "";
      position: absolute;
      inset: -55%;
      opacity: .13;
      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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      animation: camera-noise .28s steps(2) infinite;
    }

    @keyframes camera-noise {
      0%   { transform: translate(0, 0); }
      25%  { transform: translate(1.5%, -1%); }
      50%  { transform: translate(-1%, 1.5%); }
      75%  { transform: translate(.8%, .8%); }
      100% { transform: translate(-1.5%, -.8%); }
    }

    /* Kameran käyttöliittymä */
    .recording-ui {
      position: fixed;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      padding: 22px 26px;
      color: rgba(255,255,255,.72);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .timestamp {
      position: absolute;
      top: 22px;
      left: 26px;
    }

    .rec {
      position: absolute;
      top: 22px;
      right: 26px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #ff4949;
      font-weight: 700;
      text-shadow: 0 0 10px rgba(255,73,73,.42);
    }

    .rec-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
      animation: rec-blink 1.2s steps(2, end) infinite;
    }

    @keyframes rec-blink {
      50% {
        opacity: .18;
      }
    }

    .camera-label {
      position: absolute;
      right: 26px;
      bottom: 22px;
    }

    main {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: clamp(20px, 3vw, 40px);
      position: relative;
      z-index: 1;
    }

    .stage {
      text-align: center;
    }

    .content {
      width: min(900px, 92vw);
    }

    /* Pyörivä symboli */
    .mark {
      width: 74px;
      height: 74px;
      margin: 0 auto 30px;
      border: 1px solid var(--line);
      border-radius: 50%;
      position: relative;
      animation: rotate-mark 14s linear infinite;
    }

    .mark::before {
      content: "";
      position: absolute;
      inset: 17px;
      border: 1px solid var(--line);
      transform: rotate(45deg);
    }

    .mark::after {
      content: "";
      position: absolute;
      inset: 29px;
      border-radius: 50%;
      background: var(--fg);
      box-shadow: 0 0 12px rgba(255,255,255,.18);
    }

    @keyframes rotate-mark {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    h1 {
      margin: 0;
      font-size: clamp(54px, 12vw, 154px);
      line-height: .82;
      /* letter-spacing: -.075em; */
      letter-spacing: -0.04em;
      text-transform: uppercase;
      text-shadow: 0 0 35px rgba(255,255,255,.05);
    }

    .pro {
      color: transparent;
      font-weight: 400;
      -webkit-text-stroke: 1px var(--fg);
    }

    p {
      margin: 34px 0 0;
      color: var(--muted);
      font-size: clamp(12px, 1.7vw, 15px);
      letter-spacing: .08em;
    }

    /* Kameran kulmamerkit */
    .corner {
      position: fixed;
      width: 22px;
      height: 22px;
      border-color: var(--line);
      pointer-events: none;
      z-index: 7;
    }

    .tl {
      top: 10px;
      left: 10px;
      border-top: 1px solid;
      border-left: 1px solid;
    }

    .tr {
      top: 10px;
      right: 10px;
      border-top: 1px solid;
      border-right: 1px solid;
    }

    .bl {
      bottom: 10px;
      left: 10px;
      border-bottom: 1px solid;
      border-left: 1px solid;
    }

    .br {
      bottom: 10px;
      right: 10px;
      border-bottom: 1px solid;
      border-right: 1px solid;
    }

    @media (max-width: 600px) {
      .recording-ui {
        padding: 18px;
      }

      .timestamp {
        top: 18px;
        left: 18px;
      }

      .rec {
        top: 18px;
        right: 18px;
      }

      .camera-label {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mark,
      .camera-overlay::after,
      .rec-dot {
        animation: none;
      }
    }