.simulator-body { background: #eef2f3; color: #17252d; }
.simulator-topbar { background: #102c35; color: #fff; padding: 7px max(18px,7vw); }
.simulator-topbar nav { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.simulator-topbar nav a { border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: #fff; padding: 7px 11px; text-decoration: none; }
.simulator-topbar nav a:hover,.simulator-topbar nav a[aria-current="page"] { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.58); color: #fff; }
.simulator-topbar .simulator-account { border-color: #5eead4; margin-left: 4px; }
.simulator-page { max-width: 1540px; padding-top: 8px; }
.simulator-intro { align-items: center; background: linear-gradient(110deg,#123a42,#0f303a); border-radius: 8px; color: #fff; display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px 14px; }
.simulator-intro h1 { font-family: inherit; font-size: 21px; letter-spacing: -.025em; line-height: 1.1; margin: 1px 0; }
.simulator-intro p { display: none; }
.simulator-intro p { color: #c6dcd8; margin: 0; }
.simulator-kicker { color: #5fdfcf; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.simulator-intro-status { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; display: flex; gap: 9px; padding: 6px 10px; }
.simulator-intro-status > span { background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 5px rgba(74,222,128,.13); height: 9px; width: 9px; }
.simulator-intro-status div { display: grid; }
.simulator-intro-status small { color: #b9ceca; }
.simulator-workspace { gap: 12px; grid-template-columns: minmax(560px,1.3fr) minmax(0,.7fr); }
.simulator-workspace > .panel { border-color: #d7e0e2; border-radius: 9px; box-shadow: 0 5px 18px rgba(16,44,53,.055); min-width: 0; padding: 16px; }
.simulator-workspace .board-panel { grid-column: 1; grid-row: 1 / span 2; }
.simulator-workspace .simulator-editor { grid-column: 2; grid-row: 1; }
.simulator-workspace .serial-panel { grid-column: 2; grid-row: 2; }
.simulator-workspace .project-detail-panel,.simulator-workspace .example-panel { grid-column: 1 / -1; }
.simulator-workspace .serial-monitor { min-height: 180px; max-height: 260px; }
.serial-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; touch-action: none; }
.serial-heading h2 { margin: 0; }
.serial-heading button { border-radius: 6px; font-size: 11px; padding: 7px 10px; }
.serial-input-form { background: #eef5f3; border: 1px solid #cfddd9; border-radius: 7px; margin: 8px 0; padding: 8px; }
.serial-input-form[hidden] { display: none; }
.serial-input-form > label { color: #31524d; display: block; font-size: 11px; font-weight: 900; margin-bottom: 4px; }
.serial-input-form > div { display: grid; gap: 5px; grid-template-columns: minmax(100px,1fr) minmax(98px,.45fr) auto; }
.serial-input-form input,.serial-input-form select,.serial-input-form button { font-size: 11px; margin: 0; min-width: 0; padding: 7px 8px; width: 100%; }
.serial-input-form small { color: #64736e; display: block; margin-top: 4px; }
.serial-panel.is-floating { box-shadow: 0 22px 60px rgba(8,29,36,.28); margin: 0; max-height: calc(100vh - 16px); max-width: calc(100vw - 16px); position: fixed; resize: both; width: min(480px,calc(100vw - 16px)); z-index: 1000; }
.serial-panel.is-floating .serial-heading { cursor: grab; }
.serial-panel.is-floating.is-dragging .serial-heading { cursor: grabbing; }
.serial-panel.is-floating .serial-monitor { max-height: none; min-height: 170px; overflow: auto; }
.simulator-workspace #arduino-code { min-height: 330px; padding: 12px; }
.free-circuit-panel { background: #f2f8f6; border: 1px solid #d3e4df; border-radius: 8px; margin: 0 0 8px; min-width: 0; padding: 12px; }
.free-circuit-panel > h2 { margin: 0 0 5px; }
.free-circuit-panel > .meta { margin: 0 0 8px; }
.free-circuit-panel .free-circuit-toolbar { display: grid; gap: 8px; grid-template-columns: minmax(120px,1fr) repeat(2,minmax(72px,.55fr)); }
.free-circuit-panel .free-circuit-toolbar > * { min-width: 0; width: 100%; }
.free-circuit-panel .free-circuit-toolbar button { margin: 0; white-space: normal; }
.free-circuit-panel .free-wire-helper { margin-top: 8px; padding: 8px 10px; }
.free-circuit-panel .free-component-list { max-height: 180px; min-width: 0; overflow-y: auto; }
.free-circuit-panel .free-component-row { grid-template-columns: minmax(70px,.7fr) minmax(130px,1.3fr) minmax(55px,.8fr) minmax(55px,.8fr); min-width: 0; padding: 8px; }
.free-circuit-panel .free-component-row select { min-width: 0; width: 100%; }
.free-circuit-panel .free-component-row button { grid-column: 1 / -1; margin: 0; width: 100%; }
.simulator-workspace .simulator-editor { gap: 8px; }
.simulator-workspace .simulator-editor > h2 { margin: 4px 0 2px; }
.simulator-workspace .simulator-toolbar { display: grid; gap: 7px; grid-template-columns: 1fr; margin-bottom: 4px; min-width: 0; }
.simulator-workspace .simulator-toolbar button { border-radius: 6px; font-size: 11px; min-width: 0; overflow-wrap: anywhere; padding: 8px 6px; white-space: normal; width: 100%; }
.simulator-workspace .sim-output { min-height: 82px; padding: 12px; }
.simulator-workspace .board-heading { border-bottom: 1px solid #e0e7e6; margin-bottom: 10px; padding-bottom: 8px; }
.simulator-workspace .board-heading h2,.simulator-workspace .simulator-editor h2,.simulator-workspace .serial-panel h2 { font-family: inherit; }
.simulator-empty-guide { align-items: center; display: flex; flex-direction: column; padding: 20px; text-align: center; }
.simulator-empty-guide > span { background: #e4f3ef; border-radius: 99px; color: #087d73; font-size: 11px; font-weight: 900; padding: 6px 10px; text-transform: uppercase; }
.simulator-empty-guide h3 { font-family: inherit; font-size: 28px; margin: 8px 0 4px; }
.simulator-empty-guide p { color: #64736e; margin: 0; max-width: 670px; }
.simulator-empty-guide div { display: flex; gap: 8px; margin-top: 12px; }
.simulator-empty-guide a { background: #0b887d; border-radius: 6px; color: #fff; font-weight: 800; padding: 10px 14px; text-decoration: none; }
.simulator-empty-guide a + a { background: #fff; border: 1px solid #cfdad7; color: #176c65; }
.example-panel .example-head { border-bottom: 1px solid #e0e7e6; padding-bottom: 12px; }

.simulator-start { align-items: center; background: #fff; border: 1px solid #d7e3e1; display: grid; gap: 12px; grid-template-columns: minmax(220px,.7fr) minmax(500px,1.3fr) auto; margin-bottom: 10px; padding: 14px; }
.simulator-start[hidden] { display: none; }
.simulator-start h2 { font-family: inherit; font-size: 19px; margin: 2px 0; }
.simulator-start p { color: #60716d; font-size: 13px; margin: 0; }
.simulator-step-label { color: #087d73; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.simulator-start-actions { display: grid; gap: 8px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.simulator-start-actions button { background: #f4f9f8; border: 1px solid #cfe0dc; color: #173c3a; display: grid; gap: 3px; min-height: 70px; padding: 10px; text-align: left; }
.simulator-start-actions button:hover,.simulator-start-actions button:focus-visible { background: #e4f5f1; border-color: #0b887d; transform: translateY(-1px); }
.simulator-start-actions button:first-child { background: #0b887d; border-color: #0b887d; color: #fff; }
.simulator-start-actions span { font-size: 11px; font-weight: 500; line-height: 1.3; opacity: .82; }
.simulator-start-dismiss { font-size: 11px; padding: 7px 9px; }
.workspace-tabs { background: #fff; border: 1px solid #d7e3e1; border-radius: 9px; display: flex; gap: 4px; margin-bottom: 10px; padding: 5px; position: sticky; top: 4px; z-index: 40; }
.workspace-tabs button { background: transparent; border: 0; border-radius: 6px; color: #536661; flex: 1; margin: 0; padding: 8px 10px; }
.workspace-tabs button.active { background: #dff3ee; color: #086f66; }
.board-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.board-profile-picker,.board-zoom { align-items: center; color: #60716d; display: flex; font-size: 11px; gap: 5px; }
.board-profile-picker select { max-width: 175px; }
.board-zoom select { min-width: 90px; padding: 5px 7px; }
.board-profile-status { background: #edf6f4; border-left: 4px solid #0f766e; border-radius: 5px; color: #42615a; font-size: 12px; margin: 10px 0; padding: 8px 10px; }
.board-profile-status.is-limited { background: #fff7ed; border-color: #f97316; color: #7c421e; }
.visual-workbench { overflow: hidden; }
.wokwi-stage { transform-origin: top left; transition: transform .2s ease; }
.interactive-components { left: calc(50% + 185px); position: absolute; top: 24px; z-index: 7; }
.interactive-components[hidden],.schematic-only-mode .interactive-components { display: none; }
.interactive-keypad-card { align-items: center; background: rgba(255,255,255,.94); border: 1px solid #cbd9d6; border-radius: 9px; box-shadow: 0 8px 22px rgba(16,44,53,.1); display: flex; flex-direction: column; height: 302px; padding: 8px; width: 208px; }
.interactive-keypad-card strong { color: #173c3a; font-size: 12px; }
.interactive-keypad-card span { color: #60716d; font-size: 10px; line-height: 1.25; margin: 2px 0 5px; text-align: center; }
.interactive-keypad-card wokwi-membrane-keypad { display: block; transform: scale(.67); transform-origin: top center; }
.bb-module-keypad { fill: #f5f3ff; stroke: #6d5bd0; }
.bb-keypad-terminal .bb-pin-label { font-weight: 900; }
.bb-onboard-note .bb-empty-note,.bb-keypad-connector + .bb-empty-note { text-anchor: middle; }
.component-search-label { display: block; font-size: 11px; font-weight: 800; margin-bottom: 3px; }
#component-search { margin-bottom: 7px; width: 100%; }
.component-palette { display: grid; gap: 6px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 8px; }
.component-palette button { align-items: center; background: linear-gradient(145deg,#153f4a,#102f3c); border: 1px solid #28616b; color: #f0fffc; display: flex; flex-direction: column; font-size: 10px; gap: 3px; margin: 0; min-height: 58px; padding: 6px 3px; }
.component-palette button:hover,.component-palette button.selected { background: linear-gradient(145deg,#087d73,#0b665f); border-color: #53d8c5; box-shadow: 0 4px 12px rgba(8,125,115,.25); color: #fff; }
.component-palette button[hidden] { display: none; }
.component-palette-icon { align-items:center; background:#edf9f7; border:1px solid #8ecdc4; border-radius:4px; color:#075e56; display:flex; height:32px; justify-content:center; width:44px; }
.component-palette-icon svg { fill:none; height:28px; overflow:visible; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; width:40px; }
.component-palette-icon svg text { fill:currentColor; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; font-weight:900; stroke:none; }
.component-palette-icon .palette-fill { fill:#0f766e; stroke:none; }
.component-palette-icon .palette-red { fill:#dc2626; }
.component-palette-icon .palette-green { fill:#16a34a; }
.component-palette button:hover .component-palette-icon,.component-palette button.selected .component-palette-icon { background:#fff; border-color:#7fc9bd; color:#064e48; }
.free-circuit-panel .free-circuit-toolbar select { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; white-space: nowrap; width: 1px; }
.free-circuit-panel .free-circuit-toolbar { grid-template-columns: 1fr 1fr; }
.free-wire-helper { background: #fff; border-left: 4px solid #0b887d; display: grid; gap: 5px; }
.wire-helper-step { align-items: center; display: flex; gap: 7px; }
.wire-helper-step b { align-items: center; background: #0b887d; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 22px; height: 22px; justify-content: center; }
.wire-helper-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.wire-helper-actions button { font-size: 10px; margin: 0; padding: 5px 8px; }
.free-arduino-pin-target.is-compatible { fill: rgba(34,197,94,.28); stroke: #16a34a; stroke-width: 5; }
.free-arduino-pin-target.is-incompatible { opacity: .18; }
[data-free-terminal].is-compatible { filter: drop-shadow(0 0 5px #22c55e); }
[data-free-terminal].is-incompatible { opacity: .3; }
.editor-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.editor-heading h2,.editor-heading p { margin: 0; }
.editor-history-actions { display: flex; gap: 5px; }
.editor-history-actions button { font-size: 10px; margin: 0; padding: 6px 8px; }
.simulator-run-actions,.simulator-design-actions { display: grid; gap: 6px; }
.simulator-run-actions { grid-template-columns: minmax(160px,1.7fr) minmax(82px,.65fr); }
.simulator-design-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.simulator-toolbar .primary-action { background: #087d73; font-size: 12px; }
.simulator-toolbar button:disabled { background: #e2e8e6 !important; border-color: #c5cfcc !important; box-shadow: none !important; color: #62716d !important; cursor: not-allowed; opacity: 1; transform: none !important; }
.simulator-more-actions { border-top: 1px solid #dce5e2; min-width: 0; padding-top: 4px; }
.simulator-more-actions summary { color: #52645f; cursor: pointer; font-size: 10px; font-weight: 900; letter-spacing: .06em; list-style-position: inside; padding: 4px 1px; text-transform: uppercase; }
.simulator-more-actions[open] summary { color: #087d73; margin-bottom: 4px; }
.simulator-more-actions > div { display: grid; gap: 5px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.simulator-more-actions > div button { background: #eef4f2; border-color: #cbd9d6; color: #36534e; }
.code-editor-shell { background: #172329; border: 1px solid #2b3d43; border-radius: 7px; display: grid; grid-template-columns: auto 1fr; max-width: 100%; overflow: hidden; }
.code-line-numbers { background: #111b20; color: #71838a; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; line-height: 1.55; margin: 0; min-width: 38px; overflow: hidden; padding: 12px 8px; text-align: right; user-select: none; }
.simulator-workspace .code-editor-shell #arduino-code { background: #172329; border: 0; border-radius: 0; color: #e7f0ed; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; line-height: 1.55; margin: 0; min-height: 330px; outline: none; resize: vertical; tab-size: 2; }
.code-editor-shell.has-error { border-color: #d94d4d; box-shadow: 0 0 0 2px rgba(217,77,77,.14); }
.code-comparison { background: #f5f8f7; border: 1px solid #d6e1df; border-radius: 7px; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; padding: 8px; }
.code-comparison[hidden] { display: none; }
.code-comparison section { min-width: 0; }
.code-comparison h3 { font-family: inherit; font-size: 12px; margin: 0 0 5px; }
.code-comparison pre { background: #172329; color: #dce9e6; font-size: 10px; max-height: 230px; overflow: auto; padding: 8px; white-space: pre-wrap; }
.serial-monitor:empty::before { color: #82908c; content: attr(data-empty-message); white-space: normal; }
.example-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.example-filters select { min-width: 150px; }
.learning-progress { background: #eef8f5; border: 1px solid #d3e6e1; border-radius: 7px; color: #31524d; font-size: 12px; margin: 8px 0; padding: 8px 10px; }
.learning-progress progress { accent-color: #0b887d; height: 8px; margin-left: 8px; max-width: 180px; vertical-align: middle; width: 30%; }
.example-card.is-complete { border-color: #79baa9; }
.example-card-complete { color: #087d73; font-size: 10px; font-weight: 900; }
.project-challenge { background: #f1f8f6; border: 1px solid #cee1dc; border-radius: 8px; margin-top: 12px; padding: 12px; }
.project-challenge h4 { margin: 0 0 5px; }
.project-challenge button { font-size: 11px; margin: 7px 0 0; padding: 7px 10px; }

@media(min-width:1121px){.workspace-tabs{display:none}}
@media(max-width:1120px){.simulator-start{grid-template-columns:1fr}.simulator-start-actions{grid-template-columns:repeat(3,1fr)}.simulator-workspace{grid-template-columns:minmax(0,1fr)}.simulator-workspace .board-panel,.simulator-workspace .simulator-editor,.simulator-workspace .serial-panel{grid-column:1;grid-row:auto}.simulator-workspace .serial-monitor{min-height:160px}.simulator-workspace #arduino-code{min-height:300px}}
@media(max-width:700px){.simulator-topbar{overflow-x:auto;padding:7px 12px}.simulator-topbar nav{flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap}.simulator-topbar nav a{padding:6px 10px}.simulator-page{padding-left:8px;padding-right:8px}.simulator-intro{gap:10px}.simulator-intro-status small{display:none}.simulator-intro h1{font-size:18px}.simulator-kicker{font-size:9px}.simulator-start{padding:11px}.simulator-start-actions{grid-template-columns:1fr}.workspace-tabs{overflow-x:auto}.workspace-tabs button{min-width:76px}.simulator-workspace > [data-workspace-panel]{display:none}.simulator-workspace > [data-workspace-panel].workspace-panel-active{display:block}.simulator-workspace{display:block}.simulator-workspace > .panel{margin-bottom:10px;padding:10px}.board-controls{align-items:flex-end;flex-direction:column}.component-palette{grid-template-columns:repeat(4,1fr)}.simulator-workspace .simulator-toolbar{grid-template-columns:1fr 1fr}.simulator-more-actions{grid-column:1/-1}.simulator-more-actions > span{display:none}.simulator-more-actions > div{grid-template-columns:1fr 1fr}.editor-heading{align-items:flex-start;flex-direction:column}.code-comparison{grid-template-columns:1fr}.serial-heading button{display:none}.simulator-empty-guide div{flex-direction:column;width:100%}.example-head{align-items:stretch;flex-direction:column}.example-filters{display:grid;grid-template-columns:1fr 1fr}.example-filters select{min-width:0;width:100%}}
@media(max-width:700px){.simulator-workspace .board-heading{align-items:flex-start;display:flex;flex-direction:column}.simulator-workspace .board-heading h2{white-space:nowrap}.board-controls{align-items:center;flex-direction:row;justify-content:space-between;width:100%}.board-zoom{flex-direction:column;gap:2px}.view-toggle{flex:1;justify-content:flex-end}}
@media(max-width:700px){.interactive-components{left:auto;right:8px}.interactive-keypad-card{transform:scale(.82);transform-origin:top right}}
@media(max-width:700px){.serial-input-form > div{grid-template-columns:1fr 1fr}.serial-input-form input{grid-column:1/-1}}
@media(max-width:700px){.simulator-workspace .simulator-toolbar{grid-template-columns:1fr}.simulator-run-actions{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr)}.simulator-design-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.simulator-more-actions>div{grid-template-columns:1fr}}