@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap";:root{font-family:Manrope,Noto Sans KR,sans-serif;color:#e9f4f2;background:#050d15;font-synthesis:none;color-scheme:dark;--muted:#91aaa9;--accent:#a7ead3;--line:rgba(188,227,219,.17)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button,a,input,select{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #bee8d9}button{border:0;background:none}button:hover:not(:disabled){color:#fff}button[hidden],[hidden]{display:none!important}#app{position:relative;height:100dvh;min-height:640px;overflow:hidden}.sky,.veil{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sky{background:#071721 url(/art/constellation-sky.jpg) center/cover no-repeat}.veil{background:linear-gradient(180deg,rgba(3,10,17,.22),transparent 28%,rgba(3,10,17,.2) 70%,#040e17 100%)}.topbar{position:absolute;z-index:5;top:0;left:0;right:0;padding:25px 34px;display:flex;justify-content:space-between;align-items:center}.brand{color:#e9f4f2;text-decoration:none;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:.03em}.brand-mark{font-size:33px;color:#b0dfd0}.brand small{display:block;font-size:9px;letter-spacing:.28em;color:#9db4b5;margin-top:5px}.top-actions{display:flex;gap:16px;align-items:center}.top-actions button{font-size:12px;color:#a8c1bd;padding:10px}.top-actions span{display:inline-grid;place-items:center;margin-left:6px;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;font-size:10px}#help-toggle{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;padding:0}#universe{position:absolute;top:75px;right:300px;bottom:220px;left:20px;touch-action:none}#universe canvas{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0}.star-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.star-label{position:absolute;transform:translate(-50%,16px);min-width:76px;min-height:44px;text-align:center;pointer-events:auto;text-shadow:0 2px 14px #02090e;transition:color .2s}.star-label strong{display:block;font-size:19px;font-weight:500;letter-spacing:.025em;color:var(--star)}.star-label small{font-size:9px;letter-spacing:.04em;color:#9bb7b3;display:block;margin-top:5px}.star-label.current strong{color:#fff}.star-label.current:after{content:"";position:absolute;top:0;left:50%;width:30px;height:1px;background:var(--star);transform:translate(-50%)}.star-label:hover{filter:brightness(1.5)}.fallback .star-label:before{content:"✦";position:absolute;top:-34px;left:50%;transform:translate(-50%);color:var(--star);font-size:30px;text-shadow:0 0 22px var(--star)}.invitation{position:absolute;z-index:2;top:19%;left:6%;pointer-events:none;max-width:420px}.eyebrow{font-size:9px;letter-spacing:.25em;color:#94b7ae;font-weight:600}.invitation h1{font-weight:400;font-size:clamp(25px,3vw,40px);line-height:1.6;letter-spacing:-.03em;margin:15px 0}.invitation p{font-size:12px;line-height:1.9;color:var(--muted)}.inspector{--selected-color:#a7ead3;position:absolute;z-index:4;right:34px;top:28%;width:245px;padding:22px 0;border-top:1px solid rgba(173,217,200,.3)}.inspector h2{font-size:34px;font-weight:400;letter-spacing:-.03em;margin:13px 0;color:var(--selected-color)}.inspector h2:has(+p){line-height:1.3}.inspector p{font-size:12px;line-height:1.9;color:#a4bbb8;margin:0 0 22px}.selection-actions{display:grid;gap:9px}.primary,.secondary{border-radius:4px;min-height:43px;padding:10px 16px;font-size:12px;font-weight:600}.primary{background:#b5e9d2;color:#092b24!important;box-shadow:0 0 25px #7bd9b313;display:flex;justify-content:space-between;align-items:center}.primary:hover:not(:disabled){background:#d0fbe4}.secondary{border:1px solid #b4daca33;background:#09241d24;color:#c1d7d0}.text-button{font-size:10px;color:#9cafaa;padding:14px 0;text-align:left}.text-button:hover{text-decoration:underline}#chord-form{display:flex;border-bottom:1px solid var(--line);margin-top:10px}#chord-form input{width:100%;min-width:0;background:none;border:0;color:#d8e7e1;padding:11px 0;font-size:10px}#chord-form button{min-width:35px}.view-controls{position:absolute;left:34px;bottom:223px;display:flex;gap:10px;align-items:center;z-index:4}.view-controls button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font-size:20px}.view-controls span{font-size:10px;color:#9bb2b0;min-width:100px;text-align:center}.music-dock{position:absolute;z-index:4;bottom:20px;left:34px;right:34px;padding:16px 22px 12px;background:linear-gradient(110deg,#08171edb,#07161bde);border:1px solid var(--line);border-radius:9px;box-shadow:0 20px 80px #0005;max-height:184px}.history-head{display:flex;align-items:center;gap:12px;font-size:10px;color:#a3b8b4}.history-nav{display:flex;gap:4px}.history-nav button{height:30px;min-width:34px;font-size:16px;border:1px solid var(--line);border-radius:3px}#branches{background:#0b1d22;border:1px solid var(--line);font-size:10px;border-radius:3px;padding:6px;max-width:180px}#step-count{margin-left:auto}.history{display:flex;align-items:center;gap:15px;overflow-x:auto;padding:15px 0;min-height:54px;scrollbar-width:thin}.history button{font-size:14px;white-space:nowrap;padding:4px 10px;color:#8ea6a5;position:relative;min-height:30px}.history button:not(:last-child):after{content:"·";position:absolute;right:-12px;color:#41605f}.history button.active{color:#cffce5;border-bottom:1px solid #96d8ba}.history button.sounding{background:#82c7a526;border-radius:3px}.playback{border-top:1px solid var(--line);display:flex;align-items:center;gap:15px;padding-top:10px;height:47px}.playback button{font-size:12px;min-width:30px;min-height:30px}.play-button{border:1px solid #8ec6b6!important;border-radius:50%;width:32px;height:32px;color:#c8ecdf}.tempo{display:flex;align-items:center;gap:5px;font-size:9px;color:#8aa5a0}.tempo input{width:38px;color:#c0d6d0;background:none;border:0;font-size:12px;padding:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}#loop{font-size:15px;color:#849e98}#loop span{font-size:10px;margin-left:4px}#loop[aria-pressed=true]{color:#c0ffdc}.volume{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:9px;color:#8aa5a0}.volume input{width:80px;accent-color:#9bdbc2;height:3px}.audio-status{font-size:9px;color:#6d8c89;width:120px;text-align:right}.sheet{position:absolute;z-index:10;right:24px;top:90px;bottom:225px;width:360px;padding:26px;overflow-y:auto;border:1px solid #699a8840;border-radius:9px;background:#07171ff5;box-shadow:0 20px 70px #0007;scrollbar-width:thin}.sheet-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.sheet-heading h2{font-size:18px;font-weight:500;margin:10px 0}.sheet-heading button{font-size:25px;width:40px;height:40px}.sheet-intro,.sheet p,.sheet li{font-size:11px;line-height:1.9;color:#9db4ae}.sheet ol{padding-left:18px}.sheet li{padding:8px 0}.interpretation{border-left:2px solid var(--accent);padding:14px 0 13px 15px;margin:15px 0;background:linear-gradient(90deg,#9fd3b407,transparent)}.interpretation h3{font-size:13px;font-weight:500;margin:7px 0;color:var(--accent)}.interpretation p{margin:0}.interpretation.folded{opacity:.55;border-left-style:dashed}.status{font-size:9px;color:var(--accent)}.pack-section{border-top:1px solid var(--line);padding-top:15px;margin-top:24px}.pack-section h3{font-size:13px}.pack-section label,.pack-section small{display:block;font-size:10px;color:#9ab3ac;line-height:1.8;margin:12px 0}.pack-section select{width:100%;background:#0b2224;border:1px solid var(--line);border-radius:3px;padding:10px;font-size:11px}.candidate-row{display:grid;grid-template-columns:65px 1fr 20px;gap:10px;align-items:center;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:16px 0}.candidate-row strong{color:var(--accent);font-size:18px;font-weight:500}.candidate-row span{font-size:10px;line-height:1.6;color:#91aaa3}.candidate-row small{color:#98c0ae}.import-button{display:block;border:1px solid var(--line);border-radius:4px;padding:13px;font-size:11px;margin-top:10px;cursor:pointer}.import-button input{display:none}#notice{position:absolute;z-index:15;left:50%;bottom:219px;transform:translate(-50%);font-size:11px;line-height:1.8;padding:12px 20px;background:#102a2af0;border:1px solid #719e8644;border-radius:6px;max-width:85%;opacity:0;pointer-events:none;transition:opacity .2s}#notice.visible{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.busy .primary{opacity:.5;pointer-events:none}@media(min-width:1500px){#universe{right:350px}.inspector{right:60px;width:270px}.topbar{padding:32px 45px}.music-dock{left:45px;right:45px}.invitation{left:7%}}@media(max-width:800px){#app{min-height:600px}.topbar{padding:16px 20px}.brand{font-size:15px}.brand-mark{font-size:27px}.brand small{font-size:8px}.top-actions{gap:3px}.top-actions button{font-size:10px}#universe{top:90px;right:8px;bottom:333px;left:8px}.invitation{top:14%;left:24px;max-width:270px}.invitation h1{font-size:23px;margin:10px 0}.invitation p{font-size:10px;display:none}.inspector{top:auto;bottom:157px;left:20px;right:20px;width:auto;padding:13px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;border-top:1px solid #b3d4c326}.inspector .eyebrow{grid-column:1;font-size:8px}.inspector h2{grid-column:1;font-size:26px;margin:8px 0}.inspector p{grid-column:1;font-size:9px;margin:0;line-height:1.6;max-height:44px;overflow:auto}.selection-actions{grid-column:2;grid-row:1/4;align-self:center;gap:6px}.primary,.secondary{font-size:10px;min-height:38px;padding:9px 12px}#chord-form{grid-column:1/3;margin-top:8px;min-height:35px}#chord-form input{font-size:9px;padding:8px 0}#candidate-toggle{position:absolute;right:0;top:-32px;padding:8px 0;font-size:9px}#replace{grid-column:1/3;padding:7px 0;font-size:9px}.view-controls{left:20px;bottom:355px;gap:5px}.view-controls button{width:28px;height:28px;font-size:17px}.view-controls span{font-size:8px;min-width:92px}.music-dock{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));padding:9px 12px 8px;max-height:143px}.history-head{font-size:8px;gap:8px}.history-nav button{height:24px;min-width:27px;font-size:13px}#branches{max-width:115px;font-size:8px;padding:4px}.history{padding:7px 0;min-height:40px;gap:9px}.history button{font-size:12px;padding:3px 7px;min-height:26px}.history button:not(:last-child):after{right:-8px}.playback{padding-top:6px;height:37px;gap:10px}.playback button{min-height:27px;min-width:24px;font-size:11px}.play-button{width:27px;height:27px}.tempo input{width:32px;font-size:10px}.tempo{font-size:8px}#loop span{display:none}.volume{gap:7px;font-size:8px}.volume input{width:60px}.audio-status{display:none}.sheet{top:75px;bottom:158px;left:12px;right:12px;width:auto;padding:20px}.star-label{min-width:65px;transform:translate(-50%,12px)}.star-label strong{font-size:16px}.star-label small{font-size:8px;margin-top:4px}#notice{bottom:310px;font-size:10px;width:max-content;max-width:90%}}@media(max-width:380px){.volume{display:none}.inspector{column-gap:10px}.inspector h2{font-size:22px}.brand small{letter-spacing:.2em}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.inspector{top:clamp(130px,22vh,200px);bottom:220px;overflow-y:auto;scrollbar-width:thin}.inspector h2{font-size:26px}.inspector.has-selection h2{font-size:36px}@media(max-width:800px){.inspector{top:auto;bottom:157px;overflow-y:visible}.inspector h2,.inspector.has-selection h2{font-size:26px}#context-preview{grid-column:1/3;padding:7px 0;font-size:9px}.has-path #universe{bottom:390px}.has-path .view-controls{bottom:410px}}@media(max-width:800px){.inspector:not(.has-selection) h2{font-size:20px;line-height:1.45}.star-label small{display:none}.star-label{min-height:44px}.has-path .view-controls{bottom:375px}}