:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,monospace;color:#d0c2a2;background:#10161b}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid #4d4a3c}header small{color:#b8884a;letter-spacing:3px}h1{font-size:20px;margin:6px 0}a{color:#bdb59b}main{max-width:1500px;margin:auto;padding:20px}.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:end}label{display:grid;gap:6px;font-size:11px;color:#a7a18b}select,button{font:inherit;color:#d8c8a5;background:#1c2425;border:1px solid #655f4c;padding:11px 14px;cursor:pointer}button:hover{border-color:#c6a671}#role{font-size:14px;color:#bcab85;margin:14px 0}.stage{position:relative;border:1px solid #514c3b;background:#10161b}#preview{height:560px;overflow:hidden}canvas{display:block}#readout{display:flex;gap:20px;flex-wrap:wrap;padding:12px 16px;background:#182021;border-bottom:1px solid #4b4739;font-size:12px}#state{text-transform:uppercase;color:#d2b373}#trace{font-size:11px;line-height:1.6;min-height:36px;color:#a89d84}footer{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;line-height:1.7;color:#9fa490;padding:16px 0}.note{font-size:11px;color:#828d83;max-width:820px;line-height:1.6}@media(max-width:650px){header{padding:14px}main{padding:10px}h1{font-size:17px}.controls{gap:8px}select,button{padding:10px}#preview{height:420px}footer{font-size:11px}}@media(max-height:960px){header{padding:8px 20px}h1{font-size:16px;margin:2px 0}main{padding:8px 20px}.controls{gap:8px}label{gap:3px}select,button{padding:6px 9px}#role{margin:6px 0;font-size:12px}#readout{padding:6px 12px}#preview{height:clamp(240px,calc(100vh - 250px),560px)}}