*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:#0b0c0e;font-family:system-ui,sans-serif}#app{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.quadrant{position:relative;overflow:hidden;border:1px solid #2a2d33}.quadrant canvas{display:block}.slice-quadrant{display:flex;align-items:center;justify-content:center}.square-wrap{position:relative;aspect-ratio:1;height:min(100%,100vw);max-width:100%;max-height:100%}.slice-img,.slice-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.slice-overlay{touch-action:none}.axis-label{position:absolute;top:8px;right:12px;font-size:13px;font-weight:600;text-shadow:0 1px 3px #000;pointer-events:none}.dominant-btn,.reset-btn,.layout-btn{position:absolute;top:8px;left:12px;padding:4px 10px;font-size:12px;color:#ddd;background:#14161ad9;border:1px solid;border-radius:4px;cursor:pointer}.dominant-btn:hover,.reset-btn:hover,.layout-btn:hover{background:#3c4048e6}.reset-btn,.layout-btn{border-color:#888}.layout-btn{top:40px}.tab-bar{position:fixed;top:8px;left:50%;transform:translate(-50%);z-index:10;display:none;gap:6px}body.mobile .tab-bar{display:flex}.tab-bar button{padding:4px 14px;font-size:13px;color:#ddd;background:#14161ad9;border:1px solid #888;border-radius:4px;cursor:pointer}.tab-bar button.active{background:#505660f2;color:#fff}.tab-bar button.dominant{box-shadow:0 0 0 2px var(--axis-color),0 0 10px var(--axis-color);color:var(--axis-color);font-weight:700}body.mobile #app{grid-template-columns:1fr;grid-template-rows:1fr}body.mobile .quadrant:not(.active-tab){display:none}.time-widget{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;z-index:5}.time-title{font-size:12px;font-weight:700;letter-spacing:3px;color:#aab;text-shadow:0 1px 3px #000;writing-mode:vertical-rl;transform:rotate(180deg)}.time-col{display:flex;flex-direction:column;align-items:center;gap:8px}.time-slider{writing-mode:vertical-lr;direction:rtl;height:24vh;cursor:pointer;accent-color:#99a}.scan-label{font-size:16px;color:#ccd;text-shadow:0 1px 3px #000;white-space:nowrap;min-width:10ch;text-align:center;font-variant-numeric:tabular-nums}.bar-label{position:absolute;bottom:32px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:3px;color:#aab;text-shadow:0 1px 3px #000;pointer-events:none}.rot-wheel{position:absolute;top:8px;left:12px;width:128px;height:128px;touch-action:none}.translate-slider{position:absolute;bottom:10px;left:10%;width:80%;cursor:pointer}