@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap";:root{--color-canvas: #ffffff;--color-chrome: #f8f9fa;--color-staff: #2c2c2c;--color-note: #1a1a1a;--color-selected: #2563eb;--color-ghost: #93c5fd;--color-cursor: #ef4444;--color-error: #dc2626;--color-success: #16a34a;--topbar-height: 40px;--statusbar-height: 32px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;background:var(--color-canvas);color:var(--color-staff)}#app{display:flex;flex-direction:column;height:100dvh}.tf-topbar{display:flex;align-items:center;gap:12px;height:var(--topbar-height);padding:0 12px;background:var(--color-chrome);border-bottom:1px solid #e5e7eb;flex-shrink:0;user-select:none}.tf-topbar__logo{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--color-staff);white-space:nowrap}.tf-topbar__title{font-size:18px;font-weight:600;color:var(--color-staff);border:none;background:transparent;outline:none;min-width:80px;max-width:280px;flex:1 1 auto;padding:2px 6px;border-radius:4px;cursor:text}.tf-topbar__title:focus{background:#fff;box-shadow:0 0 0 2px var(--color-selected)}.tf-topbar__title--unsaved:after{content:" •";color:var(--color-error)}.tf-topbar__transport{display:flex;align-items:center;gap:4px;margin-left:auto}.tf-topbar__settings{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--color-staff);flex-shrink:0}.tf-topbar__settings:hover{background:#e5e7eb}.tf-topbar__settings:focus-visible{outline:2px solid var(--color-selected);outline-offset:2px}.tf-score-canvas .selected{fill:var(--color-selected)!important;stroke:var(--color-selected)!important}.tf-score-canvas{flex:1 1 0;overflow-y:auto;overflow-x:hidden;background:var(--color-canvas);-webkit-overflow-scrolling:touch}.tf-statusbar{display:flex;align-items:center;gap:16px;height:var(--statusbar-height);padding:0 12px;background:var(--color-chrome);border-top:1px solid #e5e7eb;flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:12px;color:#6b7280}.tf-statusbar__duration{display:flex;align-items:center;gap:6px}.tf-statusbar__duration-btn{padding:2px 6px;border:1px solid transparent;border-radius:3px;background:transparent;font-family:inherit;font-size:12px;color:#6b7280;cursor:pointer;min-width:44px;min-height:24px}.tf-statusbar__duration-btn:hover{background:#e5e7eb}.tf-statusbar__duration-btn--active{border-color:var(--color-selected);color:var(--color-selected);background:#eff6ff}.tf-statusbar__position{margin-left:auto}.tf-score-toolbar{display:flex;align-items:center;gap:8px;padding:4px 12px;background:var(--color-chrome);border-bottom:1px solid #e5e7eb;font-size:13px;color:var(--color-staff)}.tf-score-toolbar__btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d1d5db;border-radius:4px;background:var(--color-canvas);cursor:pointer;font-size:12px;color:var(--color-staff);min-width:44px;min-height:28px}.tf-score-toolbar__btn:hover{background:#e5e7eb}.tf-score-toolbar__btn:focus-visible{outline:2px solid var(--color-selected);outline-offset:2px}.tf-score-toolbar__zoom-label{font-size:12px;color:#6b7280}.tf-score-toolbar__zoom-slider{width:120px;accent-color:var(--color-selected)}.tf-score-toolbar__zoom-value{font-family:JetBrains Mono,monospace;font-size:12px;color:#6b7280;min-width:40px}@media (max-width: 819px){.tf-editing-only{display:none!important}.tf-statusbar__duration,.tf-topbar__transport{display:none}.tf-viewonly-banner{display:flex;align-items:center;justify-content:center;padding:4px 12px;background:#fef3c7;font-size:12px;color:#92400e;border-bottom:1px solid #fde68a;flex-shrink:0}}@media (min-width: 820px){.tf-viewonly-banner{display:none}}@media (820px <= width <= 1023px){.tf-topbar__title{max-width:200px}}