:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e8ece7;background:#101411;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #7de5ae;outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.workshop{height:100vh;min-height:680px;display:flex;flex-direction:column;overflow:hidden;background:#101411}.topbar{height:62px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 25px;border-bottom:1px solid #29342d;background:#171d19}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #548868;border-radius:8px;background:#21382a;color:#a5f0be;font-size:23px}.brand strong,.brand small{display:block}.brand strong{font-size:12px;letter-spacing:.18em}.brand small{margin-top:3px;color:#859489;font-size:10px;letter-spacing:.055em}.header-actions{display:flex;align-items:center;gap:16px}.local-badge{display:flex;align-items:center;gap:8px;color:#88b999;font:700 10px ui-monospace,monospace;letter-spacing:.12em}.local-badge i{width:6px;height:6px;border-radius:50%;background:#8be5a4;box-shadow:0 0 9px #8be5a4}.primary,.secondary,.small,.danger,.fill-button{border-radius:6px;min-height:32px;padding:6px 12px;font-size:12px;font-weight:700}.primary{border:1px solid #8be5a4;background:#8be5a4;color:#102017}.primary:hover:not(:disabled){background:#b0f4c1}.secondary,.small,.fill-button{border:1px solid #3b5644;background:#1b2a20;color:#cbe8d1}.secondary:hover:not(:disabled),.small:hover:not(:disabled),.fill-button:hover:not(:disabled){border-color:#74b48a;background:#233d2b}.danger{border:1px solid #583534;background:#271b1b;color:#dfa9a4}.danger:hover{border-color:#a66660;background:#3c2423}.intro{min-height:116px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 29px 20px;border-bottom:1px solid #29342d;background:linear-gradient(115deg,#18241b,#141a17 60%,#19221b)}.eyebrow{color:#83ad90;font:700 10px ui-monospace,monospace;letter-spacing:.15em}.intro h1{margin:8px 0 4px;font-size:24px;font-weight:720;letter-spacing:-.035em}.intro p{margin:0;color:#9baa9e;font-size:12px}.source-meta{min-width:220px;max-width:30%;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}.source-meta span{color:#789381;font:700 10px ui-monospace,monospace;letter-spacing:.14em}.source-meta strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.source-meta small{color:#829187;font:11px ui-monospace,monospace}.message{z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 22px;background:#1e3425;color:#b6e9c4;font-size:12px}.message.error{background:#392421;color:#f6c0b9}.message button{border:0;background:transparent;color:inherit;font-size:18px}.workspace{min-height:0;flex:1;display:grid;grid-template-columns:255px minmax(320px,1fr) 320px}.panel{min-height:0;display:flex;flex-direction:column;background:#161d18}.frames-panel{border-right:1px solid #2a352d}.detail-panel{overflow:auto;border-left:1px solid #2a352d}.panel-head{min-height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #2b352e}.panel h2{margin:6px 0 0;font-size:15px;font-weight:680;letter-spacing:-.01em}.panel h2 em{margin-left:5px;color:#7f9a85;font: 11px ui-monospace,monospace}.frames-list{min-height:0;flex:1;overflow:auto;padding:9px}.frame-row{width:100%;display:flex;align-items:center;gap:10px;margin:0 0 5px;border:1px solid transparent;border-radius:8px;background:transparent;padding:7px;color:inherit;text-align:left}.frame-row:hover{background:#1d2a20}.frame-row.active{border-color:#6aac80;background:#203528;box-shadow:inset 3px 0 #93e7ab}.thumbnail{width:52px;height:52px;flex:none;border:1px solid #405346;border-radius:4px;object-fit:contain;image-rendering:pixelated}.frame-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}.frame-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.frame-text small{color:#8b9d90;font:10px ui-monospace,monospace;white-space:nowrap}.frame-index{align-self:flex-start;color:#718879;font:10px ui-monospace,monospace}.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:230px;padding:22px;text-align:center}.panel-empty>span{color:#668773;font-size:30px}.panel-empty strong{font-size:13px}.panel-empty p{max-width:180px;margin:0;color:#8c9d91;font-size:11px;line-height:1.5}.panel-foot{flex:none;border-top:1px solid #2b352e;padding:13px 15px;color:#708375;font:10px ui-monospace,monospace}.canvas-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#111712}.canvas-toolbar{min-height:49px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 13px;border-bottom:1px solid #29352c;background:#19211b}.tool-group,.zoom-controls{display:flex;align-items:center;gap:4px}.tool,.zoom-controls button{min-height:30px;border:1px solid #37483c;border-radius:5px;background:#1d2920;padding:5px 8px;color:#afc6b4;font-size:11px}.tool.active{border-color:#5b9e71;background:#274531;color:#c6f7d1}.tool span{margin-left:5px}.toolbar-hint{overflow:hidden;color:#82988a;font-size:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.zoom-controls output{min-width:42px;color:#d0e6d5;font:11px ui-monospace,monospace;text-align:center}.zoom-controls button:last-child{font-weight:700}.stage{position:relative;min-height:0;flex:1;overflow:hidden;touch-action:none;cursor:crosshair;background-color:#101610;background-image:radial-gradient(#2a392d 1px,transparent 1px);background-size:20px 20px}.stage.panning{cursor:grab}.stage.drag-over{box-shadow:inset 0 0 0 2px #8be5a4}.checker{background-color:#d2d8d2;background-image:linear-gradient(45deg,#aeb8ae 25%,transparent 25%),linear-gradient(-45deg,#aeb8ae 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aeb8ae 75%),linear-gradient(-45deg,transparent 75%,#aeb8ae 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.image-surface{position:absolute;box-shadow:0 18px 75px #000a,0 0 0 1px #7fa48a;-webkit-user-select:none;user-select:none}.source-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.region{position:absolute;z-index:2;min-width:1px;min-height:1px;border:1px solid #bff7a0;outline:1px solid #102415;background:#a3f5941c;cursor:move}.region.selected{z-index:3;border:2px solid #a4ffb7;background:#a4ffb716;box-shadow:0 0 0 1px #10301b,0 0 14px #76ef9140}.region.drafting{z-index:4;border-style:dashed;pointer-events:none}.region-tag{position:absolute;bottom:100%;left:-2px;max-width:160px;overflow:hidden;background:#1e4128;padding:3px 5px;color:#e5ffeb;font:10px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.handle{position:absolute;z-index:5;width:9px;height:9px;border:1px solid #244a2a;background:#b7ffbf;transform:translate(-50%,-50%)}.handle-nw{left:0;top:0;cursor:nwse-resize}.handle-n{left:50%;top:0;cursor:ns-resize}.handle-ne{left:100%;top:0;cursor:nesw-resize}.handle-e{left:100%;top:50%;cursor:ew-resize}.handle-se{left:100%;top:100%;cursor:nwse-resize}.handle-s{left:50%;top:100%;cursor:ns-resize}.handle-sw{left:0;top:100%;cursor:nesw-resize}.handle-w{left:0;top:50%;cursor:ew-resize}.drop-prompt{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center}.drop-mark{display:grid;place-items:center;width:92px;height:92px;border:1px dashed #547e5c;border-radius:18px;background:#1a2b1e;color:#9ad7a5;font-size:50px}.drop-prompt strong{font-size:18px}.drop-prompt p{max-width:240px;margin:0;color:#8ba08f;font-size:12px;line-height:1.5}.drop-cover{position:absolute;z-index:8;top:12px;right:12px;bottom:12px;left:12px;display:grid;place-items:center;border:2px dashed #9eeab4;border-radius:12px;background:#152d20dc;color:#e1ffdf;font-size:18px;font-weight:700;pointer-events:none}.stage-footer{height:31px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-top:1px solid #29352c;color:#718778;font:10px ui-monospace,monospace;letter-spacing:.055em}.details{padding:15px}.field{display:flex;flex-direction:column;gap:6px}.field span,.preview-label{color:#8ea392;font:700 10px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.field input,.slot select,.play-controls input{width:100%;min-width:0;border:1px solid #3b4a3e;border-radius:5px;background:#111a13;padding:8px 9px;color:#e9f2e9;font-size:12px}.field input:focus,.slot select:focus{border-color:#8bdd9e}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.preview-label{display:flex;justify-content:space-between;gap:10px;margin:22px 0 8px}.preview-label span{color:#6e8976}.selected-preview,.animation-preview{display:grid;place-items:center;overflow:hidden;border:1px solid #4a5f4b;border-radius:6px}.selected-preview{height:170px}.selected-preview canvas,.animation-preview canvas{display:block;max-width:90%;max-height:90%;object-fit:contain;image-rendering:pixelated}.detail-actions{display:flex;gap:8px;margin-top:13px}.detail-actions button{flex:1}.help{margin:12px 0 0;color:#859788;font-size:11px;line-height:1.5}.details-empty{min-height:360px}.animation{margin-top:auto;border-top:1px solid #2b352e;padding:16px}.animation-head h2{margin-top:6px}.animation-head p{margin:7px 0 13px;color:#8ea193;font-size:11px;line-height:1.45}.animation-preview{height:142px;color:#607b68;font:11px ui-monospace,monospace}.play-controls{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:12px 0}.play-controls button{height:30px;min-width:31px;border:1px solid #455948;border-radius:5px;background:#1f3023;color:#d0e8d2}.play-controls .play-button{min-width:71px;border-color:#6fb981;background:#2c5334;color:#d9ffdc;font-weight:700}.play-controls label{display:flex;align-items:center;gap:6px;margin-left:auto;color:#a4bca9;font:10px ui-monospace,monospace}.play-controls input{width:51px;padding:6px 4px;text-align:center}.motion-note{color:#c7ae78;font-size:10px;line-height:1.4}.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.slot{display:flex;align-items:center;gap:5px;min-width:0;border:1px solid #2b3a2f;border-radius:5px;padding:3px 5px}.slot.active{border-color:#65a978;background:#1d3323}.slot span{color:#83a18b;font:10px ui-monospace,monospace}.slot select{flex:1;width:0;border:0;background:transparent;padding:4px 1px;color:#cce2ce;font-size:11px}.fill-button{width:100%;margin-top:9px;background:transparent;color:#95bd9b;font-size:11px}@media (max-width:1100px){.workspace{grid-template-columns:220px minmax(280px,1fr) 285px}.toolbar-hint{display:none}.intro{min-height:100px}.intro h1{font-size:21px}}@media (max-width:820px){.workshop{height:auto;min-height:100vh;overflow:auto}.workspace{display:grid;grid-template-columns:1fr 1fr}.canvas-panel{grid-column:1/-1;grid-row:1;height:520px}.frames-panel,.detail-panel{min-height:450px;border-top:1px solid #2a352d}.intro{align-items:flex-start}.source-meta{min-width:150px}}@media (max-width:560px){.topbar{padding:0 12px}.brand small,.local-badge,.source-meta{display:none}.intro{padding:15px}.intro h1{font-size:19px}.intro p{line-height:1.4}.workspace{display:flex;flex-direction:column}.canvas-panel{height:460px;flex:none}.frames-panel{min-height:260px}.detail-panel{min-height:300px}.stage-footer span:last-child{display:none}}.frame-row{padding:4px;gap:2px}.frame-select{min-width:0;flex:1;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:3px;color:inherit;text-align:left}.row-delete{width:32px;height:32px;flex:none;border:1px solid transparent;border-radius:5px;background:transparent;color:#eeaaa2;font-size:20px;opacity:0}.frame-row:hover .row-delete,.frame-row:focus-within .row-delete{opacity:1}.row-delete:hover,.row-delete:focus-visible{border-color:#9a5550;background:#402321}@media (hover: none){.row-delete{opacity:1}}.undo-button{margin-left:auto;border:1px solid #82bc8d;border-radius:4px;background:#285137;padding:4px 8px;color:#e6ffea;font-size:11px}.detector{flex:none;max-height:50%;overflow:auto;border-top:1px solid #344538}.detector summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 15px;color:#add9b4;font-size:12px;font-weight:700}.detector summary:hover{background:#203124}.detector-body{padding:0 13px 14px}.detector-body p{margin:0 0 11px;color:#8da292;font-size:11px;line-height:1.45}.field select{width:100%;border:1px solid #3b4a3e;border-radius:5px;background:#111a13;padding:8px 9px;color:#e9f2e9;font-size:12px}.detector-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}.detector-grid .field span{font-size:9px}.detector-generate{width:100%;margin:3px 0 8px}.suggestion-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0;color:#aedab7;font-size:11px}.suggestion-head button{border:0;background:transparent;color:#d99b91;font-size:10px}.suggestion-list{max-height:140px;overflow:auto;border:1px solid #354438;border-radius:5px}.suggestion{width:100%;display:flex;flex-direction:column;gap:3px;border:0;border-bottom:1px solid #2c3b30;background:#18231b;padding:7px;color:#c6e4cd;text-align:left;font-size:11px}.suggestion small{color:#8aa894;font:10px ui-monospace,monospace}.suggestion.active{background:#2e4935}.suggestion-actions{display:flex;gap:6px}.suggestion-actions button{flex:1;font-size:10px}.suggestion-region{z-index:1;border:1px dashed #ffc875;outline:0;background:#ffca571c;cursor:pointer}.suggestion-region.focused{border:2px dashed #ffe4a0;background:#ffce5735}.suggestion-region .region-tag{display:none;background:#765323;color:#fff1cf}.suggestion-region.focused .region-tag{display:block}.anchors{margin-top:12px}.alignment-controls{display:grid;gap:9px;margin-bottom:13px;border:1px solid #344c3a;border-radius:7px;background:#1a281e;padding:10px}.alignment-controls .field-grid{margin:0;gap:8px}.alignment-controls .field-grid .field span{font-size:9px}.check-field{display:flex;align-items:center;gap:7px;color:#cce6d0;font-size:11px;font-weight:650}.check-field input{accent-color:#8be5a4}.check-field.guides{align-self:end;min-height:33px}.alignment-controls .layout-size{margin:0;color:#bceac4;font:10px ui-monospace,monospace}.alignment-controls .motion-note{margin:0}@media (max-width: 820px){.detector{max-height:350px}}