:root {
  color-scheme: dark;
  --bg: #060e13;
  --bg-soft: #0a1820;
  --panel: #0d2028;
  --line: rgba(158, 255, 223, .16);
  --line-strong: rgba(158, 255, 223, .42);
  --ink: #e9fff8;
  --muted: #a1bfbd;
  --cyan: #63e8e2;
  --mint: #9effd8;
  --purple: #8d7dff;
  --orange: #ffb15d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Yu Gothic UI", "Meiryo UI", "Segoe UI", sans-serif; line-height: 1.65; }
a { color: inherit; }
.site-header { position: absolute; z-index: 5; top: 0; left: 50%; display: flex; width: min(1180px, calc(100% - 46px)); align-items: center; justify-content: space-between; padding: 18px 0; transform: translateX(-50%); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.08rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; }
.brand img, .store-card img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.34); }
.header-nav { display: flex; align-items: center; gap: 20px; }
.header-nav a, #language-toggle { color: var(--muted); background: transparent; border: 0; font: 700 .8rem inherit; letter-spacing: .06em; text-decoration: none; cursor: pointer; }
#language-toggle { padding: 6px 9px; border: 1px solid var(--line-strong); color: var(--mint); font-family: Consolas, monospace; }
.hero { position: relative; min-height: 890px; overflow: hidden; background: radial-gradient(circle at 72% 46%, rgba(58,175,183,.15), transparent 29%), radial-gradient(circle at 20% 78%, rgba(141,125,255,.12), transparent 26%), linear-gradient(135deg,#061017,#0a1d25); }
.hero::before { content:""; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(99,232,226,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,232,226,.06) 1px,transparent 1px); background-size:58px 58px; }
#conversation-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.56; }
.hero-content { position:relative; z-index:2; display:grid; width:min(1180px,calc(100% - 46px)); min-height:820px; margin:auto; grid-template-columns:.92fr 1.08fr; align-items:center; gap:24px; padding-top:66px; }
.eyebrow,.section-kicker { margin:0 0 14px; color:var(--cyan); font:700 .7rem Consolas,monospace; letter-spacing:.15em; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 17px var(--mint); }
h1 { margin:0; color:var(--mint); font-size:clamp(6.2rem,13vw,11.7rem); line-height:.88; letter-spacing:-.065em; text-shadow:0 0 55px rgba(158,255,216,.12); }
.tagline { margin:20px 0 15px; color:var(--ink); font-size:clamp(1.55rem,2.5vw,2.25rem); font-weight:800; letter-spacing:-.08em; white-space:nowrap; }
.lead { max-width:610px; margin-bottom:24px; color:#bfd9d6; font-size:1rem; overflow-wrap:anywhere; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; min-height:46px; align-items:center; padding:9px 17px; border:1px solid var(--line-strong); border-radius:4px; font-size:.87rem; font-weight:800; text-decoration:none; transition:180ms ease; }
.button-primary { color:#06201e; background:var(--mint); border-color:var(--mint); }
.button-free { color:#ffd49d; border-color:rgba(255,177,93,.58); background:rgba(255,177,93,.08); }
.button:hover { transform:translateY(-2px); }
.button-quiet { background:rgba(255,255,255,.025); }
.free-note { margin-top:18px; color:var(--muted); font-size:.82rem; }
.free-note span:first-child { margin-right:8px; padding:3px 6px; color:var(--orange); border:1px solid rgba(255,177,93,.48); font:700 .65rem Consolas,monospace; letter-spacing:.12em; }
.hero-facts { position:absolute; z-index:2; bottom:28px; left:50%; display:flex; width:min(1180px,calc(100% - 46px)); gap:36px; margin:0; padding:0; list-style:none; transform:translateX(-50%); }
.hero-facts li { display:grid; gap:2px; }
.hero-facts strong { color:var(--cyan); font:700 .66rem Consolas,monospace; letter-spacing:.14em; }
.hero-facts span { color:var(--muted); font-size:.77rem; }
.solar-system { position:relative; width:min(690px,52vw); aspect-ratio:1; margin-left:auto; }
.star-field,.star-field::before,.star-field::after { position:absolute; inset:8%; content:""; border-radius:50%; background-image:radial-gradient(circle,#d7fff0 0 2px,rgba(158,255,216,.7) 2.5px,transparent 3.5px); background-size:112px 126px; opacity:.68; animation:twinkle 3.8s ease-in-out infinite alternate; }
.star-field::before { inset:-8%; background-size:163px 149px; transform:rotate(22deg); }
.star-field::after { inset:5%; background-size:137px 181px; transform:rotate(-19deg); animation-delay:-1.8s; }
.sun { position:absolute; z-index:4; top:50%; left:50%; display:grid; width:150px; height:150px; place-items:center; border:1px solid rgba(255,123,92,.82); border-radius:50%; background:radial-gradient(circle,#8f3328,#411b22 62%,#21131b); box-shadow:0 0 35px rgba(255,91,59,.68),0 0 120px rgba(255,73,54,.34); transform:translate(-50%,-50%); }
.sun::before,.sun::after,.corona { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.sun::before { inset:-22px; background:repeating-conic-gradient(from 9deg,rgba(255,82,37,.9) 0 3deg,rgba(255,175,76,.56) 3deg 7deg,rgba(255,60,30,.16) 7deg 12deg); filter:blur(4px) drop-shadow(0 0 8px rgba(255,68,32,.9)); mask:radial-gradient(circle,transparent 0 62%,#000 69% 100%); animation:corona-spin 28s linear infinite,corona-flicker 2.3s steps(6,end) infinite; }
.sun::after { inset:-34px; background:repeating-conic-gradient(from 31deg,rgba(255,65,27,.72) 0 2deg,transparent 2deg 7deg,rgba(255,154,57,.38) 7deg 10deg,transparent 10deg 16deg); filter:blur(6px); mask:radial-gradient(circle,transparent 0 69%,#000 76% 100%); animation:corona-spin-reverse 42s linear infinite,corona-flicker-soft 3.1s steps(7,end) infinite; }
.corona { inset:-12px; background:repeating-conic-gradient(from 18deg,rgba(255,210,111,.88) 0 2deg,rgba(255,92,43,.58) 2deg 6deg,transparent 6deg 9deg); filter:blur(2px); mask:radial-gradient(circle,transparent 0 70%,#000 77% 100%); animation:corona-spin 21s linear infinite,corona-flicker-fast 1.7s steps(5,end) infinite; }
.sun img { width:82px; height:82px; border-radius:20px; }
.sun b { position:absolute; bottom:-50px; color:var(--mint); font:800 1rem Consolas,monospace; letter-spacing:.1em; }
.orbit { position:absolute; top:50%; left:50%; border:1px solid rgba(99,232,226,.25); border-radius:50%; transform:translate(-50%,-50%); animation:spin 16s linear infinite; }
.orbit::after { content:""; position:absolute; inset:11%; border:1px dashed rgba(141,125,255,.13); border-radius:50%; }
.orbit-1 { width:45%; height:45%; animation-duration:10s; }
.orbit-2 { width:65%; height:65%; animation-duration:16s; animation-direction:reverse; }
.orbit-3 { width:84%; height:84%; animation-duration:23s; }
.orbit-4 { width:100%; height:100%; animation-duration:31s; animation-direction:reverse; }
.planet { position:absolute; top:-25px; left:50%; display:grid; min-width:78px; min-height:50px; place-items:center; padding:8px 13px; border:1px solid var(--line-strong); border-radius:26px; color:var(--mint); background:#102c34; box-shadow:0 0 26px rgba(99,232,226,.28); font:700 .86rem Consolas,monospace; transform:translateX(-50%); }
.planet-codex { color:#d4ccff; background:#242454; }
.planet-md { color:#ffd094; background:#3e2b21; }
.planet-search { color:#b8ffd3; background:#193a31; }
.comet { position:absolute; top:12%; left:12%; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:-8px 5px 8px var(--cyan),-28px 16px 19px rgba(99,232,226,.75),-61px 34px 28px rgba(99,232,226,.3); animation:comet 8s ease-in-out infinite; }
.section-shell { width:min(1180px,calc(100% - 46px)); margin:auto; }
.compact { padding:62px 0 48px; }
.compact-heading { display:grid; grid-template-columns:1fr; gap:8px; align-items:end; }
.compact-heading .section-kicker { grid-column:1/-1; }
h2 { margin:0; font-size:clamp(2rem,4vw,3.8rem); line-height:1.08; letter-spacing:-.08em; }
.compact-heading p:last-child { margin:0; color:var(--muted); font-size:.92rem; }
code { padding:2px 4px; color:var(--mint); background:rgba(158,255,216,.07); font: .86em Consolas,monospace; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.feature-grid article { position:relative; min-height:140px; padding:17px 18px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(18,48,57,.82),rgba(9,25,32,.88)); }
.feature-grid b { color:rgba(158,255,216,.42); font:700 .66rem Consolas,monospace; letter-spacing:.12em; }
h3 { margin:13px 0 5px; font-size:1rem; }
.feature-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.bottom-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px; }
.screen-row { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.screen-row a { display:grid; min-height:220px; place-items:center; overflow:hidden; border:1px solid var(--line); background:#071116; }
.screen-row img { display:block; width:100%; height:220px; object-fit:contain; object-position:center; opacity:.92; transition:180ms ease; }
.screen-row img:hover { opacity:1; transform:scale(1.035); }
.store-card { position:relative; display:grid; grid-template-columns:62px 1fr; gap:0 14px; align-content:center; padding:18px; border:1px solid var(--line-strong); background:linear-gradient(135deg,#133139,#111e2b); }
.edition-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(760px,100%); margin-left:auto; }
.store-card { min-height:108px; }
.store-card strong,.store-card span { display:block; }
.store-card span { color:var(--muted); font-size:.72rem; }
.store-card a { grid-column:2; margin-top:7px; color:var(--mint); font:700 .74rem Consolas,monospace; letter-spacing:.1em; }
.store-card small { position:absolute; right:12px; bottom:10px; color:var(--orange); font:700 .6rem Consolas,monospace; letter-spacing:.08em; }
.free-card { border-color:rgba(255,177,93,.54); background:linear-gradient(135deg,#32271d,#132a2e); }
.release-history { padding:8px 0 58px; }
.history-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
.history-list article { display:grid; grid-template-columns:auto 1fr; gap:4px 18px; padding:17px 18px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(18,48,57,.82),rgba(9,25,32,.88)); }
.history-list time { grid-row:span 2; color:var(--cyan); font:700 .72rem Consolas,monospace; letter-spacing:.06em; }
.history-list strong { color:var(--mint); font-size:.9rem; }
.history-list p { margin:0; color:var(--muted); font-size:.82rem; }
footer { display:flex; justify-content:space-between; gap:18px; padding:15px max(23px,calc((100% - 1180px)/2)); border-top:1px solid var(--line); color:var(--muted); background:#040a0e; font:700 .68rem Consolas,monospace; letter-spacing:.08em; }
footer a { margin-left:auto; color:var(--cyan); text-decoration:none; }
.legal-header { border-bottom:1px solid var(--line); background:linear-gradient(135deg,#07151d,#0b2028); }
.legal-header-inner { display:flex; width:min(980px,calc(100% - 46px)); align-items:center; justify-content:space-between; margin:auto; padding:18px 0; }
.legal-header nav { display:flex; gap:16px; }
.legal-header nav a { color:var(--cyan); font-size:.8rem; font-weight:700; text-decoration:none; }
.legal-main { width:min(980px,calc(100% - 46px)); margin:auto; padding:56px 0 74px; }
.legal-title { padding-bottom:32px; border-bottom:1px solid var(--line); }
.legal-title h1 { color:var(--ink); font-size:clamp(2.7rem,7vw,5.8rem); letter-spacing:-.08em; }
.legal-title p { max-width:760px; margin:16px 0 0; color:var(--muted); }
.legal-note { margin:28px 0; padding:14px 16px; border:1px solid rgba(255,177,93,.45); color:#ffd49d; background:rgba(255,177,93,.06); font-size:.88rem; }
.policy { padding:22px 0 38px; border-bottom:1px solid var(--line); }
.policy:last-child { border-bottom:0; }
.policy h2 { margin:24px 0 6px; color:var(--mint); font-size:1.28rem; letter-spacing:-.03em; }
.policy h3 { margin:28px 0 7px; color:var(--cyan); font-size:1rem; }
.policy p,.policy li { color:#bed6d3; font-size:.92rem; }
.policy ul { padding-left:1.35em; }
.policy .updated { color:var(--muted); font:700 .72rem Consolas,monospace; letter-spacing:.08em; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes comet { 0%,100% { transform:translate(0,0); opacity:.3; } 48% { opacity:1; } 70% { transform:translate(360px,190px); opacity:0; } }
@keyframes twinkle { from { opacity:.42; filter:brightness(.85); } to { opacity:.88; filter:brightness(1.35); } }
@keyframes corona-spin { to { rotate:360deg; } }
@keyframes corona-spin-reverse { to { rotate:-360deg; } }
@keyframes corona-flicker { 0%,100% { opacity:.66; } 24% { opacity:.96; } 43% { opacity:.72; } 71% { opacity:1; } 86% { opacity:.78; } }
@keyframes corona-flicker-soft { 0%,100% { opacity:.36; } 31% { opacity:.68; } 58% { opacity:.46; } 82% { opacity:.76; } }
@keyframes corona-flicker-fast { 0%,100% { opacity:.58; } 19% { opacity:1; } 47% { opacity:.68; } 63% { opacity:.92; } 84% { opacity:.64; } }
@media (max-width:900px) {
  .hero { min-height:820px; }
  .hero-content { display:block; min-height:auto; padding-top:118px; }
  h1 { font-size:clamp(6rem,25vw,9rem); }
  .tagline { margin-top:15px; }
  .solar-system { position:absolute; top:355px; right:-170px; width:570px; opacity:.5; }
  .hero-facts { bottom:22px; }
  .compact-heading { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article { min-height:auto; }
  .bottom-grid { grid-template-columns:1fr; }
  .edition-cards { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .site-header,.hero-content,.hero-facts,.section-shell { width:min(100% - 28px,1180px); }
  .header-nav a { display:none; }
  .hero { min-height:760px; }
  h1 { font-size:6.6rem; }
  .tagline { font-size:1.75rem; }
  .lead { font-size:.88rem; }
  .solar-system { top:368px; right:-175px; width:505px; }
  .hero-facts { gap:17px; }
  .hero-facts span { font-size:.68rem; }
  .compact { padding-top:47px; }
  h2 { font-size:2.55rem; }
  .screen-row a { min-height:112px; }
  .screen-row img { height:112px; }
  .bottom-grid { margin-top:20px; }
  .history-list { grid-template-columns:1fr; }
  .legal-header-inner,.legal-main { width:min(100% - 28px,980px); }
  .legal-main { padding-top:40px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .orbit,.sun::after,.comet { animation:none; }
}
