/* IT Notebook / Volume II — native visual language and functioning lab computer */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root{--bg:#02070e;--panel:#0a1728;--panel2:#101f36;--line:rgba(115,177,225,.22);--txt:#edf9ff;--mut:#a4bbd0;--aqua:#5fe8ff;--orange:#ffd28d;--pink:#fc99b0;--shadow:0 22px 55px rgba(0,0,0,.35)}
*{scrollbar-color:#274765 #06111c}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:radial-gradient(ellipse at 83% 0%,rgba(92,66,183,.18),transparent 32%),radial-gradient(ellipse at 0% 0%,rgba(0,198,255,.09),transparent 45%),#02060d;color:var(--txt)}
body::before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 49px,rgba(0,232,255,.017) 50px),repeating-linear-gradient(90deg,transparent 0 49px,rgba(0,232,255,.017) 50px)}
body,button,input,textarea{font-family:'Space Grotesk',system-ui,sans-serif}
.eyebrow,.tinyhead,.brand small,.tag,.termout,.cmd,.termhead,.chapterbadge{font-family:'JetBrains Mono',ui-monospace,monospace}
.shell{max-width:1600px;grid-template-columns:254px minmax(0,1fr)}
.rail{background:linear-gradient(180deg,#081425,#050c17);border-color:rgba(104,173,222,.17);z-index:10}
.brandicon{background:linear-gradient(135deg,#54e8ff,#8265ff);color:#06111d;box-shadow:0 0 28px rgba(60,223,255,.22)}
.brand small,.eyebrow{color:#66efff}
.brand b{font-family:'Orbitron','Space Grotesk',sans-serif;font-size:13px;letter-spacing:-.5px}
.search{background:rgba(12,29,50,.9);border-color:rgba(114,186,226,.24);color:var(--txt)}
.railitem.active{background:linear-gradient(100deg,rgba(24,118,160,.28),rgba(97,73,176,.15));box-shadow:inset 3px 0 #53e5ff;color:white}
.railitem:hover{background:rgba(30,90,122,.23)}
.num,.railitem.active .num{color:#74dfff}
.main{padding:26px clamp(16px,3.2vw,44px) 78px}
.topbar{border-bottom:1px solid rgba(131,190,227,.12);padding-bottom:12px}
.topbar .eyebrow{font-size:10px;letter-spacing:.11em}
.smallbtn,.btn{font-size:12px;background:rgba(18,41,64,.9);border-color:rgba(104,179,226,.28)}
.btn.primary{background:linear-gradient(120deg,#57e4ff,#9b8aff);color:#05121e;border-color:#8ce8ff}
.btn.primary:hover{background:#c5f8ff}
.btn.warn{background:#3f2532;border-color:#98536f}
.btn.ghost{background:rgba(8,19,34,.7)}
.eyebrow,.chapterbadge{letter-spacing:.11em}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif}
h1{font-size:clamp(1.75rem,3.1vw,2.55rem)}
.prim-intro{border:1px solid rgba(95,229,255,.23);border-radius:18px;margin:19px 0 20px;padding:clamp(17px,3vw,31px);background:radial-gradient(circle at 93% 10%,rgba(114,79,255,.16),transparent 35%),linear-gradient(125deg,rgba(15,37,63,.93),rgba(9,20,37,.97));box-shadow:0 15px 40px rgba(0,0,0,.19)}
.prim-intro-header{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.prim-glyph{width:51px;height:51px;border-radius:13px;background:linear-gradient(135deg,rgba(55,200,250,.28),rgba(129,97,255,.27));border:1px solid rgba(115,214,255,.34);display:grid;place-items:center;font-size:25px}
.prim-kicker{color:#68eafa;text-transform:uppercase;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em}
.prim-intro h2{font-family:'Orbitron','Space Grotesk',sans-serif;font-size:clamp(1.12rem,2.9vw,1.75rem);margin:7px 0}
.prim-intro p{font-size:clamp(.85rem,1.4vw,.96rem);color:#c2d5e8;max-width:76ch;line-height:1.68;margin:14px 0}
.prim-route{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.prim-route span{display:inline-flex;align-items:center;padding:8px 12px;border-radius:9px;border:1px solid rgba(123,177,235,.23);background:rgba(9,24,43,.7);font:600 .74rem 'Space Grotesk',sans-serif}
.prim-route strong{color:#72e6ff;margin-right:5px}
.prim-intro-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 3px}
.prim-intro-actions a,.prim-intro-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 15px;border-radius:10px;background:rgba(20,47,71,.92);border:1px solid rgba(103,202,239,.31);color:#eaf8ff;font:700 .79rem 'Space Grotesk',sans-serif;text-decoration:none}
.prim-intro-actions .prim-primary{background:linear-gradient(115deg,#55eaff,#917dff);color:#041321}
.prim-intro-actions a:hover,.prim-intro-actions button:hover{filter:brightness(1.16)}
.prim-disclosure{color:#a2bcd0;font-size:11px;line-height:1.55;margin-top:13px}
.prim-disclosure strong{color:#a7eaff}
.hero{padding:10px 0 17px}
.hero h1{font-size:clamp(1.45rem,2.9vw,2.2rem);margin:8px 0}
.tag{background:rgba(22,43,70,.75);border-color:rgba(104,186,225,.28);color:#c6e5f8}
.tag.green{color:#80eeff;border-color:rgba(92,221,249,.4)}
.tag.orange{color:#ffd9a5}
.bar{background:rgba(110,170,214,.14)}
.bar>div{background:linear-gradient(90deg,#4ee5f8,#8d77ff)}
.tabs{margin:12px 0 10px;flex-wrap:wrap}
.tab{background:rgba(11,27,46,.94);border-color:rgba(109,165,215,.26);color:#b5cadb}
.tab.active{color:#eafcff;background:rgba(51,85,139,.38);border-color:#67dbff}
.card,.labtile{background:linear-gradient(145deg,rgba(14,33,53,.96),rgba(9,19,35,.96));border-color:rgba(107,162,204,.23)}
.stepno{background:rgba(66,145,189,.17);color:#79edff}
.step.done .stepno{background:rgba(48,155,125,.26)}
.cmd{background:rgba(3,12,22,.95);border-color:rgba(113,177,222,.29);color:#9cfff4}
.callout{background:rgba(20,65,87,.45);border-color:#51e8ff}
.prime-device{margin:22px auto 20px;max-width:1130px}
.prime-device-header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 5px 12px;flex-wrap:wrap}
.prime-device-header h2{margin:5px 0;font:700 clamp(1.04rem,2vw,1.38rem) 'Orbitron',sans-serif;color:#e8f6ff}
.prime-device-header small{color:#a4bfd2}
.prime-hardware{border:2px solid #2c3e5b;padding:12px 12px 0;background:linear-gradient(140deg,#24344b,#0a1525 55%,#304663);border-radius:21px 21px 9px 9px;box-shadow:inset 0 1px 0 rgba(236,249,255,.18),0 25px 60px rgba(0,0,0,.5)}
.prime-camera{height:15px;display:flex;justify-content:center;align-items:center;gap:7px}
.prime-camera::before{content:'';width:5px;height:5px;border-radius:50%;background:#183e65;box-shadow:0 0 0 2px #263e56,0 0 10px #44d7ff77}
.prime-camera span{font:700 9px 'JetBrains Mono',monospace;color:#a6b9d0;letter-spacing:.12em}
.prime-screen{background:linear-gradient(135deg,#061527,#080e1f);border:1px solid rgba(139,204,239,.3);min-height:345px;max-height:660px;display:flex;flex-direction:column;overflow:hidden;position:relative;border-radius:7px 7px 2px 2px}
.prime-os-bar{background:rgba(24,43,72,.96);border-bottom:1px solid rgba(114,172,228,.23);padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:9px}
.prime-os-name{display:flex;align-items:center;gap:9px;min-width:0;color:#dcf7ff;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.04em}
.prime-os-dots{display:flex;gap:5px}
.prime-os-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#fa8894}
.prime-os-dots i:nth-child(2){background:#e9bd6a}.prime-os-dots i:nth-child(3){background:#59d3c2}
.prime-appbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:7px 11px;border-bottom:1px solid rgba(121,180,222,.15);background:rgba(4,15,29,.85)}
.prime-appbar button{padding:7px 12px;border:1px solid transparent;background:transparent;color:#b2d0e0;border-radius:7px;font:700 11px 'Space Grotesk',sans-serif}
.prime-appbar button.active{background:rgba(68,158,194,.2);border-color:rgba(105,226,249,.36);color:#8cefff}
.prime-appbar .prime-app-state{margin-left:auto;font:600 10px 'JetBrains Mono',monospace;color:#70e1d0}
.prime-screen-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.prime-screen-body #space{display:block!important;position:relative;top:auto;height:auto;min-height:0;overflow:visible;width:100%;border:0;background:transparent;padding:14px clamp(11px,2.5vw,24px) 18px}
.prime-screen-body .righthead{display:flex}
.prime-screen-body .stage{background:radial-gradient(ellipse at 50% 20%,#203963,#060d1d 78%);border-color:rgba(96,195,230,.34)}
.prime-screen-body #topology{height:clamp(235px,32vw,335px)}
.prime-screen-body .terminal{background:rgba(3,11,22,.95);border-color:rgba(98,192,233,.32)}
.prime-screen-body .termhead{background:rgba(25,45,78,.9)}
.prime-screen-body .termout{color:#9ff9e9}
.prime-screen[data-mode="network"] .terminal{display:none}
.prime-screen[data-mode="console"] .stage,.prime-screen[data-mode="console"] .controls,.prime-screen[data-mode="console"] #nodeInspector{display:none}
.prime-screen[data-mode="console"] .termout{height:310px}
.prime-screen[data-mode="console"] .righthead h2::after{content:" · Command console";color:#7feaff;font-size:12px}
.prime-footbar{padding:8px 12px;border-top:1px solid rgba(113,164,225,.2);background:#08182d;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#91b5c9;font:600 10px 'JetBrains Mono',monospace}
.prime-footbar b{color:#8feaf8}
.prime-base{height:16px;max-width:1165px;margin:0 auto;border-radius:2px 2px 55% 55%;background:linear-gradient(180deg,#405d7a,#1d293e 35%,#152338 90%);border:1px solid rgba(173,203,229,.21);position:relative;box-shadow:0 15px 18px #0008}
.prime-base:after{content:"";position:absolute;left:40%;width:20%;top:1px;height:5px;border-radius:0 0 9px 9px;background:#0b1d31;box-shadow:0 1px 1px #8bc9ed55}
.prime-under{margin:12px 5px;color:#a0b9cb;font:500 11px/1.55 'Space Grotesk',sans-serif}
.prime-under strong{color:#e1faff}
.prim-footer-help{padding:15px;border:1px solid rgba(115,194,228,.18);background:rgba(13,32,52,.82);border-radius:13px;margin-top:13px;color:#b7cee0;line-height:1.6;font-size:12px}
.prim-footer-help strong{color:#7bdeff}
.disclaimer{color:#b4c7d8}
@media(max-width:1250px){
.shell{grid-template-columns:220px minmax(0,1fr)}
.rail{display:block;position:sticky;top:0}
.right{display:block}
}
@media(max-width:780px){
.shell{display:block}
.rail{display:none}
.rail.visible{display:block}
.main{padding:16px 13px 83px}
.prime-hardware{padding:7px 7px 0;border-radius:15px 15px 6px 6px}
.prime-screen{max-height:580px}
.prime-os-bar{padding:8px}
.prime-appbar{padding:5px;gap:4px}
.prime-appbar button{padding:7px 9px;font-size:10px}
.prime-appbar .prime-app-state{font-size:9px}
.prime-screen-body #space{padding:10px}
.prime-screen-body #topology{height:235px}
.prime-screen-body .rbuttons{grid-template-columns:1fr 1fr}
.prim-intro{margin:12px 0 17px;padding:17px}
.prim-intro-actions a,.prim-intro-actions button{flex:1;min-width:135px}
.prim-route span{font-size:.68rem;padding:6px 9px}
}
body.prime-embed{background:#071124}
body.prime-embed::before{display:none}
body.prime-embed .shell{display:flex;flex-direction:column;min-height:0;max-width:100%}
body.prime-embed .rail,body.prime-embed .prim-intro,body.prime-embed .prime-device,body.prime-embed .topbar,body.prime-embed .mobilebar{display:none!important}
body.prime-embed .main{order:2;padding:10px 14px 40px}
body.prime-embed .hero{padding:9px 0}
body.prime-embed h1{font-size:1.1rem;margin:5px 0}
body.prime-embed .intro{font-size:12px}
body.prime-embed .meta{margin-top:6px}
body.prime-embed .progressbox{margin:10px 0 3px}
body.prime-embed .right{display:block!important;order:1;position:relative;height:auto;overflow:visible;border:0;border-bottom:1px solid rgba(124,190,226,.21);padding:14px;background:transparent}
body.prime-embed .right #topology{height:clamp(210px,27vw,275px)}
body.prime-embed .right .rbuttons{grid-template-columns:repeat(4,minmax(0,1fr))}
body.prime-embed .right .stage{min-height:205px}
body.prime-embed .right .termout{height:115px}
body.prime-embed .disclaimer{font-size:10px}
@media(max-width:650px){body.prime-embed .right .rbuttons{grid-template-columns:repeat(2,minmax(0,1fr))};body.prime-embed .right #topology{height:235px}}
@media print{.prim-intro,.prime-device{display:none!important}.rail{display:none!important}.shell{display:block}.main{padding:0}.hero h1{color:#111}}