:root {
    color-scheme:dark;
    --bg:#282b30;
    --panel:#303338;
    --panel-deep:#272a2e;
    --surface:#3b3e43;
    --field:#24272b;
    --line:#46494e;
    --line-dark:#202226;
    --text:#d5d7da;
    --muted:#8f959e;
    --accent:#85abc5;
    --gold:#e0b274;
    --selected:#475765;
    --timeline-height:176px;
    font:12px/1.4 "Segoe UI",Arial,sans-serif
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    height:100dvh;
    overflow:hidden;
    background:var(--bg);
    color:var(--text);
    display:flex;
    flex-direction:column;
    min-width:850px
}

button,input,select {
    font:inherit;
    color:inherit
}

button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    border:1px solid transparent;
    background:transparent;
    border-radius:3px;
    min-height:24px;
    padding:3px 7px;
    white-space:nowrap
}

button:hover {
    background:#ffffff0b;
    border-color:#ffffff0c
}

button:active {
    background:#ffffff16
}

button.active {
    background:var(--selected);
    border-color:#7996ad66;
    color:#e9f4fc
}

button:disabled {
    opacity:.35;
    cursor:default
}

button svg {
    flex-shrink:0
}

input,select {
    background:var(--field);
    border:1px solid #484c53;
    border-radius:3px;
    min-height:25px;
    padding:3px 6px;
    min-width:0
}

input:focus,select:focus {
    outline:1px solid var(--accent);
    border-color:var(--accent)
}

input[type=number] {
    appearance:textfield
}

input::-webkit-inner-spin-button {
    opacity:.2
}

input[type=range] {
    height:17px;
    padding:0;
    accent-color:var(--accent);
    cursor:ew-resize
}

input[type=checkbox] {
    accent-color:var(--accent);
    min-height:0
}

input[type=color] {
    padding:2px;
    width:43px;
    height:26px;
    cursor:pointer
}

button:focus-visible,a:focus-visible {
    outline:1px solid #b2d4ec;
    outline-offset:-2px
}

[hidden] {
    display:none!important
}

svg {
    vertical-align:middle;
    flex-shrink:0
}

.icon-button {
    width:28px;
    padding:4px
}

.titlebar {
    height:43px;
    flex:none;
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 13px;
    border-bottom:1px solid var(--line-dark);
    background:#24272b
}

.brand {
    display:flex;
    align-items:center;
    gap:8px;
    color:inherit;
    text-decoration:none
}

.brand strong {
    font-size:21px;
    font-weight:600;
    letter-spacing:-1px;
    color:#e3e7ea
}

.brand strong span {
    color:var(--gold)
}

.brand small {
    font:9px/1.2 Consolas,monospace;
    letter-spacing:.1em;
    color:#8d99a4;
    padding-left:3px
}

.title-divider {
    height:18px;
    width:1px;
    background:#4a4e53;
    margin:0 3px
}

.title-spacer,.toolbar-spacer,.menu-spacer,.document-spacer {
    flex:1
}

#scene-title {
    font-size:12px;
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    justify-content:flex-start;
    color:#bec7cf
}

#dirty-mark {
    font-size:8px;
    color:var(--gold);
    margin-left:-12px
}

.engine-badge {
    display:flex;
    align-items:center;
    gap:6px;
    font:9px Consolas,monospace;
    letter-spacing:.06em;
    color:#9caab7;
    padding-right:10px
}

.engine-badge i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#9dc7b8;
    box-shadow:0 0 6px #9dc7b82b
}

.workspace-caption {
    color:var(--muted);
    font-size:10px
}

.workspace-switch {
    display:flex;
    background:#181b1f;
    border:1px solid #4a5159;
    border-radius:4px;
    padding:2px
}

.workspace-switch button {
    height:24px;
    min-height:24px;
    width:68px;
    font-size:11px
}

.workspace-switch button.active {
    background:#4b5b69;
    border-color:#6d8397
}

.menu-row {
    height:27px;
    flex:none;
    display:flex;
    align-items:center;
    padding:0 7px;
    border-bottom:1px solid var(--line-dark);
    background:#303338
}

.menu-row nav {
    display:flex;
    align-items:center;
    height:100%
}

.menu-row nav button {
    min-height:22px;
    border-radius:0;
    font-size:11px;
    padding:1px 9px
}

.menu-note {
    font-size:10px;
    color:#858c94;
    padding-right:9px
}

.main-toolbar {
    height:40px;
    flex:none;
    display:flex;
    align-items:center;
    padding:0 9px;
    gap:8px;
    background:#34373c;
    border-bottom:1px solid #202226
}

.tool-group {
    display:flex;
    align-items:center;
    gap:2px;
    padding-right:8px;
    border-right:1px solid #51545a
}

