@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500&display=swap');
:root{color-scheme:dark;--ink:#f3f0e8;--muted:#a6a69c;--gold:#d5b483;--line:#ffffff24;--bg:#111210}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.skip{position:fixed;top:-100px;left:20px;z-index:2000;background:#111;padding:12px}.skip:focus{top:72px}.hero{position:relative;min-height:730px;height:calc(100svh - 64px);max-height:900px;isolation:isolate;overflow:hidden}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-image{object-position:67% 50%}.hero-shade{z-index:-1;background:linear-gradient(90deg,#090b0bf2 0%,#090b0b9e 30%,#090b0b00 65%),linear-gradient(0deg,#101210f5 0%,transparent 40%)}.hero-copy{position:absolute;left:4.5%;top:30px}.signature{display:inline-grid;gap:4px}.signature small{font-size:10px;color:#b5b4a9}.signature>span{font-size:19px;font-weight:600;letter-spacing:-1px}.signature i,.footer i{font-size:11px;font-style:normal;font-weight:400;color:#a5a89e;margin-left:5px}.eyebrow{font-size:12px;font-weight:400;letter-spacing:.1em}.eyebrow span{font-size:10px;color:var(--muted);margin-left:12px}.hero-copy>.eyebrow{margin:45px 0 22px;color:var(--gold)}h1,h2,h3{font-family:'Noto Serif KR',Georgia,serif;font-weight:400}h1{font-size:clamp(38px,4.15vw,65px);letter-spacing:-.055em;line-height:1.5;margin:0 0 23px}h1 br{line-height:1.1}.invitation-copy{color:#d2d1c9;font-size:15px;line-height:1.9}.playable{position:absolute;left:4.5%;bottom:70px;width:min(490px,44%)}.keyboard-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.04em;color:#d3c6b3;margin-bottom:12px}.keyboard-label #landing-note{color:var(--gold)}.keybed{position:relative;height:120px;padding:0;border:6px solid #171815;border-top:5px solid #998263;border-bottom:12px solid #171815;box-shadow:0 14px 24px #0009;border-radius:2px 2px 8px 8px;touch-action:none;user-select:none;isolation:isolate;background:#111}.key{position:absolute;top:0;margin:0;padding:0;border-radius:0 0 3px 3px;transition:background 70ms,transform 70ms;touch-action:none}.key.white{left:calc(var(--slot)*10%);width:10%;height:100%;background:linear-gradient(90deg,#c9c6b9,#f8f4e7 20%,#e5dfd0 92%,#b3afa2);border:1px solid #817d72;box-shadow:inset 0 -7px 0 #c6c0ad;color:#6e685a;z-index:1}.key.black{left:calc((var(--slot) + .67)*10%);width:6.6%;height:64%;background:linear-gradient(90deg,#080909,#343833 55%,#080909);border:1px solid #030403;box-shadow:inset 0 -6px 0 #080909,0 5px 5px #0008;z-index:2;color:#aaa99e}.key kbd{position:absolute;bottom:12px;left:0;right:0;font:9px Arial;pointer-events:none}.key.black kbd{bottom:10px}.key.is-down{transform:translateY(3px);background:linear-gradient(90deg,#b2925b,#f4dbab,#c7a26a);box-shadow:inset 0 -3px 0 #967749}.key.black.is-down{background:linear-gradient(90deg,#382a16,#8c6c3b,#2d2316)}.keyboard-help{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;font-size:10px;color:#afafa3}.keyboard-help button{color:#cebe9e;background:transparent;border:0;padding:5px 0;font-size:10px}.touch-help{display:none}#sound-status{font-size:10px;color:#93968e;min-height:14px;margin:6px 0 0}.hero-next{position:absolute;right:4.5%;bottom:104px;display:grid;gap:13px;min-width:255px}.hero-next>span{font-size:12px;color:#e1d4c0}.hero-next strong{font-family:'Noto Serif KR',serif;font-weight:400;font-size:26px;display:flex;align-items:center;gap:22px}.hero-next b{display:grid;place-items:center;font:25px Arial;border:1px solid #e9e4d28a;width:54px;height:54px;border-radius:50%;transition:background .2s}.hero-next:hover b{background:#e4c99c;color:#151711}.down{position:absolute;bottom:24px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:10px;color:#9eaa9d}.down span{font-size:17px}.collection{padding:70px 4.5% 80px;background:radial-gradient(ellipse at 5% 0%,#22251c66,transparent 50%),#111210}.collection-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:55px}.collection-intro .eyebrow{color:var(--gold);margin:0 0 22px}h2{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.055em;line-height:1.65;margin:0}.collection-intro>p{font-size:13px;line-height:2;color:var(--muted);margin:0 0 5px}.series-heading{display:flex;justify-content:space-between;padding-bottom:17px;margin-bottom:22px;border-bottom:1px solid var(--line);color:#a4aa9a;font-size:11px}.footer{display:flex;justify-content:space-between;gap:30px;padding:40px 4.5%;border-top:1px solid var(--line);color:#aaa99b}.footer>div>small{display:block;font-size:10px;margin-bottom:7px}.footer>div>a{font-size:23px;font-weight:600;color:#e3e0d5;letter-spacing:-1px}.footer p{font-size:12px;line-height:1.9;margin:17px 0 0}.footer .footer-right{text-align:right;align-self:flex-end;display:grid;gap:14px}.footer-right p{margin:0;font-size:11px}.footer .footer-right>a{font-size:10px;font-weight:400;letter-spacing:.06em}.footer-right small{font-size:9px;line-height:1.7;max-width:340px;color:#808778}.vnh-ready{padding-top:64px}
@media(min-width:1600px){.hero-copy,.playable{left:max(4.5%,calc((100% - 1500px)/2))}.hero-next{right:max(4.5%,calc((100% - 1500px)/2))}.collection,.footer{padding-left:max(4.5%,calc((100% - 1500px)/2));padding-right:max(4.5%,calc((100% - 1500px)/2))}}
@media(max-width:1050px){.collection-intro{display:block}.collection-intro>p{margin-top:25px}.hero-next{min-width:0}.hero-next strong{font-size:22px;gap:12px}.hero-copy>.eyebrow{margin-top:32px}.playable{width:47%}}
@media(max-width:650px){html{scroll-padding-top:74px}.hero{height:calc(100svh - 64px);min-height:740px;max-height:1000px}.hero-image{object-position:61% 50%;opacity:.82}.hero-shade{background:linear-gradient(180deg,#090b0bde 0%,#090b0b36 40%,#101210 77%),linear-gradient(90deg,#090b0b99,transparent 85%)}.hero-copy{left:24px;right:24px;top:24px}.signature>span{font-size:17px}.signature small{font-size:9px}.hero-copy>.eyebrow{margin:28px 0 15px;font-size:11px}h1{font-size:clamp(30px,8.5vw,43px);line-height:1.5;margin-bottom:14px}.invitation-copy{font-size:12px;line-height:1.8}.playable{left:24px;right:24px;width:auto;bottom:152px}.keybed{height:125px;border-width:5px;border-top-width:5px;border-bottom-width:11px}.key kbd{display:none}.desktop-help{display:none}.touch-help{display:inline}.keyboard-help{font-size:9px}.keyboard-label{font-size:9px}.hero-next{left:24px;right:24px;bottom:57px;gap:6px}.hero-next>span{font-size:11px}.hero-next strong{justify-content:space-between;font-size:22px}.hero-next b{width:42px;height:42px;font-size:21px}.down{left:24px;right:24px;bottom:16px;font-size:9px}.collection{padding:42px 24px 50px}.collection-intro{margin-bottom:33px}.collection-intro .eyebrow{font-size:10px}.collection-intro .eyebrow span{font-size:8px}h2{font-size:clamp(19px,5.3vw,30px);line-height:1.8}.collection-intro>p{font-size:11px;line-height:1.9;margin-top:18px}.series-heading{font-size:9px}.episode{height:380px}.episode-top{top:20px;left:20px;right:20px}.episode-copy{left:20px;right:20px;bottom:24px}.episode-copy h3{font-size:23px}.episode-visual{inset:36px 0 90px}.piano-visual{inset:0}.footer{display:block;padding:30px 24px}.footer .footer-right{text-align:left;margin-top:28px;gap:12px}.preview-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.signature .brand-lab,.footer .brand-lab{display:flex;align-items:center;gap:5px;width:max-content;margin:3px 0 0;color:#b8c4bb;font-size:10px;font-weight:400;line-height:1.4;letter-spacing:.16em}.brand-lab img{display:block;width:16px;height:20px;flex:none;object-fit:contain}.footer .brand-lab{margin-top:8px;font-size:11px}.footer .brand-lab img{width:19px;height:24px}
@media(max-width:650px){.signature .brand-lab{font-size:9px;gap:4px}.signature .brand-lab img{width:14px;height:18px}.hero-copy>.eyebrow{margin-top:22px}}

.chapter-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.chapter-card{position:relative;display:block;min-width:0;height:330px;overflow:hidden;background:#181b18;border:1px solid #ffffff18;border-radius:4px;isolation:isolate}.chapter-art{position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-color:#141713;transform:scale(1.015)}.chapter-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#090d0cf5 0%,#090d0cbb 25%,transparent 66%,#090d0c88)}.art-piano{background-size:cover;background-position:73% center}.art-camera{background-size:auto 100%;background-position:center}.art-guitar,.art-reel,.art-watch{background-size:300% auto;background-position-y:28%}.art-guitar{background-position-x:left}.art-reel{background-position-x:center}.art-watch{background-position-x:right}.chapter-top{position:absolute;left:16px;right:16px;top:17px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:9px;line-height:1.5;letter-spacing:.07em}.chapter-top small{font-size:8px;padding:3px 5px;border:1px solid #ffffff2a;color:#c4c5bc;letter-spacing:0;white-space:nowrap}.chapter-copy{position:absolute;left:16px;right:16px;bottom:23px}.chapter-copy>span{font-size:10px;color:#d2ccbb}.chapter-copy h3{font-size:clamp(18px,1.65vw,25px);line-height:1.55;letter-spacing:-.045em;margin:9px 0 11px}.chapter-copy p{font-size:10px;line-height:1.8;max-width:90%;color:#a9afa1;margin:0}.chapter-copy>b{position:absolute;right:0;bottom:5px;border:1px solid #dfd7c482;border-radius:50%;display:grid;place-items:center;width:28px;height:28px;font:18px Arial}.is-live{border-color:#b69a6580}.is-live .chapter-top small{color:var(--gold);border-color:#b69a6580}.is-live .chapter-copy p{padding-right:24px;max-width:100%}.is-live:hover,.is-live:focus-visible{border-color:var(--gold)}.is-live:hover .chapter-copy>b{background:#d9c398;color:#111}.is-upcoming{color:#b5b9b1}.is-upcoming .chapter-art{filter:grayscale(1) blur(2.3px);opacity:.5;transform:scale(1.04)}.is-upcoming .chapter-copy>span,.is-upcoming .chapter-copy p{color:#929c8e}.chapter-note{font-size:10px;line-height:1.8;color:#8f9989;margin:20px 0 0}
@media(min-width:1400px){.chapter-card{height:355px}.chapter-top,.chapter-copy{left:20px;right:20px}}
@media(max-width:960px){.chapter-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(175px,36vw,230px);overflow-x:auto;overflow-y:hidden;gap:14px;padding:4px 4px 12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#677361 #1b211a}.chapter-card{height:315px;scroll-snap-align:start}.chapter-copy h3{font-size:22px}.chapter-top{font-size:9px}.chapter-note{margin-top:12px}}
@media(max-width:650px){.chapter-cards{grid-auto-columns:clamp(175px,55vw,215px);gap:12px}.chapter-card{height:310px}.chapter-copy h3{font-size:21px}.chapter-top,.chapter-copy{left:15px;right:15px}.chapter-note{font-size:9px}}