@font-face{font-family:Golos;src:url("./assets/Golos.ttf") format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:Unbounded;src:url("./assets/Unbounded.ttf") format("truetype");font-weight:200 900;font-display:swap}
:root{color-scheme:dark;--ink:#0b0910;--fg:#f8f7fb;--muted:#c8c4d0;--accent:#bd95ff;--rule:rgba(205,189,231,.17);--gutter:clamp(28px,5.55vw,112px);--display:Unbounded,"Arial Black",sans-serif;--mono:"Consolas","Lucida Console",monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);font-family:Golos,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{touch-action:manipulation}
button{background:none;color:inherit;border:0;padding:0;font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #d7baff;outline-offset:5px}
button:disabled{cursor:default}
::selection{color:#100d18;background:#d1a7ff}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:square;stroke-width:1.8}
.wrap{width:min(100%,2000px);margin-inline:auto;padding-inline:var(--gutter)}
.mast{position:relative;z-index:2;background:#0b0910;border-bottom:1px solid var(--rule)}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:clamp(68px,8.8svh,92px)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.brand img{width:43px;height:auto}
.wordmark{font-family:var(--display);font-size:28px;font-weight:850;letter-spacing:-.09em;transform:skewX(-7deg);line-height:1}
.brand-sub{margin-left:5px;border-left:1px solid #4a404f;padding-left:11px;font:10px/1.08 var(--mono);letter-spacing:.08em;color:#c8c0d6}
.desktop-nav{display:flex;gap:clamp(24px,3.1vw,54px);align-items:center}
.desktop-nav a{display:inline-flex;align-items:center;position:relative;min-height:44px;color:#d4d0da;font-size:14px;text-decoration:none}
.desktop-nav a::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)}
.head-actions{display:flex;align-items:center;gap:14px}
.sound,.menu-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #46404f;border-radius:4px;height:39px}
.sound{gap:12px;padding:0 16px;font:11px/1 var(--mono);text-transform:uppercase;letter-spacing:.065em;transition:border-color .2s}
.sound:hover,.menu-btn:hover{border-color:var(--accent)}
.wave{display:flex;align-items:center;gap:2px;height:18px;color:#ceafff}
.wave i{width:2px;height:5px;background:currentColor}.wave i:nth-child(2){height:12px}.wave i:nth-child(3){height:16px}.wave i:nth-child(4){height:9px}
.sound[aria-pressed=true] .wave i{animation:meter .7s ease-in-out infinite alternate}.wave i:nth-child(2n){animation-delay:-.4s!important}.wave i:nth-child(3n){animation-delay:-.23s!important}
.menu-btn{display:none;width:40px}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#100a1c}
.scene,.shade,.radiance{position:absolute;inset:0;pointer-events:none}
.scene{inset:-7px;z-index:-3;container-type:size;overflow:hidden;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .65s cubic-bezier(.22,.61,.36,1)}
/* Keep the light paths in photo coordinates, including when the cover crop changes. */
.shot{--anchor-x:55%;--anchor-y:39%;position:absolute;left:var(--anchor-x);top:var(--anchor-y);translate:calc(-1 * var(--anchor-x)) calc(-1 * var(--anchor-y));width:max(100cqw,calc(100cqh * 1672 / 941));aspect-ratio:1672/941;transform-origin:70% 34%;animation:camera-float 12s ease-in-out infinite alternate}
.scene picture,.scene img{display:block;width:100%;height:100%}
.scene img{object-fit:cover;object-position:55% 39%}
.scene .light-trace{position:absolute;inset:0;mix-blend-mode:screen}
.radiance{background:radial-gradient(ellipse at 88% 19%,#7442e147,transparent 32%),radial-gradient(ellipse at 39% 67%,#d01bfa3b,transparent 29%);mix-blend-mode:screen;animation:energy 4.8s ease-in-out -1s infinite alternate}
.shade{z-index:-2;background:linear-gradient(0deg,#0c0913 0%,rgba(12,9,19,.43) 9%,transparent 30%),linear-gradient(90deg,rgba(11,8,18,.95) 0%,rgba(13,8,20,.83) 20%,rgba(15,8,22,.56) 39%,rgba(15,8,22,.12) 59%,transparent 73%)}
.hero-inner{min-height:clamp(535px,calc(100svh - clamp(68px,8.8svh,92px) - 112px),970px);display:flex;align-items:center;position:relative;padding-block:clamp(56px,8vh,108px)}
.copy{position:relative;z-index:1}
.eyebrow,.panel-kicker{display:flex;align-items:center;gap:12px;text-transform:uppercase;font:600 11px/1.4 var(--mono);letter-spacing:.15em;color:#d7baff}
.signal{display:flex;gap:2px;transform:skewX(-27deg);margin-left:2px}.signal i{width:4px;height:10px;background:#bd86ff}.signal i:nth-child(2){opacity:.7}.signal i:last-child{opacity:.4}
h1{font:850 clamp(73px,7.3vw,144px)/1 var(--display);text-transform:uppercase;letter-spacing:-.054em;word-spacing:.065em;margin:28px 0 25px}
h1>span,h1>em{display:block;width:max-content}
h1>em{font-style:normal;transform:skewX(-9deg);transform-origin:left 80%;padding-right:.11em;line-height:1.1;background:linear-gradient(105deg,#dfc8ff 0%,#c693ff 46%,#ac72ff 80%,#e8baff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.period{letter-spacing:-.14em}
.intro{font-size:clamp(16px,1.2vw,21px);line-height:1.6;letter-spacing:-.012em;margin:0;max-width:clamp(370px,32vw,510px);color:#d5d0dd;text-wrap:pretty}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(21px,2.4vw,42px);margin-top:32px}
.primary{min-height:54px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:29px;border:1px solid #d8b5ff;border-radius:4px;background:linear-gradient(105deg,#d0a4ff,#b88aff);color:#170b23;font-size:15px;font-weight:700;box-shadow:0 5px 30px #a34cff2a;transition:transform .2s,box-shadow .2s,filter .2s}
.primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 7px 35px #af64ff52}
.primary .icon{width:17px;height:17px;transition:transform .2s}.primary:hover .icon{transform:translate(2px,-2px)}
.secondary{display:inline-flex;align-items:center;gap:11px;font-size:14px;font-weight:550;min-height:44px}
.round-icon{height:32px;width:32px;border:1px solid #8c7e9c;border-radius:50%;display:grid;place-items:center;transition:background .2s,border-color .2s}
.round-icon svg{width:14px;height:14px;stroke-width:1.5;fill:#f4efff}
.secondary:hover .round-icon{border-color:var(--accent);background:#a76aff42}
.subject-tag{position:absolute;display:flex;align-items:flex-start;right:var(--gutter);bottom:13%;font-family:var(--mono);text-shadow:0 2px 5px black;pointer-events:none}
.target{width:8px;height:8px;border:1px solid #f2d0ff;outline:1px solid #d2a7ff69;outline-offset:4px;transform:rotate(45deg);margin-top:-10px}
.wire{width:clamp(28px,4vw,70px);height:1px;background:#d3b4eb9c;transform:rotate(18deg);transform-origin:left;margin-top:-6px;margin-right:4px}
.subject-tag small{display:block;font-size:9px;letter-spacing:.17em;color:#ede0f5}
.subject-tag strong{display:flex;align-items:center;gap:6px;margin-top:6px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:500}
.subject-tag strong i{width:5px;height:5px;background:#cbffbd;border-radius:50%;box-shadow:0 0 8px #c1ff99}
.frame-code{position:absolute;right:var(--gutter);bottom:22px;display:flex;align-items:center;gap:8px;color:#c1b3ca;font:9px var(--mono);letter-spacing:.12em}
.frame-code b{width:21px;height:6px;background:repeating-linear-gradient(-58deg,#af8fc9 0 2px,transparent 2px 5px)}.frame-code span{color:#8c6eac}
.specs{border-top:1px solid var(--rule);background:#0c0a11}
.specs-inner{min-height:111px;display:flex;align-items:center;gap:clamp(26px,4vw,74px)}
.spec-intro{display:flex;align-items:center;gap:16px;color:#aea4bb;text-transform:uppercase;font:10px/1.6 var(--mono);letter-spacing:.15em}
.little-cross{color:var(--accent);font:24px/1 var(--mono)}
.spec-list{margin:0;display:grid;grid-template-columns:.88fr 1.22fr 1fr;flex:1}
.spec{padding:3px clamp(16px,2.5vw,44px);border-left:1px solid var(--rule)}
.spec dd{font:600 clamp(24px,2.4vw,48px)/1.12 var(--display);letter-spacing:-.08em;margin:0 0 6px}
.spec dd span{color:var(--accent)}.spec dd .tick{margin-left:2px}
.spec dt{color:#b6adbf;font-size:13px}.spec{display:flex;flex-direction:column-reverse;justify-content:center}
.barcode{display:grid;justify-items:end;gap:5px}
.barcode i{height:20px;width:65px;background:repeating-linear-gradient(90deg,#b7a6c1 0 1px,transparent 1px 3px,#b7a6c1 3px 6px,transparent 6px 8px,#b7a6c1 8px 10px,transparent 10px 15px)}
.barcode small{font:8px var(--mono);letter-spacing:.2em;color:#b7a6c1}
@keyframes meter{to{transform:scaleY(.35)}}
@keyframes energy{from{opacity:.18;transform:translate(-1%,1%)}to{opacity:.92;transform:translate(2%,-2%)}}
@keyframes camera-float{from{transform:scale(1.006)}to{transform:scale(1.048) translate(-.35%,.45%)}}
@keyframes arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){.eyebrow,h1,.intro,.hero-actions{animation:arrive .68s backwards cubic-bezier(.2,.7,.2,1)}h1{animation-delay:.07s}.intro{animation-delay:.15s}.hero-actions{animation-delay:.22s}}
dialog{width:min(530px,calc(100% - 28px));padding:clamp(22px,3vw,36px);max-height:calc(100svh - 36px);border:1px solid #645175;border-radius:10px;color:var(--fg);background:radial-gradient(ellipse at 100% 0%,#392049,transparent 48%),#141018;box-shadow:0 35px 130px #000a}
dialog::backdrop{background:#05040bba;backdrop-filter:blur(8px)}
body:has(dialog[open]){overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}
.panel-brand{display:flex;align-items:center;gap:7px;font:11px var(--mono);letter-spacing:.11em;color:#cfc3db}
.panel-brand img{width:23px}.panel-brand b{color:#916caa}
.close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--rule);border-radius:50%}.close:hover{background:#59416c}
.close .icon{width:14px;height:14px}
.panel-kicker{font-size:10px;margin:0 0 13px}
h2{font:720 clamp(26px,3.3vw,41px)/1.15 var(--display);letter-spacing:-.07em;margin:0 0 18px}h2 span{color:var(--accent)}
.panel-lead,.note p,.steps p,.game-detail p{font-size:15px;line-height:1.55;color:#cfc7d5}
.panel-lead{margin:0 0 23px}.note,.game-detail{border:1px solid var(--rule);border-radius:5px;padding:20px;background:#bc91ff09}
.note p,.steps p{margin:5px 0 0}.panel-cta{margin-top:22px}
.steps{list-style:none;padding:0;counter-reset:steps;margin:0}
.steps li{counter-increment:steps;position:relative;padding:14px 0 14px 39px;border-top:1px solid var(--rule)}
.steps li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:17px;color:var(--accent);font:12px var(--mono)}
.game-filters{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 14px}.game-filters button{padding:11px 12px;border:1px solid var(--rule);border-radius:4px;font-size:13px}
.game-filters button[aria-pressed=true]{background:#ccacff;color:#1c1028;border-color:#ccacff}
.game-detail small,.game-detail strong{font:10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cfacff}
.game-detail h3{font:650 23px/1.25 var(--display);letter-spacing:-.055em;margin:17px 0 8px}.game-detail p{margin:0 0 19px}
.menu-links{display:grid}.menu-links a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid var(--rule);color:inherit;text-decoration:none}.menu-links a:hover{color:var(--accent)}.menu-links i{font:12px var(--mono);color:var(--accent)}
@media(max-width:1000px){.specs-inner{gap:24px}.spec-intro{gap:10px}.barcode{display:none}.hero-inner{min-height:clamp(495px,calc(100svh - 176px),850px)}.specs-inner{min-height:105px}.hero-actions{gap:19px}.subject-tag{bottom:11%}}
@media(min-width:701px) and (max-aspect-ratio:6/5){.hero-inner{min-height:max(620px,calc(100svh - clamp(68px,8.8svh,92px) - 106px))}.shot{--anchor-x:48%;--anchor-y:50%}.shade{background:linear-gradient(90deg,#0b0813e6,rgba(13,8,20,.8) 25%,rgba(14,9,22,.24) 64%,transparent),linear-gradient(0deg,#0c0913,transparent 30%)}}
@media(max-width:700px){
  :root{--gutter:clamp(19px,5.5vw,36px)}.mast-inner{height:64px}.desktop-nav{display:none}.brand{gap:6px}.brand img{width:34px}.wordmark{font-size:23px}.brand-sub{font-size:8px;padding-left:7px;margin-left:3px}
  .head-actions{gap:8px}.sound,.menu-btn{height:37px}.sound{padding:0 10px;gap:8px;font-size:9px}.menu-btn{display:grid;width:37px}
  .hero-inner{min-height:clamp(610px,calc(100svh - 155px),775px);align-items:flex-end;padding-top:clamp(245px,37svh,360px);padding-bottom:30px}
  .scene{inset:-2px -2px auto;height:clamp(335px,51svh,485px)}
  .shot{--anchor-x:50%;--anchor-y:32%;width:max(100cqw,calc(100cqh * 830 / 819));aspect-ratio:830/819;transform-origin:54% 32%}
  /* The mobile photo is the rightmost 954 px of the 1672 px master. */
  .shot .light-trace{left:calc(-100% * 718 / 954);width:calc(100% * 1672 / 954)}
  .hero{background:#0d0a12}.shade{background:linear-gradient(0deg,#0d0a12 0%,#0d0a12 29%,rgba(13,10,18,.94) 40%,rgba(13,10,18,.59) 52%,rgba(13,10,18,.04) 70%,transparent 86%)}
  .copy{width:100%}.eyebrow{font-size:9px;letter-spacing:.12em;gap:9px}.signal i{height:8px;width:3px}
  h1{font-size:clamp(51px,10.4vw,76px);margin:15px 0 16px;line-height:.98}
  .intro{max-width:430px;font-size:15px;line-height:1.52}.hero-actions{margin-top:22px;gap:19px}.primary{min-height:49px;padding:0 17px;gap:20px;font-size:14px}.secondary{font-size:12px;gap:7px}.round-icon{height:26px;width:26px}
  .subject-tag{top:19%;bottom:auto;right:var(--gutter)}.subject-tag small{font-size:7px}.subject-tag strong{font-size:8px}.wire{width:24px}.target{width:5px;height:5px}.frame-code{display:none}
  .specs-inner{min-height:91px}.spec-intro{display:none}.spec-list{grid-template-columns:.78fr 1.38fr 1.04fr}.spec{padding:0 12px}.spec:first-child{padding-left:0;border-left:0}.spec:last-child{padding-right:0}.spec dd{font-size:clamp(22px,5.5vw,30px);margin-bottom:5px}.spec dt{font-size:11px}
}
@media(max-width:360px){h1{font-size:13.3vw}.hero-actions{gap:11px}.primary{padding:0 13px;gap:12px}.sound-label{display:none}.spec{padding:0 9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.scene{transform:none}.scene .light-trace{display:none}}