:root{color-scheme:dark;--ink:#eef6ff;--muted:#b8c7d4;--accent:#afdada;--ground:#182736;--line:#e3f5ff30;--surface:#122331ed;font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ground);color:var(--ink)}
body{min-height:100svh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
[hidden]{display:none!important}
#scene{position:fixed;inset:0;background:radial-gradient(ellipse at 62% 48%,#426b7b 0%,var(--ground) 68%);touch-action:pan-y}
#scene canvas{width:100%;height:100%;display:block}
.screen-grain{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#07121c88,transparent 55%),linear-gradient(0deg,#050d1466,transparent 20%,transparent 84%,#050d1422)}
.world-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:clamp(24px,4vw,56px)}
.brand{font-size:17px;letter-spacing:.07em;font-weight:750;display:grid;gap:7px}
.brand span{font-size:11px;letter-spacing:.24em;font-weight:400;opacity:.65}
.menu-toggle{border:0;background:none;padding:12px 0 12px 20px;font-size:14px;display:flex;gap:22px;align-items:center}
.menu-toggle span{font-size:25px;font-weight:300}
#world-menu{position:absolute;z-index:8;right:clamp(24px,4vw,56px);top:105px;width:min(380px,calc(100vw - 48px));padding:12px 26px;background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(20px)}
#world-menu a{display:flex;align-items:center;gap:20px;min-height:64px;border-bottom:1px solid var(--line);font-size:15px}
#world-menu a:last-child{border:0}
#world-menu a span:last-child{margin-left:auto}
#world-menu a[aria-current]{color:var(--accent)}
main{position:relative;pointer-events:none;min-height:calc(100svh - 240px)}
.world-copy{position:absolute;left:clamp(24px,4vw,56px);top:clamp(75px,17vh,220px);width:min(410px,37vw)}
.eyebrow{letter-spacing:.24em;font-size:11px;font-weight:600;color:var(--accent);margin:0 0 25px}
h1{font-size:clamp(32px,4.2vw,66px);font-weight:450;line-height:1.22;letter-spacing:-.065em;margin:0;word-break:keep-all}
.description{max-width:290px;line-height:1.9;font-size:14px;color:var(--muted);margin:26px 0 28px;word-break:keep-all}
.world-copy h1[lang=en]{font-family:Georgia,serif;letter-spacing:-.045em;overflow-wrap:normal}
.anniversary-message{font-size:15px;line-height:1.7;color:var(--accent);margin:20px 0 0;word-break:keep-all}
.anniversary-message + .description{margin-top:14px}
.world-action{pointer-events:auto;min-height:48px;display:flex;gap:34px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}
.world-action span{font-size:22px;color:var(--accent)}
.world-status{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1.7;text-align:center;color:var(--ink);max-width:calc(100% - 48px);width:max-content;background:var(--surface);padding:8px 14px;border-radius:4px}
.world-status:empty{display:none}
.world-footer{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:22px;padding:24px clamp(24px,4vw,56px) max(30px,env(safe-area-inset-bottom));min-height:105px}
.gesture-hint{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.next-world{font-size:14px;display:grid;grid-template-columns:1fr auto;gap:7px 24px}
.next-world span{font-size:9px;letter-spacing:.18em;color:var(--muted)}
.next-world b{grid-row:1 / 3;grid-column:2;font-size:30px;font-weight:300}
.skip-link{position:fixed;top:0;left:30px;transform:translateY(-110%);z-index:20;background:var(--surface);padding:14px}
.skip-link:focus{transform:translateY(0)}
.piano-keys{pointer-events:auto;display:flex;margin-top:20px;gap:3px;max-width:260px}
.piano-keys button{border:0;background:#eee7df;color:#554943;border-radius:0 0 3px 3px;flex:1;padding:32px 0 7px;font-size:11px;min-width:0}
.piano-keys button:active{background:#e6bd6b;transform:translateY(2px)}
.piano-keys button.is-playing{background:#e6bd6b;transform:translateY(2px)}
.piano-instruction{font-size:11px;line-height:1.8;color:var(--muted);margin-top:12px}
.world-action:disabled{cursor:wait;opacity:.6}
html[data-world=piano] #scene{touch-action:none}
.noscript{position:fixed;bottom:140px;left:24px;right:24px}
html[data-world=bubbles]{color-scheme:light;--ink:#493b56;--muted:#6b5879;--accent:#7b4890;--ground:#e0cfdf;--line:#75587c40;--surface:#f7edf8ed}
html[data-world=bubbles] .screen-grain{background:linear-gradient(90deg,#f1e6f566,transparent 60%)}
html[data-world=bubbles] .world-copy{top:12vh}
html[data-world=bubbles] h1{font-family:Georgia,"Pretendard Variable",serif}
html[data-world=piano]{--ground:#20090f;--ink:#fff3e0;--accent:#e8bf68;--muted:#d0b2a7;--line:#e8bf6838;--surface:#341019f2}
html[data-world=piano] #scene{background:radial-gradient(ellipse at 62% 48%,#702534 0%,var(--ground) 68%)}
html[data-world=piano] .screen-grain{background:linear-gradient(90deg,#1c050b88,transparent 55%),linear-gradient(0deg,#19070d88,transparent 23%,transparent 84%,#19070d22)}
html[data-world=piano] .world-copy{top:10vh}
html[data-world=piano] h1{font-family:Georgia,"Pretendard Variable",serif}
html[data-world=ocean]{--ground:#041d29;--accent:#98e9d8;--muted:#acd1cf;--surface:#062c36ed}
html[data-world=ocean] .world-copy{top:13vh}
html[data-world=sand]{--ground:#25170f;--accent:#ecc791;--muted:#d6b99d;--surface:#2d2017ed;--line:#eac49035}
html[data-world=sand] h1{font-family:Georgia,"Pretendard Variable",serif}
@media(min-width:1600px){.world-copy{width:450px}.description{font-size:16px}.world-footer{padding-bottom:45px}}
@media(max-width:760px){
 .world-header{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:20px}
 .brand{font-size:14px}.menu-toggle{font-size:12px;gap:12px}
 main{min-height:calc(100svh - 230px)}
 .world-copy,html[data-world] .world-copy{top:20px;width:calc(100vw - 48px)}
 .eyebrow{font-size:10px;margin-bottom:14px}
 h1{font-size:34px;max-width:300px}
 .description{font-size:12px;line-height:1.7;max-width:250px;margin:15px 0 8px}
 .anniversary-message{font-size:12px;margin-top:12px}
 .anniversary-message + .description{margin-top:8px;max-width:310px}
 .world-action{min-height:42px;font-size:12px;gap:24px}
 .screen-grain{background:linear-gradient(180deg,#07121c55,transparent 55%,#07121c88)}
 .world-status{bottom:140px;font-size:11px}
 .world-footer{flex-wrap:wrap;gap:22px 15px;padding-top:14px}
 .gesture-hint{margin:0;font-size:10px}
 .next-world{margin-left:auto;font-size:12px}
 .next-world span{font-size:8px}.next-world b{font-size:22px}
 .piano-keys{max-width:220px;margin-top:12px}.piano-keys button{padding-top:18px}
 html[data-world=piano] h1{font-size:28px;max-width:none}
 html[data-world=piano] .description{margin:12px 0 4px;max-width:310px}
 html[data-world=piano] .eyebrow{margin-bottom:10px}
 html[data-world=piano] .piano-keys button{min-height:44px;padding-top:18px}
 html[data-world=piano] .piano-instruction{font-size:10px;line-height:1.5;margin-top:8px}
 html[data-world=piano] .gesture-hint{max-width:145px;line-height:1.6}
 html[data-world=piano] main{min-height:calc(100svh - 265px)}
}
@media(max-height:650px) and (min-width:761px){.world-copy,html[data-world] .world-copy{top:20px}h1{font-size:38px}.description{margin:15px 0}main{min-height:400px}}
@media(max-height:800px) and (min-width:761px){html[data-world=piano] .world-copy{top:20px}html[data-world=piano] h1{font-size:40px}html[data-world=piano] .description{margin:18px 0}html[data-world=piano] .piano-keys button{padding-top:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.handoff-notice{position:fixed;z-index:12;right:24px;bottom:24px;width:min(390px,calc(100vw - 48px));padding:20px;background:#fbf4fff5;border:1px solid #9475a255;box-shadow:0 12px 50px #26183133;border-radius:12px;color:#493b56}.handoff-notice p{font-size:12px;line-height:1.8;word-break:keep-all;margin:0 0 12px}.handoff-notice>div{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.handoff-notice a,.handoff-notice button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;font-size:11px;border-radius:6px;padding:8px 12px}.handoff-notice a{background:#705180;color:#fff}.handoff-notice button{border:1px solid #9475a244;background:none;color:#675573}