:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#243a36;background:#edf0e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:48px;display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid #d7ded4;background:#f8f9f5}.brand{flex-shrink:0;font-weight:750;font-size:18px;letter-spacing:-.5px;text-decoration:none;color:inherit}button{font:inherit;font-size:12px;font-weight:600;border:1px solid #bdcbbd;background:transparent;color:inherit;border-radius:8px;padding:11px 13px;cursor:pointer;transition:background .15s}button:hover{background:#e0e8dc}button:focus-visible,input:focus-visible{outline:3px solid #b87826;outline-offset:3px}button:disabled{cursor:wait;opacity:.4}main{height:calc(100dvh - 48px);min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) 340px}#viewport{position:relative;overflow:hidden;min-width:0;background:radial-gradient(ellipse at 50% 40%,#f9faf7 0,#edf0e9 70%)}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}aside{background:#f8f9f5;padding:30px 25px;overflow:auto;border-left:1px solid #d7ded4}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#718477;font-weight:700;margin:0 0 15px}h1{font-size:29px;letter-spacing:-1px;font-weight:560;line-height:1.12;margin:0 0 14px}.intro{font-size:13px;line-height:1.6;color:#687a70;margin:0 0 21px}fieldset{border:0;padding:0;margin:0;min-width:0}.control{border-top:1px solid #d7ded4;padding:19px 0}.control-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7b8a7e;gap:4px}.control-heading strong{color:#243a36;font-size:13px;font-weight:650;margin-left:8px}.control p{font-size:11px;line-height:1.6;color:#728175;margin:9px 0 12px}.control button{width:100%}.pair{display:flex;gap:7px}.pair button{padding:10px 8px;white-space:nowrap}.pair button:last-child{font-size:10px;flex:0 0 auto;width:auto}input[type=range]{accent-color:#48694f;width:100%;margin:5px 0;cursor:ew-resize}.ends{display:flex;justify-content:space-between;font-size:9px;color:#7a897c}output{font-size:11px;white-space:nowrap;color:#48694f;font-variant-numeric:tabular-nums}.reset{width:100%;background:#294c3d;color:#fff;border-color:#294c3d;margin-top:2px}.reset:hover{background:#38654f}.help{font-size:10px;line-height:1.9;color:#718174;margin:20px 0 12px}.note{font-size:10px;line-height:1.6;color:#889389}.caption{position:absolute;bottom:22px;left:25px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1px;pointer-events:none}.caption span:last-child{letter-spacing:0;color:#809080}.dot{width:6px;height:6px;background:#679065;border-radius:100%}#loading{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);background:#f8f9f5ed;padding:20px 26px;border:1px solid #d7ded4;border-radius:12px;max-width:85%;z-index:2;font-size:13px;line-height:1.6}#hover{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#294c3ded;color:white;padding:9px 15px;border-radius:20px;font-size:11px;pointer-events:none;display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){header{height:44px;padding:0 10px;gap:12px}.brand{font-size:16px}main{height:auto;min-height:0;grid-template-columns:1fr}#viewport{height:58dvh;min-height:330px}aside{border-left:0;border-top:1px solid #d7ded4;padding:25px}h1 br{display:none}h1{font-size:25px}.intro{margin-bottom:15px}.caption{left:17px;font-size:9px}aside .control{padding:14px 0}.help{margin-top:15px}}

