:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#23334e;background:#edf1f8;font-synthesis:none;--border:#cdd7e580;--blue:#315bea;--muted:#62718a;--navy:#111d33}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 0%,#c6eaff90,transparent 45%),radial-gradient(ellipse at 95% 15%,#d7ccff90,transparent 45%),#edf1f8;min-height:100vh}header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;border-bottom:1px solid #ffffffc0;background:#ffffff75;backdrop-filter:blur(18px)}.brand{font-size:22px;font-weight:850;letter-spacing:-1px;color:#354159;text-shadow:0 1px 0 white}.brand span{font-weight:450;color:#66768f}.brand small{font-size:9px;display:block;letter-spacing:3px;margin-top:3px;color:#69778d}.tag{font-size:11px;border:1px solid #ffffff;padding:7px 12px;border-radius:24px;background:#ffffff80;color:#5d6b82}main{max-width:1800px;margin:auto;padding:24px 3vw}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:#657596;margin:0 0 5px}h1{font-size:24px;letter-spacing:-.8px;margin:0;font-weight:700}p{line-height:1.6;color:var(--muted)}#status{background:#ffffffa0;border:1px solid #fff;border-radius:24px;padding:10px 16px;font-size:12px;font-weight:600;max-width:45%;overflow-wrap:anywhere;box-shadow:0 3px 12px #324f7810}.connection{background:#ffffff85;border:1px solid #fff;border-radius:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin-bottom:20px;backdrop-filter:blur(16px);box-shadow:0 6px 24px #354d7310}.connection label{font-size:10px;font-weight:700;display:grid;gap:5px;color:var(--muted)}#selected-robot{font-size:12px;font-weight:650;margin-right:auto;padding:8px 10px}.connection p{font-size:11px;margin:0;width:100%;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr);gap:18px;align-items:stretch}.editor-pane,.output-pane{border:1px solid #ffffffb0;border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 12px 36px #243b5d12}.pane-head{min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #dce3ef}.pane-head label[for="code"]{font-family:Consolas,monospace;font-size:13px}.pane-head label[for="code"]:before{content:'JS';font:700 10px "Segoe UI",sans-serif;background:#f5df8c;color:#594910;padding:4px;border-radius:5px;margin-right:10px}.pane-head h2{font-size:13px;margin:0}.pane-head div{display:flex;gap:6px}.examples{display:flex;gap:8px;align-items:center;padding:10px 18px;font-size:11px;background:#f7f9fc}.examples label{color:var(--muted);margin-right:4px}button,.file-label,select,input{font:inherit;border:1px solid #d6deea;border-radius:9px;background:#ffffffb0;color:#33445f;padding:8px 11px}button,.file-label{cursor:pointer;font-size:11px;font-weight:650;transition:background .15s,border-color .15s,box-shadow .15s}button:hover:not(:disabled),.file-label:hover{background:#edf2ff;border-color:#b5c5ee}button:disabled{opacity:.45;cursor:default}button:focus-visible,.file-label:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #7197ff;outline-offset:3px}select{font-size:12px;max-width:100%}#code{width:100%;min-height:440px;height:54vh;resize:vertical;background:var(--navy);color:#e0e9fc;caret-color:#91b9ff;font:14px/1.85 Consolas,"Cascadia Code",monospace;border:0;padding:24px;tab-size:2;flex:1;outline-offset:-3px;scrollbar-color:#41506b #111d33}.runbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;font-size:11px;border-bottom:1px solid #dce3ef;background:#fff}.runbar span{color:var(--muted)}.runbar>div{display:flex;gap:8px}.runbar button{min-height:36px}.primary{background:linear-gradient(160deg,#5178ff,#3156da);color:white;border-color:#315bea;box-shadow:0 3px 8px #315bea25;min-width:140px}.primary:hover:not(:disabled){background:#284ed6;border-color:#284ed6}.primary:disabled{opacity:.7}.stop{color:#b23d50;border-color:#eacbd1;background:#fff8fa;min-width:75px}.stop:hover:not(:disabled){background:#ffe8ed}#output{min-height:300px;max-height:65vh;flex:1;white-space:pre-wrap;overflow:auto;padding:20px;margin:0;font:13px/1.8 Consolas,monospace;color:#344b6b;overflow-wrap:anywhere}#output:empty:before{content:'Your program output will appear here.';font:13px/1.7 "Segoe UI",sans-serif;color:#7e8ba1}.output-pane details{border-top:1px solid #e5eaf2;padding:15px 18px;font-size:11px;background:#f9fbff}summary{cursor:pointer;font-weight:650}#trace{max-height:170px;overflow:auto;font-size:11px;white-space:pre-wrap}#packet-count{float:right;color:#647795}#input-form{padding:16px;background:#edf3ff}#input-form label{display:block;font-size:13px;margin-bottom:7px}#input-form div{display:flex;gap:8px}#answer{width:100%}.reference{background:#ffffff85;border:1px solid #fff;border-radius:14px;margin-top:18px;padding:16px 20px;font-size:12px}.reference summary{color:#506587}#reference{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}#reference code{background:#f0f4fc;border:1px solid #dce5f2;border-radius:6px;padding:6px 9px;font-size:11px}.reference p{max-width:1000px}.reference a{color:#315bea}footer{display:flex;justify-content:space-between;color:#77859b;font-size:10px;padding:0 3vw 20px;letter-spacing:.3px}[hidden]{display:none!important}dialog{max-width:760px;width:90%;color:#23334e;background:#f9fbfff5;border:1px solid white;border-radius:24px;padding:28px;box-shadow:0 28px 100px #12274740;backdrop-filter:blur(20px)}dialog h2{font-size:23px;letter-spacing:-.5px;margin-top:0}dialog p{font-size:13px}dialog::backdrop{background:#17274260;backdrop-filter:blur(6px)}#robot-list{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}.robot-choice{display:grid;justify-items:center;gap:8px;min-width:175px;padding:18px;background:white;border:1px solid #dbe3ef;border-radius:18px;box-shadow:0 5px 15px #314b7510}.robot-choice:hover:not(:disabled){background:#f2f6ff;border-color:#7797ef;box-shadow:0 7px 22px #315bea20}.robot-choice strong{font-size:15px}.robot-choice small{font-weight:400;color:#64728b;font-size:10px}.led-ring{display:block;position:relative;width:100px;height:100px;margin:10px}.led-ring i{position:absolute;width:16px;height:16px;border:1px solid #526078;border-radius:50%;transform:translate(-50%,-50%)}@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr)}.pane-head{flex-wrap:wrap}.runbar span{display:none}}@media(max-width:720px){header{padding:0 18px;height:65px}main{padding:18px}.workspace{grid-template-columns:1fr}.intro{align-items:flex-start;flex-direction:column;gap:12px}#status{max-width:100%}.connection{gap:8px}.connection label{width:100%}#selected-robot{width:100%}.examples{flex-wrap:wrap}#code{min-height:370px}.runbar{flex-wrap:wrap}#output{min-height:220px}footer{padding:0 18px 18px;gap:14px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@supports not (backdrop-filter:blur(10px)){header,.connection,.reference,dialog{background:#f8faff}}

