*{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}@supports (height: 100dvh){html,body{height:100dvh}}body{touch-action:manipulation;overscroll-behavior:none}#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}.dominant-btn,.reset-btn,.layout-btn,.showme-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,.showme-btn:hover{background:#3c4048e6}.reset-btn,.layout-btn,.showme-btn{border-color:#888}.layout-btn{top:40px}.showme-btn{top:72px;z-index:60}body.mobile .showme-btn{display:none}.showme-btn.active{color:#fff;border-color:#8ad;animation:showme-pulse 1.1s ease-in-out infinite}@keyframes showme-pulse{0%,to{box-shadow:0 0 #88aaddb3}50%{box-shadow:0 0 14px 5px #88aadd73}}.demo-shield{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}.demo-touch{position:fixed;width:36px;height:36px;border-radius:50%;border:2.5px solid #fff;background:transparent;transform:translate(-50%,-50%);box-shadow:0 0 8px #0009;pointer-events:none;z-index:55;box-sizing:border-box}.demo-touch.pressed{background:#ffffffd9}.demo-flash{animation:demo-flash .45s ease-in-out 2}@keyframes demo-flash{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 12px 4px #fffc;background:#788296e6}}.tab-bar{position:fixed;top:8px;left:50%;transform:translate(-50%);z-index:10;display:none;gap:6px}body.mobile .tab-bar{display:flex;top:0;left:0;right:0;transform:none;height:44px;align-items:center;justify-content:center;background:#14161a;border-bottom:1px solid #2a2d33}body.mobile #app{padding-top:44px}body:not(.mobile) .only-mobile{display:none!important}.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;pointer-events:none}.time-strip,.loop-btn{pointer-events:auto}.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:3px}.loop-btn{padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:1px;color:#aab;background:#14161ad9;border:1px solid #667;border-radius:4px;cursor:pointer}.loop-btn.active{background:#4a5568;color:#fff;border-color:#9ad}.time-strip{position:relative;width:60px;height:24vh;touch-action:none;cursor:pointer}.time-strip:before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:4px;transform:translate(-50%);background:#3a3e46;border-radius:2px}.time-tick{position:absolute;left:50%;width:10px;height:2px;transform:translate(-50%,-50%);background:#556;pointer-events:none}.time-handle,.time-ghost{position:absolute;left:50%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;pointer-events:none}.time-handle{background:#b8bcc8;border:2px solid rgba(255,255,255,.35)}.time-ghost{background:transparent;border:2px dashed #eef}.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background:transparent}.translate-slider::-webkit-slider-runnable-track{height:28px;border-radius:14px;background:linear-gradient(to bottom,transparent 12px,#3a3e46 12px,#3a3e46 16px,transparent 16px)}.translate-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--slider-color, #99a);border:2px solid rgba(255,255,255,.35);box-sizing:border-box;margin-top:1px}