[hidden]{display:none!important}select{width:100%;margin:10px 0 8px;padding:10px;border:1px solid #bdcbbd;border-radius:8px;background:#fff;color:#243a36;font:inherit;font-size:12px}fieldset>label{font-size:10px;color:#687a70}h2{font-size:16px;margin:0 0 10px}#value-label{display:block;text-align:right}#place-control .pair,.control>.pair{margin-top:10px}#rail-mode{display:block;font-size:11px;margin:12px 0}

.header-actions{display:flex;align-items:center;gap:5px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:4px}.header-actions button{flex:0 0 auto;white-space:nowrap;font-size:11px;line-height:16px;padding:6px 9px;border-radius:6px;background:#fff8}.header-actions button:hover{background:#e0e8dc}.header-actions button:focus-visible{outline-offset:1px}
.connection-menu{position:absolute;z-index:6;width:236px;max-width:calc(100% - 16px);overflow-y:auto;padding:4px;background:#fcfdf9;border:1px solid #ccd6c9;border-radius:9px;box-shadow:0 8px 24px #243a3626,0 1px 4px #243a3614}
.connection-menu-title{padding:6px 8px 8px;margin-bottom:3px;border-bottom:1px solid #e3e9df;font-size:12px;font-weight:700;line-height:1.3}
.connection-menu button{display:flex;flex-direction:column;align-items:flex-start;position:relative;gap:2px;width:100%;text-align:left;border:0;border-radius:5px;padding:6px 26px 6px 8px;font-size:11px;line-height:1.4;white-space:normal}
.connection-menu button:hover,.connection-menu button:focus-visible{background:#e6eedf}
.connection-menu button:disabled{cursor:default;opacity:.5;background:transparent}
.connection-menu .is-current::after{content:"✓";position:absolute;right:8px;top:6px;color:#48694f}
.connection-menu small{font-size:10px;font-weight:400;color:#687a70}
.connection-menu .connection-menu-cancel{margin-top:3px;border-top:1px solid #e3e9df;border-radius:0 0 7px 7px;color:#687a70}
.connection-menu-cancel::after{content:"Esc";position:absolute;right:8px;font-size:10px;font-weight:400;color:#889389}
@media(pointer:coarse){.header-actions button{min-height:34px}.connection-menu button{min-height:36px}}

/* Compact control rail: only the selected part and its actions stay visible. */
main{grid-template-columns:minmax(0,1fr) 248px}
aside{padding:14px 12px}
fieldset>label{font-weight:700;font-size:10px;letter-spacing:.04em}
select{margin:5px 0 6px;padding:7px;font-size:11px}
aside .control{padding:11px 0}
aside h2{font-size:13px;line-height:1.25;margin:0 0 4px}
aside .control p{font-size:10px;line-height:1.4;margin:4px 0 7px}
aside .pair{gap:5px}
aside .pair button{padding:7px 5px;font-size:10px}
aside .reset{padding:8px;font-size:10px}
.viewer-help{margin-top:12px;border-top:1px solid #d7ded4;padding-top:8px;color:#718174;font-size:10px;line-height:1.5}
.viewer-help summary{cursor:pointer;font-weight:600}
.viewer-help p{margin:7px 0}
@media(max-width:800px){main{grid-template-columns:1fr}aside{padding:12px 15px}}

.brand{display:flex;align-items:center}
.brand img{display:block;width:auto;height:26px}
@media(max-width:800px){.brand img{height:22px}}

.header-actions select{flex:0 0 auto;width:auto;margin:0;padding:6px 9px;border-radius:6px;font-size:11px;line-height:16px;background:#fff8}
.header-actions select:disabled{opacity:.45}

.scene-actions{position:absolute;z-index:2;top:12px;left:12px;display:flex;gap:5px}.scene-actions button{background:#f8f9f5e8;padding:6px 9px;font-size:11px;border-radius:6px}.in-setting .caption{background:#f8f9f5dd;border-radius:6px;padding:7px 10px;letter-spacing:0}.header-actions button:disabled{cursor:default}

.scene-actions{flex-wrap:wrap;align-items:center;max-width:calc(100% - 24px)}.scene-actions label{display:flex;align-items:center;gap:7px;background:#f8f9f5ed;border:1px solid #bdcbbd;border-radius:6px;padding:3px 7px;font-size:11px}.scene-actions select{width:auto;margin:0;padding:4px 6px;font-size:11px}

.scene-actions .volume input{width:65px;margin:0}.header-actions select:focus-visible{outline:3px solid #b87826;outline-offset:1px}