@font-face{font-family:HomeHeading;src:url('./home-heading.woff2') format('woff2');font-weight:700;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#fff;color:#0f051d;font-family:Arial,sans-serif}main{position:relative;isolation:isolate;min-height:calc(100svh - 76px);display:grid;place-items:center;padding:150px 24px;overflow:hidden}.map{position:absolute;inset:0;z-index:-1;background:url('./home-bg.png') center center/cover no-repeat;opacity:.6}.welcome{position:relative;width:min(700px,100%);text-align:center}h1{font-family:HomeHeading,'Arial',sans-serif;font-size:clamp(54px,8vw,96px);font-weight:700;letter-spacing:-3px;line-height:1.05;margin:20px 0 48px}nav{display:flex;align-items:center;flex-direction:column;gap:10px}nav a{text-decoration:none;font-weight:700;transition:transform .2s,box-shadow .2s;line-height:1.4}.play{font-size:18px;color:#fff;padding:21px 40px;background:linear-gradient(25deg,#0061fc,#008cff);border-radius:50px;box-shadow:0 9px 24px #0061fc24}.play:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0061fc44}.guide{font-size:14px;letter-spacing:.6px;color:#0f051d;padding:12px 24px;border-radius:30px}.guide:hover{background:#ffffffb0;color:#0061fc}a:focus-visible{outline:3px solid #0061fc;outline-offset:5px}.mark{position:absolute;object-fit:contain;pointer-events:none;mix-blend-mode:multiply}.m1{width:44px;top:-65px;left:50%;transform:rotate(-12deg)}.m2{width:24px;top:20%;right:-14%;transform:rotate(10deg)}.m3{width:16px;top:16%;left:-14%;transform:rotate(-15deg)}.m4{width:44px;bottom:-65px;left:16%;transform:rotate(9deg)}.m5{width:24px;bottom:-65px;right:16%;transform:rotate(-9deg)}footer{min-height:76px;display:flex;justify-content:center;align-items:center;padding:24px;text-align:center;color:#7b7583;font-size:14px}@media(max-width:900px){.welcome{width:min(560px,85%)}.m2{right:-7%}.m3{left:-7%}h1{letter-spacing:-2px}}@media(max-width:500px){main{padding:130px 24px}.welcome{width:100%}h1{font-size:58px;letter-spacing:-2px;margin-bottom:36px}.m2{right:1%;top:-18px}.m3{left:2%;top:10px}.m1{left:45%}.map{background-size:auto 100%;background-position:58% center}.play{font-size:17px;padding:18px 38px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
nav a{font-family:HomeHeading,Arial,sans-serif}

/* ---------- THEME (light / dark) ---------- */
:root{color-scheme:light;--bg:#fff;--text:#0f051d;--muted:#7b7583;--guide-hover:#ffffffb0;--map-opacity:.6;--map-filter:none;--mark-blend:multiply;--mark-opacity:1;--toggle-bg:#ffffffcc;--toggle-line:#dce5f0;--toggle-fg:#0f051d}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0b0e14;--text:#eef2f8;--muted:#8b93a3;--guide-hover:#ffffff14;--map-opacity:.55;--map-filter:brightness(.62) saturate(.85);--mark-blend:screen;--mark-opacity:.85;--toggle-bg:#151a24cc;--toggle-line:#2a3242;--toggle-fg:#eef2f8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0b0e14;--text:#eef2f8;--muted:#8b93a3;--guide-hover:#ffffff14;--map-opacity:.55;--map-filter:brightness(.62) saturate(.85);--mark-blend:screen;--mark-opacity:.85;--toggle-bg:#151a24cc;--toggle-line:#2a3242;--toggle-fg:#eef2f8}}
body{background:var(--bg);color:var(--text);transition:background .25s,color .25s}
.map{opacity:var(--map-opacity);filter:var(--map-filter);transition:opacity .25s,filter .25s}
.mark{mix-blend-mode:var(--mark-blend);opacity:var(--mark-opacity)}
.guide{color:var(--text)}.guide:hover{background:var(--guide-hover);color:#0061fc}
:root[data-theme="dark"] .guide:hover{color:#5aa2ff}
:root[data-theme="dark"] .play{box-shadow:0 9px 24px #0061fc40}:root[data-theme="dark"] .play:hover{box-shadow:0 12px 30px #0061fc66}
footer{color:var(--muted)}
.theme-toggle{position:fixed;top:18px;right:18px;z-index:50;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--toggle-line);border-radius:50%;background:var(--toggle-bg);color:var(--toggle-fg);backdrop-filter:blur(10px);cursor:pointer;font-size:18px;line-height:1;transition:transform .2s,background .25s,color .25s,border-color .25s}
.theme-toggle:hover{transform:scale(1.08)}
.theme-toggle:focus-visible{outline:3px solid #0061fc;outline-offset:3px}
.theme-toggle .sun,.theme-toggle .moon{pointer-events:none}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}:root[data-theme="dark"] .theme-toggle .moon{display:none}