/* Rev.03.00 */
:root {font-family:var(--font-ui);color:#e4e6eb;background:#14161c;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a.button{padding:9px 14px;border:1px solid #37535a;border-radius:8px;background:#223840;color:#a6eee0;cursor:pointer;text-decoration:none}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid #4fd1c5;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid #323647}header strong{color:#4fd1c5;direction:ltr}header span{font-size:11px;color:#acbdcf}.viewer{height:100vh;display:flex;flex-direction:column;overflow:hidden}.viewer #canvas{min-height:100px;flex:1;position:relative}.viewer canvas{display:block;width:100%;height:100%;touch-action:none}.telemetry{display:flex;justify-content:space-between;gap:6px;padding:10px 12px;background:#1b2530;font-size:12px}.telemetry b{color:#74e3cf}nav{display:flex;gap:5px;padding:8px;flex-wrap:wrap}nav button{font-size:11px;padding:6px}.caption{font-size:11px;color:#a8b9cd;line-height:1.8;padding:0 12px;margin:4px 0 10px}main{max-width:960px;margin:30px auto;padding:20px}h1{font-size:28px}p{line-height:1.9;color:#b4c4d8}.card{background:#1b1e26;border:1px solid #323647;border-radius:14px;padding:22px;margin:18px 0}.badge{display:inline-block;padding:5px 10px;color:#71dccb;border:1px solid #35564f;border-radius:16px;font-size:12px}label{display:block;margin:14px 0}input[type=number],select,input[type=text]{padding:8px;background:#121720;border:1px solid #45516a;border-radius:6px;max-width:100%}#message{white-space:pre-line;color:#ffd29c}#sessions a{display:inline-block;margin:8px;color:#75e6d2}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.settings label{display:flex;flex-direction:column;gap:8px;font-size:13px}code{font-family:var(--font-code)}

/* Viewer controls remain usable inside narrow lab/Scratch panels. */
.viewer { overflow-y:auto; }
.viewer #canvas { flex:1 0 180px; min-height:180px; outline-offset:-3px; }
.viewer #canvas[data-connection=stale] canvas { opacity:.55; }
.viewer nav { flex-shrink:0; }
.viewer nav button[aria-pressed=true] { background:#246359; color:#fff; border-color:#71f3d3; }
.viewer .telemetry { flex-wrap:wrap; flex-shrink:0; justify-content:flex-start; gap:10px 22px; }
.viewer .telemetry b { display:inline-block; direction:ltr; font-variant-numeric:tabular-nums; }
.viewer .telemetry small { direction:ltr; display:inline-block; }
.viewer-details { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:6px 12px; font-size:11px; }
.viewer-details label { margin:0; }
.viewer-details button { padding:5px 8px; font-size:11px; }
.viewer .caption { flex-shrink:0; font-size:10px; }
@media(max-width:420px){.viewer header { flex-wrap:wrap; }.viewer nav { gap:4px; }.viewer nav button { padding:5px; }.viewer .telemetry { gap:7px 14px; }}

.environment-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:4px 12px;font-size:11px}.environment-tools label{margin:0}.environment-tools select{padding:4px}#layout-message{color:#ffda9c}