:root{--ink: #070a14;--ink-2: #0b0e1a;--panel: #0e1424;--panel-2: #131b2e;--line: rgba(126, 200, 255, .16);--line-strong: rgba(126, 200, 255, .34);--star: #7ec8ff;--star-soft: #a9dcff;--star-deep: #3d7fb8;--sakura: #ff9ecb;--sakura-soft: #ffd0e5;--gold: #ffd88a;--text: #e6ecf7;--text-dim: #8b97b3;--danger: #ff7a6b;--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%}.vocal-app{display:flex;flex-direction:column;height:100dvh;min-height:100%;background:radial-gradient(120% 80% at 12% -12%,rgba(126,200,255,.14),transparent 58%),radial-gradient(90% 70% at 100% 0%,rgba(255,158,203,.12),transparent 55%),var(--ink)}.topbar{display:flex;align-items:center;gap:.9rem;padding:.5rem .9rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#131b2ef2,#080b14f2);backdrop-filter:blur(6px);flex:none;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.55rem;min-width:0}.brand-mark{width:34px;height:34px;color:var(--star);flex:none;filter:drop-shadow(0 0 8px rgba(126,200,255,.35))}.brand-mark svg{width:100%;height:100%;display:block}.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}.brand-title{font-size:.98rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}.brand-sub{font-size:.68rem;color:var(--text-dim);white-space:nowrap}.transport{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0}.position{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--star-soft);letter-spacing:.06em;min-width:66px}.meter{width:92px;height:6px;border-radius:999px;background:#ffffff14;overflow:hidden;flex:none}.meter-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--star),var(--sakura));transition:width .06s linear}.top-actions{display:flex;gap:.4rem;align-items:center;position:relative}.btn{appearance:none;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0f,#ffffff05);color:var(--text);border-radius:9px;padding:.42rem .72rem;font-size:.8rem;font-family:inherit;cursor:pointer;transition:border-color .12s,background .12s,transform .06s;white-space:nowrap}.btn:hover{border-color:var(--line-strong)}.btn:active{transform:translateY(1px)}.btn.primary{border-color:#7ec8ff73;background:linear-gradient(180deg,#7ec8ff3d,#7ec8ff14);color:#eaf6ff;font-weight:600}.btn.primary.active{border-color:#ff9ecb99;background:linear-gradient(180deg,#ff9ecb47,#ff9ecb1a)}.btn.ghost{background:transparent;color:var(--text-dim)}.btn.ghost:hover{color:var(--text)}.btn.danger{color:var(--danger);border-color:#ff7a6b4d}.btn.icon{padding:.4rem .55rem;min-width:34px}.select,.text-input,.text-area{appearance:none;background:#00000047;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:.35rem .5rem;font-size:.8rem;font-family:inherit;width:100%}.select{background-image:none;cursor:pointer}.text-area{resize:vertical;line-height:1.6}.text-input:focus,.text-area:focus,.select:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 2px #7ec8ff1f}.segmented{display:flex;gap:2px;padding:2px;background:#0000004d;border:1px solid var(--line);border-radius:9px;flex-wrap:wrap}.seg-btn{flex:1 1 auto;appearance:none;border:none;background:transparent;color:var(--text-dim);font-size:.75rem;font-family:inherit;padding:.32rem .5rem;border-radius:7px;cursor:pointer;white-space:nowrap}.seg-btn.active{background:linear-gradient(180deg,#7ec8ff3d,#7ec8ff14);color:#eaf6ff}.segmented.compact{flex:none}.ctl{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.75rem}.ctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.ctl-label{font-size:.76rem;color:var(--text-dim);letter-spacing:.02em}.ctl-value{font-size:.75rem;color:var(--star-soft);font-variant-numeric:tabular-nums}.ctl-hint{font-size:.68rem;color:#8b97b3cc;line-height:1.5}.ctl-range{--fill: 50%;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}.ctl-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--star) var(--fill),rgba(255,255,255,.12) var(--fill))}.ctl-range::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#eaf6ff;border:1px solid rgba(0,0,0,.35);box-shadow:0 1px 4px #00000080}.ctl-range::-moz-range-track{height:4px;border-radius:999px;background:#ffffff1f}.ctl-range::-moz-range-progress{height:4px;border-radius:999px;background:var(--star)}.ctl-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#eaf6ff;border:1px solid rgba(0,0,0,.35)}.switch-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;cursor:pointer}.switch-texts{display:flex;flex-direction:column;gap:.1rem;flex:1}.switch-input{display:none}.switch-track{width:38px;height:21px;border-radius:999px;background:#ffffff1f;border:1px solid var(--line);position:relative;transition:background .15s;flex:none}.switch-track:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#dfe8f5;transition:transform .15s}.switch-input:checked+.switch-track{background:#7ec8ff73}.switch-input:checked+.switch-track:after{transform:translate(17px)}.section{border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .8rem;margin-bottom:.8rem;background:linear-gradient(180deg,#ffffff09,#ffffff03)}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}.section-title{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.04em}.section-hint{font-size:.67rem;color:var(--text-dim)}.button-row{display:flex;gap:.4rem;flex-wrap:wrap}.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:190px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:10px;padding:4px;box-shadow:0 14px 34px #0000008c}.menu-item{display:block;width:100%;text-align:left;appearance:none;border:none;background:transparent;color:var(--text);font-size:.8rem;font-family:inherit;padding:.5rem .6rem;border-radius:7px;cursor:pointer}.menu-item:hover{background:#7ec8ff24}.workspace{display:flex;flex:1;min-height:0}.roll-area{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}.roll-toolbar{display:flex;align-items:center;gap:.45rem;padding:.4rem .6rem;border-bottom:1px solid var(--line);background:#0b0e1ab3;flex:none;overflow-x:auto}.roll-toolbar .spacer{flex:1 1 auto;min-width:.5rem}.inline-field{display:flex;align-items:center;gap:.35rem;flex:none}.inline-field.grow{flex:1 1 160px;min-width:120px}.inline-label{font-size:.7rem;color:var(--text-dim);white-space:nowrap}.inline-field .select{width:auto}.roll-host{position:relative;flex:1;min-height:0}.roll{position:absolute;inset:0;overflow:hidden}.roll-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.roll-canvas.tool-erase{cursor:not-allowed}.roll-lyric-input{position:absolute;z-index:20;min-width:48px;background:#fff6fb;color:#2a0d1c;border:2px solid var(--sakura);border-radius:6px;font-size:.85rem;font-family:inherit;padding:0 4px;outline:none}.inspector{display:flex;align-items:center;gap:.7rem;padding:.45rem .7rem;border-top:1px solid var(--line);background:#0e1424e6;flex:none;overflow-x:auto;min-height:46px}.inspector.empty{color:var(--text-dim)}.inspector-hint{font-size:.72rem;color:var(--text-dim)}.inspector-head{display:flex;align-items:center;gap:.5rem}.inspector-title{font-size:.82rem;font-weight:600;color:var(--sakura-soft);white-space:nowrap}.inline-slider{display:flex;align-items:center;gap:.4rem;min-width:140px}.inline-slider .ctl-range{width:92px}.inline-check{display:flex;align-items:center;gap:.32rem;font-size:.72rem;color:var(--text-dim);white-space:nowrap;cursor:pointer}.side{width:340px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--line);background:linear-gradient(180deg,#0e1424eb,#080b14eb);min-height:0}.tabs{display:flex;border-bottom:1px solid var(--line);flex:none;overflow-x:auto}.tab{flex:1 1 auto;appearance:none;border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:.78rem;padding:.6rem .4rem;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.tab.active{color:var(--text);border-bottom-color:var(--star);background:#7ec8ff12}.panel-body{flex:1;overflow-y:auto;padding:.75rem;-webkit-overflow-scrolling:touch}.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.voice-card{display:flex;flex-direction:column;gap:.18rem;text-align:left;appearance:none;border:1px solid var(--line);border-radius:10px;background:#00000038;color:var(--text);font-family:inherit;padding:.5rem .55rem;cursor:pointer;transition:border-color .12s,background .12s}.voice-card:hover{border-color:var(--line-strong)}.voice-card.active{border-color:#ff9ecb8c;background:linear-gradient(180deg,#ff9ecb29,#ff9ecb0a)}.voice-name{font-size:.82rem;font-weight:600}.voice-desc{font-size:.66rem;color:var(--text-dim);line-height:1.45}.voice-range{font-size:.62rem;color:#7ec8ffb3}.demo-row{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;appearance:none;border:1px solid transparent;border-radius:9px;background:#ffffff08;color:var(--text);font-family:inherit;padding:.45rem .55rem;margin-bottom:.32rem;cursor:pointer}.demo-row:hover{border-color:var(--line-strong);background:#7ec8ff14}.demo-title{font-size:.8rem;font-weight:600}.demo-sub{font-size:.66rem;color:var(--text-dim)}.about-text{margin:0 0 .6rem;font-size:.7rem;line-height:1.65;color:var(--text-dim)}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .9rem;border-top:1px solid var(--line);background:#080b14eb;font-size:.7rem;color:var(--text-dim);flex:none}.status-credit{color:#7ec8ff8c;white-space:nowrap}@media (max-width: 900px){.workspace{flex-direction:column}.side{width:100%;border-left:none;border-top:1px solid var(--line);max-height:46vh}.roll-area{min-height:42vh}.brand-sub,.status-credit{display:none}.voice-grid{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.topbar{gap:.5rem;padding:.45rem .6rem}.brand-title{font-size:.86rem}.transport{order:3;width:100%}.top-actions{margin-left:auto}.meter{flex:1 1 auto;width:auto}.roll-toolbar{gap:.35rem}.side{max-height:44vh}}.record-box{display:flex;flex-direction:column;gap:.55rem}.btn.record-main{padding:.7rem .9rem;font-size:.92rem;font-weight:600}.btn.record-main.active{border-color:#ff7a6b8c;background:linear-gradient(180deg,#ff7a6b42,#ff7a6b14);color:#ffe9e6;animation:record-pulse 1.4s ease-in-out infinite}.btn.record-main:disabled{opacity:.55;cursor:default}@keyframes record-pulse{0%,to{box-shadow:0 0 #ff7a6b52}50%{box-shadow:0 0 0 7px #ff7a6b00}}@media (prefers-reduced-motion: reduce){.btn.record-main.active{animation:none}}.record-level{height:7px;border-radius:999px;background:#00000057;border:1px solid var(--line);overflow:hidden}.record-level-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--star),var(--sakura));transition:width .07s linear}.record-status{font-size:.7rem;color:var(--text-dim);line-height:1.5}.record-transcript{margin:.15rem 0 .5rem;padding:.45rem .55rem;border:1px solid var(--line);border-radius:9px;background:#0000003d;font-size:.78rem;line-height:1.6;word-break:break-word}.tips{margin:0;padding-left:1.05rem;font-size:.7rem;line-height:1.75;color:var(--text-dim)}.record-note{font-size:.68rem;color:var(--text-dim);padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:#00000038}.btn.ghost.active{color:var(--star);border-color:var(--line-strong)}@media (max-height: 620px) and (min-width: 620px){.workspace{flex-direction:row}.side{width:300px;max-height:none;border-left:1px solid var(--line);border-top:none}.roll-area{min-height:0}}@media (max-height: 620px) and (max-width: 619px){.side{max-height:40vh}.roll-area{min-height:30vh}}.status-text.alert{position:fixed;top:0;left:0;right:0;z-index:60;display:block;padding:.5rem .75rem;background:#0a0b16f5;border-bottom:1px solid #b9c6ff;color:#b9c6ff;font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}