@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg-app:#f5f5f7;--bg-surface:#fff;--bg-surface-raised:#f0f0f3;--bg-track:#fafafe;--bg-track-alt:#f4f4f8;--bg-input:#eeeef2;--border-subtle:#0000000f;--border-medium:#0000001f;--border-strong:#0003;--text-primary:#1a1a2e;--text-secondary:#6b6b80;--text-muted:#9e9eb0;--text-inverse:#fff;--accent-blue:#3a7bfd;--accent-blue-hover:#5a93ff;--accent-green:#22c55e;--accent-green-dim:#22c55e1a;--accent-red:#ef4444;--accent-red-bright:#f87171;--accent-orange:#f59e0b;--accent-purple:#8b5cf6;--accent-cyan:#06b6d4;--playhead-color:#ef4444;--playhead-glow:#ef44442e;--midi-note:#3b82f6;--midi-note-active:#2563eb;--midi-note-natural:#93c5fd;--midi-note-natural-active:#60a5fa;--midi-grid:#00000008;--midi-grid-strong:#00000012;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 32px #0000001a;--transition-fast:.12s ease;--transition-normal:.2s ease;--transition-slow:.35s ease;--control-bar-height:52px;--track-height:80px;--midi-lane-height:24px;--playhead-width:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-app);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00000038}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.control-bar{height:var(--control-bar-height);background:var(--bg-surface);border-bottom:1px solid var(--border-medium);box-shadow:var(--shadow-sm);z-index:100;flex-shrink:0;align-items:center;padding:0 16px;display:flex}.control-bar__left{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.control-bar__center{justify-content:center;align-items:center;gap:8px;display:flex}.control-bar__right{flex:1;justify-content:flex-end;align-items:center;gap:8px;min-width:0;display:flex}.control-bar__divider{background:var(--border-medium);flex-shrink:0;width:1px;height:24px;margin:0 4px}.control-bar__title{letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;font-size:15px;font-weight:600}.control-bar__status{color:var(--text-muted);white-space:nowrap;font-size:11px}.btn{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{background:var(--bg-input);border-color:var(--border-strong)}.btn:active{transform:scale(.97)}.btn--transport{color:var(--text-primary);background:0 0;border:none;padding:6px;font-size:0}.btn--transport:hover{background:var(--bg-input);border-radius:var(--radius-md)}.btn--transport.active{color:var(--text-primary);background:var(--bg-input)}.btn--brush{opacity:.6;transition:opacity var(--transition-fast),background var(--transition-fast)}.btn--brush:hover{opacity:1}.btn--brush.active{opacity:1;border-radius:var(--radius-md);background:var(--bg-input)!important}.icon-blue{color:#3b82f6;filter:saturate(.5)}.icon-red{color:#ef4444;filter:saturate(.5)}.active .icon-blue,.active .icon-red{filter:saturate(1.2)}.btn--transport.recording-active{color:var(--accent-red);animation:1.5s infinite pulse-red}.control-bar__time-display{border-radius:var(--radius-md);color:var(--accent-blue);background:#3a7bfd14;border:1px solid #3a7bfd33;justify-content:center;align-items:center;min-width:60px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:600;display:flex}@keyframes pulse-red{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn--icon-ghost{color:var(--text-secondary);background:0 0;border:none;padding:6px}.btn--icon-ghost:hover{background:var(--bg-input);color:var(--text-primary)}.btn--cut{color:#d97706;border-color:#f59e0b4d}.btn--cut:hover{background:#f59e0b14}.btn--icon{min-width:34px;padding:6px 8px}.select-wrapper{position:relative}.select{appearance:none;border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);padding:6px 30px 6px 10px;font-family:inherit;font-size:13px;font-weight:500}.select:hover{border-color:var(--border-strong)}.select:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 2px #3a7bfd26}.tempo-input{align-items:center;gap:6px;display:flex}.tempo-input__label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:11px;font-weight:600}.tempo-input__value{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-surface);width:56px;color:var(--text-primary);text-align:center;transition:all var(--transition-fast);padding:5px 8px;font-family:JetBrains Mono,monospace;font-size:13px}.tempo-input__value:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 2px #3a7bfd26}.timeline-area{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.timeline-scroll{flex:1;position:relative;overflow:auto}.timeline-content{flex-direction:column;width:fit-content;min-width:100%;min-height:100%;display:flex;position:relative}.text-track{background:var(--bg-track);border-bottom:2px solid var(--border-medium);align-items:stretch;width:fit-content;min-width:100%;min-height:48px;display:flex;position:relative}.text-track__label{background:var(--bg-surface);border-right:1.5px solid var(--border-strong);text-transform:uppercase;letter-spacing:.06em;width:100px;min-width:100px;color:var(--text-secondary);z-index:40;align-items:center;padding-left:12px;font-size:11px;font-weight:600;display:flex;position:sticky;top:0;bottom:0;left:0}.text-track__blocks{align-items:stretch;padding-left:0;display:flex}.text-block{border:2px solid var(--border-strong);background:var(--bg-surface);transition:all var(--transition-fast);cursor:grab;border-right:none;border-radius:4px;align-items:center;min-height:48px;margin:6px 0;display:flex;position:relative}.text-block:not(:last-child){border-right:1px solid var(--border-medium)}.text-block:hover{border-color:var(--accent-blue);background:var(--bg-surface-raised)}.text-block.selected{border-color:var(--accent-blue);box-shadow:0 0 0 1.5px var(--accent-blue);background:#3a7bfd0d}.text-block:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.text-block.is-editing{border-color:var(--accent-white);background:var(--bg-app);box-shadow:0 0 0 2px var(--accent-white),0 0 15px #ffffff1a;cursor:text}.text-block.is-dragging{opacity:.4;cursor:grabbing}.text-block.is-loading{border-style:dashed;border-color:var(--border-medium);background:var(--bg-surface-raised);cursor:wait!important}.text-block.is-loading .text-block__content{color:var(--text-muted);-webkit-user-select:none;user-select:none;animation:1.5s ease-in-out infinite pulse-shimmer}.text-block__loading-overlay{pointer-events:none;border-radius:inherit;position:absolute;inset:0;overflow:hidden}.shimmer{background:linear-gradient(90deg,#0000 0%,#ffffff0d 50%,#0000 100%) 0 0/200% 100%;width:100%;height:100%;animation:1.5s linear infinite shimmer}@keyframes pulse-shimmer{0%,to{opacity:.3}50%{opacity:.6}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.text-block__content{letter-spacing:8px;color:var(--text-primary);white-space:pre;outline:none;width:100%;min-width:40px;padding:0;font-family:JetBrains Mono,monospace;font-size:20px;line-height:1.5;overflow:hidden}.text-block__resize-handle{cursor:col-resize;z-index:10;background:0 0;border-radius:0 4px 4px 0;width:8px;transition:background .2s;position:absolute;top:0;bottom:0;right:0}.text-block:hover .text-block__resize-handle{background:#0000000d}.text-block__resize-handle:hover{background:var(--accent-blue)!important}.text-block__wand-btn{background:var(--accent-blue);color:#fff;cursor:pointer;width:24px;height:24px;box-shadow:var(--shadow-md);z-index:20;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,background .2s;display:flex;position:absolute;top:-12px;right:-12px}.text-block__wand-btn:hover{background:var(--accent-blue-hover);transform:scale(1.15)}.text-block__wand-btn active{transform:scale(.95)}.text-block__add-btn{border:1px dashed var(--border-medium);border-radius:var(--radius-md);width:32px;min-width:32px;height:100%;min-height:44px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:20px;display:flex}.text-block__add-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:#3a7bfd0a}.merge-gap{z-index:10;opacity:0;justify-content:center;align-items:center;width:4px;margin:0 -2px;transition:opacity .2s;display:flex;position:relative}.text-track__blocks:hover .merge-gap{opacity:1}.merge-button{color:#000;cursor:pointer;background:#fff;border:1.5px solid #000;border-radius:4px;justify-content:center;align-items:center;width:20px;height:20px;padding:0;transition:transform .15s,background .15s;display:flex;transform:scale(.8);box-shadow:0 2px 4px #0000001a}.merge-button:hover{background:#f0f0f0;transform:scale(1.1)}.merge-button svg{stroke-width:2px}.playhead{width:var(--playhead-width);background:var(--playhead-color);z-index:50;cursor:col-resize;pointer-events:all;position:absolute;top:24px;bottom:0;box-shadow:0 0 4px #ef444466}.playhead:before{content:"";background:var(--playhead-color);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);cursor:grab;width:14px;height:24px;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.playhead:active:before{cursor:grabbing}.playhead:after{content:"";cursor:col-resize;position:absolute;inset:-24px -10px 0}.playhead__time{background:var(--playhead-color);color:#fff;pointer-events:none;white-space:nowrap;z-index:60;border-radius:4px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;position:absolute;top:-48px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #ef44444d}.playhead__time:after{content:"";border-style:solid;border-width:4px;border-color:var(--playhead-color)transparent transparent transparent;position:absolute;top:100%;left:50%;transform:translate(-50%)}.timeline-ruler{-webkit-user-select:none;user-select:none;transition:background var(--transition-fast)}.timeline-ruler:hover{background:var(--bg-input)!important}.loop-region{pointer-events:none;transition:all var(--transition-fast)}.loop-region__label{letter-spacing:.05em;box-shadow:var(--shadow-sm);z-index:101;font-family:JetBrains Mono,monospace;font-weight:700}.synonym-row{background:var(--bg-track);border-bottom:1px solid var(--border-medium);align-items:stretch;width:fit-content;min-width:100%;min-height:28px;display:flex}.synonym-row__label{background:var(--bg-surface);border-right:1.5px solid var(--border-strong);text-transform:uppercase;letter-spacing:.06em;width:100px;min-width:100px;color:var(--text-muted);z-index:40;align-items:center;padding-left:12px;font-size:10px;font-weight:600;display:flex;position:sticky;left:0}.synonym-row__content{flex:1;position:relative}.synonym-row__dropdown-wrapper{flex-direction:column;align-items:center;height:100%;padding:2px 0;display:flex}.synonym-row__select{appearance:none;border:1px solid var(--border-subtle);background:var(--bg-surface);width:100%;height:22px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 4px center;background-repeat:no-repeat;border-radius:3px;padding:0 14px 0 4px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;overflow:hidden}.synonym-row__select:hover{border-color:var(--accent-blue);background-color:var(--bg-surface-raised)}.synonym-row__select:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 1px #3a7bfd33}.synonym-row__count{color:var(--text-muted);margin-top:1px;font-family:JetBrains Mono,monospace;font-size:8px;line-height:1}.midi-panel{background:var(--bg-surface);border-top:1px solid var(--border-medium);flex-direction:column;flex:1;width:fit-content;min-width:100%;min-height:0;display:flex}.midi-group-separator{background:var(--bg-track-alt);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);z-index:10;width:100%;height:4px;position:sticky;left:0}.midi-panel__title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-size:11px;font-weight:600}.midi-panel__controls{align-items:center;gap:8px;display:flex}.midi-panel__sort-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:10px;font-weight:600}.midi-lane{border-bottom:1px solid var(--midi-grid);flex:1;align-items:stretch;width:fit-content;min-width:100%;height:auto;min-height:14px;display:flex}.midi-lane.is-vowel{background:#8b5cf60a}.midi-lane__label{background:var(--bg-surface);border-right:1.5px solid var(--border-strong);width:100px;min-width:100px;color:var(--text-muted);z-index:40;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-family:JetBrains Mono,monospace;font-size:10px;transition:background-color .15s,color .15s;display:flex;position:sticky;left:0}.midi-lane__label.is-label-selected{text-shadow:0 1px 2px #0000004d;font-weight:700}.midi-lane__notes{background-image:linear-gradient(to right,var(--midi-grid)1px,transparent 1px);background-size:20px 100%;flex:1;margin-left:0;position:relative;overflow:hidden}.midi-lane__notes:hover{background-image:linear-gradient(to right,var(--midi-grid-strong)1px,transparent 1px),linear-gradient(to right,var(--midi-grid)1px,transparent 1px)}.midi-note{background:var(--midi-note-natural);cursor:pointer;min-width:6px;transition:background var(--transition-fast);opacity:.85;border-radius:2px;position:absolute;top:2px;bottom:2px}.midi-note:hover{background:var(--midi-note-natural-active);opacity:1;box-shadow:0 0 6px #93c5fd66}.midi-note.is-positive{background:var(--midi-note);opacity:1;box-shadow:0 0 6px #3b82f666}.midi-note.is-positive:hover{background:var(--midi-note-active)}.midi-note.is-negative{border:1px dashed var(--accent-red);opacity:.6;background:#ef44440d}.midi-note.selected{background:var(--accent-cyan);box-shadow:0 0 8px #06b6d440}.midi-note__text{color:var(--text-inverse);white-space:pre;-webkit-user-select:none;user-select:none;pointer-events:none;align-items:center;height:100%;padding-left:2px;font-family:JetBrains Mono,monospace;font-size:11px;display:flex;overflow:hidden}.text-grid-lane{background:var(--bg-surface);border-bottom:2px solid var(--border-medium);min-height:48px}.text-grid-char{color:var(--text-primary);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:18px;font-weight:500;display:flex;position:absolute;top:0;bottom:0}.midi-grid-block{border-right:1.5px solid var(--border-medium);pointer-events:none;background:#00000003;position:absolute;top:0;bottom:0}.midi-grid-word{pointer-events:none}.midi-grid-section{pointer-events:all;transition:background-color var(--transition-fast),border-color var(--transition-fast);box-sizing:border-box;border-right:1px solid #00000008}.midi-grid-section:hover:not(.is-grayed){z-index:5;border:1px solid #3a7bfd4d;background-color:#3a7bfd14!important}.midi-grid-section.is-positive{background-color:#22c55e80!important}.midi-grid-section.is-negative{background-color:#ef444480!important}.midi-grid-section.is-grayed{cursor:not-allowed;background-color:#0000000d!important}.midi-grid-section.is-punctuation{background-color:#0000001f!important}.midi-grid-section.is-period{background-color:#00000038!important}.midi-grid-section.is-comma{background-color:#00000014!important}.word-marker{background:var(--border-strong);pointer-events:none;z-index:10;width:1px;position:absolute;top:0;bottom:0}.status-bar{background:var(--bg-surface);border-top:1px solid var(--border-medium);height:24px;color:var(--text-muted);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 12px;font-size:11px;display:flex}.status-bar__item{align-items:center;gap:6px;display:flex}.status-bar__dot{background:var(--accent-green);border-radius:50%;width:6px;height:6px}.status-bar__dot.offline{background:var(--accent-red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-slide-in{animation:slideIn var(--transition-slow)ease forwards}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:fadeIn var(--transition-fast);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border-radius:var(--radius-lg);width:100%;max-width:500px;box-shadow:var(--shadow-lg);animation:slideIn var(--transition-normal);flex-direction:column;gap:16px;padding:24px;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{color:var(--text-primary);font-size:18px;font-weight:600}.modal-body{flex-direction:column;gap:12px;display:flex}.modal-footer{justify-content:flex-end;align-items:center;gap:12px;margin-top:8px;display:flex}.import-textarea{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-input);width:100%;min-height:200px;color:var(--text-primary);resize:vertical;transition:border-color var(--transition-fast);outline:none;padding:12px;font-family:inherit;font-size:14px}.import-textarea:focus{border-color:var(--accent-blue)}.export-box{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-track);width:100%;min-height:200px;color:var(--text-primary);white-space:pre-wrap;padding:12px;font-family:JetBrains Mono,monospace;font-size:14px;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);background:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius-sm);color:var(--text-inverse);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition-fast);padding:4px 8px;font-size:11px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(-4px)}.tooltip:hover:after{opacity:1}.exp-container{background:var(--bg-app);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.exp-card{background:var(--bg-surface);border:1px solid var(--border-medium);border-radius:var(--radius-lg);width:100%;max-width:440px;box-shadow:var(--shadow-lg);padding:40px}.exp-header{text-align:center;margin-bottom:32px}.exp-logo-wrapper{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));border-radius:16px;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 20px;display:flex;box-shadow:0 8px 16px #3a7bfd33}.exp-logo-icon{color:#fff;width:32px;height:32px}.exp-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:8px;font-size:28px;font-weight:700}.exp-subtitle{color:var(--text-secondary);font-size:14px;line-height:1.6}.exp-form{flex-direction:column;gap:20px;display:flex}.exp-field{flex-direction:column;gap:8px;display:flex}.exp-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding-left:4px;font-size:12px;font-weight:600}.exp-input{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-surface);width:100%;color:var(--text-primary);transition:all var(--transition-fast);padding:12px 16px;font-family:inherit;font-size:14px}.exp-input:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 2px #3a7bfd1a}.exp-select{height:44px;width:100%!important;font-size:14px!important}.btn-primary{background:var(--accent-blue);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:16px;font-weight:600;display:inline-flex;box-shadow:0 4px 12px #3a7bfd33}.btn-primary:hover{background:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 6px 16px #3a7bfd4d}.btn-primary:active{transform:translateY(0)}.exp-submit{width:100%;margin-top:10px}.exp-btn-icon{width:18px;height:18px}.exp-footer-note{border-radius:var(--radius-md);background:#3a7bfd0d;border:1px solid #3a7bfd1a;margin-top:32px;padding:16px}.exp-footer-note p{color:var(--accent-blue);font-size:12px;line-height:1.5}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}.btn--exit{color:var(--accent-red);background:#ef44441a;border-color:#ef444433;gap:8px;padding:6px 16px;font-weight:600}.btn--exit:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}.exp-modal-icon-wrapper{background:#ef444414;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 24px;display:flex}.exp-modal-icon{width:32px;height:32px;color:var(--accent-red)}.btn--danger{background:var(--accent-red)!important;color:#fff!important;box-shadow:0 4px 12px #ef444433!important}.btn--danger:hover{background:var(--accent-red-bright)!important;box-shadow:0 6px 16px #ef44444d!important}