:root{--bg:#02030a;--fg:#cfe0ff;--pn:rgba(10,16,34,.86);--uiw:180px}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;color:var(--fg);font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif}
canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#tg{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:132px;height:36px;box-sizing:border-box;background:var(--pn);color:var(--fg);border:1px solid #2a3a66;border-radius:8px;padding:0 10px;font-size:14px}
#ui{position:fixed;right:10px;top:calc(50px + env(safe-area-inset-top,0px));width:var(--uiw);box-sizing:border-box;max-height:calc(100% - 104px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden;background:var(--pn);border:1px solid #2a3a66;border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.7;scrollbar-width:thin;scrollbar-color:transparent transparent}
#ui.sc,#ui:hover{scrollbar-color:rgba(130,160,230,.45) transparent}
#ui::-webkit-scrollbar{width:4px}
#ui::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}
#ui.sc::-webkit-scrollbar-thumb,#ui:hover::-webkit-scrollbar-thumb{background:rgba(130,160,230,.45)}
#ui label{display:block;white-space:normal;overflow-wrap:anywhere}
#ui .sl{display:flex;align-items:center;gap:6px;white-space:nowrap}
#ui .sl input[type=range]{flex:1;min-width:0;width:auto;margin:0}
#ui .sl span{min-width:3.4em;text-align:right;font-size:12px}
#ui .tr{display:flex;gap:4px;align-items:center;margin:2px 0}
#ui .tr input,#ui .tr select,#ui .tr #td{flex:1;min-width:0;font-size:12px}
#ui .tr #td{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#ui .tr button{flex:none}
#ui input[type=number]{width:96px;box-sizing:border-box}
#ui textarea{box-sizing:border-box;width:100%;max-width:100%;font-size:11px;background:#0a1020;color:#cfe0ff;border:1px solid #2a3a66;border-radius:6px;resize:vertical}
#ui .small,#tlm,#sbm{opacity:.7;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
#tlm,#sbm,#sst{white-space:pre-line}
#ui .wide{width:100%;box-sizing:border-box;padding:7px 6px;margin:3px 0;background:#13204a;color:var(--fg);border:1px solid #2a3a66;border-radius:8px;font-size:13px}
#ui .wide.on{background:#1f4a7a;border-color:#6aa0ff}
#ui details{margin:2px 0}
#ui summary{cursor:pointer;font-size:12px;opacity:.8;padding:2px 0}
#h3{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:none;background:var(--pn);color:var(--fg);border:1px solid #2a3a66;border-radius:8px;padding:6px 14px;font-size:13px;pointer-events:none}
#ui .sub{padding-left:18px;font-size:12px}
#ui hr{border:0;border-top:1px solid #2a3a66;margin:6px 0}
#bar{position:fixed;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;padding:0 150px;pointer-events:none}
#nm{font-size:22px;letter-spacing:.08em;color:#fff;text-shadow:0 0 12px #6aa0ff;font-variant-numeric:tabular-nums}
#cmp{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:300px;height:46px;display:none;pointer-events:none}
#pb{display:flex;gap:8px;pointer-events:auto}
#pb button{background:var(--pn);color:var(--fg);border:1px solid #2a3a66;border-radius:10px;font-size:20px;line-height:1;padding:8px 16px;min-width:52px}
#s3w{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:clamp(220px,32vw,440px);aspect-ratio:4/3;box-sizing:border-box;border:1px solid #2a3a66;border-radius:10px;overflow:hidden;background:#02030a;touch-action:none;display:none}
#s3w canvas{position:absolute;left:0;top:0;width:100%;height:100%}
#s3l{pointer-events:none}
.hide #ui{display:none}.hide #tg{opacity:.25}.hide #s3w{display:none!important}