/* Cortex Lab · instrument workspace. GPL-2.0-or-later. */
@font-face{font-family:DM Sans;src:url("fonts/dm-sans.ttf") format("truetype");font-display:swap;font-weight:100 1000}
:root{--bg:#f6f7f7;--ink:var(--ui-ink);--muted:var(--ui-muted);--line:var(--ui-line);--blue:var(--ui-accent);--cyan:#9bc1df;--dark:#162a3c;--mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;--panel:#fff;--rail:205px}
body{font-family:"DM Sans",Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}
button{font-weight:600}button:hover{background:var(--ui-wash);border-color:#a5bbcd}button.primary{background:var(--ui-navy);border-color:var(--ui-navy)}button.primary:hover{background:var(--ui-accent)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#3977a6;outline-offset:3px}
.studio-header{height:63px;min-height:63px;background:#152125;border:0;border-bottom:1px solid #28363b;color:#e7edeb;display:flex;align-items:center;gap:20px;padding:0 28px;position:relative;z-index:2}
.studio-header button{background:none;border:0;color:inherit;display:inline-flex;align-items:center}
.studio-brand{gap:10px;padding:0;font-size:25px;line-height:1;letter-spacing:-1.25px;font-weight:720}.studio-brand img{width:32px;height:32px}.brand-lab{font-weight:440;color:#c8d2d0}
.header-divider{height:18px;border-left:1px solid #465254}.header-context{font-size:13px;color:#b9c7c8}.studio-header .header-help{margin-left:auto;gap:7px;font-size:12px;font-weight:550;color:#c9d5d5}.studio-header .header-help:hover{color:#c3f38d}
.affiliation{font:700 11px var(--mono);letter-spacing:.07em;border-left:1px solid #465254;padding-left:19px;color:#e1e8e6}.affiliation span{color:var(--ui-muted);margin:0 3px}
i[data-icon]{display:inline-flex;align-items:center;flex:none;font-style:normal}
.studio-layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:calc(100vh - 63px);margin:auto;max-width:2300px}
.studio-rail{border-right:1px solid var(--line);background:#fafbfa;display:flex;flex-direction:column;padding:31px 14px 17px;min-width:0}
#labNavigation{height:auto;display:flex;flex-direction:column;gap:25px}.rail-group{display:flex;flex-direction:column;gap:3px}.rail-label{color:var(--ui-muted);font:650 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:0 12px 8px}
.rail-group>button{background:none;border:1px solid transparent;display:flex;align-items:center;gap:11px;text-align:left;height:36px;font-size:13px;line-height:1;padding:0 11px;font-weight:500;color:#394e60;border-radius:7px}.rail-group>button svg{width:17px;height:17px;color:#687d8e}.rail-group>button:hover{background:var(--ui-wash);color:var(--ui-ink)}.rail-group>button.active{background:var(--ui-tint);border-color:#cfdeea;color:var(--ui-navy);font-weight:680}.rail-group>button.active svg{color:var(--ui-accent)}
.rail-status{display:flex;align-items:center;gap:9px;color:var(--ui-muted);font-size:11px;padding:19px 12px 2px;margin-top:35px;border-top:1px solid var(--ui-line)}.rail-status .dot{box-shadow:0 0 0 3px #e1f1e3;background:#65a777}.rail-status .dot.amber{background:#dfaa56;box-shadow:none}
#mobileNav{display:none}
main{width:100%;max-width:none;min-width:0;margin:0;padding:25px clamp(23px,2.8vw,46px) 12px}
.studio-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 20px}
.studio-crumb{display:flex;gap:9px;align-items:center;font-size:11px;color:#6e7a7a}.studio-crumb svg{width:13px;height:13px}.studio-crumb b{font-weight:500;color:var(--ui-muted)}
.studio-heading h1{font-size:clamp(28px,2.6vw,42px);line-height:1.15;font-weight:680;letter-spacing:-.048em;margin:8px 0 0}
.new-studio-project,.open-editor{display:inline-flex;align-items:center;gap:8px;border-radius:7px;font-size:13px;font-weight:680}
.new-studio-project{color:#f6f9fc;background:var(--ui-navy);border:1px solid var(--ui-navy);padding:10px 15px}.new-studio-project:hover{color:white;background:var(--ui-accent);border-color:var(--ui-accent)}.new-studio-project svg{width:16px;height:16px}
#homePanel{max-width:1540px;margin:auto}
.project-hero{isolation:isolate;overflow:hidden;position:relative;background:#182b29;color:#f6faf5;min-height:231px;border:1px solid #203430;border-radius:14px;display:flex;align-items:center;justify-content:space-between}
.hero-grid{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 65% 60%,#47715a3d 0,transparent 63%),linear-gradient(90deg,#1b2d2c 0,#1b2e2b66 43%,transparent 82%),radial-gradient(circle at center,#699e7f5c .8px,transparent 1px);background-size:auto,auto,14px 14px}
.hero-info{position:relative;z-index:1;padding:27px clamp(24px,3vw,45px);min-width:0;max-width:60%}
.hero-kicker{display:flex;align-items:center;gap:7px;font:650 10px var(--mono);text-transform:uppercase;letter-spacing:.15em;color:#b7d6ad}.hero-kicker svg{width:15px;height:15px}
.hero-info h2{margin:11px 0 7px;font-weight:570;letter-spacing:-.045em;line-height:1.07;color:var(--ui-wash);font-size:clamp(32px,3.7vw,59px);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-meta{display:flex;align-items:center;gap:10px;color:#bfcfca;flex-wrap:wrap;font:11px var(--mono)}
.meta-dot{color:#9ab28d}.open-editor{margin-top:23px;background:#c4f18d;color:#203321;border:1px solid #c4f18d;padding:9px 13px}.open-editor:hover{background:#d1ffa3;border-color:#d1ffa3}.open-editor svg{width:16px;height:16px;margin-left:4px}
.hero-diagram,.hero-diagram:hover{background:none;border:0;box-shadow:none;padding:0;position:absolute;right:0;top:0;bottom:0;width:55%;display:flex;align-items:center;justify-content:center}.hero-diagram span{width:100%;height:100%;display:block}.hero-diagram svg{display:block;height:100%;width:100%}.hero-diagram:hover svg{filter:brightness(1.10)}
.home-section-heading{margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between}.home-section-heading h2{font-size:20px;margin:0;letter-spacing:-.035em;font-weight:680}.text-link{background:none;border:0;font-size:12px;display:inline-flex;gap:6px;align-items:center;color:var(--ui-accent);padding:3px}.text-link svg{width:14px}
.tool-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.tool-card{display:flex;flex-direction:column;text-align:left;overflow:hidden;padding:0;border:1px solid var(--ui-line);border-radius:11px;background:white;min-width:0;box-shadow:0 2px 3px #20384e12;transition:border-color .15s,transform .15s}.tool-card:hover{transform:translateY(-2px);border-color:#8ba9be;background:#fff}.card-art{height:79px;overflow:hidden;width:100%;border-bottom:1px solid var(--ui-line)}.card-art svg{display:block;width:100%;height:100%}.card-body{padding:15px 17px 17px}.card-body h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 5px;font-size:17px;line-height:1.35;letter-spacing:-.025em;font-weight:680}.card-body h3 svg{color:var(--ui-muted);width:15px;height:15px}.card-body p{font-size:12px;line-height:1.55;color:var(--ui-muted);margin:0;font-weight:400;max-width:39ch}
.example-list{border:1px solid var(--line);background:white;border-radius:10px;overflow:hidden}.quick-row,.quick-row:hover{display:flex;width:100%;align-items:center;gap:13px;border:0;border-radius:0;border-bottom:1px solid #e4e8e4;padding:10px 16px;text-align:left;background:#fff}.quick-row:last-child{border-bottom:0}.quick-row:hover{background:#f4f8ef}.quick-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:7px;background:#eef2e9;color:#576e55}.quick-row:nth-child(2) .quick-icon{background:#ecf1f3;color:#4f7078}.quick-row:nth-child(3) .quick-icon{background:#f2ede6;color:#886f52}.quick-name{display:flex;align-items:baseline;gap:16px}.quick-name strong{font-size:13px}.quick-name small{color:#6b7873;font-size:11px;font-weight:400}
.lang-tag{font:600 10px var(--mono);background:#f4f6f3;border:1px solid #e0e5de;color:#52634f;padding:2px 6px;border-radius:4px;margin-left:auto}.quick-row>svg{width:15px;height:15px;color:#728079}
main[data-view=architecture]>.toolbar,main[data-view=architecture]>.target-strip,main[data-view=home]>.toolbar,main[data-view=home]>.statusbar,main[data-view=home]>.target-strip{display:none}
.studio-layout:not(:has(main[data-view=bench])) #projectExplorer{display:none}
main:not([data-view=home]){padding-left:clamp(15px,1.6vw,29px);padding-right:clamp(15px,1.6vw,29px)}
main:not([data-view=home]) .studio-heading{margin-bottom:16px}
.toolbar{box-shadow:0 1px 3px #1d30200a}.toolgroup{flex-wrap:wrap}.target-strip{margin:0 0 16px;background:var(--ui-tint);border:1px solid var(--ui-line);color:var(--ui-navy)}.target-strip strong,.target-strip #targetSummary,.target-strip .target-chip{color:var(--ui-accent)}.target-strip button{color:var(--ui-navy);border-color:#adbfcd;background:white}.panel-symbol{color:var(--ui-accent)}.panel-symbol svg{width:17px;height:17px}
.panel,.workbench-panel{border-radius:10px}.workspace{grid-template-columns:minmax(295px,1.2fr) minmax(310px,1.14fr) minmax(170px,.65fr);gap:11px}.workbench-heading p{max-width:80ch}
#projectExplorer button{text-align:left}
footer{display:flex;gap:15px;margin:23px 0 0;padding:15px 0;color:var(--ui-muted);font-size:11px;border-top:1px solid var(--ui-line);align-items:center;justify-content:flex-start}
footer>button,footer>a{color:var(--ui-muted);font-size:11px}footer>span{margin-right:auto}
@media(min-width:1650px){:root{--rail:225px}.project-hero{min-height:280px}.card-art{height:105px}.card-body{padding:20px}.rail-group>button{height:40px}}
@media(max-width:1370px){:root{--rail:182px}.studio-rail{padding-left:10px;padding-right:10px}.workspace{grid-template-columns:minmax(270px,1.08fr) minmax(300px,1.16fr) minmax(158px,.62fr)}.toolgroup{gap:5px}.toolgroup button{font-size:11px;padding:6px 8px}.scope-tools,.triggerbar{flex-wrap:wrap}.pins{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:1175px){.workspace{grid-template-columns:minmax(255px,1fr) minmax(280px,1.1fr)}.registers{grid-column:1/-1}.card-body{padding:13px}.card-art{height:70px}}
@media(max-width:925px){:root{--rail:160px}.rail-group>button{font-size:12px;gap:8px}.studio-header{padding:0 19px}.tool-cards{gap:9px}.card-body h3{font-size:15px}.card-body p{font-size:11px}.hero-info{max-width:63%}.quick-name{gap:7px}.toolgroup{max-width:100%}.workspace{grid-template-columns:1fr}.registers{grid-column:auto}}
@media(max-width:760px){.studio-header{height:55px;min-height:55px;padding:0 15px;gap:11px;flex-wrap:nowrap}.studio-brand{font-size:22px}.studio-brand img{width:29px;height:29px}.header-context,.header-divider{display:none}.studio-header .header-help{padding:4px}.affiliation{font-size:9px;padding-left:11px}.studio-layout{display:block}.studio-rail{padding:0;border:0;background:#fff;border-bottom:1px solid var(--line);display:block}.rail-status{display:none}#mobileNav{border:0;border-radius:0;background:transparent;display:flex;align-items:center;gap:9px;width:100%;padding:10px 17px;font-size:12px}#mobileNav>i:last-child{margin-left:auto}#mobileNav svg{width:16px;height:16px}#labNavigation{display:none;width:100%;gap:13px;height:auto;padding:6px 14px 16px}#mobileNav[aria-expanded=true]+#labNavigation{display:flex}.rail-group{gap:1px}.rail-group>button{height:33px}main{padding:17px 15px 6px}.studio-heading{margin-bottom:14px}.studio-heading h1{font-size:29px}.studio-crumb{font-size:10px}.new-studio-project{padding:8px 11px;font-size:12px}.hero-info{padding:23px 20px;max-width:66%}.project-hero{min-height:207px;border-radius:10px}.hero-meta{gap:6px;font-size:10px}.hero-diagram{width:50%;right:-5%}.hero-info h2{font-size:34px}.home-section-heading{margin-top:18px}.home-section-heading h2{font-size:18px}.workspace{grid-template-columns:1fr}.projectbar,.scope-tools,.toolgroup{flex-wrap:wrap}.card-art{height:55px}.quick-name{display:block}.quick-name small{display:block}.quick-icon{width:30px;height:30px}.quick-row{padding:9px 12px}footer{flex-wrap:wrap;gap:8px}footer span{width:100%}main:not([data-view=home]){padding:16px 10px 8px}.toolgroup .sep{display:none}}
@media(max-width:530px){.tool-cards{grid-template-columns:1fr}.tool-card{flex-direction:row;align-items:stretch}.card-art{width:27%;height:auto;min-height:68px;flex:none;border:0}.card-art svg{width:100%;height:100%;min-height:68px}.card-body{flex:1;padding:10px 12px}.card-body h3{margin-bottom:2px}.card-body p{line-height:1.4}.hero-diagram{right:-13%;width:60%;opacity:.85}.hero-info{max-width:74%}.hero-meta{max-width:167px}.project-hero{min-height:195px}.open-editor{margin-top:17px}.header-help span{font-size:11px}.home-section-heading{margin:17px 0 9px}.project-hero .hero-info h2{font-size:31px}.studio-heading h1{font-size:26px}.studio-header{gap:8px}.hero-kicker{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.editor-options{background:var(--ui-wash);border-block:1px solid var(--ui-line)}.editor-options summary{cursor:pointer;font-size:11px;color:#587061;padding:6px 12px}.editor-options .file-actions,.editor-options .examplebar{padding:8px 12px}.editor-options .examplebar label{color:#607165;font:10px var(--mono)}.editor-options .examplebar select{min-width:70px;max-width:70%}
.instrument-switch{display:flex;align-items:center;gap:8px}.instrument-switch button{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#42684f;padding:4px 7px;background:#f3f7f1;border-color:#d4e1d1}.instrument-switch svg{width:12px;height:12px}
#benchPanel .sourcewrap{min-height:340px}#benchPanel .panelhead{font-size:13px}.rail-group>button{white-space:nowrap}
@media(max-width:950px){.studio-rail{padding-left:8px;padding-right:8px}.rail-group>button{gap:6px}.rail-group>button svg{width:15px}}
@media(max-width:760px){.studio-rail{padding:0}}

/* The circuit owns its run control. The parts view only configures hardware. */
main:is([data-view=board],[data-view=modules]) > .toolbar .toolgroup:first-child > :is(button,.sep),
main:is([data-view=board],[data-view=modules]) > .target-strip,
main[data-view=modules] > .toolbar .toolgroup:nth-child(2),
main[data-view=modules] > .statusbar { display:none; }
main:is([data-view=board],[data-view=modules]) > .toolbar { margin-bottom:8px; }
main[data-view=board] > .statusbar { margin:0 0 10px; }
.board-panel:not(.show-pin-inspector) .board-layout { grid-template-columns:minmax(0,1fr); }
.board-panel .board-inspector[hidden],.board-shelf-options[hidden] { display:none; }
.board-panel .board-toolbar { padding:12px 16px; }
.board-circuit-title { display:grid; gap:3px; }
.board-toolbar-kicker { font:600 10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--ui-muted); }
.board-circuit-title strong { font-size:17px; line-height:1.15; overflow-wrap:anywhere; }
.board-program-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; font-weight:650; border:1px solid var(--ui-navy); border-radius:7px; background:var(--ui-navy); color:#f5f9fc; }
.board-program-btn:hover { background:var(--ui-accent); color:white; }
.board-program-btn::before { content:""; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
.board-program-btn.is-running::before { width:3px; height:10px; border:0; border-inline:3px solid currentColor; }
.board-shelf { border-bottom:1px solid var(--line); background:var(--ui-wash); padding:10px 16px; }
.board-shelf-controls,.board-part-options { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.board-shelf-toggle { display:inline-flex; align-items:center; gap:7px; padding:4px 0; background:transparent; border:0; font-size:14px; font-weight:675; }
.board-shelf-toggle:hover { background:transparent; color:var(--ui-accent); }
.board-shelf-toggle::after { content:""; width:6px; height:6px; border-bottom:1.6px solid; border-right:1.6px solid; transform:rotate(-45deg); }
.board-shelf-toggle[aria-expanded=true]::after { transform:rotate(45deg); }
.board-inspect-btn { margin-left:auto; font-size:11px; padding:4px 7px; background:white; }
.board-shelf-controls .board-field { display:flex; flex-direction:row; gap:5px; align-items:center; margin:0; }
.board-shelf-controls .board-field > span { color:var(--ui-muted); font-size:11px; }
.board-shelf-controls .board-field select { width:auto; padding:3px 6px; font-size:11px; }
.board-shelf-options p { color:var(--ui-muted); font-size:12px; margin:1px 0 8px; }
.board-counter-example { padding:2px 4px; background:transparent; border:0; color:var(--ui-accent); font:inherit; font-weight:650; text-decoration:underline; text-underline-offset:2px; }
.board-counter-example:hover { background:var(--ui-tint); }
.board-part-choice { display:inline-flex; align-items:center; gap:6px; cursor:grab; color:var(--ui-navy); background:white; font-size:12px; padding:4px 8px; border:1px solid var(--ui-line); border-radius:5px; }
.board-part-choice::before { content:""; width:6px; height:11px; background:radial-gradient(circle,#6d88a0 1px,transparent 1.2px) 0 0/3px 4px; }
.board-part-choice:hover { background:var(--ui-tint); border-color:#93aabf; }
.board-part-choice:active { cursor:grabbing; }
.board-drop-target { outline:3px solid #4779a4; outline-offset:2px; }
.board-work { padding:12px; }
.board-shelf button:focus-visible,.board-program-btn:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
@media(max-width:620px) {
  .board-panel .board-toolbar,.board-shelf { padding:10px; }
  .board-shelf-controls { gap:5px; }
  .board-shelf-controls .board-field > span { display:none; }
  .board-program-btn { font-size:12px; }
  .board-work { padding:5px; }
}

main[data-view=board]>.toolbar { padding-block:5px; min-height:0; margin-bottom:0; }
main[data-view=board]>.statusbar { padding:4px 5px; margin:0 0 5px; }
@media(max-width:650px) { .board-panel .board-toolbar { flex-direction:row; align-items:center; gap:9px; } }

.home-courses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 17px;
}
.home-courses .course-home { margin: 0; }
.home-courses .course-home > span { flex: 1; }

.board-course-serial {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  background: #182c40; color: #eff5f9; padding: 7px 16px;
}
.board-course-serial strong { font-size: 12px; color: #c1d5e6; }
.board-course-serial pre {
  min-height: 3.9em; max-height: 3.9em; margin: 0; overflow: auto;
  font: 12px/1.3 var(--mono); color: #e5eff7;
}
.board-course-serial .board-serial-link { background: #243d51; border-color: #53718b; color: #ecf3f8; font-size: 11px; }
@media (max-width: 620px) {
  .board-course-serial { grid-template-columns: 1fr auto; gap: 4px 9px; }
  .board-course-serial pre { grid-row: 2; grid-column: 1 / -1; }
}

#explorerDivider { display: none; }
@media (min-width: 761px) {
  .studio-layout:has(main[data-view="bench"]) {
    position: relative;
  }
  .studio-layout:has(main[data-view="bench"]):has(.tree-title[aria-expanded="true"]) {
    --rail: var(--explorer-width, clamp(236px, 26vw, 380px));
  }
  .studio-layout:has(main[data-view="bench"]) .studio-rail {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    padding-block-start: 16px;
  }
  .studio-layout:has(main[data-view="bench"]) #projectExplorer {
    order: -1;
    margin-top: 0;
    margin-bottom: 0;
  }
  .studio-layout:has(main[data-view="bench"]):has(.tree-title[aria-expanded="true"]) > #explorerDivider {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--rail);
    width: 12px;
    transform: translateX(-50%);
    z-index: 3;
    cursor: col-resize;
    touch-action: none;
  }
  #explorerDivider::before {
    content: "";
    display: block;
    position: absolute;
    inset-block: 0;
    left: 5px;
    width: 2px;
    background: var(--ui-line);
  }
  #explorerDivider::after {
    content: "";
    display: block;
    position: sticky;
    top: 32vh;
    margin: min(22vh, 180px) auto 0;
    width: 8px;
    height: 44px;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: repeating-linear-gradient(to bottom,#6b8194 0 2px,transparent 2px 5px) center / 2px 17px no-repeat, var(--ui-tint);
  }
  #explorerDivider:is(:hover,:focus-visible)::before,
  .resizing-explorer #explorerDivider::before { background: #6890ae; }
  #explorerDivider:focus-visible { outline: 0; }
  #explorerDivider:focus-visible::after { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
  .resizing-explorer, .resizing-explorer * { cursor: col-resize !important; user-select: none !important; }
}

#sourceNavTools {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 6px;
}
#sourceNavTools button {
  color: #c4d7d3;
  background: transparent;
  border: 1px solid #425463;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
}
#sourceNavTools button:is(:hover,:focus-visible) { background: #294238; color: #edf5ee; }
@media (max-width: 540px) { .editor-panel .tabbar { flex-wrap: wrap; } }

.editor-options .example-description { margin:0; padding:3px 12px 10px; min-height:0; font-size:12px; line-height:1.5; color:#455d73; }