.main-toolbar button {
    height:28px;
    font-size:11px
}

.main-toolbar select {
    height:25px;
    font-size:11px;
    width:69px
}

.main-toolbar .component-tools button {
    font-size:10px;
    padding:3px 6px
}

.component-tools svg {
    width:14px;
    height:14px
}

.component-tools button.active {
    background:#5c513e;
    color:#f0d1a4;
    border-color:#9b80584f
}

.mesh-tools button {
    padding:3px 7px
}

.toolbar-text {
    font-size:11px
}

.document-tabs {
    height:29px;
    flex:none;
    display:flex;
    align-items:stretch;
    padding-left:9px;
    background:#24272b;
    border-bottom:1px solid #141619
}

.document-tab {
    border-radius:3px 3px 0 0;
    min-width:163px;
    justify-content:flex-start;
    padding:4px 12px;
    font-size:11px
}

.document-tab.active {
    background:#3c4148;
    border-color:#59616b;
    border-bottom:0
}

.tab-dot {
    width:5px;
    height:5px;
    background:#9ab5c8;
    border-radius:1px
}

.document-tab small {
    font-size:9px;
    color:#9ca5af;
    margin-left:12px
}

#selection-readout {
    align-self:center;
    font-size:10px;
    color:#9099a3;
    padding:0 15px
}

.workspace {
    flex:1;
    min-height:190px;
    display:flex;
    overflow:hidden
}

.outliner-panel {
    display:flex;
    flex-direction:column;
    width:219px;
    min-width:170px;
    flex:none;
    background:var(--panel-deep);
    border-right:1px solid #16191d
}

.panel-header {
    height:33px;
    display:flex;
    align-items:center;
    padding:0 10px;
    gap:7px;
    background:#34383e;
    border-bottom:1px solid #202328;
    flex:none
}

.panel-header strong {
    font-size:10px;
    letter-spacing:.07em;
    font-weight:600;
    flex:1;
    color:#b6c0c9
}

.panel-header>span {
    color:#8fa0ae
}

.panel-header button {
    width:23px;
    min-height:23px;
    padding:3px
}

.outliner-search {
    display:flex;
    align-items:center;
    gap:7px;
    margin:8px;
    background:#202328;
    border:1px solid #454b53;
    padding:0 6px;
    border-radius:3px
}

.outliner-search>svg {
    color:#7d8995;
    width:13px
}

.outliner-search input {
    border:0;
    background:transparent;
    font-size:11px;
    height:26px;
    width:100%;
    outline:0
}

.outliner-search:focus-within {
    border-color:#8aa9c0
}

.tree-columns {
    height:22px;
    display:flex;
    padding:2px 9px;
    gap:10px;
    color:#7e8791;
    font-size:10px;
    border-bottom:1px solid #3b4046
}

.tree-columns span:first-child {
    flex:1
}

.tree-columns svg {
    width:12px;
    height:12px
}

#outliner {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:4px 0;
    scrollbar-width:thin;
    scrollbar-color:#545d66 transparent
}

.tree-row {
    height:25px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:1px 6px;
    cursor:default;
    user-select:none;
    border-top:1px solid transparent;
    border-bottom:1px solid transparent
}

.tree-row:hover {
    background:#ffffff08
}

.tree-row.selected {
    background:#425564;
    border-color:#667e8e;
    color:#eff5f8
}

.tree-row.hidden-object {
    color:#727983
}

.tree-row .tree-indent {
    display:block;
    flex:none
}

.tree-row .disclosure {
    width:12px;
    min-height:18px;
    padding:0;
    color:#8b949f;
    border:0
}

.tree-row .disclosure svg {
    width:11px;
    height:11px
}

.tree-row.expanded .disclosure svg {
    transform:rotate(90deg)
}

.tree-row .node-icon {
    display:flex;
    color:#879dac
}

.tree-row .node-icon svg {
    width:13px;
    height:13px
}

.tree-row .node-name {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:1;
    font-size:10px
}

.tree-row .node-toggle {
    width:18px;
    min-height:18px;
    padding:2px;
    color:#9da8b3;
    opacity:0
}

.tree-row .node-toggle svg {
    width:11px;
    height:11px
}

.tree-row:hover .node-toggle,.tree-row.selected .node-toggle,.node-toggle.always {
    opacity:1
}

.outliner-bottom {
    border-top:1px solid #444a51;
    display:flex;
    align-items:center;
    padding:5px 6px;
    gap:3px;
    background:#2d3136;
    min-height:32px
}

.outliner-bottom button {
    min-height:21px;
    width:25px;
    padding:3px;
    color:#9aa6b2
}

.outliner-bottom span {
    margin-left:auto;
    color:#83909c;
    font:9px Consolas,monospace
}

