/* Styles for the whole site. Colours and spacing are set at the top (:root). */
  :root {
    color-scheme: dark;
    --bg:#000; --s1:#0e0e10; --s2:#17171a; --line:#2a2a2f; --text:#f5f5f7; --muted:#a1a1a6;
    --amber:#ffb03a; --orange:#ff7a1a; --pink:#ff2d87; --cyan:#18e0ff; --lime:#b8ff3a; --violet:#8a5cff; --red:#ff4d4d;
    --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
    --script:"Mrs Saint Delafield","Snell Roundhand","Segoe Script",cursive;
    box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  html { scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 60px); }
  *,*::before,*::after { box-sizing:inherit; }
  html,body { margin:0; background:var(--bg); color:var(--text); }
  body { font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.45; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; } button { font-family:inherit; color:inherit; }
  svg { display:block; } [hidden] { display:none !important; }
  :focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }
  ::selection { background:var(--amber); color:#000; }
  body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 40% at 78% 10%,rgba(255,200,120,.08),transparent 70%); opacity:0; transition:opacity 1s; }
  body.lit::before { opacity:1; }

  /* NAV */
  .nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:60; height:56px; background:rgba(0,0,0,.72); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid transparent; transition:border-color .3s; }
  .nav.scrolled { border-color:rgba(255,255,255,.1); }
  .nav-in { max-width:1120px; height:100%; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .logo { display:flex; align-items:center; height:40px; padding:0 4px; color:#f5f5f7; font-weight:700; font-size:clamp(17px,4.6vw,23px); letter-spacing:-.04em; white-space:nowrap; border-radius:10px; transition:color .5s,text-shadow .5s,transform .2s; }
  .logo:hover { color:#fff; } .logo:active { transform:scale(.97); }
  body.lit .logo { color:var(--amber); text-shadow:0 0 16px rgba(255,176,58,.28); }
  .links { list-style:none; display:flex; gap:clamp(14px,2.4vw,34px); margin:0; padding:0; font-size:13px; }
  .links a { display:block; padding:17px 0 15px; color:#d2d2d7; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
  .links a:hover { color:#fff; } .links a.on { color:var(--amber); border-color:var(--amber); }
  .nav-r { display:flex; align-items:center; gap:4px; }
  .icon { width:40px; height:44px; display:grid; place-items:center; background:none; border:0; color:#d2d2d7; cursor:pointer; padding:0; }
  .icon:hover { color:#fff; } .menu { display:none; }

  /* SHARED */
  .wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
  .sec { padding:120px 0 40px; }
  h2.big { margin:0; font-size:clamp(44px,7.4vw,92px); line-height:1.02; letter-spacing:-.045em; font-weight:700; }
  .grad { background:linear-gradient(95deg,var(--amber),var(--pink) 55%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
  .lead { color:#c7c7cc; font-size:clamp(18px,2.1vw,24px); max-width:44ch; margin:18px 0 0; }
  .btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px; border-radius:980px; font-size:16px; font-weight:500; background:#fff; color:#000; border:0; cursor:pointer; transition:transform .15s,background .15s; }
  .btn:hover { background:#e6e6eb; } .btn:active { transform:scale(.97); }
  .btn.amber { background:var(--amber); } .btn.amber:hover { background:#ffc468; }
  .btn.ghost { background:transparent; color:#fff; border:1px solid #4a4a50; } .btn.ghost:hover { background:#1b1b1e; }
  .btn.sm { min-height:38px; padding:0 18px; font-size:14px; }
  .pill { display:inline-flex; align-items:center; min-height:36px; padding:0 18px; border-radius:99px; background:var(--amber); color:#000; font-weight:600; font-size:13px; letter-spacing:.04em; border:0; cursor:pointer; }
  .pill:hover { background:#ffc468; }
  .link { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:18px; color:var(--cyan); } .link:hover { text-decoration:underline; } .link::after { content:"›"; font-size:1.15em; }
  .actions { display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; }
  .seg { position:relative; display:inline-flex; gap:2px; padding:4px; background:var(--s2); border-radius:99px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .seg::-webkit-scrollbar { display:none; }
  .seg .ind { position:absolute; top:4px; bottom:4px; left:0; border-radius:99px; background:#2e2e33; transition:transform .35s cubic-bezier(.3,1.2,.4,1),width .35s; }
  .seg button { position:relative; z-index:1; border:0; background:none; padding:9px 18px; min-height:40px; border-radius:99px; font-size:14px; color:var(--muted); cursor:pointer; white-space:nowrap; transition:color .2s; }
  .seg button[aria-selected="true"] { color:#fff; } .seg button:hover { color:#fff; }
  .glass { position:relative; background:var(--s1); border-radius:28px; overflow:hidden; isolation:isolate; }
  .glass::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 60%); opacity:0; transition:opacity .25s; }
  .glass:hover::after { opacity:1; }
  .rv { opacity:0; transform:translateY(34px); transition:opacity .8s ease,transform .8s ease; } .rv.in { opacity:1; transform:none; }

  /* HERO */
  .hero { position:relative; min-height:calc(100vh - 56px); min-height:calc(100svh - 56px); display:flex; align-items:center; padding:40px 0 70px; overflow:hidden; isolation:isolate; }
  .hero-aura { position:absolute; z-index:-1; right:-10%; top:-10%; width:70vw; max-width:900px; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,rgba(255,214,150,.2),rgba(255,180,100,.07) 55%,transparent); filter:blur(30px); opacity:0; transform:scale(.7); transition:opacity .9s,transform .9s; pointer-events:none; }
  .hero.on .hero-aura { opacity:1; transform:scale(1); }
  .hero-grid { width:100%; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:30px; }
  .hero-copy { transform:translateY(calc(var(--hp,0) * -50px)); opacity:calc(1 - var(--hp,0) * 1.3); }
  .hi { font-size:clamp(15px,1.6vw,19px); font-weight:600; letter-spacing:.02em; color:var(--amber); margin:0 0 10px; }
  .hero h1 { margin:0; font-size:clamp(38px,6.4vw,86px); line-height:1; letter-spacing:-.05em; font-weight:700; transition:text-shadow .8s; }
  .hero.on h1 { text-shadow:0 0 50px rgba(255,200,120,.12); }
  .role { margin:14px 0 0; font-size:clamp(24px,3.6vw,46px); line-height:1.12; font-weight:600; letter-spacing:-.03em; min-height:2.3em; }
  .role .t { background:linear-gradient(95deg,var(--amber),var(--pink) 60%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .caret { display:inline-block; width:3px; height:.95em; margin-left:4px; background:var(--amber); vertical-align:-.1em; animation:blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  .swrow { display:flex; align-items:center; gap:14px; margin:6px 0 30px; color:var(--muted); font-size:15px; }
  .switch { position:relative; width:56px; height:32px; border-radius:99px; border:0; background:#2c2c31; cursor:pointer; padding:0; transition:background .3s; flex:none; }
  .switch i { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; transition:transform .3s cubic-bezier(.3,1.4,.5,1); box-shadow:0 2px 6px rgba(0,0,0,.5); }
  .switch[aria-checked="true"] { background:var(--amber); } .switch[aria-checked="true"] i { transform:translateX(24px); }
  .switch:not([aria-checked="true"]) { animation:nudge 2.4s ease-in-out infinite; }
  @keyframes nudge { 0%,70%,100% { box-shadow:0 0 0 0 rgba(255,176,58,0); } 85% { box-shadow:0 0 0 8px rgba(255,176,58,.25); } }
  .bulbwrap { background:none; border:0; padding:0; cursor:pointer; justify-self:center; width:min(100%,340px); transform:translateY(calc(var(--hp,0) * 30px)) scale(calc(1 - var(--hp,0) * .12)); }

  /* ABOUT */
  .stmt { margin:56px 0 0; font-size:clamp(26px,4.4vw,54px); line-height:1.18; letter-spacing:-.035em; font-weight:600; max-width:22em; }
  .stmt span { opacity:.2; transition:opacity .15s linear; }
  .about-grid { display:grid; grid-template-columns:auto 1fr; gap:48px; margin-top:72px; align-items:start; }
  .avatar { width:150px; height:150px; border-radius:50%; display:grid; place-items:center; font-size:48px; font-weight:700; letter-spacing:-.04em; color:#190c00; background:conic-gradient(from 200deg,var(--amber),var(--pink),var(--violet),var(--cyan),var(--amber)); position:relative; overflow:hidden; }
  .avatar::before { content:""; position:absolute; inset:4px; border-radius:50%; background:#0b0b0d; }
  .avatar b { position:relative; background:linear-gradient(135deg,var(--amber),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
  .facts .panel { margin:22px 0 26px; min-height:120px; }
  .chips { display:flex; flex-wrap:wrap; gap:10px; }
  .chip { padding:12px 20px; border-radius:99px; font-size:17px; font-weight:500; background:var(--s2); border:1px solid var(--c,#333); color:#fff; animation:pop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(var(--i) * 60ms); transition:transform .2s,background .2s; }
  .chip:hover { transform:translateY(-3px); background:color-mix(in srgb,var(--c) 22%,#17171a); }
  @keyframes pop { from { opacity:0; transform:scale(.8) translateY(10px); } }

  /* EXPERIENCE */
  .exp-top { display:flex; flex-wrap:wrap; gap:24px 40px; align-items:end; justify-content:space-between; margin-bottom:40px; }
  .exp-panel { padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; --acc:var(--amber); min-height:430px; }
  .exp-panel::before { content:""; position:absolute; z-index:-1; inset:auto -10% -40% -10%; height:70%; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 40%,transparent),transparent); filter:blur(50px); }
  .exp-panel.swap { animation:swap .5s ease both; } @keyframes swap { from { opacity:0; transform:translateY(16px); } }
  .mono { width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-weight:700; font-size:20px; letter-spacing:-.03em; color:#000; background:var(--acc); margin-bottom:20px; }
  .logo-tile { width:72px; height:72px; border-radius:16px; object-fit:cover; display:block; margin-bottom:20px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 34px color-mix(in srgb,var(--acc) 40%,transparent); }
  .org { color:var(--acc); font-weight:600; font-size:18px; margin:0 0 6px; }
  .exp-panel h3 { margin:0; font-size:clamp(28px,3.4vw,42px); line-height:1.08; letter-spacing:-.035em; }
  .where { color:var(--acc); margin:14px 0 18px; font-size:17px; }
  .about-co { color:#b9b9bf; margin:0; font-size:16px; }
  .exp-panel ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; align-self:center; }
  .exp-panel li { position:relative; padding-left:26px; color:#e1e1e6; font-size:17px; }
  .exp-panel li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); }

  /* EDUCATION */
  .edu-stage { margin-top:48px; padding:56px 40px 48px; text-align:center; min-height:380px; display:flex; flex-direction:column; justify-content:center; align-items:center; --acc:var(--cyan); }
  .edu-stage::before { content:""; position:absolute; z-index:-1; inset:auto 10% -50% 10%; height:80%; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 38%,transparent),transparent); filter:blur(50px); transition:background .5s; }
  .edu-stage .in { animation:swap .5s ease both; }
  .edu-inst { color:var(--acc); font-size:clamp(16px,2vw,21px); font-weight:500; margin:0; }
  .edu-deg { margin:6px 0 10px; font-size:clamp(56px,10vw,128px); line-height:1; letter-spacing:-.05em; font-weight:700; }
  .edu-field { color:#c7c7cc; letter-spacing:.14em; font-weight:600; font-size:clamp(13px,1.5vw,16px); text-transform:uppercase; margin:0 0 14px; }
  .edu-grade { color:#e1e1e6; font-size:clamp(17px,2vw,22px); margin:0; }
  .track { margin:36px auto 0; max-width:760px; }
  .rail { position:relative; height:44px; }
  .rail .bar { position:absolute; left:0; right:0; top:20px; height:4px; border-radius:4px; background:#26262b; }
  .rail .fill { position:absolute; left:0; top:20px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--amber),var(--pink),var(--cyan)); width:0; transition:width .08s linear; }
  .rail input { position:absolute; inset:0; width:100%; margin:0; opacity:0; cursor:grab; height:44px; }
  .rail .thumb { position:absolute; top:10px; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.6); pointer-events:none; transition:left .08s linear; }
  .rail input:focus-visible ~ .thumb { outline:2px solid var(--cyan); outline-offset:4px; }
  .rail, .stops { margin-left:40px; margin-right:40px; } .stops { position:relative; height:62px; margin-top:6px; } .stops button { position:absolute; top:0; left:calc(var(--p) * 1%); width:90px; margin-left:-45px; }
  @media (max-width:560px) { .rail, .stops { margin-left:32px; margin-right:32px; } .stops button { width:68px; margin-left:-34px; font-size:12px; padding:10px 0; } }
  .stops button { background:none; border:0; color:var(--muted); font-size:14px; padding:10px 4px; min-height:44px; cursor:pointer; transition:color .2s; }
  .stops button[aria-current="true"] { color:#fff; font-weight:600; } .stops button:hover { color:#fff; }
  .stops small { display:block; font-size:12px; opacity:.7; }

  /* PROJECTS */
  .pcards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
  .pc { text-align:left; border:2px solid transparent; padding:0; cursor:pointer; transition:border-color .25s,transform .25s; color:inherit; }
  .pc:hover { transform:translateY(-4px); } .pc[aria-selected="true"] { border-color:var(--acc); }
  .pc .art { height:170px; display:grid; place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 35%,#000),#050506); position:relative; }
  .pc .art svg { width:120px; height:120px; } .pc .art b { position:absolute; left:22px; bottom:14px; font-size:20px; letter-spacing:-.02em; line-height:1.1; }
  .pc .art em { position:absolute; left:22px; bottom:-0px; font-style:normal; display:none; }
  .pc .body { padding:22px 24px 26px; } .pc h3 { margin:0 0 10px; font-size:19px; line-height:1.25; letter-spacing:-.02em; } .pc p { margin:0; color:#b9b9bf; font-size:15px; }
  .pc .try { display:inline-block; margin-top:14px; color:var(--acc); font-weight:600; font-size:14px; }
  .pcards.one { grid-template-columns:1fr; }
  .pcards.one .pc { display:grid; grid-template-columns:minmax(240px,.7fr) 1.5fr; align-items:stretch; }
  .pcards.one .pc .art { height:auto; min-height:220px; } .pcards.one .pc .body { padding:30px 34px; align-self:center; } .pcards.one .pc h3 { font-size:24px; }
  @media (max-width:760px) { .pcards.one .pc { grid-template-columns:1fr; } .pcards.one .pc .art { min-height:170px; } }
  .play { margin-top:18px; padding:30px; --acc:var(--amber); }
  .play-head { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
  .play-head h4 { margin:0; font-size:24px; letter-spacing:-.03em; } .play-head span { color:var(--muted); font-size:13px; }
  .demo { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:start; }
  .dsvg { background:#060607; border:1px solid var(--line); border-radius:20px; padding:10px; }
  .dsvg svg { width:100%; height:auto; }
  .dsvg text { font-family:var(--font); fill:#c7c7cc; font-size:12px; }
  .dctl h5 { margin:18px 0 10px; font-size:14px; color:var(--muted); font-weight:500; }
  .dctl h5:first-child { margin-top:0; }
  .btnrow { display:flex; flex-wrap:wrap; gap:8px; }
  .fchip { padding:9px 15px; min-height:40px; border-radius:99px; border:1px solid #3a3a40; background:#141416; color:#e6e6eb; font-size:14px; cursor:pointer; transition:background .2s,border-color .2s; }
  .fchip:hover { border-color:#777; } .fchip[aria-pressed="true"] { background:rgba(255,77,77,.18); border-color:var(--red); color:#ffb3b3; }
  .read { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; }
  .read div { background:#101012; border:1px solid var(--line); border-radius:14px; padding:10px 8px; text-align:center; } .read b { display:block; font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .read small { color:var(--muted); font-size:11px; }
  .log { list-style:none; margin:10px 0 0; padding:0; font-size:13px; color:#b9b9bf; max-height:112px; overflow:hidden; }
  .log li { padding:4px 0; border-bottom:1px solid #1d1d21; } .log li b { color:#fff; font-weight:500; } .log li.bad { color:#ff9c9c; } .log li.ok { color:var(--lime); }
  .wire { stroke:#3c3c42; stroke-width:4; fill:none; stroke-linecap:round; }
  .wire.live { stroke-dasharray:10 8; animation:flow .6s linear infinite; } @keyframes flow { to { stroke-dashoffset:-18; } }
  .spin { transform-box:fill-box; transform-origin:center; animation:rot .9s linear infinite; } @keyframes rot { to { transform:rotate(360deg); } }
  .blink { animation:blink .6s steps(1) infinite; }
  .range { width:100%; accent-color:var(--amber); }
  .eq { margin:14px 0 0; padding:12px 14px; border-radius:14px; background:#101012; border:1px solid var(--line); font-size:13px; color:#c7c7cc; }
  .eq code { color:var(--lime); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
  .repo { margin-top:110px; text-align:center; }
  .repo p { font-size:clamp(20px,2.6vw,30px); font-weight:600; letter-spacing:-.025em; max-width:26em; margin:0 auto 44px; }
  .repo .book-stage { height:min(470px,110vw); display:grid; place-items:center; }
  .book { position:relative; width:min(300px,64vw); aspect-ratio:3/4; perspective:1400px; cursor:pointer; transition:transform .9s cubic-bezier(.2,.8,.2,1); outline-offset:10px; filter:drop-shadow(0 20px 60px rgba(255,176,58,.35)); text-align:left; }
  .book.open { transform:translateX(50%); }
  .pg { position:absolute; inset:0; border-radius:6px 16px 16px 6px; background:linear-gradient(135deg,#fbf9f9,#ddd8d8); color:#111; padding:18px 18px 14px 20px; display:flex; flex-direction:column; }
  .pg h6 { margin:0; font-size:15px; font-weight:700; display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:2px solid #111; }
  .pg ul { list-style:none; margin:14px 0 0; padding:0; flex:1; } .pg li { margin:2px 0; }
  .pg li button, .pg li a { display:block; width:100%; text-align:left; background:none; border:0; padding:5px 0 5px 14px; font-size:13px; font-weight:500; color:#111; cursor:pointer; position:relative; border-radius:6px; } .pg li button::before, .pg li a::before { content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--amber); }
  .pg li button:hover, .pg li a:hover { background:rgba(255,176,58,.25); }
  .pg small { font-style:italic; font-size:11px; color:#333; }
  .cover { position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
  .book.open .cover { transform:rotateY(-168deg); }
  .cover .front, .cover .back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:6px 16px 16px 6px; }
  .cover .front { background:linear-gradient(135deg,#ffc15e,#ff8a2a); display:grid; place-items:center; } .cover .front div { width:68%; height:74%; background:#0a0a0a; border:3px solid #fff; display:grid; place-items:center; text-align:center; padding:12px; }
  .cover .front span { font-family:var(--script); font-size:48px; line-height:.9; color:#ff7a1a; } .cover .front small { display:block; color:#fff; font-size:12px; margin-top:8px; letter-spacing:.06em; }
  .cover .back { transform:rotateY(180deg); background:#f6f4f4; border-radius:16px 6px 6px 16px; }
  .hintline { color:var(--muted); font-size:14px; margin-top:10px; }

  /* VOLUNTEER */
  .vol-copy { margin:20px auto 0; max-width:40em; text-align:center; color:#c7c7cc; font-size:clamp(17px,1.9vw,21px); } .vol-copy em { color:var(--amber); font-style:normal; font-weight:600; }
  .vol-top { text-align:center; } .vol-top .lead { margin-inline:auto; }
  .orgs { display:flex; justify-content:center; gap:clamp(18px,5vw,56px); margin:48px 0 56px; flex-wrap:wrap; }
  .org-c { text-align:center; width:160px; background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; } .org-c em { display:block; margin-top:4px; font-style:normal; font-size:12px; color:var(--amber); opacity:0; transition:opacity .25s; } .org-c:hover em, .org-c:focus-visible em { opacity:1; } .org-c:hover .orb { transform:translateY(-6px) scale(1.04); box-shadow:0 18px 40px -12px var(--oc); } .org-c:focus-visible { outline:2px solid var(--amber); outline-offset:6px; border-radius:20px; } .orb { display:block; width:140px; height:140px; margin:0 auto 14px; border-radius:50%; object-fit:cover; background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.14); transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s; cursor:default; }
  .orb:hover { transform:translateY(-8px) scale(1.06); box-shadow:0 14px 50px color-mix(in srgb,var(--oc) 60%,transparent); }
  .org-c small { color:var(--muted); font-size:13px; display:block; line-height:1.3; }
  .roles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .role-c { padding:30px 20px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; --acc:var(--amber); }
  .role-c strong { color:var(--acc); font-weight:600; font-size:18px; } .role-c span { color:#e1e1e6; font-size:16px; margin-bottom:12px; }
  .scene { position:relative; margin-top:90px; border-radius:30px; overflow:hidden; background:radial-gradient(70% 70% at 78% 45%,#10223a,#030507 70%); min-height:min(560px,120vw); isolation:isolate; }
  .scene { cursor:crosshair; } .scene canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .scene h3 { position:relative; z-index:2; margin:0; padding:34px 20px 0; text-align:center; font-size:clamp(28px,5vw,56px); letter-spacing:-.04em; font-weight:700; pointer-events:none; background:linear-gradient(90deg,var(--amber),#ffe3a0,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .scene p { position:absolute; z-index:2; left:0; right:0; bottom:16px; text-align:center; margin:0; color:rgba(255,255,255,.6); font-size:13px; pointer-events:none; }

  /* CONTACT */
  .contact-head { text-align:center; } .contact-head .lead { margin-inline:auto; }
  .cgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px; }
  .cc { padding:34px 18px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .appicon { display:block; width:76px; height:76px; border-radius:22.5%; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
  .cc h4 { margin:10px 0 0; font-size:15px; letter-spacing:.02em; font-weight:600; } .cc a.val, .cc button.val { color:var(--amber); font-size:16px; background:none; border:0; cursor:pointer; padding:4px 0; word-break:break-all; } .cc .val:hover { text-decoration:underline; }
  .copy { font-size:13px; color:var(--muted); background:#1b1b1e; border:0; border-radius:99px; padding:7px 14px; min-height:32px; cursor:pointer; } .copy:hover { color:#fff; background:#26262b; }
  .connect { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:90px; align-items:start; }
  .connect h3 { margin:0; font-size:clamp(34px,5vw,60px); letter-spacing:-.04em; line-height:1.05; font-weight:700; }
  .socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .soc { display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; min-height:56px; border-radius:99px; background:var(--s2); border:0; cursor:pointer; font-size:15px; transition:transform .2s,background .2s; } .soc:hover { transform:translateY(-3px); background:#222226; }
  .soc i { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; } .soc i svg { width:21px; height:21px; fill:#fff; }
  form.msg { display:flex; flex-direction:column; gap:12px; } .f { display:flex; flex-direction:column; gap:6px; } .f label { font-size:13px; color:var(--muted); }
  .f input, .f textarea { background:var(--s2); border:1.5px solid var(--line); border-radius:14px; color:#fff; padding:14px; font:inherit; font-size:16px; min-height:50px; resize:vertical; } .f input:focus, .f textarea:focus { outline:none; border-color:var(--amber); }
  .f .er { color:var(--red); font-size:12px; min-height:0; }
  .fmark { width:30px; height:30px; margin:0 auto 18px; fill:#6e6e73; fill-rule:evenodd; }
  footer { text-align:center; padding:56px 20px 70px; color:var(--muted); font-size:15px; }
  .sig { font-family:var(--script); font-size:54px; color:#fff; line-height:1; margin-top:14px; } .gear { width:26px; height:26px; margin:6px auto 0; color:#3e9b3e; animation:rot 8s linear infinite; }


  /* 3D panel */
  .v3.full { position:fixed; inset:0; z-index:160; height:100vh; border-radius:0; border:0; } .v3.full .v3bar { bottom:max(18px,env(safe-area-inset-bottom,0px)); }
  .vtabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .v3 { position:relative; height:clamp(340px,50vw,600px); border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(#ffffff,#f1f2f5); border-color:#e1e4ea; }
  .v3 canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; } .v3 canvas:active { cursor:grabbing; }
  .v3bar { position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; pointer-events:none; } .v3bar > * { pointer-events:auto; }
  .v3hint { font-size:12px; color:#d2d2d7; background:rgba(0,0,0,.55); padding:7px 13px; border-radius:99px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .v3btns { display:flex; gap:6px; } .v3btns button { min-height:38px; min-width:38px; padding:0 14px; border-radius:99px; border:0; background:rgba(20,26,38,.72); color:#fff; cursor:pointer; font-size:14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .v3btns button:hover { background:rgba(20,26,38,.9); } .v3btns button[aria-pressed="false"] { opacity:.55; }
  .v3tip { position:absolute; z-index:3; pointer-events:none; background:rgba(0,0,0,.82); color:#fff; font-size:12px; padding:6px 10px; border-radius:10px; max-width:260px; }
  /* SCHEMATIC EXPLORER */
  .schem-wrap { overflow-x:auto; border-radius:20px; border:1px solid var(--line); background:#fff; -webkit-overflow-scrolling:touch; }
  .schem { position:relative; min-width:780px; line-height:0; }
  .schem img { width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
  .hs { position:absolute; border:0; padding:0; background:transparent; border-radius:10px; cursor:pointer; outline:2px solid transparent; outline-offset:2px; transition:box-shadow .3s,background .25s,outline-color .2s; }
  .hs:hover { outline-color:#ff7a1a; background:rgba(255,122,26,.12); }
  .hs.sel { outline:3px solid #2f7ae5; background:rgba(47,122,229,.14); }
  .hs.live { box-shadow:0 0 0 3px rgba(34,200,90,.95),0 0 24px 8px rgba(34,200,90,.5); background:rgba(34,200,90,.12); }
  .hs.alarm { animation:alm .7s steps(1) infinite; }
  @keyframes alm { 0% { box-shadow:0 0 0 3px #ff3b3b,0 0 28px 10px rgba(255,59,59,.65); background:rgba(255,59,59,.22); } 50% { box-shadow:none; background:transparent; } }
  .sgrid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:22px; align-items:start; }
  .vbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px; color:var(--muted); font-size:13px; }
  .infocard { background:#101012; border:1px solid var(--line); border-radius:18px; padding:20px 22px; min-height:150px; }
  .infocard .num { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border-radius:7px; background:#2f7ae5; color:#fff; font-weight:700; font-size:14px; margin-right:10px; vertical-align:middle; }
  .infocard h5 { display:inline; margin:0; font-size:19px; letter-spacing:-.02em; color:#fff; vertical-align:middle; font-weight:600; }
  .infocard p { margin:12px 0 0; color:#c7c7cc; font-size:15px; } .infocard .st { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--lime); } .infocard .st.bad { color:#ff9c9c; } .infocard .st.dim { color:var(--muted); }
  .clist { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
  .clist button { min-width:40px; min-height:40px; padding:0 10px; border-radius:10px; border:1px solid #333; background:#141416; color:#e6e6eb; font-size:13px; font-weight:600; cursor:pointer; } .clist button:hover { border-color:#777; } .clist button[aria-pressed="true"] { background:#2f7ae5; border-color:#2f7ae5; color:#fff; }
  .sim h5 { margin:18px 0 10px; font-size:14px; color:var(--muted); font-weight:500; } .sim h5:first-child { margin-top:0; }
  .tg { display:flex; flex-wrap:wrap; gap:8px; }
  .tgl { display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 10px; min-height:42px; border-radius:99px; border:1px solid #3a3a40; background:#141416; color:#e6e6eb; font-size:14px; cursor:pointer; }
  .tgl i { width:30px; height:18px; border-radius:99px; background:#33333a; position:relative; transition:background .2s; flex:none; } .tgl i::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
  .tgl[aria-pressed="true"] { border-color:#2d8f4e; } .tgl[aria-pressed="true"] i { background:#27c25d; } .tgl[aria-pressed="true"] i::after { transform:translateX(12px); }
  .go { background:#27c25d; color:#000; border:0; } .go:hover { background:#46de7b; } .stopb { background:#ff4d4d; color:#000; border:0; } .stopb:hover { background:#ff7b7b; }
  .ammeter { display:flex; align-items:center; gap:14px; margin-top:6px; } .ammeter .scr { flex:none; min-width:130px; text-align:center; background:#220606; border:3px solid #555; border-radius:10px; padding:8px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:30px; font-weight:700; color:#ff3b3b; text-shadow:0 0 10px rgba(255,59,59,.7); font-variant-numeric:tabular-nums; } .ammeter .scr.off { color:#4a1a1a; text-shadow:none; }
  .ammeter small { color:var(--muted); font-size:12px; line-height:1.5; display:block; }
  .phs { display:flex; gap:8px; margin-top:12px; align-items:center; font-size:13px; color:var(--muted); } .phs b { width:22px; height:22px; border-radius:50%; border:2px solid #000; opacity:.25; transition:opacity .3s,box-shadow .3s; } .phs b.on { opacity:1; box-shadow:0 0 12px currentColor; }
  .statusline { margin-top:14px; padding:12px 14px; border-radius:14px; background:#101012; border:1px solid var(--line); font-size:14px; } .statusline.ok { border-color:#2d8f4e; color:#b8ff3a; } .statusline.bad { border-color:#b33; color:#ff9c9c; }
  .enl { background:none; border:0; color:var(--cyan); cursor:pointer; font-size:14px; padding:6px 0; } .enl:hover { text-decoration:underline; }
  .lb { position:fixed; inset:0; z-index:180; background:rgba(0,0,0,.92); display:grid; place-items:center; padding:16px; cursor:zoom-out; overflow:auto; } .lb img { width:min(1500px,100%); height:auto; border-radius:12px; background:#fff; }
  @media (max-width:900px) { .sgrid { grid-template-columns:1fr; } }

  /* photos hanging on a wire */
  .hang { position:relative; z-index:1; padding:6px clamp(10px,3vw,40px) 80px; }
  .wrow { position:relative; width:100%; } .wrow svg { position:absolute; left:0; top:0; width:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
  .hp { position:absolute; border:0; background:none; padding:0; cursor:pointer; transform-origin:50% 0; will-change:transform; font:inherit; color:inherit; text-align:center; }
  .hp .clip { position:absolute; left:50%; top:-9px; width:12px; height:28px; margin-left:-6px; border-radius:3px; z-index:3; background:linear-gradient(90deg,#b57a3f,#e6b777 50%,#a96f38); box-shadow:0 2px 5px rgba(0,0,0,.55); } .hp .clip::after { content:""; position:absolute; left:2px; right:2px; top:9px; height:2px; background:rgba(0,0,0,.35); }
  .hp .pol { display:block; background:#fbfaf7; padding:7px 7px 0; border-radius:3px; box-shadow:0 14px 28px rgba(0,0,0,.55); transition:box-shadow .25s,transform .25s; } .hp:hover .pol, .hp:focus-visible .pol { box-shadow:0 18px 38px rgba(255,176,58,.4),0 14px 28px rgba(0,0,0,.55); transform:translateY(3px); }
  .hp .pol > img { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; }
  .hp .cap { display:block; color:#1b1b1d; padding:5px 2px 9px; line-height:1.05; } .hp .cap b { display:block; font-family:var(--script); font-weight:400; font-size:clamp(19px,2.4vw,25px); } .hp .cap i { display:block; font-style:normal; font-size:9.5px; color:#6a6a70; margin-top:1px; }
  .hp.tag .pol { background:#050506; color:#fff; padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:7px; min-height:100%; }
  .hp.tag .pol > img { width:46px; height:46px; aspect-ratio:1; border-radius:9px; background:#fff; object-fit:cover; } .hp.tag b { font-size:11.5px; line-height:1.2; letter-spacing:-.01em; } .hp.tag i { font-style:normal; font-size:10px; color:#ffd08a; }
  .lb2 { position:fixed; inset:0; z-index:190; background:rgba(0,0,0,.93); display:grid; place-items:center; padding:20px; }
  .lb2 figure { margin:0; width:min(1000px,84vw); display:flex; flex-direction:column; align-items:center; gap:14px; } .lb2 img { width:100%; max-height:76vh; object-fit:contain; border-radius:10px; background:#111; } .lb2 figcaption { color:#d2d2d7; font-size:15px; text-align:center; }
  .lb2 .x, .lb2 .nv { position:absolute; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; width:46px; height:46px; font-size:22px; } .lb2 .x { top:16px; right:16px; } .lb2 .nv { top:50%; margin-top:-23px; } .lb2 .pv { left:14px; } .lb2 .nx { right:14px; } .lb2 .x:hover, .lb2 .nv:hover { background:rgba(255,255,255,.26); }
  /* iPad mini */
  .pad-stage { display:flex; justify-content:center; padding:30px 0 10px; }
  .ipad-w { transform-origin:50% 70%; transform:perspective(1500px) rotateX(calc((1 - var(--e,1)) * 36deg)) translateY(calc((1 - var(--e,1)) * 70px)) scale(calc(.78 + var(--e,1) * .22)); opacity:calc(.2 + var(--e,1) * .8); will-change:transform,opacity; }
  .ipad-f { animation:none; } @keyframes floaty { 50% { transform:translateY(-10px); } }
  .ipad { position:relative; width:min(640px,92vw); aspect-ratio:1.52 / 1; padding:1.1%; border-radius:4.2% / 6.4%; container-type:inline-size; background:linear-gradient(145deg,#ff5b61,#c4121e 48%,#ec3a41); box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 40px 90px rgba(0,0,0,.6),0 0 100px rgba(255,59,64,.28); transform:perspective(1300px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(var(--sc,1)); transition:transform .35s ease-out; cursor:pointer; }
  .ipad.pop { --sc:1.05; }
  .ipad-in { position:relative; width:100%; height:100%; background:#050506; border-radius:3.1% / 4.7%; padding:1.15%; }
  .ipad .cam { position:absolute; left:.9%; top:50%; width:.9cqw; height:.9cqw; margin-top:-.45cqw; border-radius:50%; background:#1b1c21; box-shadow:0 0 0 .2cqw #0e0e12; }
  .ipad-scr { position:relative; width:100%; height:100%; display:grid; grid-template-columns:1fr 1fr; border-radius:1.6% / 2.5%; overflow:hidden; }
  .cover-s { background:linear-gradient(135deg,#ffc15e,#ff8a2a); display:grid; place-items:center; } .cover-s .cov { width:62%; height:68%; background:#0a0a0a; border:.45cqw solid #fff; display:grid; place-items:center; align-content:center; text-align:center; padding:2cqw; }
  .cover-s .cov span { font-family:var(--script); font-size:10.5cqw; line-height:.9; color:#ff7a1a; } .cover-s .cov small { display:block; color:#fff; font-size:max(9px,1.9cqw); margin-top:1.4cqw; letter-spacing:.08em; }
  .toc-s { background:linear-gradient(135deg,#fbf9f9,#e5e0e0); color:#111; padding:4.2cqw 3.6cqw 3.4cqw; display:flex; flex-direction:column; text-align:left; }
  .toc-s h6 { margin:0; display:flex; justify-content:space-between; align-items:center; font-size:max(12px,2.7cqw); font-weight:700; padding-bottom:1.6cqw; border-bottom:.3cqw solid #111; } .toc-s h6 svg { width:max(14px,3.4cqw); height:max(14px,3.4cqw); }
  .toc-s ul { list-style:none; margin:2cqw 0 0; padding:0; flex:1; } .toc-s li { margin:.2cqw 0; }
  .toc-s li a, .toc-s li button { display:block; width:100%; text-align:left; background:none; border:0; padding:max(5px,1.1cqw) 0 max(5px,1.1cqw) max(14px,2.4cqw); font-size:max(11px,2.5cqw); font-weight:500; color:#111; cursor:pointer; position:relative; border-radius:1cqw; font-family:inherit; }
  .toc-s li a::before, .toc-s li button::before { content:""; position:absolute; left:0; top:50%; width:max(6px,1.1cqw); height:max(6px,1.1cqw); margin-top:calc(max(6px,1.1cqw) / -2); border-radius:50%; background:var(--amber); } .toc-s li a:hover, .toc-s li button:hover { background:rgba(255,176,58,.28); }
  .toc-s small { font-style:italic; font-size:max(9px,1.9cqw); color:#333; }
  @media (max-width:560px) { .ipad { width:min(88vw,380px); aspect-ratio:1 / 1.46; border-radius:7% / 5%; } .ipad-in { border-radius:5.2% / 3.6%; } .ipad .cam { left:50%; top:1.2%; margin-left:-.45cqw; margin-top:0; } .ipad-scr { grid-template-columns:1fr; border-radius:3% / 2%; } .cover-s { display:none; } .toc-s { padding:7cqw 6cqw 5cqw; } .toc-s li a, .toc-s li button { font-size:max(14px,4.4cqw); } .toc-s h6 { font-size:max(15px,5cqw); } .toc-s small { font-size:max(11px,3.4cqw); } }
  /* research paper reader on the iPad */
  .reader { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; background:#1b1b1f; color:#fff; }
  .ipad.reading .reader { opacity:1; pointer-events:auto; } .ipad.reading { cursor:default; }
  .rd-bar { display:flex; align-items:center; gap:1.6cqw; padding:1.2cqw 2cqw; background:#25252b; border-bottom:1px solid rgba(255,255,255,.08); flex:none; font-size:max(11px,1.9cqw); }
  .rd-back { background:none; border:0; color:var(--cyan); cursor:pointer; font:inherit; padding:.6cqw 1.2cqw; border-radius:99px; } .rd-back:hover { background:rgba(255,255,255,.08); }
  .rd-title { font-weight:600; } .rd-pg { margin-left:auto; color:#a1a1a6; font-variant-numeric:tabular-nums; }
  .rd-nav { display:flex; gap:.8cqw; } .rd-nav button { width:max(30px,3.8cqw); height:max(30px,3.8cqw); border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:max(15px,2.6cqw); } .rd-nav button:disabled { opacity:.3; cursor:default; } .rd-nav button:not(:disabled):hover { background:rgba(255,255,255,.26); }
  .rd-spread { flex:1; min-height:0; display:flex; justify-content:center; align-items:stretch; gap:.9cqw; padding:1.4cqw; perspective:1400px; touch-action:pan-y; user-select:none; }
  .rd-page { height:100%; aspect-ratio:8.5 / 11; flex:none; border:0; padding:0; background:#fff; border-radius:.4cqw; overflow:hidden; cursor:default; box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.55); }
  .rd-page img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
  .rd-spread.turn .rd-page { animation:pgIn .6s cubic-bezier(.2,.9,.3,1) both; } .rd-spread.turn .rd-page:first-child { transform-origin:100% 50%; } .rd-spread.turn .rd-page:last-child { transform-origin:0 50%; }
  @keyframes pgIn { from { opacity:0; transform:rotateY(var(--fr,-60deg)) scale(.97); } }
  @media (max-width:560px) { .rd-title { display:none; } .rd-spread { overflow-y:auto; align-items:flex-start; } .rd-page { height:auto; width:100%; } }
  /* scroll effect on the iPad */
  .pad-track { position:relative; height:230vh; } .pad-sticky { position:sticky; top:max(76px,calc(50vh - 280px)); }
  .pad-stage.rv { transition:none; transform:none; opacity:1; }
  .rd-bar { position:relative; } .rd-prog { position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--amber),var(--pink),var(--cyan)); }
  @media (prefers-reduced-motion:reduce) { .pad-track { height:auto; } .pad-sticky { position:static; } .ipad-w { transform:none; opacity:1; } }
  @media (max-width:560px) { .pad-track { height:210vh; } }
  /* single page on the iPad: landscape on larger screens, portrait on phones */
  .ipad { cursor:default; transform:none !important; transition:none; } .rd-page { cursor:default; }
  .rd-spread { align-items:center; justify-content:center; overflow:hidden; }
  .rd-spread.turn.fwd .rd-page { transform-origin:0 50%; } .rd-spread.turn.back .rd-page { transform-origin:100% 50%; }
  @media (min-width:561px) {
    .ipad { width:max(320px,min(900px,92vw,calc((100vh - 190px) * 1.52))); aspect-ratio:1.52 / 1; border-radius:4.2% / 6.4%; }
    .ipad-in { border-radius:3.1% / 4.7%; }
    .ipad .cam { left:.9%; top:50%; margin-left:0; margin-top:-.45cqw; }
    .ipad-scr { grid-template-columns:1fr; border-radius:1.6% / 2.5%; }
    .rd-spread { padding:1.1cqw; } .rd-page { height:100%; width:auto; max-width:100%; aspect-ratio:8.5 / 11; flex:none; }
    .pad-sticky { top:max(76px,calc(50vh - 300px)); }
  }
  @media (max-width:560px) {
    .ipad { width:max(300px,min(440px,90vw,calc((100vh - 190px) / 1.46))); aspect-ratio:1 / 1.46; border-radius:7% / 5%; }
    .ipad-in { border-radius:5.2% / 3.6%; } .ipad .cam { left:50%; top:1.2%; margin-left:-.45cqw; margin-top:0; } .ipad-scr { grid-template-columns:1fr; border-radius:3% / 2%; }
    .rd-spread { padding:1.6cqw 2cqw; } .rd-page { width:100%; height:auto; max-height:100%; }
    .pad-sticky { top:max(76px,calc(50vh - 330px)); }
  }
  /* the pages fill the iPad screen and scroll through it */
  .reader { overflow:hidden; display:block; }
  .rd-strip { position:absolute; left:0; top:0; width:100%; will-change:transform; }
  .rd-pg { display:block; width:100%; height:auto; background:#fff; margin:0 0 6px; user-select:none; pointer-events:none; }
  .reader .rd-prog { position:absolute; left:0; top:0; bottom:auto; height:3px; width:0; z-index:3; background:linear-gradient(90deg,var(--amber),var(--pink),var(--cyan)); }
  @media (prefers-reduced-motion:reduce) { .reader { overflow-y:auto; } .rd-strip { position:static; transform:none !important; } }
.cc .cl { font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
  /* project card without the symbol + the fault lab */
  .pcards.one .pc .art { place-items:center start; padding:28px; } .pcards.one .pc .art b { position:static; font-size:clamp(22px,2.8vw,32px); line-height:1.1; }
  .pc .try { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:99px; background:color-mix(in srgb,var(--acc) 18%,transparent); animation:tryp 2.4s ease-in-out infinite; } @keyframes tryp { 50% { transform:translateY(3px); } }
  .lab { margin-top:18px; padding:30px; --acc:var(--amber); }
  .lab-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:start; }
  .scope { position:relative; height:clamp(220px,28vw,300px); background:#050506; border:1px solid var(--line); border-radius:20px; overflow:hidden; } .scope canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .scope-tag { position:absolute; top:12px; left:14px; padding:5px 12px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.06em; background:rgba(0,191,99,.18); color:#4ee89a; } .scope-tag.warn { background:rgba(255,176,58,.2); color:#ffc468; animation:blink .8s steps(1) infinite; } .scope-tag.bad { background:rgba(255,49,49,.22); color:#ff8a8a; } .scope-tag.idle { background:rgba(255,255,255,.1); color:#c7c7cc; }
  .scope-key { position:absolute; top:12px; right:14px; display:flex; gap:10px; font-size:12px; }
  .verdict { margin-top:14px; padding:16px 18px; border-radius:18px; border:1px solid var(--line); background:#101012; } .verdict b { display:block; font-size:21px; letter-spacing:-.02em; } .verdict span { display:block; margin-top:4px; color:#c7c7cc; font-size:14px; }
  .verdict.ok { border-color:#1d8f58; } .verdict.ok b { color:#4ee89a; } .verdict.warn { border-color:#b9831f; } .verdict.warn b { color:#ffc468; } .verdict.bad { border-color:#b33; background:#1c0b0b; } .verdict.bad b { color:#ff8a8a; } .verdict.idle b { color:#c7c7cc; }
  .lab-r h5 { margin:18px 0 10px; font-size:14px; color:var(--muted); font-weight:500; } .lab-r h5:first-child { margin-top:0; }
  .sl { display:block; margin-bottom:10px; } .sl-l { display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:2px; } .sl-l i { width:10px; height:10px; border-radius:50%; } .sl-l output { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
  .sl input[type=range] { width:100%; accent-color:var(--amber); height:28px; cursor:pointer; }
  .lab-rules { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
  .lab-rules li { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:#101012; border:1px solid var(--line); } .lab-rules b { display:block; font-size:15px; } .lab-rules small { display:block; color:var(--muted); font-size:12px; line-height:1.35; margin-top:2px; } .rv-val { font-size:12px; color:#c7c7cc; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .lamp { width:14px; height:14px; border-radius:50%; background:#00bf63; box-shadow:0 0 10px rgba(0,191,99,.7); } .lab-rules li.warn .lamp { background:#ffb03a; box-shadow:0 0 12px rgba(255,176,58,.9); animation:blink .7s steps(1) infinite; } .lab-rules li.bad .lamp { background:#ff3131; box-shadow:0 0 14px rgba(255,49,49,.95); } .lab-rules li.bad { border-color:#b33; } .lab-rules li.idle .lamp { background:#4a4a50; box-shadow:none; }
  @media (max-width:900px) { .lab-grid { grid-template-columns:1fr; } .lab { padding:20px; } }
  /* one alignment and one text size for every section heading and intro paragraph */
  .vol-top, .contact-head { text-align:left; }
  .lead, .vol-copy { font-size:clamp(17px,1.9vw,21px); line-height:1.5; color:#c7c7cc; max-width:62ch; margin:18px 0 0; text-align:left; }
  .vol-top .lead, .contact-head .lead { margin-inline:0; }
  .orgs { justify-content:center; }
  .vol-copy { max-width:none; text-align:justify; }
  #projects .lead { max-width:none; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  /* sentences are justified */
  .lead, .vol-copy, .stmt, .about-co, .exp-panel li, .pc p { text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  /* more interaction */
  .net { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
  .dots-nav { position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:55; display:none; flex-direction:column; gap:4px; } @media (min-width:1000px) { .dots-nav { display:flex; } }
  .dots-nav a { position:relative; display:grid; place-items:center; width:28px; height:28px; } .dots-nav i { width:8px; height:8px; border-radius:50%; background:#58585f; transition:background .25s,transform .25s; }
  .dots-nav a:hover i, .dots-nav a:focus-visible i, .dots-nav a.on i { background:var(--amber); transform:scale(1.6); }
  .dots-nav span { position:absolute; right:34px; white-space:nowrap; padding:5px 12px; border-radius:99px; background:rgba(28,28,32,.94); color:#fff; font-size:12px; opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .2s,transform .2s; } .dots-nav a:hover span, .dots-nav a:focus-visible span { opacity:1; transform:none; }
  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:56px; }
  .stat { display:block; text-align:left; border:0; padding:22px 22px 20px; color:inherit; font:inherit; cursor:pointer; border-radius:22px; } .stat .n { display:block; font-size:clamp(38px,5.4vw,60px); font-weight:700; letter-spacing:-.045em; line-height:1; background:linear-gradient(95deg,var(--amber),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
  .stat span { display:block; margin-top:10px; font-size:15px; color:#e1e1e6; font-weight:500; } .stat em { display:block; font-style:normal; font-size:13px; line-height:1.4; color:var(--muted); max-height:0; opacity:0; overflow:hidden; text-align:left; transition:max-height .35s ease,opacity .3s,margin .3s; }
  .stat:hover em, .stat:focus-visible em, .stat.open em { max-height:90px; opacity:1; margin-top:8px; }
  .totop { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); width:48px; height:48px; border-radius:50%; border:0; background:#1d1d1f; color:#fff; font-size:20px; cursor:pointer; z-index:70; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s,transform .3s,background .2s,color .2s; box-shadow:0 8px 24px rgba(0,0,0,.5); } .totop.on { opacity:1; pointer-events:auto; transform:none; } .totop:hover { background:var(--amber); color:#000; }
  .btn, .pill { position:relative; overflow:hidden; } .btn, .pill, .soc, .copy { transition-property:transform,background,translate; } .cc, .role-c { transition:opacity .8s ease,transform .3s ease-out; will-change:transform; }
  .ripple { position:absolute; border-radius:50%; background:rgba(0,0,0,.22); transform:scale(0); animation:rip .65s ease-out forwards; pointer-events:none; } @keyframes rip { to { transform:scale(1); opacity:0; } }
  @media (max-width:760px) { .stats { grid-template-columns:1fr 1fr; } }
  /* live data */
  .live { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
  .live-head { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; align-items:baseline; margin-bottom:14px; } .live-head h4 { margin:0; font-size:22px; letter-spacing:-.03em; } .live-head span { color:var(--muted); font-size:13px; }
  .live-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
  .lcard { background:#101012; border:1px solid var(--line); border-radius:18px; padding:16px 18px; } .lcard h5 { margin:0 0 10px; font-size:14px; color:var(--muted); font-weight:500; }
  .lcard canvas { width:100%; height:84px; display:block; margin-bottom:6px; background:#060607; border-radius:12px; }
  .lr { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #1d1d21; font-size:14px; } .lr span { color:#c7c7cc; } .lr b { font-weight:600; font-variant-numeric:tabular-nums; text-align:right; } .lr b.good { color:#4ee89a; } .lr b.bad { color:#ff8a8a; } .lr b.warn { color:#ffc468; }
  .live-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px; padding:12px 14px; border-radius:16px; background:#101012; border:1px solid var(--line); }
  .lpill { padding:6px 12px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.04em; background:#26262b; color:#a1a1a6; } .lpill.on { background:rgba(0,191,99,.18); color:#4ee89a; }
  .lmsg { flex:1; min-width:200px; color:#c7c7cc; font-size:13px; }
.quick { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px; margin-bottom:6px; border-radius:16px; background:#101012; border:1px solid var(--line); } .quick span { flex:1; min-width:170px; font-size:12px; color:var(--muted); }
  /* the MPR-300 project container */
  .mpr { margin-top:48px; padding:30px; }
  .mpr-head { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-end; justify-content:space-between; margin-bottom:26px; } .mpr-head small { color:var(--amber); font-weight:600; font-size:13px; letter-spacing:.04em; } .mpr-head h3 { margin:4px 0 0; font-size:clamp(22px,3vw,34px); letter-spacing:-.035em; line-height:1.1; max-width:22em; }
  .mpr-panel[hidden] { display:none; } .mpr .pcards { margin-top:0; } .mpr .play, .mpr .lab { margin-top:0; padding:0; }
  .mpr-go { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; } .mgo { text-align:left; border:1px solid var(--line); background:#101012; border-radius:20px; padding:20px 22px; color:inherit; font:inherit; cursor:pointer; transition:border-color .25s,transform .25s,background .25s; } .mgo:hover { border-color:var(--amber); background:#16161a; transform:translateY(-3px); }
  .mgo b { display:block; font-size:19px; letter-spacing:-.02em; } .mgo span { display:block; margin:6px 0 12px; color:#c7c7cc; font-size:14px; line-height:1.45; } .mgo em { font-style:normal; color:var(--cyan); font-size:14px; font-weight:600; }
  @media (max-width:760px) { .mpr { padding:20px; } .mpr-go { grid-template-columns:1fr; } }
  /* second project: HPCL */
  .pcard2 { margin-top:18px; display:grid; grid-template-columns:minmax(240px,.7fr) 1.5fr; overflow:hidden; }
  .pc2-art { background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 32%,#000),#050506); padding:30px; display:flex; flex-direction:column; justify-content:center; gap:10px; } .pc2-art .logo-tile { margin:0 0 6px; }
  .pc2-art small { color:var(--amber); font-weight:600; font-size:13px; letter-spacing:.04em; } .pc2-art b { font-size:clamp(22px,2.8vw,32px); line-height:1.1; letter-spacing:-.03em; } .pc2-art b span { display:block; font-weight:400; font-size:15px; opacity:.8; margin-top:6px; letter-spacing:0; }
  .pc2-body { padding:32px 36px; align-self:center; } .pc2-body h3 { margin:0 0 12px; font-size:24px; line-height:1.25; letter-spacing:-.025em; } .pc2-body p { margin:0; color:#c7c7cc; font-size:16px; line-height:1.55; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  .pc2-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 24px; margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line); } .pc2-facts dt { font-size:12px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; } .pc2-facts dd { margin:3px 0 0; font-size:15px; color:#e8e8ed; }
  @media (max-width:760px) { .pcard2 { grid-template-columns:1fr; } .pc2-body { padding:24px; } }
  .mpr-head { margin-bottom:22px; justify-content:flex-start; }
  .mpr .pcard2 { margin-top:0; background:#101012; border:1px solid var(--line); }
  .fyp .pc2-art { background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 34%,#000),#050506); } .fyp .pc2-art small { color:var(--pink); }
  /* iPad Pro style camera bar in the top bezel (no notch in the screen) */
  .ipad .cam { left:50%; top:.55cqw; width:3.8cqw; height:.9cqw; margin:0 0 0 -1.9cqw; border-radius:99px; background:radial-gradient(circle at 24% 50%,#3b4566 0 .2cqw,#0c0c12 .26cqw),radial-gradient(circle at 56% 50%,#22222c 0 .12cqw,transparent .16cqw),radial-gradient(circle at 80% 50%,#22222c 0 .12cqw,transparent .16cqw),#0a0a0e; box-shadow:0 0 0 .15cqw #15151b; }
  /* iPad status bar: time, date, signal, 5G, Wi-Fi, battery, and the home indicator */
  .reader { --sb:max(17px,3.3cqw); } .rd-strip { top:var(--sb); }
  .sbar { position:absolute; left:0; right:0; top:0; height:var(--sb); z-index:4; display:flex; align-items:center; justify-content:space-between; padding:0 2.4cqw; background:#0c0c0f; color:#fff; font-size:max(8px,1.45cqw); font-weight:600; letter-spacing:.01em; }
  .sb-l, .sb-r { display:flex; align-items:center; gap:max(5px,1cqw); } .sb-l b { font-weight:700; } .sb-l span { font-weight:500; opacity:.9; }
  .sb-sig { display:flex; align-items:flex-end; gap:.22cqw; height:max(7px,1.3cqw); } .sb-sig i { width:max(2px,.4cqw); background:#fff; border-radius:.1cqw; } .sb-sig i:nth-child(1) { height:30%; } .sb-sig i:nth-child(2) { height:52%; } .sb-sig i:nth-child(3) { height:75%; } .sb-sig i:nth-child(4) { height:100%; }
  .sb-net { font-weight:700; } .sb-wifi { width:max(11px,1.9cqw); height:auto; } .sb-pct { font-weight:600; }
  .sb-bat { position:relative; width:max(18px,2.9cqw); height:max(8px,1.3cqw); border:max(1px,.14cqw) solid rgba(255,255,255,.65); border-radius:max(2px,.4cqw); } .sb-bat i { position:absolute; left:max(1px,.14cqw); top:max(1px,.14cqw); bottom:max(1px,.14cqw); width:80%; background:#fff; border-radius:max(1px,.2cqw); } .sb-bat::after { content:""; position:absolute; right:calc(max(2px,.35cqw) * -1); top:28%; width:max(1.5px,.22cqw); height:44%; background:rgba(255,255,255,.65); border-radius:0 .2cqw .2cqw 0; }
  .home-ind { position:absolute; left:50%; bottom:max(4px,.9cqw); width:max(46px,14cqw); height:max(3px,.55cqw); margin-left:calc(max(46px,14cqw) / -2); border-radius:99px; background:rgba(20,20,24,.55); box-shadow:0 0 0 max(1px,.12cqw) rgba(255,255,255,.55); z-index:4; pointer-events:none; }
  /* thinner bezel: the camera bar shrinks to fit it */
  .ipad .cam { top:.22cqw; width:3.2cqw; height:.72cqw; margin-left:-1.6cqw; background:radial-gradient(circle at 24% 50%,#3b4566 0 .16cqw,#0c0c12 .2cqw),radial-gradient(circle at 56% 50%,#22222c 0 .09cqw,transparent .12cqw),radial-gradient(circle at 80% 50%,#22222c 0 .09cqw,transparent .12cqw),#0a0a0e; box-shadow:0 0 0 .1cqw #15151b; }
  /* a visible notch: a black camera tab at the top centre of the screen, on a light status bar */
  .ipad .cam { display:none; }
  .sbar { background:#f4f4f7; color:#111; box-shadow:0 1px 0 rgba(0,0,0,.09); }
  .sb-sig i { background:#111; } .sb-bat { border-color:rgba(0,0,0,.45); } .sb-bat i { background:#111; } .sb-bat::after { background:rgba(0,0,0,.45); }
  .notch { position:absolute; left:50%; top:0; width:max(64px,11.5cqw); height:calc(var(--sb) * .94); margin-left:calc(max(64px,11.5cqw) / -2); background:#000; border-radius:0 0 max(8px,1.5cqw) max(8px,1.5cqw); z-index:5; display:flex; align-items:center; justify-content:center; gap:max(5px,1.1cqw); pointer-events:none; box-shadow:0 0 0 max(1px,.12cqw) rgba(255,255,255,.06); }
  .notch .lens { width:max(5px,1cqw); height:max(5px,1cqw); border-radius:50%; background:radial-gradient(circle at 35% 35%,#5a6a9a,#10131f 60%); box-shadow:0 0 0 max(1px,.16cqw) #1b1b22; } .notch .ir { width:max(3px,.55cqw); height:max(3px,.55cqw); border-radius:50%; background:#1a1a22; }
  /* HPCL project: about + working model */
  .hproj { margin-top:18px; padding:30px; } .hproj .pcard2 { margin-top:0; background:#101012; border:1px solid var(--line); }
  .hp-about { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:16px; } .hpa { background:#101012; border:1px solid var(--line); border-radius:20px; padding:20px 22px; } .hpa h4 { margin:0 0 8px; font-size:17px; letter-spacing:-.02em; } .hpa p { margin:0; color:#c7c7cc; font-size:14px; line-height:1.55; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  .mpr-go.one { grid-template-columns:1fr; }
  .hm-note { margin:0 0 14px; padding:10px 14px; border-radius:14px; background:rgba(255,176,58,.1); color:#ffc468; font-size:13px; }
  .hm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; } .hm-stats div { background:#101012; border:1px solid var(--line); border-radius:16px; padding:14px 16px; } .hm-stats b { display:block; font-size:22px; letter-spacing:-.03em; } .hm-stats span { color:var(--muted); font-size:12px; }
  .hm-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .hm-search { flex:1; min-width:220px; } .hm-search input, .hm-add input, .hm-add select, .hm-bar select { width:100%; height:44px; padding:0 14px; border-radius:14px; border:1px solid var(--line); background:#101012; color:#fff; font:inherit; font-size:15px; } .hm-bar select { width:auto; } .hm-search input:focus, .hm-add input:focus { outline:2px solid var(--amber); outline-offset:1px; }
  .hm-chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; } .hm-chips .fchip small { opacity:.65; margin-left:4px; }
  .hm-add { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; padding:14px; border-radius:16px; background:#101012; border:1px dashed #3a3a40; } .hm-add input { flex:2; min-width:200px; width:auto; } .hm-add select { width:auto; }
  .hm-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
  .hm-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; max-height:520px; overflow:auto; }
  .dcard { position:relative; display:flex; align-items:stretch; background:#101012; border:1px solid var(--line); border-radius:16px; transition:border-color .2s,background .2s; } .dcard:hover { border-color:#4a4a52; } .dcard.sel { border-color:var(--amber); background:#16140f; }
  .dopen { flex:1; display:flex; gap:14px; align-items:center; text-align:left; padding:14px 16px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; border-radius:16px; } .dt b { display:block; font-size:15px; } .dt small { display:block; color:var(--muted); font-size:12px; margin-top:2px; } .dt em { display:inline-block; margin-top:6px; padding:2px 10px; border-radius:99px; background:#26262b; font-style:normal; font-size:11px; color:#c7c7cc; }
  .dbadge { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-style:normal; font-size:11px; font-weight:800; color:#fff; letter-spacing:.03em; }
  .dstar { flex:none; width:48px; border:0; background:none; color:#8e8e93; font-size:20px; cursor:pointer; border-radius:0 16px 16px 0; } .dstar.on, .dstar:hover { color:var(--amber); }
  .hm-empty { padding:24px; text-align:center; color:var(--muted); background:#101012; border-radius:16px; }
  .hm-prev { position:sticky; top:96px; background:#101012; border:1px solid var(--line); border-radius:20px; padding:20px; min-height:300px; }
  .hm-ph { display:grid; place-items:center; text-align:center; min-height:260px; color:var(--muted); } .hm-ph b { color:#e8e8ed; display:block; margin-bottom:6px; }
  .pv-head { display:flex; gap:12px; align-items:center; } .pv-head b { display:block; font-size:17px; line-height:1.25; } .pv-head small { color:var(--muted); font-size:12px; }
  .pv-page { margin:16px 0; padding:16px; border-radius:12px; background:#f5f5f7; display:grid; gap:8px; } .ln { display:block; height:7px; border-radius:4px; background:#c9c9d0; } .ln.h { height:10px; background:#8b8b94; }
  .pv-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0 0 14px; } .pv-facts dt { font-size:11px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; } .pv-facts dd { margin:2px 0 0; font-size:14px; }
  .pv-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } .pv-tags span { font-size:12px; color:var(--cyan); background:rgba(24,224,255,.08); padding:3px 10px; border-radius:99px; }
  .pv-rec { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .pv-rec small { width:100%; color:var(--muted); font-size:12px; }
  @media (max-width:900px) { .hm-grid { grid-template-columns:1fr; } .hm-prev { position:static; } .hproj { padding:20px; } }
  /* the bookshelf */
  .hm-views { display:flex; gap:6px; }
  .hm-main { min-width:0; }
  .shelves { display:grid; gap:10px; padding:18px 16px 6px; border-radius:20px; background:linear-gradient(#1d140d,#120c08); border:1px solid #2d1f14; }
  .shelf { position:relative; padding-top:22px; } .shelf-name { position:absolute; left:6px; top:0; margin:0; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#b99a76; }
  .shelf-row { display:flex; align-items:flex-end; gap:4px; min-height:176px; padding:0 12px; overflow-x:auto; overflow-y:hidden; border-bottom:14px solid #5a3820; border-image:linear-gradient(#85582f,#4a2d17) 1; box-shadow:0 12px 14px -4px rgba(0,0,0,.55); }
  .shelf-row + .shelf-row { margin-top:12px; }
  .slot { position:relative; flex:none; display:flex; align-items:flex-end; } .slot.empty { cursor:pointer; } .slot.empty::before { content:""; position:absolute; inset:0; margin:auto 0 0; height:var(--gap,150px); border:1px dashed rgba(255,255,255,.16); border-radius:3px; }
  .book { position:relative; display:block; width:var(--w); height:var(--h); padding:0; border:0; border-radius:3px 3px 1px 1px; cursor:pointer; color:#fff; background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.08) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.34)),var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); transition:transform .45s cubic-bezier(.3,1.35,.5,1),opacity .4s ease; transform-origin:bottom center; }
  .book::before, .book::after { content:""; position:absolute; left:0; right:0; height:3px; background:rgba(255,255,255,.55); } .book::before { top:10px; } .book::after { bottom:12px; }
  .book span { position:absolute; left:0; right:0; top:22px; bottom:26px; display:block; writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; font-weight:600; letter-spacing:.01em; line-height:var(--w); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
  .book:hover { transform:translateY(-8px); } .book:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
  .book.out { transform:translateY(-34px) rotate(-4deg) scale(1.04); opacity:0; pointer-events:none; }
  .hm-hint { margin:10px 0 0; color:var(--muted); font-size:12px; text-align:center; }
  .pv-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
  /* the book on the table: it opens in 3D */
  .hm-prev { container-type:inline-size; }
  .b3 { --bw:min(210px,calc((100cqw - 40px) / 2)); position:relative; perspective:1200px; height:calc(var(--bw) * 1.34 + 14px); display:flex; justify-content:center; align-items:center; cursor:pointer; outline:none; margin-top:4px; } .b3:focus-visible .b3-front { outline:2px solid var(--amber); }
  .b3-in { position:relative; width:var(--bw); height:calc(var(--bw) * 1.34); transform-style:preserve-3d; transform:rotateY(-16deg) rotateX(3deg); transition:transform .9s cubic-bezier(.3,.9,.3,1); animation:bookOut .75s cubic-bezier(.2,.9,.3,1); } .b3.open .b3-in { transform:translateX(calc(var(--bw) / 2)) rotateY(0) rotateX(0); }
  @keyframes bookOut { from { opacity:0; transform:translate3d(-60px,30px,0) rotateY(70deg) scale(.6); } }
  .b3-cover { position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.3,.9,.3,1); } .b3.open .b3-cover { transform:rotateY(-168deg); }
  .b3-front, .b3-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px 8px 8px 3px; box-shadow:4px 0 0 #e9e2d1,7px 0 0 #d9d1bd,10px 12px 26px rgba(0,0,0,.55); }
  .b3-front { background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.1) 9%,rgba(0,0,0,0) 30%),var(--c); color:#fff; padding:calc(var(--bw) * .1) calc(var(--bw) * .1) calc(var(--bw) * .1) calc(var(--bw) * .16); display:flex; flex-direction:column; gap:calc(var(--bw) * .04); } .b3-front small { font-size:max(9px,calc(var(--bw) * .05)); letter-spacing:.12em; text-transform:uppercase; opacity:.8; } .b3-front b { font-size:max(13px,calc(var(--bw) * .105)); line-height:1.15; letter-spacing:-.02em; } .b3-front span { margin-top:auto; font-size:max(10px,calc(var(--bw) * .06)); opacity:.85; } .b3-front .dbadge { position:absolute; right:calc(var(--bw) * .08); bottom:calc(var(--bw) * .08); width:calc(var(--bw) * .2); height:calc(var(--bw) * .2); font-size:max(9px,calc(var(--bw) * .055)); border-radius:calc(var(--bw) * .04); }
  .b3-back { transform:rotateY(180deg); background:linear-gradient(#f4efe3,#e6dfcf); color:#7b7261; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:max(10px,calc(var(--bw) * .055)); } .b3-back small { letter-spacing:.12em; text-transform:uppercase; }
  .b3-page { position:absolute; inset:0; background:#f4efe3; color:#2a261f; border-radius:2px 8px 8px 2px; padding:calc(var(--bw) * .09); box-shadow:inset 10px 0 14px -6px rgba(0,0,0,.18),4px 0 0 #e9e2d1,7px 0 0 #d9d1bd,10px 12px 26px rgba(0,0,0,.5); overflow:hidden; } .b3-page b { display:block; font-size:max(11px,calc(var(--bw) * .075)); line-height:1.2; } .b3-page small { display:block; color:#7b7261; font-size:max(9px,calc(var(--bw) * .05)); margin:3px 0 calc(var(--bw) * .06); } .b3-page dl { margin:0; display:grid; gap:calc(var(--bw) * .035); } .b3-page dt { font-size:max(8px,calc(var(--bw) * .045)); text-transform:uppercase; letter-spacing:.06em; color:#8d8472; } .b3-page dd { margin:0; font-size:max(10px,calc(var(--bw) * .06)); } .b3-page p { margin:calc(var(--bw) * .06) 0 0; color:#2f6fd1; font-size:max(9px,calc(var(--bw) * .052)); }
  @media (prefers-reduced-motion:reduce) { .b3-in, .b3-cover { transition:none; animation:none; } .book { transition:none; } }
  /* compact bookcase */
  .shelves { gap:0; padding:12px 12px 2px; border-radius:16px; }
  .shelf-row { position:relative; min-height:92px; gap:3px; padding:0 8px; border-bottom-width:9px; box-shadow:0 8px 10px -4px rgba(0,0,0,.5); overflow-x:auto; } .shelf-row + .shelf-row { margin-top:10px; }
  .book { border-radius:2px 2px 1px 1px; } .book::before { top:6px; height:2px; } .book::after { bottom:8px; height:2px; } .book span { top:14px; bottom:16px; font-size:10px; font-weight:600; } .book:hover { transform:translateY(-5px); } .book.out { transform:translateY(-24px) rotate(-4deg) scale(1.04); }
  .shelf-label { display:flex; align-items:center; gap:8px; padding:8px 6px 6px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#f3dfc0; } .shelf-label small { font-weight:500; letter-spacing:0; text-transform:none; color:#b99a76; font-size:12px; } .shelf-label .cdot { margin-right:0; }
  /* brass shelf plates: each shelf hangs a riveted nameplate on two little chains (it swings when you point at it) */
  .shelf-label { display:block; padding:16px 6px 8px; font-size:inherit; letter-spacing:0; text-transform:none; color:inherit; }
  .plate { position:relative; display:inline-flex; align-items:center; gap:9px; padding:6px 20px; margin-left:14px; border-radius:5px; color:#3d2a08; transform-origin:50% -16px; background:linear-gradient(135deg,#f0d38c 0%,#c9a24a 28%,#8f6a22 52%,#d9b765 78%,#a37a2c 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.55); cursor:default; }
  .plate::before, .plate::after { content:""; position:absolute; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff3cf,#7a5a1c); box-shadow:0 0 0 1px rgba(0,0,0,.25); } .plate::before { left:6px; } .plate::after { right:6px; }
  .plate b { font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 0 rgba(255,255,255,.5); }
  .plate small { font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; padding:1px 8px; border-radius:99px; background:rgba(61,42,8,.18); box-shadow:inset 0 1px 2px rgba(0,0,0,.25); color:#3d2a08; }
  .enamel { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.4); }
  .chain { position:absolute; top:-16px; width:2px; height:16px; background:repeating-linear-gradient(#d8b565 0 3px,#6a4f1b 3px 5px); } .chain.l { left:26px; } .chain.r { right:26px; }
  .plate:hover { animation:plateSwing 1.5s ease-in-out; } @keyframes plateSwing { 15% { transform:rotate(3.4deg); } 35% { transform:rotate(-2.6deg); } 55% { transform:rotate(1.5deg); } 75% { transform:rotate(-.7deg); } }
  @media (prefers-reduced-motion:reduce) { .plate:hover { animation:none; } }
  .shelf-tag { position:absolute; left:10px; top:3px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#b99a76; pointer-events:none; }
  .cdot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
  .b3 { --bw:min(176px,calc((100cqw - 40px) / 2)); }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .hm-chips .fchip[aria-pressed="true"], .pv-rec .fchip:hover { background:rgba(255,176,58,.18); border-color:var(--amber); color:#ffd08a; }
  /* very eye-catching: aurora light, gradient headlines, glowing buttons, a skills ticker, coloured section glows */
  .aurora { position:fixed; inset:-20%; z-index:-1; pointer-events:none; background:radial-gradient(38vmax 38vmax at 12% 18%,rgba(255,45,135,.22),transparent 60%),radial-gradient(34vmax 34vmax at 88% 26%,rgba(24,224,255,.17),transparent 60%),radial-gradient(40vmax 40vmax at 55% 92%,rgba(138,92,255,.22),transparent 60%); animation:aurora 28s ease-in-out infinite alternate; will-change:transform; }
  @keyframes aurora { to { transform:translate3d(3%,-2%,0) rotate(6deg) scale(1.08); } }
  .big, .hero h1 { background:linear-gradient(100deg,#fff 0%,#fff 30%,#ffd27a 58%,#ff6aa5 82%,#8a5cff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
  .btn.amber { background:linear-gradient(95deg,#ffc15e,#ff8a2a); box-shadow:0 12px 34px -10px rgba(255,150,40,.85); } .btn.amber:hover { background:linear-gradient(95deg,#ffd07f,#ff9a45); }
  .cc:hover, .role-c:hover, .stat:hover, .hpa:hover, .dcard:hover { box-shadow:0 0 0 1px rgba(255,176,58,.3),0 26px 70px -30px rgba(255,45,135,.55); }
  .sec { position:relative; isolation:isolate; } .sec::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(48% 38% at var(--gx,85%) 4%,var(--gc,rgba(255,176,58,.16)),transparent 70%); }
  #about { --gc:rgba(255,176,58,.16); --gx:85%; } #experience { --gc:rgba(255,45,135,.16); --gx:12%; } #education { --gc:rgba(24,224,255,.14); --gx:88%; } #projects { --gc:rgba(138,92,255,.18); --gx:10%; } #volunteer { --gc:rgba(255,45,135,.14); --gx:82%; } #contact { --gc:rgba(24,224,255,.16); --gx:50%; }
  @media (prefers-reduced-motion:reduce) { .aurora { animation:none; } }
  .hero .actions { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .hero .swrow { margin-top:26px; }
  .f select { background:var(--s2); border:1.5px solid var(--line); border-radius:14px; color:#fff; padding:0 14px; font:inherit; font-size:16px; min-height:50px; } .f .ct { align-self:flex-end; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; } .f .ct.low { color:var(--amber); }
  .f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color:var(--red); }
  .msg-done { margin-top:16px; padding:16px 18px; border-radius:16px; background:rgba(0,191,99,.1); border:1px solid rgba(0,191,99,.4); } .msg-done b { display:block; color:#4ee89a; font-size:17px; } .msg-done p { margin:6px 0 0; color:#c7c7cc; font-size:14px; } .msg-done .mdn { color:var(--muted); font-size:13px; } .msg-done .mdb { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .msg-done[hidden] { display:none; }
  /* resume viewer */
  .rview { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background:rgba(0,0,0,.84); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .rview[hidden] { display:none; }
  .rv-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#fff; flex:none; } .rv-bar b { font-size:15px; } .rv-sp { flex:1; } .rv-x { width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; } .rv-x:hover { background:rgba(255,255,255,.26); }
  .rv-scroll { flex:1; overflow:auto; padding:6px 12px 40px; }
  .rv-paper { max-width:820px; margin:0 auto; background:#fff; color:#1a1a1a; padding:clamp(22px,5vw,52px); border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6); font-size:13.5px; line-height:1.5; text-align:left; }
  .rv-paper h1 { margin:0; font-size:30px; letter-spacing:-.03em; line-height:1.1; color:#111; background:none; -webkit-text-fill-color:#111; } .rv-sub { margin:4px 0 0; color:#444; font-size:14px; } .rv-con { margin:2px 0 6px; color:#555; } .rv-con a { color:#1a56c8; }
  .rv-paper section h2 { margin:20px 0 9px; padding-bottom:4px; border-bottom:1px solid #cfcfcf; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#333; background:none; -webkit-text-fill-color:#333; font-weight:700; }
  .rv-paper p { margin:0 0 6px; color:#222; } .rr { margin-bottom:12px; } .rr-h { display:flex; justify-content:space-between; gap:16px; align-items:baseline; } .rr-h b { display:block; font-size:14px; color:#111; } .rr-h span { display:block; color:#555; font-size:12.5px; } .rr-h em { flex:none; font-style:normal; color:#555; font-size:12.5px; white-space:nowrap; }
  .rv-paper ul { margin:4px 0 0; padding-left:18px; } .rv-paper li { margin:2px 0; color:#222; }
  @media (max-width:560px) { .rr-h { flex-direction:column; gap:2px; } .rr-h em { white-space:normal; } }
  @media print { body.printing-resume > *:not(#resumeView) { display:none !important; } body.printing-resume { background:#fff !important; } #resumeView { position:static !important; display:block !important; background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .rv-bar { display:none !important; } .rv-scroll { overflow:visible !important; padding:0 !important; } .rv-paper { max-width:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; } @page { margin:14mm; } }
  /* hero: a bigger bulb with a soft glow, and a shorter hero so the next section peeks in */
  .hero { min-height:calc(100vh - 56px - 140px); min-height:calc(100svh - 56px - 140px); padding:24px 0; }
  .bulbwrap { position:relative; width:min(100%,440px,max(340px,calc((100vh - 56px - 140px - 48px) * .714))); width:min(100%,440px,max(340px,calc((100svh - 56px - 140px - 48px) * .714))); }
  .bulbwrap::before { content:""; position:absolute; left:50%; top:36%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(255,176,58,.26),rgba(255,140,40,.09) 55%,transparent 75%); pointer-events:none; z-index:-1; opacity:1; transition:opacity .8s; }
  .hero.on .bulbwrap::before { opacity:.4; }
  #about { padding-top:56px; }
  @media (max-width:900px) { .hero { min-height:0; padding:24px 0 36px; } .bulbwrap { width:min(100%,340px); } #about { padding-top:72px; } }
  /* the stage: a photograph that comes alive when the power is switched on */
  .subwrap { justify-self:center; width:min(100%,540px); transform:translateY(calc(var(--hp,0) * 30px)) scale(calc(1 - var(--hp,0) * .12)); opacity:0; visibility:hidden; transition:opacity .35s,visibility 0s .35s; }
  .hero.on .subwrap { opacity:1; visibility:visible; transition:opacity .6s; }
  .sub-frame { position:relative; aspect-ratio:3 / 2; overflow:hidden; border-radius:22px; background:#050a1c; box-shadow:0 0 0 1px rgba(120,170,255,.18),0 30px 70px -30px rgba(0,0,0,.8); touch-action:pan-y; }
  .sub-load { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; color:#c7d2e6; font-variant-numeric:tabular-nums; } .sub-load .meter { flex:1; height:6px; border-radius:99px; background:#1a2434; overflow:hidden; } .sub-load .meter i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#00bf63,#ffb03a); transition:width .5s; }
  .sub-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
  .sw { position:relative; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:12px; background:#0d1522; border:1px solid #243149; color:#c7d2e6; font:inherit; font-size:12px; font-weight:600; cursor:pointer; user-select:none; text-align:left; transition:border-color .2s,background .2s; } .sw:hover { border-color:#4a5d80; }
  .sw input { position:absolute; opacity:0; pointer-events:none; } .sw b { font-weight:600; line-height:1.15; }
  .sw .trk { position:relative; flex:none; width:32px; height:18px; border-radius:99px; background:#33405a; transition:background .2s; } .sw .trk i { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; }
  .sw input:checked + .trk { background:#00bf63; } .sw input:checked + .trk i { transform:translateX(14px); } .sw input:focus-visible + .trk { outline:2px solid var(--amber); outline-offset:2px; }
  .sw.fault { justify-content:center; border-color:#5b2a2d; background:#1a0f12; color:#ffb4b4; } .sw.fault:hover:not(:disabled) { border-color:#ff5d5d; background:#26121a; } .sw.fault:disabled { opacity:.4; cursor:not-allowed; } .sw.fault:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
  #subCap { margin:10px auto 0; max-width:34em; min-height:3em; text-align:center; font-size:12.5px; line-height:1.45; color:#aab6cc; }
  @media (max-width:900px) { .subwrap { width:min(100%,380px); } }
  .sub3d-tip { position:absolute; left:10px; bottom:10px; padding:5px 11px; border-radius:99px; background:rgba(5,9,18,.8); border:1px solid rgba(120,170,255,.28); color:#dbe6ff; font-size:11.5px; font-weight:600; pointer-events:none; opacity:0; transition:opacity .15s; } .sub3d-tip.on { opacity:1; }
  .sub-hint { display:none; }
  .sub3d-views { position:absolute; top:10px; right:10px; display:flex; gap:5px; z-index:2; } .sub3d-views[hidden] { display:none; }
  .sub3d-views button { padding:4px 9px; border-radius:99px; border:1px solid rgba(120,170,255,.28); background:rgba(5,9,18,.72); color:#c7d2e6; font:inherit; font-size:10.5px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:border-color .2s,background .2s,color .2s; } .sub3d-views button:hover { border-color:#5b9bff; color:#fff; } .sub3d-views button[aria-pressed="true"] { background:#14263f; border-color:#5b9bff; color:#fff; }
  @media (max-width:520px) { .sub3d-views { top:6px; right:6px; gap:3px; } .sub3d-views button { padding:3px 7px; font-size:9.5px; } }
  .sub { position:absolute; inset:0; }
  .sub3d { position:absolute; inset:0; width:100%; height:100%; display:none; visibility:hidden; touch-action:pan-y; background:#050a1c; }
  .subwrap.has3d .sub3d { display:block; } .subwrap.has3d.ready3d .sub3d { visibility:visible; } .subwrap.has3d.ready3d .sub { display:none; }
  .sub-panel .sw b { font-size:11.5px; }
  /* smooth reveal: the scene eases in, then the controls follow one after another */
  .sub-frame { opacity:0; transform:translateY(22px) scale(.95); filter:blur(9px); will-change:transform,opacity,filter; transition:opacity .35s ease,transform .35s ease,filter .35s ease; }
  .hero.on .sub-frame { opacity:1; transform:none; filter:none; transition:opacity 1s cubic-bezier(.22,.8,.2,1) .1s,transform 1.3s cubic-bezier(.22,.9,.2,1) .1s,filter 1s ease .1s; }
  .sub-frame::after { content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none; z-index:1; box-shadow:inset 0 0 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05); }
  .sub-frame::before { content:""; position:absolute; inset:-10% -40%; z-index:1; pointer-events:none; opacity:0; transform:translateX(-80%); background:linear-gradient(105deg,transparent 42%,rgba(160,200,255,.16) 50%,transparent 58%); }
  .hero.on .sub-frame::before { animation:subsweep 1.8s cubic-bezier(.3,.6,.3,1) .6s 1 both; } @keyframes subsweep { 0% { transform:translateX(-80%); opacity:0; } 15% { opacity:1; } 100% { transform:translateX(80%); opacity:0; } }
  .sub-load, .sub-panel, .sub-hint { opacity:0; transform:translateY(14px); transition:opacity .25s ease,transform .25s ease; }
  .hero.on .sub-load { opacity:1; transform:none; transition:opacity .7s ease .95s,transform .8s cubic-bezier(.2,.8,.2,1) .95s; } .hero.on .sub-panel { opacity:1; transform:none; transition:opacity .7s ease 1.1s,transform .8s cubic-bezier(.2,.8,.2,1) 1.1s; } .hero.on .sub-hint { opacity:1; transform:none; transition:opacity .7s ease 1.4s,transform .8s cubic-bezier(.2,.8,.2,1) 1.4s; }
  #subCap { opacity:0; transform:translateY(8px); transition:opacity .25s ease,transform .25s ease; } .hero.on #subCap { opacity:1; transform:none; transition:opacity .7s ease 1.25s,transform .8s cubic-bezier(.2,.8,.2,1) 1.25s; } .hero.on #subCap.swap { opacity:0; transform:translateY(4px); transition:opacity .17s ease,transform .17s ease; }
  .sub-load .meter i { transition:none; }
  @media (prefers-reduced-motion:reduce) { .sub-frame, .sub-load, .sub-panel, .sub-hint, #subCap { transform:none !important; filter:none !important; transition:opacity .2s !important; } .sub-frame::before { animation:none !important; } }
  /* VLSI project card */
  .vproj .pc2-art { background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 42%,#000),#050506); } .vproj .pc2-art small { color:#b9a0ff; }
  .vt-chip { width:84px; height:84px; margin-bottom:4px; } .vt-chip .core { animation:vtpulse 2.6s ease-in-out infinite; } @keyframes vtpulse { 50% { opacity:.5; } }
  .vproj .mpr-panel:not([hidden]) { animation:vwin .35s ease; } @keyframes vwin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .vw-hint { margin:6px 0 0; text-align:center; font-size:12.5px; color:#7f8fa8; }
  /* gates */
  .vg-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:start; } .vg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .vg-chip { padding:6px 14px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#c7d2e6; font:inherit; font-size:13px; font-weight:700; letter-spacing:.03em; cursor:pointer; } .vg-chip:hover { border-color:#5b9bff; } .vg-chip[aria-pressed="true"] { background:#14263f; border-color:#ffb03a; color:#ffb03a; }
  .vg-svg { display:block; width:100%; height:auto; background:#07101c; border:1px solid rgba(120,170,255,.2); border-radius:18px; } .vg-in { cursor:pointer; outline:none; } .vg-in:focus-visible rect { stroke:#fff; }
  .vg-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } .vg-table th { padding:8px 10px; text-align:center; font-size:12px; letter-spacing:.06em; color:#8fa3c4; border-bottom:1px solid #243149; } .vg-table td { padding:9px 10px; text-align:center; font-size:16px; font-weight:600; color:#c7d2e6; border-bottom:1px solid #162033; transition:background .2s; }
  .vg-table tr.on td { background:rgba(255,176,58,.14); color:#fff; } .vg-table td.y1 { color:#ffb03a; } .vg-table td.y0 { color:#6f819f; }
  .vg-stats { display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 8px; font-size:13px; color:#aab6cc; } .vg-stats b { color:#fff; font-size:18px; } .vg-stats #vgFn { font-family:ui-monospace,Menlo,Consolas,monospace; color:#8af1ff; }
  .vg-note { margin:0; font-size:14px; line-height:1.55; color:#c7d2e6; }
  /* inverter (ported from the earlier lab) */
  .vi-grid { display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:24px; align-items:start; }
  .vl-inv { --hi:#ffb03a; --lo:#5a6c86; --lin:var(--lo); --lout:var(--hi); --pOn:#00bf63; --nOn:#3a4150; } .vl-inv[data-in="1"] { --lin:var(--hi); --lout:var(--lo); --pOn:#3a4150; --nOn:#00bf63; }
  .vl-svg { display:block; width:100%; height:auto; overflow:visible; } .vl-svg .v-card { fill:#07101c; stroke:rgba(120,170,255,.28); stroke-width:1.5; }
  .vl-svg .nhi { stroke:var(--hi); } .vl-svg .nlo { stroke:var(--lo); } .vl-svg .nin { stroke:var(--lin); } .vl-svg .nout { stroke:var(--lout); } .vl-svg .pch { stroke:var(--pOn); } .vl-svg .nch { stroke:var(--nOn); }
  .vl-svg circle.nin { fill:var(--lin); stroke:none; } .vl-svg circle.nout { fill:var(--lout); stroke:none; } .vl-svg .v-ckt path, .vl-svg .v-ckt circle { transition:stroke .4s,fill .4s; }
  .vl-svg .v-t text { fill:#c7d2e6; font-size:17px; font-weight:600; font-family:Inter,Arial,sans-serif; letter-spacing:.04em; } .vl-svg .v-t .vv { fill:var(--lout); font-size:19px; }
  .vl-svg .v-pill { cursor:pointer; outline:none; } .vl-svg .v-pill rect { fill:#0d1a2c; stroke:var(--lin); stroke-width:2; transition:stroke .4s; } .vl-svg .v-pill:hover rect, .vl-svg .v-pill:focus-visible rect { fill:#14263f; stroke:#fff; }
  .vl-svg .v-pill .vt { fill:#9fb0c8; font-size:14px; font-weight:600; font-family:Inter,Arial,sans-serif; } .vl-svg .v-pill .vb { fill:#fff; font-size:27px; font-weight:700; font-family:Inter,Arial,sans-serif; } .vl-svg .v-pill .vb.sm { font-size:19px; }
  .vl-inv[data-ana="1"] .vl-svg .pch { stroke:#00bf63; opacity:var(--po,.3); } .vl-inv[data-ana="1"] .vl-svg .nch { stroke:#00bf63; opacity:var(--no,.3); }
  .vl-svg .v-flow { opacity:0; transition:opacity .4s; } .vl-inv[data-in="0"] .v-c, .vl-inv[data-in="1"] .v-d { opacity:1; }
  .vl-lab { padding:12px 14px 14px; border-radius:20px; background:#07101c; border:1px solid rgba(120,170,255,.22); }
  .vl-seg { display:flex; gap:6px; margin-bottom:8px; } .vl-seg button { flex:1; padding:6px 10px; border-radius:99px; border:1px solid #2c3a52; background:transparent; color:#9fb0c8; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .vl-seg button[aria-selected="true"] { background:#14263f; border-color:#5b9bff; color:#fff; }
  .vl-scope { display:block; width:100%; height:auto; aspect-ratio:400 / 110; background:#050b14; border:1px solid rgba(120,170,255,.16); border-radius:10px; }
  .vl-row { display:flex; gap:12px; align-items:flex-end; margin-top:10px; } .vl-ctl { display:flex; align-items:flex-end; gap:10px; flex:1.3; min-width:0; } .vl-ctl[hidden] { display:none; } .vl-ctl .btn { flex:none; } .vl-s { flex:1; display:block; min-width:0; } .vl-s span { display:flex; justify-content:space-between; gap:4px; font-size:12px; color:#9fb0c8; white-space:nowrap; } .vl-s b { color:#fff; font-variant-numeric:tabular-nums; } .vl-s input[type=range] { width:100%; accent-color:#ffb03a; height:20px; margin:0; cursor:pointer; }
  .vl-read { margin:10px 0 0; font-size:13px; line-height:1.45; color:#c7d2e6; font-variant-numeric:tabular-nums; } .vl-cap { margin:6px 0 0; font-size:14px; line-height:1.5; color:#e1e1e6; min-height:3em; }
  /* design flow */
  .vf-pills { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; } .vf-pills::-webkit-scrollbar { display:none; }
  .vf-pill { flex:none; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#9fb0c8; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .2s,color .2s,background .2s; } .vf-pill i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#1b2840; color:#c7d2e6; font-style:normal; font-size:11px; font-weight:700; }
  .vf-pill.done { color:#cfe0ff; } .vf-pill.done i { background:#1d6b45; color:#fff; } .vf-pill[aria-current="step"] { border-color:#ffb03a; color:#fff; background:#1a1408; } .vf-pill[aria-current="step"] i { background:#ffb03a; color:#1a1408; }
  .vf-bar { height:4px; border-radius:99px; background:#162033; overflow:hidden; margin:2px 0 16px; } .vf-bar i { display:block; height:100%; width:10%; border-radius:99px; background:linear-gradient(90deg,#ffb03a,#ff6aa5); transition:width .5s ease; }
  .vf-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; } .vf-art { display:block; width:100%; height:auto; background:#07101c; border:1px solid rgba(120,170,255,.2); border-radius:18px; }
  .vf-grid h4 { margin:0 0 8px; font-size:22px; letter-spacing:-.02em; } .vf-grid p { margin:0 0 10px; font-size:15px; line-height:1.55; color:#c7d2e6; } .vf-ex { font-size:13px !important; color:#8fa3c4 !important; } .vf-ctl { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .vf-ctl button:disabled { opacity:.4; cursor:not-allowed; }
  .vf-grow { transform-origin:left; animation:vfgrow 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both; } @keyframes vfgrow { from { transform:scaleX(0); } to { transform:none; } } .vf-grow { transform-box:fill-box; }
  .vf-draw { stroke-dasharray:1; stroke-dashoffset:1; animation:vfdraw 1.1s ease var(--d,0s) forwards; } @keyframes vfdraw { to { stroke-dashoffset:0; } }
  .vf-pop { transform-box:fill-box; transform-origin:center; animation:vfpop .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both; } @keyframes vfpop { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:none; } }
  .vf-blink { animation:vfblink 1s steps(2) infinite; } @keyframes vfblink { 50% { opacity:0; } }
  .vf-elec { animation:vfelec 1.1s linear var(--d,0s) infinite; } @keyframes vfelec { from { transform:translateX(-14px); opacity:0; } 20% { opacity:1; } to { transform:translateX(14px); opacity:0; } }
  /* chip layout */
  .vl-grid { display:grid; grid-template-columns:minmax(260px,.9fr) 1.1fr; gap:24px; align-items:start; }
  .vl-stage { position:relative; width:100%; max-width:340px; aspect-ratio:300 / 340; margin:8px auto 0; perspective:1100px; --e:0; } .vl-plane { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(calc(var(--e) * 56deg)) rotateZ(calc(var(--e) * -38deg)) scale(calc((1 - var(--e) * .22) * var(--ks, 1))); }
  .vl-base { position:absolute; inset:0; border-radius:10px; background:linear-gradient(135deg,#1a1626,#0d0a14); border:1px solid #3a2f52; transform:translateZ(calc(var(--e) * -24px)); }
  .vl-layer { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transform:translateZ(calc(var(--e) * var(--z) * 1px)); transition:opacity .35s; } .vl-layer.off { display:none; }
  .vl-stage[data-focus] .vl-layer:not([data-l]) { opacity:1; } .vl-stage[data-focus="nwell"] .vl-layer:not([data-l="nwell"]), .vl-stage[data-focus="active"] .vl-layer:not([data-l="active"]), .vl-stage[data-focus="poly"] .vl-layer:not([data-l="poly"]), .vl-stage[data-focus="contact"] .vl-layer:not([data-l="contact"]), .vl-stage[data-focus="metal1"] .vl-layer:not([data-l="metal1"]) { opacity:.18; }
  .vl-txl { opacity:0; } .vl-txl.show { opacity:1; } .vl-txl.show .vl-tx { animation:vltx 1.2s ease-in-out infinite; } @keyframes vltx { 50% { stroke-opacity:.35; } } .vl-stage[data-focus] .vl-txl { opacity:0; }
  .vl-slide { display:flex; align-items:center; gap:10px; margin:14px auto 0; max-width:340px; font-size:12.5px; color:#8fa3c4; } .vl-slide input { flex:1; accent-color:#ffb03a; } .vl-btns { display:flex; justify-content:center; gap:8px; margin-top:10px; }
  .vl-grid h4 { margin:0 0 10px; font-size:19px; letter-spacing:-.02em; } .vl-chips { display:flex; flex-wrap:wrap; gap:6px; } .vl-chip { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#c7d2e6; font-size:13px; font-weight:600; cursor:pointer; } .vl-chip input { position:absolute; opacity:0; pointer-events:none; } .vl-chip i { width:14px; height:14px; border-radius:4px; } .vl-chip:has(input:not(:checked)) { opacity:.45; } .vl-chip:hover { border-color:#5b9bff; } .vl-chip:has(input:focus-visible) { outline:2px solid var(--amber); }
  .vl-info { min-height:4.4em; margin:12px 0; font-size:14px; line-height:1.55; color:#c7d2e6; } .vl-info b { font-weight:700; }
  .vl-cross { margin-top:18px; padding:14px; border-radius:18px; background:#07101c; border:1px solid rgba(120,170,255,.2); } #vlCross { display:block; width:100%; height:auto; } .vl-cross p { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:#c7d2e6; }
  .vl-gate { display:inline-flex; align-items:center; gap:10px; margin-top:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:#c7d2e6; } .vl-gate input { position:absolute; opacity:0; pointer-events:none; } .vl-gate .trk { position:relative; width:38px; height:20px; border-radius:99px; background:#33405a; transition:background .2s; } .vl-gate .trk i { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; } .vl-gate input:checked + .trk { background:#00bf63; } .vl-gate input:checked + .trk i { transform:translateX(18px); } .vl-gate input:focus-visible + .trk { outline:2px solid var(--amber); outline-offset:2px; }
  @media (max-width:820px) { .vg-grid, .vi-grid, .vf-grid, .vl-grid { grid-template-columns:1fr; } }
  @media (prefers-reduced-motion:reduce) { .vproj .mpr-panel { animation:none !important; } .vf-grow, .vf-draw, .vf-pop, .vf-blink, .vf-elec, .vt-chip .core { animation:none !important; } .vf-draw { stroke-dashoffset:0; } }
  .open2work { display:inline-flex; align-items:center; gap:10px; margin:20px 0 0; padding:8px 16px 8px 14px; border-radius:99px; border:1px solid rgba(0,191,99,.4); background:rgba(0,191,99,.09); color:#d6f5e4; font-size:clamp(14px,1.5vw,16px); font-weight:600; letter-spacing:-.005em; }
  .open2work i { position:relative; flex:none; width:9px; height:9px; border-radius:50%; background:#00d36c; box-shadow:0 0 10px #00d36c; } .open2work i::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #00d36c; opacity:0; animation:o2w 2.2s ease-out infinite; } @keyframes o2w { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
  .hero .actions { margin-top:18px; }
  @media (prefers-reduced-motion:reduce) { .open2work i::after { animation:none; } }

  /* single-line diagram: the grid and the feeder as separate, clickable parts */
  .sld { margin-top:10px; padding:10px 10px 8px; border-radius:16px; background:#07101c; border:1px solid rgba(120,170,255,.2); } .sld-svg { display:block; width:100%; height:auto; overflow:visible; }
  .sld .hit { fill:transparent; cursor:pointer; } .sld-n { outline:none; } .sld-n:focus-visible .hit, .sld-n:hover .hit { fill:rgba(120,170,255,.08); }
  .sld text { fill:#8fa3c4; font-size:10.5px; font-weight:600; text-anchor:middle; font-family:Inter,Arial,sans-serif; pointer-events:none; } .sld text.v { fill:#5d6f8c; font-size:9.5px; font-weight:500; }
  .sld .ic, .sld .lk, .sld .brk-x, .sld .tf-hv, .sld .tf-lv, .sld .fbrk, .sld .brk { fill:none; stroke:#4a5a76; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s, fill .5s; } .sld .win path { stroke:#4a5a76; stroke-width:1.6; fill:none; transition:stroke .5s; } .sld .lk { stroke-width:2.6; }
  .sld .brk-x { stroke-width:1.8; opacity:0; } .sld .tf-hv, .sld .tf-lv { stroke-width:2.4; }
  .sld.g .ic.gl, .sld.g [data-n="grid"] .ic, .sld.g .lk.l1 { stroke:#18e0ff; } .sld.g .lk.l1 { stroke-dasharray:5 7; animation:sldflow 1s linear infinite; }
  .sld.b .brk { fill:#18e0ff; stroke:#18e0ff; } .sld.b .brk-x { opacity:1; stroke:#06101c; } .sld:not(.b) .brk { fill:#06101c; stroke:#5d6f8c; } .sld.trip .brk { fill:#ff3131; stroke:#ff3131; animation:sldblink .7s steps(1) infinite; } .sld.trip .brk-x { opacity:1; stroke:#fff; }
  .sld.b .lk.l2 { stroke:#18e0ff; stroke-dasharray:5 7; animation:sldflow 1s linear infinite; } .sld.b .tf-hv { stroke:#18e0ff; } .sld.b .tf-lv { stroke:#ffb03a; } .sld.b .lk.l3 { stroke:#ffb03a; stroke-dasharray:5 7; animation:sldflow 1s linear infinite; }
  .sld .fbrk { fill:#06101c; stroke:#5d6f8c; } .sld.f .fbrk { fill:#ffb03a; stroke:#ffb03a; } .sld.f [data-n="feeder"] .ic { stroke:#ffb03a; } .sld.f .lk.l4 { stroke:#ffb03a; stroke-dasharray:5 7; animation:sldflow 1s linear infinite; } .sld.f [data-n="city"] .ic { stroke:#ffd27a; } .sld.f .win path { stroke:#ffd27a; filter:drop-shadow(0 0 2px #ffb03a); }
  .sld.g [data-n="grid"] text:not(.v), .sld.b [data-n="breaker"] text:not(.v), .sld.b [data-n="transformer"] text:not(.v), .sld.f [data-n="feeder"] text:not(.v), .sld.f [data-n="city"] text:not(.v) { fill:#e6edf9; }
  @keyframes sldflow { to { stroke-dashoffset:-24; } } @keyframes sldblink { 50% { opacity:.35; } }
  .sld-note { margin:4px 2px 0; min-height:2.5em; font-size:11.5px; line-height:1.4; color:#8fa3c4; text-align:center; }
  .sub-load, .sub-panel, .sub-hint, .sld { opacity:0; transform:translateY(14px); transition:opacity .25s ease,transform .25s ease; } .hero.on .sld { opacity:1; transform:none; transition:opacity .7s ease 1.05s,transform .8s cubic-bezier(.2,.8,.2,1) 1.05s; }
  @media (prefers-reduced-motion:reduce) { .sld .lk { animation:none !important; } }
  .sub-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:#8fa3c4; font-size:13px; line-height:1.5; background:radial-gradient(120% 90% at 50% 100%,#0d1c3a,#050a1c); }
  .sub-focus { position:absolute; left:12px; top:12px; z-index:3; padding:6px 14px; border-radius:99px; background:rgba(6,12,26,.86); border:1px solid rgba(24,224,255,.75); color:#eaf2ff; font-size:12px; font-weight:600; opacity:0; transform:translateY(-4px); transition:opacity .25s,transform .25s; pointer-events:none; } .sub-focus.on { opacity:1; transform:none; } .sub-focus.amber { border-color:rgba(255,176,58,.8); }
  .vl-gates { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } .vl-gchip { padding:6px 14px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#c7d2e6; font:inherit; font-size:13px; font-weight:700; letter-spacing:.03em; cursor:pointer; } .vl-gchip:hover { border-color:#5b9bff; } .vl-gchip[aria-pressed="true"] { background:#14263f; border-color:#ffb03a; color:#ffb03a; }
  .vl-gnote { margin:0 0 12px; font-size:14px; line-height:1.55; color:#c7d2e6; } .vl-stage { transition:max-width .35s ease; }
  .row2 { display:flex; flex-wrap:wrap; gap:8px; }
  .vr { margin-top:22px; padding:16px 18px 14px; border-radius:18px; background:#07101c; border:1px solid rgba(120,170,255,.2); } .vr-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; } .vr-head h4 { margin:0; font-size:17px; letter-spacing:-.01em; }
  .vr-lang, .vr-views { display:flex; flex-wrap:wrap; gap:6px; } .vr-views { margin:12px 0 10px; }
  .vr-chip { padding:5px 13px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#c7d2e6; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .vr-chip:hover { border-color:#5b9bff; } .vr-chip[aria-pressed="true"] { background:#14263f; border-color:#ffb03a; color:#ffb03a; }
  .vr-code { margin:0; padding:14px 16px; border-radius:12px; background:#050a14; border:1px solid #1d2a40; overflow:auto; max-height:420px; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#dbe6ff; tab-size:4; } .vr-code code { font:inherit; white-space:pre; }
  .vr-code .k { color:#ff8bd1; } .vr-code .c { color:#6f819f; font-style:italic; } .vr-code .s { color:#9ff0c0; } .vr-code .n { color:#ffcf7a; } .vr-code .d { color:#8af1ff; }
  .vr-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font:12.5px ui-monospace,Menlo,Consolas,monospace; color:#8fa3c4; } .vr-run { margin:8px 0 0; font-size:12.5px; line-height:1.55; color:#8fa3c4; } .vr-run code { display:inline-block; margin-top:4px; padding:3px 8px; border-radius:8px; background:#0d1522; color:#c7d2e6; font:12px ui-monospace,Menlo,Consolas,monospace; word-break:break-all; }
  /* About section: smaller type throughout */
  #about .stmt { margin-top:40px; font-size:clamp(20px,3.2vw,38px); line-height:1.25; }
  #about .stats { margin-top:40px; gap:12px; }
  #about .stat { padding:18px 18px 16px; }
  #about .stat .n { font-size:clamp(30px,4.1vw,44px); }
  #about .stat span { margin-top:8px; font-size:13.5px; }
  #about .stat em { font-size:12px; }
  #about .about-grid { margin-top:52px; gap:36px; }
  #about .avatar { width:124px; height:124px; font-size:38px; }
  #about .seg button { padding:8px 15px; min-height:36px; font-size:13px; }
  #about .chip { padding:9px 16px; font-size:14.5px; }
  /* justified: both edges line up */
  #about .stmt { text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  #about .stat em { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
  #about .facts { min-width:0; }
  #about .seg { display:flex; width:100%; } #about .seg button { flex:1 1 auto; text-align:center; }
  #about .chips { display:flex; flex-wrap:wrap; gap:10px; width:100%; } #about .chip { flex:1 1 auto; text-align:center; }
  @media (max-width:900px) { #about .avatar { width:92px; height:92px; font-size:30px; } #about .stmt { margin-top:28px; } }
  /* About section: the details are justified, so every block lines up on both edges */
  #about .stmt { max-width:none; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
  #about .facts { min-width:0; }
  #about .seg { display:flex; width:100%; } #about .seg button { flex:1 1 auto; text-align:center; }
  #about .chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px; }
  #about .chip { text-align:center; }
  @media (max-width:640px) { #about .chips { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); } #about .stmt { hyphens:auto; } }

  /* Projects: one screen per project, swipe left or right */
  .pcar { margin-top:40px; }
  .pcar-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
  .pcar-tabs { display:inline-flex; gap:2px; padding:4px; max-width:100%; overflow-x:auto; scrollbar-width:none; background:var(--s2); border-radius:99px; } .pcar-tabs::-webkit-scrollbar { display:none; }
  .pcar-tabs button { border:0; background:none; color:var(--muted); padding:9px 18px; min-height:40px; border-radius:99px; font:inherit; font-size:14px; white-space:nowrap; cursor:pointer; transition:color .2s,background .2s; } .pcar-tabs button:hover { color:#fff; } .pcar-tabs button[aria-selected="true"] { background:#2e2e33; color:#fff; }
  .pcar-arrows { display:flex; gap:8px; } .pcar-arrows button { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--s1); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .2s,opacity .2s; } .pcar-arrows button:hover:not(:disabled) { background:var(--s2); } .pcar-arrows button:disabled { opacity:.3; cursor:default; }
  .pcar-track { position:relative; display:flex; gap:16px; align-items:flex-start; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; transition:height .35s ease; } .pcar-track::-webkit-scrollbar { display:none; }
  .pcar-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; } .pcar-slide > .glass { margin-top:0; }
  .pcar-hint { margin:16px 0 0; text-align:center; font-size:13px; color:var(--muted); } .pcar-n { color:#e1e1e6; font-variant-numeric:tabular-nums; }
  @media (hover:none) { .pcar-arrows { display:none; } }
  @media (prefers-reduced-motion:reduce) { .pcar-track { transition:none; } }
  /* ---- Trip curve, power factor, fault level, project filter, one-page print, debug panel ---- */
  .trip, .pf { --acc:var(--amber); }
  .tchart, .pchart { position:relative; background:#050506; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
  .tchart svg, .pchart svg { display:block; width:100%; height:auto; }
  .tchart text, .pchart text { font-family:var(--font); fill:#a1a1a6; font-size:var(--fs,12px); }
  .tchart .scope-tag { top:12px; right:14px; left:auto; }
  .tchart .gl, .pchart .gl { stroke:#1d1d22; stroke-width:1; } .tchart .gl.asym { stroke:#5a4a2a; stroke-dasharray:4 4; }
  .tchart .ax, .pchart .ax { stroke:#44444b; stroke-width:1.2; fill:none; }
  .tchart .tc { fill:none; stroke:#3b3b43; stroke-width:1.6; } .tchart .tc.sel { stroke:var(--amber); stroke-width:3; stroke-linecap:round; }
  .tchart .th { fill:none; stroke:var(--cyan); stroke-width:2.4; stroke-dasharray:6 5; }
  .tchart .iec { stroke:var(--lime); stroke-width:2.4; fill:none; stroke-linecap:round; } .tchart .iect { fill:var(--lime); }
  .tchart .mk { stroke:#fff; stroke-width:1.2; stroke-dasharray:3 4; opacity:.7; } .tchart .dot { fill:#fff; stroke:var(--amber); stroke-width:3; }
  .tchart .mk-t { fill:#fff; font-size:calc(var(--fs,12px) + 1px); font-weight:700; }
  .halo { paint-order:stroke; stroke:#050506; stroke-width:3px; stroke-linejoin:round; }
  .heat { position:relative; height:14px; border-radius:99px; border:1px solid var(--line); overflow:hidden; background:linear-gradient(90deg,#00bf63,#ffb03a 70%,#ff4d4d); }
  .heat i { position:absolute; top:0; right:0; bottom:0; width:calc(100% - var(--w,0%)); background:#101012; transition:width .12s linear; }
  .heat-t { display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .trip-read, .pf-read { margin-top:22px; } .trip-read div, .pf-read div { text-align:center; }
  .trip-read b, .pf-read b { font-size:clamp(15px,2vw,19px); } .trip-read small, .pf-read small { display:block; margin-top:2px; }
  .trip-note { margin:16px 2px 0; color:var(--muted); font-size:13px; line-height:1.5; max-width:70ch; }
  .pchart .vec { stroke-width:3.4; stroke-linecap:round; fill:none; } .pchart .vec.p { stroke:#b8ff3a; } .pchart .vec.q1 { stroke:#ff5a5a; } .pchart .vec.qc { stroke:#18e0ff; }
  .pchart .vec.s1 { stroke:#ffb03a; stroke-width:2.4; stroke-dasharray:7 6; } .pchart .vec.s2 { stroke:#4ee89a; stroke-width:3.4; } .pchart .vec.s2l { stroke:#c4a6ff; stroke-width:3.4; }
  .pchart .arc { fill:none; stroke-width:2; } .pchart .arc.a1 { stroke:#ffb03a; } .pchart .arc.a2 { stroke:#4ee89a; }
  .pchart text { font-weight:600; }
  @media (max-width:560px) { .trip-read, .pf-read { grid-template-columns:repeat(2,1fr); } }

  /* project filter */
  .pfilter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; } .pfilter > span { font-size:13px; color:var(--muted); margin-right:4px; }
  .pfilter .fchip small { color:var(--muted); margin-left:4px; font-size:12px; } .pfilter .fchip[aria-pressed="true"] { background:rgba(255,176,58,.16); border-color:var(--amber); color:#ffd58a; } .pfilter .fchip[aria-pressed="true"] small { color:#ffd58a; }
  .pcar.single .pcar-arrows, .pcar.single .pcar-hint { display:none; }

  /* one-page print: Ctrl+P always prints the resume, scaled to fit a single sheet */
  .rv-one { display:none; }
  .rv-one { color:#111; font-family:var(--font); font-size:calc(9.6pt * var(--fs,1)); line-height:1.32; text-align:left; }
  .rv-one h1 { margin:0; font-size:1.95em; letter-spacing:-.025em; line-height:1.08; color:#111; background:none; -webkit-text-fill-color:#111; }
  .rv-one .o-sub { margin:.15em 0 0; color:#333; font-size:1.05em; } .rv-one .o-con { margin:.1em 0 0; color:#444; }
  .rv-one h2 { margin:.8em 0 .4em; padding-bottom:.18em; border-bottom:1px solid #8a8a8a; font-size:.8em; letter-spacing:.15em; text-transform:uppercase; color:#222; background:none; -webkit-text-fill-color:#222; font-weight:700; }
  .rv-one p { margin:0; color:#222; } .rv-one .o-r { margin-bottom:.5em; break-inside:avoid; }
  .rv-one .o-h { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .rv-one .o-h b { color:#111; } .rv-one .o-h span { color:#444; } .rv-one .o-h em { flex:none; font-style:normal; color:#444; white-space:nowrap; }
  .rv-one ul { margin:.18em 0 0; padding-left:1.15em; } .rv-one li { margin:0 0 .14em; color:#222; }
  .rv-one .o-lead { columns:2; column-gap:22px; padding-left:0; list-style:none; } .rv-one .o-lead li { break-inside:avoid; margin-bottom:.3em; } .rv-one .o-lead em { font-style:normal; color:#555; display:block; }
  @media print {
    body.printing-resume .rv-paper { display:none !important; }
    body.printing-resume .rv-one { display:block !important; }
    body.printing-resume .rv-scroll { padding:0 !important; }
    body.printing-resume #resumeView { color:#111 !important; }
    html, body { background:#fff !important; }
    @page { size:auto; margin:12mm; }
  }

  /* phone check panel: add #debug to the address */
  .dbg { position:fixed; left:8px; bottom:8px; z-index:400; max-width:calc(100vw - 16px); padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.88); border:1px solid #2a2a2f; color:#8fffb0; font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
  .dbg pre { margin:0 0 6px; white-space:pre-wrap; word-break:break-word; } .dbg button { min-height:32px; padding:0 12px; border-radius:99px; border:1px solid #4a4a50; background:#141416; color:#fff; font:inherit; font-size:12px; cursor:pointer; }
  /* ---- HPCL project: audit board, safety checklist, plant walk-through ---- */
  .hx h5 { margin:18px 0 10px; font-size:14px; color:var(--muted); font-weight:500; } .hx h5:first-child { margin-top:0; }
  .hx select { width:100%; min-height:42px; border-radius:12px; background:#141416; color:#fff; border:1px solid #3a3a40; padding:0 12px; font:inherit; font-size:14px; }
  .ab-top { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; } .ab-top .verdict { margin-top:0; } .bb-top { margin-top:16px; }
  .ab-ring { --p:0; --rc:#4ee89a; width:128px; height:128px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(closest-side,#0b0b0d 78%,transparent 80%),conic-gradient(var(--rc) calc(var(--p) * 1%),#2a2a2f 0); }
  .ab-ring b { font-size:32px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .ab-ring small { color:var(--muted); font-size:12px; }
  .ab-cats { margin-top:14px; } .ab-cat { display:grid; grid-template-columns:112px 1fr 104px; gap:10px; align-items:center; margin-top:9px; font-size:13px; }
  .ab-cn { display:flex; align-items:center; gap:8px; } .ab-cn i, .bb-g h6 i { width:10px; height:10px; border-radius:50%; flex:none; } .ab-cat small { color:var(--muted); font-size:12px; text-align:right; }
  .ab-bar { display:flex; height:10px; border-radius:99px; overflow:hidden; background:#1d1d22; } .ab-bar i { display:block; height:100%; transition:width .3s; } .ab-bar .g { background:#2fc77a; } .ab-bar .a { background:#ffb03a; } .ab-bar .r { background:#ff4d4d; }
  .ab-lh { margin:22px 0 10px !important; }
  .ab-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:8px; }
  .ab-row { display:grid; grid-template-columns:6px 1fr auto; gap:12px; align-items:center; padding:10px 12px; border-radius:16px; background:#101012; border:1px solid var(--line); } .ab-row.over { border-color:#8f2a2a; } .ab-row.due { border-color:#8a6a1f; }
  .ab-c { align-self:stretch; border-radius:4px; } .ab-t b { display:block; font-size:14px; line-height:1.3; } .ab-t small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
  .ab-t small.st { font-weight:600; } .ab-row.over .st { color:#ff8a8a; } .ab-row.due .st { color:#ffc468; } .ab-more { color:var(--muted); font-size:13px; padding:6px 4px; }
  .bb-g { margin-top:14px; padding:14px 14px 6px; border-radius:18px; background:#101012; border:1px solid var(--line); } .bb-g:first-child { margin-top:0; }
  .bb-g h6 { margin:0 0 4px; font-size:14px; display:flex; align-items:center; gap:8px; }
  .bb-i { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:10px 0; border-top:1px solid #1d1d21; } .bb-q { font-size:14px; line-height:1.35; }
  .bb-b { display:inline-flex; gap:4px; } .bb-b button { min-height:38px; padding:0 13px; border-radius:99px; border:1px solid #3a3a40; background:#141416; color:#c7c7cc; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
  .bb-b button[aria-checked="true"].s { background:rgba(46,199,122,.18); border-color:#2fc77a; color:#7ff0b4; } .bb-b button[aria-checked="true"].r { background:rgba(255,77,77,.18); border-color:#ff4d4d; color:#ffb3b3; } .bb-b button[aria-checked="true"].n { background:#26262b; border-color:#777; color:#fff; }
  .bb-fix { list-style:none; margin:0; padding:0; } .bb-fix li { margin-top:8px; padding:10px 12px; border-radius:14px; background:#1c0f0f; border:1px solid #5a2323; font-size:13px; line-height:1.4; } .bb-fix b { display:block; color:#ffb3b3; font-size:13.5px; margin-bottom:2px; } .bb-fix span { color:#d2d2d7; }
  .pw-track { --pos:0; position:relative; list-style:none; margin:46px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); }
  .pw-track::before { content:""; position:absolute; left:calc(100% / 14); right:calc(100% / 14); top:25px; height:4px; border-radius:4px; background:#26262b; }
  .pw-track::after { content:""; position:absolute; left:calc(100% / 14); top:25px; height:4px; border-radius:4px; width:calc((100% - 100% / 7) * var(--pos) / 6); background:linear-gradient(90deg,var(--amber),var(--pink)); transition:width .6s ease; } .pw-track.rej::after { background:#ff4d4d; }
  .pw-track li { display:block; } .pw-node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; padding:0 2px 4px; background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; }
  .pw-ic { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#101012; border:2px solid #2f2f36; color:#c7c7cc; transition:border-color .3s,color .3s,background .3s; }
  .pw-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .pw-node span { font-size:12.5px; line-height:1.25; text-align:center; max-width:12ch; } .pw-node:hover .pw-ic { border-color:#777; }
  .pw-node[aria-current="step"] .pw-ic { border-color:var(--amber); color:var(--amber); background:#1c1507; } .pw-node[aria-current="step"] span { color:#fff; font-weight:600; }
  .pw-node.done .pw-ic { border-color:#2fc77a; color:#2fc77a; } .pw-node.bad .pw-ic { border-color:#ff4d4d; color:#ff8a8a; background:#1c0b0b; }
  .pw-cyl { position:absolute; z-index:2; top:-40px; left:calc(100% / 7 * (var(--pos) + .5)); width:22px; height:30px; margin-left:-11px; pointer-events:none; transition:left .6s cubic-bezier(.3,1.1,.4,1); filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); } .pw-cyl svg { display:block; width:100%; height:100%; }
  .pw-card { margin-top:18px; padding:20px; border-radius:20px; background:#101012; border:1px solid var(--line); }
  .pw-h { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; } .pw-n { color:var(--amber); font-size:13px; font-weight:600; } .pw-h h5 { margin:0 !important; font-size:21px; color:#fff; letter-spacing:-.02em; font-weight:600; }
  .pw-what { margin:8px 0 0; color:#d2d2d7; } .pw-rej, .pw-ok { margin-top:12px; padding:12px 14px; border-radius:14px; font-size:14px; } .pw-rej { border:1px solid #b33; background:#1c0b0b; color:#ffb3b3; } .pw-ok { border:1px solid #1d8f58; background:#08170f; color:#9df0c4; }
  .pw-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px; } .pw-cols h6 { margin:0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .pw-cols ul { margin:0; padding-left:18px; color:#e1e1e6; font-size:14px; line-height:1.5; } .pw-cols p { margin:0; color:#c7c7cc; font-size:14px; line-height:1.5; }
  .pw-docs { display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .pw-docs .fchip { text-align:left; font-size:13px; } .pw-docs small { color:var(--muted); margin-left:4px; }
  .pw-ctl { margin-top:16px; }
  @media (max-width:900px) { .hx-bbs .lab-r { order:-1; } }
  @media (max-width:760px) {
    .pw-cols { grid-template-columns:1fr; }
    .pw-track { grid-template-columns:1fr; grid-auto-rows:64px; margin-top:20px; }
    .pw-track::before { left:26px; right:auto; width:4px; top:30px; bottom:30px; height:auto; } .pw-track::after { left:26px; top:30px; width:4px; height:calc(64px * var(--pos)); }
    .pw-node { flex-direction:row; justify-content:flex-start; gap:14px; height:64px; padding:0; } .pw-node span { text-align:left; max-width:none; font-size:14px; }
    .pw-cyl { left:44px; margin-left:0; top:calc(64px * var(--pos) + 2px); transition:top .6s cubic-bezier(.3,1.1,.4,1); width:16px; height:22px; }
  }
  @media (max-width:560px) {
    .ab-ring { width:104px; height:104px; } .ab-ring b { font-size:26px; } .ab-top { gap:12px; }
    .ab-cat { grid-template-columns:96px 1fr; } .ab-cat small { grid-column:2; margin-top:-3px; text-align:left; }
    .bb-i { grid-template-columns:1fr; } .bb-b { display:grid; grid-template-columns:repeat(3,1fr); } .bb-b button { min-height:42px; }
    .ab-list { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) { .pw-cyl, .pw-track::after, .ab-bar i { transition:none; } }
  .pw-top { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:center; } .pw-scene { margin:0; }
  .pw-scene svg, .pw-scene img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:16px; border:1px solid var(--line); background:#07101c; } .pw-scene svg { animation:swap .45s ease both; }
  .pw-scene figcaption { margin-top:6px; font-size:11px; color:var(--muted); }
  .pw-belt { animation:pwbelt 1.2s linear infinite; } @keyframes pwbelt { to { transform:translateX(-40px); } }
  .pw-turn { transform-box:fill-box; transform-origin:center; animation:rot 18s linear infinite; }
  @media (max-width:760px) { .pw-top { grid-template-columns:1fr; } }
  @media (max-width:560px) { .pw-scene .tg { display:none; } }
  .pw-scene { position:relative; } .pw-scene canvas.pw-gl { display:block; width:100%; height:auto; aspect-ratio:16 / 9; border-radius:16px; border:1px solid var(--line); background:#8d97a4; filter:contrast(1.06) saturate(.9); touch-action:pan-y; }
  .pw-vg { position:absolute; left:0; right:0; top:0; aspect-ratio:16 / 9; border-radius:16px; pointer-events:none; background:radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(0,0,0,.34)); }
  .pw-sop { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); } .pw-sop h6 { margin:0 0 10px; font-size:14px; color:var(--amber); } .pw-sop h6 small { color:var(--muted); font-weight:400; font-size:12px; margin-left:6px; }
  .pw-jr { display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; margin:0 0 12px; } .pw-jr span { padding:6px 12px; border-radius:99px; background:#101012; border:1px solid var(--line); font-size:13px; color:#e1e1e6; } .pw-jr i { font-style:normal; color:var(--amber); padding:0 2px; }
  .pw-sop details { border:1px solid var(--line); border-radius:14px; background:#101012; margin:8px 0; } .pw-sop summary { cursor:pointer; list-style:none; padding:12px 16px; min-height:44px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; } .pw-sop summary::-webkit-details-marker { display:none; }
  .pw-sop summary b { font-weight:600; font-size:15px; } .pw-sop summary small { color:var(--muted); font-size:12px; } .pw-sop summary::after { content:"+"; margin-left:auto; color:var(--amber); font-size:20px; line-height:1; } .pw-sop details[open] summary::after { content:"\2212"; }
  .pw-sop ol { margin:0; padding:2px 18px 14px 38px; color:#d2d2d7; font-size:14px; } .pw-sop li { margin:5px 0; }
  .tj-top { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .tj-track { list-style:none; margin:0 0 18px; padding:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; } .tj-track::-webkit-scrollbar { display:none; }
  .tj-track li { flex:1 0 auto; min-width:78px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--muted); position:relative; padding-top:2px; }
  .tj-track li::before { content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:#2a2a2f; z-index:0; } .tj-track li:first-child::before { display:none; } .tj-track li.done::before, .tj-track li.now::before { background:var(--amber); }
  .tj-track li i { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:13px; background:#17171a; border:2px solid #3a3a40; color:#c7c7cc; }
  .tj-track li.done i { background:var(--amber); border-color:var(--amber); color:#000; } .tj-track li.now i { border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 5px rgba(255,176,58,.18); } .tj-track li.now span, .tj-track li.done span { color:#fff; }
  .tj-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
  .tj-dev { background:linear-gradient(#1b1d22,#121316); border:1px solid #2c2f36; border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
  .tj-stn { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; align-items:baseline; } .tj-stn b { font-size:16px; } .tj-stn small { color:var(--muted); font-size:12px; font-family:ui-monospace,Menlo,monospace; }
  .tj-led { min-height:44px; display:grid; place-items:center; border-radius:10px; background:#0b0d10; border:1px solid #22262d; color:#4a525c; font:700 15px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; text-align:center; padding:8px; } .tj-led.on { color:#ffb03a; text-shadow:0 0 12px rgba(255,176,58,.5); }
  .tj-edcm { border-radius:12px; background:#03140b; border:1px solid #14301f; padding:10px 14px 12px; } .tj-edh { display:flex; align-items:center; justify-content:space-between; color:#2f8f56; font:700 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.2em; margin-bottom:8px; } .tj-edh i { width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px #3ddc84; }
  .tj-scr { min-height:66px; font-family:ui-monospace,Menlo,monospace; color:#3ddc84; text-shadow:0 0 10px rgba(61,220,132,.35); } .tj-scr .l1 { font-size:16px; font-weight:700; letter-spacing:.04em; } .tj-scr .l2 { font-size:14px; opacity:.85; margin-top:3px; }
  .tj-barw { height:6px; border-radius:4px; background:#0b2a18; margin-top:8px; overflow:hidden; } .tj-barw i { display:block; height:100%; width:0; background:#3ddc84; transition:width 2.6s linear; }
  .tj-relay { display:flex; align-items:center; gap:10px; } .tj-relay small { color:var(--muted); font-size:12px; } .lamp { width:18px; height:18px; border-radius:50%; background:#2a2d33; border:2px solid #3a3a40; } .lamp.o.on { background:#ff8a00; box-shadow:0 0 14px #ff8a00; border-color:#ffb34d; } .lamp.g.on { background:#2fe07a; box-shadow:0 0 14px #2fe07a; border-color:#8dffbb; } .lamp.blink { animation:blink 1s steps(1) infinite; }
  .tj-slip { background:#f4f1e6; color:#17171a; border-radius:6px; padding:10px 14px; font:600 13px/1.5 ui-monospace,Menlo,monospace; display:flex; flex-direction:column; transform:rotate(-.6deg); box-shadow:0 8px 20px rgba(0,0,0,.4); } .tj-slip b { letter-spacing:.1em; text-transform:uppercase; }
  .tj-keys { display:flex; flex-direction:column; gap:8px; } .tj-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .tj-row small { width:30px; color:var(--muted); font-size:11px; letter-spacing:.1em; }
  .tj-key { min-height:46px; padding:0 14px; border-radius:12px; border:1px solid #3a3d45; background:#23262d; color:#eceef2; font:600 13px var(--font); cursor:pointer; flex:1 1 auto; transition:transform .1s,background .15s; } .tj-key:hover { background:#2c3038; } .tj-key:active { transform:translateY(1px) scale(.98); }
  .tj-key.ack { background:#16442b; border-color:#25774a; } .tj-key.start { background:#4a3a0f; border-color:#8c6c19; } .tj-key.stop { background:#4d1a18; border-color:#9a3530; } .tj-key.card { background:#1a2f4d; border-color:#2d5a96; } .tj-key.sp { background:#2b2433; border-color:#5a4a70; }
  .tj-key.hint { outline:2px solid var(--amber); outline-offset:2px; } .tj-key.pulse { animation:nudge 1.6s ease-in-out infinite; }
  .tj-msg { min-height:20px; margin:0; font-size:13px; color:#ff9c9c; } .tj-msg.tj-pop { animation:swap .35s ease both; }
  .tj-now { background:var(--s1); border:1px solid var(--line); border-radius:18px; padding:16px 18px; } .tj-now span { font-size:12px; color:var(--amber); font-weight:600; letter-spacing:.04em; } .tj-now p { margin:6px 0 0; font-size:18px; line-height:1.4; letter-spacing:-.01em; } .tj-now em { display:block; margin-top:8px; font-style:normal; color:var(--cyan); font-size:14px; }
  .tj-steps { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; counter-reset:t; } .tj-steps li { counter-increment:t; position:relative; padding:8px 12px 8px 38px; border-radius:12px; background:#101012; border:1px solid var(--line); font-size:13.5px; color:#9a9aa1; } .tj-steps li::before { content:counter(t); position:absolute; left:10px; top:8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:#1f1f23; color:#9a9aa1; }
  .tj-steps li.done { color:#cfd2d8; } .tj-steps li.done::before { content:"\2713"; background:var(--amber); color:#000; } .tj-steps li.now { color:#fff; border-color:var(--amber); background:rgba(255,176,58,.08); } .tj-steps li.now::before { background:var(--amber); color:#000; }
  .tj-foot { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin-top:12px; } .tj-foot small { color:var(--muted); font-size:12px; font-family:ui-monospace,Menlo,monospace; }
  .tj-fin { background:var(--s1); border:1px solid var(--line); border-radius:22px; padding:26px; } .tj-fin h5 { margin:0 0 8px; font-size:26px; letter-spacing:-.03em; color:var(--lime); } .tj-fin p { margin:0 0 18px; color:#c7c7cc; } .tj-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; } .tj-stats div { background:#101012; border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; } .tj-stats b { display:block; font-size:24px; font-variant-numeric:tabular-nums; } .tj-stats small { color:var(--muted); font-size:12px; }
  @media (max-width:860px) { .tj-main { grid-template-columns:1fr; } }
  @media (max-width:560px) { .tj-track li { min-width:64px; } .tj-now p { font-size:16px; } }
  @media (prefers-reduced-motion:reduce) { .tj-barw i { transition:none; } .tj-key.pulse, .lamp.blink { animation:none; } }
  .tj-plan { margin:0 0 14px; } .tj-plan svg { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; }
  .tj-plan .pl-truck { transition:transform .7s cubic-bezier(.4,0,.2,1); } .tj-plan .pl-n circle { transition:fill .3s; }
  .tj-scene { margin:0 0 18px; max-width:820px; } .tj-scene > img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:16px; border:1px solid var(--line); }
  .tj-fb { display:grid; gap:6px; place-content:center; text-align:center; aspect-ratio:16 / 9; border-radius:16px; border:1px solid var(--line); background:#0a1424; color:var(--muted); padding:18px; } .tj-fb b { color:var(--text); font-size:18px; }
  .tj-dos { margin:10px 0 14px; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.5; } .tj-dos li { margin:2px 0; }
  @media (prefers-reduced-motion:reduce) { .tj-plan .pl-truck { transition:none; } }
  .tj-act { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; margin:0 0 12px; border:1px solid rgba(255,176,58,.45); border-radius:14px; background:rgba(255,176,58,.07); } .tj-act > small { width:100%; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); }
  .tj-act .tj-key { min-height:46px; padding:10px 14px; font-weight:700; text-align:left; }
  .tj-wr { margin:0 0 12px; border:1px solid #2d4f86; border-radius:14px; overflow:hidden; background:#0b1a2e; } .tj-wrh { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 14px; background:#17407a; color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; } .tj-wrh small { font-weight:500; letter-spacing:0; opacity:.8; }
  .tj-wrb { padding:14px; display:grid; gap:10px; } .tj-wrt b { display:block; font-size:22px; letter-spacing:.04em; color:#fff; font-family:ui-monospace,Menlo,monospace; } .tj-wrt small { color:var(--muted); }
  .tj-wrb ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; } .tj-wrb li { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#c9d4e6; border-bottom:1px solid #1d2c47; padding-bottom:6px; } .tj-wrb em { font-style:normal; font-weight:700; color:#ffd27a; } .tj-wrb em.ok { color:#3ddc84; } .tj-wrb em.bad { color:#ff6b5e; }
  .tj-wrb p { margin:0; font-size:14px; color:#c9d4e6; } .tj-key.wr-btn { min-height:52px; font-size:16px; font-weight:800; background:var(--amber); color:#000; border-color:var(--amber); }
  .tj-ctl { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; } .tj-ctl .tj-sp { flex:1 1 20px; } .tj-ctl button:disabled { opacity:.4; pointer-events:none; }
  .tj-top { margin-bottom:12px; } .tj-scene { position:relative; max-width:none; } .tj-scene canvas.pw-gl { transition:opacity .4s; }
  .tj-ov { position:absolute; left:0; right:0; top:0; aspect-ratio:16 / 9; display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none; border-radius:16px; overflow:hidden; }
  .tj-ovb { padding:48px clamp(12px,2.4vw,22px) clamp(10px,1.8vw,16px); background:linear-gradient(rgba(5,10,18,0), rgba(5,10,18,.9) 42%); } .tj-ovs { display:inline-block; margin-bottom:5px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#ffb03a; } .tj-ovs small { color:#c9d4e6; letter-spacing:0; font-weight:500; margin-left:6px; }
  .tj-ovb p { margin:0 0 10px; font-size:clamp(13px,2vw,19px); line-height:1.35; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); max-width:60ch; } .tj-prog { height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; } .tj-prog i { display:block; height:100%; background:#ffb03a; transition:width .6s; }
  .tj-key.pressing { transform:scale(.95); background:var(--amber) !important; color:#000 !important; border-color:var(--amber) !important; transition:transform .12s; }
  @media (max-width:560px) { .tj-ovb p { font-size:12px; } .tj-ovb { padding-top:30px; } }
  .tj-scene { aspect-ratio:16 / 9; background:#0a1424; border-radius:16px; }
  .tj-plan { max-width:720px; margin-left:auto; margin-right:auto; }
  .tj-mini { position:absolute; right:10px; top:10px; width:clamp(132px,27%,260px); padding:6px 7px 6px; border-radius:11px; background:rgba(6,12,22,.74); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); pointer-events:none; }
  .tj-mini b { display:block; margin-bottom:3px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#9fb2d0; }
  .tj-mini svg { display:block; width:100%; height:auto; } .tj-mini .bd { fill:rgba(160,138,98,.16); stroke:#4b5d7c; stroke-width:1.2; } .tj-mini .rd { fill:none; stroke:#5a6b86; stroke-width:4; opacity:.55; }
  .tj-mini rect[data-z] { fill:#4a5f84; opacity:.75; transition:fill .5s, opacity .5s; } .tj-mini rect[data-z].on { fill:#e0303a; opacity:1; }
  .tj-mn { display:block; margin-top:4px; font-size:10px; font-weight:600; line-height:1.25; color:#fff; min-height:12px; }
  @media (max-width:560px) { .tj-mini { width:118px; right:6px; top:6px; padding:4px 5px; } .tj-mini b, .tj-mn { font-size:8px; } }
  .pcar-tabs button .pt-tag { margin-left:8px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.02em; background:rgba(255,255,255,.12); color:inherit; vertical-align:1px; }
  /* ---- VLSI design flow: effects when the device asks for reduced motion ---- */
  .vf-motion { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border-radius:14px; background:rgba(255,176,58,.1); color:#ffc468; font-size:13px; line-height:1.4; } .vf-motion[hidden] { display:none; }
  @media (prefers-reduced-motion:reduce) {
    #vproj[data-fx="on"] .vf-grow { animation:vfgrow 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) both !important; }
    #vproj[data-fx="on"] .vf-draw { stroke-dashoffset:1; animation:vfdraw 1.1s ease var(--d,0s) forwards !important; }
    #vproj[data-fx="on"] .vf-pop { animation:vfpop .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both !important; }
    #vproj[data-fx="on"] .vf-blink { animation:vfblink 1s steps(2) infinite !important; }
    #vproj[data-fx="on"] .vf-elec { animation:vfelec 1.1s linear var(--d,0s) infinite !important; }
    #vproj[data-fx="on"] .vf-bar i { transition:width .5s ease !important; }
  }
  /* VLSI Lab: adders, multiplier and SRAM */
  .vx h4 { margin:18px 0 8px; font-size:16px; letter-spacing:-.01em; }
  .vx-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; background:#07101c; border:1px solid rgba(120,170,255,.2); margin-top:12px; }
  .vx-svg { display:block; width:100%; min-width:760px; height:auto; } .vx-sq { min-width:560px; } .vx-arr { min-width:520px; }
  .vx-cell { min-width:0; margin-top:12px; border-radius:18px; background:#07101c; border:1px solid rgba(120,170,255,.2); }
  .vx-in { cursor:pointer; outline:none; } .vx-in:focus-visible rect { stroke:#fff; }
  .vx-read { margin:14px 0 4px; padding:12px 14px; border-radius:14px; background:#0b1626; border:1px solid #1d2a40; font-size:14px; line-height:1.75; color:#c7d2e6; font-variant-numeric:tabular-nums; }
  .vx-read b, .vx-mline b { color:#8fa3c4; font-weight:700; margin-right:3px; } .vx-read code, .vx-mline code { font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#ffcf7a; letter-spacing:.04em; } .vx-read .hi, .vx-mline .hi { color:#ffb03a; font-weight:700; }
  .vx-pre { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; } .vx-bit { margin-left:6px; font-size:13px; font-weight:700; color:#ffb03a; } .vx-lab { font-size:12px; font-weight:700; letter-spacing:.06em; color:#8fa3c4; text-transform:uppercase; }
  .vx-cmp { margin-top:14px; } .vx-row { display:grid; grid-template-columns:136px 1fr 140px; gap:12px; align-items:center; padding:7px 0; font-size:13.5px; color:#c7d2e6; } .vx-row.on .vx-n { color:#ffb03a; font-weight:700; }
  .vx-bars { display:grid; gap:4px; } .vx-bars i { display:block; height:8px; border-radius:99px; transition:width .35s; min-width:4px; } .vx-bars .cur { background:#ffb03a; } .vx-bars .wst { background:#3a4d6e; }
  .vx-v { font-size:12.5px; color:#8fa3c4; text-align:right; } .vx-v b { color:#fff; } .vx-cap { margin:8px 0 0; font-size:12.5px; line-height:1.6; color:#8fa3c4; }
  .vx-sl { display:flex; flex-wrap:wrap; gap:6px 22px; margin:12px 0 0; } .vx-sl label { display:flex; align-items:center; gap:10px; flex:1 1 220px; font-weight:700; color:#c7d2e6; } .vx-sl input[type=range] { flex:1; min-width:0; accent-color:#ffb03a; } .vx-sl output { min-width:26px; text-align:right; color:#ffb03a; font-variant-numeric:tabular-nums; }
  .vx-mline { display:flex; flex-wrap:wrap; gap:6px 22px; margin:14px 0 4px; font-size:14px; color:#c7d2e6; }
  .vx-tw { margin-top:10px; } .vx-st, .vx-tab { width:100%; border-collapse:collapse; font-size:13.5px; } .vx-st th, .vx-st td, .vx-tab th, .vx-tab td { padding:9px 12px; text-align:left; border-bottom:1px solid #1d2a40; color:#c7d2e6; vertical-align:top; } .vx-st th, .vx-tab th { font-size:12px; letter-spacing:.06em; color:#8fa3c4; white-space:nowrap; } .vx-st code { font:12.5px ui-monospace,Menlo,Consolas,monospace; color:#ffcf7a; }
  .vx-st tr.pend td { color:#5f708b; } .vx-st tr.on td { background:rgba(255,176,58,.14); color:#fff; } .vx-st td:first-child { width:48px; }
  .vx-ph { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; } .vx-dot { padding:5px 11px; border-radius:99px; border:1px solid #2c3a52; background:#0d1522; color:#8fa3c4; font:inherit; font-size:12px; font-weight:700; cursor:pointer; } .vx-dot.done { color:#c7d2e6; } .vx-dot[aria-current="step"] { border-color:#ffb03a; color:#ffb03a; background:#14263f; }
  .vx-sg { grid-template-columns:1fr 1fr; } .vx button:disabled { opacity:.4; cursor:default; }
  #vpP0 .mpr-go .mgo:last-child:nth-child(odd) { grid-column:1/-1; }
  @media (max-width:820px) { .vx-sg { grid-template-columns:1fr; } .vx-row { grid-template-columns:100px 1fr; } .vx-v { grid-column:1/-1; text-align:left; } }
  /* building blocks folder */
  .vx-top { position:relative; padding:16px 16px 14px; border-radius:20px; background:linear-gradient(180deg,#0e1a2d,#0a1322); border:1px solid rgba(120,170,255,.22); }
  .vx-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 12px; font-size:13px; color:#8fa3c4; } .vx-crumb i { font-style:normal; color:#51617b; } .vx-crumb b { color:#ffb03a; }
  .vx-fams { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .vx-fam { display:flex; flex-direction:column; gap:2px; padding:12px 14px; text-align:left; border-radius:14px; border:1px solid #2c3a52; background:#0d1522; color:#c7d2e6; font:inherit; cursor:pointer; position:relative; padding-left:44px; }
  .vx-fam::before { content:""; position:absolute; left:14px; top:14px; width:20px; height:15px; border-radius:3px 5px 3px 3px; background:#5b6c88; box-shadow:0 -3px 0 -1px #5b6c88; } .vx-fam b { font-size:15px; } .vx-fam span { font-size:12px; color:#8fa3c4; } .vx-fam:hover { border-color:#5b9bff; }
  .vx-fam[aria-pressed="true"] { border-color:#ffb03a; background:#14263f; } .vx-fam[aria-pressed="true"]::before { background:#ffb03a; box-shadow:0 -3px 0 -1px #ffb03a; } .vx-fam[aria-pressed="true"] b { color:#ffb03a; }
  .vx-des { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 0; }
  .vx-views { display:inline-flex; margin-top:14px; padding:4px; border-radius:99px; background:#07101c; border:1px solid #243149; } .vx-vw { padding:7px 20px; border-radius:99px; border:0; background:transparent; color:#8fa3c4; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; } .vx-vw[aria-selected="true"] { background:#ffb03a; color:#1a1408; } .vx-vw:focus-visible { outline:2px solid #fff; }
  #vxP-circuit, #vxP-layout, #vxP-code { margin-top:16px; }
  .vx-layers { margin:0 0 4px; } .vx-lay { min-width:820px; } .vx-lcell { min-width:0; max-width:620px; margin:0 auto; }
  .vx-lay[data-off~="nw"] .L-nw, .vx-lay[data-off~="act"] .L-act, .vx-lay[data-off~="poly"] .L-poly, .vx-lay[data-off~="ct"] .L-ct, .vx-lay[data-off~="m1"] .L-m1, .vx-lay[data-off~="m2"] .L-m2, .vx-lay[data-off~="tag"] .L-tag { display:none; }
  .vx-lay[data-hi="0"] .carry { stroke:#8a5cff; }
  @media (max-width:820px) { .vx-fams { grid-template-columns:1fr; } .vx-lay { min-width:700px; } }
  .mgo.vx-wide { grid-column:1/-1; }
  @media (max-width:820px) { .vx-fams { grid-template-columns:repeat(3,1fr); gap:6px; } .vx-fam { padding:10px 8px; } .vx-fam::before { display:none; } .vx-fam b { font-size:14px; } .vx-fam span { font-size:11px; } }
  /* technology look: die-style tile on the overview, console-style folder header */
  .vx-top, .vx-die { background-image:linear-gradient(rgba(138,241,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(138,241,255,.05) 1px,transparent 1px),linear-gradient(180deg,#0b1626,#07101c); background-size:22px 22px,22px 22px,auto; border:1px solid rgba(138,241,255,.26); position:relative; }
  .vx-top::before, .vx-die::before, .vx-top::after, .vx-die::after { content:""; position:absolute; width:16px; height:16px; border:2px solid #8af1ff; opacity:.75; pointer-events:none; }
  .vx-top::before, .vx-die::before { left:9px; top:9px; border-right:0; border-bottom:0; } .vx-top::after, .vx-die::after { right:9px; bottom:9px; border-left:0; border-top:0; }
  .vx-crumb, .vx-fam b, .vx-fam small, .vx-fam em, .vx-vw, .vx-dt small, .vx-tags span { font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; }
  .vx-crumb { font-size:13px; margin-bottom:14px; } .vx-pf { color:#8af1ff; } .vx-crumb span { color:#c7d2e6; } .vx-crumb i { color:#51617b; font-style:normal; } .vx-crumb b { color:#ffb03a; }
  .vx-cur { display:inline-block; width:8px; height:15px; margin-left:4px; background:#ffb03a; animation:vxblink 1s steps(2) infinite; text-decoration:none; }
  @keyframes vxblink { 50% { opacity:0; } }
  .vx-fam { flex-direction:row; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid #243149; background:rgba(7,16,28,.82); color:#7f93b4; overflow:hidden; }
  .vx-fam::before { content:none; } .vx-fam::after { content:""; position:absolute; right:12px; top:12px; width:7px; height:7px; border-radius:50%; background:#33445f; }
  .vx-fam:hover { border-color:#8af1ff; color:#8af1ff; }
  .vx-fam[aria-pressed="true"] { border-color:#ffb03a; color:#ffb03a; background:linear-gradient(120deg,rgba(255,176,58,.12),rgba(7,16,28,.85)); box-shadow:0 0 0 1px rgba(255,176,58,.28),0 0 26px rgba(255,176,58,.15); } .vx-fam[aria-pressed="true"]::after { background:#ffb03a; box-shadow:0 0 8px #ffb03a; }
  .vx-gl { width:44px; height:30px; flex:none; } .vx-ft { display:flex; flex-direction:column; gap:1px; text-align:left; }
  .vx-ft small { font-size:11px; letter-spacing:.1em; color:#6f819f; } .vx-ft b { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#e8eefc; } .vx-ft em { font-size:12px; font-style:normal; color:#8fa3c4; } .vx-fam[aria-pressed="true"] b { color:#fff; }
  .vx-views { border-radius:10px; background:#050b14; border:1px solid #243149; padding:3px; } .vx-vw { border-radius:8px; padding:8px 18px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .vx-die { grid-column:1/-1; display:grid; grid-template-columns:1fr minmax(260px,430px); gap:22px; align-items:center; padding:24px 28px; border-radius:22px; }
  .vx-dt small { font-size:12px; font-weight:700; letter-spacing:.16em; color:#8af1ff; } .vx-dt h4 { margin:8px 0 8px; font-size:22px; letter-spacing:-.02em; color:#fff; } .vx-dt p { margin:0 0 14px; color:#a9b7cf; font-size:14.5px; line-height:1.55; }
  .vx-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .vx-tags span { padding:4px 10px; border-radius:6px; border:1px solid #2c3a52; background:rgba(7,16,28,.7); color:#8af1ff; font-size:11.5px; letter-spacing:.06em; }
  .vx-open { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:1px solid #ffb03a; background:rgba(255,176,58,.1); color:#ffb03a; font:700 13px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; } .vx-open:hover { background:rgba(255,176,58,.2); } .vx-open i { font-style:normal; }
  .vx-chip { width:100%; height:auto; display:block; } .vx-mr { fill:#0d1a2c; stroke:#33445f; stroke-width:1.6; transition:stroke .2s; } .vx-mac { cursor:pointer; outline:none; } .vx-mac:hover .vx-mr, .vx-mac:focus-visible .vx-mr { stroke:#ffb03a; }
  .vx-mt { font:700 10px ui-monospace,Menlo,Consolas,monospace; fill:#8af1ff; letter-spacing:.1em; } .vx-ms { font:9px ui-monospace,Menlo,Consolas,monospace; fill:#6f819f; }
  .vx-flow { stroke-dasharray:5 7; animation:vxdash 1.1s linear infinite; } @keyframes vxdash { to { stroke-dashoffset:-24; } }
  .vx-scan { animation:vxscan 3s steps(1,end) infinite; } @keyframes vxscan { 0% { transform:translateY(0); } 33% { transform:translateY(10px); } 66% { transform:translateY(20px); } }
  .vx-rip { animation:vxrip 1.8s linear infinite; } @keyframes vxrip { from { transform:translateX(0); opacity:1; } to { transform:translateX(112px); opacity:.2; } }
  @media (prefers-reduced-motion: reduce) { .vx-flow, .vx-scan, .vx-rip, .vx-cur { animation:none; } }
  @media (max-width:820px) { .vx-die { grid-template-columns:1fr; padding:20px 18px; } .vx-fam { padding:10px 10px; gap:8px; } .vx-gl { width:34px; } .vx-fam::after { display:none; } .vx-ft b { font-size:12px; letter-spacing:.04em; } .vx-ft em { display:none; } }

  /* Chip layout: the MacBook window */
  html.mb-lock { overflow:hidden; }
  .mb-ov { position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:calc(env(safe-area-inset-top,0px) + 50px) 16px 12px; background:radial-gradient(120% 90% at 50% 15%, rgba(34,66,120,.6), rgba(0,0,0,.92)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; transition:opacity .35s ease; overflow:hidden; }
  .mb-ov[hidden] { display:none; } .mb-ov.on { opacity:1; }
  .mb-x { position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:16px; z-index:3; display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:99px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; font:600 14px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .mb-x:hover { background:rgba(255,255,255,.16); } .mb-x kbd { font:600 11px ui-monospace,Menlo,Consolas,monospace; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.14); color:#c7d2e6; }
  .mb-x:focus-visible, .mb-it:focus-visible, .mb-l.r:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  .mb-stage { --mw:min(1180px,96vw,calc((100vh - 134px)*1.6)); width:var(--mw); perspective:2600px; container-type:inline-size; transform:translateY(26px) scale(.96); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
  .mb-ov.on .mb-stage { transform:none; }
  .mb-lid { transform-origin:50% 100%; transform:rotateX(-82deg); transition:transform 1.05s cubic-bezier(.22,.9,.25,1); }
  .mb-ov.on .mb-lid { transform:rotateX(0deg); }
  .mb-bezel { position:relative; padding:11px 11px 22px; border-radius:20px 20px 5px 5px; background:#050507; border:2px solid #3b3d44; box-shadow:inset 0 0 0 1px #15161a, 0 50px 100px -30px rgba(0,0,0,.95); }
  .mb-screen { position:relative; overflow:hidden; border-radius:9px; aspect-ratio:1100/688; background:#000; }
  .mb-desk { position:absolute; left:0; top:0; width:1100px; height:688px; transform-origin:0 0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; color:#e6edf7; }
  .mb-wall { position:absolute; inset:0; background:radial-gradient(60% 80% at 18% 12%,#4636a8 0%,transparent 62%),radial-gradient(52% 70% at 88% 22%,#1f78c4 0%,transparent 62%),radial-gradient(70% 80% at 62% 105%,#c4467a 0%,transparent 62%),#0d1230; }
  .mb-menu { position:absolute; left:0; right:0; top:0; height:26px; z-index:2; display:flex; align-items:center; gap:20px; padding:0 16px; background:rgba(8,10,22,.5); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:#fff; font-size:12.5px; font-weight:500; } .mb-menu b { font-weight:700; } .mb-menu span { opacity:.85; } .mb-menu .mb-chip { display:inline-grid; place-items:center; margin-right:-10px; font-style:normal; line-height:0; } .mb-menu .mb-chip svg { display:block; }
  .mb-notch { position:absolute; left:50%; top:0; width:150px; height:22px; margin-left:-75px; border-radius:0 0 12px 12px; background:#000; z-index:3; }
  .mb-win { position:absolute; left:20px; right:20px; top:38px; bottom:54px; z-index:1; border-radius:12px; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); background:#0b1220; border:1px solid rgba(255,255,255,.16); box-shadow:0 36px 80px -20px rgba(0,0,0,.85), 0 0 0 .5px rgba(0,0,0,.7); transition:left .32s ease, right .32s ease, top .32s ease, bottom .32s ease, border-radius .32s ease, transform .5s cubic-bezier(.5,0,.75,0), opacity .4s ease; transform-origin:13% 100%; }
  .mb-bar { display:grid; grid-template-columns:212px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 14px 9px 14px; background:linear-gradient(180deg,#262d40,#1b2132); border-bottom:1px solid #090d17; }
  .mb-lights { display:flex; gap:8px; align-items:center; } .mb-l { display:block; width:13px; height:13px; padding:0; border:0; border-radius:50%; position:relative; cursor:pointer; } .mb-l.r { background:#ff5f57; } .mb-l.y { background:#febc2e; } .mb-l.g { background:#28c840; } i.mb-l { cursor:default; }
  .mb-lights:hover .mb-l::after { position:absolute; inset:0; display:grid; place-items:center; font:700 11px/1 system-ui,sans-serif; } .mb-lights:hover .mb-l.r::after { content:"\00d7"; color:#7a1410; } .mb-lights:hover .mb-l.y::after { content:"\2212"; color:#8a5a00; } .mb-lights:hover .mb-l.g::after { content:"+"; color:#0a5a1a; } .mb-l.y:focus-visible, .mb-l.g:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  .mb-tt { min-width:0; text-align:center; line-height:1.2; } .mb-tt b { font-size:13px; font-weight:600; color:#e8edf7; }
  .mb-tt .vx-crumb { justify-content:center; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; margin:1px 0 0; font-size:11px; gap:3px 5px; color:#8fa3c4; }
  .mb-bar .vx-views { margin:0; padding:2px; border-radius:8px; background:rgba(0,0,0,.4); border:1px solid #0a0e18; } .mb-bar .vx-vw { padding:5px 16px; border-radius:6px; font-size:11.5px; letter-spacing:.1em; }
  .mb-bar .vx-vw[aria-selected="true"] { background:#3c4764; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.5); }
  .mb-body { display:grid; grid-template-columns:212px minmax(0,1fr); min-height:0; }
  .mb-side { overflow:auto; padding:14px 10px 14px; background:#111724; border-right:1px solid #090d17; scrollbar-width:thin; scrollbar-color:#2c3a52 transparent; }
  .mb-sh { display:block; padding:0 10px 2px; font:700 10.5px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:#8497b5; }
  .mb-gh { display:flex; align-items:center; gap:8px; padding:14px 10px 5px; font:700 12px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; color:#8fa3c4; } .mb-gh .vx-gl { width:26px; height:18px; color:#8af1ff; }
  .mb-it { display:block; width:100%; margin:1px 0; padding:7px 10px 7px 12px; text-align:left; border:0; border-radius:7px; background:transparent; color:#c7d2e6; font:500 13.5px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; cursor:pointer; } .mb-it:hover { background:rgba(255,255,255,.07); }
  .mb-it[aria-current="true"] { background:#2f6fe4; color:#fff; font-weight:600; }
  .mb-tip { margin:18px 10px 0; padding-top:14px; border-top:1px solid #1d2a40; font-size:12.5px; line-height:1.55; color:#8fa3c4; } .mb-tip b { color:#e8edf7; font-weight:600; }
  .mb-main { overflow:auto; padding:20px 26px 32px; background:#0b1220; scrollbar-width:thin; scrollbar-color:#2c3a52 transparent; }
  .mb-head { margin-bottom:6px; } .mb-head h3 { margin:0; font-size:23px; letter-spacing:-.02em; color:#fff; } .mb-head p { margin:6px 0 0; max-width:640px; font-size:14.5px; line-height:1.55; color:#a9b7cf; }
  .mb-main .vx h4:first-child { margin-top:0; }
  .mb-base { position:relative; width:calc(100% + 76px); margin:0 -38px; height:15px; border-radius:2px 2px 20px 20px/2px 2px 14px 14px; background:linear-gradient(180deg,#d4d8df 0%,#a3a9b4 55%,#757b87 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 34px 60px -22px rgba(0,0,0,.9); } .mb-base i { position:absolute; left:50%; top:0; width:15%; height:6px; margin-left:-7.5%; border-radius:0 0 9px 9px; background:linear-gradient(180deg,#80869a,#b3b8c3); }
  /* a full-screen app window on phones, tablets and short screens */
  .mb-fs { padding:0; place-items:stretch; background:#0b1220; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mb-fs .mb-x { display:none; } .mb-fs .mb-stage { width:100%; height:100%; perspective:none; transform:none; } .mb-fs .mb-lid { height:100%; transform:none; transition:none; } .mb-fs .mb-bezel { height:100%; padding:0; border:0; border-radius:0; background:#0b1220; box-shadow:none; }
  .mb-fs .mb-screen { height:100%; aspect-ratio:auto; border-radius:0; } .mb-fs .mb-desk { width:100%; height:100%; transform:none !important; } .mb-fs .mb-wall, .mb-fs .mb-menu, .mb-fs .mb-notch, .mb-fs .mb-base { display:none; }
  .mb-fs .mb-win { inset:0; border-radius:0; border:0; box-shadow:none; padding-top:env(safe-area-inset-top,0px); background:#0b1220; }
  .mb-fs .mb-bar { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"l t" "v v"; gap:8px 10px; padding:10px 12px; } .mb-fs .mb-lights { grid-area:l; } .mb-fs .mb-tt { grid-area:t; text-align:left; } .mb-fs .mb-tt .vx-crumb { justify-content:flex-start; } .mb-fs .vx-views { grid-area:v; display:flex; } .mb-fs .vx-vw { flex:1; padding:8px 6px; }
  .mb-fs .mb-l.y, .mb-fs .mb-l.g { display:none; } .mb-fs .mb-l.r { width:auto; height:32px; padding:0 16px; border-radius:99px; color:#fff; font:700 13.5px -apple-system,system-ui,sans-serif; display:inline-flex; align-items:center; } .mb-fs .mb-l.r::before { content:"Close"; } .mb-fs .mb-l.r:hover::after { content:none; }
  .mb-fs .mb-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .mb-fs .mb-side { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:8px 12px; border-right:0; border-bottom:1px solid #090d17; -webkit-overflow-scrolling:touch; } .mb-fs .mb-sh, .mb-fs .mb-gh, .mb-fs .mb-tip { display:none; } .mb-fs .mb-grp { display:contents; }
  .mb-fs .mb-it { width:auto; flex:none; margin:0; padding:8px 14px; white-space:nowrap; border:1px solid #2c3a52; border-radius:99px; } .mb-fs .mb-it[aria-current="true"] { border-color:#2f6fe4; }
  .mb-fs .mb-main { padding:14px 14px 40px; } .mb-fs .mb-head h3 { font-size:20px; }
  @media (prefers-reduced-motion: reduce) { .mb-stage, .mb-lid, .mb-ov { transition:none; } .mb-lid { transform:none; } .mb-stage { transform:none; } }

  /* menu bar status items, model name, dock, zoom and minimise, and the preview on the tab */
  .mb-st { margin-left:auto; display:flex; align-items:center; gap:16px; font-size:12.5px; font-weight:500; color:#fff; } .mb-wx { display:flex; align-items:center; gap:6px; } .mb-ic { display:block; } .mb-clock { white-space:pre; }
  .mb-bat { position:relative; display:block; width:25px; height:12px; box-sizing:border-box; padding:1.5px; border:1.4px solid rgba(255,255,255,.6); border-radius:4px; } .mb-bat::after { content:""; position:absolute; right:-4.5px; top:2.5px; width:2px; height:4px; border-radius:0 2px 2px 0; background:rgba(255,255,255,.6); } .mb-bat i { display:block; height:100%; width:42%; border-radius:2px; background:#ffd60a; }
  .mb-siri { display:block; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 14%,transparent 16%),conic-gradient(from 210deg,#3b82ff,#a855f7,#ff4d94,#ff9a3c,#3b82ff); box-shadow:inset 0 0 5px rgba(255,255,255,.55); }
  .mb-model { position:absolute; left:0; right:0; bottom:5px; text-align:center; font:500 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; font-size:clamp(7px,.85cqw,10.5px); letter-spacing:.07em; color:#9b9fab; pointer-events:none; }
  .mb-dock { position:absolute; left:50%; bottom:5px; z-index:3; display:flex; align-items:flex-end; gap:3px; width:max-content; padding:5px 8px 9px; white-space:nowrap; transform:translateX(-50%); border-radius:16px; background:rgba(34,36,52,.42); border:1px solid rgba(255,255,255,.26); box-shadow:0 10px 30px -8px rgba(0,0,0,.6), inset 0 .5px 0 rgba(255,255,255,.25); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5); }
  .mb-dki { position:relative; display:block; flex:none; width:27px; height:27px; padding:0; border:0; border-radius:6.5px; background-clip:padding-box; box-shadow:0 1px 3px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.3); transform-origin:50% 100%; transition:transform .17s cubic-bezier(.2,.8,.3,1); cursor:default; }
  .mb-dki svg { display:block; width:100%; height:100%; border-radius:inherit; overflow:hidden; }
  .mb-dki i { position:absolute; left:50%; bottom:-6px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:#fff; opacity:.85; }
  .mb-dki::before { content:attr(data-n); position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); padding:2px 7px; border-radius:5px; font:500 7.5px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; color:#fff; background:rgba(40,42,58,.88); border:.5px solid rgba(255,255,255,.22); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; }
  .mb-bd { position:absolute; top:-4px; right:-4px; min-width:11px; height:11px; padding:0 3px; box-sizing:border-box; border-radius:7px; background:#d62a20; color:#fff; font:700 7.5px/11px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; text-align:center; box-shadow:0 0 0 .5px rgba(0,0,0,.35); }
  .mb-dsep { flex:none; align-self:stretch; width:1px; margin:2px 4px 2px 3px; background:rgba(255,255,255,.28); }
  .mb-dk { cursor:pointer; } .mb-dk:focus-visible { outline:2px solid #fff; outline-offset:3px; }
  .mb-ov .mb-dki:hover { transform:translateY(-9px) scale(1.5); z-index:2; } .mb-ov .mb-dki:hover + .mb-dki, .mb-ov .mb-dki:has(+ .mb-dki:hover) { transform:translateY(-4px) scale(1.2); } .mb-ov .mb-dki:hover::before { opacity:1; }
  .mb-dki.bn { animation:mbbounce .62s ease 2; }
  .mb-desk.min .mb-dk { animation:mbbounce .7s ease .35s 2; } @keyframes mbbounce { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-16px); } 70% { transform:translateY(-4px); } }
  .mb-desk.min .mb-win { transform:translateY(40px) scale(.06); opacity:0; pointer-events:none; }
  .mb-desk.zoom .mb-win { left:0; right:0; top:26px; bottom:46px; border-radius:0; border-width:0; }
  .mb-fs .mb-model, .mb-fs .mb-dock { display:none; }
  .mb-launch2 { padding:22px 22px 24px; border-radius:22px; overflow:hidden; background-image:linear-gradient(rgba(138,241,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(138,241,255,.05) 1px,transparent 1px),linear-gradient(180deg,#0b1626,#07101c); background-size:22px 22px,22px 22px,auto; border:1px solid rgba(138,241,255,.26); }
  .mb-prev { position:relative; display:block; max-width:900px; margin:0 auto; cursor:pointer; border-radius:22px; outline:none; } .mb-prev:focus-visible { outline:2px solid #fff; outline-offset:8px; } .mb-prev:hover .mb-bezel { border-color:#6a6d78; }
  .mb-inline { width:100%; transform:none; transition:none; perspective:none; } .mb-inline .mb-lid { transform:none; transition:none; } .mb-inline .mb-desk { pointer-events:none; } .mb-inline .mb-base { width:calc(100% + 40px); margin:0 -20px; }
  .mb-hint { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); padding:10px 20px; border-radius:99px; background:rgba(0,0,0,.65); color:#fff; font:600 14px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; } .mb-prev:hover .mb-hint, .mb-prev:focus-visible .mb-hint { opacity:1; }
  @media (hover:none) { .mb-hint { opacity:1; top:auto; bottom:30px; transform:translateX(-50%); padding:8px 16px; font-size:13px; } }
  .mb-cap2 { max-width:900px; margin:26px auto 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; } .mb-lt small { font:700 12px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.16em; color:#8af1ff; } .mb-lt h4 { margin:6px 0 6px; font-size:20px; letter-spacing:-.02em; color:#fff; } .mb-lt p { margin:0; max-width:560px; color:#a9b7cf; font-size:14.5px; line-height:1.6; }
  @media (prefers-reduced-motion: reduce) { .mb-win, .mb-dki, .mb-desk.min .mb-dk { transition:none; animation:none; } .mb-dki.bn { animation:none; } }

  /* start screen of the MacBook window: choose a block first */
  .mb-main.home > .vx { display:none; } .mb-main:not(.home) > .vx-home { display:none; }
  .mb-desk.homeview .vx-views { visibility:hidden; } .mb-fs .mb-desk.homeview .vx-views { display:none; }
  .mb-it.mb-home { display:flex; align-items:center; gap:8px; margin:0 0 10px; } .mb-it.mb-home svg { flex:none; }
  .vh-hero small { font:700 11px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.16em; color:#8af1ff; } .vh-hero h3 { margin:6px 0 4px; font-size:26px; letter-spacing:-.02em; color:#fff; } .vh-hero p { margin:0 0 4px; max-width:560px; font-size:14.5px; line-height:1.55; color:#a9b7cf; }
  .vh-grp { margin-top:16px; } .vh-gh { display:flex; align-items:center; gap:10px; margin-bottom:8px; font:700 12px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:#8fa3c4; } .vh-gh .vx-gl { width:30px; height:20px; color:#8af1ff; } .vh-gh i { font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; color:#8497b5; }
  .vh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
  .vh-card { display:flex; flex-direction:column; gap:6px; margin:0; text-align:left; padding:13px 14px 12px; border-radius:12px; border:1px solid #24324b; background:#101a2c; color:#e6edf7; font-family:inherit; }
  .vh-card b { font-size:15px; color:#fff; letter-spacing:-.01em; } .vh-card span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.45; color:#a9b7cf; } .vh-card em { margin-top:auto; padding-top:4px; font:600 10px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.03em; white-space:nowrap; font-style:normal; text-transform:uppercase; color:#8af1ff; }
  button.vh-card { cursor:pointer; transition:border-color .15s, background .15s, transform .15s; } button.vh-card:hover { border-color:#2f6fe4; background:#142138; transform:translateY(-1px); } button.vh-card:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  .mb-inline .vh-hero h3 { font-size:24px; }
  .vx-home { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:12px; align-content:start; } .vx-home > .vh-hero { grid-column:1 / -1; }
  .vx-home > .vh-grp { grid-column:span 2; min-width:0; margin-top:14px; } .vx-home > .vh-grp:nth-child(2) { grid-column:1 / -1; } .vx-home > .vh-grp:nth-child(3) { grid-column:span 1; }
  .vx-home .vh-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .vx-home > .vh-grp:nth-child(2) .vh-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mb-fs .vx-home { grid-template-columns:minmax(0,1fr); } .mb-fs .vx-home > .vh-grp, .mb-fs .vx-home > .vh-grp:nth-child(n) { grid-column:1 / -1; } .mb-fs .vx-home .vh-grid, .mb-fs .vx-home > .vh-grp:nth-child(2) .vh-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

  .vx-home > .vh-grp:nth-child(3) .vh-gh i { display:none; }

  /* SRAM periphery */
  .vx-pe { min-width:0; margin:0 auto; } .vx-lpe { min-width:560px; max-width:700px; margin:0 auto; }
  .vx-home > .vh-grp:nth-child(5) { grid-column:1 / -1; } .vx-home > .vh-grp:nth-child(5) .vh-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .mb-fs .vx-home > .vh-grp:nth-child(5) .vh-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  #vxSrGo { display:flex; flex-wrap:wrap; gap:8px; }
  /* compact picker and sidebar so every block is visible without scrolling */
  .vh-hero h3 { margin:4px 0 2px; font-size:22px; } .vh-hero p { max-width:none; margin:0; font-size:13.5px; }
  .vx-home > .vh-grp { margin-top:10px; } .vh-gh { margin-bottom:6px; }
  .vh-card { padding:10px 12px 9px; gap:4px; } .vh-card span { -webkit-line-clamp:2; font-size:12px; line-height:1.4; }
  .mb-it { margin:0; padding:4px 10px 4px 12px; } .mb-gh { padding:8px 10px 3px; } .mb-tip { display:none; }
  .vx-home > .vh-grp:nth-child(5) .vh-card { padding:7px 12px 8px; gap:1px; } .vx-home > .vh-grp:nth-child(5) .vh-card span { display:block; -webkit-line-clamp:unset; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vh-hero small { display:none; } .vh-hero h3 { margin:0 0 2px; } .vh-card { padding:9px 12px 8px; }
  .vx-lay[data-hi="0"] .carry1 { stroke:#4f8cff; }

  /* MPR-300 3D panel: Main and Aux flow switches, each with a dot in the colour of its pulses (grey when off) */
  .v3btns button[data-v3="flowM"]::before, .v3btns button[data-v3="flowA"]::before, .v3btns button[data-v3="labels"]::before, .v3btns button[data-v3="neon"]::before { content:""; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:#3ddc88; box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 8px #3ddc88; vertical-align:1px; }
  .v3btns button[data-v3="flowM"]::before { background:#ffb21a; box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 8px #ffb21a; }
  .v3btns button[data-v3="flowA"]::before { background:#19d3ff; box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 8px #19d3ff; }
  .v3btns button[data-v3="flowM"][aria-pressed="false"]::before, .v3btns button[data-v3="flowA"][aria-pressed="false"]::before, .v3btns button[data-v3="labels"][aria-pressed="false"]::before, .v3btns button[data-v3="neon"][aria-pressed="false"]::before { background:#8b93a1; box-shadow:none; }
  .v3btns button { white-space:nowrap; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  @media (max-width:640px) { .v3hint { display:none; } .v3bar { justify-content:center; } .v3btns { flex-wrap:wrap; justify-content:center; } .v3btns button { min-height:36px; padding:0 12px; font-size:13px; } .v3btns button[data-v3="in"], .v3btns button[data-v3="out"] { display:none; } }
  .v3btns button[data-v3="neon"]::before { background:#b45cff; box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 8px #b45cff; }
  .v3btns button[data-v3="neon"][aria-pressed="false"]::before { background:#8b93a1; box-shadow:none; }
  .v3, .v3.neon { background:radial-gradient(85% 95% at 50% 42%,#18203a,#070a14 78%); border-color:#1f2943; }
  .v3 .v3hint { background:rgba(255,255,255,.12); }
  .v3 .v3btns button { background:rgba(255,255,255,.17); } .v3 .v3btns button:hover { background:rgba(255,255,255,.28); }

  /* Fault lab: the five rules as one slim row of pills */
  .lab-rules { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
  .lab-rules li { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 11px; border-radius:99px; cursor:pointer; transition:border-color .2s,background .2s; } .lab-rules li:hover { border-color:#4a4a52; } .lab-rules li:focus-visible { outline:2px solid #5aa8ff; outline-offset:2px; } .lab-rules li[aria-pressed="true"] { background:#17181d; border-color:#5a5a63; }
  .lab-rules li > div { display:block; } .lab-rules b { display:inline; font-size:14px; font-weight:600; } .lab-rules small { display:none; }
  .lab-rules .lamp { width:10px; height:10px; flex:none; } .lab-rules .rv-val { font-size:12px; color:#9a9aa3; margin-left:2px; }
  .lab-note { margin:10px 2px 0; min-height:20px; font-size:13px; line-height:1.45; color:#a1a1a6; }
  .lab-rules { gap:6px; } .lab-rules li { gap:6px; padding:6px 11px 6px 9px; } .lab-rules b { font-size:13px; } .lab-rules .rv-val { font-size:11.5px; margin-left:0; } .lab-rules .lamp { width:9px; height:9px; }

  /* ---- iPhone with the live data and alerts of the MPR-300 panel ---- */
  .phone-wrap { margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .ph-cap { align-self:stretch; display:flex; flex-direction:column; gap:4px; } .ph-cap b { font-size:16px; letter-spacing:-.01em; } .ph-cap span { font-size:13px; color:var(--muted); line-height:1.4; }
  .ph { position:relative; width:max(230px,min(300px,100%,calc((100vh - 150px) * .4613))); padding:8px; border-radius:17% / 8%; background:linear-gradient(150deg,#55565d,#1b1b1f 38%,#2b2b31 70%,#4a4b52); box-shadow:0 0 0 1px #6a6b73 inset, 0 0 0 2.5px #0b0b0c, 0 34px 60px -22px rgba(0,0,0,.85), 0 0 60px -10px rgba(47,122,229,.25); }
  .ph-side { position:absolute; right:-3px; top:19%; width:3px; height:11%; border:0; padding:0; border-radius:0 3px 3px 0; background:#3a3a40; cursor:pointer; } .ph-side:hover { background:#6a6b73; } .ph-side:focus-visible { outline:2px solid #5aa8ff; outline-offset:2px; }
  .ph-screen { position:relative; width:100%; aspect-ratio:393 / 852; border-radius:14% / 6.5%; overflow:hidden; container-type:inline-size; background:#000; }
  .ph-in { --u:.72px; position:absolute; inset:0; color:#fff; font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif; }
  @supports (width:1cqw) { .ph-in { --u:calc(100cqw / 393); } }
  .ph.buzz { animation:phbuzz .6s cubic-bezier(.36,.07,.19,.97); }
  @keyframes phbuzz { 0%,100% { transform:none; } 12% { transform:translate(-3px,1px) rotate(-.5deg); } 24% { transform:translate(3px,-1px) rotate(.5deg); } 36% { transform:translate(-3px,0) rotate(-.4deg); } 48% { transform:translate(3px,1px) rotate(.4deg); } 60% { transform:translate(-2px,0); } 72% { transform:translate(2px,0); } }
  .ph-island { position:absolute; z-index:20; left:50%; top:calc(var(--u)*11); width:calc(var(--u)*124); height:calc(var(--u)*36); margin-left:calc(var(--u)*-62); border-radius:99px; background:#000; }
  .ph-sb { position:absolute; z-index:19; top:calc(var(--u)*17); left:calc(var(--u)*34); right:calc(var(--u)*30); display:flex; justify-content:space-between; align-items:center; font-size:calc(var(--u)*16); font-weight:600; }
  .ph-sbi { display:flex; gap:calc(var(--u)*6); align-items:center; } .ph-sbi svg { height:calc(var(--u)*12); width:auto; display:block; }
  .ph-lock { position:absolute; inset:0; background:radial-gradient(120% 55% at 15% 0%,#2f4fb0 0%,transparent 62%),radial-gradient(90% 55% at 95% 42%,#7b2fa0 0%,transparent 60%),linear-gradient(#0d1226,#05060d); cursor:pointer; }
  .ph-date { position:absolute; top:calc(var(--u)*72); left:0; right:0; text-align:center; font-size:calc(var(--u)*19); font-weight:600; color:rgba(255,255,255,.82); }
  .ph-time { position:absolute; top:calc(var(--u)*88); left:0; right:0; text-align:center; font-size:calc(var(--u)*84); font-weight:700; line-height:1.1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
  .ph-la { position:absolute; left:calc(var(--u)*14); right:calc(var(--u)*14); top:calc(var(--u)*196); padding:calc(var(--u)*13) calc(var(--u)*15) calc(var(--u)*14); border-radius:calc(var(--u)*26); background:rgba(28,32,52,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }
  .ph-la-h { display:flex; align-items:center; gap:calc(var(--u)*9); font-size:calc(var(--u)*14); } .ph-la-h b { font-weight:600; flex:1; } .ph-la-h em { font-style:normal; font-weight:700; font-size:calc(var(--u)*12); padding:calc(var(--u)*4) calc(var(--u)*10); border-radius:99px; background:rgba(255,255,255,.14); color:#d2d2d7; white-space:nowrap; }
  .ph-la[data-k="good"] .ph-la-h em, .ph-hero[data-k="good"] .ph-pill { background:rgba(61,220,136,.2); color:#58f0a3; } .ph-la[data-k="warn"] .ph-la-h em, .ph-hero[data-k="warn"] .ph-pill { background:rgba(255,190,70,.2); color:#ffc65c; } .ph-la[data-k="bad"] .ph-la-h em, .ph-hero[data-k="bad"] .ph-pill { background:rgba(255,80,80,.24); color:#ff8f8f; }
  .ph-la-b { display:flex; align-items:flex-end; gap:calc(var(--u)*14); margin-top:calc(var(--u)*10); }
  .ph-la-n strong { font-size:calc(var(--u)*44); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .ph-la-n small { display:block; margin-top:calc(var(--u)*3); font-size:calc(var(--u)*12); color:#b9bccb; }
  .ph-la-bars { flex:1; height:calc(var(--u)*52); display:flex; align-items:flex-end; gap:calc(var(--u)*7); } .ph-la-bars i { flex:1; display:block; min-height:calc(var(--u)*3); border-radius:calc(var(--u)*4); transition:height .4s; } .ph-la-bars i:nth-child(1) { background:#ff4b4b; } .ph-la-bars i:nth-child(2) { background:#ffd23a; } .ph-la-bars i:nth-child(3) { background:#3a86ff; }
  .ph-la-v { display:flex; flex-direction:column; align-items:flex-end; gap:calc(var(--u)*3); font-size:calc(var(--u)*13); color:#d2d4e0; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ph-notes { position:absolute; left:calc(var(--u)*14); right:calc(var(--u)*14); top:calc(var(--u)*344); bottom:calc(var(--u)*150); margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:calc(var(--u)*8); overflow:hidden; }
  .ph-n, .ph-ban { display:flex; gap:calc(var(--u)*10); align-items:flex-start; padding:calc(var(--u)*11) calc(var(--u)*13); border-radius:calc(var(--u)*22); background:rgba(44,48,70,.66); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 0 0 1px rgba(255,255,255,.07) inset; flex:none; }
  .ph-n.k-bad { background:rgba(96,32,40,.72); } .ph-n.new { animation:phin .5s cubic-bezier(.2,.9,.3,1.15); } @keyframes phin { from { transform:translateY(calc(var(--u)*-26)) scale(.97); opacity:0; } }
  .ph-ic { width:calc(var(--u)*38); height:calc(var(--u)*38); flex:none; display:grid; place-items:center; border-radius:calc(var(--u)*9); background:linear-gradient(145deg,#52a0ff,#2f5fe0); } .ph-ic svg { width:calc(var(--u)*20); height:calc(var(--u)*20); display:block; }
  .k-bad .ph-ic { background:linear-gradient(145deg,#ff7070,#d12a2a); } .k-warn .ph-ic { background:linear-gradient(145deg,#ffc650,#e08a00); } .k-ok .ph-ic { background:linear-gradient(145deg,#45e08e,#12a35a); }
  .ph-n > div, .ph-ban > div { flex:1; min-width:0; } .ph-nh { display:flex; justify-content:space-between; gap:calc(var(--u)*8); align-items:baseline; } .ph-nh b { font-size:calc(var(--u)*15); font-weight:600; } .ph-nh em { font-style:normal; font-size:calc(var(--u)*12); color:#b4b7c6; white-space:nowrap; }
  .ph-n p, .ph-ban p { margin:calc(var(--u)*2) 0 0; font-size:calc(var(--u)*14); line-height:1.3; color:#e4e6ee; }
  .ph-more, .ph-none { text-align:center; font-size:calc(var(--u)*13); color:#aab0c4; padding:calc(var(--u)*4) 0; flex:none; }
  .ph-open { position:absolute; left:50%; bottom:calc(var(--u)*104); transform:translateX(-50%); padding:calc(var(--u)*8) calc(var(--u)*18); border:0; border-radius:99px; background:rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:calc(var(--u)*14); line-height:1.2; font-family:inherit; cursor:pointer; white-space:nowrap; } .ph-open:hover { background:rgba(255,255,255,.26); }
  .ph-lb { position:absolute; left:calc(var(--u)*40); right:calc(var(--u)*40); bottom:calc(var(--u)*36); display:flex; justify-content:space-between; } .ph-lb span { width:calc(var(--u)*50); height:calc(var(--u)*50); border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .ph-lb svg { width:calc(var(--u)*22); height:calc(var(--u)*22); }
  .ph-home { position:absolute; z-index:20; left:50%; bottom:calc(var(--u)*8); width:calc(var(--u)*134); height:calc(var(--u)*5); margin-left:calc(var(--u)*-67); border-radius:9px; background:rgba(255,255,255,.88); pointer-events:none; }
  .ph-app { position:absolute; inset:0; display:flex; flex-direction:column; padding-top:calc(var(--u)*54); background:#000; }
  .ph-lock[hidden], .ph-app[hidden] { display:none; }
  .ph-ah { display:flex; justify-content:space-between; align-items:flex-end; padding:calc(var(--u)*6) calc(var(--u)*18) calc(var(--u)*8); } .ph-ah small { display:block; font-size:calc(var(--u)*13); color:#9a9aa3; } .ph-ah h4 { margin:0; font-size:calc(var(--u)*32); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
  .ph-lk { border:0; border-radius:99px; padding:calc(var(--u)*7) calc(var(--u)*14); font-weight:600; font-size:calc(var(--u)*14); line-height:1; font-family:inherit; background:#1c1c20; color:#fff; cursor:pointer; } .ph-lk:hover { background:#2a2a30; }
  .ph-scroll { flex:1; overflow-y:auto; padding:0 calc(var(--u)*14) calc(var(--u)*34); scrollbar-width:none; -webkit-overflow-scrolling:touch; } .ph-scroll::-webkit-scrollbar { display:none; }
  .ph-hero { padding:calc(var(--u)*16) calc(var(--u)*18); border-radius:calc(var(--u)*26); background:linear-gradient(160deg,#17181d,#0e0f12); box-shadow:0 0 0 1px rgba(255,255,255,.07) inset; } .ph-hero[data-k="good"] { background:linear-gradient(160deg,#10281c,#0b130f); } .ph-hero[data-k="warn"] { background:linear-gradient(160deg,#2c2210,#15110a); } .ph-hero[data-k="bad"] { background:linear-gradient(160deg,#35161a,#170b0d); }
  .ph-pill { display:inline-block; padding:calc(var(--u)*5) calc(var(--u)*12); border-radius:99px; font-size:calc(var(--u)*13); font-weight:700; background:rgba(255,255,255,.12); color:#c7c7cc; }
  .ph-big { margin-top:calc(var(--u)*10); display:flex; align-items:baseline; gap:calc(var(--u)*6); } .ph-big strong { font-size:calc(var(--u)*68); font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; } .ph-big small { font-size:calc(var(--u)*22); color:#b4b4bc; font-weight:600; }
  .ph-sub { margin-top:calc(var(--u)*8); font-size:calc(var(--u)*14); line-height:1.35; color:#c7c7cc; }
  .ph-app .live-status { margin:calc(var(--u)*10) 0 0; padding:calc(var(--u)*10) calc(var(--u)*12); gap:calc(var(--u)*6); border-radius:calc(var(--u)*18); border:0; background:#121216; } .ph-app .lpill { font-size:calc(var(--u)*10.5); padding:calc(var(--u)*4) calc(var(--u)*9); } .ph-app .lmsg { flex-basis:100%; min-width:0; font-size:calc(var(--u)*12.5); line-height:1.35; }
  .ph-app .lcard { margin-top:calc(var(--u)*10); padding:calc(var(--u)*12) calc(var(--u)*15); border:0; border-radius:calc(var(--u)*22); background:#121216; } .ph-app .lcard h5 { margin:0 0 calc(var(--u)*6); font-size:calc(var(--u)*14); } .ph-app .lcard canvas { height:calc(var(--u)*74); border-radius:calc(var(--u)*14); margin-bottom:calc(var(--u)*4); }
  .ph-app .lr { gap:calc(var(--u)*10); padding:calc(var(--u)*6) 0; font-size:calc(var(--u)*14); border-top:1px solid #1f1f24; } .ph-app .lr b { max-width:62%; }
  .ph-hist { list-style:none; margin:0; padding:0; } .ph-hist li { display:flex; gap:calc(var(--u)*10); padding:calc(var(--u)*7) 0; border-top:1px solid #1f1f24; font-size:calc(var(--u)*13); line-height:1.35; color:#c7c7cc; } .ph-hist li:first-child { border-top:0; } .ph-hist b { flex:none; font-weight:600; color:#8f8f98; font-variant-numeric:tabular-nums; } .ph-hist strong { color:#fff; font-weight:600; } .ph-hist .k-bad strong { color:#ff8f8f; } .ph-hist .k-warn strong { color:#ffc65c; } .ph-hist .k-ok strong { color:#58f0a3; } .ph-hist .none { color:#8f8f98; }
  .ph-ban { position:absolute; z-index:15; left:calc(var(--u)*10); right:calc(var(--u)*10); top:calc(var(--u)*54); background:rgba(58,62,86,.94); transform:translateY(-160%); opacity:0; transition:transform .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s; pointer-events:none; box-shadow:0 12px 30px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1) inset; } .ph-ban.on { transform:none; opacity:1; } .ph-ban.k-bad { background:rgba(112,34,44,.96); }
  @media (min-width:901px) { .sg-l { align-self:stretch; } .sgrid > .sim { position:sticky; top:76px; align-self:start; } }
  @media (min-width:901px) and (max-height:700px) { .sgrid > .sim { position:static; } }
  @media (max-width:900px) { .sg-l { display:contents; } .sgrid .infocard { order:0; } .sgrid .clist { order:1; margin-top:-12px; } .sgrid > .sim { order:2; } .phone-wrap { order:3; margin-top:4px; } .ph { width:min(300px,86vw); } }
  @media (prefers-reduced-motion:reduce) { .ph.buzz, .ph-n.new { animation:none; } .ph-ban { transition:opacity .2s; transform:none; } }
  .ph-app .live-status .btn { min-height:0; padding:calc(var(--u)*8) calc(var(--u)*16); font-size:calc(var(--u)*14); margin-top:calc(var(--u)*4); }
  /* ---- the phone as a real phone: home screen and apps ---- */
  .ph-home { pointer-events:auto; border:0; padding:0; cursor:pointer; } .ph-home::after { content:""; position:absolute; inset:calc(var(--u)*-16) calc(var(--u)*-44); } .ph-home:focus-visible { outline:2px solid #5aa8ff; outline-offset:calc(var(--u)*4); }
  .ph-ban.on { pointer-events:auto; cursor:pointer; }
  .ph-hs { position:absolute; inset:0; padding-top:calc(var(--u)*62); background:radial-gradient(120% 55% at 18% 0%,#25479e 0%,transparent 62%),radial-gradient(90% 55% at 92% 62%,#6a2a96 0%,transparent 62%),linear-gradient(#0b1020,#05060d); } .ph-hs[hidden] { display:none; }
  .ph-wg { display:block; width:calc(100% - var(--u)*28); margin:calc(var(--u)*6) calc(var(--u)*14) calc(var(--u)*18); padding:calc(var(--u)*13) calc(var(--u)*15) calc(var(--u)*14); border:0; border-radius:calc(var(--u)*26); background:rgba(28,32,52,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 0 0 1px rgba(255,255,255,.09) inset; color:#fff; font-family:inherit; text-align:left; cursor:pointer; }
  .ph-wg-h { display:flex; align-items:center; gap:calc(var(--u)*9); font-size:calc(var(--u)*14); } .ph-wg-h b { font-weight:600; flex:1; } .ph-wg-h em { font-style:normal; font-weight:700; font-size:calc(var(--u)*12); padding:calc(var(--u)*4) calc(var(--u)*10); border-radius:99px; background:rgba(255,255,255,.14); color:#d2d2d7; white-space:nowrap; }
  .ph-wg[data-k="good"] .ph-wg-h em { background:rgba(61,220,136,.2); color:#58f0a3; } .ph-wg[data-k="warn"] .ph-wg-h em { background:rgba(255,190,70,.2); color:#ffc65c; } .ph-wg[data-k="bad"] .ph-wg-h em { background:rgba(255,80,80,.24); color:#ff8a8a; }
  .ph-wg-b { display:flex; align-items:baseline; gap:calc(var(--u)*6); margin-top:calc(var(--u)*8); } .ph-wg-b strong { font-size:calc(var(--u)*46); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .ph-wg-b small { font-size:calc(var(--u)*16); color:#b9bccb; font-weight:600; } .ph-wg-b span { margin-left:auto; font-size:calc(var(--u)*13); color:#d2d4e0; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ph-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--u)*20) calc(var(--u)*6); padding:0 calc(var(--u)*18); }
  .ph-ap { position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*6); padding:0; border:0; background:none; color:#fff; font-family:inherit; font-size:calc(var(--u)*12); font-weight:500; cursor:pointer; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .ph-aic { width:calc(var(--u)*62); height:calc(var(--u)*62); display:grid; place-items:center; border-radius:calc(var(--u)*15); box-shadow:0 calc(var(--u)*4) calc(var(--u)*10) -u(2) rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12) inset; transition:transform .15s; } .ph-aic svg { width:calc(var(--u)*32); height:calc(var(--u)*32); display:block; } .ph-ap:hover .ph-aic { transform:scale(1.05); } .ph-ap:active .ph-aic { transform:scale(.93); } .ph-ap:focus-visible { outline:2px solid #5aa8ff; outline-offset:calc(var(--u)*3); border-radius:calc(var(--u)*14); }
  .ph-bdg { position:absolute; top:calc(var(--u)*-6); right:calc(var(--u)*2); min-width:calc(var(--u)*22); height:calc(var(--u)*22); padding:0 calc(var(--u)*6); border-radius:99px; background:#ff3b30; color:#fff; font-style:normal; font-size:calc(var(--u)*13); font-weight:700; line-height:calc(var(--u)*22); text-align:center; box-shadow:0 0 0 2px #0b0f1e; } .ph-bdg[hidden] { display:none; }
  .ph-flt { display:flex; gap:calc(var(--u)*6); margin:calc(var(--u)*2) 0 calc(var(--u)*10); overflow-x:auto; scrollbar-width:none; } .ph-flt::-webkit-scrollbar { display:none; }
  .ph-flt button { flex:none; padding:calc(var(--u)*7) calc(var(--u)*14); border:0; border-radius:99px; background:#1c1c20; color:#c7c7cc; font-weight:600; font-size:calc(var(--u)*13); line-height:1; font-family:inherit; cursor:pointer; } .ph-flt button[aria-pressed="true"] { background:#fff; color:#000; }
  .ph-al { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:calc(var(--u)*8); } .ph-al .ph-none { color:#8f8f98; padding:calc(var(--u)*24) 0; }
  .ph-clr { display:block; width:100%; margin-top:calc(var(--u)*12); padding:calc(var(--u)*11); border:0; border-radius:calc(var(--u)*16); background:#1c1c20; color:#ff6b6b; font-weight:600; font-size:calc(var(--u)*14); line-height:1; font-family:inherit; cursor:pointer; } .ph-clr:hover { background:#26262c; }
  #phTrCv { display:block; width:100%; height:calc(var(--u)*170); border-radius:calc(var(--u)*14); margin:calc(var(--u)*2) 0 calc(var(--u)*8); }
  .ph-leg { display:flex; justify-content:space-between; font-size:calc(var(--u)*13); color:#c7c7cc; font-variant-numeric:tabular-nums; } .ph-leg span { display:flex; align-items:center; gap:calc(var(--u)*6); } .ph-leg i { width:calc(var(--u)*10); height:calc(var(--u)*10); border-radius:50%; display:block; } .ph-leg b { color:#fff; font-weight:600; }
  .ph-th { height:calc(var(--u)*10); border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:calc(var(--u)*14); } .ph-th i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#3ddc88,#ffc65c,#ff5a5a); transition:width .4s; } .ph-thl { margin-top:calc(var(--u)*8); font-size:calc(var(--u)*14); color:#c7c7cc; }
  .ph-clk { display:block; width:calc(var(--u)*250); max-width:100%; margin:calc(var(--u)*10) auto 0; } .ph-cdig { text-align:center; margin-top:calc(var(--u)*14); font-size:calc(var(--u)*40); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .ph-cdat { text-align:center; margin-top:calc(var(--u)*4); font-size:calc(var(--u)*14); color:#aeb0bc; }
  .ph-ck { list-style:none; margin:0; padding:0; } .ph-ck li { border-top:1px solid #1f1f24; } .ph-ck li:first-child { border-top:0; }
  .ph-ck button { display:flex; gap:calc(var(--u)*12); align-items:flex-start; width:100%; padding:calc(var(--u)*10) 0; border:0; background:none; color:#e4e6ee; font-size:calc(var(--u)*14); line-height:1.35; font-family:inherit; text-align:left; cursor:pointer; }
  .ph-ck i { flex:none; width:calc(var(--u)*22); height:calc(var(--u)*22); margin-top:calc(var(--u)*1); border-radius:50%; border:2px solid #5b5d6a; display:grid; place-items:center; } .ph-ck button[aria-checked="true"] i { background:#30d158; border-color:#30d158; } .ph-ck button[aria-checked="true"] i::after { content:""; width:calc(var(--u)*6); height:calc(var(--u)*11); border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg); } .ph-ck button[aria-checked="true"] span { color:#8f8f98; text-decoration:line-through; }
  .ph-tor { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*16); } .ph-tb { width:calc(var(--u)*130); height:calc(var(--u)*130); border-radius:50%; border:0; background:#1c1c20; color:#8f8f98; display:grid; place-items:center; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; } .ph-tb svg { width:calc(var(--u)*58); height:calc(var(--u)*58); } .ph-tb[aria-checked="true"] { background:#fff; color:#222; box-shadow:0 0 calc(var(--u)*60) calc(var(--u)*14) rgba(255,255,255,.5); } .ph-tbl { font-size:calc(var(--u)*15); font-weight:600; color:#c7c7cc; }
  .ph[data-torch="1"] .ph-in::after { content:""; position:absolute; inset:0; z-index:12; pointer-events:none; background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.22),transparent 55%); }
  .ph[data-torch="1"] { box-shadow:0 0 0 1px #6a6b73 inset, 0 0 0 2.5px #0b0b0c, 0 34px 60px -22px rgba(0,0,0,.85), 0 0 80px -6px rgba(255,255,255,.35); }

  /* ---- fit: the HVE Lab, the Fault lab, the trip curve and the HPCL bookshelf, each on one screen ---- */
  @media (min-width:1000px) {
    #mpr, #hproj { padding:16px 22px 18px; } #mpr .mpr-head, #hproj .mpr-head { margin-bottom:12px; }
    /* HVE overview */
    #mprP0 .fyp { margin-top:0; grid-template-columns:230px minmax(0,1fr); }
    #mprP0 .fyp .pc2-art { padding:20px 22px; gap:6px; } #mprP0 .fyp .pc2-art b { font-size:22px; }
    #mprP0 .fyp .pc2-body { padding:18px 24px; } #mprP0 .fyp .pc2-body h3 { margin-bottom:8px; font-size:19px; } #mprP0 .fyp .pc2-body p { font-size:14px; line-height:1.5; }
    #mprP0 .fyp .pc2-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 20px; margin-top:12px; padding-top:12px; } #mprP0 .fyp .pc2-facts dt { font-size:11px; } #mprP0 .fyp .pc2-facts dd { font-size:13px; line-height:1.35; }
    #mprP0 .mpr-go { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
    #mprP0 .mgo { padding:14px 16px; border-radius:16px; } #mprP0 .mgo b { font-size:16px; } #mprP0 .mgo span { margin:4px 0 8px; font-size:13px; line-height:1.4; }
    /* shared controls */
    #play .play-head, #lab .play-head, #trip .play-head { margin-bottom:8px; } #play .play-head h4, #lab .play-head h4, #trip .play-head h4 { font-size:19px; } #play .play-head span, #lab .play-head span, #trip .play-head span { font-size:12px; }
    #play .fchip, #lab .fchip, #trip .fchip, #play .tgl, #lab .tgl { min-height:32px; padding:5px 12px; font-size:13px; } #play .tgl, #lab .tgl { padding:5px 12px 5px 9px; }
    #play .tg, #lab .btnrow, #trip .btnrow { gap:6px; }
    /* 3D panel and live data: stage | controls | phone */
    #demoBody { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 204px; grid-template-rows:auto auto auto 1fr; column-gap:16px; row-gap:8px; align-items:start; }
    #demoBody > .sgrid, #demoBody .sg-l { display:contents; }
    #vtabs { grid-column:1; grid-row:1; margin:0; gap:6px; } #vtabs .fchip { min-height:30px; padding:4px 12px; }
    #v3:not(.full) { grid-column:1; grid-row:2; height:clamp(290px,calc(100svh - 440px),440px); }
    #info { grid-column:1; grid-row:3; min-height:0; padding:10px 14px; border-radius:14px; } #info h5 { font-size:16px; } #info .num { min-width:26px; height:26px; font-size:13px; } #info p { margin:6px 0 0; font-size:13px; line-height:1.4; } #info .st { margin-top:6px; padding-top:6px; font-size:12.5px; }
    #clist { grid-column:1; grid-row:4; margin-top:0; gap:5px; } #clist button { min-width:30px; min-height:28px; padding:0 8px; font-size:12px; border-radius:8px; }
    #demoBody .sim { grid-column:2; grid-row:1 / span 4; } .sim h5 { margin:10px 0 6px; font-size:13px; }
    .sim .quick { gap:8px; padding:8px 10px; } .sim .quick small { font-size:11.5px; }
    .ammeter { margin-top:4px; gap:10px; } .ammeter .scr { min-width:96px; padding:3px 10px; font-size:22px; border-width:2px; } .phs { margin-top:6px; }
    .statusline { margin-top:8px; padding:8px 12px; font-size:13px; } .sim .log { margin-top:6px; font-size:12px; max-height:56px; } .sim .log li { padding:2px 0; }
    #phoneWrap { grid-column:3; grid-row:1 / span 4; margin-top:0; gap:8px; } #phoneWrap .ph-cap b { font-size:14px; } #phoneWrap .ph-cap span { font-size:11.5px; line-height:1.35; } #phoneWrap .ph { width:min(100%,200px); }
    /* Fault lab and trip curve */
    .mpr .lab-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; }
    #lab .scope { height:clamp(190px,calc(100svh - 470px),290px); } .verdict { margin-top:10px; padding:10px 14px; border-radius:14px; } .verdict b { font-size:18px; } .verdict span { font-size:13px; }
    .lab-r h5 { margin:10px 0 6px; font-size:13px; } .sl { margin-bottom:4px; } .sl-l { margin-bottom:0; font-size:13px; } .sl input[type=range] { height:22px; }
    .lab-rules { margin-top:12px; } .lab-note { margin:8px 0 0; font-size:12px; }
    #trip .tchart svg { max-height:250px; } #trip .read { margin-top:8px; } #trip .read div { padding:6px 8px; } #trip .read b { font-size:17px; } #trip .lab-note, #trip > p { font-size:12px; line-height:1.45; margin-top:8px; }
    /* HPCL working model: the bookshelf */
    .hm-note { margin:0 0 8px; padding:6px 12px; font-size:12px; }
    .hm-stats { gap:8px; margin-bottom:8px; } .hm-stats div { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; padding:7px 12px; border-radius:12px; } .hm-stats b { display:inline; font-size:17px; } .hm-stats span { font-size:12px; }
    .hm-search input, .hm-add input, .hm-add select, .hm-bar select { height:38px; } .hm-bar { gap:8px; }
    .hm-chips { gap:6px; margin:8px 0; } .hm-chips .fchip, .hm-bar .fchip { min-height:30px; padding:4px 12px; font-size:13px; }
    .hm-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; } .hm-main { container-type:inline-size; }
    .shelves { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; align-items:start; padding:6px 12px 2px; }
    .shelf-unit { min-width:0; padding-bottom:6px; } .shelf-label { padding:12px 4px 4px; }
    .plate { padding:3px 14px 3px 18px; margin-left:6px; } .plate b { font-size:10.5px; } .plate small { font-size:10px; padding:0 7px; } .chain { top:-9px; height:9px; }
    .shelf-row { min-height:62px; padding:0 8px; border-bottom-width:8px; } .shelf-row + .shelf-row { margin-top:8px; }
    @container (max-width:470px) { .shelves { grid-template-columns:minmax(0,1fr); } }
    .hm-hint { margin:6px 0 0; } .hm-prev { min-height:0; padding:14px; top:80px; } .hm-ph { min-height:180px; } .hm-list { max-height:min(420px,calc(100svh - 360px)); }
  }

  /* the layer notes and the cross-section: no big empty gap between them */
  .vl-info { min-height:3.2em; margin:8px 0; } .vl-cross { margin-top:10px; padding:10px 14px; } .vl-cross p { margin-top:6px; }
  @media (min-width:1000px) {
    #v3:not(.full) { height:clamp(280px,calc(100svh - 480px),440px); }
    #v3 .v3hint { padding:4px 10px; font-size:11px; } #v3 .v3btns { gap:4px; } #v3 .v3btns button { min-height:30px; min-width:30px; padding:0 9px; font-size:12px; }
    #v3 .v3bar { left:8px; right:8px; bottom:8px; gap:6px; }
    #clist { gap:4px; } #clist button { min-width:28px; min-height:26px; padding:0 5px; }
    /* Fault lab: the rule lamps sit under the scope, so the left column is no longer half empty */
    #lab { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr; column-gap:20px; align-items:start; }
    #lab > .play-head { grid-column:1 / -1; } #lab .lab-grid { display:contents; }
    #lab .lab-l { grid-column:1; grid-row:2; } #lab .lab-r { grid-column:2; grid-row:2 / span 3; }
    #lab .lab-rules { grid-column:1; grid-row:3; margin-top:10px; } #lab .lab-note { grid-column:1; grid-row:4; }
  }

  /* polaroids on the wire: always as wide as their slot */
  .hp .pol { width:100%; box-sizing:border-box; } .hp .pol > img { min-width:0; max-width:100%; }

  /* 3D panel: the button bar has its own strip under the model, so it never covers it or runs off the edge */
  #v3 { container-type:inline-size; }
  #v3:not(.full) canvas { height:calc(100% - 46px); }
  #v3:not(.full) .v3bar { left:8px; right:8px; bottom:8px; gap:4px 6px; flex-wrap:wrap; justify-content:center; }
  #v3:not(.full) .v3hint { display:none; padding:4px 10px; font-size:11px; white-space:nowrap; }
  #v3:not(.full) .v3btns { flex-wrap:wrap; justify-content:center; gap:4px; }
  #v3:not(.full) .v3btns button { min-height:30px; min-width:30px; padding:0 9px; font-size:12px; }
  @container (max-width:479px) { #v3:not(.full) canvas { height:calc(100% - 78px); } #v3:not(.full) .v3bar { left:8px; right:8px; } #v3:not(.full) .v3btns { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; } #v3:not(.full) .v3btns button { padding:0 4px; } }
  @media (max-width:640px) { #v3:not(.full) .v3btns { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @container (min-width:760px) { #v3:not(.full) .v3hint { display:block; } #v3:not(.full) .v3bar { justify-content:space-between; flex-wrap:nowrap; } #v3:not(.full) .v3btns { flex-wrap:nowrap; } }
  /* the schematic scales to the card; it only scrolls sideways on phones */
  @media (min-width:521px) { .schem { min-width:0; } }
  /* Fault lab: the Motor row on one line, Reset relay beside the heading */
  .lab-mh { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 6px; } .lab-mh h5, .lab-r .lab-mh h5 { margin:0; }
  .lab-mh .btn.sm { min-height:28px; padding:3px 14px; font-size:12px; }
  #lab .lab-motor { flex-wrap:nowrap; gap:4px; } #lab .lab-motor .fchip, #lab .lab-motor .tgl { flex:none; white-space:nowrap; min-height:30px; padding:4px 9px; font-size:12px; } #lab .lab-motor .tgl { padding:4px 10px 4px 8px; }
  @media (max-width:560px) { #lab .lab-motor { flex-wrap:wrap; } }
  .vbar { gap:4px 10px; margin-bottom:8px; font-size:12.5px; line-height:1.35; } .vbar .enl { padding:2px 0; font-size:13px; }
  @media (min-width:641px) { .vbar { flex-wrap:nowrap; align-items:flex-start; } .vbar > span { flex:1 1 auto; min-width:0; font-size:12px; line-height:1.3; } .vbar .enl { flex:none; white-space:nowrap; } }
  @media (min-width:1000px) and (max-width:1279px) { #v3:not(.full) { height:clamp(330px,calc(100svh - 430px),380px); } }
  @media (min-width:1000px) and (max-width:1139px) { #lab .lab-motor { gap:3px; } #lab .lab-motor .fchip, #lab .lab-motor .tgl { padding-left:7px; padding-right:7px; font-size:11.5px; } }
  /* the paper tablet follows the project card closely: no big black gap between the swipe hint and the tablet */
  .repo { margin-top:32px; } .pad-stage { padding-top:8px; }
  /* the event log shows whole lines only: never a half-cut entry at the bottom */
  @media (min-width:1000px) { .sim .log { max-height:45px; } } @media (max-width:999px) { .sim .log { max-height:none; } }

  /* HPCL tabs: each one fits a screen on a desktop */
  @media (min-width:1000px) {
    .hx .hm-note { margin:0 0 6px; padding:5px 12px; font-size:12px; }
    .hx .play-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 16px; margin-bottom:8px; } .hx .play-head h4 { margin:0; font-size:19px; } .hx .play-head span { font-size:12.5px; }
    .hx h5 { margin:12px 0 6px; } .hx .trip-note { margin:8px 0 0; max-width:none; font-size:12px; line-height:1.4; }
    /* About */
    #hpP0 .pc2-art { padding:18px 22px; gap:6px; } #hpP0 .pc2-art b { font-size:22px; } #hpP0 .pc2-art .logo-tile { width:60px; height:60px; }
    #hpP0 .pc2-body { padding:16px 24px; } #hpP0 .pc2-body h3 { margin:0 0 6px; font-size:19px; } #hpP0 .pc2-body p { margin:0; font-size:14px; line-height:1.5; }
    #hpP0 .pc2-facts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 18px; margin-top:10px; padding-top:10px; } #hpP0 .pc2-facts dt { font-size:11px; } #hpP0 .pc2-facts dd { font-size:13px; line-height:1.35; }
    #hpP0 .hp-about { gap:12px; margin-top:12px; } #hpP0 .hpa { padding:14px 18px; } #hpP0 .hpa h4 { margin:0 0 4px; font-size:15px; } #hpP0 .hpa p { margin:0; font-size:13px; line-height:1.45; }
    #hpP0 .mpr-go { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; } #hpP0 .mgo { padding:12px 14px; border-radius:14px; } #hpP0 .mgo b { font-size:15px; } #hpP0 .mgo span { margin:3px 0 6px; font-size:12.5px; line-height:1.35; }
    /* Audit Board */
    #hpP2 .ab-ring { width:104px; height:104px; } #hpP2 .ab-ring b { font-size:26px; } #hpP2 .ab-top { gap:14px; } #hpP2 .ab-top .verdict { padding:8px 14px; }
    #hpP2 .ab-cats { margin-top:10px; } #hpP2 .ab-cat { margin-top:6px; } #hpP2 .ab-bar { height:8px; }
    #hpP2 #abRead { margin-top:8px; gap:8px; } #hpP2 #abRead div { display:flex; align-items:baseline; justify-content:center; gap:8px; padding:8px; } #hpP2 #abRead b { font-size:17px; }
    #hpP2 .ab-lh { margin:10px 0 6px !important; } #hpP2 .ab-list { gap:6px; } #hpP2 .ab-row { padding:7px 10px; gap:10px; border-radius:14px; } #hpP2 .ab-t b { font-size:13.5px; line-height:1.25; }
    /* Plant Walk-Through: tighter rows, the scene shorter */
    #hpP4 .tj-top { margin:0 0 8px; } #hpP4 .tj-ctl { margin:0 0 8px; } #hpP4 .tj-scene { margin:0 0 8px; } #hpP4 .tj-plan { margin:0; }
    #hpP4 #tjScene { width:min(100%,calc((100svh - 330px) * 16 / 9)); margin-inline:auto; } #hpP4 #tjPlan { max-width:520px; margin-inline:auto; }
  }
  @media (min-width:1000px) {
    #hpP4 .tj { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:16px; align-items:start; }
    #hpP4 .tj > * { grid-column:1 / -1; }
    #hpP4 .tj > #tjScene { grid-column:1; grid-row:5; width:auto; margin:0; } #hpP4 .tj > #tjPlan { grid-column:2; grid-row:5; align-self:center; max-width:none; margin:0; }
  }

  /* Safety Checklist: a book-style foldable. Closed it is a phone with a cover screen; tap it and the right half swings open on the hinge */
  .bbp-stage { position:relative; width:100%; container-type:inline-size; display:flex; flex-direction:column; align-items:center; }
  .bbp { position:relative; width:100%; margin:8px 0 0; padding:3px; border-radius:24px; background:linear-gradient(150deg,#6b7488,#232a39 38%,#10141d 62%,#4a5368); box-shadow:0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14); }
  .bbp-in { position:relative; padding:6px; border-radius:21px; background:#000; }
  .bbp-scr { border-radius:16px; overflow:hidden; background:#0c0c0e; color:#f5f5f7; display:flex; flex-direction:column; position:relative; }
  .bbp-body { display:grid; grid-template-columns:minmax(0,1fr) auto; flex:1; min-width:0; }
  .bbp-half, .bbp-hin, .bbp-hscr, .bbp-flap, .bbp-front { display:contents; }
  .bbp-back, .bbp-spine, .bbp-crease, .bbp-shadow, .bbp-fold { display:none; }
  .bbp-top { display:flex; align-items:center; position:relative; font-size:11px; color:#e5e5ea; } .bbp-top b { font-weight:600; margin-right:4px; }
  .bt-l { grid-column:1; grid-row:1; padding:6px 0 6px 18px; } .bt-r { grid-column:2; grid-row:1; justify-content:flex-end; padding:6px 18px 6px 0; }
  .bbp-ind { display:inline-flex; align-items:center; gap:6px; font-weight:600; } .bbp-ind svg { fill:currentColor; display:block; }
  .bbp-home { grid-column:1 / -1; grid-row:4; position:relative; height:14px; } .bbp-home::after { content:""; position:absolute; left:50%; top:5px; width:110px; height:4px; margin-left:-55px; border-radius:4px; background:#f5f5f7; opacity:.5; }
  .bbp .lab-l, .bbp .lab-r { min-width:0; box-sizing:border-box; }
  .bbp .lab-r { grid-column:1 / -1; grid-row:2; padding:12px 14px; border-bottom:1px solid #26262b; background:#101012; }
  .bbp .lab-l { grid-column:1 / -1; grid-row:3; padding:10px 12px 4px; }
  .bbp .bb-g { margin:0 0 10px; padding:0 0 2px; border:0; border-radius:12px; background:#17171a; overflow:hidden; }
  .bbp .bb-g h6 { margin:0; padding:10px 14px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#9a9aa1; }
  .bbp .bb-i { padding:7px 14px; margin:0; border-top:1px solid #26262b; }
  .bbp .bb-b { background:#2a2a2f; border-radius:9px; padding:2px; gap:0; }
  .bbp .bb-b button { min-height:28px; padding:0 11px; border:0; border-radius:7px; background:transparent; color:#c7c7cc; font-size:12px; }
  .bbp .bb-b button[aria-checked="true"].s { background:#2fc77a; color:#04210f; } .bbp .bb-b button[aria-checked="true"].r { background:#ff5a5a; color:#2a0505; } .bbp .bb-b button[aria-checked="true"].n { background:#5a5a61; color:#fff; }
  .bbp .hx h5, .bbp .lab-r h5 { margin:0 0 6px; }
  .bbp .lab-r .ab-ring { width:92px; height:92px; } .bbp .lab-r .ab-ring b { font-size:24px; } .bbp .lab-r .bb-top { margin-top:10px; gap:12px; } .bbp .lab-r .verdict { padding:8px 12px; } .bbp .lab-r .verdict b { font-size:15px; } .bbp .lab-r .verdict span { font-size:12px; }
  .bbp .lab-r .ab-cats { margin-top:8px; } .bbp .lab-r .ab-cat { margin-top:5px; } .bbp .lab-r .btnrow { margin-top:10px !important; flex-wrap:nowrap; } .bbp .lab-r .btnrow .btn { min-height:30px; padding:0 12px; font-size:12px; white-space:nowrap; }
  @media (min-width:1000px) {
    .bbp-stage { --open:min(100cqw,860px); --half:calc(var(--open) / 2); --h:clamp(440px,calc(100svh - 340px),620px); --ease:cubic-bezier(.6,.02,.25,1); --t-open:1.9s; --t-fold:1.7s; --lead:.1s; }
    .bbp, .bbp-in, .bbp-scr { display:block; width:100%; margin:0; padding:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
    .bbp { margin-top:8px; }
    /* the assembly: left half, a hinged right half, and a shadow. Closed, it slides over so the phone sits centred */
    .bbp-body { display:block; position:relative; width:var(--open); height:calc(var(--h) + 20px); margin:0 auto; perspective:2600px; transform:translateX(calc(var(--half) / -2)); transition:transform var(--t-fold) var(--ease) var(--lead); }
    .bbp.is-open .bbp-body { transform:none; transition:transform var(--t-open) var(--ease) 0s; }
    .bbp.is-moving .bbp-body, .bbp.is-moving .bbp-flap { will-change:transform; }
    .bbp-half, .bbp-flap { display:block; position:absolute; top:0; width:50%; height:100%; }
    .bbp-half { left:50%; z-index:1; }
    .bbp-flap { left:0; z-index:2; transform-style:preserve-3d; transform-origin:100% 50%; transform:rotateY(180deg); transition:transform var(--t-fold) var(--ease) var(--lead); }
    .bbp.is-open .bbp-flap { transform:rotateY(0deg); transition:transform var(--t-open) var(--ease) 0s; }
    .bbp-front, .bbp-back { display:block; position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
    .bbp-back { transform:rotateY(180deg); }
    .bbp-half, .bbp-front, .bbp-back { box-sizing:border-box; background:linear-gradient(150deg,#6b7488,#232a39 38%,#10141d 62%,#4a5368); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
    .fr-l { padding:3px 0 3px 3px; border-radius:28px 0 0 28px; } .fr-r { padding:3px 3px 3px 0; border-radius:0 28px 28px 0; }
    .bbp-hin { display:block; box-sizing:border-box; height:100%; background:#000; }
    .fr-l > .bbp-hin { padding:7px 0 7px 7px; border-radius:25px 0 0 25px; } .fr-r > .bbp-hin { padding:7px 7px 7px 0; border-radius:0 25px 25px 0; }
    .bbp-hscr { display:flex; flex-direction:column; position:relative; height:100%; overflow:hidden; background:#0c0c0e; color:#f5f5f7; }
    .fr-l .bbp-hscr { border-radius:19px 0 0 19px; } .fr-r .bbp-hscr { border-radius:0 19px 19px 0; }
    .bbp-top { flex:none; }
    .bt-l, .bt-r { grid-column:auto; grid-row:auto; }
    .bbp .lab-l, .bbp .lab-r { grid-column:auto; grid-row:auto; flex:1; min-height:0; overflow-y:auto; border:0; scrollbar-width:thin; scrollbar-color:#3a3a40 transparent; }
    .bbp .lab-l { padding:6px 24px 24px 16px; } .bbp .lab-r { padding:10px 16px 24px 24px; }
    .bbp-fold { display:inline-flex; align-items:center; gap:6px; position:absolute; z-index:4; left:14px; top:50%; transform:translateY(-50%); height:22px; padding:0 11px 0 9px; border:1px solid rgba(255,255,255,.2); border-radius:99px; background:rgba(255,255,255,.08); color:#f5f5f7; font:inherit; font-size:11px; font-weight:600; cursor:pointer; }
    .bbp-fold svg { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
    .bbp-fold:hover { background:rgba(255,255,255,.16); }
    .bbp-home { position:absolute; z-index:7; left:50%; bottom:10px; width:110px; height:14px; margin-left:-55px; grid-column:auto; grid-row:auto; pointer-events:none; opacity:0; transition:opacity .25s ease; }
    .bbp-home::after { left:0; margin-left:0; }
    .bbp.is-open .bbp-home { opacity:1; transition:opacity .7s ease 1.5s; }
    .bbp-shadow { display:block; position:absolute; z-index:0; inset:0; pointer-events:none; }
    .bbp-shadow::before, .bbp-shadow::after { content:""; position:absolute; top:0; height:100%; border-radius:28px; box-shadow:0 28px 64px rgba(0,0,0,.55); }
    .bbp-shadow::before { left:50%; width:50%; opacity:1; transition:opacity var(--t-fold) var(--ease) var(--lead); }
    .bbp-shadow::after { left:0; width:100%; opacity:0; transition:opacity var(--t-fold) var(--ease) var(--lead); }
    .bbp.is-open .bbp-shadow::before { opacity:0; transition:opacity var(--t-open) var(--ease) 0s; }
    .bbp.is-open .bbp-shadow::after { opacity:1; transition:opacity var(--t-open) var(--ease) 0s; }
    .bbp-crease { display:block; position:absolute; z-index:5; left:50%; top:10px; bottom:10px; width:36px; margin-left:-18px; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,rgba(0,0,0,.34) 40%,rgba(255,255,255,.07) 50%,rgba(0,0,0,.34) 60%,transparent); transition:opacity .2s ease; }
    .bbp-crease::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.13) 50%,rgba(255,255,255,.04)); }
    .bbp.is-open .bbp-crease { opacity:1; transition:opacity .8s ease 1.4s; }
    .bbp-spine { display:block; position:absolute; z-index:6; left:50%; top:-2px; bottom:-2px; width:12px; margin-left:-6px; border-radius:6px; background:linear-gradient(90deg,#2a3140,#8a93a8 48%,#2a3140); box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4); pointer-events:none; opacity:1; transition:opacity .5s ease 1.0s; }
    .bbp.is-open .bbp-spine { opacity:0; transition:opacity .6s ease 1.3s; }
    .bbp-body::before, .bbp-body::after { content:""; position:absolute; z-index:6; left:50%; width:54px; height:5px; margin-left:-27px; background:linear-gradient(180deg,#060810,#2b3345); pointer-events:none; opacity:0; transition:opacity .25s ease; }
    .bbp-body::before { top:-1px; border-radius:0 0 4px 4px; } .bbp-body::after { bottom:-1px; border-radius:4px 4px 0 0; }
    .bbp.is-open .bbp-body::before, .bbp.is-open .bbp-body::after { opacity:1; transition:opacity .7s ease 1.5s; }
    /* light falls off on the swinging half as it turns, and the screen wakes once it has landed */
    .bbp-front::after, .bbp-back::after { content:""; position:absolute; inset:0; z-index:9; border-radius:inherit; background:#000; pointer-events:none; }
    .bbp-front::after { opacity:.6; transition:opacity 1s ease-in .4s; }
    .bbp.is-open .bbp-front::after { opacity:0; transition:opacity 1.4s ease-out .4s; }
    .bbp-back::after { opacity:0; transition:opacity .9s ease-out .95s; }
    .bbp.is-open .bbp-back::after { opacity:.5; transition:opacity 1s ease-in 0s; }
    .bbp-half .bbp-hscr > *, .bbp-front .bbp-hscr > * { opacity:0; transition:opacity .5s ease; }
    .bbp.is-open .bbp-half .bbp-hscr > *, .bbp.is-open .bbp-front .bbp-hscr > * { opacity:1; transition:opacity 1s ease-out .95s; }
    .bbp.is-open .bc-cta svg { animation:none; }
    .bbp-cover:active .bc-cta { transform:scale(.97); }
    /* only the side that is showing can be reached with a keyboard or a screen reader */
    .bbp-half, .bbp-front { visibility:visible; transition:visibility 0s; }
    .bbp.is-folded .bbp-half, .bbp.is-folded .bbp-front { visibility:hidden; transition:visibility 0s 1.95s; }
    .bbp-back { visibility:hidden; transition:visibility 0s 2.05s; }
    .bbp.is-folded .bbp-back { visibility:visible; transition:visibility 0s; }
    /* the cover screen on the outside of the folded phone */
    .bbp-cover { display:flex; flex-direction:column; align-items:center; justify-content:space-between; position:absolute; inset:0; width:100%; margin:0; padding:52px 22px 26px; overflow:hidden; border:0; border-radius:inherit; background:#0c0c0e; color:#f5f5f7; font:inherit; text-align:center; cursor:pointer; }
    .bbp-cover::before { content:""; position:absolute; top:13px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#000; box-shadow:0 0 0 2px #17171c; }
    .bbp-cover > span { position:relative; display:flex; flex-direction:column; align-items:center; }
    .bbp-cover .bc-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 55% at 50% 0%,rgba(255,176,58,.24),transparent 62%),radial-gradient(90% 45% at 50% 100%,rgba(91,155,255,.14),transparent 70%); }
    .bc-clock small { font-size:14px; font-weight:600; color:#d1d1d6; }
    .bc-clock b { margin-top:4px; font-size:84px; font-weight:700; line-height:1; letter-spacing:-.035em; }
    .bc-app i { display:grid; place-items:center; width:64px; height:64px; border-radius:18px; background:linear-gradient(145deg,#ffc45e,#ff9526); box-shadow:0 10px 26px rgba(255,150,38,.32); }
    .bc-app i svg { fill:none; stroke:#2a1600; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .bc-app b { margin-top:14px; font-size:20px; font-weight:700; letter-spacing:-.01em; }
    .bc-app small { margin-top:4px; font-size:13px; color:#b4b4bc; }
    .bc-cta { flex-direction:row !important; gap:9px; padding:10px 18px; border-radius:99px; background:linear-gradient(135deg,#ffc15a,#ff9a2e); color:#241300; font-size:14px; font-weight:700; transition:transform .25s ease; }
    .bc-cta svg { fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; animation:bcL 1.8s ease-in-out infinite; } .bc-cta svg.r { animation-name:bcR; }
    .bbp-cover:hover .bc-cta { transform:translateY(-2px) scale(1.03); }
    .bbp-cover:focus-visible, .bbp-fold:focus-visible { outline:3px solid #ffb03a; outline-offset:-3px; }
    @keyframes bcL { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-4px); } } @keyframes bcR { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
    @media (prefers-reduced-motion:reduce) { .bbp-body, .bbp-flap, .bbp-shadow, .bbp-home, .bbp-crease, .bbp-spine, .bbp-body::before, .bbp-body::after, .bbp-half, .bbp-front, .bbp-back, .bc-cta, .bbp-shadow::before, .bbp-shadow::after, .bbp-front::after, .bbp-back::after, .bbp-half .bbp-hscr > *, .bbp-front .bbp-hscr > * { transition:none !important; } .bc-cta svg { animation:none; } }
  }
/* screen-reader-only heading that keeps the heading outline in order */
.srh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* VLSI Lab overview: the four block cards sit in one row, like the HPCL overview */
@media (min-width:900px) {
  #vpP0 .mpr-go { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
  #vpP0 .mgo { padding:12px 14px; border-radius:14px; } #vpP0 .mgo b { font-size:15px; } #vpP0 .mgo span { margin:3px 0 6px; font-size:12.5px; line-height:1.35; }
  #vpP0 .mgo { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; } #vpP0 .mgo em { margin-top:auto; }
}
/* VLSI Logic Gates: the gate, its truth table and its code on one screen */
@media (min-width:1000px) {
  #vpP1 .vg-grid { grid-template-columns:minmax(0,.84fr) minmax(0,1fr); gap:20px; }
  #vpP1 .vg-chips { gap:5px; margin-bottom:8px; } #vpP1 .vg-chip { padding:5px 13px; font-size:12.5px; }
  #vpP1 .vw-hint { margin:4px 0 0; font-size:12px; }
  #vpP1 .vg-table th { padding:5px 10px; } #vpP1 .vg-table td { padding:5px 10px; font-size:15px; }
  #vpP1 .vg-stats { margin:10px 0 6px; } #vpP1 .vg-note { font-size:13.5px; line-height:1.5; }
  #vpP1 .vg-grid > div:last-child > p:last-child { margin:10px 0 0; }
  #vpP1 .vr { margin-top:12px; padding:10px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; row-gap:8px; align-items:center; grid-template-rows:auto auto minmax(52px,auto); }
  #vpP1 .vr-head { display:contents; } #vpP1 .vr-head h4 { grid-column:1; grid-row:1; font-size:16px; }
  #vpP1 .vr-views { grid-column:2; grid-row:1; margin:0; } #vpP1 .vr-lang { grid-column:3; grid-row:1; }
  #vpP1 .vr-code { grid-column:1 / -1; grid-row:2; height:196px; max-height:none; padding:6px 14px; font-size:12.5px; line-height:1.45; }
  #vpP1 .vr-foot { display:contents; } #vpP1 #vrFile { grid-column:1; grid-row:3; } #vpP1 #vrCopy { grid-column:3; grid-row:3; }
  #vpP1 .vr-run { grid-column:2; grid-row:3; margin:0; font-size:12px; line-height:1.45; text-align:left; } #vpP1 .vr-run br { display:none; } #vpP1 .vr-run code { margin:0 0 0 4px; }
}
/* VLSI Lab: the same inner padding as the HVE and HPCL tiles, and all ten design-flow steps in view */
@media (min-width:1000px) {
  #vproj { padding:16px 22px 18px; } #vproj .mpr-head { margin-bottom:12px; }
}
@media (min-width:820px) {
  #vpP3 .vf-pills { flex-wrap:wrap; overflow:visible; row-gap:6px; padding-bottom:4px; }
}
/* one line at the top of each project overview */
.pj-glance { margin:0 0 12px; padding:9px 14px; border-radius:14px; background:rgba(255,176,58,.08); border:1px solid rgba(255,176,58,.22); color:#e6edf9; font-size:14px; line-height:1.45; }
.pj-glance b { margin-right:10px; color:var(--amber,#ffb03a); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

  /* garden hint: say "finger" and "tap" on touch screens, and keep the line readable over the flowers on small screens */
  .scene p .h-touch { display:none; }
  @media (hover:none) { .scene p .h-mouse { display:none; } .scene p .h-touch { display:inline; } }
  @media (hover:none), (max-width:700px) { .scene p { left:12px; right:12px; bottom:12px; padding:8px 12px; border-radius:12px; background:rgba(5,9,7,.66); color:rgba(255,255,255,.9); line-height:1.4; } }
  /* contact fallback sheet: appears only when a call or mail button could not open an app */
  .cf-sheet { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(420px, calc(100% - 24px)); z-index:210; background:#121214; color:#fff; border:1px solid #34343a; border-radius:20px; padding:20px 20px 18px; box-shadow:0 24px 70px -18px rgba(0,0,0,.9); }
  .cf-sheet h4 { margin:0 36px 4px 0; font-size:17px; font-weight:700; } .cf-sheet p { margin:0 0 10px; color:#c7c7cc; font-size:14.5px; }
  .cf-val { font-size:17px; font-weight:600; color:#ffc15e; word-break:break-all; margin-bottom:14px; user-select:all; }
  .cf-act { display:flex; flex-wrap:wrap; gap:8px; } .cf-act .btn { text-decoration:none; }
  .cf-x { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:0; background:#26262a; color:#fff; font-size:22px; line-height:1; cursor:pointer; } .cf-x:hover { background:#34343a; }

  /* phone polish: easier to read, nothing cut off, shorter contact area */
  @media (max-width:560px) {
    .lead, .vol-copy, .stmt, .about-co, .exp-panel li, .pc p, .pc2-body p, #projects .lead, #about .stmt, #about .stat em, .hpa p { text-align:left; text-justify:auto; hyphens:manual; -webkit-hyphens:manual; }
    .seg button { padding:9px 12px; font-size:13.5px; }
    .stats > :last-child:nth-child(odd) { grid-column:1 / -1; }
    .cgrid { grid-template-columns:1fr 1fr; gap:10px; margin-top:36px; }
    .cc { padding:22px 10px 20px; gap:8px; }
    .cc .appicon { width:60px; height:60px; }
    .cc h4 { font-size:13px; margin-top:6px; }
    .totop { right:12px; width:42px; height:42px; font-size:18px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
  }

  /* a tab row that scrolls sideways fades the side that has more */
  .seg[data-more="1"] { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
  .seg[data-less="1"] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px); mask-image:linear-gradient(90deg,transparent,#000 36px); }
  .seg[data-more="1"][data-less="1"] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); }
  @media (max-width:560px) { #cgrid.cgrid { grid-template-columns:1fr 1fr; } }

  /* the one-line summary under the home-page role: the whole line is a softly glowing amber chip */
  .hero-sub { margin:12px 0 0; width:fit-content; max-width:100%; box-sizing:border-box; padding:7px 15px; border-radius:12px; text-wrap:balance; color:#ffe9c2; font-size:clamp(13.5px,1.15vw,15.5px); line-height:1.4; letter-spacing:0; background:rgba(255,176,58,.10); border:1px solid rgba(255,176,58,.65); text-shadow:0 0 6px rgba(255,170,60,.35); box-shadow:0 0 8px rgba(255,150,30,.22), inset 0 0 8px rgba(255,176,58,.10); animation:heroNeon 4s ease-in-out infinite alternate; }
  .hero-sub + .open2work { margin-top:20px; }
  .hero-sub b { color:#ffc766; font-weight:700; text-shadow:0 0 8px rgba(255,160,40,.45); }
  @keyframes heroNeon { from { box-shadow:0 0 6px rgba(255,150,30,.14), inset 0 0 6px rgba(255,176,58,.07); } to { box-shadow:0 0 11px rgba(255,150,30,.30), inset 0 0 10px rgba(255,176,58,.13); } }
  @media (prefers-reduced-motion:reduce) { .hero-sub { animation:none; } }

  /* Experience: the role and dates heading is a little smaller */
  .exp-panel h3 { font-size:clamp(21px,2.4vw,31px); line-height:1.18; letter-spacing:-.025em; }
  /* Experience: the dates sit on their own line under the role */
  .exp-panel h3 .exp-when { display:block; margin-top:6px; font-size:clamp(12px,1.05vw,14px); font-weight:500; letter-spacing:-.005em; color:#c7c7cc; }
  /* Experience: the company name, place and description are a little smaller */
  .exp-panel .org { font-size:16px; }
  .exp-panel .where { font-size:15px; margin:12px 0 16px; }
  .exp-panel .about-co { font-size:14.5px; }

  /* section titles are a little smaller */
  h2.big { font-size:clamp(34px,5.6vw,68px); }
  /* Experience: white only (text, dots and glows lose their company colours) */
  #experience .exp-panel { --acc:#fff !important; }
  #experience h2.big { background:none; -webkit-text-fill-color:#fff; color:#fff; }
  #experience .exp-panel::before { background:radial-gradient(closest-side, rgba(255,255,255,.09), transparent); }
  #experience .logo-tile { box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 10px 34px rgba(255,255,255,.10); }
  #experience .exp-panel li::before { box-shadow:0 0 10px rgba(255,255,255,.5); }
  #experience .exp-panel h3 { color:#fff; }

  /* Education: the big degree name is smaller */
  .edu-deg { font-size:clamp(38px,6vw,72px); margin:6px 0 8px; }

  /* phone: the three "Find me on" chips share one row, so GitHub stays next to WhatsApp */
  @media (max-width:560px) {
    .socials { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .socials .soc { flex-direction:column; justify-content:center; gap:6px; padding:12px 4px; min-height:84px; border-radius:20px; font-size:13px; text-align:center; }
    .socials .soc i { width:36px; height:36px; }
  }
  @media (max-width:560px) { #cgrid .pill { white-space:nowrap; padding-left:12px; padding-right:12px; font-size:12.5px; } }
  @media (max-width:360px) { #cgrid .pill { font-size:11.5px; padding-left:9px; padding-right:9px; } }

  /* OVERLAYS */
  .toast { position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,30px); background:#fff; color:#000; padding:12px 22px; border-radius:99px; font-weight:500; font-size:15px; z-index:200; opacity:0; pointer-events:none; transition:.3s; box-shadow:0 10px 40px rgba(0,0,0,.6); max-width:90vw; text-align:center; } .toast.on { opacity:1; transform:translate(-50%,0); }
  .modal, .pal { position:fixed; inset:0; z-index:150; display:grid; padding:calc(env(safe-area-inset-top,0px) + 20px) 18px 20px; background:rgba(0,0,0,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .modal { place-items:center; } .pal { align-items:start; justify-items:center; padding-top:calc(env(safe-area-inset-top,0px) + 12vh); }
  .card { width:min(520px,100%); background:#131316; border:1px solid var(--line); border-radius:26px; padding:34px; position:relative; animation:swap .35s ease both; }
  .card h3 { margin:0 0 4px; font-size:28px; letter-spacing:-.03em; } .card .msub { color:var(--amber); font-weight:600; line-height:1.45; margin:0 0 18px; }
  .modal .card h3 { padding-right:44px; line-height:1.15; } .card p { color:#c7c7cc; margin:0 0 24px; } .x { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:0; background:#222; cursor:pointer; font-size:18px; }
  .pbox { width:min(620px,100%); background:#131316; border:1px solid var(--line); border-radius:22px; overflow:hidden; animation:swap .3s ease both; }
  .pbox input { width:100%; background:none; border:0; border-bottom:1px solid var(--line); color:#fff; font:inherit; font-size:20px; padding:20px 22px; outline:none; }
  .pbox ul { list-style:none; margin:0; padding:8px; max-height:50vh; overflow-y:auto; } .pbox li button { width:100%; display:flex; justify-content:space-between; gap:12px; text-align:left; background:none; border:0; padding:13px 14px; border-radius:12px; cursor:pointer; font-size:16px; } .pbox li button small { color:var(--muted); } .pbox li button[aria-selected="true"], .pbox li button:hover { background:#232327; }
  .pbox .foot { padding:10px 18px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }

  @media (max-width:900px) {
    .links { position:fixed; left:0; right:0; top:calc(56px + env(safe-area-inset-top,0px)); flex-direction:column; gap:0; padding:8px 24px 18px; background:rgba(0,0,0,.96); border-bottom:1px solid var(--line); font-size:22px; font-weight:600; display:none; }
    .links.open { display:flex; } .links a { padding:12px 0; border:0; } .menu { display:grid; }
    .hero-grid { grid-template-columns:1fr; text-align:left; } .bulbwrap { width:min(62vw,260px); justify-self:start; order:-1; }
    .about-grid { grid-template-columns:1fr; gap:28px; } .avatar { width:110px; height:110px; font-size:36px; }
    .exp-panel { grid-template-columns:1fr; padding:30px 22px; gap:24px; min-height:0; }
    .pcards, .roles, .cgrid { grid-template-columns:1fr 1fr; } .demo { grid-template-columns:1fr; } .connect { grid-template-columns:1fr; gap:36px; }
  }
  @media (max-width:560px) { .pcards, .roles, .cgrid { grid-template-columns:1fr; } .sec { padding-top:90px; } .play { padding:18px; } .read { grid-template-columns:repeat(2,1fr); } }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } .rv { opacity:1 !important; transform:none !important; } .stmt span { opacity:1 !important; } }