/* Layout: an operator screen. Every section is a faceplate with a tag-style label on its top edge.
   One bold move: the amber accent and the live trend in the hero. Everything else stays quiet. */
:root{
  --bg:#0b1016;          /* control room black, blue bias */
  --panel:#111923;
  --panel-2:#17222e;
  --line:#243242;
  --fg:#dfe7f0;
  --muted:#8c9cae;
  --accent:#3fd0c9;      /* teal, green-blue */
  --accent-ink:#06201e;
  --ok:#3ddc84;
  --warn:#ffb547;
  --alarm:#ff5f57;
  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-position:center top;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(63,208,201,.08),transparent 60%),
             linear-gradient(180deg,rgba(11,16,22,.2),var(--bg) 90%);}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:0 64px}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
h2{font-size:clamp(26px,3.4vw,36px);font-weight:600}
h3{font-size:20px;font-weight:600}
p{margin:0}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--accent);font-weight:500}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);background:rgba(11,16,22,.85);backdrop-filter:blur(8px)}
.bar .brand{font-family:var(--display);font-weight:700;letter-spacing:.04em;color:var(--fg)}
.bar nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.bar nav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bar nav a:hover{color:var(--accent);text-decoration:none}
.alarms{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.led{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:64px 40px}
.hero h1{font-size:clamp(40px,6.4vw,72px);font-weight:700;letter-spacing:-.01em}
.hero h1 .pe{font-size:.6em;font-weight:600;color:var(--accent);white-space:nowrap}
.hero h1 small{display:block;font-size:.34em;font-weight:500;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.lede{font-size:18px;color:var(--muted);max-width:34em;margin-top:22px}
.lede strong{color:var(--fg);font-weight:500}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line);border-radius:4px;font-family:var(--display);font-weight:600;letter-spacing:.04em;color:var(--fg);background:var(--panel)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:hover{text-decoration:none;border-color:var(--accent)}

.trend{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px;min-width:0}
.trend header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}
.trend header .val{font-family:var(--mono);font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}
.trend canvas{display:block;width:100%;height:190px;max-width:100%}
.trend footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* status strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px}
.strip div{background:var(--panel);padding:12px 14px;min-width:0}
.strip .tag{display:block;margin-bottom:4px}
.strip .v{font-family:var(--display);font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px}
.strip .v .led{flex:none}
.led.amber{background:var(--warn);box-shadow:0 0 8px var(--warn)}

