.qe-hero { border-bottom-color: rgba(103, 215, 191, .25); }
.qe-workspace { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); }
.qe-input-panel, .qe-preview-panel { min-width: 0; }
.qe-unit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.qe-unit-row .rt-segmented { width: 12rem; }
.qe-fieldset { margin: 0 0 1.3rem; padding: 1rem; border: 1px solid rgba(169, 210, 209, .16); border-radius: 14px; }
.qe-fieldset legend { padding: 0 .45rem; color: #bde8df; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.qe-three-fields, .qe-four-fields { display: grid; gap: .75rem; }
.qe-three-fields { grid-template-columns: repeat(3, 1fr); }
.qe-four-fields { grid-template-columns: repeat(4, 1fr); }
.qe-three-fields label, .qe-four-fields label { color: #dce8ed; font-size: .76rem; font-weight: 700; }
.qe-three-fields small { display: block; color: #718d98; font-size: .66rem; font-weight: 400; }
.qe-three-fields input, .qe-four-fields input { width: 100%; margin-top: .35rem; padding: .65rem .55rem; color: #eaf6f5; font: inherit; background: #0c202a; border: 1px solid #29434e; border-radius: 8px; }
.qe-three-fields input:focus, .qe-four-fields input:focus { outline: 2px solid rgba(103, 215, 191, .5); border-color: #67d7bf; }
.qe-help { display: block; margin-top: .75rem; color: #78929b; font-size: .72rem; line-height: 1.5; }
.qe-translation-fieldset { background: linear-gradient(135deg, rgba(216, 242, 124, .035), rgba(8, 25, 34, .16)); border-color: rgba(216, 242, 124, .18); }
.qe-translation-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.qe-translation-head > small { max-width: 18rem; color: #78949b; font-size: .65rem; line-height: 1.45; text-align: right; }
.qe-translation-toggle { position: relative; display: inline-flex; align-items: center; gap: .52rem; flex: 0 0 auto; color: #dce8df; cursor: pointer; }
.qe-translation-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qe-translation-toggle strong { color: #dce8df; font-size: .72rem; white-space: nowrap; }
.qe-toggle-track { position: relative; width: 2rem; height: 1.08rem; flex: 0 0 auto; background: #19323b; border: 1px solid #3b545a; border-radius: 999px; transition: background .18s ease, border-color .18s ease; }
.qe-toggle-track i { position: absolute; top: .16rem; left: .17rem; width: .64rem; height: .64rem; background: #82989d; border-radius: 50%; transition: transform .18s ease, background .18s ease; }
.qe-translation-toggle input:checked + .qe-toggle-track { background: rgba(216, 242, 124, .2); border-color: rgba(216, 242, 124, .68); }
.qe-translation-toggle input:checked + .qe-toggle-track i { background: #d8f27c; transform: translateX(.87rem); }
.qe-translation-toggle input:focus-visible + .qe-toggle-track { outline: 2px solid rgba(216, 242, 124, .62); outline-offset: 3px; }
.qe-translation-controls { transition: opacity .18s ease, filter .18s ease; }
.qe-translation-controls.is-disabled, .qe-translation-controls[aria-disabled="true"] { opacity: .42; filter: grayscale(.35); }
.qe-translation-controls input:disabled, .qe-translation-controls button:disabled { cursor: not-allowed; }
.qe-translation-fields { margin-top: .82rem; }
.qe-translation-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.qe-translation-presets button { padding: .34rem .58rem; color: #a9c3bc; font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(216, 242, 124, .045); border: 1px solid rgba(216, 242, 124, .17); border-radius: 7px; cursor: pointer; }
.qe-translation-presets button:hover, .qe-translation-presets button:focus-visible { color: #efffc0; background: rgba(216, 242, 124, .11); border-color: rgba(216, 242, 124, .42); outline: none; }
.qe-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.qe-speed-row { margin-bottom: .75rem; }
.qe-speed-row label { display: flex; align-items: center; gap: .65rem; color: #a7c1c6; font-size: .72rem; }
.qe-speed-row input[type="range"] { width: 100%; max-width: 16rem; }
.qe-speed-row output { color: #d5f1e9; min-width: 2.8rem; text-align: right; }
.qe-actions .rt-primary-button, .qe-actions .rt-secondary-button { font-size: .75rem; }
.qe-actions .qe-loop-button { color: #9bb2b8; border-color: rgba(169, 210, 209, .18); }
.qe-actions .qe-loop-button.is-active { color: #dff8f1; background: rgba(103, 215, 191, .12); border-color: rgba(103, 215, 191, .42); box-shadow: inset 0 0 0 1px rgba(103, 215, 191, .08); }
.qe-actions .qe-loop-button:disabled { color: #6f858b; background: rgba(255,255,255,.025); border-color: rgba(169, 210, 209, .1); cursor: not-allowed; }
.qe-message { min-height: 1.4em; margin: 1rem 0 0; color: #74d8bf; font-size: .78rem; }
.qe-frame-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.qe-frame-toolbar > div:first-child { min-width: 13.5rem; }
.qe-frame-toolbar .rt-field-label { display: block; margin-bottom: .28rem; }
.qe-frame-toolbar strong { display: block; color: #d8f4ef; font-size: .78rem; line-height: 1.4; }
.qe-frame-toggle { width: min(100%, 24rem); flex: 0 1 24rem; }
.qe-frame-toggle button { padding-inline: .65rem; font-size: .68rem; white-space: nowrap; }
.qe-frame-explanation { min-height: 2.7em; margin: 0 0 .8rem; color: #89a7ae; font-size: .73rem; line-height: 1.55; }
.qe-rigid-explanation { margin: -.18rem 0 .8rem; padding: .62rem .72rem; color: #819da3; font-size: .67rem; line-height: 1.55; background: rgba(216, 242, 124, .035); border-left: 3px solid rgba(216, 242, 124, .52); border-radius: 0 8px 8px 0; }
.qe-rigid-explanation strong { color: #dceab2; }
.qe-rigid-explanation code { color: #d8f27c; }
.qe-path-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: .35rem 0 .7rem; padding-top: .72rem; border-top: 1px solid rgba(169, 210, 209, .1); }
.qe-path-toolbar > div:first-child { min-width: 14rem; }
.qe-path-toolbar .rt-field-label { display: block; margin-bottom: .25rem; }
.qe-path-toolbar strong { display: block; color: #9fb9bf; font-size: .68rem; font-weight: 600; line-height: 1.45; }
.qe-path-toggle { width: min(100%, 21rem); flex: 0 1 21rem; }
.qe-path-toggle button { padding-inline: .6rem; font-size: .66rem; white-space: nowrap; }
.qe-stage-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: .55rem; }
.qe-stage-timeline article { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .38rem; min-width: 0; padding: .55rem .52rem; color: #79969e; background: rgba(8, 25, 34, .72); border: 1px solid rgba(169, 210, 209, .12); border-radius: 10px; transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease; }
.qe-stage-timeline article > span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; color: #6f8991; font: 800 .56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,.04); border-radius: 50%; }
.qe-stage-timeline article small, .qe-stage-timeline article strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-stage-timeline article small { margin-bottom: .12rem; color: #68848d; font-size: .57rem; }
.qe-stage-timeline article strong { color: #a9c1c6; font-size: .66rem; }
.qe-stage-timeline article code { color: #829fa7; font-size: .64rem; white-space: nowrap; }
.qe-stage-timeline article.is-active { color: #f3c28f; background: rgba(240, 172, 119, .09); border-color: rgba(240, 172, 119, .52); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(3, 14, 20, .2); }
.qe-stage-timeline article.is-active > span { color: #12252e; background: #f0ac77; }
.qe-stage-timeline article.is-active strong, .qe-stage-timeline article.is-active code { color: #ffe3c4; }
.qe-stage-timeline article.is-done:not(.is-active) { background: rgba(103, 215, 191, .055); border-color: rgba(103, 215, 191, .23); }
.qe-stage-timeline article.is-done:not(.is-active) > span { color: #0c222b; background: #67d7bf; font-size: 0; }
.qe-stage-timeline article.is-done:not(.is-active) > span::before { content: "✓"; font-size: .7rem; }
.qe-stage-timeline article[data-translation-stage] { border-color: rgba(216, 242, 124, .2); }
.qe-stage-timeline article[data-translation-stage].is-active { color: #efffc0; background: rgba(216, 242, 124, .085); border-color: rgba(216, 242, 124, .52); }
.qe-stage-timeline article[data-translation-stage].is-active > span { color: #1b2813; background: #d8f27c; }
.qe-stage-timeline article.is-disabled { opacity: .34; }
.qe-stage-timeline.is-axis-mode article { opacity: .38; transform: none; }
.qe-order-equation { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; padding: .42rem .6rem; color: #768f97; font-size: .62rem; background: rgba(255,255,255,.025); border-radius: 8px; }
.qe-order-equation code { color: #bde8df; font-size: .64rem; }
.qe-order-equation span { text-align: right; }
.qe-axis-convention { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0 0 .8rem; }
.qe-axis-convention > div { min-width: 0; padding: .72rem .78rem; background: rgba(8, 25, 34, .72); border: 1px solid rgba(169, 210, 209, .12); border-radius: 10px; }
.qe-axis-convention span, .qe-axis-convention strong, .qe-axis-convention code { display: block; }
.qe-axis-convention span { margin-bottom: .25rem; color: #6f8b93; font: 800 .56rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.qe-axis-convention strong { margin-bottom: .4rem; color: #c4d9dc; font-size: .69rem; }
.qe-axis-convention code { width: fit-content; padding: .2rem .42rem; color: #dce9eb; font-size: .64rem; background: rgba(255,255,255,.045); border-radius: 5px; }
.qe-axis-convention p { margin: .48rem 0 0; color: #78949b; font-size: .62rem; line-height: 1.5; }
.qe-axis-convention b { color: #a8c0c5; font-weight: 700; }
.qe-axis-convention .is-current { border-color: rgba(240, 172, 119, .36); box-shadow: inset 3px 0 0 #f0ac77; }
.qe-axis-convention .is-current span, .qe-axis-convention .is-current code { color: #f2bd8d; }
.qe-axis-convention .is-equivalent { border-color: rgba(103, 215, 191, .25); box-shadow: inset 3px 0 0 #67d7bf; }
.qe-axis-convention .is-equivalent span, .qe-axis-convention .is-equivalent code { color: #8de0cc; }
.qe-axis-convention .is-warning { border-color: rgba(255, 129, 111, .22); box-shadow: inset 3px 0 0 rgba(255, 129, 111, .76); }
.qe-axis-convention .is-warning span, .qe-axis-convention .is-warning code { color: #ff9d90; }
.qe-progress-row { margin: .6rem 0 .2rem; color: #a7c1c6; font-size: .72rem; display: flex; align-items: center; gap: .6rem; }
.qe-progress-row progress { width: 100%; accent-color: #67d7bf; height: .45rem; }
.qe-canvas-wrap { position: relative; overflow: hidden; border: 1px solid rgba(169, 210, 209, .16); border-radius: 14px; touch-action: none; }
.qe-canvas-wrap canvas { display: block; width: 100%; height: auto; cursor: grab; user-select: none; touch-action: none; }
.qe-canvas-wrap.is-dragging canvas { cursor: grabbing; }
.qe-canvas-wrap.is-vector-hover canvas { cursor: crosshair; }
.qe-canvas-wrap.is-vector-dragging canvas { cursor: move; }
.qe-view-buttons { position: absolute; z-index: 2; top: .7rem; right: .7rem; display: flex; gap: .28rem; padding: .25rem; background: rgba(6, 20, 28, .78); border: 1px solid rgba(169, 210, 209, .14); border-radius: 9px; backdrop-filter: blur(8px); }
.qe-view-buttons button { padding: .32rem .5rem; color: #87a4ab; font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.qe-view-buttons button:hover, .qe-view-buttons button:focus-visible, .qe-view-buttons button.is-active { color: #e8faf6; background: rgba(103, 215, 191, .16); outline: none; }
.qe-world-lock-note { margin: 0; padding: .58rem .8rem; color: #8faab0; font-size: .65rem; line-height: 1.55; background: rgba(6, 20, 28, .88); border-top: 1px solid rgba(169, 210, 209, .12); }
.qe-world-lock-note strong { color: #d9edf0; }
.qe-canvas-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding: .8rem 1rem; color: #a7c1c6; font-size: .7rem; background: #0b1b25; border-top: 1px solid rgba(169, 210, 209, .12); }
.qe-canvas-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.qe-canvas-legend .qe-legend-fixed, .qe-canvas-legend .qe-legend-moving, .qe-canvas-legend .qe-legend-target { padding: .22rem .4rem; border-radius: 6px; }
.qe-canvas-legend .qe-legend-fixed { color: #d9edf0; background: rgba(118, 144, 154, .12); }
.qe-canvas-legend .qe-legend-moving { color: #effffb; background: rgba(103, 215, 191, .1); }
.qe-canvas-legend .qe-legend-target { color: #b9cdff; background: rgba(120, 170, 255, .08); }
.qe-canvas-legend .qe-legend-help { margin-left: auto; color: #718d98; }
.qe-canvas-legend [data-animation-stage] { color: #d8f4ef; font-weight: 700; letter-spacing: .02em; }
.qe-canvas-legend i { width: 1rem; height: 0; flex: 0 0 auto; border-top: 3px solid; }
.qe-vector-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; margin-top: .78rem; padding: .72rem .82rem; background: linear-gradient(135deg, rgba(255, 211, 111, .055), rgba(8, 25, 34, .82)); border: 1px solid rgba(255, 211, 111, .18); border-radius: 11px; }
.qe-vector-editor .rt-field-label { display: block; margin-bottom: .2rem; color: #8ba6ac; font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.qe-vector-editor strong { color: #e4f0ef; font-size: .69rem; line-height: 1.45; }
.qe-vector-editor code { color: #ffe29a; font-size: .66rem; white-space: nowrap; }
.qe-vector-editor button { padding: .4rem .58rem; color: #f3d995; font: 750 .6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255, 211, 111, .055); border: 1px solid rgba(255, 211, 111, .2); border-radius: 7px; cursor: pointer; }
.qe-vector-editor button:hover, .qe-vector-editor button:focus-visible { color: #fff4c6; background: rgba(255, 211, 111, .12); border-color: rgba(255, 211, 111, .45); outline: none; }
.qe-stage-snapshots { margin-top: .78rem; padding: .85rem; background: linear-gradient(145deg, rgba(12, 34, 44, .94), rgba(7, 22, 30, .9)); border: 1px solid rgba(169, 210, 209, .14); border-radius: 12px; }
.qe-stage-snapshots > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .68rem; }
.qe-stage-snapshots h3 { margin: .18rem 0 0; color: #deefee; font-size: .82rem; }
.qe-stage-snapshots header p { max-width: 24rem; margin: 0; color: #78959c; font-size: .62rem; line-height: 1.5; text-align: right; }
.qe-stage-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.qe-stage-snapshot-grid article { min-width: 0; overflow: hidden; background: rgba(4, 16, 23, .54); border: 1px solid rgba(169, 210, 209, .12); border-radius: 9px; transition: border-color .2s ease, box-shadow .2s ease; }
.qe-stage-snapshot-grid article[data-state="captured"] { border-color: rgba(103, 215, 191, .38); box-shadow: inset 0 2px 0 rgba(103, 215, 191, .12); }
.qe-stage-snapshot-grid article[data-state="unavailable"] { opacity: .58; }
.qe-stage-snapshot-grid article > div { padding: .55rem .6rem .48rem; }
.qe-stage-snapshot-grid article > div > span { float: right; color: #6d8890; font: 800 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-stage-snapshot-grid strong, .qe-stage-snapshot-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-stage-snapshot-grid strong { color: #d4e7e6; font-size: .66rem; }
.qe-stage-snapshot-grid small { margin-top: .25rem; color: #6e8b93; font-size: .55rem; }
.qe-stage-snapshot-grid article[data-state="captured"] small { color: #73d8b4; }
.qe-stage-snapshot-grid canvas { display: block; width: 100%; height: auto; border-block: 1px solid rgba(169, 210, 209, .09); }
.qe-stage-snapshot-grid code { display: block; overflow: hidden; padding: .48rem .6rem; color: #9bb6bb; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.qe-scrubber { margin-top: .78rem; padding: .78rem .85rem .68rem; background: linear-gradient(135deg, rgba(12, 33, 43, .92), rgba(8, 25, 34, .9)); border: 1px solid rgba(169, 210, 209, .14); border-radius: 11px; }
.qe-scrubber-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .52rem; }
.qe-scrubber-head label { color: #b8d0d3; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.qe-scrubber-head output { color: #ffd58b; font: 800 .69rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-scrubber input[type="range"] { display: block; width: 100%; height: 1.15rem; margin: 0; cursor: grab; accent-color: #f0ac77; }
.qe-scrubber input[type="range"]:active { cursor: grabbing; }
.qe-scrubber input[type="range"]::-webkit-slider-runnable-track { height: .34rem; background: linear-gradient(90deg, #f0ac77 0 33.15%, rgba(255,255,255,.28) 33.15% 33.65%, #73d8b4 33.65% 66.4%, rgba(255,255,255,.28) 66.4% 66.9%, #78aaff 66.9% 100%); border-radius: 999px; }
.qe-scrubber input[type="range"]::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -.33rem; background: #fff2d7; border: 3px solid #f0ac77; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.35); -webkit-appearance: none; }
.qe-scrubber input[type="range"]:focus-visible { outline: 2px solid rgba(240, 172, 119, .62); outline-offset: 4px; }
.qe-scrubber-stops { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: .18rem; color: #90aab0; font: 700 .57rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-scrubber-stops span:nth-child(2), .qe-scrubber-stops span:nth-child(3) { text-align: center; }
.qe-scrubber-stops span:last-child { text-align: right; }
.qe-scrubber-stops small { color: #66838b; font-size: .53rem; font-weight: 600; }
.qe-scrubber > p { margin: .5rem 0 0; color: #718e96; font-size: .62rem; line-height: 1.5; }
.qe-scrubber > p strong { color: #d6e9e7; }
.rt-divider { width: 1px; height: .95rem; border-left: 1px solid rgba(169, 210, 209, .35); margin-left: .25rem; margin-right: .25rem; }
.qe-axis-ref-x { background: rgba(255, 129, 111, .35); }
.qe-axis-ref-y { background: rgba(115, 216, 180, .35); }
.qe-axis-ref-z { background: rgba(120, 170, 255, .35); }
.qe-legend-world { border-top-color: #76909a !important; border-top-style: dashed !important; }
.qe-legend-body { border-image: linear-gradient(90deg, #ff816f, #73d8b4, #78aaff) 1 !important; }
.qe-legend-vector { border-top-color: #ffd36f !important; }
.qe-legend-translation { border-top-color: #d8f27c !important; border-top-style: solid !important; box-shadow: 0 0 7px rgba(216, 242, 124, .34); }
.qe-axis-start { border-top-color: #f0ac77 !important; border-top-style: dashed !important; }
.qe-axis-x { background: #ff816f; }
.qe-axis-y { background: #73d8b4; }
.qe-axis-z { background: #78aaff; }
.qe-axis-current { background: #67d7bf; }
.qe-axis-virtual { border-top-color: #93b7ff !important; border-top-style: dotted !important; }
.qe-transform-readout { margin-top: .75rem; padding: .8rem; background: linear-gradient(135deg, rgba(12, 33, 43, .96), rgba(10, 27, 37, .96)); border: 1px solid rgba(169, 210, 209, .14); border-radius: 12px; }
.qe-transform-chain { display: grid; grid-template-columns: minmax(0, 1fr) 8.2rem minmax(0, 1fr); gap: .55rem; align-items: stretch; }
.qe-transform-chain > div { min-width: 0; padding: .65rem .72rem; background: rgba(255,255,255,.025); border: 1px solid rgba(169,210,209,.1); border-radius: 9px; }
.qe-transform-chain span { display: block; color: #718e97; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.qe-transform-chain strong { display: block; margin: .22rem 0; color: #dff5ef; font: 800 .75rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-transform-chain code { display: block; overflow: hidden; color: #ffd985; font-size: .68rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.qe-transform-chain .qe-transform-operator { position: relative; display: grid; place-content: center; padding-inline: .35rem; text-align: center; background: rgba(103,215,191,.06); }
.qe-transform-operator::before, .qe-transform-operator::after { content: ""; position: absolute; top: 50%; width: .55rem; border-top: 1px solid rgba(103,215,191,.5); }
.qe-transform-operator::before { left: -.56rem; }
.qe-transform-operator::after { right: -.56rem; }
.qe-transform-operator strong { color: #67d7bf; font-size: .95rem; }
.qe-transform-operator small { color: #8fadb2; font: 600 .58rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-transform-meta { display: flex; justify-content: space-between; gap: .8rem; margin-top: .65rem; color: #92acb3; font-size: .68rem; line-height: 1.5; }
.qe-transform-meta code { color: #bde8df; word-break: break-word; }
.qe-transform-meta span { flex: 0 0 auto; color: #f0b47f; }
.qe-translation-readout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; margin-top: .55rem; padding: .48rem .58rem; background: rgba(216, 242, 124, .035); border: 1px solid rgba(216, 242, 124, .13); border-radius: 8px; }
.qe-translation-readout > span { color: #829da2; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qe-translation-readout code { color: #d8f27c; font-size: .66rem; word-break: break-word; }
.qe-translation-readout small { color: #708a90; font-size: .58rem; text-align: right; }
.qe-convention-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.qe-convention-strip span { padding: .2rem .45rem; color: #7f9da5; font: 700 .57rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,.035); border-radius: 999px; }
.qe-output { display: grid; grid-template-columns: 1fr 1.35fr; gap: .7rem; margin-top: .8rem; }.qe-output div { padding: .75rem .9rem; background: #0b1b25; border: 1px solid rgba(169, 210, 209, .12); border-radius: 10px; }.qe-output span { display: block; margin-bottom: .35rem; color: #77939c; font-size: .67rem; }.qe-output code { color: #d5f1e9; font-size: .72rem; line-height: 1.5; word-break: break-word; }
.qe-slerp-lab { margin-top: 1.4rem; padding: 1.4rem; background: linear-gradient(145deg, rgba(13, 35, 44, .92), rgba(7, 22, 30, .92)); border: 1px solid rgba(103, 215, 191, .18); border-radius: var(--rt-radius); }
.qe-slerp-lab .rt-section-heading { margin-bottom: 1rem; }
.qe-slerp-layout { display: grid; grid-template-columns: minmax(17rem, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.qe-slerp-controls { display: flex; flex-direction: column; gap: .72rem; }
.qe-slerp-controls fieldset { margin: 0; padding: .8rem; background: rgba(4, 16, 23, .45); border: 1px solid rgba(169, 210, 209, .13); border-radius: 10px; }
.qe-slerp-controls legend { padding: 0 .35rem; color: #9fc3c0; font: 800 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-slerp-controls label { color: #78969c; font-size: .62rem; }
.qe-slerp-controls input[type="number"] { width: 100%; margin-top: .3rem; padding: .5rem .42rem; color: #e7f3f1; font: 700 .65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: #091d27; border: 1px solid #27414b; border-radius: 7px; }
.qe-slerp-controls input:focus { border-color: #67d7bf; outline: 2px solid rgba(103, 215, 191, .32); }
.qe-slerp-controls .rt-secondary-button { width: 100%; justify-content: center; }
.qe-slerp-range { display: grid; grid-template-columns: 1fr auto; gap: .45rem .7rem; padding: .72rem .78rem; background: rgba(103, 215, 191, .045); border: 1px solid rgba(103, 215, 191, .15); border-radius: 10px; }
.qe-slerp-range span { color: #b6cece; font-weight: 800; }
.qe-slerp-range output { color: #ffd36f; font: 800 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qe-slerp-range input { width: 100%; grid-column: 1 / -1; accent-color: #67d7bf; cursor: grab; }
.qe-slerp-error { margin: 0; padding: .6rem .7rem; color: #ffad9f; font-size: .65rem; line-height: 1.5; background: rgba(255, 129, 111, .08); border: 1px solid rgba(255, 129, 111, .22); border-radius: 8px; }
.qe-slerp-visual { min-width: 0; overflow: hidden; background: rgba(4, 16, 23, .42); border: 1px solid rgba(169, 210, 209, .13); border-radius: 12px; }
.qe-slerp-visual canvas { display: block; width: 100%; height: auto; }
.qe-slerp-metrics { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); border-top: 1px solid rgba(169, 210, 209, .12); }
.qe-slerp-metrics > div { min-width: 0; padding: .7rem .72rem; border-left: 1px solid rgba(169, 210, 209, .09); }
.qe-slerp-metrics > div:first-child { border-left: 0; }
.qe-slerp-metrics span { display: block; margin-bottom: .28rem; color: #69868e; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.qe-slerp-metrics strong, .qe-slerp-metrics code { display: block; overflow: hidden; color: #d8ece9; font: 750 .62rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.qe-slerp-metrics [data-state="pass"] { color: #73d8b4; }
.qe-slerp-metrics [data-state="warning"] { color: #ffad9f; }
.qe-notes { margin-top: 1.8rem; padding: 1.6rem; background: rgba(15, 34, 43, .76); border: 1px solid rgba(169, 210, 209, .14); border-radius: var(--rt-radius); }.qe-notes .rt-section-heading { align-items: end; }.qe-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }.qe-note-grid article { padding: 1rem; background: rgba(255,255,255,.035); border: 1px solid rgba(169,210,209,.1); border-radius: 12px; }.qe-note-grid article > span { color: #72cdbb; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }.qe-note-grid h3 { margin: .55rem 0 .35rem; color: #e3f5f1; font-size: .95rem; }.qe-note-grid p { margin: 0; color: #94abb2; font-size: .78rem; line-height: 1.7; }.qe-note-grid code { color: #c8eee5; }
@media (max-width: 1040px) { .qe-workspace, .qe-slerp-layout { grid-template-columns: 1fr; }.qe-note-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .qe-axis-convention { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .qe-scrubber { padding-inline: .65rem; }.qe-scrubber-stops small { display: none; }.qe-scrubber > p { font-size: .59rem; } }
@media (max-width: 620px) { .qe-frame-toolbar, .qe-path-toolbar { align-items: stretch; flex-direction: column; }.qe-frame-toolbar > div:first-child, .qe-path-toolbar > div:first-child { min-width: 0; }.qe-frame-toggle, .qe-path-toggle { width: 100%; flex-basis: auto; }.qe-frame-toggle button, .qe-path-toggle button { white-space: normal; }.qe-translation-head { align-items: flex-start; flex-direction: column; }.qe-translation-head > small { max-width: none; text-align: left; }.qe-translation-presets button { flex: 1 1 auto; }.qe-stage-timeline { gap: .3rem; }.qe-stage-timeline article { grid-template-columns: 1fr; gap: .2rem; padding: .5rem .42rem; text-align: center; }.qe-stage-timeline article > span { margin: 0 auto .12rem; }.qe-stage-timeline article small { display: none; }.qe-stage-timeline article strong { font-size: .58rem; }.qe-stage-timeline article code { font-size: .58rem; }.qe-order-equation { align-items: flex-start; flex-direction: column; }.qe-order-equation span { text-align: left; }.qe-transform-chain { grid-template-columns: 1fr; }.qe-transform-chain .qe-transform-operator { min-height: 4.4rem; }.qe-transform-operator::before, .qe-transform-operator::after { display: none; }.qe-transform-meta { align-items: flex-start; flex-direction: column; }.qe-translation-readout { grid-template-columns: 1fr; }.qe-translation-readout small { text-align: left; }.qe-canvas-legend .qe-legend-help { width: 100%; margin-left: 0; }.qe-view-buttons { top: .45rem; right: .45rem; }.qe-view-buttons button { padding: .3rem .4rem; }.qe-vector-editor { grid-template-columns: 1fr auto; }.qe-vector-editor > div { grid-column: 1 / -1; }.qe-stage-snapshots > header { align-items: flex-start; flex-direction: column; }.qe-stage-snapshots header p { text-align: left; }.qe-stage-snapshot-grid { grid-template-columns: 1fr; }.qe-stage-snapshot-grid canvas { max-height: 10rem; object-fit: cover; }.qe-slerp-lab { padding: 1rem; }.qe-slerp-metrics { grid-template-columns: 1fr 1fr; }.qe-slerp-metrics > div:nth-child(odd) { border-left: 0; }.qe-slerp-metrics > div:nth-child(n+3) { border-top: 1px solid rgba(169, 210, 209, .09); }.qe-note-grid { grid-template-columns: 1fr; }.qe-three-fields { grid-template-columns: 1fr 1fr 1fr; }.qe-four-fields { grid-template-columns: repeat(2, 1fr); }.qe-output { grid-template-columns: 1fr; }.qe-notes { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .qe-page *, .qe-page *::before, .qe-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }