:root{--ink: #100b08;--ink-2: #191110;--panel: #1e1512;--panel-2: #281c17;--line: rgba(230, 140, 62, .18);--line-strong: rgba(230, 140, 62, .4);--ember: #ef8a3c;--ember-soft: #f7bb84;--ember-deep: #a4501a;--wood: #8a5a34;--text: #f2e6da;--text-dim: #a89386;--danger: #d9534b;--ok: #6fbf73;--radius: 12px;font-family:Helvetica Neue,Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--ink);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{height:100%}.guitar-app{display:flex;flex-direction:column;height:100dvh;min-height:100%;background:radial-gradient(120% 80% at 12% -10%,rgba(239,138,60,.16),transparent 58%),radial-gradient(90% 70% at 100% 0%,rgba(140,60,20,.18),transparent 55%),var(--ink)}.topbar{display:flex;align-items:center;gap:.85rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#281c17f2,#100b08f2);backdrop-filter:blur(6px);flex:none}.brand{display:flex;align-items:center;gap:.6rem;min-width:0}.brand-mark{width:30px;height:30px;border-radius:9px;flex:none;position:relative;overflow:hidden;background:linear-gradient(160deg,#3a2417,#17100c);box-shadow:0 0 0 1px var(--line-strong),0 4px 10px #0000008c}.brand-mark:before{content:"";position:absolute;left:50%;top:52%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#1a1109,#000);box-shadow:0 0 0 1.6px var(--ember-deep)}.brand-mark:after{content:"";position:absolute;inset:4px 5px;background:repeating-linear-gradient(90deg,rgba(247,187,132,.75) 0 1px,transparent 1px 5px);opacity:.7}.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden}.brand-text strong{font-size:.98rem;letter-spacing:.04em}.brand-text small{font-size:.68rem;color:var(--text-dim);white-space:nowrap}.preset-wrap{flex:none}.preset-select{appearance:none;max-width:min(46vw,260px);text-overflow:ellipsis;background:var(--panel-2);color:var(--text);border:1px solid var(--line-strong);border-radius:999px;padding:.4rem 2rem .4rem .9rem;font-size:.85rem;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ember) 50%),linear-gradient(135deg,var(--ember) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.status{flex:1;min-width:0;font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:.4rem;flex:none}.btn{appearance:none;border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--text);border-radius:10px;padding:.5rem .9rem;font-size:.85rem;cursor:pointer;transition:background .12s,border-color .12s,transform .06s;font-family:inherit}.btn:hover{border-color:var(--ember)}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(180deg,var(--ember),var(--ember-deep));border-color:transparent;color:#1a0e05;font-weight:600}.btn.danger{background:linear-gradient(180deg,#c9483f,#8d2c25);border-color:transparent;color:#fff;font-weight:600}.btn.ghost{background:#ffffff08}.btn.small{padding:.35rem .7rem;font-size:.78rem}.btn.round{width:32px;height:32px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.panic-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;color:var(--danger);border-color:#d9534b80}.panic-btn svg{width:17px;height:17px;display:block}.panic-btn .btn-text{font-size:.76rem}@media (max-width: 720px){.panic-btn .btn-text{display:none}}.button-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 .2rem}.main-area{flex:1;display:flex;min-height:0}.stage{flex:1;position:relative;min-width:0;border-right:1px solid var(--line);overflow:hidden}.string-canvas{width:100%;height:100%;display:block}.stage-overlay{position:absolute;inset:0;pointer-events:none;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.5rem}.chord-readout{font-size:clamp(1.6rem,5vw,3rem);font-weight:700;letter-spacing:.02em;color:var(--ember-soft);text-shadow:0 2px 20px rgba(239,138,60,.45);opacity:0;transition:opacity .25s}.chord-readout.visible{opacity:1}.transport-readout{margin-top:auto;font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--text-dim)}.meter{height:5px;border-radius:999px;background:#ffffff14;overflow:hidden}.meter-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--ok),var(--ember));transition:width .06s linear}.meter-fill.hot{background:linear-gradient(90deg,var(--ember),var(--danger))}.panel{width:min(420px,42vw);display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,#1e1512e6,#100b08f2)}.tabs{display:flex;gap:.15rem;padding:.4rem .4rem 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}.tabs::-webkit-scrollbar{display:none}.tab{appearance:none;border:none;background:transparent;color:var(--text-dim);padding:.5rem .7rem;font-size:.82rem;cursor:pointer;border-radius:8px 8px 0 0;white-space:nowrap;font-family:inherit}.tab.active{color:var(--ember-soft);background:#ef8a3c1f;box-shadow:inset 0 -2px 0 var(--ember)}.panel-body{flex:1;overflow-y:auto;padding:.9rem 1rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}.section{display:flex;flex-direction:column;gap:.7rem}.section-title{margin:.4rem 0 0;font-size:.82rem;letter-spacing:.08em;color:var(--ember);text-transform:none}.section-hint{margin:0;font-size:.75rem;color:var(--text-dim);line-height:1.55}.ctl{display:flex;flex-direction:column;gap:.3rem}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.ctl-label{font-size:.8rem;color:var(--text)}.ctl-value{font-size:.75rem;color:var(--ember-soft);font-variant-numeric:tabular-nums}.ctl-hint{font-size:.71rem;color:var(--text-dim);line-height:1.5}.ctl-range{appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}.ctl-range::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,var(--ember) var(--fill, 50%),rgba(255,255,255,.1) var(--fill, 50%))}.ctl-range::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,var(--ember) var(--fill, 50%),rgba(255,255,255,.1) var(--fill, 50%))}.ctl-range::-webkit-slider-thumb{appearance:none;width:17px;height:17px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2e2,var(--ember));box-shadow:0 1px 5px #0009}.ctl-range::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2e2,var(--ember))}.ctl-select{appearance:none;width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line-strong);border-radius:9px;padding:.45rem 2rem .45rem .7rem;font-size:.83rem;cursor:pointer;font-family:inherit;background-image:linear-gradient(45deg,transparent 50%,var(--ember) 50%),linear-gradient(135deg,var(--ember) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.ctl-select.compact{width:auto;flex:none}.ctl-select.wide{flex:1;min-width:0}.segmented{display:flex;gap:.2rem;background:#00000047;padding:.2rem;border-radius:10px}.seg-btn{flex:1;appearance:none;border:none;background:transparent;color:var(--text-dim);padding:.4rem .3rem;border-radius:8px;font-size:.78rem;cursor:pointer;font-family:inherit}.seg-btn.active{background:var(--ember);color:#1a0e05;font-weight:600}.switch-row{position:relative;display:flex;align-items:center;gap:.7rem;cursor:pointer;padding:.2rem 0}.switch-texts{display:flex;flex-direction:column;gap:.15rem;flex:1}.switch-input{position:absolute;opacity:0;width:0;height:0}.switch-track{flex:none;width:42px;height:24px;border-radius:999px;background:#ffffff1f;position:relative;transition:background .16s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f4e8dc;transition:transform .16s}.switch-input:checked+.switch-track{background:var(--ember)}.switch-input:checked+.switch-track:after{transform:translate(18px)}.chord-pads{display:flex;flex-direction:column;gap:.6rem}.chord-keyrow{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.chord-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.32rem}.chord-pad{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:52px;padding:.3rem .1rem;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,#3c281ed9,#1c130fe6);color:var(--text);cursor:pointer;font-family:inherit;transition:transform .06s,border-color .12s,background .12s;touch-action:none}.chord-pad:hover{border-color:var(--ember)}.chord-pad.pressed{transform:scale(.96)}.chord-pad.active{border-color:var(--ember);background:linear-gradient(180deg,#ef8a3c59,#783c1680)}.chord-pad-name{font-size:.86rem;font-weight:600;line-height:1.1}.chord-pad-degree{font-size:.62rem;color:var(--text-dim)}.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:.35rem}.prog-slot{appearance:none;border:1px dashed var(--line-strong);background:#ffffff0a;color:var(--text);border-radius:9px;padding:.55rem .2rem;font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit}.prog-slot:hover{border-color:var(--danger);color:var(--danger)}.tuner-row{display:flex;flex-wrap:wrap;gap:.35rem}.demo-list{display:flex;flex-direction:column;gap:.45rem}.demo-item{appearance:none;display:flex;flex-direction:column;gap:.15rem;text-align:left;border:1px solid var(--line);background:#ffffff08;color:var(--text);border-radius:10px;padding:.6rem .75rem;cursor:pointer;font-family:inherit}.demo-item:hover{border-color:var(--ember);background:#ef8a3c14}.demo-title{font-size:.88rem;font-weight:600}.demo-desc{font-size:.74rem;color:var(--text-dim)}.demo-meta{font-size:.68rem;color:var(--ember-deep);font-variant-numeric:tabular-nums}.board-area{flex:none;border-top:1px solid var(--line);background:linear-gradient(180deg,#18100cf5,#0c0806fa);display:flex;flex-direction:column}.play-bar{display:flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.play-bar::-webkit-scrollbar{display:none}.play-bar .spacer{flex:1;min-width:.5rem}.btn.pedal{padding:.45rem .85rem;font-size:.8rem;white-space:nowrap}.btn.pedal.wide{min-width:110px}.btn.pedal.active{background:linear-gradient(180deg,var(--ember),var(--ember-deep));color:#1a0e05;border-color:transparent;font-weight:600}.board-scroll{overflow-x:auto;overflow-y:hidden;padding:.4rem .6rem .55rem;-webkit-overflow-scrolling:touch}.fretboard{min-width:520px;border-radius:8px;padding:.2rem 0 .3rem;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),linear-gradient(180deg,#4a2f1c,#2f1d11);box-shadow:inset 0 0 26px #0009;user-select:none;touch-action:none}.fb-markers{display:grid;height:16px;align-items:center}.fb-marker{position:relative;height:100%}.fb-marker:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);background:transparent}.fb-marker.single:after{background:#f7dcbe80}.fb-marker.double:after{background:transparent;box-shadow:-5px 0 #f7dcbe99,5px 0 #f7dcbe99}.fb-fretnum{position:absolute;left:50%;bottom:-1px;transform:translate(-50%);font-size:.56rem;color:#f7dcbe6b}.fb-row{display:grid;position:relative;height:30px}.fb-row:after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--string-w, 1px);transform:translateY(-50%);background:linear-gradient(180deg,#f6e2c8,#9d7f5f);box-shadow:0 1px 2px #0009;pointer-events:none;border-radius:2px}.fb-row.muted:after{opacity:.25}.fb-row.ringing:after{animation:string-ring .5s ease-out}@keyframes string-ring{0%{filter:brightness(2.2);box-shadow:0 0 9px #ffaa5ae6}to{filter:brightness(1);box-shadow:0 1px 2px #0009}}.fb-cell{appearance:none;position:relative;border:none;border-right:1px solid rgba(210,200,190,.22);background:transparent;padding:0;cursor:pointer;height:100%;font-family:inherit;touch-action:none}.fb-cell.open{border-right:3px solid rgba(245,235,220,.75)}.fb-dot{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%) scale(.4);background:var(--ember);opacity:0;pointer-events:none}.fb-cell.in-shape .fb-dot{opacity:.92;transform:translate(-50%,-50%) scale(1);background:radial-gradient(circle at 35% 30%,#ffd9b0,var(--ember));box-shadow:0 0 10px #ef8a3ca6}.fb-cell.hit .fb-dot{animation:fb-hit .4s ease-out}@keyframes fb-hit{0%{opacity:.95;transform:translate(-50%,-50%) scale(.5);background:#fff2e0}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.fb-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.6rem;color:#f5e6d780;pointer-events:none;z-index:1}.fb-cell.in-shape .fb-label{color:#2a1508;font-weight:700}.strum-bar{min-width:520px;margin-top:.35rem;height:42px;border-radius:8px;border:1px dashed var(--line-strong);background:repeating-linear-gradient(90deg,rgba(239,138,60,.07) 0 12px,transparent 12px 24px),#ffffff05;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.72rem;cursor:grab;touch-action:none;user-select:none}.strum-bar:active{cursor:grabbing;border-color:var(--ember)}.help-overlay{position:fixed;inset:0;background:#080504c7;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:50}.help-card{max-width:620px;max-height:82vh;overflow-y:auto;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);border-radius:16px;padding:1.4rem 1.6rem;box-shadow:0 20px 60px #0009}.help-card h2{margin:0 0 .8rem;font-size:1.15rem;color:var(--ember-soft)}.help-card h3{margin:1rem 0 .35rem;font-size:.86rem;color:var(--ember)}.help-card ul{margin:0;padding-left:1.1rem}.help-card li{font-size:.8rem;line-height:1.75;color:var(--text)}.help-card b{color:var(--ember-soft);font-weight:600}.help-note{margin:1rem 0;font-size:.76rem;color:var(--text-dim);line-height:1.6}@media (max-width: 900px){.main-area{flex-direction:column}.stage{flex:none;height:clamp(90px,16vh,150px);border-right:none;border-bottom:1px solid var(--line)}.panel{width:100%;flex:1}.chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width: 560px){.topbar{padding:.45rem .6rem;gap:.5rem}.brand-text small,.status{display:none}.panel-body{padding:.75rem .8rem 1.4rem}.fretboard,.strum-bar{min-width:420px}.fb-row{height:27px}}@media (max-height: 480px) and (orientation: landscape){.stage{display:none}.fb-row{height:24px}.strum-bar{height:32px}}.status.alert{position:fixed;top:0;left:0;right:0;z-index:60;display:block;padding:.5rem .75rem;background:#160e09f5;border-bottom:1px solid #e09a5a;color:#e09a5a;font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}