.viewport-wrap {
    position:relative;
    min-width:250px;
    flex:1;
    background:#34383e;
    overflow:hidden
}

#viewport {
    width:100%;
    height:100%;
    display:block;
    outline:none;
    touch-action:none
}

#gizmo {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden
}

#gizmo .gizmo-handle {
    pointer-events:stroke;
    cursor:grab
}

#gizmo .gizmo-handle:active {
    cursor:grabbing
}

#gizmo text {
    font-family:Consolas,monospace;
    font-size:11px;
    font-weight:600;
    pointer-events:none;
    paint-order:stroke;
    stroke:#23262a;
    stroke-width:3px
}

.view-labels {
    position:absolute;
    inset:0;
    pointer-events:none
}

.view-label {
    position:absolute;
    left:12px;
    top:10px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:#c7d0d8;
    text-shadow:0 1px 2px #000;
    pointer-events:auto
}

.view-label b {
    font-weight:600
}

.view-label small {
    font-size:9px;
    color:#9aa4ad
}

.view-label .viewport-mark {
    color:var(--gold)
}

body.quad .view-label:nth-child(2) {
    left:calc(50% + 12px);
    top:10px
}

body.quad .view-label:nth-child(3) {
    left:12px;
    top:calc(50% + 10px)
}

body.quad .view-label:nth-child(4) {
    left:calc(50% + 12px);
    top:calc(50% + 10px)
}

body.quad .viewport-wrap:after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,transparent calc(50% - 1px),#15181d calc(50% - 1px),#15181d calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),#15181d calc(50% - 1px),#15181d calc(50% + 1px),transparent calc(50% + 1px))
}

.viewport-controls {
    position:absolute;
    top:7px;
    right:9px;
    display:flex;
    gap:2px;
    background:#292d32e8;
    border:1px solid #5b626a66;
    border-radius:3px;
    padding:2px;
    z-index:2
}

.viewport-controls button {
    width:23px;
    min-height:22px;
    height:22px;
    padding:3px;
    border-radius:2px
}

.viewport-controls svg {
    width:14px;
    height:14px
}

.viewport-controls select {
    background:transparent;
    border:0;
    font-size:10px;
    padding:2px;
    width:87px;
    height:22px;
    min-height:22px
}

.viewport-metrics {
    position:absolute;
    top:39px;
    left:13px;
    font:10px/1.7 Consolas,monospace;
    color:#9aa6b0;
    pointer-events:none
}

.viewport-metrics b {
    color:#c0cad2;
    font-weight:400
}

.viewport-footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    padding:5px 10px;
    border-top:1px solid #8292a012;
    background:#2a2f3588;
    color:#9ca7b1;
    font-size:9px;
    pointer-events:none
}

.view-cube {
    position:absolute;
    top:60px;
    right:16px;
    width:75px;
    height:76px;
    opacity:.85;
    z-index:1
}

.view-cube button {
    position:absolute;
    background:#5c657064;
    border:1px solid #8b959f7a;
    font:8px Consolas,monospace;
    color:#d5dce1;
    border-radius:1px;
    min-height:0;
    padding:3px
}

.view-cube button:hover {
    background:#718699
}

.cube-top {
    top:0;
    left:9px;
    width:46px;
    height:20px;
    transform:skew(-27deg)
}

.cube-front {
    top:23px;
    left:0;
    width:46px;
    height:31px
}

.cube-right {
    top:23px;
    left:48px;
    width:24px;
    height:31px;
    writing-mode:vertical-rl
}

.cube-persp {
    top:62px;
    left:-4px;
    background:transparent!important;
    border:0!important;
    font-size:7px!important;
    letter-spacing:.06em
}

.inspector-panel {
    width:297px;
    flex:none;
    display:flex;
    flex-direction:column;
    min-height:0;
    border-left:1px solid #171a1e;
    background:var(--panel)
}

.inspector-tabs {
    height:34px;
    padding:4px 6px;
    display:flex;
    gap:3px;
    background:#292d32;
    border-bottom:1px solid #454b53
}

.inspector-tabs button {
    flex:1;
    min-height:25px;
    padding:3px;
    border-radius:2px;
    color:#8f9ca8
}

.inspector-tabs button.active {
    color:#dfc9aa;
    background:#554d40;
    border-color:#99815b66
}

.inspector-tabs svg {
    width:15px;
    height:15px
}

#inspector {
    flex:1;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:#59616b transparent;
    padding:8px
}

.inspector-name {
    display:flex;
    gap:6px;
    align-items:center;
    margin-bottom:9px
}

.inspector-name input {
    width:100%;
    background:#252a30;
    border-color:#5c6874;
    font-size:11px;
    height:28px
}

