:root{--black:#000;--night:#0b0b0d;--glass:#16161adb;--deck:#1c1c20;--line:#ffffff1a;--ink:#f5f5f7;--mute:#86868b;--amber:#f2b45a;--rose:#ff7a59;--amber-ink:#1b1206;--paper:#fbfaf7;--sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", sans-serif;--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--ease:cubic-bezier(.22, 1, .36, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--black);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}[hidden]{display:none!important}button{font:inherit;color:inherit}button:focus-visible,label:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.brand{letter-spacing:-.02em;font-size:1.05rem;font-weight:700}.lang{background:#ffffff0f;border-radius:99px;padding:3px;display:flex}.lang-btn{color:var(--mute);letter-spacing:.06em;cursor:pointer;background:0 0;border:0;border-radius:99px;padding:3px 10px;font-size:.72rem;font-weight:600;transition:color .2s,background .2s}.lang-btn[aria-pressed=true]{color:var(--ink);background:#ffffff24}.lobby{background:var(--black);display:block}.hero{background:radial-gradient(ellipse 70% 45% at 50% 105%, #f2b45a29, transparent 70%), radial-gradient(ellipse 50% 35% at 50% -10%, #ff7a5914, transparent 70%), var(--black);flex-direction:column;min-height:100svh;display:flex;position:relative;overflow:hidden}.strings{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.lobby-nav{width:100%;max-width:1080px;padding:18px max(20px, env(safe-area-inset-left,0px));justify-content:space-between;align-items:center;margin:0 auto;display:flex;position:relative}.lobby-inner{padding:40px max(20px, env(safe-area-inset-left,0px)) 72px;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;display:flex;position:relative}.lobby-inner>*{animation:rise 1s var(--ease) both}.lobby-inner>:nth-child(2){animation-delay:80ms}.lobby-inner>:nth-child(3){animation-delay:.16s}.lobby-inner>:nth-child(4){animation-delay:.26s}.lobby-inner>:nth-child(5){animation-delay:.34s}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}.eyebrow{color:var(--amber);letter-spacing:-.01em;margin:0;font-size:1.05rem;font-weight:600}.lobby h1{letter-spacing:-.045em;text-wrap:balance;margin:0;font-size:clamp(2.6rem,7.5vw,5.6rem);font-weight:800;line-height:1.04}.glow{background:linear-gradient(100deg, #ffd9a0 0%, var(--amber) 40%, var(--rose) 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.lead{max-width:34em;color:var(--mute);letter-spacing:-.01em;margin:4px 0 0;font-size:clamp(1.02rem,1.6vw,1.25rem);line-height:1.55}.dock{flex-direction:column;align-items:center;gap:18px;width:min(520px,100%);margin-top:28px;display:flex}.drop{border:1px solid var(--line);-webkit-backdrop-filter:blur(20px)saturate(1.4);cursor:pointer;width:100%;transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);background:#ffffff09;border-radius:22px;flex-direction:column;align-items:center;gap:6px;padding:34px 24px;display:flex}.drop:hover,.dragging .drop{background:#f2b45a0f;border-color:#f2b45a8c;transform:translateY(-2px)}.drop-icon{width:28px;height:28px;color:var(--amber);margin-bottom:6px}.drop-title{letter-spacing:-.01em;font-size:1.05rem;font-weight:600}.drop-sub{color:var(--mute);font-size:.82rem}.picked{-webkit-backdrop-filter:blur(20px);text-align:left;width:100%;animation:rise .6s var(--ease) both;background:#ffffff0d;border:1px solid #f2b45a66;border-radius:18px;align-items:center;gap:14px;padding:14px 18px;display:flex}.picked-kind{background:linear-gradient(140deg, var(--amber), var(--rose));width:46px;height:46px;color:var(--amber-ink);font-family:var(--mono);border-radius:12px;flex:none;place-items:center;font-size:.72rem;font-weight:600;display:grid}.picked-body{flex:1;min-width:0}.picked-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.picked-meta{color:var(--mute);font-size:.82rem}.link{color:var(--amber);cursor:pointer;white-space:nowrap;font-size:.9rem}.link:hover{text-decoration:underline}.btn-enter{background:var(--ink);color:var(--black);letter-spacing:-.01em;cursor:pointer;transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;border:0;border-radius:99px;align-items:center;gap:6px;padding:14px 28px 14px 32px;font-size:1.05rem;font-weight:600;display:inline-flex}.btn-enter svg{width:18px;height:18px;transition:transform .3s var(--ease)}.btn-enter:not(:disabled):hover{transform:scale(1.03);box-shadow:0 0 0 6px #f2b45a2e,0 12px 40px #f2b45a40}.btn-enter:not(:disabled):hover svg{transform:translate(3px)}.btn-enter:disabled{opacity:.22;cursor:not-allowed}.note{color:#86868bcc;margin:4px 0 0;font-size:.8rem}.room{background:var(--night);height:100%;animation:fade .5s var(--ease) both;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);display:grid}@keyframes fade{0%{opacity:0}}.topbar{padding:10px max(16px, env(safe-area-inset-left,0px));padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(24px)saturate(1.6);z-index:5;align-items:center;gap:14px;display:flex}.song{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--mute);flex:1;overflow:hidden}.song strong{color:var(--ink);letter-spacing:-.01em;font-weight:600}.seg{background:#ffffff0f;border-radius:10px;padding:3px;display:flex}.seg-btn{color:var(--mute);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:5px 12px;font-size:.85rem;transition:background .2s,color .2s}.seg-btn[aria-pressed=true]{color:var(--ink);background:#ffffff24}.tone{align-items:center;gap:8px;display:flex}.tone select{appearance:none;color:var(--ink);font:inherit;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center/14px no-repeat,#ffffff0f;border:0;border-radius:10px;padding:6px 28px 6px 12px;font-size:.85rem}.tone select:disabled{opacity:.4;cursor:not-allowed}.sound-badge{color:var(--mute);white-space:nowrap;align-items:center;gap:6px;font-size:.78rem;display:inline-flex}.sound-badge:before{content:"";background:var(--mute);border-radius:50%;width:6px;height:6px}.sound-badge[data-state=loading]:before,.sound-badge[data-state=ready]:before{animation:1.2s ease-in-out infinite pulse}.sound-badge[data-state=applied]{color:var(--amber)}.sound-badge[data-state=applied]:before{background:var(--amber);box-shadow:0 0 8px var(--amber)}@keyframes pulse{50%{opacity:.25}}.zoom{font-family:var(--mono);color:var(--mute);font-variant-numeric:tabular-nums;align-items:center;gap:2px;font-size:.8rem;display:flex}.zoom span{text-align:center;min-width:42px}.room-body{min-height:0;display:flex;position:relative}.tracks{border-right:1px solid var(--line);flex:none;width:200px;padding:12px;overflow-y:auto}.track{border-radius:10px;align-items:center;gap:4px;padding:4px;display:flex}.track.active{background:#ffffff12}.track-name{text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:0 0;border:0;flex:1;min-width:0;padding:6px 8px;overflow:hidden}.mini{border:1px solid var(--line);width:26px;height:26px;color:var(--mute);cursor:pointer;background:0 0;border-radius:7px;font-size:.72rem;font-weight:700}.mini[aria-pressed=true]{border-color:var(--amber);background:var(--amber);color:var(--amber-ink)}.stage{min-width:0;padding:28px max(16px, env(safe-area-inset-left,0px)) 140px;flex:1;overflow:auto}.paper{background:var(--paper);border-radius:14px;max-width:1040px;margin:0 auto;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a}.at-cursor-bar{background:#f2b45a29}.at-cursor-beat{background:var(--amber);border-radius:2px;width:3px}.at-selection div{background:#0a84ff29}.at-highlight *{fill:#d9480f;stroke:#d9480f}.transport{left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);background:var(--deck);z-index:1001;border-radius:22px;flex-wrap:wrap;align-items:center;gap:10px 22px;width:min(1040px,100% - 32px);padding:10px 14px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 20px 60px #00000080,inset 0 -1px #ffffff0f}.group{flex:none;align-items:center;gap:8px;display:flex}.group.grow{flex:220px}.icon-btn{cursor:pointer;width:38px;height:38px;transition:transform .2s var(--ease), background .2s;background:#ffffff14;border:0;border-radius:50%;place-items:center;display:grid}.icon-btn:not(:disabled):hover{background:#ffffff24}.icon-btn:not(:disabled):active{transform:scale(.94)}.icon-btn.ghost{background:0 0}.icon-btn.small{width:28px;height:28px;font-size:1rem}.icon-btn svg{fill:currentColor;width:18px;height:18px}.icon-btn.play{background:var(--ink);width:48px;height:48px;color:var(--black)}.icon-btn.play:not(:disabled):hover{background:#fff;box-shadow:0 0 0 5px #f2b45a33}.icon-btn.play svg{width:22px;height:22px}.icon-btn .i-pause,.icon-btn.playing .i-play{display:none}.icon-btn.playing .i-pause{display:block}button:disabled{opacity:.35;cursor:not-allowed}.time{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--mute);min-width:92px;font-size:.85rem}.time #time-cur{color:var(--ink)}.time .sep{margin:0 4px}.field{flex:1;align-items:center;gap:10px;display:flex}.label{color:var(--mute);font-size:.8rem}.field input[type=range]{min-width:80px;accent-color:var(--amber);flex:1}.value,.bpm{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:46px;font-size:.85rem}.bpm{color:var(--mute);min-width:68px}.toggle{color:var(--mute);cursor:pointer;background:#ffffff12;border:0;border-radius:99px;padding:7px 13px;font-size:.84rem;transition:background .2s,color .2s}.toggle:not(:disabled):hover{color:var(--ink)}.toggle[aria-pressed=true]{color:var(--amber);background:#f2b45a2e}.range-chip{color:#64b5ff;font-variant-numeric:tabular-nums;white-space:nowrap;background:#0a84ff2e;border-radius:99px;align-items:center;gap:4px;padding:4px 4px 4px 12px;font-size:.84rem;display:inline-flex}.range-clear{width:22px;height:22px;color:inherit;cursor:pointer;background:#ffffff14;border:0;border-radius:50%;place-items:center;display:grid}.toast{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(24px);z-index:20;border-radius:99px;max-width:calc(100% - 32px);padding:10px 18px;font-size:.9rem;position:fixed;top:76px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0006}@media (width<=1100px){.zoom,.tone .label{display:none}}@media (width<=720px){.tracks,.zoom,.sound-badge,.tone .label,.topbar .lang{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.seg-btn:disabled{opacity:.35;cursor:not-allowed}.group.toggles{flex-wrap:wrap}.loop-count{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:99px;padding:4px 10px;font-size:.8rem}.settings-btn svg{fill:none;width:17px;height:17px}.settings-btn[aria-expanded=true]{color:var(--amber);background:#f2b45a2e}.fretboard{flex:100%;order:-1;padding:2px 2px 6px}.fb-svg{width:100%;height:auto;max-height:130px;display:block}.fb-wood{fill:#2a1d14}.fb-fret{stroke:#b9b3a8;stroke-width:1.4px}.fb-nut{stroke:#efe6d4;stroke-width:4px}.fb-inlay{fill:#ffffff29}.fb-string{stroke:#d9cdb6;opacity:.85}.fb-num,.fb-open{fill:var(--mute);font-family:var(--mono);text-anchor:middle;font-size:9px}.fb-open{fill:var(--ink);font-size:11px}.fb-note{fill:var(--amber);stroke:#fff6e6;stroke-width:1.5px;filter:drop-shadow(0 0 6px #f2b45acc)}.fb-note-num{fill:var(--amber-ink);font-family:var(--mono);text-anchor:middle;font-size:10px;font-weight:700}.settings{border:1px solid var(--line);background:var(--deck);border-radius:18px;flex-direction:column;gap:16px;width:min(360px,100vw - 32px);max-height:min(70vh,560px);padding:18px;display:flex;position:absolute;bottom:calc(100% + 10px);right:12px;overflow-y:auto;box-shadow:0 20px 60px #0009}.settings section{flex-direction:column;gap:8px;display:flex}.settings section.row{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}.settings h3{margin:0;font-size:.9rem;font-weight:600}.settings .hint{color:var(--mute);margin:2px 0 0;font-size:.78rem;line-height:1.45}.trainer-row{gap:10px;display:flex}.trainer-row label{color:var(--mute);flex-direction:column;gap:4px;font-size:.75rem;display:flex}.trainer-row input{border:1px solid var(--line);width:64px;color:var(--ink);font:inherit;font-family:var(--mono);background:#ffffff0d;border-radius:8px;padding:6px 8px;font-size:.9rem}.settings input[type=range]{width:140px;accent-color:var(--amber)}.stepper{font-family:var(--mono);align-items:center;gap:6px;display:flex}.stepper span{text-align:center;min-width:28px}.keys{grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.82rem;display:grid}.keys dt{font-family:var(--mono);color:var(--amber)}.keys dd{color:var(--mute);margin:0}.trainer-row .pct{color:var(--mute);font-family:var(--mono);align-items:center;gap:4px;display:flex}.settings section.row>.toggle,.settings section.row>.stepper,.settings section.row>input{white-space:nowrap;flex:none}.settings .row-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.seg.small{align-self:flex-start}.seg.small .seg-btn{padding:4px 12px;font-size:.8rem}.picked.bad{border-color:#ff7a5999}.picked.bad .picked-meta{color:var(--rose)}.picked.bad .picked-kind{color:var(--mute);background:#ffffff1f}.features,.faq{max-width:1080px;padding:120px max(20px, env(safe-area-inset-left,0px)) 40px;margin:0 auto}.features h2,.faq h2{letter-spacing:-.04em;text-wrap:balance;margin:0;font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.1}.features-lead{color:var(--mute);margin:16px 0 0;font-size:1.15rem}.feat-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px;margin-top:56px;display:grid}.feat{border:1px solid var(--line);background:linear-gradient(160deg,#ffffff0b,#ffffff04);border-radius:22px;padding:28px}.feat-icon{width:44px;height:44px;color:var(--amber);background:#f2b45a1f;border-radius:12px;place-items:center;margin-bottom:18px;display:grid}.feat-icon svg{width:24px;height:24px}.feat h3{letter-spacing:-.02em;margin:0 0 8px;font-size:1.2rem;font-weight:700}.feat p{color:var(--mute);margin:0;line-height:1.6}.faq{max-width:820px;padding-top:80px}.faq h2{margin-bottom:28px;font-size:clamp(1.6rem,4vw,2.4rem)}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;justify-content:space-between;gap:16px;padding:20px 0;font-size:1.08rem;font-weight:600;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--amber);transition:transform .2s var(--ease);font-weight:400}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-item p{color:var(--mute);margin:0 0 22px;line-height:1.7}.site-footer{max-width:1080px;padding:28px max(20px, env(safe-area-inset-left,0px)) calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--mute);flex-wrap:wrap;justify-content:space-between;gap:16px;margin:80px auto 0;font-size:.85rem;display:flex}