:root{--primary:#533080;--accent:#e4c9ff;--bg:#f8f5fc;--line:#e8dff0;--muted:#786b87}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#38284b;font-family:"Malgun Gothic",system-ui,sans-serif;font-size:15px}aside{position:fixed;inset:0 auto 0 0;width:248px;background:#fff;border-right:1px solid var(--line);padding:35px 22px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;font-size:30px;text-decoration:none;color:var(--primary)}.brand span{font-size:18px;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:1.8px;margin-top:7px;color:var(--muted)}.nav-label{font-size:10px;letter-spacing:2px;color:#998da6;margin:55px 12px 14px}nav a{display:flex;gap:14px;text-decoration:none;color:#786b87;padding:15px 12px;margin:4px 0;border-radius:10px}nav a.active{background:#f0e7f8;color:var(--primary);font-weight:700}.aside-note{margin-top:auto;padding:20px 12px;line-height:1.9;color:var(--muted);font-size:13px}main{margin-left:248px;padding:0 5%;max-width:1540px}header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1.5px;color:var(--muted)}.page{padding:44px 0 30px;min-height:calc(100vh - 160px)}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#8c67a6;font-weight:700}h1{font-size:clamp(28px,3vw,39px);letter-spacing:-1.8px;margin:14px 0}h2{letter-spacing:-1px}.intro{color:var(--muted);line-height:1.7;margin-bottom:32px}.hero{background:var(--primary);color:#fff;border-radius:18px;padding:34px 38px;display:flex;justify-content:space-between;position:relative;overflow:hidden}.pill{display:inline-block;font-size:10px;letter-spacing:.8px;background:#ffffff16;padding:8px 12px;border-radius:20px}.hero h2{font-size:31px;line-height:1.45;margin:23px 0 12px}.hero p{font-size:12px;color:#e1d0ed}.hero-art{width:24%;min-width:100px;position:relative;align-self:stretch}.hero-art span{position:absolute;top:15%;left:10%;font-size:150px;color:var(--accent);transform:rotate(-12deg)}.strings{position:absolute;inset:-50px 10px -100px 20px;background:repeating-linear-gradient(90deg,transparent 0 20px,#e1b7ff3b 21px 22px);transform:rotate(20deg)}button,.file-button{background:var(--primary);color:#fff;border:0;border-radius:8px;padding:13px 18px;font:inherit;font-size:13px;cursor:pointer;display:inline-block}button:hover,.file-button:hover{filter:brightness(1.14)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b88bdf;outline-offset:3px}.hero button{background:var(--accent);color:var(--primary)}button.ghost{background:#ffffff16;color:#fff}.session{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:25px 0}.session strong{font-size:28px;font-variant-numeric:tabular-nums;margin-right:10px}.quiet{font-size:11px;color:#e7d7f2;display:block;max-width:440px}.quiet input{background:#ffffff0d;border:1px solid #ffffff35;color:#fff;width:100%;margin-top:8px}.quiet input::placeholder{color:#d6bfe7}.section-title{display:flex;justify-content:space-between;align-items:center;margin:27px 0 10px}.section-title h2{font-size:20px}.section-title span{font-size:11px;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool{border:1px solid var(--line);background:#fff;padding:24px;border-radius:12px;color:inherit;text-decoration:none;transition:transform .15s}.tool:hover{transform:translateY(-3px)}.tool b{font-size:9px;letter-spacing:1.5px;color:#9576ac}.tool h3{font-size:19px;margin:20px 0 10px}.tool p{color:var(--muted);font-size:12px}.tool>span{display:block;margin-top:27px;font-size:12px}.summary{display:flex;justify-content:space-between;gap:20px;margin-top:24px;padding:24px;background:#efe6f7;border-radius:12px}.summary>span{font-size:11px;color:var(--muted)}.summary strong{display:block;margin-top:9px;color:var(--primary);font-size:19px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}.center{text-align:center}.muted,.hint{color:var(--muted);font-size:12px;line-height:1.8}.hint{margin-top:25px}label{display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--muted)}input,select{font:inherit;color:var(--primary);border:1px solid var(--line);border-radius:7px;padding:11px;background:#fcf9ff;max-width:100%;min-width:0}input[type=range]{accent-color:var(--primary);padding:0;cursor:pointer}.tempo{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px auto 0}.tempo input{font-size:80px;width:205px;text-align:center;border:0;background:none;font-weight:700;appearance:textfield}.tempo input::-webkit-inner-spin-button{appearance:none}.light,.file-button{background:#f0e7f8;color:var(--primary)}#bpmRange{display:block;width:75%;margin:30px auto}.controls{display:flex;align-items:end;gap:20px;flex-wrap:wrap;justify-content:flex-start}.center .controls{justify-content:center}.grow{flex:1;min-width:150px}.beat-lights{display:flex;gap:15px;justify-content:center;margin:35px 0}.beat-lights i{width:18px;height:18px;border-radius:50%;background:#ebe1f3}.beat-lights i.on{background:#9960c7;box-shadow:0 0 0 5px #f2e8fb}.beat-lights i:first-child.on{background:var(--primary)}.note{display:block;font-size:85px;margin:25px 0 5px}.meter{display:flex;justify-content:space-between;position:relative;border-bottom:6px solid #e8d5f5;margin:40px auto 20px;padding-bottom:12px;max-width:550px;font-size:12px;color:var(--muted)}.meter i{position:absolute;left:50%;bottom:-10px;background:var(--primary);width:4px;height:34px;transition:left .12s}.reference-notes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin-top:30px}.reference-notes>span{font-size:12px;margin-right:10px}.scroll{overflow-x:auto;padding:20px 0}.board{display:grid;grid-template-columns:40px repeat(18,minmax(42px,1fr));min-width:1040px;gap:0}.board .fret-label{height:30px;text-align:center;font-size:11px;color:var(--muted)}.board .string-label{align-self:center;font-size:11px}.board .cell{height:53px;border-right:2px solid #bdabcd;background:linear-gradient(transparent 48%,#b5a9c0 49%,#b5a9c0 52%,transparent 53%);display:flex;align-items:center;justify-content:center}.board .cell:nth-child(19n+2){border-right:4px solid #9d8ba9}.board button{border-radius:50%;width:33px;height:33px;padding:0;background:#eee2f7;color:var(--primary);font-size:10px}.board button.root{background:var(--primary);color:#fff}.chord-buttons{display:flex;gap:8px;flex-wrap:wrap}.chord-buttons button.selected{background:var(--primary);color:#fff}.chord-detail{display:flex;align-items:center;gap:60px;flex-wrap:wrap;margin-top:20px}.chord-detail h2{text-align:center;font-size:32px}.chord-detail svg{width:225px;height:255px}.capo-result{text-align:center;margin:40px}.capo-result span{display:block;color:var(--muted)}.capo-result strong{display:block;font-size:90px;line-height:1.5}.journal-actions{display:flex;gap:10px;margin-top:24px;align-items:center;flex-wrap:wrap}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.record{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding:19px 0;font-size:13px}.record .record-body{flex:1;overflow-wrap:anywhere}.record small{display:block;color:var(--muted);margin-top:6px;white-space:pre-wrap}.record button{padding:8px 12px;background:#f5eee7;color:#825d44}footer{padding:25px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.global-status{position:fixed;bottom:20px;right:20px;max-width:350px;background:#fff4de;color:#764b16;border-radius:8px;padding:0}.global-status:not(:empty){padding:15px}[hidden]{display:none!important}@media(max-width:1000px){aside{width:205px;padding:25px 14px}main{margin-left:205px;padding:0 4%}.hero{padding:25px}.hero-art{display:none}.tool{padding:18px}.section-title span{display:none}.hero h2{font-size:27px}}@media(max-width:700px){aside{position:static;width:100%;padding:18px;display:block;border-bottom:1px solid var(--line)}.brand{font-size:23px}.brand span{font-size:16px}.brand small,.nav-label,.aside-note{display:none}nav{display:flex;overflow-x:auto;gap:5px;margin-top:17px}nav a{white-space:nowrap;padding:10px;font-size:12px}nav a>span{display:inline}main{margin:0;padding:0 20px}header{height:56px;font-size:9px;letter-spacing:.4px}.page{padding-top:28px}.hero{padding:25px 22px}.hero h2{font-size:27px}.hero .session{gap:8px}.session button{padding:11px;font-size:11px}.tool-grid{grid-template-columns:1fr}.tool{padding:20px}.tool h3{margin:12px 0}.tool>span{margin-top:14px}.summary{gap:14px;padding:18px}.summary strong{font-size:15px}.panel{padding:22px 16px}.tempo{gap:8px}.tempo input{font-size:64px;width:155px}.controls{gap:15px}.chord-detail{gap:15px}.record{gap:10px}footer span{display:none}}

header{gap:12px;flex-wrap:wrap;height:auto;min-height:90px;padding:14px 0}header form{margin:0}#saveStatus{letter-spacing:0;font-size:11px}.position-controls{margin-top:24px}.quiz-score{display:flex;gap:25px;align-items:center;background:#f0e7f8;border-radius:10px;padding:22px;margin:28px 0}.quiz-score strong{font-size:30px}.quiz-controls{display:flex;gap:10px;flex-wrap:wrap}.quiz-answers{margin:24px 0}.quiz-answers button.correct{background:#533080;color:white}.quiz-answers button.incorrect{background:#9c3857;color:white}.quiz-result{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.auth-page{margin:0 auto;max-width:600px;padding:50px 20px}.auth-page form{display:grid;gap:20px}.auth-page .error{color:#9c3857}.auth-page h1{font-size:30px}.auth-page .panel{margin-top:25px}#globalStatus{z-index:10}.board .fret-label:nth-child(13){font-weight:bold}button[aria-busy=true]{opacity:.65}

.auth-notice{background:#f0e7f8;color:#533080;border-left:4px solid #9960c7;padding:16px;line-height:1.8;overflow-wrap:anywhere}.auth-links{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;display:flex;gap:10px;flex-wrap:wrap;font-size:13px;line-height:1.8}.auth-links a{color:var(--primary);font-weight:700}.auth-links small{width:100%;color:var(--muted)}

.positions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.position-card{border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;background:#fcf9ff}.position-card h3{font-size:14px;margin:0 0 10px}.position-card svg{width:100%;max-width:230px;display:block;margin:0 auto}.position-card .hint{margin:8px 0 15px}.monitor-panel{margin-top:25px}.monitor-panel .intro{font-size:13px}.monitor-panel .quiz-controls{margin-top:24px}.timing-feedback{display:flex;align-items:center;justify-content:center;gap:25px;background:#f0e7f8;border-radius:12px;padding:28px;margin:24px 0}.timing-feedback strong{font-size:23px}.timing-feedback span{font-variant-numeric:tabular-nums;font-size:22px}.timing-stats{text-align:center;line-height:1.9;font-size:14px}#autoStatus{max-width:440px;line-height:1.8}.position-card button{width:100%}.center #tuningTarget{margin:18px 0}.monitor-panel input[type=number]{width:130px}@media(min-width:1500px){.positions-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.positions-grid{grid-template-columns:1fr}.timing-feedback{gap:15px;padding:20px}.timing-feedback strong{font-size:20px}}

nav a{padding-top:12px;padding-bottom:12px}.loop-state{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.loop-state strong{font-size:21px}.loop-state span{font-variant-numeric:tabular-nums;color:var(--muted)}#loopWave{display:block;width:100%;height:165px;border-radius:12px;border:1px solid var(--line);margin-bottom:25px}.loop-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.check-label{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:45px}.check-label input{accent-color:var(--primary);width:17px;height:17px}.loop-layers-panel{margin-top:24px}.loop-layers-panel .section-title{margin-top:0}.loop-layer{display:flex;gap:15px;align-items:center;padding:20px 0;border-top:1px solid var(--line);flex-wrap:wrap}.loop-layer>strong{font-size:13px}.loop-layer label{flex:1;min-width:130px}.loop-layer>span{font-size:12px;min-width:38px}.loop-layer input[type=range]{width:100%}.loop-layer button{padding:10px 13px}#loopClear{margin-top:20px}.scale-summary{background:#f0e7f8;border-radius:9px;padding:18px;font-size:14px;line-height:1.8}.harmony-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;margin:24px 0 15px}.harmony-legend span{padding:6px 12px;border-radius:15px;background:#f0e7f8}.harmony-legend span:nth-child(2){background:#e7eef9;color:#405b8c}.harmony-legend span:nth-child(3){background:#f7e7ee;color:#8e4268}.harmony-legend span:nth-child(4){background:#faf0dc;color:#8b6129}.harmony-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px;margin-bottom:28px}.harmony-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f0e7f8;color:#533080;border:2px solid transparent;padding:22px 10px;min-height:185px}.harmony-card span{font-size:13px}.harmony-card strong{font-size:25px;overflow-wrap:anywhere}.harmony-card small{font-size:11px;line-height:1.5}.harmony-card.minor{background:#e7eef9;color:#405b8c}.harmony-card.dim{background:#f7e7ee;color:#8e4268}.harmony-card.aug{background:#faf0dc;color:#8b6129}.harmony-card.playing{border-color:#9b65bf;box-shadow:0 0 0 3px #e6d4f4}.theory-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);line-height:1.9;font-size:13px;color:var(--muted)}.theory-note summary{cursor:pointer;font-weight:bold;color:var(--primary)}#looper input[type=number]{width:140px}@media(max-width:600px){.harmony-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-state strong{font-size:18px}.loop-buttons button{flex:1;white-space:nowrap}#loopWave{height:125px}.loop-layers-panel .section-title{align-items:start;gap:12px;flex-direction:column}}