@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

:root { --ink:#eaf0ff; --muted:#a6b2ce; --night:#070d1b; --blue:#6e9eff; --line:rgba(174,197,255,.2); --warm:#e8af65; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#070d1b; font-family:'Shippori Mincho','Yu Mincho',serif; font-size:16px; line-height:1.8; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:radial-gradient(ellipse at 22% 10%,rgba(48,79,150,.32),transparent 32%),radial-gradient(ellipse at 80% 42%,rgba(30,63,123,.22),transparent 28%); z-index:-1; }.page-glow{position:absolute; top:0; right:0; width:55vw; height:55vw; background:radial-gradient(circle,rgba(74,117,221,.16),transparent 66%); filter:blur(20px); pointer-events:none}
.site-header { height:86px; display:flex; justify-content:space-between; align-items:center; max-width:1280px; margin:auto; padding:0 48px; border-bottom:1px solid var(--line); position:relative; z-index:2; }.brand { color:var(--ink); text-decoration:none; font-size:1.3rem; letter-spacing:.15em; font-weight:600; }.brand span { display:block; font:10px 'DM Mono',monospace; letter-spacing:.18em; color:var(--muted); margin-top:-3px; }.site-header nav { display:flex; gap:28px; }.site-header nav a { color:var(--muted); text-decoration:none; font-size:.9rem; letter-spacing:.12em; }.site-header nav a:hover { color:var(--ink); }
.hero { min-height:700px; max-width:1280px; padding:72px 48px 60px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:40px; }.eyebrow { font:11px 'DM Mono',monospace; letter-spacing:.18em; color:#9dbbff; margin:0 0 15px; }.eyebrow span { display:inline-block; width:22px; height:1px; background:currentColor; vertical-align:middle; margin-right:9px; }.hero h1 { margin:0; font-size:clamp(2.9rem,5vw,5rem); line-height:1.35; letter-spacing:.09em; font-weight:500; text-wrap:balance; }.hero h1 em { color:#a9c8ff; font-style:normal; }.intro { color:var(--muted); margin:30px 0 34px; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { display:inline-flex; align-items:center; gap:17px; padding:13px 18px; text-decoration:none; letter-spacing:.08em; font-size:.88rem; transition:.2s; }.button span { font-size:1.1rem; }.primary { color:#071020; background:#b8ceff; }.primary:hover { background:#fff; transform:translateY(-2px); }.ghost { color:var(--ink); border:1px solid var(--line); }.ghost:hover { border-color:#abc7ff; background:rgba(112,153,255,.1); }.hero-art { height:min(670px,56vw); min-height:540px; overflow:hidden; position:relative; border:1px solid rgba(185,207,255,.22); box-shadow:0 35px 80px rgba(0,0,0,.35); }.hero-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 58%; filter:saturate(.85) contrast(1.02); }.art-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,10,23,.25),transparent 50%),linear-gradient(0deg,rgba(4,10,23,.5),transparent 28%); }.art-caption { position:absolute; bottom:21px; right:24px; margin:0; color:#e7edff; font:10px 'DM Mono',monospace; letter-spacing:.14em; }
.section { max-width:1184px; margin:0 auto; padding:112px 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; }.section-heading h2,.videos h2 { margin:0; font-size:clamp(2rem,3.2vw,3.25rem); line-height:1.25; letter-spacing:.08em; font-weight:500; }.section-heading>p { color:var(--muted); margin:0; max-width:350px; font-size:.95rem; }.games { border-top:1px solid var(--line); }.game-card { min-height:265px; display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:36px; padding:36px 42px; background:linear-gradient(105deg,rgba(24,44,90,.72),rgba(12,20,43,.6)); border:1px solid rgba(161,192,255,.26); box-shadow:inset 0 1px rgba(255,255,255,.05); }.game-icon { color:#e3edff; font-size:5rem; text-align:center; text-shadow:0 0 18px #5d91ff; }.game-meta { color:#94b6ff; font:10px 'DM Mono',monospace; letter-spacing:.13em; }.game-card h3 { margin:0 0 6px; font-size:1.8rem; letter-spacing:.1em; font-weight:500; }.game-card p:not(.game-meta) { color:var(--muted); margin:0; }.play-link { color:var(--ink); text-decoration:none; white-space:nowrap; border-bottom:1px solid #9dbdff; padding-bottom:5px; letter-spacing:.08em; }.play-link span { margin-left:10px; color:#a3c1ff; }.next-game { display:flex; align-items:center; gap:18px; padding:22px 0 0 10px; color:#b8c7e8; }.next-game p { margin:0; }.next-game small { color:#71809e; }.tiny-moon { color:var(--warm); font-size:2.3rem; }
.videos { max-width:none; background:linear-gradient(100deg,rgba(16,27,58,.82),rgba(10,16,34,.5)); padding:92px max(calc((100vw - 1184px)/2),48px); }.video-panel { max-width:1184px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; }.video-panel>div>p:not(.eyebrow) { max-width:470px; color:var(--muted); margin:23px 0 28px; }.video-window { min-height:310px; position:relative; overflow:hidden; border:1px solid var(--line); background:radial-gradient(circle at 76% 18%,#365da8 0 1%,transparent 1.3%),radial-gradient(circle at 22% 72%,#234780 0 1%,transparent 1.2%),linear-gradient(145deg,#102c5b,#0a1531 50%,#060c1d); box-shadow:inset 0 0 80px #020815; }.video-window::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#030817 0%,transparent 50%),repeating-linear-gradient(90deg,transparent 0 46px,rgba(205,221,255,.035) 47px 48px); }.moon { position:absolute; top:53px; right:80px; font-size:6.5rem; color:#eff4ff; text-shadow:0 0 25px #adc7ff; z-index:1; }.stars { position:absolute; color:#dce8ff; top:38px; left:50px; line-height:3.5; letter-spacing:.8em; opacity:.75; }.video-window p { position:absolute; bottom:25px; left:29px; z-index:1; font:10px 'DM Mono',monospace; color:#c1d3ff; letter-spacing:.18em; }
.about { padding-bottom:130px; }.people { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.people article { padding:32px; border-top:1px solid #7896d2; background:rgba(14,24,51,.5); }.person-mark { color:#abc8ff; font-size:2rem; margin:0 0 15px; }.people h3 { font-size:1.45rem; letter-spacing:.12em; margin:0 0 10px; font-weight:500; }.people h3 span { color:#8f9ab6; font:10px 'DM Mono',monospace; letter-spacing:.14em; }.people article>p:last-child { color:var(--muted); margin:0; } footer { display:flex; justify-content:space-between; gap:20px; padding:29px 48px; border-top:1px solid var(--line); color:#8592ae; max-width:1280px; margin:auto; font-size:.78rem; letter-spacing:.08em; } footer p{margin:0} footer span { margin:0 9px; color:#c4d7ff; }
@media(max-width:800px){ .site-header{height:72px;padding:0 20px}.site-header nav{gap:14px}.site-header nav a{font-size:.72rem}.hero{display:flex;flex-direction:column;padding:48px 20px 54px;gap:36px;align-items:stretch;min-height:auto}.hero-art{height:110vw;min-height:460px;order:-1}.hero h1{font-size:2.8rem}.section{padding:74px 20px}.section-heading{display:block}.section-heading>p{margin-top:15px}.game-card{grid-template-columns:68px 1fr;gap:18px;padding:28px 20px}.game-icon{font-size:3.5rem}.play-link{grid-column:1/-1;justify-self:start}.videos{padding:70px 20px}.video-panel{display:block}.video-window{margin-top:36px;min-height:260px}.people{grid-template-columns:1fr}footer{padding:25px 20px;display:block}footer p+p{margin-top:6px} }

/* Full-screen key visual: dark room, warm light, and a quiet left margin. */
.hero { min-height:720px; max-width:1440px; padding:96px 58px 78px; display:flex; align-items:center; position:relative; overflow:hidden; background:#050914 url('yoru-no-yohaku-hero.png') center / cover no-repeat; border-bottom:1px solid var(--line); }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,8,18,.94) 0%,rgba(3,8,18,.68) 34%,rgba(3,8,18,.09) 70%),linear-gradient(0deg,rgba(3,8,18,.62),transparent 42%); }
.hero-copy { position:relative; z-index:1; max-width:540px; }
@media(max-width:800px){ .hero { min-height:690px; padding:48px 20px 54px; align-items:flex-start; background-position:64% center; }.hero::before { background:linear-gradient(90deg,rgba(3,8,18,.93),rgba(3,8,18,.42)),linear-gradient(0deg,rgba(3,8,18,.7),transparent 50%); } }