.code-editor{display:flex;min-height:440px;height:54vh;background:var(--navy);overflow:hidden;resize:vertical;flex:1 0 auto}.code-surface{position:relative;min-width:0;flex:1}.code-editor #code,.code-editor #code-highlight,.code-editor #line-numbers{font:14px/1.85 Consolas,"Cascadia Code",monospace;font-variant-ligatures:none;tab-size:2;letter-spacing:normal;text-align:left;white-space:pre;margin:0;border:0;border-radius:0;box-sizing:border-box}.code-editor #code,.code-editor #code-highlight{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:24px 20px 24px 12px;overflow:auto;resize:none;word-wrap:normal;overflow-wrap:normal}.code-editor #code-highlight{pointer-events:none;color:#e0e9fc;overflow:hidden;background:transparent}.code-editor #code{background:transparent;color:#e0e9fc;caret-color:#fff}.code-surface.highlight-ready #code{color:transparent;-webkit-text-fill-color:transparent}.code-editor #code::selection{background:#5472af80}.code-editor #line-numbers{width:7ch;flex:none;padding:24px 12px 64px 0;overflow:hidden;text-align:right;color:#7d8da8;background:#0e192d;border-right:1px solid #26334a;user-select:none}.code-editor .token.comment{color:#889bb9}.code-editor .token.keyword{color:#c7a6ff}.code-editor .token.string,.code-editor .token.template-string{color:#a7dfb3}.code-editor .token.number,.code-editor .token.boolean{color:#ffcc91}.code-editor .token.function{color:#87cfff}.code-editor .token.operator,.code-editor .token.punctuation{color:#becce4}.code-editor .token.regex{color:#f4b895}.code-editor .token.class-name,.code-editor .token.constant{color:#f1d58f}@media(max-width:720px){.code-editor{min-height:370px}}@media(forced-colors:active){.code-surface.highlight-ready #code{color:CanvasText;-webkit-text-fill-color:CanvasText}.code-editor #code-highlight{visibility:hidden}}

