:root{color-scheme:dark;font-family:Inter,Arial,Helvetica,sans-serif;background:#0d1011;color:#e8ecea}*{box-sizing:border-box}body{margin:0}header{height:74px;border-top:3px solid #d7e7d6;border-bottom:1px solid #313a38;display:flex;align-items:center;justify-content:space-between;padding:0 24px}header strong{font-size:22px;letter-spacing:-1px}header small{display:block;font-size:9px;letter-spacing:2px;color:#86938c;margin-top:3px}.dot{color:#b5e0a4}.header-right{display:flex;gap:22px;font-size:10px;letter-spacing:1px;color:#9eaca4}#connection{color:#c7d4ac}main{display:grid;grid-template-columns:minmax(0,1fr) 335px;height:calc(100dvh - 103px);min-height:480px}#viewport{position:relative;overflow:hidden;background:#131c1b}#canvas{height:100%;width:100%}#canvas canvas{display:block;width:100%;height:100%}.overlay{position:absolute;pointer-events:none;font-size:11px;line-height:1.8;letter-spacing:1px}.overlay span{color:#a6b9ad;letter-spacing:0}.top-left{top:22px;left:22px}.bottom-left{bottom:22px;left:22px}aside{overflow:auto;border-left:1px solid #303a36;background:#121716}.section{padding:19px 20px;border-bottom:1px solid #2d3832}.eyebrow{font-size:9px;letter-spacing:2px;color:#a0b4a4;margin-bottom:12px}h1{font-size:23px;font-weight:500;margin:0 0 17px;letter-spacing:-.8px}label{display:block;font-size:10px;color:#bac8bd;margin:13px 0 8px;letter-spacing:1px}output{float:right}input[type=text],input:not([type]){width:100%;min-width:0;background:#1d2522;border:1px solid #3c4a40;color:#fff;padding:11px;border-radius:0}input[type=range]{width:100%;accent-color:#c3e0b5}.inline{display:flex;gap:6px}.inline>*{flex:1;min-width:0}button{background:#c4dfb7;border:1px solid #c4dfb7;color:#142018;font-size:10px;letter-spacing:1px;font-weight:700;padding:11px 12px;cursor:pointer}button:hover{filter:brightness(1.12)}button.subtle{width:100%;background:transparent;color:#b5c4b9;border-color:#3b493f;margin-top:7px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}.stats>div{background:#1a211f;padding:12px}.stats small{display:block;color:#84968a;font-size:9px;letter-spacing:1px}.stats strong{font-size:21px;font-weight:500}.hint{font-size:11px;line-height:1.6;color:#94a69a}.item{padding:9px 0;border-bottom:1px solid #28312c;font-size:11px;line-height:1.5}.item small{display:block;color:#87998d;margin-top:3px}.item b{font-weight:600}.event{padding:8px 0;border-bottom:1px solid #27322c;font-size:10px;color:#b4c6b8;line-height:1.5}.event small{color:#718b79;margin-right:8px}#notice{color:#c6dfb8;font-size:11px;min-height:16px}footer{height:29px;display:flex;justify-content:space-between;padding:8px 24px;font-size:9px;letter-spacing:1px;color:#879a8d;border-top:1px solid #313a38}@media(max-width:850px){main{grid-template-columns:1fr;height:auto}#viewport{height:60dvh;min-height:380px}aside{overflow:visible;border-left:0}header{padding:0 13px}.header-right{gap:9px;font-size:9px}footer{padding:8px 13px}}

input[type=password]{width:100%;min-width:0;background:#1d2522;border:1px solid #3c4a40;color:#fff;padding:11px;border-radius:0}input[type=password]::placeholder{color:#71867a}input[type=password]:focus,input:not([type]):focus{outline:1px solid #c3e0b5}button:focus-visible{outline:2px solid #fff;outline-offset:2px}