.object-color {
    flex:none;
    width:22px!important;
    height:25px!important;
    padding:1px!important
}

.section {
    border:1px solid #4b5057;
    border-radius:3px;
    background:#34383e;
    margin-bottom:9px;
    overflow:hidden
}

.section>summary {
    list-style:none;
    cursor:pointer;
    padding:6px 8px;
    font-size:11px;
    font-weight:600;
    background:#3c4148;
    border-bottom:1px solid #50565f;
    color:#c2cbd3;
    display:flex;
    align-items:center;
    gap:6px
}

.section>summary:before {
    content:"▾";
    font-size:10px;
    color:#9ca7b2
}

.section:not([open])>summary:before {
    content:"▸"
}

.section:not([open])>summary {
    border-bottom:0
}

.section-body {
    padding:9px
}

.field-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    margin-bottom:7px;
    min-height:24px
}

.field-row:last-child {
    margin-bottom:0
}

.field-row>label,.field-row>.field-label {
    font-size:10px;
    color:#a6b0ba;
    flex:1
}

.field-row input:not([type=checkbox]):not([type=color]),.field-row select {
    width:115px;
    font-size:11px;
    height:25px
}

.field-row .wide {
    width:100%!important
}

.transform-row {
    display:grid;
    grid-template-columns:56px repeat(3,minmax(0,1fr));
    gap:4px;
    align-items:center;
    margin-bottom:5px
}

.transform-row>span {
    font-size:10px;
    color:#a4afb9
}

.axis-field {
    display:flex;
    align-items:center;
    background:#262a2f;
    border:1px solid #4d555e;
    border-radius:2px;
    padding-left:4px;
    min-width:0
}

.axis-field b {
    font:9px Consolas,monospace;
    font-weight:400;
    cursor:ew-resize;
    user-select:none
}

.axis-x b {
    color:#d78a84
}

.axis-y b {
    color:#9dc395
}

.axis-z b {
    color:#8aaed9
}

.axis-field input {
    width:100%;
    font:10px Consolas,monospace;
    border:0;
    background:transparent;
    padding:3px;
    height:23px;
    min-height:23px;
    text-align:right
}

.axis-field:focus-within {
    border-color:#88adc7
}

.panel-note {
    font-size:10px;
    color:#8a99a7;
    line-height:1.6;
    margin:7px 0
}

.button-row {
    display:flex;
    gap:5px;
    flex-wrap:wrap
}

.button-row button {
    background:#40464e;
    border:1px solid #606a75;
    min-height:26px;
    font-size:10px;
    flex:1;
    padding:4px 6px
}

.button-row button:hover {
    background:#505c68
}

.button-row+.button-row {
    margin-top:6px
}

.primitive-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px
}

.primitive-grid button {
    min-height:34px;
    background:#3d434b;
    border:1px solid #56616c;
    font-size:10px;
    justify-content:flex-start;
    padding:6px 11px
}

.primitive-grid button:hover {
    background:#4a5866;
    border-color:#92a8bb
}

.primitive-grid button svg {
    color:#a9bdce;
    width:17px;
    height:17px
}

.add-modifier {
    width:100%;
    font-size:11px;
    margin-bottom:6px;
    background:#414a55;
    border-color:#63778a
}

.modifier-stack {
    border:1px solid #4c5661;
    background:#22262b;
    margin-bottom:7px;
    min-height:66px
}

.modifier-row {
    display:flex;
    align-items:center;
    gap:5px;
    padding:4px 5px;
    font-size:10px;
    min-height:26px;
    cursor:default
}

.modifier-row.selected {
    background:#495c6c;
    color:#e0eaf2
}

.modifier-row.base {
    color:#99a8b4;
    border-top:1px solid #454e57
}

.modifier-row .modifier-name {
    flex:1
}

.modifier-row button {
    min-height:18px;
    width:20px;
    padding:1px
}

.modifier-row svg {
    width:12px;
    height:12px
}

.stack-actions {
    display:flex;
    justify-content:flex-end;
    gap:4px;
    margin-top:-2px;
    margin-bottom:5px
}

.stack-actions button {
    width:23px;
    padding:3px;
    min-height:21px;
    border:1px solid #555e68;
    color:#9aabb9
}

.stack-actions button svg {
    width:12px;
    height:12px
}

.statistics {
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 10px;
    font:10px Consolas,monospace
}

.statistics>span:nth-child(odd) {
    color:#93a0ad
}

.statistics>span:nth-child(even) {
    color:#c9d4dd;
    text-align:right
}

.swatches {
    display:flex;
    gap:6px;
    flex-wrap:wrap
}

.swatch {
    width:23px;
    min-height:23px;
    padding:0;
    border:2px solid #515b65;
    border-radius:3px
}

