@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root {
    --bg: #1a0407;
    --surface: #300b11;
    --panel: #3b0e15;
    --line: #693139;
    --cyan: #ff5b74;
    --white: #fff3f5;
    --muted: #ca9da4;
    --mono: 'IBM Plex Mono', monospace;
    --display: 'Barlow Condensed', Impact, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; color: var(--white); background: var(--bg); font-family: Inter, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
button:disabled { cursor: not-allowed; opacity: .48; }
:focus-visible { outline: 3px solid #ffa6ad; outline-offset: 4px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: white; color: black; padding: 12px; }
.skip:focus { top: 12px; }
.top { height: 78px; position: sticky; top: 0; z-index: 90; background: rgba(4,17,26,.94); backdrop-filter: blur(18px); border-bottom: 1px solid #5a242c; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,5vw,90px); gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { width: 140px; height: 52px; object-fit: contain; }
.brand span, .top nav, .top-cta { font: 700 11px var(--mono); letter-spacing: .08em; }
.brand span { color: var(--cyan); border-left: 1px solid var(--line); padding-left: 14px; white-space: nowrap; }
.top nav { display: flex; gap: clamp(14px,2vw,32px); }
.top nav a:hover, .top nav a:focus-visible { color: var(--cyan); }
.top-cta { padding: 14px 16px; border: 1px solid var(--cyan); white-space: nowrap; }
.hero { min-height: min(820px,90vh); position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; padding: 80px clamp(24px,7vw,130px); isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 75% 48%,#5a121d 0%,transparent 44%),linear-gradient(135deg,#220509,#1a0407 65%); }
.hero-lines { position: absolute; inset: 0; z-index: -1; opacity: .17; background-image: linear-gradient(#ff4b66 1px,transparent 1px),linear-gradient(90deg,#ff4b66 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right,transparent 10%,black); }
.micro { color: #ff758a; font: 700 11px var(--mono); letter-spacing: .15em; }
.live-dot, .status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #72eab9; box-shadow: 0 0 12px #72eab9; margin-right: 10px; }
.separator { color: #8c5059; margin: 0 8px; }
h1,h2,h3,p { margin-top: 0; }
.hero h1 { margin: 24px 0; font: 900 clamp(76px,9.5vw,168px)/.79 var(--display); letter-spacing: -.015em; }
h1 em, h2 em { font-style: normal; color: var(--cyan); }
.hero-copy > p { max-width: 540px; color: var(--muted); line-height: 1.85; font-size: 15px; }
.hero-actions, .outro > div { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.primary, .ghost, .secondary { min-height: 49px; padding: 14px 21px; border: 1px solid var(--cyan); font: 700 12px var(--mono); letter-spacing: .035em; display: inline-flex; justify-content: center; align-items: center; gap: 26px; transition: transform .2s, background .2s, box-shadow .2s; }
.primary { color: #1e0005; background: var(--cyan); box-shadow: 0 5px 0 #9b172b; }
.ghost,.secondary { color: #ffb6c1; background: transparent; border-color: #6e313a; }
.primary:hover,.ghost:hover,.secondary:hover { transform: translateY(-3px); box-shadow: 0 7px 18px #e42d4840; }
.hero-stats { display: flex; gap: clamp(24px,5vw,70px); margin-top: 70px; }
.hero-stats div { display: flex; flex-direction: column; gap: 7px; }
.hero-stats strong { font: 800 35px var(--display); }
.hero-stats span { font: 600 9px var(--mono); color: #d58490; }
.hero-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.orbital { position: relative; width: min(100%,540px); aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 0 40px #c52a3733); }
.orbit { position: absolute; border: 1px solid #b3343f; border-radius: 50%; animation: spin 36s linear infinite; }
.orbit-1 { inset: 3%; border-style: dashed; }
.orbit-2 { inset: 13%; border-width: 2px; box-shadow: 0 0 45px #cf1c2b55,inset 0 0 45px #cf1c2b33; animation-direction: reverse; }
.orbit-3 { inset: 24%; border-style: dotted; }
.orbit-1::before,.orbit-2::before { content: ''; position: absolute; top: 14%; left: 13%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.core { position: relative; z-index: 2; width: 38%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 1px solid #ff7682; background: radial-gradient(circle at 30% 20%,#a9232e,#38080f 70%); box-shadow: inset 0 0 40px #ff667d44,0 0 60px #cd4a5e44; }
.core span { font: 900 clamp(90px,12vw,165px)/.8 var(--display); }
.core small { font: 600 9px/1.6 var(--mono); color: #ffb1bd; }
.satellite { position: absolute; z-index: 3; display: grid; place-items: center; width: 65px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(140deg,#a43949,#350910); border: 1px solid #ffa4ac; font: 800 20px var(--mono); box-shadow: 0 0 30px #ed596f44; }
.s1 { top: 8%; left: 20%; }.s2 { top: 60%; right: 0; }.s3 { bottom: 3%; left: 22%; }
.hero-coord { position: absolute; right: 0; bottom: 0; font: 10px var(--mono); color: #c37d83; }
.intro-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 27px clamp(24px,6vw,105px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #2f090f; }
.intro-band span { font: 700 10px var(--mono); color: var(--cyan); white-space: nowrap; }
.intro-band p { margin: 0; font: 500 clamp(11px,1.2vw,15px) var(--mono); text-align: center; color: #ddb1b8; }
.intro-band b { color: #fff; }
.engine-wrap,.story { padding: 90px clamp(20px,5vw,90px); }
.section-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 22px; color: #ff768b; font: 700 11px var(--mono); letter-spacing: .1em; }
.status { color: #f4a3aa; }.status i { width: 6px; height: 6px; }
.engine-shell { border: 1px solid #804750; box-shadow: 12px 12px 0 #120003; background: #28070c; }
.engine-head { min-height: 90px; display: flex; align-items: center; gap: 15px; padding: 20px 26px; border-bottom: 1px solid #754149; background: #3d1017; }
.engine-mark { background: #ff5972; color: #34050c; font-size: 30px; width: 43px; height: 43px; display: grid; place-items: center; }
.engine-head strong { display: block; font: 700 13px var(--mono); letter-spacing: .07em; }
.engine-head small { display: block; color: #f27f89; font: 10px var(--mono); margin-top: 7px; }
.saved { margin-left: auto; font: 10px var(--mono); color: #d88b91; }
.sound { border: 1px solid #8d535c; padding: 13px; background: #28070c; color: #ffc6cf; font: 700 12px var(--mono); white-space: nowrap; }
.engine-grid { display: grid; grid-template-columns: minmax(175px,.75fr) minmax(350px,2fr) minmax(360px,2.2fr); }
.mode-nav { border-right: 1px solid #774048; display: flex; flex-direction: column; }
.mode { min-height: 186px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #6d3b43; padding: 27px; color: #d2aeb3; background: transparent; transition: background .2s; }
.mode.active { background: #52151e; border-left: 4px solid var(--cyan); color: #fff; padding-left: 23px; }
.mode:hover { background: #50161f; }
.mode span { display: block; color: #ff7e91; font: 700 10px var(--mono); margin-bottom: 14px; }
.mode strong { display: block; font: 900 clamp(27px,2.7vw,41px)/.85 var(--display); }
.mode small { display: block; font-size: 11px; margin-top: 18px; }
.mode-foot { margin-top: auto; padding: 25px; color: #aa676d; font: 9px/1.7 var(--mono); }
.play { padding: clamp(24px,3vw,44px); min-width: 0; }
.play-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.play h2 { font: 900 clamp(40px,4.3vw,65px)/.9 var(--display); margin: 14px 0 16px; }
.counter { border: 1px solid #8b4751; padding: 13px; background: #4c121b; white-space: nowrap; font: 700 12px var(--mono); }
.play-desc { color: #d8a4ac; line-height: 1.7; min-height: 50px; font-size: 13px; }
.number-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 30px 0; }
.number { aspect-ratio: 1.35; min-height: 46px; border: 1px solid #853a45; background: #4e151e; box-shadow: inset 0 0 0 4px #3b0c13,0 4px 0 #1e0307; color: #ffc6cf; font: 700 16px var(--mono); transition: transform .18s,background .18s; }
.number:hover { transform: translateY(-3px); background: #7a242b; }
.number[aria-pressed="true"] { background: #ff637a; color: #250308; box-shadow: inset 0 0 0 4px #d93a52,0 0 15px #ff526c66; }
.chosen { border-top: 1px solid #6b343c; border-bottom: 1px solid #6b343c; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chosen > span { font: 700 10px var(--mono); color: #ff768b; }
.slots { display: flex; gap: 6px; }
.slots b { width: 36px; height: 43px; display: grid; place-items: center; border: 1px solid #853541; font: 700 14px var(--mono); color: #ffe3e5; }
.play-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.play-actions .primary,.play-actions .secondary { font-size: 11px; }
.hint { font: 11px/1.6 var(--mono); color: #cc8e93; margin: 20px 0 0; }
.reactor { padding: clamp(20px,2.4vw,36px); min-width: 0; border-left: 1px solid #774149; background: radial-gradient(circle at 50% 35%,#4f1019,#27070c 70%); }
.reactor-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 22px; font: 700 11px/1.7 var(--mono); letter-spacing: .08em; color: #f88b9b; }
.reactor-top small { color: #ffd2d6; font-size: 10px; }
.standby { padding: 10px; border: 1px solid #9a4653; background: #4e151e; }
.reactor-stage { position: relative; aspect-ratio: 1.15; min-height: 310px; border: 1px solid #94525c; overflow: hidden; background: radial-gradient(circle,#641622 0%,#28070c 64%,#1a0306 100%); display: grid; place-items: center; }
.reactor-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(#ff6b81 1px,transparent 1px),linear-gradient(90deg,#ff6b81 1px,transparent 1px); background-size: 55px 55px; }
.stage-id,.stage-bottom { position: absolute; z-index: 3; font: 700 10px var(--mono); letter-spacing: .07em; color: #edb0b5; }
.stage-id { top: 20px; left: 20px; }.stage-bottom { bottom: 18px; right: 18px; }
.reactor-rings { position: relative; width: 82%; aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 1px solid #a83e47; box-shadow: 0 0 20px #ff486333; }
.ring-a { inset: 1%; border-width: 18px; border-color: #611621; opacity: .7; }.ring-b { inset: 11%; border-width: 2px; }.ring-c { inset: 31%; border-style: dashed; }
.beams { position: absolute; inset: 20%; border: 1px dashed #cd5c65; border-radius: 50%; }
.reactor-balls { position: relative; z-index: 2; display: flex; justify-content: space-between; width: 110%; gap: 5px; }
.reactor-balls span { width: clamp(38px,4.3vw,70px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 20%,#cb4a55,#440912 68%); border: 2px solid #ee8991; box-shadow: 0 8px 16px #130003; font: 800 clamp(14px,1.8vw,24px) var(--mono); }
.reactor-stage.activated .ring-a { animation: spin 12s linear infinite; }.reactor-stage.activated .ring-c { animation: spin 9s linear infinite reverse; }.reactor-stage.activated .reactor-balls span { box-shadow: 0 0 24px #ff505f88; }
.reactor-message { margin-top: 15px; padding: 18px; background: #4c121b; border-left: 4px solid var(--cyan); display: flex; gap: 16px; align-items: center; }
.message-icon { background: #ff5b74; color: #39030b; font-size: 27px; width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; }
.reactor-message strong { font: 900 clamp(20px,2vw,28px) var(--display); }.reactor-message p { font-size: 12px; color: #d8a7ae; margin: 7px 0 0; line-height: 1.5; }
.engine-disclaimer { font: 11px/1.7 var(--mono); color: #b9898d; margin: 22px 0 0; }
.story { background: #28070c; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; padding: 80px 0; border-bottom: 1px solid #682c35; }
.story-lead h2,.outro h2 { font: 900 clamp(58px,7vw,115px)/.88 var(--display); margin: 25px 0; }
.story-lead p { max-width: 520px; color: #d7a9b0; line-height: 1.9; }
.story-lead a { display: inline-block; font: 700 12px var(--mono); color: #ff758a; margin-top: 25px; border-bottom: 1px solid #ff758a; padding-bottom: 10px; }
.story-art,.prob-art { min-height: 390px; border: 1px solid #783137; background: radial-gradient(circle,#5e151b,#330a10 70%); padding: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.digit-row { display: flex; gap: 9px; }
.digit-row span { display: grid; place-items: center; width: clamp(40px,5vw,75px); height: clamp(60px,7vw,105px); border: 1px solid #e16b75; background: #55151f; font: 800 clamp(35px,5vw,70px) var(--display); box-shadow: 0 7px 0 #2b070c; }
.digit-row.reverse span { color: #ff758a; }
.digit-line { height: 55px; width: 2px; background: linear-gradient(#f0586f,transparent); }
.story-art small { margin-top: 30px; font: 10px var(--mono); color: #dc9298; }
.story-second .story-lead { order: 2; }.story-second .prob-art { order: 1; }
.prob-art strong { font: 900 clamp(90px,11vw,175px)/1 var(--display); }.prob-art strong span { color: var(--cyan); }.prob-art small { font: 700 12px var(--mono); color: #e99ba2; }.prob-bar { width: 75%; height: 8px; margin-top: 40px; background: #682d36; }.prob-bar span { display: block; width: 1%; height: 100%; background: #ff7984; box-shadow: 0 0 16px #ff7984; }.prob-art p { font: 11px var(--mono); color: #d99fa4; margin: 16px 0 0; }
.outro { text-align: center; padding: 130px 24px; background: radial-gradient(ellipse at center,#58121d,#1a0407 65%); }.outro h2 { margin: 20px 0; }.outro p { color: #ddb3b9; }.outro > div { justify-content: center; }
.footer { padding: 30px clamp(24px,5vw,90px); border-top: 1px solid #672e37; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font: 10px/1.7 var(--mono); color: #bc8991; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1250px) {
    .engine-grid { grid-template-columns: 180px minmax(0,1fr); }
    .reactor { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #774149; }
    .reactor-stage { max-width: 620px; margin: auto; }
    .reactor-top,.reactor-message { max-width: 620px; margin-left: auto; margin-right: auto; }
    .mode { min-height: 180px; }
}
@media (max-width: 900px) {
    .top nav,.brand span { display: none; }
    .hero { grid-template-columns: 1fr; padding-top: 80px; }
    .hero-visual { min-height: 390px; }.orbital { max-width: 370px; }.hero h1 { font-size: clamp(80px,13vw,125px); }
    .story-grid { grid-template-columns: 1fr; gap: 35px; }.story-second .story-lead { order: 1; }.story-second .prob-art { order: 2; }
    .intro-band span:last-child { display: none; }
}
@media (max-width: 640px) {
    .top { height: 67px; padding: 0 16px; }.brand img { width: 125px; }.top-cta { font-size: 9px; padding: 12px 9px; }
    .hero { padding: 60px 20px; }.hero h1 { font-size: clamp(68px,17vw,110px); }.hero-visual { min-height: 330px; }.hero-stats { margin-top: 45px; gap: 25px; }.hero-stats strong { font-size: 28px; }
    .intro-band { padding: 20px; }.intro-band span:first-child { display: none; }.intro-band p { text-align: left; line-height: 1.8; }
    .engine-wrap,.story { padding: 65px 12px; }.section-label { font-size: 9px; }.engine-head { padding: 14px; flex-wrap: wrap; }.engine-head small { font-size: 8px; }.saved { display: none; }.sound { margin-left: auto; font-size: 10px; }
    .engine-grid { display: block; }.mode-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-right: 0; border-bottom: 1px solid #774048; }.mode { min-height: 120px; padding: 14px 10px; border-right: 1px solid #6a343c; }.mode.active { padding-left: 7px; }.mode strong { font-size: 23px; }.mode span { font-size: 8px; }.mode small { font-size: 9px; margin-top: 10px; }.mode-foot { display: none; }
    .play { padding: 24px 14px; }.play h2 { font-size: 44px; }.number-grid { gap: 5px; }.number { min-height: 43px; font-size: 13px; }.chosen { flex-wrap: wrap; }.slots b { width: 35px; }.reactor { padding: 20px 12px; }.reactor-stage { min-height: 260px; }.reactor-balls span { width: clamp(38px,12vw,62px); }
    .story-grid { padding: 55px 10px; }.story-lead h2,.outro h2 { font-size: 60px; }.story-art,.prob-art { min-height: 290px; padding: 15px; }.outro { padding: 85px 20px; }.footer { padding: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}