:root { --ink:#07101f; --deep:#0b1728; --panel:#101c30; --line:#263d59; --text:#e4edff; --muted:#91a5c3; --blue:#64baff; --purple:#b194ff; --violet:#7163c3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#091322; color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content:""; position:fixed; z-index:-2; inset:0; background:radial-gradient(ellipse 55% 38% at 50% 23%, rgba(34,100,173,.18), transparent 74%), radial-gradient(ellipse 35% 28% at 89% 71%, rgba(105,70,167,.12), transparent 78%), var(--ink); }
.godot-grid { position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:.72; background-image:linear-gradient(to right, #304862 1px, transparent 1px), linear-gradient(to bottom, #304862 1px, transparent 1px), linear-gradient(to right, #1a2c43 1px, transparent 1px), linear-gradient(to bottom, #1a2c43 1px, transparent 1px); background-size:400px 400px, 400px 400px, 40px 40px, 40px 40px; animation:godot-grid-drift 90s linear infinite; }
@keyframes godot-grid-drift { 0%,100% { background-position:120px 0,120px 0,120px 0,120px 0; } 25% { background-position:0 120px,0 120px,0 120px,0 120px; } 50% { background-position:-120px 0,-120px 0,-120px 0,-120px 0; } 75% { background-position:0 -120px,0 -120px,0 -120px,0 -120px; } }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px, calc(100% - 48px)); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:750; letter-spacing:.035em; }
.brand-logo { display:block; width:285px; max-width:52vw; height:auto; filter:drop-shadow(0 7px 16px rgba(75,143,255,.32)); }
nav { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:.91rem; }
nav a { transition:color .2s ease; }
nav a:hover, nav a:focus-visible, nav a[aria-current="page"] { color:var(--blue); }
main { text-align:center; }
.hero { min-height:510px; display:grid; place-items:center; padding:72px 0 58px; }
.hero-inner { max-width:835px; }
.eyebrow { display:flex; width:fit-content; margin-right:auto; align-items:center; justify-content:flex-start; gap:8px; border:1px solid rgba(177,148,255,.44); border-radius:99px; padding:7px 12px; color:var(--purple); background:rgba(49,38,77,.42); font-size:.73rem; font-weight:750; letter-spacing:.12em; }
.eyebrow::before { content:""; order:-1; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--purple); box-shadow:0 0 14px var(--purple); }
h1 { max-width:800px; margin:24px auto 18px; font-size:clamp(2.65rem, 6.3vw, 5.45rem); line-height:.98; letter-spacing:-.06em; }
h1 .accent { color:var(--blue); text-shadow:0 0 38px rgba(100,186,255,.18); }
.intro { max-width:655px; margin:0 auto; font-size:clamp(1.05rem, 2vw, 1.22rem); line-height:1.7; color:var(--muted); }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:0 18px; border:1px solid #365b89; border-radius:9px; background:#142841; color:var(--text); font-size:.91rem; font-weight:700; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform:translateY(-2px); border-color:var(--blue); background:#203958; }
.button.primary { border-color:var(--blue); background:linear-gradient(135deg, #26466c, #273c66); box-shadow:0 12px 30px rgba(39,103,174,.2); }
.button.primary::after { content:"↗"; margin-left:9px; color:var(--blue); font-size:1rem; }
.experiment { display:flex; align-items:flex-start; gap:12px; max-width:650px; margin:22px auto 0; padding:13px 16px; border:1px solid rgba(177,148,255,.25); border-radius:12px; background:rgba(16,28,48,.64); color:#b9c6dc; text-align:left; font-size:.84rem; line-height:1.5; }
.experiment strong { color:var(--purple); white-space:nowrap; }
.feature-area, .page-content { padding:43px 0 88px; }
.section-label { color:var(--purple); font-size:.74rem; font-weight:750; letter-spacing:.14em; }
h2 { margin:11px 0 10px; font-size:clamp(1.85rem, 4vw, 3rem); letter-spacing:-.04em; }
.section-copy { max-width:610px; margin:0 auto 30px; color:var(--muted); line-height:1.65; }
.features { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; text-align:left; }
.card { min-height:220px; padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg, rgba(21,38,63,.92), rgba(11,23,40,.94)); box-shadow:inset 0 1px rgba(184,227,255,.04), 0 18px 38px rgba(0,0,0,.13); }
.card:hover { border-color:#416483; }
.card-number { color:var(--blue); font-size:.78rem; font-weight:750; letter-spacing:.12em; }
.card h3 { margin:33px 0 9px; font-size:1.14rem; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.57; }
.types { margin-top:16px; padding:25px; border:1px solid var(--line); border-radius:16px; background:rgba(16,28,48,.7); text-align:left; }
.types-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.types h3 { margin:0; font-size:1rem; }
.types p { margin:5px 0 0; color:var(--muted); font-size:.9rem; }
.type-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.type-list span { border:1px solid #294c73; border-radius:99px; padding:8px 12px; background:#0d1b2e; color:#c9dcf5; font-size:.83rem; }
.page-hero { min-height:360px; padding-bottom:38px; }
.page-hero h1 { max-width:740px; }
.detail-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; text-align:left; }
.detail-card { padding:28px; border:1px solid var(--line); border-radius:16px; background:rgba(16,28,48,.78); }
.detail-card h2 { margin:0 0 12px; font-size:1.45rem; }
.detail-card p, .detail-card li { color:var(--muted); line-height:1.65; }
.detail-card p:last-child { margin-bottom:0; }
.detail-card ul { margin:0; padding-left:20px; }
.generator-section { padding:38px 0 88px; text-align:right; }
.generator-section .section-label { width:fit-content; margin:0 auto 28px; font-size:.94rem; letter-spacing:.17em; }
.generator-tree { position:relative; max-width:950px; margin:34px auto 0; padding:0 0 0 34px; text-align:left; }
.generator-tree::before { content:""; position:absolute; top:42px; bottom:42px; left:8px; width:1px; background:#304862; }
.generator-root { display:inline-flex; align-items:center; min-height:42px; margin:0 0 18px -34px; padding:0 15px; border:1px solid rgba(100,186,255,.65); border-radius:9px; background:#142841; color:var(--text); font-size:.94rem; font-weight:750; letter-spacing:.05em; }
.generator-more { margin-top:18px; margin-bottom:0; }
.generator-node { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:24px; align-items:center; margin:16px 0; padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(16,28,48,.82); }
.generator-node::before { content:""; position:absolute; top:50%; left:-26px; width:26px; height:1px; background:#304862; }
.generator-node h2 { margin:5px 0 9px; color:#d5e2f7; font-size:1.12rem; font-weight:650; letter-spacing:-.015em; }
.generator-node ul { margin:0; padding:0; color:var(--muted); font-size:.9rem; line-height:1.65; list-style-position:inside; }
.generator-general { grid-template-columns:minmax(0, 1fr) 250px; }
.generator-no-screenshot { grid-template-columns:1fr; }
.screenshot-placeholder { display:grid; min-height:142px; place-items:center; border:1px dashed #416483; border-radius:10px; background:linear-gradient(135deg, rgba(100,186,255,.08), rgba(177,148,255,.08)); color:#a9bad5; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.feature-screenshot { width:min(100%, 210px); min-width:0; margin:0; justify-self:end; overflow:hidden; border:1px solid #294c73; border-radius:10px; background:#0d1b2e; }
.feature-screenshot img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; }
.feature-screenshot figcaption { padding:8px 10px; color:#a9bad5; font-size:.73rem; font-weight:700; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.about-section { padding:38px 0 88px; }
.about-section .section-label { width:fit-content; margin:0 auto 28px; font-size:.94rem; letter-spacing:.17em; }
.about-cards { display:grid; grid-template-columns:1fr; gap:16px; text-align:left; }
.about-card { min-height:0; padding:24px; border:1px solid var(--line); border-radius:16px; background:rgba(16,28,48,.82); text-align:left; }
.about-card h2 { margin:5px 0 12px; color:#d5e2f7; font-size:1.12rem; font-weight:650; letter-spacing:-.015em; }
.about-card p, .about-card li { color:var(--muted); font-size:.9rem; line-height:1.65; }
.about-card p:last-child { margin-bottom:0; }
.about-card ul { margin:0; padding:0; list-style-position:inside; }
.coming-soon-card { display:grid; min-height:180px; place-items:center; text-align:center; }
.coming-soon-card .card-number { font-size:.94rem; }
.overview-page { padding:46px 0 88px; }
.overview-hero, .overview-gears { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(300px, .9fr); gap:48px; align-items:center; text-align:left; }
.overview-title { max-width:600px; margin:12px 0 16px; font-size:clamp(2.25rem, 4.8vw, 3.8rem); line-height:1.03; letter-spacing:-.05em; }
.overview-copy { max-width:590px; margin:0; color:var(--muted); font-size:1.03rem; line-height:1.7; }
.experimental-note { margin-top:22px; padding:14px 16px; border:1px solid rgba(177,148,255,.3); border-radius:12px; background:rgba(49,38,77,.3); color:#c8d3e8; font-size:.9rem; line-height:1.55; }
.experimental-note strong { color:var(--purple); }
.overview-shot { min-height:230px; }
.overview-image { margin:0; min-width:0; padding:8px; border:1px solid var(--line); border-radius:12px; background:#101c30; }
.overview-image img { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.overview-gears { grid-template-columns:minmax(280px, .8fr) minmax(0, 1.2fr); margin-top:60px; }
.overview-gears .screenshot-placeholder { min-height:200px; }
.overview-gears h2 { margin:0 0 12px; color:#d5e2f7; font-size:1.3rem; font-weight:650; }
.overview-type-list { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.overview-type-list li { border:1px solid #294c73; border-radius:99px; padding:8px 12px; background:#0d1b2e; color:#c9dcf5; font-size:.86rem; }
.overview-bottom { display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr); gap:48px; align-items:center; margin-top:60px; }
.overview-bottom .experimental-note { margin:0; }
.overview-bottom .screenshot-placeholder { min-height:180px; }
.showcase-gallery { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; padding:42px 0 88px; }
.showcase-photo { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#101c30; box-shadow:0 18px 38px rgba(0,0,0,.13); }
.showcase-photo img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.screenshots-gallery .showcase-photo { margin:0; min-width:0; padding:8px; overflow:visible; align-self:start; }
.screenshots-gallery .showcase-photo img { width:100%; max-width:100%; aspect-ratio:auto; height:auto; object-fit:contain; }
.showcase-featured { grid-column:1 / -1; width:min(900px, 100%); justify-self:center; }
.showcase-featured img { aspect-ratio:auto; max-height:520px; object-fit:contain; }
.showcase-more { display:grid; grid-column:1 / -1; min-height:110px; place-items:center; border:1px solid rgba(100,186,255,.65); border-radius:12px; background:#142841; color:var(--text); font-size:.94rem; font-weight:750; letter-spacing:.08em; text-align:center; }
footer { border-top:1px solid rgba(38,61,89,.72); padding:24px 0 34px; color:#7e93b2; font-size:.79rem; }
footer .shell { display:flex; justify-content:space-between; gap:20px; }
@media (prefers-reduced-motion:reduce) { .godot-grid { animation:none; background-position:0 0,0 0,0 0,0 0; } }
@media (max-width:720px) { .shell { width:min(100% - 32px, 1180px); } header { padding-top:18px; } nav { gap:15px; font-size:.82rem; } .hero { min-height:0; padding:62px 0 48px; } .features, .detail-grid, .generator-node, .about-cards, .overview-hero, .overview-gears, .overview-bottom, .showcase-gallery { grid-template-columns:1fr; } .card { min-height:0; } .card h3 { margin-top:24px; } .types-head, footer .shell { display:block; } .types p { margin-top:7px; } footer .shell p + p { margin-top:9px; } }
@media (max-width:440px) { nav a:nth-child(2), nav a:nth-child(3), nav a:nth-child(4), nav a:nth-child(5) { display:none; } .brand-logo { width:185px; max-width:58vw; } h1 { letter-spacing:-.055em; } .experiment { display:block; } .experiment strong { display:block; margin-bottom:5px; } }