.swatch:hover {
    border-color:#c6d8e8
}

.empty-inspector {
    padding:20px 9px;
    color:#8a99a7;
    text-align:center;
    font-size:11px
}

.empty-inspector svg {
    display:block;
    margin:0 auto 13px;
    width:34px;
    height:34px;
    color:#6b7d8e
}

.material-preview {
    height:102px;
    margin-bottom:9px;
    border:1px solid #535d67;
    background:radial-gradient(ellipse at 50% 80%,#414b56,#22282f);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.material-ball {
    width:75px;
    height:75px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#e5ecea,#7c98ab 45%,#2e3e4b 90%);
    box-shadow:8px 10px 16px #10151c88
}

.key-list {
    font:10px Consolas,monospace;
    max-height:140px;
    overflow:auto
}

.key-list button {
    display:flex;
    width:100%;
    justify-content:space-between;
    font:inherit;
    padding:3px 5px
}

.key-list button span {
    color:var(--gold)
}

#timeline-resize {
    height:4px;
    flex:none;
    cursor:ns-resize;
    background:#1c2025;
    border-top:1px solid #4a515a
}

.timeline {
    height:var(--timeline-height);
    min-height:116px;
    max-height:45vh;
    flex:none;
    display:flex;
    flex-direction:column;
    background:#2b3036;
    border-top:1px solid #15191e
}

.timeline-header {
    height:35px;
    flex:none;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 10px 0 0;
    border-bottom:1px solid #49515b;
    background:#343a42
}

.timeline-title {
    width:219px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 9px;
    border-right:1px solid #4d5761;
    flex:none
}

.timeline-title strong {
    flex:1;
    font-size:10px;
    letter-spacing:.06em;
    color:#adb9c5
}

.timeline-title>svg {
    color:#8c9eae;
    width:14px
}

.timeline-title button {
    padding:2px;
    min-height:22px;
    width:23px;
    color:#9caebd
}

.transport {
    display:flex;
    align-items:center;
    gap:1px
}

.transport button {
    width:24px;
    height:24px;
    min-height:24px;
    padding:3px;
    color:#adb9c4
}

.transport button svg {
    width:13px;
    height:13px
}

.transport #play-button {
    color:#c4d6e2;
    background:#495969;
    border:1px solid #647b8e;
    margin:0 3px;
    width:28px
}

.transport input {
    width:48px;
    height:23px;
    min-height:23px;
    text-align:center;
    font:10px Consolas,monospace;
    margin-left:8px
}

.autokey {
    background:#4c393c;
    border:1px solid #785458;
    color:#dfafb3;
    font-size:10px;
    padding:3px 10px;
    min-height:24px
}

.autokey.active {
    background:#ad4e50;
    color:#fff1f0;
    border-color:#dc8b87
}

.set-key {
    background:#485444;
    border:1px solid #718369;
    color:#d4e0ca;
    font-size:10px;
    min-height:24px
}

.set-key svg {
    width:13px;
    height:13px
}

.fps-control {
    font-size:10px;
    color:#96a4b2;
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:6px
}

.fps-control input {
    width:35px;
    height:22px;
    min-height:22px;
    padding:2px;
    text-align:center;
    font:10px Consolas,monospace
}

.dope-sheet {
    min-height:42px;
    flex:1;
    display:flex;
    overflow:hidden
}

#track-labels {
    width:219px;
    flex:none;
    background:#282e35;
    border-right:1px solid #4b5661;
    padding-top:25px;
    font:10px Consolas,monospace;
    overflow:hidden
}

.track-label {
    height:22px;
    padding:4px 10px;
    border-bottom:1px solid #3b454f;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:flex;
    align-items:center;
    gap:6px
}

.track-label i {
    height:5px;
    width:5px;
    border-radius:1px;
    background:var(--gold);
    display:inline-block;
    flex:none
}

.track-label small {
    margin-left:auto;
    color:#758795;
    font-size:9px
}

#timeline-canvas-wrap {
    min-width:0;
    flex:1;
    position:relative;
    overflow:hidden
}

#timeline-canvas {
    width:100%;
    height:100%;
    display:block;
    user-select:none;
    touch-action:none
}

#timeline-canvas .keyframe {
    cursor:ew-resize;
    stroke:#303640;
    stroke-width:1
}

#timeline-canvas text {
    font:9px Consolas,monospace;
    fill:#8e9dac;
    pointer-events:none
}

.timeline-range {
    height:28px;
    display:flex;
    align-items:center;
    gap:9px;
    background:#292f36;
    padding:2px 10px;
    border-top:1px solid #46515c;
    flex:none
}

.timeline-range label {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:10px;
    color:#96a4b2
}

