/* FrostCandy's Laboratory — Rotational Invariance browser lab */
.rotation-lab-stage { display:block; padding:14px; text-align:left; }
.rotation-workbench { width:100%; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(255px,.72fr); gap:12px; align-items:start; }
.rotation-side-stack { min-width:0; display:grid; gap:10px; grid-column:2; grid-row:1 / span 2; }
.rotation-visual-panel,.rotation-controls,.rotation-results,.rotation-sweep { border:1px solid rgba(117,213,253,.17); border-radius:12px; background:rgba(2,8,12,.56); }
.rotation-visual-panel { grid-column:1; grid-row:1; overflow:hidden; }
.rotation-visual-head,.rotation-sweep-head { min-height:34px; padding:7px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid rgba(117,213,253,.12); color:#8ecadd; font-size:.66rem; font-weight:900; letter-spacing:.07em; }
#rotRunState,#rotSweepVerdict { color:#75d5fd; white-space:nowrap; }
.rotation-vector-svg { display:block; width:100%; height:auto; min-height:245px; }
.rot-cube path { fill:none; stroke:rgba(117,213,253,.15); stroke-width:2; vector-effect:non-scaling-stroke; }
.rot-cube circle { fill:#07131b; stroke:rgba(117,213,253,.38); stroke-width:2; }
.rot-ring { fill:none; stroke:rgba(117,213,253,.12); stroke-width:2; stroke-dasharray:5 9; }
.rot-axis { stroke:rgba(255,214,102,.58); stroke-width:3; stroke-dasharray:8 7; stroke-linecap:round; }
.rot-origin { fill:#f6fdff; stroke:#75d5fd; stroke-width:3; filter:url(#rotGlow); }
.rot-base-vector { stroke:#557d8b; stroke-width:4; stroke-linecap:round; opacity:.82; }
.rot-fv-vector { stroke:#75d5fd; stroke-width:7; stroke-linecap:round; opacity:0; filter:url(#rotGlow); transition:opacity .25s ease; }
.rot-ruler-vector { stroke:#f4fbff; stroke-width:3; stroke-linecap:round; stroke-dasharray:3 8; opacity:0; }
.rot-fv-dot { fill:#07131b; stroke:#f4fbff; stroke-width:3; opacity:0; filter:url(#rotGlow); }
.rot-svg-label { fill:#82adbb; font-size:12px; font-weight:900; letter-spacing:.08em; }
.rot-svg-note { fill:#91b8c4; font-size:11.5px; font-weight:700; }
.rotation-seal { padding:7px 10px; border-top:1px solid rgba(117,213,253,.12); color:#7899a4; font-size:.69rem; font-weight:900; letter-spacing:.065em; text-align:center; }
.rotation-seal.is-sealed { color:#dfffc9; background:rgba(170,245,127,.04); }
.rotation-controls { padding:11px; display:grid; gap:8px; }
.rotation-controls label { display:grid; gap:4px; color:#9fc3ce; font-size:.7rem; font-weight:800; }
.rotation-controls input,.rotation-controls select { width:100%; min-width:0; box-sizing:border-box; border:1px solid rgba(117,213,253,.27); border-radius:7px; background:rgba(3,10,14,.92); color:#eefbff; padding:6px 7px; font:inherit; }
.rotation-controls input[type="range"] { padding:0; accent-color:#75d5fd; }
.rot-vector-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.rot-range-value { color:#75d5fd; font-size:.69rem; }
.rot-control-actions { display:grid; gap:6px; }
.rot-control-actions button { min-height:32px; border-radius:8px; font:inherit; font-size:.72rem; font-weight:900; cursor:pointer; }
.rot-run-button { border:1px solid rgba(117,213,253,.8); background:rgba(117,213,253,.14); color:#f5fdff; }
.rot-secondary-button { border:1px solid rgba(117,213,253,.35); background:rgba(117,213,253,.06); color:#b7deea; }
.rot-ruler-button { border:1px solid rgba(244,251,255,.38); background:rgba(244,251,255,.045); color:#eaf9ff; }
.rot-control-actions button:hover:not(:disabled),.rot-control-actions button:focus-visible:not(:disabled) { border-color:#fff; color:#fff; outline:none; }
.rot-control-actions button:disabled { opacity:.34; cursor:not-allowed; }
.rotation-results { grid-column:1; grid-row:2; padding:9px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; align-self:stretch; }
.rot-result-card { min-width:0; padding:9px; border:1px solid rgba(117,213,253,.12); border-radius:8px; background:rgba(4,12,17,.7); }
.rot-result-card span { display:block; margin-bottom:4px; color:#728f99; font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.rot-result-card strong { display:block; color:#dff7ff; font-size:.74rem; line-height:1.35; overflow-wrap:anywhere; }
.rot-ruler-result.is-open { border-color:rgba(244,251,255,.24); background:rgba(244,251,255,.035); }
.rot-ruler-result.is-open strong { color:#fff; }
.rotation-sweep { overflow:hidden; }
.rotation-sweep-head strong { font-size:.64rem; }
#rotSweepSvg { display:block; width:100%; height:auto; min-height:72px; max-height:112px; }
.rot-sweep-axis { stroke:rgba(117,213,253,.25); stroke-width:1.5; }
.rot-sweep-gate { stroke:rgba(255,214,102,.55); stroke-width:1.5; stroke-dasharray:6 5; }
.rot-sweep-gate-label { fill:#ead79f; font-size:22px; font-weight:900; paint-order:stroke fill; stroke:rgba(3,9,13,.88); stroke-width:2px; stroke-linejoin:round; }
.rot-sweep-bar { fill:rgba(117,213,253,.68); }
.rot-sweep-bar.is-over { fill:rgba(255,150,194,.75); }
.rot-sweep-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:6px 9px 8px; border-top:1px solid rgba(117,213,253,.1); color:#9fc1cb; font-size:.61rem; font-weight:800; }
@media (max-width:860px){ .rotation-workbench{grid-template-columns:1fr}.rotation-visual-panel{grid-column:1;grid-row:1}.rotation-results{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}.rotation-side-stack{grid-column:1;grid-row:3} }
@media (max-width:520px){ .rotation-lab-stage{padding:9px}.rotation-results{grid-template-columns:1fr 1fr}.rot-vector-inputs{grid-template-columns:1fr 1fr 1fr}.rotation-vector-svg{min-height:215px}.rot-sweep-stats{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .rot-fv-vector{transition:none} }