/* Compact workspace: primary actions remain visible at every screen width. */
header.toolbar{height:auto;min-height:66px;padding:10px 18px;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.official-logo{width:142px;height:auto;object-fit:contain;flex:none}
.robot-identity{display:flex;align-items:center;gap:8px;min-width:0}.robot-identity #selected-robot{padding:0;font-size:12px;overflow-wrap:anywhere}
#selected-ring .led-ring{width:38px;height:38px;margin:0}#selected-ring .led-ring i{width:7px;height:7px}
.toolbar #status{margin-left:auto;max-width:28%;padding:0;background:none;border:0;border-radius:0;box-shadow:none;font-size:11px}
.toolbar-actions{display:flex;align-items:center;gap:8px}.toolbar-actions button{min-height:36px}.connection-menu{position:relative}.connection-menu>summary{list-style:none;font-size:24px;line-height:30px;text-align:center;width:36px;border:1px solid #cdd7e5;border-radius:9px;background:white}.connection-menu>summary::-webkit-details-marker{display:none}.connection-menu>div{position:absolute;right:0;top:42px;display:grid;gap:6px;width:175px;padding:10px;background:#fff;border:1px solid #d6deea;border-radius:12px;box-shadow:0 8px 30px #17274230;z-index:5}
main{padding:14px 18px;max-width:none}.workspace{gap:12px;align-items:start}.editor-label{font:11px Consolas,monospace;color:#677995;padding:9px 14px}.code-editor{height:calc(100dvh - 175px);min-height:360px;flex:none}.output-pane{display:block}.output-pane>summary{padding:12px 16px;font-size:12px;border-bottom:1px solid #dce3ef}.output-body{display:flex;flex-direction:column}.output-body>#clear{align-self:flex-end;margin:8px 12px 0}#output{min-height:220px;max-height:calc(100dvh - 260px);padding:14px}.developer,.reference{margin-top:10px;padding:10px 14px;border:1px solid #d6deea;border-radius:10px;background:#ffffff85;font-size:11px}.developer label{display:block;margin-top:12px}.developer p{margin:8px 0}.developer details{margin-top:12px}
@media(max-width:900px){.toolbar #status{order:4;max-width:100%;width:100%;margin:0}.toolbar-actions{margin-left:auto}.workspace{grid-template-columns:minmax(0,2fr) minmax(230px,1fr)}}
@media(max-width:720px){header.toolbar{padding:8px 12px;gap:8px}.official-logo{width:115px}.robot-identity{margin-left:auto}.robot-identity #selected-robot{width:auto;font-size:11px}.toolbar-actions{margin-left:0}.toolbar #status{order:0;width:auto;flex:1;max-width:none}.workspace{grid-template-columns:1fr}main{padding:10px 12px}.code-editor{height:calc(100dvh - 220px);min-height:300px}.primary{min-width:120px}#output{min-height:140px;max-height:40vh}}

/* Wrapped mirror rows keep logical line numbers aligned without inner scrolling. */
.workspace{align-items:stretch}.code-editor{position:relative;height:auto;min-height:calc(100dvh - 115px);resize:none;overflow:visible;padding-left:7ch;font:14px/1.85 Consolas,"Cascadia Code",monospace}.code-surface{width:100%}
.code-editor #code,.code-editor #code-highlight{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;overflow:hidden;padding:24px 20px 24px 12px}
.code-editor #code-highlight{position:relative;inset:auto;min-height:calc(100dvh - 115px);height:auto;width:100%}
.code-editor #code{height:100%;resize:none}
.code-editor #line-numbers{position:absolute;inset:0 0 auto 7ch;width:auto;padding:24px 20px 24px 12px;overflow:visible;background:none;border:0;text-align:left;color:transparent;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere;z-index:1}
#line-numbers>span{display:block;position:relative;min-height:1.85em}#line-numbers>span::before{content:attr(data-line);position:absolute;right:calc(100% + 24px);width:5ch;text-align:right;color:#7d8da8;white-space:nowrap}
.output-pane[open]{display:flex;flex-direction:column}.output-body{flex:1;min-height:0}#output{flex:1;min-height:0;max-height:none}
@media(max-width:720px){.code-editor,.code-editor #code-highlight{min-height:calc(100dvh - 175px)}.output-pane[open]{min-height:240px}#output{max-height:40vh}}
/* Original App.js palette and ProgramCoding.js Monokai editor. */
:root{--blue:#058af4;--navy:#272822;--muted:#666;color:#333;background:#fff}
body{background:#fff}header.toolbar{background:#058af4;border-bottom:1px solid #0376d3;backdrop-filter:none}.editor-pane,.output-pane{border-color:#ddd;box-shadow:none}.editor-label,.output-pane>summary{background:#fafafa;color:#555}
.primary{background:#058af4;border-color:#058af4;box-shadow:none}.primary:hover:not(:disabled){background:#0360aa;border-color:#0360aa}.stop{color:#c00445;border-color:#f40558;background:#fde7ef}.stop:hover:not(:disabled){background:#fac1d5}button:hover:not(:disabled){border-color:#058af4}button:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#058af4}
.code-editor #code-highlight,.code-editor #code{color:#f8f8f2;caret-color:#f8f8f0}.code-surface.highlight-ready #code{color:transparent}.code-editor #code::selection{background:#49483e}.code-editor #line-numbers{color:transparent}#line-numbers>span::before{color:#90908a}.code-editor .token.comment{color:#a6a69a}.code-editor .token.keyword,.code-editor .token.operator{color:#f92672}.code-editor .token.string,.code-editor .token.template-string,.code-editor .token.regex{color:#e6db74}.code-editor .token.number,.code-editor .token.boolean,.code-editor .token.constant{color:#ae81ff}.code-editor .token.function{color:#a6e22e}.code-editor .token.punctuation{color:#f8f8f2}.code-editor .token.class-name{color:#66d9ef}#output{color:#333}.robot-choice:hover:not(:disabled){background:#c0e1fc;border-color:#058af4}
@media(forced-colors:active){.code-surface.highlight-ready #code{color:CanvasText;-webkit-text-fill-color:CanvasText}}

.toolbar #status,.toolbar .robot-identity{color:#fff;background:#0360aa;border-radius:6px;padding:5px 8px}.toolbar .primary{color:#0360aa;background:#fff;border-color:#fff}.toolbar .primary:hover:not(:disabled){background:#e3f2fd;border-color:#fff}.toolbar-actions>button:focus-visible,.connection-menu>summary:focus-visible{outline-color:#fff}

#robot-settings{max-height:85dvh;overflow:auto;max-width:620px;background:white;backdrop-filter:none}.settings-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}#robot-settings h2{font-size:20px}#robot-settings fieldset{border:1px solid #ddd;border-radius:10px;padding:16px}#robot-settings label{display:block;font-size:13px;margin:12px 0 6px}#robot-settings input:not([type=checkbox]){display:block;width:100%;margin-top:5px}#robot-settings p{font-size:12px}#robot-settings details{margin-top:20px;border-top:1px solid #ddd;padding-top:14px}.settings-pair{display:flex;gap:16px}.settings-pair label{flex:1}.settings-sensors{margin-top:16px}#settings-chart{display:block;width:100%;height:auto;margin-top:12px}#settings-name-ring .led-ring{width:64px;height:64px}#settings-name-ring .led-ring i{width:11px;height:11px}