.timeline-range input[type=number] {
    height:21px;
    min-height:21px;
    width:52px;
    font:10px Consolas,monospace;
    padding:1px 4px
}

.range-strip {
    flex:1;
    padding:0 8px;
    height:18px;
    background:#38434f;
    border:1px solid #566779;
    border-radius:2px;
    display:flex;
    align-items:center
}

.range-strip input {
    width:100%;
    background:transparent;
    border:0;
    min-height:0;
    height:12px;
    accent-color:#9ab3c8
}

.timeline-range-note {
    font:9px Consolas,monospace;
    color:#7f909f;
    margin-left:12px
}

.statusbar {
    height:26px;
    flex:none;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    background:#20252b;
    border-top:1px solid #49545f;
    font-size:9px;
    color:#8f9da9
}

.status-indicator {
    width:5px;
    height:5px;
    background:#a4b5a2;
    border-radius:50%
}

.status-indicator.error {
    background:#dc8b83
}

#status {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#a5b3bf
}

#coordinate-readout {
    font:9px Consolas,monospace;
    white-space:nowrap
}

.status-separator {
    height:13px;
    border-left:1px solid #4d5964;
    margin:0 6px
}

#loading {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:#2c323aed;
    z-index:10;
    color:#c6d1da
}

.loading-mark {
    font:46px/1 Consolas,monospace;
    color:#b1c7d7;
    margin-bottom:5px
}

#loading strong {
    font-size:17px;
    font-weight:500
}

#loading>span:last-child {
    font:11px Consolas,monospace;
    color:#8da2b4
}

#working {
    position:absolute;
    bottom:33px;
    right:13px;
    background:#243342e8;
    color:#b5cadc;
    border:1px solid #59738a;
    padding:5px 9px;
    border-radius:3px;
    font:10px Consolas,monospace;
    z-index:7
}

#viewport-error {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    max-width:420px;
    padding:20px;
    background:#292f37f5;
    border:1px solid #8d6b57;
    z-index:20;
    box-shadow:0 12px 45px #0005
}

#viewport-error strong {
    font-size:14px;
    color:#e4c8aa
}

#viewport-error p {
    font-size:12px;
    color:#b2bec8;
    line-height:1.6
}

#viewport-error button {
    background:#485c6d;
    border:1px solid #7793a9;
    padding:5px 12px
}

.popup-menu {
    position:fixed;
    z-index:100;
    background:#30373f;
    border:1px solid #697684;
    min-width:220px;
    padding:5px 0;
    box-shadow:0 8px 28px #0007;
    border-radius:3px
}

.popup-menu>strong {
    display:block;
    color:#889bad;
    font:9px Consolas,monospace;
    padding:5px 12px;
    letter-spacing:.07em
}

.popup-menu>button {
    width:100%;
    border:0;
    border-radius:0;
    padding:5px 12px;
    text-align:left;
    justify-content:flex-start;
    font-size:11px;
    min-height:27px
}

.popup-menu>button:hover {
    background:#4d6579
}

.popup-menu>button svg {
    width:14px;
    height:14px;
    color:#a7bdcf
}

.popup-menu>button .menu-label {
    flex:1
}

.popup-menu kbd {
    color:#90a2b1;
    font:9px Consolas,monospace;
    margin-left:22px
}

.popup-menu hr {
    border:0;
    border-top:1px solid #505d68;
    margin:5px 8px
}

dialog {
    color:var(--text);
    background:#303740;
    border:1px solid #788b9d;
    border-radius:6px;
    padding:0;
    box-shadow:0 20px 90px #0009;
    max-width:min(900px,94vw);
    min-width:355px
}

dialog::backdrop {
    background:#11171e9c;
    backdrop-filter:blur(2px)
}

dialog form {
    margin:0
}

dialog header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #53616f;
    padding:10px 14px;
    background:#37424e
}

dialog h2 {
    margin:0;
    font-size:14px;
    font-weight:500;
    color:#d7e2ec
}

dialog header button {
    width:24px;
    min-height:24px;
    padding:3px;
    color:#96a9b9
}

#dialog-content {
    padding:18px;
    max-height:75vh;
    overflow:auto;
    font-size:12px
}

#dialog-content p {
    color:#a9bac8;
    line-height:1.7;
    margin:0 0 13px
}

#dialog-footer {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:10px 15px;
    border-top:1px solid #4f5d6b;
    background:#2b333d
}

#dialog-footer button {
    border:1px solid #64788b;
    background:#414f5e;
    padding:5px 17px;
    min-height:29px
}

#dialog-footer .primary {
    background:#587791;
    border-color:#91aec5;
    color:#f0f6fb
}