/* faceplates */
section.plate{position:relative;margin-top:56px;border:1px solid var(--line);border-radius:6px;background:rgba(17,25,35,.78);padding:clamp(20px,3.5vw,36px)}
section.plate>.tag{position:absolute;top:-9px;left:16px;background:var(--bg);padding:0 8px}
.plate h2{margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.two>*{min-width:0}
.prose{max-width:62ch;color:var(--fg)}
.prose p+p{margin-top:12px}
.prose .muted{color:var(--muted)}

/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl .when{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;padding-top:4px;font-variant-numeric:tabular-nums}
.tl .what h3{font-size:18px}
.tl .what .org{color:var(--accent);font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.tl .what p{color:var(--muted);margin-top:6px;max-width:60ch}

/* skills as I/O list */
.io{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.io>div{min-width:0;border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:14px 16px}
.io h3{font-size:13px;font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.io ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:15px}
.io li::before{content:"\25B8";color:var(--muted);margin-right:8px}

/* live sound */
.sound{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.meter{display:grid;grid-template-columns:repeat(8,10px);gap:6px;align-items:end;height:120px;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.meter i{display:block;width:10px;background:linear-gradient(180deg,var(--alarm) 0 10%,var(--warn) 10% 35%,var(--ok) 35%);border-radius:1px;height:var(--h)}
@media (prefers-reduced-motion:no-preference){
  .meter i{animation:vu 1.6s ease-in-out infinite alternate}
  .meter i:nth-child(2n){animation-duration:1.1s}.meter i:nth-child(3n){animation-duration:1.9s}.meter i:nth-child(5n){animation-duration:1.35s}
  @keyframes vu{from{height:calc(var(--h)*.45)}to{height:var(--h)}}
}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.stats div{min-width:0}
.stats .n{font-family:var(--display);font-size:34px;font-weight:700;color:var(--accent);line-height:1}
.stats .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* hobby grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{min-width:0;border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:10px}
.card .tag{display:flex;justify-content:space-between;gap:8px}
.card h3{font-size:18px}
.card p{color:var(--muted);font-size:15px}
.card .st{color:var(--ok)}
.card .st.a{color:var(--warn)}
.card svg{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* speaking */
.talks{display:grid;gap:12px}
.talk{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.talk .when{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:3px}
.talk p{color:var(--muted);margin-top:4px;font-size:15px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.rows div{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;background:var(--panel);padding:12px 14px;min-width:0}
.rows .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rows .v{font-family:var(--mono);font-size:14px;overflow-wrap:anywhere}
.copy{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--muted);border-radius:3px;padding:4px 8px;cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}

footer.foot{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px;padding-block:44px 28px}
  .strip{grid-template-columns:1fr 1fr}
  .two,.contact,.sound{grid-template-columns:1fr}
  .io,.grid{grid-template-columns:1fr 1fr}
  .meter{justify-self:start}
}
@media (max-width:540px){
  .io,.grid{grid-template-columns:1fr}
  .tl li,.talk{grid-template-columns:1fr;gap:4px}
  .rows div{grid-template-columns:1fr auto;grid-template-areas:"k c" "v v"}
  .rows .k{grid-area:k}.rows .v{grid-area:v}.rows .copy{grid-area:c}
  .bar nav{display:none}
}

/* ===== multi-page additions ===== */
.bar nav a.on{color:var(--accent)}
.bar nav a.on::before{content:"\25B8 ";}
.page-title{padding-block:44px 8px}
.page-title h1{font-size:clamp(32px,5vw,56px);font-weight:700}
.page-title p{color:var(--muted);max-width:60ch;margin-top:12px;font-size:17px}

/* page menu tiles on the overview */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.tile{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--fg);min-width:0;transition:border-color .2s}
.tile:hover{border-color:var(--accent);text-decoration:none}
.tile .tag{display:flex;justify-content:space-between}
.tile h3{font-size:19px}
.tile p{color:var(--muted);font-size:15px}
.tile svg{width:100%;height:84px;display:block}
.tile .go{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent)}

/* generic mimic frame */
.mimic{margin:22px 0 6px;max-width:560px;border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:12px 14px 8px}
.mimic.wide{max-width:none}
.mimic svg{display:block;overflow:visible;width:100%}
.m-shell{fill:var(--panel-2);stroke:var(--muted);stroke-width:1.5}
.m-level{fill:var(--accent);opacity:.35;transform-box:fill-box;transform-origin:bottom}
.m-pipe{fill:none;stroke:var(--line);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.m-flow{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 10;stroke-linecap:round;stroke-linejoin:round}
.m-imp{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center}
.m-valve{stroke:var(--fg);stroke-width:2;fill:none}
.m-hi{stroke:var(--alarm);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.m-sig{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.m-plc{fill:var(--bg);stroke:var(--accent);stroke-width:1}
.m-lbl{font-family:var(--mono);font-size:9px;fill:var(--muted);letter-spacing:.06em}
.m-lbl-plc{fill:var(--accent)}
.m-run{fill:var(--ok)}
.m-line{fill:none;stroke:var(--muted);stroke-width:1.2}
.m-acc{stroke:var(--accent)}
.m-fill{fill:var(--accent)}
.m-dim{fill:var(--line)}
.m-fg{fill:var(--fg)}
.m-ok{fill:var(--ok)}
.m-warn{fill:var(--warn)}
.m-alarm{fill:var(--alarm)}

/* telemetry mimic */
.m-ring{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.m-pkt{fill:var(--accent)}
.m-rssi rect{fill:var(--line)}
.m-rssi rect.lit{fill:var(--ok)}

/* console (sound page) */
.console{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:14px;border:1px solid var(--line);border-radius:4px;background:var(--panel);max-width:560px}
.ch{display:grid;grid-template-rows:auto 110px auto;gap:8px;justify-items:center;min-width:0}
.ch .knob{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);position:relative}
.ch .knob::after{content:"";position:absolute;left:50%;top:0;width:2px;height:6px;background:var(--accent);transform:translateX(-50%) rotate(var(--r,0deg));transform-origin:50% 7px}
.ch .fader{position:relative;width:6px;background:var(--line);border-radius:3px;height:100%}
.ch .cap{position:absolute;left:50%;width:16px;height:22px;border-radius:2px;background:var(--fg);transform:translateX(-50%);top:var(--pos,50%);box-shadow:0 1px 0 var(--bg)}
.ch .vu{position:absolute;right:-9px;bottom:0;width:4px;height:100%;background:var(--line);border-radius:2px;overflow:hidden}
.ch .vu i{position:absolute;left:0;right:0;bottom:0;height:var(--h,50%);background:linear-gradient(180deg,var(--alarm) 0 10%,var(--warn) 10% 35%,var(--ok) 35%)}
.ch .name{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;text-align:center}
.ch .pfl{width:8px;height:8px;border-radius:2px;background:var(--line)}
.ch.live .pfl{background:var(--ok);box-shadow:0 0 6px var(--ok)}

/* lab cards get a graphic slot */
.card .fig{width:100%;height:96px;border:1px solid var(--line);border-radius:3px;background:var(--panel-2);overflow:hidden}
.card .fig svg{width:100%;height:100%;display:block}
.m-drip{fill:var(--accent);opacity:0}
.m-pump-led{fill:var(--line)}
.m-prop{transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--fg);stroke-width:2}
.m-drone{transform-box:fill-box;transform-origin:center}
.m-head{transform-box:fill-box;transform-origin:center}
.m-layer{stroke:var(--accent);stroke-width:2;opacity:0}
.m-rackled{fill:var(--line)}
.m-star{fill:var(--fg);opacity:.8}
.m-sky{transform-box:fill-box;transform-origin:center}
.m-iss{fill:var(--accent)}
.m-coin{fill:var(--accent)}
.m-smoke{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:0}
.m-pv{fill:none;stroke:var(--accent);stroke-width:1.5}
.m-sp{fill:none;stroke:var(--warn);stroke-width:1;stroke-dasharray:3 3}
.m-out{fill:var(--accent);transform-box:fill-box;transform-origin:left}
.m-ball{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:no-preference){
  .m-flow{animation:flow 1.2s linear infinite}
  .m-flow-slow{animation-duration:2s}
  .m-imp{animation:spin 1.6s linear infinite}
  .m-level-a{animation:lvlA 9s ease-in-out infinite alternate}
  .m-level-b{animation:lvlB 11s ease-in-out infinite alternate}
  .bar .led{animation:pulse 2.4s ease-in-out infinite}
  .m-ring{animation:ring 2.4s ease-out infinite}
  .m-ring:nth-child(2){animation-delay:.8s}.m-ring:nth-child(3){animation-delay:1.6s}
  .m-pkt{animation:pkt 2.4s linear infinite}
  .m-rssi rect:nth-child(4){animation:blink 2.4s steps(1) infinite}
  .ch .vu i{animation:vu 1.3s ease-in-out infinite alternate}
  .ch:nth-child(2n) .vu i{animation-duration:.9s}.ch:nth-child(3n) .vu i{animation-duration:1.7s}.ch:nth-child(5n) .vu i{animation-duration:1.1s}
  .ch.live .pfl{animation:pulse 1.2s ease-in-out infinite}
  .m-drip{animation:drip 1.6s linear infinite}
  .m-drip:nth-child(2){animation-delay:.5s}.m-drip:nth-child(3){animation-delay:1s}
  .m-pump-led{animation:duty 8s steps(1) infinite}
  .m-prop{animation:spin .25s linear infinite}
  .m-drone{animation:hover 3s ease-in-out infinite alternate}
  .m-head{animation:head 2.2s ease-in-out infinite alternate}
  .m-layer{animation:layer 8.8s linear infinite}
  .m-layer:nth-child(2){animation-delay:2.2s}.m-layer:nth-child(3){animation-delay:4.4s}.m-layer:nth-child(4){animation-delay:6.6s}
  .m-rackled{animation:blink 1.1s steps(1) infinite}
  .m-rackled:nth-child(2n){animation-duration:.7s;animation-delay:.2s}.m-rackled:nth-child(3n){animation-duration:1.6s;animation-delay:.5s}.m-rackled:nth-child(5n){animation-duration:.9s;animation-delay:.1s}
  .m-sky{animation:spin 90s linear infinite}
  .m-iss{animation:iss 9s linear infinite}
  .m-coin{animation:blink 1s steps(1) infinite}
  .m-smoke{animation:smoke 3s ease-out infinite}
  .m-smoke:nth-child(2){animation-delay:1s}.m-smoke:nth-child(3){animation-delay:2s}
  .m-out{animation:pidout 6s ease-in-out infinite alternate}
  .m-pv{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 6s linear infinite}
  .m-ball{animation:ball 1.4s ease-in-out infinite alternate}
  @keyframes flow{to{stroke-dashoffset:-16}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes lvlA{from{transform:scaleY(.42)}to{transform:scaleY(.7)}}
  @keyframes lvlB{from{transform:scaleY(.5)}to{transform:scaleY(.74)}}
  @keyframes pulse{0%,100%{box-shadow:0 0 4px var(--ok)}50%{box-shadow:0 0 12px var(--ok)}}
  @keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.6);opacity:0}}
  @keyframes pkt{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(150px);opacity:0}}
  @keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
  @keyframes vu{from{height:calc(var(--h)*.4)}to{height:var(--h)}}
  @keyframes drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(46px);opacity:0}}
  @keyframes duty{0%,55%{fill:var(--ok)}56%,100%{fill:var(--line)}}
  @keyframes hover{from{transform:translateY(0)}to{transform:translateY(-6px)}}
  @keyframes head{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
  @keyframes layer{0%{opacity:0}10%,100%{opacity:1}}
  @keyframes iss{0%{transform:translate(-40px,30px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(120px,-30px);opacity:0}}
  @keyframes smoke{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-22px);opacity:0}}
  @keyframes pidout{from{transform:scaleX(.35)}to{transform:scaleX(.7)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes ball{0%{transform:translate(0,0)}50%{transform:translate(40px,-14px)}100%{transform:translate(80px,0)}}
}

/* tower lesson */
.m-stick{fill:none;stroke:var(--warn);stroke-width:4;stroke-linecap:round}
.m-grip{stroke:var(--fg);stroke-width:6}
.m-arc{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 3px var(--accent))}
.m-bolt{fill:none;stroke:var(--warn);stroke-width:2;stroke-linejoin:round;opacity:0}
.m-arctxt{fill:var(--warn);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .m-arc{animation:arc 2.8s steps(1) infinite}
  .m-arc2{animation-delay:.07s}
  .m-arctxt{animation:arctxt 2.8s steps(1) infinite}
  .m-bolt{animation:bolt 7s steps(1) infinite}
  .m-beacon{animation:blink 1.5s steps(1) infinite}
  @keyframes arc{0%,39%{opacity:0}40%{opacity:1}44%{opacity:.2}47%{opacity:1}52%{opacity:0}55%{opacity:1}58%{opacity:.3}62%{opacity:1}66%,100%{opacity:0}}
  @keyframes arctxt{0%,47%{opacity:0}48%,80%{opacity:1}81%,100%{opacity:0}}
  @keyframes bolt{0%,9%{opacity:0}10%{opacity:1}12%{opacity:0}14%{opacity:1}17%,100%{opacity:0}}
}
@media (max-width:860px){.menu{grid-template-columns:1fr}.console{grid-template-columns:repeat(4,1fr)}.ch:nth-child(n+5){display:none}}