.piclab{color-scheme: dark; --bg: #0b0812; --surface: #120d1d; --surface2: #1e142e; --line: #3a2b50; --text: #edf0f1; --muted: #9ba5ad; --accent: #00ffff; --green: #8cdaae; --blue: #79bbef; --red: #f08a89; --mono: ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace; --sans: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.piclab *{box-sizing: border-box;}
.piclab{margin: 0; background: var(--bg); font: 14px/1.55 var(--sans); color: var(--text);}
.piclab button,.piclab input,.piclab select,.piclab textarea{font: inherit;}
.piclab button,.piclab a,.piclab select,.piclab input{touch-action: manipulation;}
.piclab button,.piclab select,.piclab input[type=number],.piclab input[type=search],.piclab input[type=text]{min-height: 40px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); border-radius: 7px; padding: 8px 12px;}
.piclab button{cursor: pointer; font-weight: 550; transition: background .15s,border-color .15s;}
.piclab button:hover{background: #30363b; border-color: #626b72;}
.piclab button:disabled{opacity: .45; cursor: not-allowed;}
.piclab button.primary{background: var(--accent); border-color: var(--accent); color: #071619; font-weight: 700;}
.piclab button.primary:hover{background: #80ffff;}
.piclab button.quiet{background: transparent;}
.piclab select{max-width: 100%; padding-right: 28px; cursor: pointer;}
.piclab a{color: var(--accent);}
.piclab button:focus-visible,.piclab a:focus-visible,.piclab input:focus-visible,.piclab select:focus-visible,.piclab summary:focus-visible,.piclab textarea:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px;}
.piclab h1,.piclab h2,.piclab h3,.piclab p{margin-top: 0;}
.piclab h1{font-size: clamp(27px,3vw,38px); line-height: 1.2; letter-spacing: -1.4px; margin-bottom: 10px; font-weight: 650;}
.piclab h2{font-size: 18px; letter-spacing: -.35px; margin: 4px 0 0;}
.piclab h3{font-size: 14px; margin: 0 0 10px;}
.piclab p{margin-bottom: 12px;}
.piclab .topbar{height: 83px; padding: 0 32px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #141719;}
.piclab .brand{display: flex; gap: 13px; align-items: center; text-decoration: none; color: var(--text); font-size: 22px; letter-spacing: -.6px; font-weight: 650;}
.piclab .brand b{font-size: 11px; letter-spacing: .5px; color: var(--accent); border: 1px solid #6b3db5; padding: 3px 6px; border-radius: 5px; vertical-align: middle;}
.piclab .brand small{display: block; color: var(--muted); font-size: 9px; letter-spacing: 1.8px; font-weight: 500; margin-top: 2px;}
.piclab .brand-mark{width: 40px; height: 40px; border: 1px solid #663ba0; background: #201130; border-radius: 9px; display: grid; place-items: center; color: var(--accent); font: 23px var(--mono); position: relative;}
.piclab .brand-mark span{font-size: 12px; position: absolute; bottom: 1px; right: 3px;}
.piclab .header-actions{display: flex; align-items: center; gap: 10px;}
.piclab .offline{color: var(--muted); font-size: 12px; margin-right: 15px; white-space: nowrap;}
.piclab .offline i,.piclab .dot{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px;}
.piclab .app-shell{display: grid; grid-template-columns: 178px minmax(0,1fr);}
.piclab .rail{border-right: 1px solid var(--line); padding: 28px 13px; display: flex; flex-direction: column; gap: 8px; background: #131618; align-self: stretch;}
.piclab .rail button{display: flex; gap: 11px; align-items: center; text-align: left; border: 1px solid transparent; background: none; color: var(--muted); font-size: 12px; padding: 10px;}
.piclab .rail button span{font-size: 20px; line-height: 1;}
.piclab .rail button.active{background: #211232; border-color: #64369b; color: var(--accent);}
.piclab .rail-foot{margin-top: 75px; padding: 16px 10px; border-top: 1px solid var(--line);}
.piclab .rail-foot p{font: 17px/1.8 var(--mono); margin: 13px 0; color: #c7cdd2;}
.piclab .version{font-size: 10px; color: var(--muted);}
.piclab main{padding: 30px clamp(16px,3vw,42px); min-width: 0; max-width: 1800px; width: 100%; margin: auto;}
.piclab .page-heading{display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 27px;}
.piclab .eyebrow,.piclab .tiny-label{font-size: 9px; letter-spacing: 1.5px; font-weight: 650; color: var(--muted);}
.piclab .eyebrow{color: var(--accent); margin: 0 0 12px;}
.piclab .subtitle{font-size: 13px; color: var(--muted); margin: 0;}
.piclab .device-picker{min-width: 190px;}
.piclab .device-picker label{font-size: 9px; letter-spacing: 1.4px; color: var(--muted); display: block; margin-bottom: 7px;}
.piclab .device-picker select{width: 100%; font: 600 16px var(--mono); background: #25292c;}
.piclab .device-picker>span{font-size: 10px; color: var(--muted); display: block; margin-top: 5px;}
.piclab .sessionbar{border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 12px;}
.piclab .sessionbar strong{font-weight: 500;}
.piclab .sessionbar>div{display: flex; gap: 8px; align-items: center;}
.piclab .sessionbar select,.piclab .sessionbar button{font-size: 11px; min-height: 34px;}
.piclab .view{display: none;}
.piclab .view.active{display: block;}
.piclab .lab-grid{display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); gap: 20px;}
.piclab .panel{border: 1px solid var(--line); background: var(--surface); border-radius: 11px; padding: 23px; min-width: 0;}
.piclab .section-heading{display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px;}
.piclab .section-heading.compact{margin-bottom: 12px;}
.piclab .badge{font: 10px var(--mono); padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); white-space: nowrap;}
.piclab .badge.good{color: var(--green); border-color: #3c6450;}
.piclab .badge.warn{color: var(--accent); border-color: #685096;}
.piclab .stack{display: flex; flex-direction: column; gap: 20px;}
.piclab .legend{display: flex; flex-wrap: wrap; gap: 7px 13px; color: var(--muted); font-size: 9px;}
.piclab .legend i{display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; background: var(--muted);}
.piclab .legend i.H{background: var(--green);}
.piclab .legend i.L{background: var(--blue);}
.piclab .legend i.A{background: var(--accent);}
.piclab .legend i.X{background: var(--red);}
.piclab .legend i.R{background: #8480b6;}
.piclab .chip-board{margin: 20px -8px 13px; padding: 22px 8px; background: radial-gradient(#343a3e 1px,transparent 1px); background-size: 16px 16px; border: 1px solid #2c3236; border-radius: 8px;}
.piclab .chip-grid{display: grid; grid-template-columns: minmax(0,1fr) 106px minmax(0,1fr); gap: 0 5px; max-width: 580px; margin: auto; align-items: stretch;}
.piclab .silicon{grid-column: 2; grid-row: 1/span var(--rows); background: linear-gradient(100deg,#242a2e,#101314); border: 1px solid #455058; border-radius: 12px 12px 7px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-shadow: 5px 8px 15px #0008; margin: 0 5px;}
.piclab .silicon:before{content: ''; position: absolute; top: -1px; left: calc(50% - 13px); width: 26px; height: 12px; border: 1px solid #455058; border-top: none; border-radius: 0 0 20px 20px; background: #14191c;}
.piclab .silicon b{writing-mode: vertical-rl; transform: rotate(180deg); font: 600 19px var(--mono); letter-spacing: 2px; color: #d2d8dc;}
.piclab .silicon small{writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 14px; top: 34px; color: #65717a; font: 9px var(--mono);}
.piclab .silicon:after{content: '●'; position: absolute; top: 13px; left: 10px; color: #56616a; font-size: 9px;}
.piclab .pin{min-width: 0; height: 30px; min-height: 30px; padding: 2px 4px; background: none; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; gap: 5px; font: 11px var(--mono); position: relative; color: #bcc6ce;}
.piclab .pin.left{grid-column: 1; justify-content: flex-end;}
.piclab .pin.right{grid-column: 3; justify-content: flex-start; flex-direction: row-reverse;}
.piclab .pin span.pin-name{max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.piclab .pin .pin-number{min-width: 16px; font-size: 9px; color: #82919b;}
.piclab .pin .pin-lead{width: 12px; min-width: 12px; height: 5px; background: #64717b; border-radius: 1px;}
.piclab .pin.left .pin-number{order: 1;}
.piclab .pin.left .pin-lead{order: 2;}
.piclab .pin.right .pin-number{order: 1;}
.piclab .pin.right .pin-lead{order: 2;}
.piclab .pin.state-H .pin-lead{background: var(--green);}
.piclab .pin.state-A .pin-lead{background: var(--accent);}
.piclab .pin.state-L .pin-lead{background: var(--blue);}
.piclab .pin.state-X .pin-lead{background: var(--red);}
.piclab .pin.state-R .pin-lead{background: #8480b6;}
.piclab .pin.selected{background: #23113c; border-color: #7951af; color: #ddfaff;}
.piclab .pin.connected .pin-name:before{content: '● '; font-size: 7px; color: var(--accent);}
.piclab .micro-note{font-size: 10px; color: var(--muted); line-height: 1.7; margin: 10px 0 0;}
.piclab .inspector{border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 12px 14px; background: #202427; border-radius: 6px; margin-top: 14px;}
.piclab .inspector-top{display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.piclab .inspector h3{margin: 0; font: 600 14px var(--mono);}
.piclab .inspector p{font-size: 11px; color: var(--muted); margin: 6px 0;}
.piclab .inspector .button-row button{font-size: 10px; min-height: 31px; padding: 5px 10px;}
.piclab .wiring-header{margin-top: 24px; display: flex; justify-content: space-between; align-items: center;}
.piclab .wiring-header h3{margin: 0;}
.piclab .add-component{display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) auto; gap: 8px; margin: 12px 0 15px; align-items: end;}
.piclab label{font-size: 11px; color: var(--muted);}
.piclab .add-component label select{display: block; width: 100%; font-size: 11px; margin-top: 5px; padding-left: 8px;}
.piclab .add-component button{font-size: 11px;}
.piclab .connection{border: 1px solid var(--line); border-radius: 7px; padding: 12px; margin-top: 9px; background: #171a1c;}
.piclab .connection-top{display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.piclab .connection-name{font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.piclab .connection-pin{color: var(--accent); font: 11px var(--mono); padding: 2px 5px; background: #201233; border-radius: 3px;}
.piclab .connection .remove{min-height: 25px; width: 25px; padding: 1px; font-size: 15px; border: none; background: transparent; color: var(--muted);}
.piclab .component-controls{margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px;}
.piclab .component-controls input[type=range]{min-width: 80px; flex: 1;}
.piclab .component-controls input[type=number]{width: 88px; font-size: 11px; min-height: 32px;}
.piclab .component-controls select,.piclab .component-controls button{font-size: 10px; min-height: 32px;}
.piclab .component-controls output{font: 12px var(--mono); color: var(--accent); min-width: 58px;}
.piclab .led-bulb{width: 13px; height: 13px; border-radius: 50%; background: #514631; border: 1px solid #8c774a; display: inline-block;}
.piclab .led-bulb.on{background: #fddc8f; box-shadow: 0 0 15px #f5ca6f99;}
.piclab .adc-path{display: flex; gap: 5px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;}
.piclab .path-node{flex: 1; min-width: 62px; background: var(--surface2); padding: 8px 7px; border-radius: 5px;}
.piclab .path-node small{font-size: 8px; color: var(--muted); display: block; letter-spacing: 1px;}
.piclab .path-node b{font: 12px var(--mono); color: #d4dbe0;}
.piclab .path-arrow{font-size: 11px; color: #59646d;}
.piclab .result-top{display: flex; align-items: end; justify-content: space-between; gap: 10px;}
.piclab .result-value{font: 500 clamp(42px,5vw,68px)/1.1 var(--mono); letter-spacing: -4px;}
.piclab .result-value small{font: 12px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 10px;}
.piclab .result-voltage{text-align: right; color: var(--accent); font: 16px var(--mono);}
.piclab .result-voltage small{display: block; color: var(--muted); font: 9px var(--sans); margin: 7px 0;}
.piclab .result-binary{font: 13px var(--mono); color: var(--green); letter-spacing: 1.5px; margin: 10px 0;}
.piclab .result-binary span{color: var(--muted); font-size: 11px; letter-spacing: 0; margin-left: 15px;}
.piclab .result-bytes{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0;}
.piclab .result-bytes div{background: #111518; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px;}
.piclab .result-bytes small{font-size: 8px; color: var(--muted); letter-spacing: 1px; display: block;}
.piclab .result-bytes code{font: 13px var(--mono); letter-spacing: 1px;}
.piclab .result-bytes b{font: 11px var(--mono); color: var(--accent); float: right;}
.piclab .chart{margin-top: 16px; border: 1px solid var(--line); background: #121719; border-radius: 6px; padding: 8px 6px 2px;}
.piclab .chart svg{display: block; width: 100%; height: auto;}
.piclab .chart text{font: 9px var(--mono); fill: #83919c;}
.piclab .chart .gridline{stroke: #2b343a; stroke-width: 1;}
.piclab .convert-row{display: flex; gap: 8px; margin: 18px 0;}
.piclab .convert-row .primary{flex: 1;}
.piclab .stepper{border-top: 1px solid var(--line); padding-top: 17px;}
.piclab .stepper h3{margin: 0; font-size: 12px;}
.piclab .stepper .section-heading span{font: 10px var(--mono); color: var(--accent);}
.piclab .step-track{display: grid; grid-template-columns: repeat(9,1fr); gap: 5px; margin-bottom: 10px;}
.piclab .step-track i{height: 4px; background: #343d43; border-radius: 4px;}
.piclab .step-track i.done{background: var(--green);}
.piclab .step-track i.now{background: var(--accent);}
.piclab .step-current{font-size: 11px; min-height: 35px; color: #b9c5cd;}
.piclab .button-row{display: flex; gap: 7px; flex-wrap: wrap; align-items: center;}
.piclab .button-row button{font-size: 11px; padding: 6px 10px; min-height: 34px;}
.piclab .diagnostic{border-left: 2px solid var(--accent); padding: 9px 12px; margin-top: 10px; background: #211d2c; border-radius: 0 5px 5px 0;}
.piclab .diagnostic.error{border-color: var(--red); background: #2b2122;}
.piclab .diagnostic.good{border-color: var(--green); background: #1e2b24;}
.piclab .diagnostic strong{font-size: 11px; display: block; color: var(--accent);}
.piclab .diagnostic.error strong{color: var(--red);}
.piclab .diagnostic.good strong{color: var(--green);}
.piclab .diagnostic p{font-size: 10px; margin: 5px 0; color: #bac4cb;}
.piclab .diagnostic details{font-size: 10px; color: var(--muted);}
.piclab summary{cursor: pointer; min-height: 25px;}
.piclab .bottom-grid{display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 20px; margin-top: 20px;}
.piclab .register{border: 1px solid var(--line); padding: 18px; border-radius: 8px; background: #1a1f22; min-width: 0;}
.piclab .register-top{display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px;}
.piclab .register-name{font: 600 15px var(--mono);}
.piclab .register-top small{font: 10px var(--mono); color: var(--muted);}
.piclab .register-numbers{display: flex; flex-wrap: wrap; gap: 8px 15px; font: 11px var(--mono); color: var(--accent); margin: 10px 0;}
.piclab .bits{display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px;}
.piclab .bit{border: 1px solid #3c454c; background: #22292e; min-height: 70px; padding: 5px 1px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; border-radius: 5px;}
.piclab .bit small{font: 9px var(--mono); color: var(--muted);}
.piclab .bit b{font: 600 21px var(--mono); color: #b9c6d0;}
.piclab .bit em{font: 8px var(--mono); font-style: normal; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
.piclab .bit.on{border-color: #7552b2; background: #2c1647;}
.piclab .bit.on b,.piclab .bit.on em{color: #adffff;}
.piclab .bit.locked{background: #171b1e; border-style: dashed; color: #58646c; opacity: .7;}
.piclab .bit.unknown b{color: var(--blue);}
.piclab .register-edit{display: flex; gap: 7px; margin: 12px 0;}
.piclab .register-edit input{min-width: 0; width: 100%; flex: 1; font: 12px var(--mono); background: #101618;}
.piclab .register-edit button{font-size: 11px; min-height: 36px;}
.piclab .register-explanation{font-size: 10px; color: var(--muted); line-height: 1.65; margin: 0;}
.piclab .reset-pattern{font: 9px var(--mono); color: #8c98a1; margin-top: 9px; display: block;}
.piclab .params-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.piclab .params-grid label{display: flex; flex-direction: column; gap: 4px;}
.piclab .params-grid input,.piclab .params-grid select{width: 100%; font: 12px var(--mono);}
.piclab .params-grid .wide{grid-column: 1/-1;}
.piclab .panel>details{margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 11px; color: var(--muted);}
.piclab .profile{display: grid; gap: 8px; margin: 8px 0;}
.piclab .profile label{display: flex; gap: 8px; align-items: center;}
.piclab .profile input[type=checkbox]{accent-color: var(--accent); width: 16px; height: 16px;}
.piclab .register-toolbar{display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 20px;}
.piclab .tabs{display: flex; flex-wrap: wrap; gap: 6px;}
.piclab .tabs button{font-size: 11px; min-height: 35px;}
.piclab .tabs .active{color: var(--accent); border-color: #8a6648; background: #32271e;}
.piclab .search-label input{display: block; margin-top: 4px; max-width: 230px;}
.piclab .callout{font-size: 12px; line-height: 1.8; color: #b3bfc8; background: #1d252b; border: 1px solid #334451; border-radius: 7px; padding: 15px 18px; margin: 0 0 18px;}
.piclab .register-grid{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;}
.piclab .learning-intro{margin-bottom: 20px;}
.piclab .learning-intro h2{font-size: 28px; margin: 10px 0;}
.piclab .learning-intro p{max-width: 710px; color: var(--muted); font-size: 13px;}
.piclab .binary-lesson{display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px;}
.piclab .binary-lesson b{font: 22px var(--mono); color: var(--accent); display: block;}
.piclab .binary-lesson small{color: var(--muted); font-size: 10px;}
.piclab .learning-grid{display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 20px;}
.piclab .exercise-card{display: block; width: 100%; text-align: left; margin-bottom: 9px; padding: 15px; background: var(--surface);}
.piclab .exercise-card small{display: block; color: var(--muted); font-size: 9px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px;}
.piclab .exercise-card strong{font-size: 12px;}
.piclab .exercise-card.active{border-color: #896145; background: #30261e;}
.piclab .exercise-workspace{align-self: start;}
.piclab .exercise-workspace .register{margin-bottom: 12px;}
.piclab .exercise-workspace p{color: #bcc7cf; font-size: 12px;}
.piclab .exercise-workspace details{font-size: 12px; color: var(--muted); margin: 15px 0;}
.piclab .exercise-workspace code{color: var(--accent); font: 11px var(--mono); overflow-wrap: anywhere;}
.piclab .success{color: var(--green) !important;}
.piclab .error-text{color: var(--red) !important;}
.piclab .code-editor{display: block; width: 100%; min-height: 680px; resize: vertical; background: #101619; color: #c8dece; padding: 22px; border: 1px solid var(--line); border-radius: 7px; font: 12px/1.9 var(--mono); tab-size: 4;}
.piclab .docs-grid{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px;}
.piclab .docs-grid p,.piclab .docs-grid li{color: #b4c0c9; font-size: 12px;}
.piclab .docs-grid li{margin-bottom: 10px;}
.piclab .docs-grid ul{padding-left: 20px;}
.piclab .docs-grid h3{margin-top: 22px;}
.piclab .docs-grid .full{grid-column: 1/-1;}
.piclab table{width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 15px;}
.piclab td,.piclab th{padding: 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top;}
.piclab th{color: var(--muted); font-weight: 500;}
.piclab .console-panel{margin-top: 24px; padding: 15px 20px;}
.piclab .console-panel h2{font-size: 12px; letter-spacing: 0;}
.piclab .console-dot{width: 6px; height: 6px; background: var(--green); display: inline-block; border-radius: 50%; margin-right: 7px;}
.piclab .console{max-height: 155px; overflow: auto; font: 10px/1.9 var(--mono); color: #a4b4c0;}
.piclab .console-entry{display: flex; gap: 13px;}
.piclab .console-entry time{color: #576d7b; min-width: 72px;}
.piclab .console-entry.error{color: var(--red);}
.piclab .console-entry.adc{color: var(--green);}
.piclab .console-entry.warning{color: var(--accent);}
.piclab .console-entry span{overflow-wrap: anywhere;}
.piclab .console-panel .quiet{font-size: 10px; min-height: 28px;}
.piclab footer{display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 10px; color: #8e9ca6; margin-top: 20px;}
.piclab footer span{color: #647580;}
.piclab footer a{color: #a4afb7; text-decoration: none;}
.piclab .empty{padding: 20px; text-align: center; color: var(--muted); font-size: 12px;}
.piclab #toast{position: fixed; bottom: 24px; right: 24px; max-width: min(450px,90vw); z-index: 10; background: #2e3d34; color: #dbefdf; padding: 14px 20px; border: 1px solid #63846a; border-radius: 8px; box-shadow: 0 10px 30px #0008; font-size: 12px;}
.piclab .sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);}
.piclab input[type=range]{accent-color: var(--accent);}
.piclab .bit-help{margin-top: 10px; padding: 10px; border: 1px solid #5b4b39; border-radius: 5px; font-size: 11px; color: #e3c7a8;}
.piclab .scroll-table{overflow-x: auto;}
.piclab details code{white-space: pre-wrap;}
.piclab button[aria-pressed=true]{background: #3b3124; border-color: #9361da; color: var(--accent);}
@media (min-width:1600px){.piclab .lab-grid{grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);}
.piclab .chip-board{padding: 28px 25px;}
.piclab .pin{height: 32px;}}
@media (max-width:1150px){.piclab .app-shell{grid-template-columns: 145px minmax(0,1fr);}
.piclab main{padding: 25px 20px;}
.piclab .panel{padding: 17px;}
.piclab .rail{padding: 25px 8px;}
.piclab .rail button{font-size: 11px; padding: 10px 6px; gap: 8px;}
.piclab .chip-grid{grid-template-columns: minmax(0,1fr) 86px minmax(0,1fr);}
.piclab .pin{font-size: 9px; gap: 3px;}
.piclab .pin .pin-lead{width: 8px; min-width: 8px;}
.piclab .bottom-grid{grid-template-columns: 1fr;}
.piclab .lab-grid{gap: 15px;}
.piclab .add-component{grid-template-columns: 1fr 1fr;}
.piclab .add-component button{grid-column: 1/-1;}
.piclab .learning-grid{grid-template-columns: 240px minmax(0,1fr);}}
@media (max-width:900px){.piclab .app-shell{display: block;}
.piclab .rail{border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; padding: 8px 15px; gap: 8px; overflow-x: auto;}
.piclab .rail button{white-space: nowrap; min-height: 40px; padding: 8px 12px; flex-shrink: 0;}
.piclab .rail-foot{display: none;}
.piclab .lab-grid{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
.piclab .page-heading{margin-top: 6px;}
.piclab .header-actions .offline{display: none;}
.piclab .register-grid{grid-template-columns: 1fr;}
.piclab .docs-grid{grid-template-columns: 1fr;}
.piclab .chip-grid{grid-template-columns: minmax(0,1fr) 85px minmax(0,1fr);}
.piclab .learning-grid{grid-template-columns: 220px minmax(0,1fr);}}
@media (max-width:720px){.piclab .topbar{height: 74px; padding: 0 17px;}
.piclab .brand{font-size: 18px;}
.piclab .brand-mark{width: 34px; height: 34px;}
.piclab .brand small{font-size: 7px; letter-spacing: 1.1px;}
.piclab .header-actions{gap: 5px;}
.piclab .header-actions button{padding: 7px 9px; font-size: 10px; min-height: 34px;}
.piclab main{padding: 23px 16px;}
.piclab .page-heading{align-items: flex-start; flex-direction: column; gap: 17px;}
.piclab .page-heading h1{font-size: 32px;}
.piclab .device-picker{display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; width: 100%;}
.piclab .device-picker label{margin: 0; font-size: 8px;}
.piclab .device-picker>span{grid-column: 2; margin: 0;}
.piclab .device-picker select{font-size: 14px; min-height: 40px;}
.piclab .sessionbar{align-items: flex-start; flex-direction: column;}
.piclab .sessionbar>div{width: 100%; justify-content: space-between;}
.piclab .sessionbar select{min-width: 0; max-width: 65%; font-size: 10px;}
.piclab .lab-grid{grid-template-columns: 1fr;}
.piclab .chip-grid{grid-template-columns: minmax(0,1fr) 110px minmax(0,1fr); max-width: 500px;}
.piclab .pin{font-size: 11px; height: 30px;}
.piclab .panel{padding: 18px;}
.piclab .add-component{grid-template-columns: 1.25fr 1fr auto;}
.piclab .add-component button{grid-column: auto; font-size: 10px; padding: 8px;}
.piclab .legend{font-size: 8px;}
.piclab .bottom-grid{margin-top: 15px; gap: 15px;}
.piclab .stack{gap: 15px;}
.piclab .section-heading h2{font-size: 17px;}
.piclab .register-toolbar{flex-direction: column; align-items: stretch; gap: 12px;}
.piclab .search-label input{max-width: none; width: 100%;}
.piclab .register{padding: 12px;}
.piclab .bits{gap: 3px;}
.piclab .bit{min-height: 65px;}
.piclab .bit em{font-size: 7px;}
.piclab .register-top{align-items: flex-start;}
.piclab .register-top small{font-size: 8px; text-align: right;}
.piclab .register-numbers{font-size: 10px; gap: 7px 12px;}
.piclab .learning-grid{grid-template-columns: 1fr;}
.piclab .exercise-card{padding: 11px;}
.piclab .learning-intro h2{font-size: 24px;}
.piclab .binary-lesson{gap: 10px;}
.piclab .binary-lesson b{font-size: 18px;}
.piclab .code-editor{padding: 12px; font-size: 10px; min-height: 600px;}
.piclab .view>.panel>.section-heading{flex-wrap: wrap;}
.piclab .result-value{font-size: 60px;}
.piclab .console-entry{gap: 8px;}
.piclab footer{gap: 7px;}
.piclab .rail button{font-size: 10px; padding: 7px 10px;}
.piclab .rail button span{font-size: 17px;}}
@media (prefers-reduced-motion:reduce){.piclab *{transition: none !important; scroll-behavior: auto !important;}}
@media (max-width:380px){.piclab main{padding: 20px 10px;}
.piclab .panel{padding: 13px;}
.piclab .brand small{display: none;}
.piclab .brand-mark{display: none;}
.piclab .chip-grid{grid-template-columns: minmax(0,1fr) 85px minmax(0,1fr);}
.piclab .pin{font-size: 9px;}
.piclab .add-component{grid-template-columns: 1fr 1fr;}
.piclab .add-component button{grid-column: 1/-1;}
.piclab .bit em{font-size: 6px;}
.piclab .bit b{font-size: 18px;}
.piclab .section-heading>select{max-width: 120px;}
.piclab .topbar{padding: 0 12px;}
.piclab .sessionbar>div{gap: 4px;}
.piclab .sessionbar button{padding: 6px; font-size: 9px;}}
.piclab .gpio-details{margin-top: 14px; font-size: 11px; color: var(--muted);}
.piclab .gpio-details table{font-size: 9px;}
.piclab .gpio-details td,.piclab .gpio-details th{padding: 7px 5px; white-space: nowrap;}
.piclab .gpio-details code{font: 9px var(--mono);}
.piclab .mode-switch{display: flex; gap: 8px; margin-bottom: 26px; padding: 5px; background: #151a1d; border: 1px solid var(--line); border-radius: 10px; max-width: 650px;}
.piclab .mode-switch button{flex: 1; text-align: left; background: transparent; border-color: transparent; padding: 12px 16px;}
.piclab .mode-switch button b{display: block; font-size: 13px;}
.piclab .mode-switch button span{display: block; font-size: 10px; color: var(--muted); margin-top: 3px;}
.piclab .mode-switch button.active{background: #24133b; border-color: #8653be; color: var(--accent);}
body.beginner-mode .piclab .rail,body.beginner-mode .piclab main>.sessionbar,body.beginner-mode .piclab main>.view,body.beginner-mode .piclab main>.console-panel{display: none !important;}
body.beginner-mode .piclab .app-shell{grid-template-columns: minmax(0,1fr);}
body.beginner-mode .piclab main{max-width: 1320px;}
.piclab .beginner-view[hidden]{display: none;}
.piclab .guide-intro{display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px;}
.piclab .guide-intro p{color: var(--muted); font-size: 13px; margin: 0; max-width: 700px;}
.piclab .guide-intro button{font-size: 10px;}
.piclab .project-picker{display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 30px;}
.piclab .project-card{display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--surface); padding: 17px; min-width: 0; min-height: 163px;}
.piclab .project-card.active{background: #201336; border-color: #8855cd; box-shadow: inset 0 2px 0 var(--accent);}
.piclab .project-card .project-icon{font-size: 26px; line-height: 1.3; color: var(--accent);}
.piclab .project-card small{color: var(--muted); font-size: 9px; letter-spacing: .7px; text-transform: uppercase;}
.piclab .project-card b{font-size: 15px; line-height: 1.4;}
.piclab .project-card>span:last-child{font-size: 11px; color: var(--muted);}
.piclab .guide-project-heading{display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px;}
.piclab .guide-project-heading h2{font-size: 27px; margin: 7px 0;}
.piclab .guide-project-heading p{color: var(--muted); max-width: 720px; font-size: 13px; margin: 0;}
.piclab .guide-project-heading button{font-size: 11px; white-space: nowrap;}
.piclab .guide-step-nav{display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 10px; padding: 6px; gap: 7px; background: #120b20; margin: 24px 0 16px;}
.piclab .guide-step-nav button{display: flex; gap: 10px; align-items: center; text-align: left; border-color: transparent; background: transparent; min-height: 50px; font-size: 12px; color: var(--muted);}
.piclab .guide-step-nav button b{display: grid; place-items: center; background: #2c353b; min-width: 25px; height: 25px; border-radius: 50%; font: 11px var(--mono);}
.piclab .guide-step-nav button.active{background: #252e33; color: var(--text); border-color: #52616b;}
.piclab .guide-step-nav button.active b{background: var(--accent); color: #071619;}
.piclab .guide-pane{padding: 27px;}
.piclab .guide-pane[hidden]{display: none;}
.piclab .guide-pane h2{font-size: 23px; margin-bottom: 12px;}
.piclab .guide-lead{font-size: 13px; color: var(--muted); max-width: 800px; line-height: 1.8;}
.piclab .guide-split{display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 25px;}
.piclab .guide-wiring{display: block; width: 100%; height: auto; margin: 18px 0;}
.piclab .guide-wiring text{font-family: var(--sans);}
.piclab .guide-wire-list{display: grid; gap: 10px;}
.piclab .guide-wire-list>div{border-left: 2px solid #576f7e; background: #1c252b; padding: 12px 15px; border-radius: 0 6px 6px 0;}
.piclab .guide-wire-list b{font-size: 12px; display: block;}
.piclab .guide-wire-list code{display: block; font: 12px var(--mono); color: var(--accent); margin: 4px 0;}
.piclab .guide-wire-list p{font-size: 12px; color: #bec9d0; margin: 0;}
.piclab .guide-checklist{padding: 22px; background: #141c20; border: 1px solid #35444f; border-radius: 8px; align-self: start;}
.piclab .guide-checklist ul{padding-left: 18px; color: #bcc8d0; font-size: 12px;}
.piclab .guide-checklist li{margin: 0 0 13px;}
.piclab .guide-checklist details{font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin: 17px 0;}
.piclab .guide-checklist .primary{width: 100%; font-size: 12px;}
.piclab .guide-reg-grid{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px;}
.piclab .guide-register>p{font-size: 11px; color: #b0c1cb;}
.piclab .guide-register .bit{min-height: 77px;}
.piclab .guide-register .bit.locked{opacity: .42;}
.piclab .guide-register .bit:not(.locked){border-color: #97724e;}
.piclab .guide-concept{background: #2b261f; border: 1px solid #6e543b; border-radius: 7px; padding: 15px 19px; margin: 18px 0;}
.piclab .guide-concept>b{color: var(--accent); font-size: 13px;}
.piclab .guide-concept p{font-size: 12px; color: #cbbfb2; margin: 6px 0 0;}
.piclab .guide-auto{font-size: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 13px 17px; margin: 12px 0; color: #acbbc5;}
.piclab .guide-auto summary{color: #d4dde3;}
.piclab .guide-auto p{margin: 10px 0; line-height: 1.8;}
.piclab .guide-auto table{font-size: 11px;}
.piclab .guide-next-row{margin-top: 24px;}
.piclab .guide-test-layout{display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px;}
.piclab .guide-live{text-align: center; background: #121a1d;}
.piclab .guide-led{width: 96px; height: 96px; border-radius: 50%; background: #2f3029; border: 1px solid #555a48; margin: 8px auto 15px; display: grid; place-items: center;}
.piclab .guide-led span{width: 50px; height: 50px; border-radius: 50%; background: #555541; border: 2px solid #737256;}
.piclab .guide-led.lit{background: #3f3824; border-color: #9a7c3d; box-shadow: 0 0 45px #e9c76c25;}
.piclab .guide-led.lit span{background: #ffe5a4; border-color: #ffe9bf; box-shadow: 0 0 30px #f8ca6cb0;}
.piclab .guide-live h3{font-size: 18px; margin: 0;}
.piclab .guide-live p{font-size: 12px; color: var(--muted); margin: 8px 0;}
.piclab .guide-run-controls{justify-content: center; margin-top: 18px;}
.piclab .guide-run-controls .primary{padding-left: 22px; padding-right: 22px;}
.piclab .guide-status{font-size: 12px; margin: 17px 0; padding: 12px; background: #202a30; border-radius: 6px; color: #d3dee5; min-height: 44px;}
.piclab .guide-interaction{background: #1e262b; display: flex; flex-direction: column; align-items: stretch; gap: 14px; justify-content: center;}
.piclab .guide-interaction p{font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0;}
.piclab .guide-interaction label{display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12px; color: #d1dbe2;}
.piclab .guide-interaction input[type=range]{width: 100%; margin: 10px 0; min-height: 35px;}
.piclab .guide-interaction output{color: var(--accent); font: 15px var(--mono);}
.piclab .guide-interaction select{margin-left: auto; font-size: 12px;}
.piclab .guide-interaction input[type=number]{width: 75px;}
.piclab .guide-push{padding: 18px; min-height: 70px; border-radius: 12px; font-size: 14px;}
.piclab .guide-push[aria-pressed=true]{background: #393121; border-color: var(--accent); color: var(--accent);}
.piclab .guide-signals{display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 15px 0;}
.piclab .guide-signals span{font-size: 11px; background: #27333a; border: 1px solid #425763; border-radius: 5px; padding: 7px 10px; color: #a5b8c5;}
.piclab .guide-signals b{color: var(--green); margin-left: 7px; font: 14px var(--mono);}
.piclab .guide-distance-result{font: 36px var(--mono); color: var(--accent); margin-top: 15px;}
.piclab .guide-distance-result small{font: 13px var(--mono); color: var(--muted);}
.piclab .guide-number{font: 60px var(--mono); color: var(--accent); margin: 35px 0;}
.piclab .guide-number small{font: 15px var(--mono); color: var(--muted); margin-left: 10px;}
.piclab .guide-arduino{border: 1px solid var(--line); border-radius: 7px; padding: 15px; margin-bottom: 20px;}
.piclab .guide-arduino h3{margin: 0; font-size: 13px;}
.piclab .guide-arduino td{font: 11px var(--mono);}
.piclab .guide-bottom{display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--muted); font-size: 11px; margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--line);}
.piclab .guide-bottom button{font-size: 11px; white-space: nowrap;}
.piclab .timer-tools{display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin: 15px 0;}
.piclab .timer-tools small{color: var(--muted);}
@media (max-width:950px){.piclab .project-picker{grid-template-columns: repeat(2,minmax(0,1fr));}
.piclab .project-card{min-height: 135px;}
.piclab .guide-split{grid-template-columns: 1fr;}
.piclab .guide-step-nav button{font-size: 10px; padding: 7px; gap: 7px;}
.piclab .guide-pane{padding: 20px;}
.piclab .guide-test-layout{grid-template-columns: 1fr 1fr;}
.piclab .guide-reg-grid{grid-template-columns: 1fr;}}
@media (max-width:600px){.piclab .mode-switch button{padding: 10px;}
.piclab .mode-switch button b{font-size: 11px;}
.piclab .mode-switch button span{font-size: 9px;}
.piclab .project-picker{gap: 8px; margin-bottom: 20px;}
.piclab .project-card{padding: 13px; min-height: 140px;}
.piclab .project-card b{font-size: 13px;}
.piclab .project-card>span:last-child{font-size: 10px;}
.piclab .project-card small{font-size: 8px;}
.piclab .guide-project-heading{align-items: flex-start; flex-direction: column; gap: 10px;}
.piclab .guide-project-heading h2{font-size: 23px;}
.piclab .guide-step-nav{gap: 3px; padding: 4px;}
.piclab .guide-step-nav button{flex-direction: column; text-align: center; font-size: 9px; gap: 5px; justify-content: flex-start; padding: 8px 3px;}
.piclab .guide-step-nav button b{height: 23px; min-width: 23px;}
.piclab .guide-test-layout{grid-template-columns: 1fr;}
.piclab .guide-pane{padding: 15px;}
.piclab .guide-pane h2{font-size: 20px;}
.piclab .guide-pane>.section-heading{align-items: flex-start; flex-direction: column;}
.piclab .guide-intro{align-items: flex-start; flex-direction: column;}
.piclab .guide-bottom{align-items: flex-start; flex-direction: column;}
.piclab .guide-auto{padding: 12px;}
.piclab .guide-auto table{font-size: 9px;}
.piclab .guide-auto td,.piclab .guide-auto th{padding: 8px 4px;}
.piclab .guide-checklist{padding: 17px;}
.piclab .guide-register .bit em{font-size: 6px;}
.piclab .guide-register .bit{min-height: 65px;}
.piclab .guide-arduino td{font-size: 9px; padding: 7px 3px;}
.piclab .guide-arduino th{font-size: 10px;}
.piclab .guide-reg-grid .register{padding: 11px;}
.piclab .guide-register .register-edit{flex-wrap: wrap;}
.piclab .guide-register .register-edit input{min-width: 150px;}}
@media (prefers-reduced-motion:reduce){.piclab .guide-led{box-shadow: none;}}
.piclab{--bg:#0d0915;--surface:#130e1f;--surface2:#20162e;--line:#39294e;--text:#eeedf5;--muted:#b3abc2;--accent:#00ffff;--sans:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;position:relative;z-index:1;width:calc(100% - 40px);max-width:1500px;margin:10px auto 35px;border:1px solid rgba(0,255,255,.22);border-radius:20px;box-shadow:0 15px 60px #0005;overflow:clip;isolation:isolate;}
.piclab h1{background:linear-gradient(135deg,#00ffff,#ad89ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.piclab h2,.piclab h3{background:none;-webkit-text-fill-color:currentColor;color:var(--text);}
.piclab .topbar{text-align:left;margin:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:linear-gradient(100deg,#0a0b13,#1b0e2e);border:0;border-bottom:1px solid var(--line);}
.piclab footer{padding:15px 0;background:none;border:0;text-align:left;box-shadow:none;}
.piclab .guide-checklist ul{padding-left:18px;}
.piclab .panel{box-shadow:0 5px 20px #0002;}
.piclab .brand b{border-color:#69469d;}
.piclab .mode-switch button.active{background:linear-gradient(135deg,#00ffff17,#7000ff29);border-color:#00ffff70;}
.piclab .project-card.active{background:linear-gradient(135deg,#00ffff0c,#7000ff22);border-color:#00ffff80;}
.piclab .bit.on{background:linear-gradient(145deg,#00ffff14,#7000ff29);border-color:#00ffff70;}
.piclab .pin.selected{background:#00ffff12;border-color:#00ffff60;}
.piclab input[type=range]{accent-color:var(--accent);}
.piclab [hidden]{display:none!important;}
.piclab #toast{z-index:300;}
@media(max-width:600px){.piclab{width:calc(100% - 20px);border-radius:14px;margin-top:0;}.piclab .topbar{padding-inline:12px;}.piclab .guide-wire-list code{overflow-wrap:anywhere;}}