:root{--color-background: #1C202A;--color-panel: #272C38;--color-panel-raised: #303646;--color-border: #3A4152;--color-primary: #5855BC;--color-primary-hover: #6966CF;--color-accent: #A5A8FF;--color-secondary: #80D5C5;--color-text: #F2F3F7;--color-text-muted: #A9AEBF;--color-selected: #5855BC;--color-focus: #A5A8FF;--color-error: #FF7A85;--color-warning: #F2C46D;--color-success: #80D5C5;--color-disabled: #5C6273;--color-checker-light: #3A3F4C;--color-checker-dark: #2E323D;--radius-small: 6px;--radius-medium: 10px;--radius-large: 14px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-small: 12px;--font-size-body: 14px;--font-size-title: 18px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-body);line-height:1.4;-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app{display:grid;height:100%;grid-template-columns:auto minmax(0,1fr) var(--side-w, 300px);grid-template-rows:auto minmax(0,1fr) var(--tl-h, 250px);grid-template-areas:"top top top" "tools canvas side" "timeline timeline timeline";gap:1px;background:var(--color-border)}.topbar{grid-area:top}.tools{grid-area:tools}.canvas-area{grid-area:canvas}.side{grid-area:side}.timeline{grid-area:timeline}.topbar,.tools,.side,.timeline{background:var(--color-panel)}.canvas-area{background:var(--color-background);position:relative;min-width:0;min-height:0;overflow:hidden}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto auto minmax(240px,1fr) auto auto;grid-template-areas:"top" "tools" "canvas" "timeline" "side";height:auto;min-height:100%}.canvas-area{height:58vh}.tools{flex-direction:row!important;overflow-x:auto}.tools .tool-group{flex-direction:row!important}.side{max-height:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-panel-raised);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}.btn:hover:not(:disabled){border-color:var(--color-accent)}.btn:disabled{color:var(--color-disabled);cursor:not-allowed}.btn.primary{background:var(--color-primary);border-color:var(--color-primary)}.btn.primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn.danger{border-color:color-mix(in srgb,var(--color-error) 50%,transparent);color:var(--color-error)}.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover:not(:disabled){background:var(--color-panel-raised)}.btn.small{min-height:26px;padding:0 8px;font-size:var(--font-size-small)}.icon-btn{width:36px;height:36px;padding:0}.icon-btn.small{width:28px;height:28px;min-height:28px}.btn[aria-pressed=true],.btn.active{background:var(--color-selected);border-color:var(--color-accent)}.btn svg{width:18px;height:18px;flex:none}.btn.small svg{width:15px;height:15px}input[type=text],input[type=number],select,textarea{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-small);padding:5px 8px;min-height:30px}input[type=number]{width:76px}textarea{width:100%;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}input[type=range]{accent-color:var(--color-accent)}input[type=checkbox]{accent-color:var(--color-primary);width:16px;height:16px}label.field{display:inline-flex;align-items:center;gap:6px}.muted{color:var(--color-text-muted)}.small-text{font-size:var(--font-size-small)}.error-text{color:var(--color-error)}.warn-text{color:var(--color-warning)}.ok-text{color:var(--color-success)}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}.spacer{flex:1}.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:var(--font-size-small);border:1px solid var(--color-border)}.chip.saved{color:var(--color-success)}.chip.error,.chip.conflict,.chip.unavailable{color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 50%,transparent)}.chip.dirty,.chip.saving{color:var(--color-warning)}.topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--font-size-title);margin-right:8px}.brand-mark{width:26px;height:26px;image-rendering:pixelated;border-radius:4px}.project-name{min-width:120px;max-width:220px;background:transparent;border-color:transparent;font-weight:600}.project-name:hover,.project-name:focus{border-color:var(--color-border);background:var(--color-background)}.banner{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 12px;background:color-mix(in srgb,var(--color-error) 15%,var(--color-panel));width:100%;border-radius:var(--radius-small)}.tools{display:flex;flex-direction:column;gap:10px;padding:8px;overflow-y:auto}.tool-group{display:flex;flex-direction:column;gap:4px}.tool-sep{height:1px;background:var(--color-border);margin:2px 0;flex:none}@media(max-width:900px){.tool-sep{width:1px;height:auto}}.canvas-area canvas.view{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}.canvas-hud{position:absolute;left:8px;bottom:8px;display:flex;gap:8px;align-items:center;pointer-events:none}.canvas-hud>*{pointer-events:auto}.hud-chip{background:color-mix(in srgb,var(--color-panel) 92%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-small);padding:2px 8px;font-size:var(--font-size-small);font-variant-numeric:tabular-nums}.canvas-area.drop-target:after{content:"Drop to import";position:absolute;inset:12px;border:2px dashed var(--color-accent);border-radius:var(--radius-large);display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--color-background) 70%,transparent)}.side{display:flex;flex-direction:column;overflow-y:auto}.panel{padding:12px;border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:10px}.panel h2{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);display:flex;align-items:center;gap:6px}.color-preview{width:48px;height:48px;border-radius:var(--radius-medium);border:1px solid var(--color-border);position:relative;overflow:hidden}.checker{background-color:var(--color-checker-light);background-image:conic-gradient(var(--color-checker-dark) 25%,transparent 0 50%,var(--color-checker-dark) 0 75%,transparent 0);background-size:10px 10px}.color-preview>div{position:absolute;inset:0}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.swatch{aspect-ratio:1;border-radius:4px;border:1px solid var(--color-border);padding:0;cursor:pointer;position:relative;overflow:hidden;min-width:0}.swatch>span{position:absolute;inset:0}.swatch[aria-pressed=true]{outline:2px solid var(--color-accent);outline-offset:1px}.rgba-grid{display:grid;grid-template-columns:auto 1fr 52px;gap:4px 8px;align-items:center;font-size:var(--font-size-small)}.rgba-grid input[type=number]{width:52px;min-height:24px;padding:2px 4px}.layers{display:flex;flex-direction:column;gap:2px}.layer-row{display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--radius-small);border:1px solid transparent;cursor:pointer}.layer-row:hover{background:var(--color-panel-raised)}.layer-row.selected{background:color-mix(in srgb,var(--color-primary) 35%,var(--color-panel));border-color:var(--color-primary)}.layer-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row.hidden-layer .name{color:var(--color-text-muted);text-decoration:line-through}.layer-row input[type=text]{flex:1;min-height:24px;padding:2px 6px}.timeline{display:flex;flex-direction:column;gap:6px;padding:8px 12px;min-width:0}.timeline-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.timeline-grid{overflow:auto;max-height:190px;border:1px solid var(--color-border);border-radius:var(--radius-small);background:var(--color-background)}.timeline-grid table{border-collapse:separate;border-spacing:0}.timeline-grid th,.timeline-grid td{padding:0}.timeline-grid th.layer-label{position:sticky;left:0;z-index:1;background:var(--color-panel);text-align:left;padding:0 8px;font-weight:500;font-size:var(--font-size-small);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right:1px solid var(--color-border)}.timeline-grid thead th{position:sticky;top:0;z-index:2;background:var(--color-panel)}.timeline-grid thead th.layer-label{z-index:3}.frame-head{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;cursor:pointer;border:1px solid transparent;border-radius:4px;margin:2px;background:none}.frame-head.selected{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-primary) 30%,transparent)}.frame-head.playing{box-shadow:inset 0 -3px 0 var(--color-secondary)}.frame-head canvas{width:32px;height:32px;image-rendering:pixelated;border-radius:3px}.frame-head .num{font-size:11px;font-variant-numeric:tabular-nums}.frame-head .dur{font-size:10px;color:var(--color-text-muted)}.cel{width:40px;height:26px;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;border-left:1px solid color-mix(in srgb,var(--color-border) 50%,transparent)}.cel:hover{background:var(--color-panel-raised)}.cel.selected{background:color-mix(in srgb,var(--color-primary) 40%,transparent)}.cel .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--color-text-muted)}.cel .dot.filled{background:var(--color-accent);border-color:var(--color-accent)}.cel .dot.linked{border-radius:2px;background:var(--color-secondary);border-color:var(--color-secondary)}.cel .dot.linked.empty{background:transparent}.modal-backdrop{position:fixed;inset:0;background:#0a0c12a8;display:grid;place-items:center;z-index:50;padding:16px}.modal{background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-large);width:min(760px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px #00000073}.modal.wide{width:min(980px,100%)}.modal header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--color-border)}.modal header h1{font-size:var(--font-size-title);margin:0;flex:1}.modal .body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}.modal footer{padding:12px 16px;border-top:1px solid var(--color-border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tabs .btn[aria-selected=true]{background:var(--color-selected);border-color:var(--color-accent)}.section{border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:12px;display:flex;flex-direction:column;gap:10px}.section h3{margin:0;font-size:14px}.preview-box{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}.preview-box canvas{image-rendering:pixelated;border-radius:var(--radius-small);border:1px solid var(--color-border)}.metrics{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;font-size:var(--font-size-small)}.metrics dt{color:var(--color-text-muted)}.metrics dd{margin:0;font-variant-numeric:tabular-nums}.list{display:flex;flex-direction:column;gap:6px}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.gallery-card{border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--color-panel-raised)}.gallery-card.current{border-color:var(--color-accent)}.gallery-card .thumb{width:100%;aspect-ratio:1;border-radius:var(--radius-small);image-rendering:pixelated;object-fit:contain}.welcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.welcome-card{text-align:left;align-items:flex-start;justify-content:flex-start;flex-direction:column;padding:14px;min-height:96px;white-space:normal;gap:4px}.welcome-card strong{font-size:15px}.welcome-card.px1{border-color:var(--color-secondary)}.part-line{display:flex;gap:6px;align-items:center}.part-line code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;background:var(--color-background);padding:4px 6px;border-radius:4px}.status-list{display:flex;flex-wrap:wrap;gap:4px}.status-list span{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--color-panel-raised)}.status-list span.got{background:color-mix(in srgb,var(--color-success) 30%,transparent)}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);background:var(--color-panel-raised);border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:8px 14px;z-index:60;box-shadow:0 8px 24px #00000059;max-width:calc(100% - 32px)}.toast.error{border-color:var(--color-error);color:var(--color-error)}.tools .icon-btn{width:34px;height:34px;min-height:34px}.tools .icon-btn svg{width:17px;height:17px}@media(max-height:820px){.tools{gap:6px}.tools .icon-btn{width:30px;height:30px;min-height:30px}}.timeline{min-height:0;overflow:hidden}.timeline-grid{flex:1;min-height:0;max-height:none}.splitter{position:absolute;z-index:5;background:transparent;touch-action:none}.splitter:after{content:"";position:absolute;background:var(--color-accent);opacity:0;transition:opacity .12s}.splitter:hover:after,.splitter:focus-visible:after,.splitter:active:after{opacity:.8}.splitter:focus-visible{outline:none}.splitter-vertical{top:0;right:0;bottom:0;width:8px;cursor:col-resize}.splitter-vertical:after{top:0;bottom:0;right:0;width:3px}.splitter-horizontal{left:0;right:0;bottom:0;height:8px;cursor:row-resize}.splitter-horizontal:after{left:0;right:0;bottom:0;height:3px}.hud-control{display:inline-flex;align-items:center;gap:6px}.hud-control select{min-height:22px;padding:0 4px;font-size:var(--font-size-small)}.hud-control input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--color-border);border-radius:4px;background:none}@media(max-width:900px){.splitter{display:none}.timeline{overflow:visible}.timeline-grid{max-height:190px}}.color-picker{display:flex;flex-direction:column;gap:10px}.cp-sv{position:relative;height:150px;border-radius:var(--radius-medium);cursor:crosshair;touch-action:none;border:1px solid var(--color-border)}.cp-strip{position:relative;height:16px;border-radius:999px;cursor:pointer;touch-action:none;border:1px solid var(--color-border)}.cp-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-alpha{overflow:visible;background-size:8px 8px}.cp-alpha-fill{position:absolute;inset:0;border-radius:999px}.cp-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0000008c,0 1px 4px #0006;transform:translate(-50%,-50%);pointer-events:none}.cp-sv:focus-visible,.cp-strip:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.cp-row{display:flex;align-items:center;gap:10px}.cp-row .color-preview{width:40px;height:40px;flex:none}.cp-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cp-numbers label{display:flex;flex-direction:column;gap:2px;color:var(--color-text-muted)}.cp-numbers input{width:100%;min-height:26px;padding:2px 6px}.app{grid-template-columns:var(--tools-w, 50px) minmax(0,1fr) var(--side-w, 300px)}.tools{overflow-x:hidden}.tool-btn .tool-label{display:none}.tools.labeled .tool-btn{width:100%;justify-content:flex-start;padding:0 10px;gap:10px}.tools.labeled .tool-btn .tool-label{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.splitter-vertical.splitter-start{left:0;right:auto}.splitter-vertical.splitter-start:after{left:0;right:auto}.layer-list-actions{display:flex;gap:4px;align-items:center;border-top:1px solid var(--color-border);padding-top:6px}.frame-head[draggable=true]{cursor:grab}.frame-head.drop-ok{outline:1px dashed var(--color-accent)}@media(max-width:900px){.app{grid-template-columns:1fr}.tools.labeled .tool-btn{width:34px;padding:0;justify-content:center}.tools.labeled .tool-btn .tool-label{display:none}}.layer-row.multi{background:color-mix(in srgb,var(--color-primary) 18%,var(--color-panel));border-color:color-mix(in srgb,var(--color-primary) 55%,transparent)}.layer-row.drop-ok,.layer-label.drop-ok,.cel.drop-ok{outline:2px dashed var(--color-accent);outline-offset:-2px}.layer-row[draggable=true],.layer-label[draggable=true]{cursor:grab}.frame-head.multi{border-color:color-mix(in srgb,var(--color-accent) 60%,transparent);background:color-mix(in srgb,var(--color-primary) 15%,transparent)}.timeline-grid th.layer-label{cursor:pointer}.timeline-grid th.layer-label.selected-label{color:var(--color-accent)}.timeline-grid tr.row-active>th.layer-label{box-shadow:inset 3px 0 0 var(--color-accent);background:color-mix(in srgb,var(--color-primary) 22%,var(--color-panel))}.timeline-grid tr.row-active>td{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.timeline-grid td.col-active{background:color-mix(in srgb,var(--color-primary) 12%,transparent)}.timeline-grid td.col-multi{background:color-mix(in srgb,var(--color-primary) 6%,transparent)}.timeline-grid tr.row-active>td.col-active{background:transparent}.cel.selected{background:color-mix(in srgb,var(--color-primary) 55%,transparent);box-shadow:inset 0 0 0 2px var(--color-accent)}.cel[draggable=true]{cursor:grab}