.pixel-workbar { padding:22px; }
.pixel-workbar h1 { font-size:22px; margin:0; }
#workbenchTop .console-nav { flex-wrap:wrap; }
.pixel-device-intro,.pixel-connect-card { margin-top:14px; padding:12px 14px; border:1px solid #cde5e3; border-radius:11px; background:#f6fcfb; }
#deviceIntro,#hardwareTestPanel { scroll-margin-block-start:16px; }
.pixel-device-intro summary { cursor:pointer; color:var(--green); font-weight:750; }
.pixel-device-intro-content { display:grid; grid-template-columns:minmax(0,325px) minmax(0,1fr); gap:14px; margin-top:12px; font-size:13px; }
.pixel-hardware-visual { display:grid; grid-template-columns:minmax(0,160px) minmax(0,96px); justify-content:center; align-items:center; gap:clamp(8px,2vw,16px); padding:12px; border:1px solid #d6e8eb; border-radius:9px; background:#eaf5f7; }
.pixel-hardware-visual .pixel-explore-device { width:100%; padding:12px 9px 18px; }
.pixel-hardware-visual .pixel-controls button { min-width:24px; }
.pixel-hardware-visual .pixel-explore-screen { position:relative; display:block; width:100%; aspect-ratio:1; min-height:0; padding:0; border:1px solid #788b9d; border-radius:2px; background-color:#28343e; background-image:linear-gradient(#17222c 1px,transparent 1px),linear-gradient(90deg,#17222c 1px,transparent 1px); background-size:6.25% 6.25%; }
.pixel-explore-sprite { position:absolute; top:25%; left:43.75%; width:6.25%; height:6.25%; background:#23da91; box-shadow:-1em 0 #23da91,1em 0 #23da91,-2em 2em #23da91,-1em 1em #23da91,0 1em #23da91,1em 1em #23da91,2em 2em #23da91,-2em 3em #23da91,-1em 2em #23da91,0 2em #23da91,1em 2em #23da91,2em 3em #23da91,-1em 4em #23da91,1em 4em #23da91; font-size:clamp(5px,1.1vw,8.5px); }
.pixel-internal-parts { display:grid; justify-items:stretch; gap:11px; }
.pixel-internal-part { display:grid; justify-items:center; gap:4px; min-width:0; padding:6px; background:#fff; font-size:12px; }
.pixel-part-photo { display:grid; place-items:center; width:100%; aspect-ratio:1.25; overflow:hidden; border-radius:4px; background:#fff; }
.pixel-part-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.pixel-internal-part[data-part="buzzer"] img { transform:scale(2.2); }
.pixel-hardware-visual button[aria-pressed="true"] { outline:2px solid #0b8590; outline-offset:2px; }
.pixel-hardware-visual button:focus-visible { outline:3px solid #d18b27; outline-offset:3px; }
.pixel-hardware-copy { display:grid; align-content:start; gap:8px; }
.pixel-hardware-instruction { margin:0; color:#436577; }
.pixel-part-details,.pixel-project-ideas { padding:9px 11px; border:1px solid #d6e8eb; border-radius:7px; background:#fff; }
.pixel-part-details { min-height:80px; border-inline-start:3px solid #0b8590; }
.pixel-part-details h3 { margin:0; font-size:14px; }
.pixel-part-details p { margin:4px 0 0; color:var(--muted); line-height:1.6; }
.pixel-project-ideas h3 { margin:0; font-size:14px; }
.pixel-project-ideas ul { padding-inline-start:18px; margin:6px 0; line-height:1.65; }
.pixel-project-ideas p { margin:6px 0; color:var(--muted); }
.pixel-project-ideas a,.pixel-connect-actions a,.pixel-planning a { color:#075c84; font-size:12px; font-weight:750; }
.pixel-connect-card > p { margin:7px 0; font-size:13px; line-height:1.55; }
.pixel-connect-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.pixel-connect-actions button { min-height:40px; }
.pixel-connect-actions button[hidden] { display:none; }
.pixel-connect-actions .pixel-stop-button { background:#fff1e5; border-color:#e8bc96; color:#824323; }
.pixel-connect-actions .pixel-stop-button:hover:not(:disabled) { background:#ffe5cc; border-color:#d39163; }
.pixel-connect-card .pixel-connect-hint { color:var(--muted); font-size:12px; }
.pixel-connect-status { font-weight:700; color:#135a63; }
.pixel-connect-status:empty { display:none; }
.pixel-planning { margin-top:14px; padding:11px 13px; border:1px solid #cde5e3; border-radius:8px; background:#f6fcfb; }
.pixel-planning > div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px; }
.pixel-planning h3 { margin:0; font-size:14px; }
.pixel-planning p { margin:6px 0 0; font-size:13px; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
.pixel-round-settings { min-width:0; margin:0; padding:0; border:0; font-size:13px; }
.pixel-round-settings[hidden] { display:none; }
.pixel-round-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.pixel-round-settings select { width:auto; min-width:63px; min-height:36px; padding:3px 7px; border:1px solid var(--line); border-radius:5px; background:#fff; font:inherit; color:inherit; }
.pixel-round-toggle { display:inline-flex; align-items:center; gap:5px; min-height:36px; margin:0; }
.pixel-round-toggle input { margin:0; width:17px; height:17px; accent-color:var(--green); }
.pixel-round-custom { display:flex; align-items:center; flex-wrap:wrap; gap:5px; width:100%; }
.pixel-round-custom[hidden] { display:none; }
.pixel-round-custom label { width:100%; margin:0; }
.pixel-round-custom input { width:85px; min-height:36px; padding:3px 7px; border:1px solid var(--line); border-radius:5px; font:inherit; }
.pixel-round-settings p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; word-break:keep-all; }
.preview-copy p { color:var(--muted); margin:6px 0 13px; }
.pixel-start-steps { display:grid; grid-template-columns:clamp(150px, 23%, 230px) minmax(0,1fr) minmax(0,1.2fr); align-items:stretch; gap:12px; margin-top:14px; }
.pixel-start-steps:has(.pixel-round-card[hidden]) { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.pixel-ai-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pixel-ai-tools { display:flex; flex-direction:column; min-width:0; padding:13px; border:1px solid #cde5e3; border-radius:12px; background:#f6fcfb; }
.pixel-ai-tools[hidden] { display:none; }
.pixel-ai-tools .stage-heading { margin-bottom:10px; }
.pixel-ai-tools #copyPrompt { align-self:flex-start; min-height:42px; margin-top:auto; }
.pixel-ai-link {
  display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:5px 8px;
  border:1px solid #d6e3e5; border-radius:8px; background:#fff; color:#223b46;
  max-width:100%; font-size:12px; font-weight:750; text-decoration:none; overflow-wrap:anywhere;
}
.pixel-ai-link:hover { border-color:var(--ai-accent); background:var(--ai-tint); }
.pixel-ai-mark {
  display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:5px;
  background:var(--ai-tint); color:var(--ai-accent); font-size:12px;
}
.pixel-ai-arrow { margin-left:auto; color:#536c76; font-size:11px; }
.ai-gemini { --ai-accent:#4f48ad; --ai-tint:#eeeaff; }
.ai-chatgpt { --ai-accent:#136b55; --ai-tint:#e4f6ec; }
.ai-duck { --ai-accent:#a3471f; --ai-tint:#fff0df; }
.ai-brave { --ai-accent:#a43d51; --ai-tint:#ffebef; }
.ai-custom { --ai-accent:#14636e; --ai-tint:#e3f5f6; }
.pixel-ai-tools .pixel-ai-note { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.65; word-break:keep-all; }
.pixel-ai-tools #promptHelp { margin:0 0 10px; font-size:13px; }
.pixel-ai-guide { margin-bottom:18px; padding:clamp(16px, 3vw, 23px); }
.pixel-ai-guide > p { margin:8px 0 13px; color:var(--muted); font-size:13px; }
.pixel-ai-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 15px; margin:0; padding:0; list-style:none; counter-reset:ai-guide; }
.pixel-ai-guide-steps li { counter-increment:ai-guide; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#f8fcfd; }
.pixel-ai-guide-steps li > strong { display:block; font-size:13px; }
.pixel-ai-guide-steps li > strong::before { content:counter(ai-guide) "단계. "; color:var(--green); }
.pixel-ai-guide-steps li > span { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.55; word-break:keep-all; }
.pixel-copy-example { display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:5px 9px; border-radius:6px; background:#2a4352; color:#c4f7ef; font-size:12px; font-weight:750; }
.pixel-copy-example i { position:relative; width:8px; height:9px; border:1px solid currentColor; border-radius:2px; }
.pixel-copy-example i::after { content:""; position:absolute; inset:2px auto auto 2px; width:8px; height:9px; border:1px solid currentColor; border-radius:2px; background:#2a4352; }
.editor-hint { margin:8px 22px; }
#codingPanel .editor-tools button { min-height:36px; }
#autoPaste[aria-pressed="true"] { background:#def4e9; border-color:#7db49c; color:#18583e; }
#clipboardHelp { flex:1 1 230px; margin:0; font-size:12px; line-height:1.5; word-break:keep-all; }
#sourceSize { margin-inline-start:auto; white-space:nowrap; }
.pixel-build-card { margin-top:18px; }
#clipboardNotice {
  position:fixed; z-index:40; inset:14px 0 auto; width:max-content; max-width:calc(100% - 24px);
  margin-inline:auto; padding:11px 16px; border:1px solid #e8a3a9; border-radius:10px;
  background:#fff1f2; color:#a32432; box-shadow:0 4px 16px #651a2426;
  font-size:14px; font-weight:750; text-align:center; pointer-events:none;
}
.pixel-hardware {
  margin-top:18px; padding:clamp(14px, 3vw, 26px); scroll-margin-block-start:16px;
  border-color:#cde3e8; background:#f8fcfd;
}
.pixel-hardware-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; margin-bottom:16px; }
.pixel-hardware-heading h2 { margin:0; font-size:clamp(19px, 3vw, 25px); }
.pixel-hardware-spec { display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; }
.pixel-hardware-spec div { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; padding:5px 9px; border:1px solid #cde3e8; border-radius:7px; background:#fff; font-size:12px; }
.pixel-hardware-spec dt { color:#436577; }
.pixel-hardware-spec dd { margin:0; font-weight:700; }
.pixel-hardware-spec dd strong { margin-inline-start:3px; font-family:Consolas,monospace; color:#0c616c; }
.pixel-hardware-grid { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); align-items:start; gap:16px; }
.pixel-hardware-grid figure { min-width:0; margin:0; border:1px solid #cde3e8; border-radius:11px; background:#fff; }
.pixel-circuit-preview { overflow:hidden; }
.pixel-circuit-preview a { display:block; color:#075c84; font-weight:750; }
.pixel-circuit-preview a:focus-visible { outline-offset:-4px; }
.pixel-circuit-preview img { display:block; width:100%; height:auto; }
.pixel-circuit-preview a span { display:block; padding:9px 13px 0; font-size:13px; }
.pixel-circuit-preview figcaption { padding:4px 13px 11px; color:#436577; font-size:12px; line-height:1.6; }
.pixel-wiring { padding:clamp(10px, 2vw, 16px); }
.pixel-wiring h3 { margin:0; font-size:16px; }
.pixel-wiring figcaption p { margin:4px 0 12px; color:#436577; font-size:13px; }
.pixel-wire-map {
  display:grid; grid-template-columns:clamp(40px, 10vw, 110px) minmax(0, 1fr);
  align-items:stretch; padding:8px; border-radius:8px; background:#eaf4f7;
}
.pixel-wire-board {
  display:grid; place-items:center; margin:4px 0; border:1px solid #286672; border-radius:8px;
  background:linear-gradient(145deg,#1a5260,#123441); color:#fff;
}
.pixel-wire-board span { font:700 clamp(10px, 1.6vw, 16px)/1.3 Consolas,monospace; }
.pixel-wires { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.pixel-wires li {
  display:grid; grid-template-columns:7.4ch minmax(12px, .35fr) minmax(0, 1fr); gap:5px; align-items:center;
  min-height:32px; font-size:clamp(12px, 1.4vw, 14px);
}
.pixel-wires li > code {
  justify-self:stretch; padding:4px 2px; border-radius:0 5px 5px 0; background:#fff;
  color:#163449; text-align:center; white-space:nowrap; font:700 .9em/1.35 Consolas,monospace;
}
.pixel-wires li > span:last-child { padding:4px 6px; border:1px solid var(--wire-border); border-radius:5px; background:var(--wire-paper); color:#1d3741; }
.pixel-wires li > span:last-child code { white-space:nowrap; }
.pixel-wire { position:relative; height:2px; background:var(--wire-color); }
.pixel-wire::before,.pixel-wire::after { content:""; position:absolute; inset-block-start:-2px; width:6px; height:6px; border-radius:50%; background:inherit; }
.pixel-wire::before { inset-inline-start:0; }
.pixel-wire::after { inset-inline-end:0; }
.wire-display { --wire-color:#975611; --wire-border:#e4bc83; --wire-paper:#fff4df; }
.wire-stick { --wire-color:#0d7466; --wire-border:#9bcec2; --wire-paper:#e7f8f1; }
.wire-button { --wire-color:#255ea0; --wire-border:#afc9ed; --wire-paper:#edf5ff; }
.wire-buzzer { --wire-color:#865291; --wire-border:#d5b9df; --wire-paper:#f8effc; }
.wire-ground { --wire-color:#546575; --wire-border:#b5c5cd; --wire-paper:#f0f5f7; }
.pixel-wiring-note { margin:9px 0 0; font-size:12px; line-height:1.6; color:#436577; }
@media (max-width:700px) {
  .pixel-hardware-grid { grid-template-columns:minmax(0,1fr); }
}
.pixel-build-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:10px; }
.pixel-build-options label { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.pixel-build-options input { accent-color:var(--green); width:17px; height:17px; }
.share-panel,.troubleshooting { margin-top:18px; padding:18px 22px; }
.share-panel h2,.troubleshooting h2 { margin:0 0 8px; font-size:17px; }
.share-panel .hint { margin:0 0 12px; line-height:1.75; }
#shareEdit { margin:0 0 12px; }
#shareEdit summary,.usb-help summary { cursor:pointer; color:var(--green); font-weight:750; }
.share-fields { display:grid; gap:10px; max-width:620px; margin:10px 0 0; }
.share-fields label { display:grid; gap:5px; font-size:13px; font-weight:700; }
.share-fields :is(input,textarea) { width:100%; box-sizing:border-box; padding:8px 10px; font:inherit; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
.share-fields textarea { resize:vertical; min-height:72px; }
#shareStatus { margin:4px 0 0; font-size:12px; }
#shareStatus:empty { display:none; }
.back-to-coding {
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:14px; padding:8px 12px;
  border:1px solid #b2dce0; border-radius:7px; background:#eefafb; color:#14636e;
  font-size:14px; font-weight:750; text-decoration:none;
}
.back-to-coding:hover { background:#def3f5; }
.back-to-coding:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.back-to-coding .coding-icon { font:700 14px/1 monospace; }
.serial-example { width:min(100%,420px); margin:16px 0 0; }
.serial-example-window { padding:14px; border:1px solid #d8e0ec; border-radius:12px; background:#f4f7fe; color:#202735; font-size:13px; }
.serial-example-list { margin:12px 0; border:1px solid #c6d3ed; border-radius:6px; background:#fff; min-height:46px; padding:4px; }
.serial-example-list span { display:block; padding:7px 8px; background:#d9e6ff; border-radius:4px; overflow-wrap:anywhere; }
.serial-example-actions { display:flex; justify-content:flex-end; gap:7px; }
.serial-example-actions span { border:1px solid #a8bbdf; border-radius:18px; padding:4px 12px; }
.serial-example-actions span:last-child { background:#1756b5; color:#fff; border-color:#1756b5; }
.serial-example figcaption { margin-top:7px; color:var(--muted); font-size:12px; line-height:1.65; }
.brand img { width:42px; height:42px; object-fit:contain; }
#source { display:block; min-height:245px; height:31vh; resize:vertical; }
.pixel-queue { margin:16px 0 0; padding:13px 16px; border:1px solid #cde8eb; border-radius:9px; background:#f1fbfa; }
.pixel-queue .queue-heading,.pixel-queue .queue-monitor { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 15px; }
.pixel-queue h3 { font-size:14px; margin:0; }
.queue-primary-counts { display:flex; flex-wrap:wrap; gap:12px; }
.queue-primary-counts span,.queue-monitor { font-size:12px; color:var(--muted); }
.queue-monitor { margin-top:8px; }
#studentFlow.classroom-queue { margin:12px 0 0; }
#studentFlow.classroom-queue .panel-head .eyebrow,#studentFlow .classroom-counts { display:none; }
#studentFlow .classroom-flow-scroll { max-width:100%; }
#studentFlow .flow-own-badge[hidden],#studentFlow .queue-finish[hidden] { display:none; }
#status { margin-bottom:0; }
#uploadJump { display:inline-block; margin-top:8px; color:#075c84; font-size:13px; font-weight:750; }
.usb-next { display:inline-block; margin-top:10px; color:#075c84; font-size:13px; font-weight:750; }
#compileQueue,#pixelPreview,#uploadPanel,#buildError { scroll-margin-block:16px; }
#upload:not(:disabled)[data-usb-state=ready] {
  background:#fff1c2; border-color:#a46508; color:#563300;
  box-shadow:0 0 0 3px #f2be55;
}
@keyframes upload-ready-pulse {
  50% { box-shadow:0 0 0 8px #f2be5560; }
}
@media(prefers-reduced-motion:no-preference) {
  #upload.in-view:not(:disabled)[data-usb-state=ready] { animation:upload-ready-pulse 1.1s ease-in-out 4; }
}
#upload[data-usb-state=busy] { background:#dceffa; border-color:#7eaec7; color:#143d55; }
button:is(#upload,#storeUpload)[data-usb-state=complete] {
  background:#167446; border-color:#115d38; color:#fff;
}
#usbHelp ol { padding-left:1.4em; line-height:1.75; }
#usbHelp li + li { margin-top:.4em; }
.usb-port-guide { margin:14px 0; }
.usb-port-guide p { line-height:1.7; }
.usb-port-guide figure { max-width:720px; margin:12px 0 0; }
.usb-port-guide figure a { display:block; }
.usb-port-guide img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.usb-port-guide figcaption { margin-top:6px; color:var(--muted); font-size:12px; }
.pixel-preview { display:grid; grid-template-columns:minmax(185px,258px) minmax(0,1fr); gap:clamp(25px,6vw,70px); align-items:center; padding:clamp(22px,5vw,46px); margin:18px 0; background:linear-gradient(125deg,#eefaff,#fff 75%); }
.pixel-device { aspect-ratio:.65; display:flex; flex-direction:column; justify-content:space-between; padding:8.5% 6.5% 15%; border-radius:8% / 5%; background:#1b1f24; border:1px solid #353b40; }
#ledMatrix { display:block; width:100%; aspect-ratio:1; border:1px solid #788b9d; border-radius:2px; image-rendering:pixelated; }
.pixel-controls { display:grid; grid-template-columns:repeat(3,1fr); grid-template-areas:'. label-a label-b' 'stick button-a button-b'; justify-items:center; align-items:center; gap:6px 8%; }
.pixel-button-label { color:#fff; font-size:14px; font-weight:800; line-height:1.2; }
.pixel-label-a { grid-area:label-a; }
.pixel-label-b { grid-area:label-b; }
.pixel-controls :is(button,.pixel-shot-control) { display:block; aspect-ratio:1; min-height:0; padding:0; width:100%; border-radius:50%; touch-action:none; box-shadow:none; }
.pixel-controls .pixel-stick { grid-area:stick; width:88%; background:#101316; border:1px solid #555e68; }
.pixel-stick span { display:block; width:88%; aspect-ratio:1; margin:auto; border-radius:50%; background:#363e47; transform:translate(var(--stick-x,0),var(--stick-y,0)); pointer-events:none; }
.pixel-controls .pixel-button { border:2px solid var(--rim); background:var(--button-color); }
.pixel-controls .pixel-button:active { filter:brightness(.8); }
.pixel-controls .pixel-red { grid-area:button-a; --rim:#ff7883; --button-color:#e44758; }
.pixel-controls .pixel-green { grid-area:button-b; --rim:#6bd878; --button-color:#40b952; }
.preview-copy h2 { font-size:20px; margin:0; }
.simulator-actions { display:flex; flex-wrap:wrap; gap:8px; }
.simulator-actions button { min-height:38px; }
#simulatorLog { margin-top:12px; }
#simulatorLog summary { cursor:pointer; }
#simulatorSerial { min-height:44px; max-height:150px; overflow:auto; }
.preview-copy dl { font-size:13px; margin:19px 0; }
.preview-copy dl div { display:grid; grid-template-columns:minmax(112px,.65fr) 1fr; gap:8px; padding:7px 0; border-bottom:1px solid #e0edf3; }
.preview-copy dt { font-weight:700; }
.preview-copy dd { margin:0; color:var(--muted); }
#pixelReading { font:12px Consolas,monospace; color:var(--green); }
@media(max-width:610px) {
  .pixel-start-steps,.pixel-start-steps:has(.pixel-round-card[hidden]),.pixel-ai-guide-steps { grid-template-columns:1fr; }
  .pixel-device-intro-content { grid-template-columns:minmax(0,1fr); }
  .pixel-ai-link { flex:1 1 110px; }
  .pixel-preview { grid-template-columns:1fr; justify-items:center; gap:40px; }
  .pixel-device { width:min(100%,240px); padding:18px 15px 32px; }
  .preview-copy { width:100%; }
  .brand .tag { display:none; }
}
@media(max-width:390px) { .console-nav a,.console-nav button { font-size:10px; padding-inline:6px; } }