.dialog-field {
    display:flex;
    align-items:center;
    gap:16px;
    margin:9px 0
}

.dialog-field label {
    flex:1;
    color:#a8b9c8
}

.dialog-field input,.dialog-field select {
    min-width:140px;
    max-width:280px
}

.help-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 27px;
    min-width:525px
}

.help-grid>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:5px 0;
    border-bottom:1px solid #4a5663;
    color:#a6b8c8
}

.help-grid kbd {
    font:10px Consolas,monospace;
    color:#d4e3ee
}

.uv-tools,.graph-tools {
    display:flex;
    gap:6px;
    align-items:center;
    margin-bottom:12px
}

.uv-tools button,.graph-tools button {
    border:1px solid #5c7184;
    background:#3c4d5e;
    font-size:11px;
    min-height:28px
}

.uv-tools select,.graph-tools select {
    font-size:11px
}

.uv-stage {
    width:640px;
    height:470px;
    max-width:79vw;
    position:relative;
    background:#202830;
    border:1px solid #5a6e80
}

.uv-stage svg {
    width:100%;
    height:100%;
    display:block;
    touch-action:none
}

.uv-stage polygon {
    cursor:pointer
}

.uv-stage .uv-selected {
    stroke:#e8b575;
    fill:#c98a4040
}

.uv-stage text {
    font:10px Consolas,monospace;
    fill:#8ca0b1
}

.uv-note {
    margin-top:10px!important;
    margin-bottom:0!important;
    font-size:10px
}

.graph-stage {
    width:750px;
    height:360px;
    max-width:79vw;
    background:#232c35;
    border:1px solid #596b7c
}

.graph-stage svg {
    width:100%;
    height:100%;
    touch-action:none
}

.graph-stage text {
    fill:#8b9fb0;
    font:10px Consolas,monospace
}

.graph-stage .graph-key {
    cursor:move;
    stroke:#19232c;
    stroke-width:2
}

.example-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    width:660px;
    max-width:78vw
}

.example-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:15px;
    border:1px solid #62798e;
    background:#3a4a5b;
    min-height:132px;
    white-space:normal;
    text-align:left
}

.example-card svg {
    width:35px;
    height:35px;
    margin-bottom:9px;
    color:#d3b88e
}

.example-card b {
    font-size:12px;
    font-weight:500
}

.example-card small {
    color:#9fb3c5;
    margin-top:5px;
    line-height:1.6;
    font-size:10px
}

#toast {
    position:fixed;
    bottom:39px;
    left:50%;
    transform:translateX(-50%);
    background:#384957;
    border:1px solid #718b9e;
    box-shadow:0 6px 25px #0006;
    padding:9px 17px;
    border-radius:4px;
    color:#dce8f0;
    font-size:11px;
    z-index:110;
    max-width:70vw
}

#toast.error {
    background:#4b3838;
    border-color:#99706b;
    color:#f1d5cf
}

.maya-only {
    display:none
}

body[data-workspace=maya] {
    --bg:#35383d;
    --panel:#393d43;
    --panel-deep:#2d3239;
    --surface:#464d56;
    --selected:#4a687b;
    --accent:#86b5cf;
    --line:#505861
}

body[data-workspace=maya] .titlebar {
    background:#2d333b
}

body[data-workspace=maya] .menu-row {
    background:#383e46
}

body[data-workspace=maya] .maya-only {
    display:flex
}

body[data-workspace=maya] .main-toolbar {
    background:#414851;
    height:34px
}

body[data-workspace=maya] .main-toolbar .component-tools {
    display:none
}

body[data-workspace=maya] .main-toolbar .mesh-tools {
    display:none
}

body[data-workspace=maya] #menu-set {
    font-size:10px;
    height:22px;
    min-height:22px;
    width:102px;
    margin-right:9px;
    background:#4e5f6d;
    border-color:#6c8294
}

body[data-workspace=maya] .maya-shelf {
    height:64px;
    flex:none;
    flex-direction:column;
    border-bottom:1px solid #1a222b;
    background:#343c46;
    padding:0 8px
}

body[data-workspace=maya] .shelf-tabs {
    height:23px;
    display:flex;
    gap:2px;
    border-bottom:1px solid #52616f
}

body[data-workspace=maya] .shelf-tabs button {
    font-size:10px;
    min-height:21px;
    padding:2px 11px;
    border-radius:3px 3px 0 0;
    color:#a6b8c7
}

body[data-workspace=maya] .shelf-tabs button.active {
    background:#4a5b6c;
    color:#e1eaf2;
    border-color:#6b8195;
    border-bottom:0
}

body[data-workspace=maya] .shelf-tools {
    height:39px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:3px 6px
}

