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

:root{color-scheme:dark;font-family:'DM Sans','Noto Sans KR',sans-serif;background:#101a19;color:#f4f2e9;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px}
.page{min-height:100vh;max-width:1600px;margin:auto;padding:0 clamp(24px,6vw,100px);display:flex;flex-direction:column}
.site-header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(244,242,233,.14)}
.brand{color:#f4f2e9;text-decoration:none;font-size:1.65rem;font-weight:700;letter-spacing:-.08em}
.brand-dot,.period{color:#d6f16d}
.site-address{color:#a1aaa4;font-size:.75rem;letter-spacing:.1em}
main{flex:1;display:flex}
.hero{width:100%;min-height:620px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4vw}
.hero-copy{padding:54px 0 80px;position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:15px;margin:0 0 42px;color:#d6f16d;font-size:.76rem;letter-spacing:.28em;font-weight:700}
.eyebrow-line{display:block;width:28px;height:1px;background:#d6f16d}
h1{font-family:'Noto Sans KR',sans-serif;font-size:clamp(3rem,5.4vw,6rem);line-height:1.27;letter-spacing:-.075em;margin:0;font-weight:500;white-space:nowrap}
h1 strong{font-weight:800}
.intro{font-size:clamp(1.35rem,2.2vw,2rem);font-weight:500;letter-spacing:-.04em;margin:35px 0 0;color:#d6f16d}
.hero-rule{height:1px;width:48px;background:#6b756d;margin:48px 0 25px}
.supporting{margin:0;color:#aeb7b0;font-size:1rem;line-height:1.9;letter-spacing:-.025em}
.game-link{display:inline-flex;align-items:center;gap:30px;margin-top:40px;padding:16px 21px;border:1px solid #d6f16d;border-radius:4px;color:#d6f16d;font-size:.9rem;font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.game-link:hover,.game-link:focus-visible{background:#d6f16d;color:#101a19}
.game-link:focus-visible{outline:2px solid #f4f2e9;outline-offset:3px}
.hero-art{position:relative;aspect-ratio:1;min-width:0;max-width:540px;width:100%;justify-self:center;display:grid;place-items:center}
.art-ring{position:absolute;border-radius:50%;border:1px solid rgba(214,241,109,.22)}
.art-ring-outer{inset:0}
.art-ring-inner{inset:13%;border-style:dashed;border-color:rgba(214,241,109,.18)}
.art-core{width:52%;aspect-ratio:1;border-radius:50%;background:#d6f16d;color:#101a19;display:grid;place-items:center;box-shadow:0 0 90px rgba(214,241,109,.11)}
.art-core span{font-family:'Noto Sans KR',sans-serif;font-size:clamp(2rem,4vw,4rem);font-weight:800;line-height:1.04;letter-spacing:-.13em;transform:translateX(-.07em)}
.art-mark{position:absolute;color:#8b998c;font-size:.65rem;letter-spacing:.22em}
.art-mark-top{right:4%;top:12%}
.art-mark-bottom{left:0;bottom:10%}
.site-footer{height:82px;border-top:1px solid rgba(244,242,233,.14);display:flex;align-items:center;justify-content:space-between;color:#87938b;font-size:.75rem;letter-spacing:.02em}
@media(max-width:800px){.site-header{height:80px}.hero{grid-template-columns:1fr;min-height:auto;gap:0}.hero-copy{padding:75px 0 20px}.hero-art{width:min(75%,360px);margin:20px auto 65px}h1{font-size:clamp(2.55rem,8.5vw,5rem)}.eyebrow{margin-bottom:30px}.site-footer{height:70px}}
@media(max-width:430px){.site-address{font-size:.62rem;letter-spacing:0}.hero-copy{padding-top:62px}.intro{margin-top:27px}.hero-rule{margin-top:38px}.hero-art{width:85%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}