:root{color-scheme:light;--paper:#ede2cc;--ink:#302d27;--soft:#706456;--red:#964332;--blue:#415567}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:"NanumGothic","Apple SD Gothic Neo",sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait;opacity:.55}button:focus-visible,canvas:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button:hover{color:var(--red)}button:active{transform:translateY(1px)}[hidden]{display:none!important}#art{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}.wordmark{font-size:15px;letter-spacing:.18em}.wordmark small{font-size:10px;letter-spacing:.07em;margin-left:13px;color:var(--soft)}.tools{display:flex;gap:18px;pointer-events:auto}.tools button{padding:8px 0;border:0;background:transparent;font-size:12px}.tools button[aria-pressed=true]{color:var(--red)}#intro{position:absolute;top:23%;left:9%;width:34%;pointer-events:none}#intro button{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--soft);line-height:1.7}h1,h2{font-family:"Batang","Noto Serif CJK KR","Nanum Myeongjo",serif;font-weight:400}h1{position:relative;display:inline-block;font-size:clamp(60px,7.5vw,128px);line-height:1.1;letter-spacing:-.08em;margin:18px 0 20px}h1 em{font-style:normal;margin-left:.5em}.seal{display:inline-block;position:absolute;right:-42px;bottom:13px;padding:5px 7px;border:1px solid var(--red);font-family:serif;font-size:15px;line-height:1.15;letter-spacing:0;color:var(--red);transform:rotate(-5deg)}.intro-copy{font-size:14px;line-height:1.9;color:var(--soft);margin:0 0 25px}.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:13px 24px;font-size:13px;letter-spacing:.04em}.primary:hover{background:var(--red);color:#fff;border-color:var(--red)}.text-button{display:block;background:none;border:0;padding:12px 0;font-size:12px}.fine{font-size:11px!important;line-height:1.8;color:var(--soft)}#chapter{position:absolute;top:18%;left:7%;max-width:28%;pointer-events:none}#chapter h2{font-size:clamp(27px,3.2vw,50px);line-height:1.4;letter-spacing:-.04em;margin:12px 0 15px;white-space:pre-line}#chapter-copy{font-size:13px;line-height:1.9;color:var(--soft);white-space:pre-line}#guide{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:4%;right:4%;text-align:center;pointer-events:none}#guide button{pointer-events:auto}#instruction{font-size:13px;line-height:1.8;margin:0 0 12px;white-space:pre-line}#keys{display:flex;justify-content:center;gap:18px}#keys button{border:0;border-bottom:1px solid #b7aa92;background:#ede2cc9c;padding:8px 12px;min-width:83px;font-size:12px;touch-action:none}kbd{font-family:inherit;color:var(--red);margin-right:8px}#progress-label{display:block;font-size:10px;letter-spacing:.15em;color:var(--soft);margin-top:12px}#help-panel{position:fixed;inset:0;z-index:10;background:#25241f55;display:grid;place-items:center;padding:20px;backdrop-filter:blur(5px)}.help-sheet{position:relative;background:#f2e9d7;width:min(480px,100%);max-height:90vh;overflow:auto;padding:32px}.help-sheet h2{font-size:34px;line-height:1.3;margin:15px 0 24px}.help-sheet p,.help-sheet dl{font-size:13px;line-height:1.9}.help-sheet dt{color:var(--red);margin-top:12px}.help-sheet dd{margin:3px 0 0}.help-sheet label{display:block;font-size:13px;padding:15px 0}.close{position:absolute;top:20px;right:22px;border:0;background:transparent;font-size:12px}#error{position:absolute;left:5%;bottom:10%;padding:15px;background:#f4e5cd;color:#873a2b}body[data-scene=heal] #chapter,body[data-scene=nolbu] #chapter{left:auto;right:8%;max-width:29%}body[data-scene=nolbu] #chapter{right:auto;left:8%}
@media(max-width:650px){header{top:max(15px,env(safe-area-inset-top));left:6%;right:6%}.wordmark{font-size:12px}.wordmark small{display:none}.tools{gap:14px}.tools button{font-size:11px}#intro{top:13%;left:10%;width:80%}#intro .eyebrow{font-size:10px}h1{font-size:65px;margin:10px 0 15px}h1 br{display:none}h1 em{margin-left:.07em}.seal{right:-32px;bottom:6px;font-size:12px}.intro-copy{font-size:12px;margin-bottom:15px}.primary{padding:11px 19px}.fine{font-size:10px!important}#chapter,body[data-scene=heal] #chapter,body[data-scene=nolbu] #chapter{left:8%;right:auto;top:13%;max-width:85%}#chapter h2{font-size:30px;line-height:1.3;margin:8px 0}#chapter-copy{font-size:12px;line-height:1.7}#chapter .eyebrow{font-size:10px}#guide{bottom:max(22px,env(safe-area-inset-bottom))}#instruction{font-size:12px}#keys{gap:12px}#keys button{min-width:76px}#progress-label{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
body[data-scene=healDone] #chapter{left:auto;right:8%;max-width:29%}body[data-scene=nolbuBreak] #chapter,body[data-scene=nolbuDone] #chapter{left:8%;right:auto;max-width:29%}
@media(max-width:650px){body[data-scene=healDone] #chapter,body[data-scene=nolbuBreak] #chapter,body[data-scene=nolbuDone] #chapter{left:8%;right:auto;top:13%;max-width:85%}}

#ink-transition{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}body[data-transition=true] #guide{pointer-events:none}body[data-transition=true] #guide button{pointer-events:none}

#concert{margin:12px auto 0;max-width:310px;pointer-events:auto}#perform{border:1px solid #9b8a6c;background:#ede2ccda;padding:9px 18px;font-size:12px}#perform[aria-pressed=true]{background:var(--ink);color:var(--paper)}#concert-label{display:block;font-size:10px;color:var(--soft);margin:7px 0}#concert-progress{display:block;width:100%;height:2px;accent-color:var(--red);border:0}#keys button[data-sounding=true]{background:#ddbc79;color:#452e15;border-color:#965335}body[data-scene=free] #progress-label{display:none}@media(max-width:650px){body[data-scene=free] #instruction{font-size:11px;margin-bottom:6px}#concert{margin-top:8px}#concert-label{margin:5px 0}}

.track-choice{display:block;font-size:11px;color:var(--soft);pointer-events:auto;margin:7px 0}.track-choice select{font:inherit;color:var(--ink);background:#eee4d2;border:0;border-bottom:1px solid #ae9c80;padding:7px;max-width:225px}@media(max-width:650px){.track-choice select{max-width:240px;padding:5px}#intro #listen{padding:8px 0}#intro .fine{margin-top:4px}}

body[data-scene=free] #chapter{display:none}
#song-library{position:absolute;top:17%;left:7%;width:29%;max-width:370px}
#song-library h2{font-size:32px;letter-spacing:-.05em;margin:8px 0 12px}
.library-hint{font-size:11px;color:var(--soft);line-height:1.6;margin:0 0 18px}
#song-list{display:grid;gap:7px}
#song-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:12px 15px;border:1px solid #b7aa9266;background:#f2e9d7df;text-align:left;border-radius:2px}
.track-name{font-size:13px}.track-action{font-size:10px;white-space:nowrap;color:var(--soft)}
#song-list button:hover{border-color:var(--red)}
#song-list button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#song-list button[aria-pressed=true] .track-action{color:#e7bd84}
@media(max-width:650px){#song-library{top:11%;left:8%;width:84%;max-width:none}#song-library .eyebrow{font-size:9px;margin:0}#song-library h2{font-size:24px;margin:4px 0}.library-hint{font-size:10px;margin:0 0 8px}#song-list{gap:4px;grid-template-columns:1fr 1fr}#song-list button{min-height:45px;padding:8px;gap:4px;flex-wrap:wrap}.track-name{font-size:11px}.track-action{font-size:9px}}

#intro h1{font-size:clamp(58px,6vw,100px)}
@media(max-width:650px){#intro h1{font-size:44px}#intro h1 em{margin-left:.18em}#intro .seal{right:-44px}}
