:root{color-scheme:dark;--bg:#171c1e;--panel:#202729;--line:#343d40;--text:#e8ece5;--muted:#96a19f;--accent:#c2e88d;--left:224px;--right:292px;--timeline:270px;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;color:var(--text);background:var(--bg)}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow:hidden}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{border:1px solid var(--line);border-radius:5px;background:#2a3235;color:var(--text);padding:7px 10px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
button:hover{background:#394347;border-color:#6e7f7a}
button:disabled{opacity:.35;cursor:default}
button.active{background:#3b4b3c;color:var(--accent);border-color:#647955}
button.primary{background:var(--accent);color:#203021;border-color:var(--accent);font-weight:650}
button.primary:hover{background:#d4f4a9}
.danger{color:#efab9d}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{min-width:0;background:#171e20;border:1px solid var(--line);border-radius:4px;padding:7px;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input:disabled,select:disabled{opacity:.4}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{margin:0 5px 0 0;vertical-align:middle}
input[type=number]{font-family:ui-monospace,Consolas,monospace;width:100%}
input[type=range]{padding:0}
input[type=search]{width:100%}
textarea{resize:vertical}
h1,h2,h3,p{margin:0}
h2{font-size:12px;font-weight:650}
h3{font-size:22px;font-weight:550;letter-spacing:-.5px;margin-bottom:6px}
.topbar{height:62px;background:#202729;border-bottom:1px solid var(--line);padding:0 20px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:16px;font-weight:700;white-space:nowrap}
.brand-light{font-weight:400;color:#abb7b1}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#203021;border-radius:8px;font-size:22px}
.project-label{font-size:10px;letter-spacing:1.4px;color:#b6c3bb}
.divider{color:#697572;margin:0 10px}
.top-actions{margin-left:auto;display:flex;gap:7px;align-items:center}
#saveStatus{font-size:11px;color:var(--muted);margin-right:10px}
.workspace{height:calc(100dvh - 62px);display:grid;grid-template-columns:var(--left) minmax(240px,1fr) var(--right);grid-template-rows:minmax(200px,1fr) var(--timeline)}
.panel{background:var(--panel)}
.library{grid-row:1/3;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:18px 12px 0}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.badge{font-size:10px;border:1px solid #47524a;border-radius:4px;padding:2px 5px;color:#bdc9bb}
.clip-list{overflow-y:auto;max-height:32vh;flex-shrink:0}
.clip-button{border:0;background:transparent;width:100%;display:flex;align-items:center;text-align:left;gap:9px;padding:9px 8px;margin-bottom:2px}
.clip-button .clip-icon{font-size:17px;color:#81918a}
.clip-button .clip-copy{flex:1;min-width:0}
.clip-button b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.clip-button small{display:block;color:#889792;font-size:9px;margin-top:3px}
.clip-button .clip-duration{font:10px ui-monospace,Consolas,monospace;color:#9fad9f}
.clip-button.active{background:#394535}
.clip-button.active .clip-icon{color:var(--accent)}
.library-actions{display:flex;gap:5px;padding:10px 0 18px;border-bottom:1px solid var(--line)}
.library-actions button:first-child{flex:1}
.game-default-actions{display:grid;gap:7px;margin-top:10px}
.game-default-actions button{font-size:10px;white-space:normal}
.bones-heading{margin-top:18px;margin-bottom:10px}
.bone-list{overflow:auto;min-height:70px;flex:1;margin-top:8px;padding-bottom:10px}
.bone-button{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;text-align:left;font-size:11px;padding:7px 5px}
.bone-button.active{background:#354237}
.bone-dot{width:5px;height:5px;border-radius:50%;background:#b6c79c;flex:none}
.asset-card{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding:17px 0;color:#c0ccc1}
.asset-card div{flex:1}
.asset-card b{font-size:11px;font-weight:500}
.asset-card small{display:block;font-size:10px;color:#7e8d86;margin-top:4px}
.asset-dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
#viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#384745 0,#293536 50%,#202a2c 100%);min-height:0}
#viewport canvas{display:block;width:100%;height:100%;touch-action:none}
.viewport-top{position:absolute;top:10px;left:16px;right:16px;z-index:4;pointer-events:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.clip-info{display:flex;align-items:baseline;gap:10px;flex:1 1 180px;min-width:0}
.clip-info h1{font-size:17px;line-height:1.2;font-weight:550;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:55%}
.clip-info #sourceLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.subtle{color:var(--muted);font-size:10px}
.view-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:auto}
.button-group{display:flex;gap:2px;border:1px solid #48534e;padding:3px;border-radius:6px;background:#202827dd}
.button-group button{border:0;background:none;padding:6px 8px;font-size:11px}
.button-group button.active{background:#45513b;color:var(--accent)}
.viewport-bottom{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;align-items:flex-end;z-index:3;pointer-events:none}
.pose-state{font:10px ui-monospace,Consolas,monospace;color:var(--accent);padding:8px 10px;border:1px solid #56674b;border-radius:5px;background:#233024df}
.pose-state.between{color:#cad3ce;border-color:#5c6861;background:#283130df}
.orbit-hint{font-size:9px;color:#a5b2a9;max-width:170px;text-align:right;line-height:1.6}
#joints{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.joint{position:absolute;width:10px;height:10px;min-width:0;padding:0;transform:translate(-50%,-50%);border-radius:50%;background:#b2c697cc;border:1.5px solid #e7f1db;pointer-events:auto;z-index:1;box-shadow:0 0 0 2px #1c252a55}
.joint.active{background:var(--accent);width:14px;height:14px;box-shadow:0 0 0 4px #bedf8555;z-index:2}
.joint:hover{width:16px;height:16px}
.loading{position:absolute;inset:0;z-index:8;background:#20292de8;display:flex;align-items:center;justify-content:center;gap:12px;color:#bac6b4}
.loading[hidden]{display:none}
.loading-ring{width:18px;height:18px;border:2px solid #52604b;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.inspector{grid-column:3;grid-row:1/3;border-left:1px solid var(--line);overflow:auto;padding:18px 16px}
.tiny{font-size:8px;color:#8e9b93;letter-spacing:1px}
.muted{font-size:10px;line-height:1.6;color:var(--muted)}
.transform-tools{margin:16px 0}
.transform-tools button{flex:1}
.field-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 0 7px;color:#c4cec5;font-size:11px}
.field-heading small{font-size:9px;color:#7f9087;margin-left:5px}
.text-button{border:0;background:none;padding:0;font-size:10px;color:#9eae94}
.xyz{display:flex;gap:6px}
.xyz label{display:flex;align-items:center;gap:5px;background:#171e20;border:1px solid var(--line);border-radius:4px;padding-left:7px;font-size:9px;min-width:0;flex:1}
.xyz input{width:100%;border:0;padding:8px 2px;background:transparent;font-size:11px}
.axis-x{color:#df9f91}
.axis-y{color:#b3d49f}
.axis-z{color:#92b9d8}
.check-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:10px;color:#a7b4a8}
.check-row select{font-size:10px;padding:4px;flex:1}
.separated{border-top:1px solid var(--line);padding-top:20px;margin-top:21px}
.field{display:flex;flex-direction:column;gap:7px;font-size:10px;color:#aab7ad;margin:12px 0}
.field select,.field input{width:100%}
.two-fields{display:grid;grid-template-columns:80px 1fr;gap:8px}
.two-fields select{font-size:11px}
.curve-wrap{background:#171e20;border:1px solid var(--line);border-radius:5px;padding:7px;margin:5px 0 10px}
#curve{display:block;width:100%;height:auto;overflow:visible;touch-action:none}
#curveHandles circle{cursor:grab;fill:#202c28;stroke:var(--accent);stroke-width:2}
#curveHandles line{stroke:#92ac77;stroke-width:1}
.curve-labels{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.7px;color:#6f8077;padding:2px 6px}
.range-label{display:grid;grid-template-columns:1fr auto}
.range-label input{grid-column:1/3}
.range-label output{color:var(--accent);font-family:Consolas,monospace}
.bezier-fields{display:flex;gap:6px;margin-bottom:10px}
.bezier-fields[hidden]{display:none}
.bezier-fields label{min-width:0;color:#93a48f;font-size:9px}
.bezier-fields input{margin-top:4px;padding:6px 2px;font-size:10px}
.key-actions{display:flex;gap:5px;margin-top:12px}
.key-actions button{flex:1;font-size:10px}
.pose-actions{margin-top:16px;padding-top:4px;border-top:1px solid var(--line)}
.pose-actions .key-actions{flex-wrap:wrap}
.pose-actions>button{width:100%;margin:8px 0;font-size:11px}
.pose-actions .key-actions button{white-space:normal;min-width:90px}
#editScope{font-size:11px}
#editScope.active{border-color:var(--accent);color:var(--accent)}
.clip-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}
.clip-settings summary{cursor:pointer;color:#bcc8b9;font-size:11px}
.clip-settings button{width:100%;margin:10px 0}
.timeline{grid-column:2;grid-row:2;min-width:0;border-top:1px solid #46524a;display:flex;flex-direction:column}
.transport{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.transport-buttons{display:flex;align-items:center;gap:4px}
.transport-buttons button{padding:5px 6px;font-size:12px;background:none;border-color:transparent}
.transport-buttons .play-button{width:32px;height:30px;background:var(--accent);color:#243422;border:0}
.timecode{display:flex;align-items:center;gap:5px;font-family:Consolas,monospace;white-space:nowrap}
.timecode input{width:48px;padding:6px;font-size:14px;color:var(--accent)}
.timecode>span{font-size:11px;color:#8b9d91}
.timecode small{font-size:10px;color:#9caaa1;margin-left:4px}
.transport-options{margin-left:auto;display:flex;gap:8px;align-items:center}
.transport-options select{padding:5px;font-size:10px}
.transport-options button{font-size:11px}
.key-tools{display:flex;align-items:stretch;gap:5px;flex-shrink:0}
.key-tools .icon-button{display:grid;place-items:center;width:32px;padding:5px}
.check-label,.auto-key{font-size:10px;white-space:nowrap}
.auto-key{color:#d8b79e}
.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 15px;font-size:10px}
.timeline-toolbar b{font-size:11px;font-weight:500}
.timeline-toolbar label{display:flex;align-items:center;gap:5px;color:#91a194}
.timeline-toolbar input{width:65px}
.timeline-legend{font-size:9px;color:#8b9d90}
.timeline-legend i{display:inline-block;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);margin-right:4px}
.dope-sheet{display:flex;min-height:0;flex:1;overflow:hidden;border-top:1px solid var(--line)}
.track-labels{flex:0 0 106px;background:#252e30;z-index:2;border-right:1px solid var(--line)}
.track-labels>span,.track-labels>button{display:flex;height:28px;align-items:center;gap:6px;padding:0 12px;font-size:10px;width:100%;border:0;border-radius:0;border-bottom:1px solid #344042;background:none;text-align:left}
.track-labels>span{height:27px;font-size:8px;letter-spacing:1px;color:#7b8e7f}
.track-labels>button.active{background:#394834;color:var(--accent)}
.track-dot{width:5px;height:5px;display:inline-block;border-radius:50%}
.rotation{background:#c2e88d}
.position{background:#91bccf}
.scale{background:#cfafdb}
#timelineScroll{overflow:auto;flex:1;position:relative;background:#192123}
#timelineCanvas{position:relative;min-width:100%;height:139px;user-select:none;touch-action:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--grid-size,40px) - 1px),#2b3839 calc(var(--grid-size,40px) - 1px),#2b3839 var(--grid-size,40px));background-position:16px 0}
#ruler{height:27px;border-bottom:1px solid var(--line);position:relative;cursor:col-resize}
#ruler span{position:absolute;top:6px;color:#8e9e90;font:9px Consolas,monospace;transform:translateX(-50%);pointer-events:none}
.track{position:relative;height:28px;border-bottom:1px solid #2e3b3b;cursor:crosshair}
.track.active{background:#bfdc8710}
.key{position:absolute;top:9px;width:9px;height:9px;border-radius:1px;border:1px solid #bed398;background:#8ea978;transform:translateX(-50%) rotate(45deg);padding:0;z-index:2;cursor:ew-resize}
.key:hover{background:#e8ffb8;border-color:#f1ffdf}
.key.selected{background:#ecffb4;box-shadow:0 0 0 3px #a4c87644}
.summary .key{width:5px;height:5px;top:11px;background:#71876c;border:0;opacity:.7;pointer-events:auto}
.track[data-row=position] .key{background:#83aebe;border-color:#b1d1e1}
.track[data-row=scale] .key{background:#ac91bc;border-color:#d2b9e1}
#playhead{position:absolute;top:0;bottom:0;width:1px;background:#d5f19f;z-index:4;pointer-events:none}
#playheadLabel{position:absolute;top:0;left:0;transform:translateX(-50%);background:var(--accent);color:#283720;padding:2px 5px;font:10px Consolas,monospace;border-radius:0 0 3px 3px}
.timeline-footer{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;color:#8c9e90;font-size:9px;border-top:1px solid var(--line)}
#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#d0eaaa;color:#24351e;border:1px solid #e1f3c7;box-shadow:0 5px 25px #0006;border-radius:7px;padding:12px 18px;z-index:30;max-width:80vw}
#notice.error{background:#533830;border-color:#a6755e;color:#ffe5d2}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#4a5952;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
body.playing .joint{display:none}

@media(min-width:1500px){:root{--left:240px;--right:310px;--timeline:270px}
.library{padding-left:17px;padding-right:17px}
.inspector{padding:22px}
}

@media(max-width:1190px){:root{--left:190px;--right:270px;--timeline:310px}
.topbar{gap:15px;padding:0 14px}
.project-label{display:none}
.transport{gap:8px;padding:8px}
.transport-options{width:100%;justify-content:flex-end;gap:9px}
.transport .timecode{margin-left:auto}
.timeline-legend{display:none}
.viewport-top{left:12px;right:12px;gap:7px 10px}
.view-tools{gap:5px}
.button-group button{padding:5px 6px;font-size:10px}
.timeline-footer>span:last-child{display:none}
.orbit-hint{display:none}
.inspector{padding:16px 12px}
}

@media(max-width:900px){:root{--left:155px;--right:240px;--timeline:300px}
.brand-light{font-size:12px}
#saveStatus{display:none}
.topbar{padding:0 9px}
.top-actions{gap:4px}
.top-actions button{font-size:10px;padding:7px}
.project-label{display:none}
.library{padding:13px 8px 0}
.clip-button{padding:8px 5px}
.clip-duration{display:none}
.transport-options{gap:5px}
.check-label{display:none}
.timecode small{font-size:9px}
.timeline-toolbar{padding:9px}
.track-labels{flex-basis:85px}
.track-labels>button{padding:0 7px}
.two-fields{grid-template-columns:70px 1fr}
.key-actions button{padding:6px}
.xyz{gap:3px}
}

@media(max-width:700px){body{overflow:auto}
.topbar{position:sticky;top:0;z-index:20;height:54px}
.brand-light{display:none}
.workspace{height:auto;min-height:calc(100dvh - 54px);grid-template-columns:120px minmax(220px,1fr);grid-template-rows:450px 300px auto}
.library{grid-column:1;grid-row:1/3}
.inspector{grid-row:3;grid-column:1/3;display:block;overflow:visible;border-top:1px solid var(--line);padding:22px}
.timeline{grid-column:2;grid-row:2}
#viewport{grid-row:1;grid-column:2}
.clip-list{max-height:280px}
.transport-options{flex-wrap:wrap}
.timeline-toolbar{flex-wrap:wrap}
.timeline-footer{font-size:8px}
.library-actions button{font-size:9px;padding:5px}
.asset-card{font-size:9px}
.asset-card small{font-size:8px}
.viewport-bottom{left:10px;right:10px}
.pose-state{font-size:8px}
.top-actions button{padding:6px}
.curve-wrap{max-width:360px}
.inspector .section-heading{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
}