@font-face{font-family:CS Claire Mono;src:url(/fonts/CSClaireMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--ink: #070707;--cream: #fbf8f0;--lime: #d2f751;--orange: #f54d02;--lavender: #b5bbf7;--purple: #853cff;--chrome: #0d0e0f;--panel: #131416;--raised: #1f2124;--hover: #26282c;--line: #222428;--line-strong: #33363b;--text: var(--cream);--text-2: #a7adb4;--text-3: #69727d;--border-color: var(--line-strong);--text-secondary: var(--text-2);--text-primary: var(--text);--accent: var(--lime);--sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "CS Claire Mono", ui-monospace, "SF Mono", Menlo, monospace;--rail-w: 56px;--side-w: 256px;--bar-h: 48px;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--text);-webkit-font-smoothing:antialiased;color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--ink);overflow:hidden;height:100vh;width:100vw}#root{height:100vh;width:100vw}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:disabled{cursor:default;opacity:.3}:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:6px}kbd{font-family:var(--mono);font-size:11px;color:var(--text-3)}.app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.topbar{display:flex;align-items:center;gap:16px;height:var(--bar-h);padding:0 12px 0 16px;background:var(--chrome);border-bottom:1px solid var(--line);flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-name{font-weight:700;font-size:15px;letter-spacing:-.01em}.tabs{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{display:flex;align-items:center;gap:8px;flex-shrink:0;max-width:180px;height:32px;padding:0 4px 0 8px;border-radius:8px;color:var(--text-3);cursor:pointer;transition:background .12s,color .12s}.tab:hover{background:var(--panel);color:var(--text-2)}.tab.is-active{background:var(--raised);color:var(--text)}.tab-thumb{width:18px;height:18px;border-radius:4px;flex-shrink:0}.tab-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-rename{width:120px;height:24px;padding:0 6px;border-radius:5px;border:1px solid var(--lime);background:var(--ink);color:var(--text);font:inherit;font-size:13px}.tab-rename:focus{outline:none}.tab-close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;color:var(--text-3);opacity:0;flex-shrink:0}.tab:hover .tab-close,.tab.is-active .tab-close,.tab-close:focus-visible{opacity:1}.tab-close:hover{background:var(--hover);color:var(--text)}.tab-new{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;margin-left:2px;border-radius:7px;color:var(--text-3)}.tab-new:hover{background:var(--raised);color:var(--lime)}.undo-redo{display:flex;gap:2px}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.bar-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font-weight:500;color:var(--text-2);transition:background .12s,color .12s}.bar-btn:hover,.bar-btn.is-open{background:var(--raised);color:var(--text)}.bar-btn-accent{background:var(--lime);color:var(--ink);font-weight:600;margin-left:4px}.bar-btn-accent:hover{background:#e0ff73;color:var(--ink)}.bar-link{height:32px;padding:0 10px;color:var(--text-3);font-size:12px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}.bar-link:hover{color:var(--text);text-decoration-color:var(--lime)}.menu{position:relative}.menu-list{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;padding:6px;background:var(--raised);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 32px #00000080;z-index:100}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;color:var(--text-2);text-align:left}.menu-item:hover{background:var(--hover);color:var(--text)}.menu-item kbd{margin-left:auto}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--text-2);transition:background .12s,color .12s}.icon-btn:hover:not(:disabled){background:var(--raised);color:var(--text)}.icon-btn.is-active{color:var(--lime)}.icon-btn.is-danger:hover:not(:disabled){color:var(--orange)}.icon-btn-sm{width:26px;height:26px;border-radius:6px}.icon-btn-xs{width:22px;height:22px;border-radius:5px}.editor{flex:1;min-height:0;display:grid;grid-template-columns:var(--rail-w) 1fr var(--side-w);grid-template-rows:1fr;grid-template-areas:"rail stage side"}.rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0;background:var(--chrome);border-right:1px solid var(--line);z-index:2}.rail-tools{display:flex;flex-direction:column;gap:2px}.rail-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--text-2);transition:background .12s,color .12s}.rail-btn:hover:not(:disabled){background:var(--raised);color:var(--text)}.rail-btn.is-active{background:var(--lime);color:var(--ink)}.rail-btn-sm{width:32px;height:28px;border-radius:8px}.rail-size{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:12px;border-top:1px solid var(--line)}.rail-size-value{font-family:var(--mono);font-size:13px;line-height:20px}.stage{grid-area:stage;position:relative;min-width:0;min-height:0;background:var(--ink)}.drawing-canvas-container{position:absolute;inset:0;overflow:hidden}.drawing-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.view-controls{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;padding:4px;background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;box-shadow:0 8px 24px #00000073}.pill-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;color:var(--text-2)}.pill-btn:hover{background:var(--hover);color:var(--text)}.pill-btn.is-active,.pill-btn.is-locked{color:var(--lime)}.pill-btn:disabled{opacity:.3;cursor:default}.pill-btn:disabled:hover{background:none;color:var(--text-2)}.pill-btn:disabled[data-tip]:hover:after{opacity:1;transition-delay:.35s}.zoom-value{font-family:var(--mono);font-size:12px;min-width:48px;text-align:center;color:var(--text-2)}.pill-divider{width:1px;height:18px;background:var(--line-strong);margin:0 4px}.side{grid-area:side;display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}.panel{padding:14px 14px 16px;border-bottom:1px solid var(--line)}.panel-grow{flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:none}.panel-head{display:flex;align-items:center;justify-content:space-between;min-height:26px;margin-bottom:12px}.panel-title{font-size:13px;font-weight:600}.panel-actions{display:flex;gap:2px}.panel-meta{font-family:var(--mono);font-size:11px;color:var(--text-3)}.colour-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}.colour-pair{position:relative;width:64px;height:52px;flex-shrink:0}.colour-chip{position:absolute;display:block;border-radius:50%;cursor:pointer;box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--line-strong)}.colour-chip.is-primary{left:0;top:0;width:44px;height:44px;z-index:1}.colour-chip.is-secondary{right:0;bottom:0;width:30px;height:30px}.colour-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.colour-meta{display:flex;align-items:center;gap:4px}.colour-hex{font-family:var(--mono);font-size:12px;color:var(--text-2)}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.palette-dot{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px #fbf8f01f;transition:transform .12s}.palette-dot:hover{transform:scale(1.12)}.palette-dot.is-current{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--lime)}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--lime) var(--fill, 50%),var(--line-strong) var(--fill, 50%));cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cream);border:3px solid var(--ink)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--cream);border:3px solid var(--ink)}.ref-drop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--text-2);font-weight:500;transition:color .12s,border-color .12s,background .12s}.ref-drop:hover,.ref-drop.is-over{color:var(--lime);border-color:var(--lime);background:#d2f7510a}.ref-note{margin-top:8px;font-size:12px;color:var(--text-3)}.ref-error{margin-top:8px;font-size:12px;color:#ff8a52}.ref-row{display:flex;align-items:center;gap:12px}.ref-thumb{width:48px;height:48px;object-fit:contain;border-radius:8px;background:var(--raised);flex-shrink:0}.ref-buttons{display:flex;gap:4px;flex-wrap:wrap}.chip{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-2);font-size:12px;font-weight:500;transition:background .12s,color .12s,border-color .12s}.chip:hover{color:var(--text);background:var(--raised)}.chip.is-active{background:var(--lime);border-color:var(--lime);color:var(--ink)}.ref-opacity{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--text-3)}.ref-opacity input{flex:1}.ref-opacity-value{font-family:var(--mono);min-width:36px;text-align:right;color:var(--text-2)}.ref-match{margin-top:10px;font-size:12px;color:var(--text-3);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}.ref-match:hover{color:var(--text);text-decoration-color:var(--lime)}.icon-btn.is-off{color:var(--text-3)}.frames-controls{display:flex;align-items:center;gap:2px;margin:-4px 0 12px -6px}.controls-divider{width:1px;height:20px;background:var(--line-strong);margin:0 6px}.play-btn.is-active{background:var(--lime);color:var(--ink)}.play-btn.is-active:hover:not(:disabled){background:var(--lime);color:var(--ink)}.fps{display:inline-flex;align-items:baseline;gap:4px;height:32px;padding:0 8px;border-radius:8px;font-family:var(--mono);font-size:12px;color:var(--text-3);line-height:32px}.fps:hover,.fps:focus-within{background:var(--raised)}.fps input{width:24px;background:none;border:none;font:inherit;color:var(--text);text-align:right}.fps input:focus{outline:none}.frames-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow-y:auto;padding:3px;margin:-3px;align-content:start}.frame{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .12s}.frame canvas{display:block;width:100%;height:100%}.frame:hover{transform:translateY(-1px)}.frame.is-active{box-shadow:0 0 0 2px var(--lime)}.frame.is-dragging{opacity:.35}.frame.is-drop-target{box-shadow:0 0 0 2px var(--lavender)}.frame-num{position:absolute;left:4px;bottom:2px;font-family:var(--mono);font-size:10px;color:var(--cream);text-shadow:0 0 3px var(--ink),0 0 2px var(--ink)}.frame-add{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:8px;color:var(--text-3);border:1px dashed var(--line-strong)}.frame-add:hover{color:var(--lime);border-color:var(--lime)}:where([data-tip]){position:relative}[data-tip]:after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:5px 8px;border-radius:6px;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s;z-index:200}[data-tip][data-key]:after{content:attr(data-tip) "   " attr(data-key);white-space:pre}[data-tip]:hover:after,[data-tip]:focus-visible:after{opacity:1;transition-delay:.35s}[data-tip-side=top]:after{left:50%;top:auto;bottom:calc(100% + 8px);transform:translate(-50%)}[data-tip-side=bottom]:after{left:50%;top:calc(100% + 8px);transform:translate(-50%)}.side [data-tip]:after{left:auto;right:calc(100% + 8px)}.modal-overlay{position:fixed;inset:0;background:#070707b8;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.modal{background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:24px;min-width:min(360px,100%);max-width:100%;box-shadow:0 24px 64px #0009}.modal-title{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:18px}.modal-field{margin-bottom:14px}.modal-field label{display:block;font-size:12px;color:var(--text-2);margin-bottom:6px}.modal-input{width:100%;height:36px;padding:0 12px;background:var(--ink);border:1px solid var(--line-strong);border-radius:8px;color:var(--text);font:inherit}textarea.modal-input{height:auto;padding:10px 12px}.modal-input:focus{outline:none;border-color:var(--lime)}.modal-row{display:flex;gap:12px}.modal-row .modal-field{flex:1}.modal-info{font-size:12px;color:var(--text-3);margin-bottom:18px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.btn{height:36px;padding:0 16px;border-radius:8px;font-weight:600;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s}.btn-primary{background:var(--lime);color:var(--ink)}.btn-primary:hover:not(:disabled){background:#e0ff73}.btn-secondary{color:var(--text-2);border-color:var(--line-strong)}.btn-secondary:hover:not(:disabled){color:var(--text);background:var(--raised)}.btn-danger{background:var(--orange);color:var(--ink)}.btn-danger:hover:not(:disabled){background:#ff6a26}.feedback-modal{width:min(440px,calc(100vw - 32px));min-width:0;max-height:90vh;overflow-y:auto}.feedback-header{display:flex;align-items:flex-start;justify-content:space-between}.feedback-close{width:28px;height:28px;border-radius:6px;color:var(--text-3)}.feedback-close:hover{background:var(--raised);color:var(--text)}.feedback-textarea{resize:vertical}.feedback-error{border:1px solid var(--orange);color:#ff8a52;background:#f54d0214;border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:14px}.feedback-success{text-align:center;padding:24px 0 12px}.feedback-success-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:24px;line-height:48px}.feedback-success h3{font-size:16px;margin-bottom:4px}.feedback-success p{font-size:13px;color:var(--text-2)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@media(prefers-reduced-motion:reduce){*,*:after{transition:none!important}}@media(max-width:900px){:root{--side-w: 216px}.bar-link{display:none}}