*{box-sizing:border-box} :root{font-family:Inter,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;color:#dae4e5;background:#101518;font-synthesis:none;font-size:13px}body{margin:0}button,select,input{font:inherit}button,select{color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid #9fe7db;outline-offset:5px}header{height:78px;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid #2a3337;gap:35px}.brand{display:flex;gap:12px;align-items:center;color:#eef4f2;text-decoration:none;font-size:23px;font-weight:600;letter-spacing:-.8px}.brand-icon{color:#92d4c6;font-size:33px;font-weight:400}.version{font:11px monospace;color:#7c8d91;margin-left:7px}.header-label{font-size:12px;color:#91a0a3;letter-spacing:.08em}.status{margin-left:auto;font:11px monospace;color:#a8c5ba;background:#1c2c29;border:1px solid #30443e;border-radius:20px;padding:8px 12px}.status i,.engine-dot{display:inline-block;width:6px;height:6px;background:#8bd1ae;border-radius:50%;margin-right:7px}main{display:grid;grid-template-columns:minmax(0,1fr) 304px;min-height:720px;height:calc(100dvh - 118px)}.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#1b2b31,#101719 75%)}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.scene-title{position:absolute;top:37px;left:38px;pointer-events:none}h1{font-size:29px;font-weight:500;letter-spacing:.04em;margin:0 0 12px}.scene-title p{color:#8e9ea2;font-size:12px;letter-spacing:.06em}.view-label{position:absolute;right:29px;top:42px;font:10px monospace;letter-spacing:.1em;color:#90a3a8}.view-label>span:last-child{border:1px solid #465357;padding:3px 5px;margin-left:9px}.cross{margin-right:9px;color:#8dd0c4}.metrics{position:absolute;left:38px;top:143px;display:flex;gap:23px;font:10px monospace;color:#819398}.metrics b{font-weight:400;color:#c8d6d6;font-size:12px;margin-right:5px}.toolbar{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;padding:5px;background:#182125e8;border:1px solid #39464a;border-radius:12px;box-shadow:0 12px 30px #0004;white-space:nowrap}.toolbar button{border:0;background:transparent;padding:11px 16px;border-radius:7px;color:#a2b1b5;font-size:12px;display:flex;gap:9px;align-items:center}.toolbar button[aria-pressed=true]{background:#d0e6dc;color:#172a27}.toolbar button>span{font-size:18px}kbd{font:10px monospace;border:1px solid currentColor;opacity:.5;border-radius:3px;padding:1px 4px;margin-left:5px}.hint{position:absolute;bottom:30px;width:100%;text-align:center;color:#8fa1a5;font-size:11px;pointer-events:none}.hint span{padding:0 10px}.axis{position:absolute;bottom:34px;left:28px;font:9px monospace;color:#9eb9be;width:54px;text-align:center}.axis svg{display:block}.axis small{display:flex;justify-content:space-between;font-size:9px}aside{border-left:1px solid #2a3337;background:#161d20;padding:28px 25px;overflow:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 29px}.panel-heading h2{font-size:15px;font-weight:500;margin:0}.panel-heading>span{font:8px monospace;letter-spacing:.07em;color:#83969b}.control-section{border-bottom:1px solid #2b363a;padding-bottom:23px;margin-bottom:24px}h3{font-size:11px;font-weight:500;color:#99aeb2;margin:0 0 21px}label,.field-label{display:block;font-size:11px;margin:0 0 12px;color:#c0ccce}select{width:100%;background:#202b2f;border:1px solid #3e4c51;border-radius:6px;padding:11px 10px;font-size:11px;margin:0 0 20px}.segmented{display:flex;border:1px solid #3b494e;border-radius:6px;padding:3px;background:#121a1d}.segmented button{flex:1;border:0;border-radius:3px;padding:8px 0;font-size:11px;color:#93a3a8;background:transparent}.segmented button[aria-pressed=true]{background:#354449;color:#edf2f1}.muted{font-size:9px;line-height:1.7;color:#8a9ba0;margin:11px 0 0}output{float:right;font:11px monospace;color:#d1e4df}input[type=range]{width:100%;height:4px;display:block;margin:17px 0 25px;accent-color:#a5d4c5;cursor:pointer}.range-captions{display:flex;justify-content:space-between;color:#85979c;font-size:9px;margin:-13px 0 25px}.display-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;font-size:11px}.swatches{display:flex;gap:10px}.swatches button{width:18px;height:18px;background:var(--swatch);border:0;border-radius:50%}.swatches button[aria-pressed=true]{outline:1px solid #cfede5;outline-offset:3px}.toggle-label{display:flex;align-items:center;justify-content:space-between;margin:0}.toggle-label input{appearance:none;width:29px;height:17px;background:#35444a;border-radius:12px;cursor:pointer;margin:0}.toggle-label input:before{content:"";display:block;border-radius:50%;background:#b0bec1;width:11px;height:11px;margin:3px;transition:transform .15s}.toggle-label input:checked{background:#5e9f8b}.toggle-label input:checked:before{transform:translateX(12px);background:#f0f6ed}.actions{display:flex;gap:10px}.actions button{flex:1;padding:11px 3px;border:1px solid #405056;background:#223036;border-radius:6px}.actions span{font-size:11px;margin-left:5px}.actions button:hover{background:#35474d}.engine-note{display:flex;align-items:flex-start;margin-top:29px}.engine-dot{margin-top:3px;background:#82b5ac}.engine-note strong{font:9px monospace;letter-spacing:.1em;color:#afc7c2}.engine-note p{font-size:9px;color:#889da2;line-height:1.9;margin:7px 0 0}footer{height:40px;border-top:1px solid #2a3337;display:flex;align-items:center;justify-content:space-between;padding:0 33px;color:#84979b;font-size:10px}footer>span:last-child{font:9px monospace;letter-spacing:.07em}footer i{font-style:normal;margin:0 9px}#error{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:28px;background:#202d32;border:1px solid #60777c;border-radius:10px;width:min(420px,90%);z-index:5}#error h2{font-size:17px}#error p{line-height:1.8;color:#bbcccf}#error button{background:#cae1d7;color:#142821;border:0;border-radius:5px;padding:10px 15px}@media(max-width:850px){main{grid-template-columns:minmax(0,1fr) 260px}aside{padding:25px 18px}.toolbar button{padding:10px}kbd{display:none}.scene-title{left:24px}.view-label{display:none}.axis{display:none}}@media(max-width:640px){header{height:66px;padding:0 18px}.header-label{display:none}.brand{font-size:21px}main{height:auto;display:block;min-height:0}.viewport{height:68dvh;min-height:450px}.scene-title{top:23px}.scene-title h1{font-size:24px}.metrics{top:112px;left:24px;gap:15px}aside{border-left:0;border-top:1px solid #2a3337;padding:25px}.toolbar{bottom:59px}.hint{bottom:22px;font-size:10px}.panel-heading{margin-bottom:25px}footer{padding:0 20px}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}