body{margin:0;background:#0B0B0C}
.d-page{font-family:"SF Pro Text",-apple-system,BlinkMacSystemFont,Inter,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";font-synthesis:none}
::selection{background:rgba(111,227,210,.28);color:#FFFFFF}

/* Interaction states: one timing everywhere, color/background for hover, a 0.96 press. */
.d-link{position:relative;color:#8B8B94;text-decoration:none;transition:color 150ms ease-out}
.d-btn,.d-btn-sm{position:relative;transition:transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out}
.d-seg{position:relative;transition:background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out}
.d-faq summary::-webkit-details-marker{display:none}.d-faq[open] summary span{transform:rotate(45deg)}.d-faq summary span{transition:transform 150ms ease-out, color 150ms ease-out;display:inline-block}
.c-seg{position:relative;transition:background-color 150ms ease-out, transform 150ms ease-out}
.d-btn:active,.d-btn-sm:active,.d-seg:active,.c-seg:active{transform:scale(.96)}
/* Hover only where there is a real pointer, so a tapped button doesn't stay lit on a phone. */
@media (hover:hover) and (pointer:fine){
  .d-link:hover{color:#EDEDEF}
  .d-btn:hover,.d-btn-sm:hover{background-color:#FFFFFF !important;transform:translateY(-1px);box-shadow:0 10px 30px -12px rgba(111,227,210,.55)}
  .d-seg:hover{color:#EDEDEF !important}
  .d-keys:hover>span{background:linear-gradient(180deg,#28282E,#1B1B20) !important}
  .d-faq summary:hover span{color:#EDEDEF !important}
  .c-seg:hover{background-color:#232327 !important}
}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid rgba(237,237,239,.85);outline-offset:3px}

button.d-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* Privacy dialog (footer). Native <dialog>: Esc and the Close button dismiss it. */
.d-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 32px));padding:28px;border:1px solid #26262B;border-radius:16px;background:#141416;color:#B4B4BC;font-size:15px;line-height:1.6}
.d-dialog h2{color:#EDEDEF}
.d-dialog::backdrop{background:rgba(0,0,0,.6)}

/* Small-screen notice: a full-screen sheet shown on phones until dismissed (main.js). */
.d-notice{box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:32px 24px;border:0;background:#0B0B0C;color:#EDEDEF;text-align:center}
.d-notice[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
html:has(.d-notice[open]){overflow:hidden}

/* Hit areas: invisible extensions to ~40-44px without overlapping neighbours. */
.d-logo,.d-link,.d-btn-sm,.d-seg,.c-seg{position:relative}
.d-logo::before,.d-link::before,.d-btn-sm::before,.d-seg::before,.c-seg::before{content:"";position:absolute}
.d-link::before{inset:-12px -8px}      /* ~17px text -> 41px; nav/footer gaps are 24-28px */
.d-btn-sm::before{inset:-5px 0}        /* 34 -> 44 */
.d-seg::before{inset:-8px -2px}        /* 28 -> 44; 4px gap between segments */
.c-seg::before{inset:-6px}             /* 32 -> 44; 12px gap between play and restart */
.d-logo::before{inset:-9px -8px}       /* 26 -> 44; header has 22px padding */
@media (pointer:coarse){.d-link::before{inset:-14px -8px}}   /* 44 on touch screens */

/* The hero demo is an illustration: no stray selection, drag ghosts or clicks. */
.demo-screen{pointer-events:none;-webkit-user-select:none;user-select:none}
@media (max-width:700px){.c-hide-sm{display:none !important}}

/* Desktop: every column and card shares one edge at 90% of the screen, capped at 1800px.
   Smaller screens keep the fallbacks written into index.html. */
@media (min-width:1024px){
  :root{
    --w-page:min(90vw,1800px);
    --w-text:var(--w-page);--w-head:var(--w-page);--w-card:var(--w-page);
    --ctrl-pad:0px;

    /* Hero fits the screen: on short screens the spacing and headline tighten, and the demo is
       only as wide as lets its top 37% (menu bar, menus, overlays, the note being typed) sit
       above the fold. Otherwise it is the card width less the design's 24px side gaps.
       --hero-fixed is the measured height of everything in the stack that doesn't scale
       (header, eyebrow, subtitle, buttons). */
    --hero-pt:clamp(40px,7vh,104px);
    --hero-gap:clamp(28px,4vh,64px);
    --h1:clamp(44px,min(6.4vw,7.5vh),84px);
    --hero-fixed:302px;
    --hero-stack:calc(var(--hero-fixed) + var(--hero-pt) + 2.04 * var(--h1) + var(--hero-gap));
    --demo-w:min(var(--w-page) - 48px, max(720px, (100vh - var(--hero-stack)) / 0.37));
    --w-demo:var(--demo-w);
    --w-ctrl:var(--demo-w); /* play/restart line up with the laptop's right edge */
  }
}

/* Section headings keep growing with the wider layout: 44px at 1440, up to 56px. */
@media (min-width:1440px){:root{--h2:clamp(44px,3vw,56px)}}

.d-page h1,.d-page h2{text-wrap:balance}
.d-page p{text-wrap:pretty}

@media (prefers-reduced-motion:reduce){
  .d-btn:hover,.d-btn-sm:hover{transform:none}
  .d-link,.d-btn,.d-btn-sm,.d-seg,.c-seg,.d-faq summary span{transition:none}
}

/* Glowing orbs in the Safari game scene; main.js sets transform and opacity. */
.orb{position:absolute;left:0;top:0;width:1.6667cqw;height:1.6667cqw;margin:-0.8333cqw 0 0 -0.8333cqw;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0%,#B9AEFF 35%,rgba(123,97,255,0) 70%)}