:root{--ink:#ffffffeb;--ink-soft:#fff9;--glass:#1214188c;--line:#ffffff24;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif KR", "Nanum Myeongjo", serif;--sans:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif}html,body{overscroll-behavior:none;height:100%;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;word-break:keep-all;background:#000;margin:0;overflow:hidden}#view{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#veil{pointer-events:none;z-index:5;background:#000;transition:opacity 3.2s;position:fixed;inset:0}#veil.gone{opacity:0}.ui{pointer-events:none;z-index:10;position:fixed;inset:0}.ui>*{pointer-events:auto}.title{cursor:pointer;-webkit-user-select:none;user-select:none;background:radial-gradient(#0000 30%,#00000059 100%);flex-direction:column;justify-content:center;align-items:center;transition:opacity 2.4s;display:flex;position:fixed;inset:0}.title.gone{opacity:0;pointer-events:none}.title h1{font-family:var(--serif);letter-spacing:.08em;text-shadow:0 1px 24px #00000059;opacity:0;margin:0;font-size:clamp(30px,5.2vw,64px);font-weight:400;animation:3.4s .6s forwards rise}.title .begin{letter-spacing:.24em;color:var(--ink-soft);opacity:0;margin:2.2em 0 0;font-size:13px;animation:2.4s 2.4s forwards rise,4s ease-in-out 4.8s infinite breathe}.title .hp{bottom:max(28px, env(safe-area-inset-bottom));letter-spacing:.12em;color:#fff6;opacity:0;margin:0;font-size:11px;animation:2s 3.2s forwards rise;position:absolute}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.45}}.hint{left:50%;bottom:max(26px, calc(env(safe-area-inset-bottom) + 12px));background:var(--glass);-webkit-backdrop-filter:blur(14px);letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap;opacity:0;pointer-events:none;border-radius:999px;padding:9px 16px;font-size:12.5px;transition:opacity 1.6s;position:fixed;transform:translate(-50%)}.hint.on{opacity:1}@media (max-width:600px){.hint{white-space:normal;text-align:center;border-radius:16px;width:calc(100% - 48px)}}.menu-btn{top:max(16px, env(safe-area-inset-top));background:var(--glass);-webkit-backdrop-filter:blur(14px);cursor:pointer;opacity:0;border:0;border-radius:50%;justify-content:center;align-items:center;gap:3px;width:40px;height:40px;transition:opacity .8s;display:none;position:fixed;right:16px}.menu-btn.on{display:flex}.menu-btn span{background:var(--ink);border-radius:50%;width:3.5px;height:3.5px}.ui.awake .menu-btn,.menu-btn:focus-visible{opacity:1}@media (pointer:coarse){.menu-btn{opacity:.75}}.menu{z-index:20;opacity:0;pointer-events:none;background:#0000002e;justify-content:center;align-items:center;transition:opacity .35s;display:flex;position:fixed;inset:0}.menu.open{opacity:1;pointer-events:auto}.menu .panel{-webkit-backdrop-filter:blur(24px)saturate(1.2);border:1px solid var(--line);background:#16181cb8;border-radius:22px;width:min(420px,100% - 32px);max-height:calc(100% - 48px);padding:22px 22px 16px;transition:transform .35s;overflow-y:auto;transform:translateY(8px)scale(.985);box-shadow:0 20px 60px #00000059}.menu.open .panel{transform:none}.menu.drop .panel{border-color:#ffffff80}.menu section{border-bottom:1px solid var(--line);margin-bottom:12px;padding:6px 0 14px}.menu section:last-of-type{border-bottom:0}.menu h2{letter-spacing:.14em;color:var(--ink-soft);margin:0 0 10px;font-size:12px;font-weight:600}.menu .row{align-items:center;gap:12px;margin:8px 0;font-size:14px;display:flex}.menu .row span{width:3.2em;color:var(--ink)}.menu input[type=range]{accent-color:#f0f0f0;flex:1}.menu .seg{background:#ffffff14;border-radius:10px;gap:3px;padding:3px;display:flex}.menu .seg button{font:inherit;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;padding:8px 0;font-size:13px}.menu .seg button.on{color:#15171a;background:#ffffffeb}.menu .tracks{max-height:180px;margin:12px 0 6px;padding:0;list-style:none;overflow-y:auto}.menu .tracks li{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:7px 2px;font-size:13.5px;display:flex}.menu .tracks li.now .name:before{content:"♪ ";color:var(--ink)}.menu .tracks li.empty{color:var(--ink-soft);border:0}.menu .tracks .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.menu .tracks .remove{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;padding:0 6px;font-size:18px}.menu .buttons{gap:8px}.menu .file,.menu .ghost,.menu .close{border:1px solid var(--line);font:inherit;color:var(--ink);cursor:pointer;text-align:center;background:#ffffff0f;border-radius:10px;padding:9px 14px;font-size:13px}.menu .file{flex:1}.menu .note{color:var(--ink-soft);margin:8px 0 0;font-size:11.5px;line-height:1.5}.menu .keys p{color:var(--ink-soft);margin:0;font-size:12px;line-height:1.6}.menu .close{width:100%;margin-top:4px;display:block}.touch{display:none}.touch.on{display:block}.touch .stick{opacity:0;pointer-events:none;background:#0000001f;border:1px solid #ffffff40;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .2s;position:fixed}.touch .stick.on{opacity:1}.touch .knob{background:#ffffff80;border-radius:50%;width:46px;height:46px;margin:-23px;position:absolute;top:50%;left:50%}.touch .tbtn{font:inherit;color:var(--ink);background:var(--glass);-webkit-backdrop-filter:blur(14px);border:0;border-radius:999px;padding:10px 16px;font-size:13px;position:fixed;right:16px}.touch .tbtn.on{color:#15171a;background:#ffffffe0}.touch .cruise{bottom:calc(env(safe-area-inset-bottom) + 70px)}.touch .cam{bottom:calc(env(safe-area-inset-bottom) + 20px)}
