:root{color-scheme:dark;--bg:#080e18;--surface:#101925;--surface-deep:#0c1521;--surface-upper:#162231;--line:#253547;--line-bright:#34485f;--text:#edf4ff;--secondary:#9aaabe;--muted:#6d8097;--accent:#65d4df;--accent-light:#b6f2f1;--red:#fb7185;--green:#5bd9ac;--blue:#70a9ff;--gold:#efc078;--radius:16px;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #90f0e7;outline-offset:3px}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.17;background-image:linear-gradient(#46607920 1px,transparent 1px),linear-gradient(90deg,#46607920 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 75%)}.ambient{position:fixed;z-index:-2;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.17}.ambient-a{background:#207a9a;width:600px;height:520px;left:-330px;top:-260px}.ambient-b{background:#403a9c;width:500px;height:540px;right:-280px;top:360px}.app{max-width:1552px;padding:0 32px;margin:auto}
.topbar{min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #283447}.branding{display:flex;gap:16px;align-items:center}.brand-mark{display:grid;place-items:center;width:56px;height:56px;border:1px solid #356679;border-radius:15px;color:var(--accent);background:linear-gradient(145deg,#162d3a,#0d1e2d);box-shadow:inset 0 1px #4fd6e315}.brand-mark svg{width:35px}.eyebrow,.overline,.intro-index{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700}.brand-copy h1{font-size:25px;line-height:1.45;margin:4px 0 0;letter-spacing:.5px;font-weight:700}.brand-copy h1 span{font-size:16px;color:#a3c7d5;font-weight:500;margin-left:8px}.topbar-actions{display:flex;gap:20px;align-items:center}.top-status{font:600 10px var(--mono);letter-spacing:1px;color:#7e93a9;white-space:nowrap}.top-status i,.live-indicator{width:7px;height:7px;display:inline-block;border-radius:50%;background:#62d6a5;box-shadow:0 0 0 4px #62d6a51a,0 0 13px #62d6a58c;margin-right:9px}.button{border:1px solid var(--line-bright);background:#1c2a3a;color:#e0edf7;border-radius:9px;padding:8px 15px;white-space:nowrap;transition:.2s}.button:hover{border-color:var(--accent);color:white;background:#203747}.button span{font-size:20px;line-height:10px;vertical-align:-2px;margin-right:4px}.intro{display:flex;align-items:center;gap:25px;min-height:80px}.intro p{color:#a0aec2;margin:0;line-height:1.8;font-size:12px}.intro-index{color:#8fa7b9;white-space:nowrap}.surface{background:linear-gradient(150deg,#121c29 0%,#0e1723 100%);border:1px solid #273648;border-radius:var(--radius);box-shadow:0 8px 34px #02070c33,inset 0 1px #ffffff08}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(385px,.9fr);gap:17px;align-items:start}.visual-panel{padding:21px;position:sticky;top:17px}.panel-title-row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:19px}.panel-title-row h2{font-size:16px;font-weight:650;letter-spacing:.15px;margin:6px 0 5px;line-height:1.6}.world-pill,.body-pill{font:700 11px var(--mono);display:inline-block;padding:3px 6px;border-radius:5px;vertical-align:1px}.world-pill{background:#16425c;color:#73c5fd}.body-pill{background:#134c44;color:#5fdfba}.thin-slash{color:#546a82;margin:0 2px}.formula-text{font:12px var(--mono);color:#a7bccc;margin:0}.segmented{display:flex;align-items:center;border:1px solid #2c3f55;background:#0a131f;border-radius:9px;padding:3px;gap:2px}.segmented button{border:0;border-radius:6px;transition:.2s;background:transparent;color:#869bb1;padding:7px 10px;white-space:nowrap;font-size:12px}.segmented button:hover{color:#e9f7ff;background:#203047}.segmented button.active{background:#23455a;color:#9cebec;box-shadow:inset 0 0 0 1px #42798a50}.view-buttons button{text-transform:uppercase;font:600 12px var(--mono)}.scene-shell{height:510px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 49% 44%,#182c40 0%,#0b1726 55%,#08131f 100%);border:1px solid #293c50;border-radius:12px}.scene-shell::after{content:"";pointer-events:none;position:absolute;inset:0;border:1px solid #ffffff06;border-radius:12px}.scene-shell canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.scene-shell canvas:active{cursor:grabbing}.scene-corner{position:absolute;pointer-events:none;z-index:2}.scene-top-left{left:17px;top:17px;color:#a8bacb;letter-spacing:1.35px;font:600 10px var(--mono)}.scene-top-left small{display:block;color:#5f748d;margin-left:18px;margin-top:6px;letter-spacing:.55px}.scene-top-right{right:14px;top:13px;display:flex;gap:6px;pointer-events:auto}.scene-tool{width:31px;height:31px;display:grid;place-items:center;background:#112136cc;color:#92b5cb;border:1px solid #365064;border-radius:7px;font-size:20px;line-height:1}.scene-tool:hover,.scene-tool[aria-pressed="false"]{color:#dcfaff;background:#284158}.scene-bottom-left{left:17px;bottom:15px;background:#091420b0;padding:7px 9px;border:1px solid #243b4b;border-radius:6px;color:#90a2b6;font-size:10px;display:flex;align-items:center;gap:7px}.legend-mark{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:6px}.legend-mark:first-child{margin-left:0}.world-mark{background:var(--blue)}.body-mark{background:var(--green)}.point-mark{background:var(--gold)}.scene-bottom-right{right:15px;bottom:15px;font:9px var(--mono);color:#60758c;letter-spacing:1px}.dot-separator{padding:0 3px}
.stage-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:19px 2px 17px;border-bottom:1px solid var(--line)}.stage-label{display:flex;align-items:center;gap:10px}.stage-label strong{font-size:12px;font-weight:600}.stage-chain{font:11px var(--mono);color:#7390a4}.stage-controls{display:flex;gap:7px}.stage-controls button{border:1px solid #304055;background:#152232;color:#99afc4;border-radius:7px;padding:5px 12px;font:11px var(--mono);min-width:43px}.stage-controls button:hover{border-color:#497e90}.stage-controls button.active{border-color:#2f8798;color:#b1f1ed;background:#1b4654}.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:17px}.readout{padding:14px 13px;background:#0b1521;border:1px solid #233547;border-radius:8px;min-width:0}.readout span{display:block;font-size:11px;color:#859aaf;margin-bottom:7px}.readout strong{font-size:11px;font-weight:500;color:#e1eef6;white-space:nowrap;letter-spacing:-.35px}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.controls-column{display:flex;flex-direction:column;gap:15px}.control-card{padding:20px 21px}.section-heading{display:flex;align-items:start;gap:14px;margin-bottom:17px}.section-nr{color:#599aaf;border:1px solid #2d5063;background:#102638;min-width:29px;height:28px;text-align:center;line-height:26px;border-radius:6px;font:12px var(--mono);padding-top:6px}.section-heading h2{font-size:16px;line-height:1.25;margin:0 0 5px;font-weight:660}.section-heading p{margin:0;color:var(--muted);font-size:12px}.unit-tag{margin-left:auto;border:1px solid #315265;color:#91cedb;background:#142f3e;font:10px var(--mono);padding:3px 7px;border-radius:5px}.wide{width:100%;margin-bottom:12px}.wide button{flex:1;font-size:12px;padding:9px 7px}.hint{font-size:11px;color:#8198ac;line-height:1.75;margin:8px 0 11px}.detail-box{border:1px solid #2c4555;background:#102333;border-radius:8px;padding:11px 13px;color:#bce4ed}.math-prefix{font:12px var(--mono);letter-spacing:.1px}.field-inline{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:14px;font-size:12px;color:#a8bac9}.field-inline select{background:#16293a;border:1px solid #355065;color:#d9f0f8;border-radius:7px;padding:7px 11px;min-width:124px}.ranges{display:flex;flex-direction:column;gap:15px}.range-item{display:block}.range-header{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;color:#b2c0cf;margin-bottom:8px}.range-label b{font-size:11px;font-weight:500}.range-label .axis-letter{font:600 11px var(--mono);margin-left:8px}.range-label .axis-letter.X{color:var(--red)}.range-label .axis-letter.Y{color:var(--green)}.range-label .axis-letter.Z{color:var(--blue)}.range-value{display:flex;align-items:center;gap:5px;color:#668198}.range-value input{font:600 12px var(--mono);font-variant-numeric:tabular-nums;display:inline-block;width:75px;text-align:right;color:#e1f0fb;border:0;background:transparent;border-radius:4px;padding:1px 2px}.range-value input:focus{background:#1c3348}.range-value .unit{font:11px var(--mono);min-width:15px;text-align:right}.range-item input[type=range]{display:block;width:100%;height:6px;appearance:none;-webkit-appearance:none;outline:none;border-radius:99px;background:linear-gradient(to right,var(--track-color,#65d4df) 0%,var(--track-color,#65d4df) var(--percent,50%),#283648 var(--percent,50%),#283648 100%);cursor:pointer}.range-item input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid #dcf7fc;background:var(--track-color,#65d4df);border-radius:50%;box-shadow:0 0 0 2px #314859}.range-item input[type=range]::-moz-range-thumb{width:8px;height:8px;border:3px solid #dcf7fc;background:var(--track-color,#65d4df);border-radius:50%}.axis-order{font:11px var(--mono);color:#8fbac2;border-top:1px dashed #2c3d4e;margin-top:15px;padding-top:12px;white-space:pre-wrap}.formula-big{margin-bottom:6px;font-size:15px;line-height:1.3;font-family:Georgia,'Times New Roman',serif}
.result-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:17px;margin-top:18px}.result-panel{padding:24px}.result-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.result-heading h2{font-size:18px;letter-spacing:.2px;margin:6px 0 3px}.subheading{font-size:12px;color:#a0b1c1;margin:0}.result-actions{display:flex;align-items:center;gap:10px}.dimension-label{font:11px var(--mono);border:1px solid #31465c;background:#152536;padding:6px 9px;border-radius:6px;color:#91b5cc}.icon-button{font-size:18px;line-height:20px;width:33px;height:32px;border:1px solid #31465c;background:#152536;border-radius:7px;color:#99bed3}.icon-button:hover{color:white;border-color:var(--accent)}.matrix-region{display:flex;align-items:center;justify-content:center;min-height:242px;padding:13px 0}.matrix-content{position:relative;display:grid;grid-template-columns:repeat(4,minmax(73px,1fr));gap:0;max-width:460px;width:100%;padding:5px 16px}.matrix-content::before,.matrix-content::after{content:"";position:absolute;top:0;bottom:0;width:8px;border-top:2px solid #7e96ae;border-bottom:2px solid #7e96ae}.matrix-content::before{left:0;border-left:2px solid #7e96ae}.matrix-content::after{right:0;border-right:2px solid #7e96ae}.matrix-cell{padding:9px 6px;text-align:center;color:#e0edfb;font:14px var(--mono);font-variant-numeric:tabular-nums}.matrix-cell.shift{color:#71d4c9}.matrix-cell.last{color:#8195a8}.tiny-note{font-size:11px;color:#758aa1;margin:0}.quaternion-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:40px 0 26px}.quat-tile{background:#0c1724;border:1px solid #2c3e50;padding:19px 4px 18px;text-align:center;border-radius:10px;min-width:0}.quat-tile span{font:16px var(--mono);color:#65d3da;display:block;margin-bottom:10px}.quat-tile strong{font:600 16px var(--mono);color:#e4effb;letter-spacing:-.5px}.quat-note{display:flex;align-items:center;gap:9px;background:#132636;border:1px solid #2b4c5c;padding:13px;border-radius:8px;color:#90a9ba;font-size:11px}.info-icon{font:700 11px Georgia,serif;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #5997ac;color:#77d6de;border-radius:50%;flex-shrink:0}
.theory-section{margin-top:18px;padding:26px}.theory-top{display:flex;justify-content:space-between;align-items:center}.theory-top h2{font-size:21px;margin:7px 0 0}.theory-top p{font-size:12px;color:#8ea2b7;margin:2px 0}.theory-mode{border:1px solid #326177;color:#9cd4e5;background:#163144;border-radius:7px;padding:8px 11px;font:600 11px var(--mono)}.theory-grid{display:grid;grid-template-columns:1fr 1.12fr 1.12fr;gap:13px;margin-top:24px}.theory-card{background:#0d1926;border:1px solid #2b3c4e;border-radius:10px;padding:21px 18px;min-height:205px}.theory-number{font:600 11px var(--mono);color:#6cb9c8}.theory-equation{font:16px Georgia,'Times New Roman',serif;color:#e4f4ff;white-space:normal;margin:19px 0 15px}.theory-equation.small-equation{font-size:13px;margin-top:-4px}.theory-card>p:last-child{font-size:11px;color:#8198ac;line-height:1.9;margin:9px 0 0}.axis-matrices{display:grid;grid-template-columns:1fr repeat(3,1fr);gap:12px;align-items:center;border-top:1px solid #2a3c50;margin-top:22px;padding-top:25px}.axis-matrices p{font:12px var(--mono);color:#849aae;margin:8px 0}.base-matrix{font:13px Georgia,serif;color:#c0d3df;display:flex;gap:8px;align-items:center;justify-content:center}.compact-matrix{position:relative;display:inline-block;font:12px/1.9 var(--mono);padding:0 12px;text-align:center;white-space:nowrap}.compact-matrix::before,.compact-matrix::after{content:"";position:absolute;top:0;bottom:0;width:6px;border-top:1px solid #8199b0;border-bottom:1px solid #8199b0}.compact-matrix::before{left:0;border-left:1px solid #8199b0}.compact-matrix::after{right:0;border-right:1px solid #8199b0}.quaternion-theory{margin-top:22px;padding:22px;border:1px solid #2b3d4b;background:#0c1824;border-radius:9px}.quaternion-theory p{font:14px Georgia,serif;color:#b5cfe2;margin:10px 0}.quaternion-theory strong{font:12px var(--mono);color:#92d4df}
.presets-section{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding:20px 25px}.presets-section h2{font-size:20px;margin:4px 0 0}.presets-section h2 small{font-size:11px;color:#8198ac;font-weight:400}.preset-buttons{display:flex;gap:10px;flex-wrap:wrap}.preset-buttons button{border:1px solid #32495e;border-radius:8px;background:#162638;color:#c8dfed;padding:12px 14px;min-width:115px;font-size:12px;text-align:left;display:flex;gap:15px;justify-content:space-between;align-items:center}.preset-buttons button span{color:#82bbc7}.preset-buttons button:hover{color:#eafcff;border-color:#73aab5;background:#233c4d}.page-footer{display:flex;gap:15px;justify-content:space-between;padding:30px 0 39px;color:#587085;font:10px var(--mono);letter-spacing:.7px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:10;background:#214a55;border:1px solid #498a94;color:#e2faf8;padding:10px 19px;border-radius:9px;box-shadow:0 6px 22px #0008;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1270px){.app{padding:0 24px}.workspace{grid-template-columns:minmax(0,1.08fr) minmax(365px,1fr)}.visual-panel{padding:17px}.scene-shell{height:455px}.readout-grid{gap:9px}.readout{padding:12px 9px}.readout strong{font-size:10px}.panel-title-row{flex-wrap:wrap}.quaternion-tiles{gap:7px}.quat-tile strong{font-size:13px}}
@media(max-width:980px){.workspace{grid-template-columns:1fr}.visual-panel{position:static}.scene-shell{height:480px}.controls-column{display:grid;grid-template-columns:1fr 1fr;gap:15px}.result-grid{grid-template-columns:1fr 1fr}.theory-grid{grid-template-columns:1fr}.axis-matrices{grid-template-columns:1fr 1fr;gap:15px}.quaternion-tiles{padding:32px 0 28px}}
@media(max-width:690px){.app{padding:0 12px}.topbar{min-height:92px;gap:8px}.brand-mark{height:43px;width:43px;border-radius:12px}.brand-copy h1{font-size:16px}.brand-copy h1 span{display:block;font-size:11px;margin-left:0}.eyebrow{font-size:8px;letter-spacing:1.1px}.top-status{display:none}.button{padding:8px}.intro{display:block;padding:17px 2px 14px;min-height:0}.intro p{font-size:11px;margin-top:3px}.workspace{gap:12px}.visual-panel{padding:13px}.panel-title-row{gap:11px}.panel-title-row h2{font-size:14px}.scene-shell{height:365px}.scene-bottom-right{display:none}.scene-bottom-left{font-size:9px;left:7px;bottom:9px}.scene-top-left{left:10px;top:11px;font-size:9px}.scene-top-left small{font-size:8px}.view-buttons{width:100%}.view-buttons button{flex:1}.stage-row{flex-wrap:wrap}.stage-label{width:100%;justify-content:space-between}.stage-controls{width:100%}.stage-controls button{flex:1}.readout-grid{grid-template-columns:1fr 1fr;gap:7px}.readout{padding:9px 7px}.readout span{font-size:10px}.readout strong{font-size:9px;letter-spacing:-.4px}.controls-column,.result-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.control-card,.result-panel{padding:17px}.section-heading{gap:10px}.section-heading p{font-size:11px}.matrix-content{grid-template-columns:repeat(4,minmax(0,1fr))}.matrix-cell{padding:9px 2px;font-size:12px}.result-heading h2{font-size:16px}.quaternion-tiles{padding:24px 0}.theory-section{padding:18px}.theory-top{align-items:start;gap:9px}.theory-mode{font-size:9px;padding:6px}.theory-grid{margin-top:16px;gap:10px}.theory-card{min-height:0}.axis-matrices{grid-template-columns:1fr;gap:15px}.base-matrix{justify-content:start}.presets-section{flex-direction:column;align-items:start;padding:17px}.preset-buttons{width:100%}.preset-buttons button{flex:1;min-width:120px}.page-footer{flex-wrap:wrap;font-size:9px}.quat-tile strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.toast{transition:none}}