:root{--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--header-height: 52px;--sidebar-width-left: 280px;--sidebar-width-right: 340px;--timeline-height: 260px;--font-xs: 12px;--font-sm: 13px;--font-md: 14px;--font-lg: 16px;--font-xl: 20px;--font-2xl: 24px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root,[data-theme=dark]{color-scheme:dark;--bg-app: #09090b;--bg-surface: #111114;--bg-surface-2: #17171c;--bg-surface-3: #202028;--bg-elevated: #18181f;--border-subtle: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #9146ff;--accent-hover: #a970ff;--accent-soft: rgba(145, 70, 255, .16);--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--info: #38bdf8;--shadow-soft: 0 8px 24px rgba(0, 0, 0, .28)}[data-theme=light]{color-scheme:light;--bg-app: #f4f4f5;--bg-surface: #ffffff;--bg-surface-2: #f8f8fa;--bg-surface-3: #eeeef2;--bg-elevated: #ffffff;--border-subtle: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .14);--text-primary: #18181b;--text-secondary: #52525b;--text-muted: #71717a;--accent: #7c3aed;--accent-hover: #6d28d9;--accent-soft: rgba(124, 58, 237, .12);--success: #16a34a;--warning: #d97706;--danger: #dc2626;--info: #0284c7;--shadow-soft: 0 8px 24px rgba(0, 0, 0, .1)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg-app);color:var(--text-primary);font-size:var(--font-md);letter-spacing:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.login-page{display:grid;place-items:center;min-height:100vh;padding:var(--space-5);background:var(--bg-app)}.login-panel{display:grid;justify-items:center;gap:var(--space-5)}.login-panel h1{margin:0;color:var(--text-primary);font-size:var(--font-2xl);font-weight:750;letter-spacing:0}.twitch-login-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:214px;height:38px;padding:0 var(--space-4);color:#fff;background:var(--accent);border:1px solid color-mix(in srgb,var(--accent-hover) 70%,white 10%);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);font-size:var(--font-sm);font-weight:700}.twitch-login-button:hover{background:var(--accent-hover)}.twitch-login-button:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px}.access-denied-panel{width:min(420px,100%)}.access-denied-box{width:100%;padding:var(--space-4);text-align:center;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.access-denied-box h2{margin:0 0 var(--space-2);font-size:var(--font-lg);letter-spacing:0}.access-denied-box p{margin:0;color:var(--text-secondary);font-size:var(--font-sm)}.access-denied-box dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);margin:var(--space-4) 0 0;text-align:left;font-size:var(--font-sm)}.access-denied-box dt{color:var(--text-muted)}.access-denied-box dd{margin:0;color:var(--text-primary);word-break:break-word}.app-shell{min-height:100vh;background:var(--bg-app)}.app-shell__main{padding:var(--space-5)}.topbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:var(--header-height);padding:0 var(--space-4);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.topbar__brand,.topbar__nav,.topbar__actions,.topbar__link{display:flex;align-items:center}.topbar__brand{gap:var(--space-2);min-width:190px;font-weight:700}.topbar__nav{gap:var(--space-1)}.topbar__actions{gap:var(--space-2)}.topbar__link{gap:var(--space-2);min-height:32px;padding:0 var(--space-3);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:var(--font-sm)}.topbar__link:hover,.topbar__link--active{color:var(--text-primary);background:var(--bg-surface-2)}.dashboard{width:min(1180px,100%);margin:0 auto}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin:var(--space-2) 0 var(--space-4)}.page-header h1{margin:0 0 var(--space-1);font-size:var(--font-2xl);letter-spacing:0}.page-header p{max-width:680px;margin:0;color:var(--text-secondary);font-size:var(--font-sm)}.dashboard-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 210px auto;align-items:end;gap:var(--space-3);margin-bottom:var(--space-4)}.overlay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.overlay-card{display:grid;grid-template-columns:116px 1fr;min-height:152px;overflow:hidden}.overlay-card__preview{display:grid;place-items:center;background:linear-gradient(45deg,var(--bg-surface-2) 25%,transparent 25%),linear-gradient(-45deg,var(--bg-surface-2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg-surface-2) 75%),linear-gradient(-45deg,transparent 75%,var(--bg-surface-2) 75%);background-color:var(--bg-surface-3);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;color:var(--text-muted);border-right:1px solid var(--border-subtle)}.overlay-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.overlay-card__title-row{display:flex;align-items:start;justify-content:space-between;gap:var(--space-2)}.overlay-card h2{margin:0;font-size:var(--font-lg);letter-spacing:0}.overlay-card__meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:0}.overlay-card__meta div{min-width:0}.overlay-card__meta dt{color:var(--text-muted);font-size:var(--font-xs)}.overlay-card__meta dd{margin:2px 0 0;color:var(--text-secondary);font-size:var(--font-sm)}.overlay-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:auto}.dashboard-error{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);padding:var(--space-3);color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);border-radius:var(--radius-md);font-size:var(--font-sm)}.overlay-create-form{display:grid;gap:var(--space-3);margin-top:var(--space-4)}.overlay-create-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.overlay-create-form__summary{min-height:32px;padding:var(--space-2) var(--space-3);color:var(--text-secondary);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--font-sm)}.overlay-create-form__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}.ui-button,.ui-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:34px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.ui-button{padding:0 var(--space-3);font-size:var(--font-sm);font-weight:600}.ui-button:disabled,.ui-icon-button:disabled{cursor:not-allowed;opacity:.58}.ui-button--primary{color:#fff;background:var(--accent)}.ui-button--primary:hover{background:var(--accent-hover)}.ui-button--secondary{color:var(--text-primary);background:var(--bg-surface-2);border-color:var(--border-subtle)}.ui-button--secondary:hover,.ui-icon-button:hover{background:var(--bg-surface-3);border-color:var(--border-strong)}.ui-button--ghost{color:var(--text-secondary);background:transparent}.ui-button--ghost:hover{color:var(--text-primary);background:var(--bg-surface-2)}.ui-button--danger{color:#fff;background:var(--danger)}.ui-button__icon{display:inline-flex}.ui-icon-button{width:34px;color:var(--text-secondary);background:var(--bg-surface-2);border-color:var(--border-subtle)}.ui-field{display:grid;gap:var(--space-1)}.ui-field__label{color:var(--text-secondary);font-size:var(--font-xs)}.ui-field__error{color:var(--danger);font-size:var(--font-xs)}.ui-input{width:100%;min-height:34px;padding:0 var(--space-3);color:var(--text-primary);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);outline:none}.ui-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.ui-textarea{min-height:96px;padding-top:var(--space-2);resize:vertical}.ui-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--font-sm)}.ui-switch{display:inline-flex;align-items:center;gap:var(--space-2);height:34px;padding:0;color:var(--text-secondary);background:transparent;border:0;cursor:pointer}.ui-switch__track{position:relative;width:48px;height:26px;background:var(--bg-surface-3);border:1px solid var(--border-subtle);border-radius:999px}.ui-switch__thumb{position:absolute;top:2px;left:2px;display:grid;place-items:center;width:20px;height:20px;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:999px;transition:transform .15s ease}.ui-switch--checked .ui-switch__thumb{transform:translate(21px)}.ui-switch__label{font-size:var(--font-sm)}.ui-slider{width:100%;accent-color:var(--accent)}.ui-tabs__list{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-subtle)}.ui-tabs__tab{height:34px;padding:0 var(--space-3);color:var(--text-secondary);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}.ui-tabs__tab--active{color:var(--text-primary);border-bottom-color:var(--accent)}.ui-tabs__panel{padding-top:var(--space-3)}.ui-card,.ui-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.ui-panel{padding:var(--space-3)}.ui-card{box-shadow:var(--shadow-soft)}.ui-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-2);color:var(--text-secondary);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);font-size:var(--font-xs);font-weight:700}.ui-badge--success{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}.ui-badge--warning{color:var(--warning);background:color-mix(in srgb,var(--warning) 14%,transparent)}.ui-badge--danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}.ui-badge--info{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}.ui-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:var(--space-4);background:#00000085}.ui-modal__content{width:min(560px,100%);padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.ui-modal__header h2{margin:0;font-size:var(--font-xl)}.ui-dropdown,.ui-tooltip{display:inline-flex}.ui-separator{width:1px;height:24px;background:var(--border-subtle)}.ui-empty-state{grid-column:1 / -1;padding:var(--space-6);text-align:center;color:var(--text-secondary);background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}.ui-empty-state h3{margin:0 0 var(--space-1);color:var(--text-primary)}.ui-empty-state p{margin:0}.ui-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:999px;animation:spin .7s linear infinite}.ui-toast{padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.editor-loading{display:grid;place-items:center;min-height:100vh;color:var(--text-secondary);background:var(--bg-app)}.editor-shell{display:grid;grid-template-rows:var(--header-height) minmax(0,1fr) var(--timeline-height);height:100vh;overflow:hidden;background:var(--bg-app)}.editor-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.editor-header__left,.editor-header__actions{display:flex;align-items:center;gap:var(--space-2);min-width:0}.editor-header__left{flex:1}.editor-header__left .ui-field{width:min(360px,38vw)}.save-status,.runtime-pill,.editor-user{display:inline-flex;align-items:center;gap:var(--space-1);min-height:26px;padding:0 var(--space-2);color:var(--text-secondary);background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--font-xs);white-space:nowrap}.save-status--saved{color:var(--success)}.save-status--saving{color:var(--info)}.save-status--error{color:var(--danger)}.editor-error{position:fixed;top:calc(var(--header-height) + var(--space-2));left:50%;z-index:20;transform:translate(-50%);padding:var(--space-2) var(--space-3);color:var(--danger);background:var(--bg-elevated);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);font-size:var(--font-sm)}.editor-workspace{display:grid;grid-template-columns:var(--sidebar-width-left) minmax(0,1fr) var(--sidebar-width-right);min-height:0}.editor-sidebar{min-height:0;padding:var(--space-3);overflow:auto;background:var(--bg-surface);border-color:var(--border-subtle)}.editor-sidebar--left{border-right:1px solid var(--border-subtle)}.editor-sidebar--right{border-left:1px solid var(--border-subtle)}.editor-panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}.editor-panel-header h2{margin:0;font-size:var(--font-lg);letter-spacing:0}.layer-list{display:grid;gap:var(--space-1);margin-top:var(--space-3)}.layer-row{display:flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-2);color:var(--text-secondary);background:transparent;border:0;border-radius:var(--radius-sm);text-align:left;cursor:pointer}.layer-row:hover{color:var(--text-primary);background:var(--bg-surface-2)}.editor-empty,.property-note{margin:0;color:var(--text-muted);font-size:var(--font-sm);line-height:1.5}.canvas-area{position:relative;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px),var(--bg-app);background-size:32px 32px}.floating-toolbar{position:absolute;top:var(--space-3);left:50%;z-index:5;display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);transform:translate(-50%)}.zoom-readout{min-width:48px;color:var(--text-secondary);font-size:var(--font-xs);text-align:center}.canvas-stage{display:grid;place-items:center;width:100%;height:100%;padding:72px var(--space-6) var(--space-6)}.editor-canvas,.preview-canvas{position:relative;overflow:hidden;background:linear-gradient(45deg,rgba(255,255,255,.06) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.06) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.06) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.06) 75%);background-color:transparent;background-position:0 0,0 16px,16px -16px,-16px 0;background-size:32px 32px;border:1px solid var(--border-strong);box-shadow:var(--shadow-soft)}.canvas-resolution{position:absolute;top:16px;left:16px;padding:6px 8px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:28px}.properties-stack{display:grid;gap:var(--space-3)}.properties-stack h3{margin:0 0 var(--space-3);font-size:var(--font-md);letter-spacing:0}.properties-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.timeline-panel{min-height:0;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.timeline-header{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 var(--space-3);border-bottom:1px solid var(--border-subtle)}.timeline-header strong{font-size:var(--font-sm)}.timeline-controls{display:flex;align-items:center;gap:var(--space-2);width:360px}.timeline-body{display:grid;grid-template-columns:180px 1fr;height:calc(var(--timeline-height) - 43px)}.timeline-track-list{padding:var(--space-3);color:var(--text-muted);border-right:1px solid var(--border-subtle);font-size:var(--font-sm)}.timeline-ruler{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;padding:var(--space-3);color:var(--text-muted);background:linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px),var(--bg-surface-2);background-size:90px 100%;font-size:var(--font-xs)}.preview-page{display:grid;grid-template-rows:var(--header-height) 1fr;min-height:100vh;background:var(--bg-app)}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.preview-header div{display:grid;gap:2px}.preview-header span{color:var(--text-secondary);font-size:var(--font-xs)}.preview-stage{display:grid;place-items:center;overflow:hidden}.preview-canvas{display:grid;place-items:center;color:var(--text-secondary);transform-origin:center center}.preview-canvas span{padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:32px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:780px){.topbar{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-3)}.topbar__brand,.topbar__nav,.topbar__actions{min-width:0;flex-wrap:wrap}.page-header,.dashboard-toolbar{grid-template-columns:1fr}.page-header{flex-direction:column}.overlay-card{grid-template-columns:1fr}.overlay-card__preview{min-height:96px;border-right:0;border-bottom:1px solid var(--border-subtle)}}