:root { --bg: #05070a; --ink: #d8f6ff; --muted: #6a8a93; --cyan: #3ff2ff; --line: #0b2a33; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1200px 700px at 50% -10%, #0a1a22 0%, var(--bg) 60%); min-height: 100vh; }
a { color: var(--cyan); }

.hero { text-align: center; padding: 72px 16px 40px; }
.hero .mark { width: min(220px, 50vw); opacity: 0.95; }
.hero h1 { margin: 36px auto 0; }
.hero h1 img { width: min(520px, 86vw); display: block; margin: 0 auto; }
.hero .sub { margin: 18px 0 0; }
.hero .sub img { height: 22px; }
.hero .lead { max-width: 30em; margin: 28px auto 0; color: var(--ink); opacity: 0.85; }
.cta { display: inline-block; margin-top: 28px; padding: 12px 22px; border: 1px solid var(--cyan); border-radius: 999px; color: var(--cyan); font-size: 14px; letter-spacing: 0.04em; }

.shots { display: flex; gap: 16px; overflow-x: auto; padding: 24px 16px 32px; scroll-snap-type: x mandatory; justify-content: safe center; }
.shots img { height: min(520px, 70vh); aspect-ratio: 1080 / 2340; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); scroll-snap-align: center; flex: none; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; max-width: 1040px; margin: 0 auto; padding: 24px 16px 56px; }
.features h2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin: 0 0 6px; font-weight: 600; }
.features p { margin: 0; color: var(--ink); opacity: 0.8; }

footer { text-align: center; padding: 40px 16px 56px; border-top: 1px solid var(--line); color: var(--muted); }
footer .studio { width: 72px; opacity: 0.9; display: block; margin: 0 auto; }
footer .studio-name { width: 160px; opacity: 0.9; display: block; margin: 14px auto 6px; }
footer p { margin: 8px 0 0; }

.doc .prose { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
.prose .back { display: inline-block; margin-bottom: 24px; letter-spacing: 0.1em; text-decoration: none; }
.prose h1 { font-size: 26px; line-height: 1.3; }
.prose h2 { font-size: 18px; margin-top: 32px; color: var(--cyan); }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.prose code { background: #0b1a20; padding: 1px 5px; border-radius: 4px; }

.studio-link { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 13px; letter-spacing: 0.06em; z-index: 2; }
.studio-link img { width: 30px; }