body[data-workspace=maya] .shelf-tools button {
    width:37px;
    height:32px;
    min-height:32px;
    border-radius:2px;
    color:#b5d0e4;
    background:#3d4957;
    border:1px solid #596a7b
}

body[data-workspace=maya] .shelf-tools button svg {
    width:21px;
    height:21px
}

body[data-workspace=maya] .shelf-separator {
    height:25px;
    border-left:1px solid #65788b;
    margin:0 3px
}

body[data-workspace=maya] .maya-toolbox {
    width:37px;
    flex:none;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:7px 3px;
    background:#303945;
    border-right:1px solid #576574
}

body[data-workspace=maya] .maya-toolbox button {
    width:30px;
    height:31px;
    padding:5px
}

body[data-workspace=maya] .outliner-panel {
    width:202px;
    border-right-color:#596b7b
}

body[data-workspace=maya] .inspector-panel {
    width:285px;
    background:#383f48;
    border-left-color:#5d7182
}

body[data-workspace=maya] .panel-header {
    background:#414c58
}

body[data-workspace=maya] .inspector-tabs button {
    font-size:10px
}

body[data-workspace=maya] .inspector-tabs button.active {
    background:#4d677b;
    color:#e1edf5;
    border-color:#8aa5b9
}

body[data-workspace=maya] .section {
    border-color:#586b7c;
    background:#3b4551
}

body[data-workspace=maya] .section>summary {
    background:#4b5c6d;
    border-color:#6b8092;
    color:#d0dde8
}

body[data-workspace=maya] .timeline-title,body[data-workspace=maya] #track-labels {
    width:239px
}

body[data-workspace=maya] .timeline-header {
    background:#3d4a58
}

body[data-workspace=maya] .document-tabs {
    background:#2d3742
}

body[data-workspace=maya] .autokey {
    background:#4a4b3d;
    color:#d2d2ac;
    border-color:#777759
}

body[data-workspace=maya] .autokey.active {
    background:#967344;
    color:#fff1d5
}

.channel-maya {
    display:grid;
    grid-template-columns:1fr 90px;
    gap:1px 8px;
    font-size:10px
}

.channel-maya label {
    padding:4px 5px;
    text-align:right;
    background:#35414e;
    color:#b1c1ce
}

.channel-maya input {
    height:23px;
    min-height:23px;
    border-radius:0;
    text-align:right;
    font:10px Consolas,monospace;
    background:#27323e;
    border-color:#4d6072
}

.channel-maya input.keyed {
    background:#55453f;
    border-color:#a87e63
}

.channel-maya+.panel-note {
    margin-top:10px
}

@media(max-width:1250px) {
    .brand small,.workspace-caption,.menu-note,.mesh-tools,.timeline-range-note {
        display:none
    }
    .outliner-panel {
        width:180px
    }
    .inspector-panel {
        width:266px
    }
    .timeline-title,#track-labels {
        width:180px
    }
    .toolbar-text {
        font-size:0!important;
        padding:4px
    }
    .toolbar-text svg {
        width:17px
    }
    .main-toolbar {
        gap:5px
    }
    .component-tools button {
        font-size:0!important;
        width:27px;
        padding:4px
    }
    .component-tools svg {
        width:16px;
        height:16px
    }
    body[data-workspace=maya] .outliner-panel {
        width:172px
    }
    body[data-workspace=maya] .timeline-title,body[data-workspace=maya] #track-labels {
        width:209px
    }
    body[data-workspace=maya] .inspector-panel {
        width:260px
    }
    .view-cube {
        right:8px;
        transform:scale(.85);
        transform-origin:top right
    }
    .viewport-footer {
        font-size:8px
    }
}

@media(max-width:950px) {
    .outliner-panel {
        width:155px;
        min-width:155px
    }
    .inspector-panel {
        width:240px
    }
    .timeline-title,#track-labels {
        width:155px
    }
    .engine-badge {
        display:none
    }
    .main-toolbar .tool-group {
        padding-right:4px
    }
    .statusbar>#coordinate-readout {
        display:none
    }
    .timeline-header {
        gap:4px
    }
    .main-toolbar {
        gap:3px
    }
    body[data-workspace=maya] .outliner-panel {
        width:155px
    }
    body[data-workspace=maya] .timeline-title,body[data-workspace=maya] #track-labels {
        width:192px
    }
    body[data-workspace=maya] .inspector-panel {
        width:240px
    }
    .viewport-controls {
        gap:0
    }
    .viewport-controls select {
        width:70px
    }
    .viewport-controls button {
        width:20px
    }
}

@media(prefers-reduced-motion:no-preference) {
    .loading-mark {
        animation:breathe 1.7s ease-in-out infinite
    }
    @keyframes breathe {
        50% {
            opacity:.35
        }
    }
}