/* BB-01 / long-haul analog console */
header{height:108px;padding-right:175px;position:relative}
header .status{margin-right:20px}
header:after{right:13px}
.deck-vents{position:absolute;right:35px;top:25px;width:111px;height:57px;border:1px solid #262d20;border-radius:3px;background:repeating-linear-gradient(0deg,#192317 0 3px,#545844 3px 6px);box-shadow:inset 0 2px 4px #000b,0 1px #92927755;transform:skewY(-1deg);opacity:.9}
.deck-vents:after{content:'PASSIVE COOLING';position:absolute;bottom:-13px;left:0;font:5px monospace;letter-spacing:1.4px;color:#b0aa88}
.brand{padding:8px 16px 8px 0}.brand>span:not(.brandmark){letter-spacing:1.8px;font-size:7px;line-height:1.8}.brand b{font-size:20px;letter-spacing:-1.5px}
.patchbar{padding-top:25px;padding-bottom:28px}.patchbar>div:first-child{padding-left:13px;border-left:3px solid #b88b45;position:relative}.patchbar>div:first-child:before{content:'01';position:absolute;left:-22px;top:0;font:6px monospace;color:#8f9575;transform:rotate(-90deg)}
.patchbar h1{font-size:27px;letter-spacing:-1.7px}.patchbar p{font-size:9px;letter-spacing:.1px}
.console-telemetry{display:flex;align-items:center;gap:23px;border:1px solid #252e20;border-radius:3px;background:linear-gradient(90deg,#303b2a,#3c422f);box-shadow:inset 0 2px 4px #0006,0 1px #9e9b6f44;margin:0 0 17px;padding:10px 13px;font:7px monospace;letter-spacing:1px;color:#9eae84;position:relative}
.console-telemetry>span{display:flex;gap:9px;align-items:center}.console-telemetry b{color:#c5c998;font-weight:400}.console-telemetry .unit-id{color:#d2bb81;letter-spacing:1.7px}.console-telemetry .telemetry-spacer{flex:1}.console-telemetry .tape-indicator{gap:4px}.tape-indicator em{width:5px;height:8px;display:block;background:#9eaa6e;box-shadow:0 0 4px #bcc38433}.tape-indicator em:nth-child(3n){background:#bd9959}.tape-indicator em:last-child{background:#44553b;box-shadow:none}
.visual{border-width:10px;border-style:solid;border-color:#202c1d #172518 #111f14 #293222;border-radius:17px;box-shadow:0 0 0 1px #5f6849,0 1px 0 2px #9b9b6b33,inset 0 0 0 1px #0009;position:relative}
.visualtop{background:linear-gradient(#17291b,#132719);padding-top:10px;height:66px}.visualtop b{text-transform:uppercase;font:10px monospace;letter-spacing:.7px}.visualtop small{letter-spacing:1.5px;font-size:6px}.canvaswrap{border-radius:10px 10px 5px 5px;box-shadow:inset 0 0 40px #0006;background:radial-gradient(ellipse at 48% 42%,#294329,#102418 78%)}.visual:after{border-radius:7px;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 3px),radial-gradient(ellipse at 35% 15%,#d7e7a90a,transparent 45%),linear-gradient(128deg,#fcf8c70a,transparent 34%);box-shadow:inset 0 0 40px #0009,inset 0 1px 2px #d8dbaf22}
.crt-stencil{display:flex;justify-content:space-between;padding:7px 14px 8px;background:#172719;font:5px monospace;letter-spacing:2px;color:#6e8960;border-top:1px solid #394c2d55}.crt-stencil span:first-child{color:#a7b57a}.crt-stencil span:last-child{letter-spacing:1px}
.parameters>.sectiontitle{padding-bottom:12px;border-bottom:1px solid #65764c55;position:relative}.parameters>.sectiontitle:before{content:'B';display:grid;place-items:center;width:14px;height:14px;border:1px solid #84927088;color:#bdc09a;font:8px monospace;margin-right:2px}.generators>.sectiontitle:before{content:'A';display:grid;place-items:center;width:14px;height:14px;border:1px solid #84927088;color:#bdc09a;font:8px monospace;margin-right:2px}.generators>.sectiontitle{justify-content:start;gap:8px}.generators>.sectiontitle>span{margin-left:auto}.parameters>.sectiontitle{justify-content:start;gap:7px}.parameters>.sectiontitle button{margin-left:auto}.paramtitle{margin-top:20px}
.param input{background:repeating-linear-gradient(90deg,#99ae7144 0 1px,transparent 1px 10px),#162918;height:5px}.param label{text-transform:uppercase;font-size:8px;letter-spacing:1px}.param output{font-size:10px;letter-spacing:.1px}.paramnote{border-top:1px solid #65764c44;padding-top:13px;font-size:7px;line-height:1.9}
.bus{border-top:1px solid #6b785044;margin-top:15px;padding-top:14px}.busline{height:19px}.bus small{font-size:6px;letter-spacing:.3px}
.macrointro small{border:1px solid #84927066;padding:4px 6px;color:#b6c094}.macrointro h2{margin-top:15px}.macrointro p{font-size:6px;letter-spacing:1px;text-transform:uppercase}.macros{padding-top:9px;padding-bottom:8px}.macros:after{content:'CALIBRATED / ±0.05%';position:absolute;right:10px;bottom:5px;font:5px monospace;letter-spacing:1px;color:#83996a}.output{padding-bottom:26px}.output .sectiontitle:before{content:'C';border:1px solid #82936b;color:#b9c68e;display:grid;place-items:center;width:12px;height:12px;font:7px monospace}.output .sectiontitle{gap:6px;justify-content:start}.output .sectiontitle span{margin-left:auto}.meters{height:30px;padding:7px 5px;gap:5px}.meters div{height:4px}.outputrow{margin-top:13px}
.tape-bank{display:flex;align-items:center;gap:13px;padding:13px 15px;background:#242f20;border:1px solid #172417;border-radius:3px;box-shadow:inset 0 2px 5px #0007,0 1px #93956633;margin-top:18px}.tape-reels{display:flex;gap:30px;background:#111e14;border:4px solid #39452b;border-radius:4px;padding:6px 12px;position:relative;box-shadow:inset 0 2px 6px #000b;flex-shrink:0}.tape-reels:after{content:'';position:absolute;height:1px;left:27px;right:27px;top:50%;background:#828b5c;z-index:0}.reel{width:24px;height:24px;border:3px solid #84916b;border-radius:50%;background:repeating-conic-gradient(#a8b08a 0 20deg,#24331f 20deg 120deg);box-shadow:0 0 0 1px #111e14;position:relative;z-index:1}.reel:after{content:'';position:absolute;inset:5px;border-radius:50%;background:#152719;border:1px solid #a5ae80}.tape-label{font:7px/1.9 monospace;letter-spacing:1px;color:#9da985}.tape-label b{font-size:9px;letter-spacing:1.2px;color:#cdc8a3;font-weight:400}.tape-label small{font-size:6px;letter-spacing:1px;color:#748e63}.tape-label-right{margin-left:auto;font:6px/2 monospace;color:#98a880;text-align:right;letter-spacing:1px}.tape-label-right b{color:#cfb87f;font-weight:400}.tape-hazard{width:18px;height:48px;background:repeating-linear-gradient(135deg,#a28c51 0 5px,#28351f 5px 10px);opacity:.65;margin-left:8px}.presets{padding-top:22px}.presets>.sectiontitle{font-size:8px}.presets:after{top:24px;font-size:5px}#presets{margin-top:12px}.preset .art{font-family:monospace}.preset .number{border:1px solid #4c553a66;padding:3px;font-size:7px;align-self:end}.preset.active .number{border-color:#dfbc7a66}.preset small{font-size:6px;letter-spacing:.6px}
footer{margin-top:18px;padding:20px 0 23px;font-size:6px;letter-spacing:1px}footer span:last-child{padding-right:1px}#advanced>.sectiontitle{border-bottom:1px solid #7b8f5b44;padding-bottom:12px}.route{position:relative}.route:before{content:'↳';font:12px monospace;color:#a8ba80;position:absolute;right:7px;bottom:6px;opacity:.6}
@media(max-width:1150px){header{padding-right:154px}.deck-vents{right:28px;width:100px}.console-telemetry{gap:15px;font-size:6px}.console-telemetry>span{gap:5px}.brand b{font-size:18px}.parameters>.sectiontitle{font-size:7px}.parameters>.sectiontitle:before{width:12px;height:12px}.tape-label-right{font-size:5px}.crt-stencil{font-size:5px;letter-spacing:1px}}
@media(max-width:900px){header{padding-right:130px}.deck-vents{right:22px;width:85px;height:48px;top:28px}.status{display:none}.console-telemetry{gap:11px;padding:10px;font-size:6px}.console-telemetry .unit-id{letter-spacing:1px}.console-telemetry .optional-telemetry{display:none}.parameters>.sectiontitle{grid-column:1/-1}.parameters>.sectiontitle{padding-bottom:9px}.paramtitle{margin:0}.paramnote{display:none}.tape-reels{gap:24px;padding:6px 10px}.reel{width:20px;height:20px}.reel:after{inset:4px}.tape-label{font-size:6px}.tape-label b{font-size:8px}.tape-hazard{height:41px}.crt-stencil span:nth-child(2){display:none}}
@media(max-width:680px){header{height:87px;padding-right:16px}.deck-vents{display:none}.brand b{font-size:18px}.brand{padding-right:0}.patchbar h1{font-size:21px}.patchbar>div:first-child{padding-left:9px;border-left-width:2px}.patchbar>div:first-child:before{display:none}.console-telemetry{gap:9px;font-size:5px;padding:9px 8px;margin-bottom:14px;letter-spacing:.5px}.console-telemetry>span{gap:4px}.console-telemetry .telemetry-spacer{display:none}.console-telemetry .tape-indicator{margin-left:auto;gap:3px}.tape-indicator em{width:4px;height:6px}.console-telemetry .unit-id{font-size:5px;letter-spacing:.7px}.console-telemetry .optional-mobile{display:none}.visual{border-width:7px;border-radius:12px}.visualtop{height:64px;padding:12px 10px}.visualtop b{font-size:8px;letter-spacing:.3px}.visualtop small{font-size:5px}.viztabs{gap:7px}.viztabs button{font-size:6px}.crt-stencil{font-size:4px;padding:7px 9px;letter-spacing:1px}.parameters>.sectiontitle{font-size:8px}.parameters>.sectiontitle:before{width:13px;height:13px}.paramtitle{margin:0}.param label{font-size:8px}.output{padding:17px 9px 23px}.output .sectiontitle:before{display:none}.meters{height:25px;padding:5px 4px;gap:4px}.meters div{height:4px}.outputrow{margin:0}.tape-bank{padding:10px 9px;gap:9px;margin-top:15px}.tape-reels{gap:17px;padding:6px 8px;border-width:3px}.reel{width:18px;height:18px;border-width:2px}.reel:after{inset:4px}.tape-reels:after{left:20px;right:20px}.tape-label{font-size:5px;letter-spacing:.5px}.tape-label b{font-size:7px;letter-spacing:.4px}.tape-label small{font-size:5px;letter-spacing:.1px}.tape-label-right{display:none}.tape-hazard{width:10px;height:35px;margin-left:auto}.presets{padding-top:18px}.presets:after{display:none}.presets>.sectiontitle{font-size:7px}.preset small{font-size:5px;letter-spacing:.1px}.preset .number{padding:2px;font-size:6px}footer{font-size:5px;letter-spacing:.4px}.macros:after{font-size:4px;bottom:5px}}