:root{font-family:system-ui,sans-serif;color:#eaf2ef;background:#101a20;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{padding:22px 28px;border-bottom:1px solid #34434b;display:flex;justify-content:space-between;gap:16px;align-items:center}h1{font-size:21px;margin:0}header p{margin:5px 0 0;color:#9cabb1;font-size:13px}a{color:#8ce1b7}main{display:grid;grid-template-columns:minmax(300px,1fr) 344px;gap:24px;max-width:1380px;margin:auto;padding:24px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}button{font:inherit;border:1px solid #4c6566;background:#263b40;color:#ecfff6;padding:9px 14px;border-radius:7px;cursor:pointer}button.primary{background:#88e6b3;color:#10251a;font-weight:700}button:focus-visible,textarea:focus-visible{outline:2px solid #88e6b3;outline-offset:3px}textarea{display:block;width:100%;min-height:530px;resize:vertical;border:1px solid #344951;border-radius:8px;padding:18px;background:#0b131a;color:#c7e3f7;font:13px/1.65 ui-monospace,SFMono-Regular,monospace;tab-size:4}.filename{font:12px ui-monospace,monospace;color:#a1b5bf;margin-left:auto}.preview{background:#192830;border:1px solid #3d535b;border-radius:16px;padding:18px;text-align:center;align-self:start;position:sticky;top:18px}.preview h2{font-size:14px;margin:0 0 12px;color:#b3c9ce;font-weight:500}.device{display:inline-block;padding:12px;border:2px solid #566f76;border-radius:16px;background:#0a1217;box-shadow:0 8px 26px #0004}canvas{display:block;width:240px;height:320px;image-rendering:pixelated;background:#05090d}.buttons{display:flex;gap:8px;justify-content:center;margin-top:18px}.buttons button{min-width:66px}small{display:block;color:#9aafb6;margin-top:14px;line-height:1.65}.status{min-height:24px;margin:12px 0;color:#8ce1b7;font-size:13px}.status.error{color:#ffa7a7}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,monospace;max-height:220px;overflow:auto;color:#f2b5aa}details{font-size:12px;color:#9aafb6;line-height:1.65;margin-top:16px}footer{padding:0 24px 24px;font-size:12px;color:#9aafb6;max-width:1380px;margin:auto}@media(max-width:780px){main{grid-template-columns:1fr;padding:16px}.preview{position:static;grid-row:1}textarea{min-height:460px}header{padding:18px;align-items:start}header a{font-size:12px}}

#source{border:1px solid #344951;border-radius:8px;overflow:hidden}.cm-editor{min-width:0}.cm-editor .cm-content{caret-color:#fff}.mode-note{font-size:12px;color:#afc3cc;margin:0 0 12px;line-height:1.6}[hidden]{display:none!important}
.compiler-connection{padding:14px;margin-bottom:16px;background:#192830;border:1px solid #344951;border-radius:8px}.compiler-connection>label{font-size:12px;color:#afc3cc}.compiler-controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.compiler-controls input{flex:1;min-width:180px;font:13px ui-monospace,monospace;padding:10px;border:1px solid #4c6566;border-radius:7px;background:#0b131a;color:#eaf2ef}.compiler-controls input:focus-visible{outline:2px solid #88e6b3;outline-offset:2px}button:disabled{opacity:.45;cursor:default}#connection-status{font-size:12px;color:#afc3cc;margin:10px 0 0;overflow-wrap:anywhere}#connection-status.error{color:#ffa7a7}.compiler-connection details{margin-top:8px}.compiler-connection pre{color:#c7e3f7}

.firmware-actions{border-top:1px solid #3d535b;margin-top:20px;padding-top:20px;text-align:left}.firmware-actions button{margin:4px 0;width:100%;font-size:13px}.firmware-actions label{display:block;font-size:12px;margin:14px 0 6px;color:#afc3cc}.firmware-actions input{width:100%;padding:10px;background:#0b131a;color:#eaf2ef;border:1px solid #4c6566;border-radius:7px;font:12px ui-monospace,monospace}.firmware-actions p{font-size:12px;line-height:1.6;color:#afc3cc}.firmware-actions a{font-size:12px}.firmware-actions pre{max-height:180px}.preview{position:static}