:root{font-family:Arial,Helvetica,sans-serif;color:#181818;background:#eeece6;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}header{height:150px;padding:26px 34px 24px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #c8c4bb}h1{font-size:38px;line-height:.88;letter-spacing:-2.2px;margin:4px 0 0;font-weight:800;text-transform:uppercase}.eyebrow,.section-label{font-size:10px;letter-spacing:1.8px;font-weight:700;margin:0;color:#65625c}.ghost{border:1px solid #aaa69d;background:transparent;padding:12px 18px;font-size:10px;letter-spacing:1.2px;font-weight:700}main{display:grid;grid-template-columns:minmax(0,1fr) 370px;height:calc(100vh - 150px)}.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 48%,#faf9f4 0,#e2dfd7 60%,#d0ccc2)}#viewport{position:absolute;inset:0}.stage-meta{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;font-weight:700}.hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);font-size:9px;letter-spacing:1.2px;color:#65625c;white-space:nowrap}.panel{overflow:auto;border-left:1px solid #c8c4bb;background:#f4f2ed}.panel section{padding:22px;border-bottom:1px solid #cfcbc2}.uploads{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.uploads label{position:relative;height:75px;padding:11px;border:1px solid #c7c3ba;background:#ebe8e1;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.uploads label:hover{background:#e2ded6}.uploads span{font-size:9px;letter-spacing:1.4px}.uploads strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploads input{position:absolute;opacity:0;inset:0;width:100%;cursor:pointer}.section-head{display:flex;align-items:center;justify-content:space-between}.section-head>span{font-size:8px;letter-spacing:1px;color:#77736c}.segments{margin-top:12px}.segment{display:grid;grid-template-columns:28px 1fr 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #d7d3ca}.segment:last-child{border-bottom:1px solid #d7d3ca}.segment button{width:24px;height:24px;border:0;border-radius:50%;background:transparent;font-size:10px;font-weight:700}.segment.selected button{color:#f4f2ed;background:#181818}.control{display:grid;grid-template-columns:1fr 31px;gap:5px;align-items:center}.control input{width:100%;accent-color:#181818}.control output{font-size:8px;text-align:right;font-variant-numeric:tabular-nums}.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.presets button{border:1px solid #bcb8af;background:transparent;padding:12px 8px;font-size:9px;letter-spacing:.7px;font-weight:700}.presets button:hover,.presets button.active{background:#181818;color:#f4f2ed;border-color:#181818}@media(max-width:800px){header{height:120px;padding:20px}h1{font-size:30px}main{height:auto;grid-template-columns:1fr}.stage{height:56vh;min-height:420px}.panel{border-left:0;border-top:1px solid #c8c4bb}.uploads label{height:68px}}.device-fallback{position:absolute;inset:14% 15%;display:flex;align-items:center;justify-content:center;gap:5px}.device-fallback i{display:block;width:9%;height:58%;background:linear-gradient(145deg,#f35424,#511b16);border:1px solid #2c211d}.device-fallback i:nth-child(2),.device-fallback i:nth-child(8){height:76%}.device-fallback i:nth-child(3),.device-fallback i:nth-child(7){height:88%}.device-fallback i:nth-child(4),.device-fallback i:nth-child(6){height:96%}.device-fallback i:nth-child(5){height:100%}.device-fallback b{position:absolute;bottom:0;font-size:9px;letter-spacing:1.5px;color:#77736c}.webgl .device-fallback{display:none}.system-controls{display:grid;gap:12px;margin-top:14px}.system-controls label{display:grid;grid-template-columns:78px 1fr 45px;gap:8px;align-items:center}.system-controls span,.system-controls output{font-size:8px;letter-spacing:.7px}.system-controls output{text-align:right;font-variant-numeric:tabular-nums}.system-controls input{width:100%;accent-color:#181818}.view-actions{display:flex;align-items:center;gap:6px}.view-actions button{border:1px solid #aaa69d;background:#f4f2edd1;padding:6px 9px;font-size:8px;letter-spacing:1px;font-weight:700}.view-actions button:hover{color:#fff;background:#181818}.view-actions span{margin-left:8px}.view-gizmo{position:absolute;top:54px;left:24px;width:92px;height:92px;border-radius:50%;background:#1e1e1e1f;z-index:4;cursor:grab;-webkit-user-select:none;user-select:none}.view-gizmo:active{cursor:grabbing}.view-gizmo span{position:absolute;inset:31px;border-radius:50%;background:#f4f2ed;border:1px solid #8b8881}.view-gizmo button{position:absolute;width:27px;height:27px;border:0;border-radius:50%;z-index:2;font-size:10px;font-weight:800}.view-gizmo .gx{right:7px;top:33px;background:#ff4860}.view-gizmo .gy{left:32px;top:7px;background:#76be1d}.view-gizmo .gz{left:7px;top:33px;color:#fff;background:#2f8ee8}.axis-picker{display:flex;gap:3px;margin-left:auto;margin-right:10px}.axis-picker button{width:23px;height:22px;border:1px solid #aaa69d;background:transparent;font-size:8px;font-weight:700}.axis-picker button.active{color:#fff;background:#181818}.section-head>span{white-space:nowrap}.uploads label{height:86px}.uploads em{color:#77736c;font-size:8px;font-style:normal;letter-spacing:.7px;line-height:1}#viewport canvas{display:block;height:100%;width:100%}