@font-face {
    font-family: "Redaction 50";
    src: url("assets/fonts/Redaction_35-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #050505;
  }

  body {
    --glare-x: 34%;
    --glare-y: 18%;
    --browser-bar-top: #050505;
    --browser-bar-bottom: #050505;
    background-color: #050505;
    background-image: none;
    font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
    color: #dca67c;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
  }

  .monitor-shell {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #050505;
  }

  .screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #050505;
  }
  .safari-theme-sampler {
    pointer-events: none;
    position: fixed;
    left: 50%;
    z-index: 9999;
    width: 89%;
    height: 11px;
    transform: translateX(-50%);
    mask-image: linear-gradient(to right, transparent, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, transparent);
  }
  .safari-theme-sampler--top {
    top: 4px;
    background: var(--browser-bar-top);
  }
  .safari-theme-sampler--bottom {
    bottom: 3px;
    background: var(--browser-bar-bottom);
  }
  .screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
      radial-gradient(circle at var(--glare-x) var(--glare-y),
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.08) 16%,
        transparent 36%),
      linear-gradient(118deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.08) 47%,
        rgba(255, 255, 255, 0.025) 54%,
        transparent 68%);
    mix-blend-mode: screen;
    opacity: 0.5;
    transition: opacity 0.35s ease;
  }
  .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 50%,
        rgba(255, 255, 255, 0.018) 0%,
        rgba(255, 255, 255, 0.012) 45%,
        transparent 72%),
      linear-gradient(102deg,
        transparent 0%,
        transparent 55%,
        rgba(255, 255, 255, 0.035) 61%,
        rgba(255, 255, 255, 0.012) 66%,
        transparent 76%);
    opacity: 0.58;
    mix-blend-mode: screen;
    transition: opacity 0.35s ease;
  }
  /* WebGL canvas — holds the CRT image (text + scanlines + barrel curve).
     Sits below the bezel cast-shadows so they correctly darken its edges. */
  .crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .crt-canvas {
    display: block;
    z-index: 2;
    background: transparent;
  }

  /* DOM fallback — shown only when WebGL is unavailable.
     The JS removes the `fallback-active` class once the canvas is rendering. */
  .msg {
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(1.6rem, 5vw, 6rem);
    font-weight: 700;
    line-height: 1.2;
    padding: 0 1rem;
    display: none;
  }
  .fallback-active .msg { display: flex; }
  @media (max-width: 640px) {
    .msg {
      font-size: clamp(2rem, 7.5vw, 4.5rem);
    }
  }

  .off-title {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease 0.08s;
  }
  .powered-off .off-title {
    opacity: 1;
  }
  .crt-powering-on .off-title,
  .startup-screen .off-title {
    opacity: 0;
    transition-delay: 0s;
  }

  .ok-ident {
    --figure-size: clamp(30px, 4.6vw, 56px);
    --star-rise: clamp(40px, 6.1vw, 74px);
    --now-height: clamp(94px, 14.35vw, 175px);
    --vertical-gap: clamp(6px, 1.1vw, 12px);
    --star-fall: clamp(24px, 3.2vw, 38px);
    position: relative;
    width: min(900px, calc(100vw - 48px));
    height: min(520px, calc(100vh - 160px));
    min-height: 260px;
  }

  .ok-ident img {
    position: absolute;
    display: block;
    filter: invert(52.55%);
    user-select: none;
    will-change: transform, opacity;
  }

  .ok-ident__vertical-mark {
    position: absolute;
    top: 36%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vertical-gap);
    width: var(--figure-size);
    padding-top: var(--star-rise);
    transform: translate(-50%, -50%);
  }

  .ok-ident__star-ok {
    position: relative;
    width: var(--figure-size);
    aspect-ratio: 180 / 282;
  }

  .ok-ident__figure {
    position: absolute;
    inset: 0;
  }

  .ok-ident__ok {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
  }

  .ok-ident__star-band {
    top: -84.397%;
    left: 5.556%;
    width: 92.222%;
    height: auto;
    opacity: 0;
    transform-origin: 50% 100%;
  }

  .ok-ident__star-band--1 { --star-drift: -8px; clip-path: inset(0 0 94% 0); }
  .ok-ident__star-band--2 { --star-drift: 6px; clip-path: inset(5.5% 0 81.5% 0); }
  .ok-ident__star-band--3 { --star-drift: -5px; clip-path: inset(18% 0 68% 0); }
  .ok-ident__star-band--4 { --star-drift: 7px; clip-path: inset(31% 0 54% 0); }
  .ok-ident__star-band--5 { --star-drift: -4px; clip-path: inset(44% 0 40% 0); }
  .ok-ident__star-band--6 { --star-drift: 3px; clip-path: inset(58% 0 27% 0); }
  .ok-ident__star-band--eyes { --star-drift: 0px; clip-path: inset(90% 0 0 0); }

  .ok-ident__now-slot {
    position: relative;
    width: var(--figure-size);
    height: var(--now-height);
  }

  .ok-ident__now {
    top: 50%;
    left: 50%;
    width: auto;
    height: var(--figure-size);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: 50% 50%;
  }

  .ok-ident__tagline {
    position: absolute;
    top: calc(50% + min(32vh, 260px));
    left: 50%;
    margin: 0;
    color: #868686;
    font-family: "Redaction 50", Georgia, serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
  }

  .powered-off .ok-ident__ok {
    animation: ok-ident-ok-arrives 6s ease both;
  }

  .powered-off .ok-ident__star-band {
    animation: ok-ident-star-stream 2.4s cubic-bezier(0.2, 0.75, 0.18, 1) both;
  }

  .powered-off .ok-ident__star-band--1 { animation-delay: 0.9s; }
  .powered-off .ok-ident__star-band--2 { animation-delay: 1.05s; }
  .powered-off .ok-ident__star-band--3 { animation-delay: 1.22s; }
  .powered-off .ok-ident__star-band--4 { animation-delay: 1.4s; }
  .powered-off .ok-ident__star-band--5 { animation-delay: 1.58s; }
  .powered-off .ok-ident__star-band--6 { animation-delay: 1.77s; }
  .powered-off .ok-ident__star-band--eyes { animation-delay: 1.98s; }

  .powered-off .ok-ident__now {
    animation: ok-ident-now-arrives 6s ease both;
  }

  .powered-off .ok-ident__tagline {
    animation: ok-ident-tagline-arrives 6s ease both;
  }

  @keyframes ok-ident-ok-arrives {
    0% { opacity: 0; }
    18%, 100% { opacity: 1; }
  }

  @keyframes ok-ident-star-stream {
    0% {
      opacity: 0;
      transform: translate(var(--star-drift), calc(-1 * var(--star-fall))) scale(0.58);
    }
    22% { opacity: 0.58; }
    100% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }

  @keyframes ok-ident-now-arrives {
    0%, 72% { opacity: 0; }
    85%, 100% { opacity: 1; }
  }

  @keyframes ok-ident-tagline-arrives {
    0%, 88% { opacity: 0; }
    100% { opacity: 1; }
  }

  .desktop-only { display: inline; }
  .mobile-only  { display: none; }

  @media (max-width: 640px) {
    .desktop-only { display: none; }
    .mobile-only  { display: inline; }
  }

  .dynamic-island {
    position: absolute;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 20;
    transform: translateX(-50%);
  }
  .startup-screen .dynamic-island,
  .island-pending .dynamic-island {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.42);
  }
  .startup-complete .dynamic-island {
    animation: island-arrive 540ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
  }
  .power-btn {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 7px;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #fff;
    opacity: 0.85;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      opacity 120ms ease,
      transform 120ms ease;
  }
  .power-btn-icon {
    display: block;
    width: 30px;
    height: 23px;
  }
  .power-glyph {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .power-btn:hover .power-glyph { transform: scale(1.08); }
  @media (max-width: 640px) {
    .dynamic-island {
      bottom: max(12px, env(safe-area-inset-bottom));
    }
    .power-btn {
      width: 44px;
      height: 44px;
      padding: 8px;
    }
    .power-btn-icon {
      width: 28px;
      height: 21px;
    }
  }
  .power-btn:hover {
    opacity: 1;
    background: transparent;
  }
  .power-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 4px;
  }
  .power-btn:active,
  .power-btn.is-pressed {
    transform: scale(0.97);
  }
  .startup-screen .power-btn {
    cursor: wait;
    pointer-events: none;
  }

  /* Powered-off state — fades the screen image out and turns the
     screen background to black, like a real CRT going dark. */
  .crt-canvas,
  .msg {
    transition: opacity 0.35s ease;
  }
  .screen {
    transition: none;
  }
  .powered-off .screen::before {
    opacity: 0;
  }
  .powered-off .screen::after {
    opacity: 0;
  }
  .powered-off .crt-canvas,
  .powered-off .msg {
    opacity: 0;
  }
  .crt-shutting-down .crt-canvas,
  .crt-shutting-down .msg {
    animation: crt-collapse 260ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
  }
  .crt-powering-on .crt-canvas,
  .crt-powering-on .msg {
    animation: crt-warmup 520ms steps(1, end) both;
  }
  @keyframes crt-collapse {
    0% {
      opacity: 1;
      filter: brightness(1);
    }
    24% {
      opacity: 0.72;
      filter: brightness(1.35);
    }
    42% {
      opacity: 0.26;
      filter: brightness(0.62);
    }
    56% {
      opacity: 0.72;
      filter: brightness(1.15);
    }
    78% {
      opacity: 0.12;
      filter: brightness(0.32);
    }
    100% {
      opacity: 0;
      filter: brightness(0);
    }
  }
  @keyframes crt-warmup {
    0% {
      opacity: 0;
      filter: brightness(0.2);
    }
    12% {
      opacity: 1;
      filter: brightness(1.75);
    }
    20% {
      opacity: 0.2;
      filter: brightness(0.55);
    }
    34% {
      opacity: 0.85;
      filter: brightness(1.25);
    }
    48% {
      opacity: 0.38;
      filter: brightness(0.7);
    }
    64% {
      opacity: 1;
      filter: brightness(1.12);
    }
    100% {
      opacity: 1;
      filter: brightness(1);
    }
  }
  @keyframes island-arrive {
    0% {
      opacity: 0;
      transform: translateX(-50%) scale(0.42);
    }
    58% {
      opacity: 1;
      transform: translateX(-50%) scale(1.08);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .crt-shutting-down .crt-canvas,
    .crt-shutting-down .msg,
    .crt-powering-on .crt-canvas,
    .crt-powering-on .msg {
      animation-duration: 1ms;
    }
    .startup-complete .dynamic-island {
      animation: none;
    }
    .power-glyph {
      transition: none;
    }
    .power-btn:hover .power-glyph {
      transform: none;
    }
    .powered-off .ok-ident__ok,
    .powered-off .ok-ident__star-band,
    .powered-off .ok-ident__now,
    .powered-off .ok-ident__tagline {
      animation: none;
    }
    .powered-off .ok-ident__ok,
    .powered-off .ok-ident__star-band,
    .powered-off .ok-ident__now,
    .powered-off .ok-ident__tagline {
      opacity: 1;
    }
    .powered-off .ok-ident__star-band {
      transform: none;
    }
  }