/* ELIKO//SYS — dark by design (a lit workcell in a dark hall); does not follow the OS theme. */
:root{
  --bg:#07090D; --panel:#0D1117; --panel-2:#121925; --line:rgba(120,155,255,.16); --line-strong:rgba(120,155,255,.32);
  --ink:#E6ECF5; --muted:#8A96AB; --faint:#5A6478;
  --hud:#4C7DFF; --hud-soft:rgba(76,125,255,.12); --hud-ink:#8FB0FF;
  --live:#FF6B1A; --live-soft:rgba(255,107,26,.12);
  --sans:'IBM Plex Sans','IBM Plex Sans Hebrew',system-ui,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans Hebrew',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
.lbl{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .lbl{letter-spacing:0;font-family:var(--sans)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- hero ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1}
body.os3d.os-on #gl{pointer-events:none} /* clicks pass through the screen hole to the OS underneath */
.hud{position:fixed;inset:0;pointer-events:none;transition:opacity .45s var(--ease);z-index:2}
.hud > *{pointer-events:auto}
body.in-os .hud{opacity:0;pointer-events:none}
body.in-os .hud > *{pointer-events:none}
.bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:22px;padding:18px 28px;border-bottom:1px solid var(--line);background:linear-gradient(var(--bg),rgba(7,9,13,0))}
.brand{font:600 14px var(--mono);letter-spacing:.12em;color:var(--hud-ink);display:flex;align-items:center;gap:10px;direction:ltr}
.brand i{width:9px;height:9px;background:var(--live);display:inline-block;box-shadow:0 0 12px var(--live)}
.bar .sp{flex:1}
.ro{font:500 12px var(--mono);color:var(--faint);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.ro b{color:var(--hud-ink);font-weight:500}
.ro b.live{color:var(--live)}
.lang{display:flex;border:1px solid var(--line-strong);direction:ltr}
.lang button{all:unset;cursor:pointer;font:500 12px var(--mono);padding:6px 10px;color:var(--muted)}
.lang button[aria-pressed=true]{background:var(--hud-soft);color:var(--ink)}
.intro{position:absolute;inset-inline-start:28px;top:50%;transform:translateY(-50%);max-width:580px}
.intro .lbl{margin-bottom:18px;display:block}
.intro h1{font:600 clamp(40px,6vw,76px)/1.02 var(--sans);letter-spacing:-.02em;margin:0}
[dir=rtl] .intro h1{letter-spacing:0}
.role{font:500 clamp(18px,2.1vw,26px)/1.3 var(--mono);color:var(--hud-ink);margin:16px 0 0;min-height:1.4em}
[dir=rtl] .role{font-family:var(--sans)}
.role::after{content:'_';color:var(--live);animation:blink 1s steps(1) infinite;margin-inline-start:2px}
@keyframes blink{50%{opacity:0}}
.tag{color:var(--muted);font-size:17px;margin:18px 0 28px;max-width:460px}
.cover .tag{color:#e6ebf4;text-shadow:0 1px 14px rgba(7,9,13,.9)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{all:unset;cursor:pointer;font:500 13px var(--mono);letter-spacing:.08em;padding:13px 18px;border:1px solid var(--hud);color:var(--ink);background:var(--hud-soft);transition:background .2s var(--ease)}
.btn:hover,.btn:focus-visible{background:rgba(76,125,255,.26)}
.btn.ghost{border-color:var(--line-strong);background:transparent;color:var(--muted)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--ink);border-color:var(--hud)}
[dir=rtl] .btn{letter-spacing:0;font-family:var(--sans)}

.frame{position:relative;background:rgba(13,17,23,.8);backdrop-filter:blur(6px);border:1px solid var(--line)}
.frame::before,.frame::after{content:'';position:absolute;width:12px;height:12px;border:2px solid var(--hud);pointer-events:none}
.frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.fh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.index{position:absolute;inset-inline-end:28px;top:96px;width:300px}
.index ol{list-style:none;margin:0;padding:6px 0}
.index li{display:flex;gap:14px;align-items:baseline;padding:9px 14px;cursor:pointer}
.index li .n{font:500 12px var(--mono);color:var(--faint);width:20px}
.index li .k{margin-inline-start:auto;font:11px var(--mono);color:var(--faint);unicode-bidi:isolate;direction:ltr}
.index li:hover,.index li.on{background:var(--hud-soft)}
.index li:hover .n,.index li.on .n{color:var(--live)}
.tele{position:absolute;inset-inline-end:28px;bottom:28px;width:300px}
.tele .g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);direction:ltr}
.tele .g div{background:var(--panel);padding:8px 12px;font:12px var(--mono);color:var(--faint)}
.tele .g div b{display:block;color:var(--ink);font-weight:500;font-size:14px;margin-top:2px}
.hint{position:absolute;inset-inline-start:28px;bottom:28px;font:12px var(--mono);color:var(--faint);display:flex;gap:10px;align-items:center}
[dir=rtl] .hint{font-family:var(--sans)}
.hint i{width:18px;height:1px;background:var(--hud)}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--mono);letter-spacing:.08em;padding:4px 9px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
[dir=rtl] .chip{letter-spacing:0}
.chip::before{content:'';width:6px;height:6px;background:var(--faint)}
.chip.live{border-color:rgba(255,107,26,.5);color:var(--live);background:var(--live-soft)}
.chip.live::before{background:var(--live);box-shadow:0 0 8px var(--live)}
.chip.ready{border-color:rgba(76,125,255,.5);color:var(--hud-ink);background:var(--hud-soft)}
.chip.ready::before{background:var(--hud)}

/* landing: featured strip */
.feat{margin-top:30px}
.feat > .lbl{display:block;margin-bottom:10px}
.feat > div{display:flex;gap:10px}
.fcard{all:unset;cursor:pointer;width:168px;border:1px solid var(--line);background:rgba(13,17,23,.78);backdrop-filter:blur(6px)}
.fcard:hover,.fcard:focus-visible{border-color:var(--hud)}
.fcard .im{display:block;aspect-ratio:16/9;background:#000 center/cover}
.fcard .im.type{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(76,125,255,.3),transparent 60%),var(--panel-2)}
.fcard .im.type span{font:600 10.5px var(--mono);color:var(--hud-ink);letter-spacing:.06em;text-align:center;padding:0 8px}
.fcard b{display:block;font-weight:500;font-size:13px;line-height:1.25;padding:7px 9px 0}
.fcard small{display:block;font:10.5px var(--mono);color:var(--faint);padding:2px 9px 8px}

/* ---------- ELIKO OS ---------- */
#os{position:fixed;inset:0;display:none;z-index:5}
body.in-os #os{display:block}
.device{position:absolute;inset:22px;display:flex;flex-direction:column;background:rgba(9,13,20,.86);backdrop-filter:blur(3px);border:1px solid var(--line-strong);opacity:0;transform:scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease)}
body.os-on .device{opacity:1;transform:none}
/* desktop: the device lives on the 3D monitor (CSS3D owns its transform) */
body.os3d #os{display:none!important}
body.os3d .device{inset:auto;transition:opacity .4s var(--ease);background:rgba(9,13,20,.97);backdrop-filter:none;visibility:hidden}
body.os3d.os-on .device{visibility:visible}
.device::before,.device::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--hud);pointer-events:none;z-index:3}
.device::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.device::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.ostop{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(7,9,13,.7)}
.ostop .t{font:600 13px var(--mono);letter-spacing:.12em;color:var(--hud-ink);direction:ltr}
.ostop .path{font:12px var(--mono);color:var(--faint);direction:ltr;unicode-bidi:isolate;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ostop .sp{flex:1}
.desk{position:relative;flex:1;overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.icons{position:absolute;inset-inline-start:14px;top:12px;bottom:12px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;align-content:flex-start;z-index:1}
.ico{all:unset;cursor:pointer;width:104px;padding:6px 6px 5px;text-align:center;border:1px solid transparent}
.ico:hover,.ico:focus-visible{border-color:var(--line-strong);background:var(--hud-soft)}
.ico .gly{display:block;width:40px;height:32px;margin:0 auto 5px;position:relative}
.ico .gly.box{background:linear-gradient(#b48c62,#9a754c);border-radius:2px}
.ico .gly.box::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;background:#c9a777;opacity:.9}
.ico .gly.box b{position:absolute;left:5px;right:5px;bottom:4px;height:14px;background:#f2efe8;font:600 9px/15px var(--mono);color:#141b26;direction:ltr}
.ico .gly.doc{border:2px solid var(--hud-ink);width:34px;border-radius:2px}
.ico .gly.doc::before{content:'';position:absolute;left:6px;right:6px;top:8px;height:2px;background:var(--hud-ink);box-shadow:0 7px 0 var(--hud-ink),0 14px 0 var(--hud-ink)}
.ico .gly.chan{border:2px solid var(--live);border-radius:50%;width:38px}
.ico .gly.chan::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--live)}
.ico .gly.grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:38px}
.ico .gly.grid i{background:var(--hud);opacity:.85}
.ico .gly.tl{width:36px;border-inline-start:2px solid var(--hud-ink)}
.ico .gly.tl::before{content:'';position:absolute;inset-inline-start:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--live);box-shadow:0 13px 0 var(--hud-ink),0 26px 0 var(--hud-ink)}
.ico .gly.folder{width:40px;border:2px solid var(--hud-ink);border-radius:2px}
.ico .gly.folder::before{content:'';position:absolute;top:-7px;inset-inline-start:-2px;width:16px;height:6px;border:2px solid var(--hud-ink);border-bottom:0}
.worlds{position:absolute;inset-inline-end:14px;top:12px;bottom:12px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;align-content:flex-end;z-index:1}
.worlds > .lbl{display:block;text-align:center;padding:4px 0 4px;width:104px}
.worlds .ico{padding:4px 6px 3px}
.worlds .ico .gly{height:26px;width:34px;margin-bottom:3px}
.worlds .ico .gly.box b{height:11px;font-size:8px;line-height:11px;bottom:3px}
.worlds .ico span{font-size:12px}
.ico span{display:block;font-size:12.5px;line-height:1.25;color:var(--ink)}
.ico small{display:block;font:10.5px var(--mono);color:var(--faint);margin-top:2px;direction:ltr}
.wins{position:absolute;inset:0;pointer-events:none;z-index:2}
.win{pointer-events:auto}
.win{position:absolute;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);min-width:300px;min-height:160px;max-width:calc(100% - 20px);max-height:calc(100% - 20px)}
.win.focus{border-color:rgba(76,125,255,.6)}
.win .wt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel-2);cursor:grab;user-select:none;touch-action:none}
.win .wt b{font:500 12px var(--mono);color:var(--muted);flex:1;direction:ltr;unicode-bidi:isolate;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win.focus .wt b{color:var(--ink)}
.win .wt i{width:8px;height:8px;background:var(--faint)}
.win.focus .wt i{background:var(--live);box-shadow:0 0 8px var(--live)}
.win .x{all:unset;cursor:pointer;font:500 12px var(--mono);color:var(--muted);padding:2px 8px;border:1px solid var(--line-strong)}
.win .x:hover,.win .x:focus-visible{color:var(--ink);border-color:var(--live)}
.win .wb{flex:1;overflow:auto;padding:16px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{all:unset;cursor:pointer;font:500 12px var(--sans);padding:6px 11px;border:1px solid var(--line-strong);color:var(--muted)}
.filters button b{font:500 11px var(--mono);color:var(--faint);margin-left:6px;unicode-bidi:isolate;direction:ltr;display:inline-block}
[dir=rtl] .filters button b{margin-left:0;margin-right:6px}
.filters button[aria-pressed=true]{border-color:var(--hud);color:var(--ink);background:var(--hud-soft)}
.filters button:hover{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.card{all:unset;cursor:pointer;display:block;border:1px solid var(--line);background:var(--bg)}
.card:hover,.card:focus-visible{border-color:var(--hud)}
.card .im{aspect-ratio:16/9;background:#000 center/cover;position:relative}
.card .im.type{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(76,125,255,.25),transparent 60%),var(--panel-2)}
.card .im.type span{font:600 15px var(--mono);color:var(--hud-ink);letter-spacing:.06em;text-align:center;padding:0 12px}
.card .tx{padding:9px 11px 11px}
.card .tx b{display:block;font-weight:500;font-size:14px;line-height:1.3}
.card .tx em{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;font-style:normal}
.card .tx em span{font:10.5px var(--mono);color:var(--faint);border:1px solid var(--line);padding:1px 6px}
[dir=rtl] .card .tx em span{font-family:var(--sans)}
.proj .vid{aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.proj .vid iframe{width:100%;height:100%;border:0;display:block}
.proj .vid.type{display:grid;place-items:center}
.vids{display:flex;gap:6px;margin-top:8px}
.vids button{all:unset;cursor:pointer;font:500 11px var(--mono);letter-spacing:.08em;padding:5px 10px;border:1px solid var(--line-strong);color:var(--muted)}
.vids button[aria-pressed=true]{border-color:var(--hud);color:var(--ink);background:var(--hud-soft)}
.proj h2{font:600 22px var(--sans);margin:14px 0 4px}
.proj .meta{font:12px var(--mono);color:var(--faint);margin-bottom:10px}
.proj p{color:var(--muted);margin:0 0 14px}
.spec{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line);direction:ltr;font:13px var(--mono)}
.spec dt,.spec dd{margin:0;padding:7px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--faint);padding-right:18px}
.spec dd{color:var(--ink)}
.spec dd.pend{color:var(--live)}
.about p{font-size:16px;color:var(--ink);margin:0 0 12px;max-width:560px}
.about .who{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.about .who img{width:128px;height:128px;object-fit:cover;border:1px solid var(--line-strong);filter:saturate(.9)}
.about .who h2{font:600 24px var(--sans);margin:0 0 10px}
.about h3,.sk h3{margin:22px 0 10px}
.edu{list-style:none;margin:0;padding:0}
.edu li{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.edu li span{font:12px var(--mono);color:var(--faint);width:40px;flex:none;padding-top:2px}
.edu li b{font-weight:400;font-size:14.5px}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.tl li .yr{font:12px var(--mono);color:var(--faint);width:84px;flex:none;padding-top:3px}
.tl li.cur .yr{color:var(--live)}
.tl li b{display:block;font-weight:500;font-size:15.5px}
.tl li .org{display:block;font:12px var(--mono);color:var(--hud-ink);margin:2px 0 6px}
.tl li p{margin:0;color:var(--muted);font-size:14px}
.sk section{margin-bottom:6px}
.sk section > div{display:flex;flex-wrap:wrap;gap:6px}
.sk h3:first-child{margin-top:0}
.card .tx em span.tg{border-style:dashed}
.spec dd.role-dd{color:var(--hud-ink);font-family:var(--sans)}
.about .roles{display:flex;gap:6px;flex-wrap:wrap}
.chan a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.chan a span{font:12px var(--mono);color:var(--faint)}
.chan a b{font-weight:500;direction:ltr;unicode-bidi:isolate}
.chan .note{margin-top:14px;font:12px var(--mono);color:var(--live)}

@media (max-width:980px){ .hud .index{display:none} }
@media (max-width:640px){
  .bar{padding:14px 16px;gap:12px}.bar .ro.opt{display:none}
  .intro{inset-inline:16px;top:auto;bottom:32px;transform:none;max-width:none}
  .tele,.hint{display:none}
  .tag{font-size:15px;margin:12px 0 18px}
  #gl{height:100%}
  .hud::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(rgba(7,9,13,0),rgba(7,9,13,.86) 38%,var(--bg));pointer-events:none;z-index:-1}
  .device{inset:0}
  .ostop{gap:10px;padding:8px 10px}
  .ostop .path,.ostop #clock{display:none}
  .ostop .t,.ostop .btn{white-space:nowrap}
  .icons,.worlds{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:8px 10px;gap:4px;border-bottom:1px solid var(--line);align-content:normal}
  .worlds > .lbl{display:none}
  .feat > div{overflow-x:auto}
  .fcard{width:132px;flex:none}
  .feat{margin-top:20px}
  .ico{width:86px;flex:none}
  .desk{display:flex;flex-direction:column}
  .win{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none;max-height:none}
  .win .wt{cursor:default}
  .wins{position:relative;flex:1}
}
@media (prefers-reduced-motion:reduce){.role::after{animation:none}.device{transition:none}}

/* ================= v4: HMI menu + chapter panel on the box + vision readout ================= */
body[data-stage]:not([data-stage="home"]) .hud{opacity:0;pointer-events:none}
body[data-stage]:not([data-stage="home"]) .hud > *{pointer-events:none}
body.in-scene[data-stage="hmi"] #gl, body.in-scene[data-stage="chapter"] #gl{pointer-events:none} /* clicks reach the screens underneath */
.btn.sm{padding:6px 11px;font-size:12px}
.hmi,.panel{background:#0a0f18;color:var(--ink);font-family:var(--sans);overflow:hidden;touch-action:none}
.panel,.panel *,.hmi,.hmi *{touch-action:none} /* everywhere inside the screens: Chrome stops reading an ancestor's rule at any overflow:hidden box, so a drag starting on a card was handed to the browser and cancelled; all touch scrolling in the screens is done by hand in main.js */
body.in-scene{touch-action:none} /* the page never scrolls natively; a drag that starts beside a screen must not be taken over by the browser */ /* on the scroll containers themselves: a touch rule on an ancestor stops at the nearest scroller, and a drag that started on text was cancelled */
.hmi{display:flex;flex-direction:column}
.hbar,.pbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(7,9,13,.7)}
.hbar .t{font:600 15px var(--mono);letter-spacing:.12em;color:var(--hud-ink);direction:ltr}
.hbar .sub{font:500 12px var(--mono);color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
[dir=rtl] .hbar .sub{font-family:var(--sans);letter-spacing:0}
.hbar .sp,.pbar .sp{flex:1}
.hgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.hbtn{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-strong);background:rgba(13,17,23,.85);min-height:120px}
.hbtn:hover,.hbtn:focus-visible{border-color:var(--hud);background:var(--hud-soft)}
.hbtn span{font:500 17px var(--sans)}
.hbtn .gly{display:block;width:58px;height:44px;position:relative;background:linear-gradient(#b48c62,#9a754c);border-radius:2px}
.hbtn .gly::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:#c9a777;opacity:.9}
.hbtn .gly b{position:absolute;left:7px;right:7px;bottom:6px;height:17px;background:#f2efe8;font:600 11px/17px var(--mono);color:#141b26;text-align:center;direction:ltr}
.panel{display:flex;flex-direction:column}
.pbar .dot{width:9px;height:9px;background:var(--live);box-shadow:0 0 10px var(--live)}
.pbar .pnum{font:600 14px var(--mono);color:var(--hud-ink);direction:ltr}
.pbar .crumb{font:500 16px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .pb{flex:1;overflow:auto;padding:22px 26px}
.panel .proj{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.panel .proj .vid{aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.panel .proj .vid iframe{width:100%;height:100%;border:0;display:block}
.panel .proj h2{font:600 22px var(--sans);margin:0 0 4px}
.panel .proj .meta{font:12px var(--mono);color:var(--faint);margin-bottom:10px}
.panel .proj p{color:var(--muted);margin:0 0 14px;font-size:15px}
.panel .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel .about .who img{width:136px;height:136px}
.scan{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:6;display:none;gap:14px;align-items:center;padding:10px 16px;border:1px solid rgba(92,242,176,.5);background:rgba(7,9,13,.85);font:500 13px var(--mono);color:#5cf2b0;letter-spacing:.08em;direction:ltr}
.scan.on{display:flex}
.scan span{color:var(--faint);font-size:11px}
/* phone: the same two screens as full-screen layers */
body:not(.in-scene) .hmi,body:not(.in-scene) .panel{position:fixed;inset:0;z-index:5;display:none}
body:not(.in-scene)[data-stage="hmi"] .hmi{display:flex}
body:not(.in-scene)[data-stage="chapter"] .panel{display:flex}
body:not(.in-scene) .hgrid{grid-template-columns:1fr 1fr;align-content:start}
body.portrait .hgrid{grid-template-columns:1fr 1fr;align-content:start} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .panel .proj{grid-template-columns:1fr}
body.portrait .panel .proj{grid-template-columns:1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .panel .cards{grid-template-columns:1fr 1fr}
body.portrait .panel .cards{grid-template-columns:1fr 1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .panel .pb{padding:16px}

/* ================= v5: cover -> cell -> touch the HMI ================= */
.topbar{position:fixed;top:0;left:0;right:0;z-index:7;display:flex;align-items:center;gap:22px;padding:18px 28px;border-bottom:1px solid var(--line);background:linear-gradient(var(--bg),rgba(7,9,13,0))}
.topbar .sp{flex:1}
body:not([data-stage="intro"]):not([data-stage="home"]) .topbar{opacity:0;pointer-events:none;transition:opacity .4s}
#gl{transition:filter .9s var(--ease)}
body[data-stage="intro"] #gl{filter:blur(7px) brightness(.42) saturate(.8)}
body[data-stage="entering"] #gl{filter:none}
.cover{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.cover::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(7,9,13,.55),rgba(7,9,13,.85) 70%);pointer-events:none;z-index:-1}
body:not([data-stage="intro"]) .cover{opacity:0;transform:scale(1.04);pointer-events:none}
.cover .lbl{display:block;margin-bottom:22px}
.cover h1{font:600 clamp(52px,9vw,128px)/.96 var(--sans);letter-spacing:-.03em;margin:0}
[dir=rtl] .cover h1{letter-spacing:0}
.cover .role{font-size:clamp(20px,2.4vw,30px)}
.cover .tag{font-size:19px;max-width:520px;margin:20px 0 34px}
.btn.enter{padding:18px 34px;font-size:15px;border-color:var(--hud);background:rgba(76,125,255,.18);animation:enterPulse 2.4s ease-in-out infinite}
@keyframes enterPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,125,255,.0)}50%{box-shadow:0 0 0 8px rgba(76,125,255,.16)}}
.cover .feat{position:absolute;inset-inline-end:7vw;bottom:7vh;margin:0}
.hud .touch{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;font:500 13px var(--mono);letter-spacing:.08em;color:var(--hud-ink);padding:10px 16px;border:1px solid var(--line-strong);background:rgba(7,9,13,.7);white-space:nowrap}
[dir=rtl] .hud .touch{font-family:var(--sans);letter-spacing:0}
.hud .touch i{width:10px;height:10px;border-radius:50%;background:var(--hud);box-shadow:0 0 0 0 rgba(76,125,255,.6);animation:touchPing 1.6s infinite}
@keyframes touchPing{0%{box-shadow:0 0 0 0 rgba(76,125,255,.6)}100%{box-shadow:0 0 0 14px rgba(76,125,255,0)}}
body:not([data-stage="home"]) .hud{opacity:0;pointer-events:none}
body:not([data-stage="home"]) .hud > *{pointer-events:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* HMI: a teach-pendant screen, light industrial palette on purpose (it is a device inside the scene) */
.hmi{--h-bg:#e4e8ee;--h-panel:#f6f8fb;--h-ink:#1f2a3a;--h-mute:#5a6478;--h-line:#c7cfdb;--h-blue:#2f6fe0;--h-green:#1aa34a;
  background:var(--h-bg)!important;color:var(--h-ink)!important;display:flex;flex-direction:column;font-family:var(--sans);direction:ltr}
.hmi .hs{display:flex;align-items:center;gap:12px;padding:0 12px;height:40px;background:#1f2a3a;color:#c9d3e6;font:500 12px var(--mono);direction:ltr}
.hmi .hs .sp,.hmi .hf .sp{flex:1}
.hmi .hlogo{color:#8fb0ff;font-weight:600;letter-spacing:.08em}
.hmi .hstat{display:flex;gap:6px;align-items:center;padding:3px 8px;border:1px solid #3a4658}
.hmi .hstat.ok i{width:8px;height:8px;border-radius:50%;background:var(--h-green)}
.hmi .hspeed{position:relative;padding:3px 8px;border:1px solid #3a4658;min-width:64px}
.hmi .hspeed i{position:absolute;left:0;bottom:0;height:3px;background:#ff6b1a}
.hmi .hb{flex:1;display:flex;min-height:0}
.hmi .hrail{width:64px;background:#cfd6df;display:flex;flex-direction:column;gap:8px;padding:10px 8px;direction:ltr}
.hmi .hrail span,.hmi .hrail button{all:unset;display:grid;place-items:center;height:42px;background:#9aa5b5;color:#fff;font:600 11px var(--mono);text-align:center}
.hmi .hrail button{cursor:pointer}
.hmi .hrail button.on,.hmi .hrail span.on{background:var(--h-blue)}
.hmi .hsub{font:500 11px var(--mono);color:var(--h-mute);letter-spacing:.1em;margin:-2px 0 10px;direction:ltr;text-align:start}
.hmi .hbar{flex:1;display:grid;place-items:center;height:34px;background:var(--h-blue);color:#fff;font:600 12px var(--mono);letter-spacing:.1em}
.hmi .hjog{display:flex;gap:16px;flex:1;min-height:0}
.hmi .hjcol{flex:1;min-width:0}
.hmi .hjcol h4{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.1em;color:var(--h-mute)}
.hmi .hjr{display:flex;align-items:center;gap:8px;height:34px;direction:ltr}
.hmi .hjl{width:22px;font:600 12px var(--mono);color:var(--h-ink)}
.hmi .hjb{all:unset;width:44px;height:28px;display:grid;place-items:center;background:var(--h-blue);color:#fff;font:700 15px var(--mono);cursor:pointer;user-select:none;touch-action:none}
.hmi .hjb.down{background:#1a4fb0}
.hmi .hjv{flex:1;text-align:center;font:500 12px var(--mono);color:var(--h-ink);background:var(--h-panel);border:1px solid var(--h-line);height:26px;line-height:26px}
.hmi .hjhome{margin-top:8px;display:flex;justify-content:flex-end}
.hmi.portrait .hb{flex-direction:column}
.hmi.portrait .hrail{flex-direction:row;width:auto;height:auto;padding:6px 8px;gap:6px}
.hmi.portrait .hrail span,.hmi.portrait .hrail button{flex:1;height:34px}
.hmi.portrait .hjog{flex-direction:column;gap:10px;overflow:auto}
.hmi.portrait .hhead b{font-size:17px}
.hmi .hmain{flex:1;padding:12px 14px;display:flex;flex-direction:column;min-width:0}
.hmi .hhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.hmi .hhead b{font:600 19px var(--sans)}
.hmi .hhead span{font:500 12px var(--mono);color:var(--h-mute)}
.hmi .hrows{display:flex;flex-direction:column;gap:6px}
.hmi .hrow{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;background:var(--h-panel);border:1px solid var(--h-line);border-inline-start:4px solid #9aa5b5}
.hmi .hrow.ro{cursor:default}
.hmi .hrow:hover,.hmi .hrow:focus-visible{background:#dfe9ff;border-color:var(--h-blue)}
.hmi .hled{width:9px;height:9px;border-radius:50%;background:#9aa5b5}
.hmi .hrow:hover .hled{background:var(--h-green);box-shadow:0 0 6px var(--h-green)}
.hmi .hno{font:500 13px var(--mono);color:var(--h-ink);letter-spacing:.03em;direction:ltr}
.hmi .hrow .sp{flex:1}
.hmi .hname{font:500 13px var(--sans);color:var(--h-mute);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmi .hfile{font:500 13px var(--mono);color:var(--h-ink);letter-spacing:.03em;direction:ltr}
.hmi .hload{font:600 12px var(--mono);color:#fff;background:var(--h-blue);padding:6px 10px;direction:ltr}
.hmi .hf{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#cfd6df;direction:ltr}
.hmi .hkey{all:unset;cursor:pointer;font:600 12px var(--mono);padding:8px 14px;background:#fff;border:1px solid var(--h-line);color:var(--h-ink)}
.hmi .hkey.dim{color:#9aa5b5;cursor:default}
.hmi .hkey.run{background:var(--h-green);color:#fff;border-color:var(--h-green);cursor:default}
@media (max-width:640px){
  .topbar{padding:14px 16px;gap:12px}.topbar .ro.opt{display:none}
  .cover{padding:0 18px;justify-content:flex-end;padding-bottom:200px}
  .cover .feat{inset-inline:16px;bottom:24px}
  .hud .touch{bottom:76px;font-size:12px} /* above the phone's browser bar and home indicator (Eli) */
  body:not(.in-scene) .hmi .hrail,body:not(.in-scene) .hmi .hfile,.hmi .hspeed,.hmi .hprog{display:none}
}

/* ================= v6: cover featured, About, horizontal timeline, I/O skills, contact ================= */
.cover .feat{position:static;margin-top:44px}
.cover .feat > .lbl{margin-bottom:12px}
.cover .fcard{width:220px}
.cover .fcard b{font-size:14px}
@media (max-width:640px){.cover .fcard{width:150px}}

.panel .about2{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.about2 .ph{margin:0;position:relative}
.about2 .ph img{width:300px;height:300px;object-fit:cover;display:block;border:1px solid var(--line-strong);filter:saturate(.95) contrast(1.03)}
.about2 .ph::before,.about2 .ph::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--hud)}
.about2 .ph::before{top:-5px;left:-5px;border-right:0;border-bottom:0}.about2 .ph::after{bottom:21px;right:-5px;border-left:0;border-top:0}
.about2 figcaption{font:11px var(--mono);color:var(--faint);margin-top:8px;letter-spacing:.08em}
.about2 h2{font:600 34px var(--sans);margin:0 0 12px}
.about2 .roles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.about2 p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.about2 p.lead{font-size:20px;line-height:1.5;color:var(--ink)}

.xp2{--pos:0%;outline:none;display:flex;flex-direction:column;height:100%;touch-action:none}
.xp2 .axis{position:relative;height:118px;margin:6px 34px 0}
.xp2 .rail{position:absolute;left:0;right:0;top:44px;height:10px;background:linear-gradient(#2a3446,#141a24);border:1px solid var(--line-strong)}
.xp2 .ticks{position:absolute;left:0;right:0;top:58px;height:8px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 20px)}
.xp2 .stn{all:unset;cursor:pointer;position:absolute;left:var(--x);top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:120px;text-align:center}
.xp2 .stn i{order:2;width:14px;height:14px;border-radius:50%;background:#0a0f18;border:2px solid var(--faint);margin:31px 0 8px;transition:all .3s}
.xp2 .stn b{order:1;font:600 13px var(--mono);color:var(--faint);transition:color .3s}
.xp2 .stn span{order:3;font:500 12px var(--sans);color:var(--faint);line-height:1.25;transition:color .3s}
.xp2 .stn:hover i{border-color:var(--hud)}
.xp2 .stn.on i{border-color:var(--live);background:var(--live);box-shadow:0 0 0 5px rgba(255,107,26,.18),0 0 14px var(--live)}
.xp2 .stn.on b,.xp2 .stn.on span{color:var(--ink)}
.xp2 .carriage{position:absolute;left:var(--pos);top:30px;transform:translateX(-50%);transition:left 1.1s cubic-bezier(.65,0,.35,1);pointer-events:none}
.xp2 .cbody{width:46px;height:12px;background:linear-gradient(#e9edf2,#b9c2cf);border-radius:2px;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.xp2 .cled{width:6px;height:6px;background:var(--live);box-shadow:0 0 8px var(--live);margin:-9px auto 0;position:relative}
.xp2 .xcards{position:relative;flex:1;overflow:hidden;margin-top:6px}
.xp2 .xcard{position:absolute;inset:0;padding:22px 30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(76,125,255,.06),transparent 60%),var(--panel);
  transform:translateX(calc(var(--d,0) * 104%)) scale(calc(1 - min(1, abs(var(--d,0))) * .06));opacity:calc(1 - min(1, abs(var(--d,0))) * .8);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .9s}
.xp2 .xyr{display:flex;justify-content:space-between;font:600 14px var(--mono);color:var(--live)}
.xp2 .xyr span{color:var(--faint);font-weight:500}
.xp2 .xcard h3{font:600 28px/1.15 var(--sans);margin:10px 0 6px}
.xp2 .xcard .org{font:500 14px var(--mono);color:var(--hud-ink);margin-bottom:14px}
.xp2 .xcard p{font-size:16px;line-height:1.65;color:var(--muted);max-width:760px;margin:0}
.xp2 .xnav{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.xp2 .xnav button{all:unset;cursor:pointer;width:40px;height:32px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--muted);font-size:12px}
.xp2 .xnav button:hover{border-color:var(--hud);color:var(--ink)}

.io .iohead{display:flex;gap:14px;align-items:center;font:500 12px var(--mono);color:var(--faint);letter-spacing:.08em;margin-bottom:14px}
.io .iohead b{color:var(--ink);font-weight:600}
.io .iohead .sp{flex:1}
.io .iohead .ok{display:flex;gap:6px;align-items:center;color:#3ddc97}
.io .iohead .ok i{width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 8px #3ddc97}
.io .mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.io .mod{border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 14%,transparent),transparent 40%),#0b1018;border-top:3px solid var(--hue)}
.io .mod header{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.io .mod header b{font:600 14px var(--sans);flex:1;line-height:1.2}
.io .mod header span.ltr{font:500 10px var(--mono);color:var(--faint)}
.io .mled{width:8px;height:8px;border-radius:50%;background:var(--hue);box-shadow:0 0 8px var(--hue);flex:none}
.io ul{list-style:none;margin:0;padding:2px 0 8px}
.io li{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:default;transition:background .2s,transform .2s}
.io .ch{font:500 10px var(--mono);color:var(--faint);width:34px;flex:none}
.io .nm{font:500 13px var(--sans);color:var(--muted);flex:1;transition:color .2s}
.io .led{width:9px;height:9px;border-radius:50%;background:#1d2533;border:1px solid #2d3748;flex:none;transition:all .2s}
.io .wave{width:0;height:12px;flex:none;overflow:hidden;transition:width .25s;background:linear-gradient(90deg,transparent,var(--hue)) ;mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px);-webkit-mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px)}
.io li:hover{background:color-mix(in srgb,var(--hue) 14%,transparent);transform:translateX(3px)}
[dir=rtl] .io li:hover{transform:translateX(-3px)}
.io li:hover .nm{color:var(--ink)}
.io li:hover .led{background:var(--hue);border-color:var(--hue);box-shadow:0 0 10px var(--hue)}
.io li:hover .wave{width:34px;animation:sig .6s linear infinite}
@keyframes sig{to{background-position:12px 0}}
.io li:nth-child(3n+1) .led{background:color-mix(in srgb,var(--hue) 35%,#1d2533)}

.chan2{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:center;height:100%}
.chan2 h2{font:600 40px var(--sans);margin:0 0 10px}
.chan2 p{font-size:17px;color:var(--muted);margin:0 0 26px;max-width:460px}
.chan2 .ln{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:12px;border:1px solid var(--line-strong);background:#0b1018;text-decoration:none;transition:all .25s}
.chan2 .ln:hover{border-color:var(--hud);background:var(--hud-soft);transform:translateX(4px)}
[dir=rtl] .chan2 .ln:hover{transform:translateX(-4px)}
.chan2 .ic{width:44px;height:44px;display:grid;place-items:center;background:var(--hud);color:#fff;font:700 18px var(--sans);flex:none}
.chan2 .ln b{display:block;font:600 17px var(--sans)}
.chan2 .ln small{font:500 13px var(--mono);color:var(--faint)}
.chan2 .ln i{margin-inline-start:auto;font-style:normal;color:var(--hud-ink);font-size:20px}
.chan2 .wave-bot{position:relative}
.wave-bot svg{display:block}
.wave-bot .j1{transform-origin:150px 236px;animation:wj1 4s ease-in-out infinite}
.wave-bot .j2{transform-origin:150px 172px;animation:wj2 4s ease-in-out infinite}
.wave-bot .j3{transform-origin:150px 90px;animation:wj3 .5s ease-in-out infinite alternate}
@keyframes wj1{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes wj2{0%,100%{transform:rotate(18deg)}50%{transform:rotate(30deg)}}
@keyframes wj3{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.wave-bot .bubble{position:absolute;right:6px;top:18px;padding:8px 14px;background:var(--hud);color:#fff;font:600 16px var(--sans);border-radius:14px 14px 14px 2px;animation:bub 4s ease-in-out infinite}
@keyframes bub{0%,15%{opacity:0;transform:translateY(6px)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
.wave-bot .ping{display:flex;flex-direction:column;gap:2px;font:500 11px var(--mono);color:#3ddc97;margin-top:6px}
.wave-bot .ping span{opacity:0;animation:pl 6s steps(1) infinite}
.wave-bot .ping span:nth-child(2){animation-delay:.8s}.wave-bot .ping span:nth-child(3){animation-delay:1.6s}
@keyframes pl{0%{opacity:0}5%,90%{opacity:1}100%{opacity:0}}
body:not(.in-scene) .panel .about2{grid-template-columns:1fr}
body.portrait .panel .about2{grid-template-columns:1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .about2 .ph img{width:160px;height:160px}
body:not(.in-scene) .io .mods{grid-template-columns:1fr 1fr}
body.portrait .io .mods{grid-template-columns:1fr 1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .chan2{grid-template-columns:1fr}
body.portrait .chan2{grid-template-columns:1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .xp2 .axis{margin:6px 10px 0}
body:not(.in-scene) .xp2 .stn{width:64px}
body:not(.in-scene) .xp2 .stn span{display:none}
body:not(.in-scene) .xp2 .xcards{min-height:420px}
@media (prefers-reduced-motion:reduce){.wave-bot *{animation:none!important}.xp2 .carriage,.xp2 .xcard{transition:none}}

/* ================= v6: README-style project page ================= */
.rd{position:relative}
.rd-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rd-hero .lbl{display:block;margin-bottom:8px}
.rd-hero h2{font:600 30px/1.1 var(--sans);margin:0 0 10px}
.rd-hero p{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.rd-tags{display:flex;flex-wrap:wrap;gap:6px}
.rd-media .vid{aspect-ratio:16/9;background:#000;border:1px solid var(--line-strong)}
.rd-media .vid iframe{width:100%;height:100%;border:0;display:block}
.rd-grid{display:grid;grid-template-columns:1fr 280px;gap:24px}
.rd-main section{margin-bottom:22px}
.rd h3{font:600 18px var(--sans);margin:0 0 10px;color:var(--ink)}
.rd h3 span{font:600 14px var(--mono);color:var(--live);margin-inline-end:4px}
.rd-main p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.rd-req{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.rd-req li{position:relative;padding-inline-start:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.rd-req li::before{content:'';position:absolute;inset-inline-start:0;top:5px;width:12px;height:12px;border:1.5px solid var(--hud);background:var(--hud-soft)}
.rd-req li::after{content:'';position:absolute;inset-inline-start:3px;top:7px;width:6px;height:3px;border-left:2px solid var(--hud-ink);border-bottom:2px solid var(--hud-ink);transform:rotate(-45deg)}
.rd-built{margin:0;padding:0;list-style:none;counter-reset:b}
.rd-built li{counter-increment:b;position:relative;padding:8px 0 8px 40px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--muted)}
[dir=rtl] .rd-built li{padding:8px 40px 8px 0}
.rd-built li::before{content:counter(b,decimal-leading-zero);position:absolute;inset-inline-start:0;top:8px;font:600 13px var(--mono);color:var(--hud-ink)}
.rd-ch{display:flex;flex-direction:column;gap:10px}
.rd-c{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.rd-c .q{padding:12px 14px;background:rgba(255,107,26,.07);border-inline-end:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink)}
.rd-c .q b{display:block;font:600 11px var(--mono);color:var(--live);margin-bottom:4px;letter-spacing:.1em}
.rd-c .a{padding:12px 14px;background:rgba(61,220,151,.06);font-size:14px;line-height:1.5;color:var(--muted);position:relative}
.rd-c .a::before{content:'FIX';display:block;font:600 11px var(--mono);color:#3ddc97;margin-bottom:4px;letter-spacing:.1em}
.rd-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rd-gal .g{all:unset;cursor:zoom-in;display:block;border:1px solid var(--line);background:#fff;transition:border-color .2s,transform .2s}
.rd-gal .g:hover{border-color:var(--hud);transform:translateY(-2px)}
.rd-gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.rd-gal span{display:block;padding:6px 8px;font-size:12px;color:var(--muted);background:var(--panel)}
.rd-side{display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:0}
.rd-box{border:1px solid var(--line);padding:12px 14px;background:#0b1018}
.rd-box h4{margin:0 0 8px}
.rd-box p{margin:0;font-size:14px;color:var(--hud-ink);line-height:1.5}
.rd-tech{display:flex;flex-wrap:wrap;gap:5px}
.rd-tech span{font:500 11.5px var(--mono);padding:3px 7px;border:1px solid var(--line-strong);color:var(--muted)}
.rd-lb{position:fixed;inset:0;z-index:20;background:rgba(7,9,13,.92);display:grid;place-items:center;padding:30px;cursor:zoom-out}
.panel{position:relative}
.panel > .rd-lb{position:absolute;top:56px;left:0;right:0;bottom:0}
.rd-lb[hidden]{display:none}
.rd-lb img{max-width:100%;max-height:85%;background:#fff;border:1px solid var(--line-strong)}
.rd-lb span{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);font-size:13px}
.rd-lb button{all:unset;cursor:pointer;position:absolute;top:10px;inset-inline-end:14px;font-size:26px;color:var(--ink)}
body:not(.in-scene) .rd-hero,body:not(.in-scene) .rd-grid,body:not(.in-scene) .rd-c,body:not(.in-scene) .rd-req{grid-template-columns:1fr}
body.portrait .rd-hero,body.portrait .rd-grid,body.portrait .rd-c,body.portrait .rd-req{grid-template-columns:1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .rd-gal{grid-template-columns:1fr 1fr}
body.portrait .rd-gal{grid-template-columns:1fr 1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .rd-side{position:static}
.pbar .btn{white-space:nowrap;flex:none}
.pbar .crumb{min-width:0;flex:1}
@media (max-width:640px){.pbar{gap:8px;padding:10px 12px}.pbar .btn.sm{padding:6px 8px;font-size:11px;letter-spacing:.04em}}

/* styled scrollbars: a thin HUD rail with a glowing carriage */
*{scrollbar-width:thin;scrollbar-color:#4c7dff rgba(120,155,255,.08)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(120,155,255,.06);border-left:1px solid var(--line)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6f97ff,#4c7dff);border:2px solid #0a0f18;border-radius:6px;box-shadow:0 0 8px rgba(76,125,255,.6)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff8a45,#ff6b1a)}
::-webkit-scrollbar-corner{background:transparent}
.hmi ::-webkit-scrollbar-track{background:#cfd6df}
.hmi ::-webkit-scrollbar-thumb{background:#2f6fe0;border-color:#cfd6df;box-shadow:none}

.rd-box p.vibe{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong);color:var(--muted);font-size:13px;display:flex;gap:8px}
.rd-box p.vibe i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#3ddc97;box-shadow:0 0 8px #3ddc97}

.xp2 .xcard{overflow:auto}
.xp2 .xhi{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.xp2 .xhi span{font:500 12px var(--mono);padding:4px 9px;border:1px solid rgba(255,107,26,.35);color:#ffb38a;background:rgba(255,107,26,.06)}
[dir=rtl] .xp2 .xhi span{font-family:var(--sans)}
.xp2 .stn{width:110px}

/* ================= v7: centred cover, profile links, round About portrait ================= */
.cover{align-items:center;text-align:center;padding:0 24px}
.cover .cover-in{max-width:900px;display:flex;flex-direction:column;align-items:center}
.cover .tag{margin-left:auto;margin-right:auto}
.cover .btns{justify-content:center}
.cover .role{min-height:1.4em}
.btn.enter{padding:20px 46px;font-size:16px;margin-top:6px}
.cover::before{background:radial-gradient(ellipse at 50% 50%,rgba(7,9,13,.25),rgba(7,9,13,.82) 70%)}
.social{display:flex;gap:6px;direction:ltr}
.social a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);color:var(--muted);transition:all .2s}
.social a:hover{color:var(--ink);border-color:var(--hud);background:var(--hud-soft)}
@media (max-width:640px){.cover{justify-content:center;padding-bottom:0}.social a{width:28px;height:28px}.topbar .ro{display:none}}

.about2 .ph2{margin:0;position:relative;width:300px;height:300px}
.about2 .orb{position:absolute;inset:20px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #0a0f18,0 0 40px rgba(76,125,255,.35);transition:transform .4s var(--ease)}
.about2 .orb img{width:100%;height:100%;object-fit:cover;display:block}
.about2 .ph2:hover .orb{transform:scale(1.03)}
.about2 .rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.about2 .rings circle{fill:none;transform-origin:150px 150px}
.about2 .rings .r1{stroke:#4c7dff;stroke-width:2;stroke-dasharray:60 18 6 18;animation:spin 18s linear infinite}
.about2 .rings .r2{stroke:rgba(76,125,255,.35);stroke-width:1;stroke-dasharray:2 6;animation:spin 30s linear infinite reverse}
.about2 .rings .r3{stroke:#ff6b1a;stroke-width:3;stroke-dasharray:28 890;stroke-linecap:round;animation:spin 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about2 .ph2 .ok{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:4px 10px;background:#0a0f18;border:1px solid var(--line-strong);font:500 10.5px var(--mono);color:#3ddc97;letter-spacing:.1em;white-space:nowrap}
.about2 .ph2 .ok i{width:7px;height:7px;border-radius:50%;background:#3ddc97;box-shadow:0 0 8px #3ddc97;animation:blink 1.4s steps(1) infinite}
.about2 .ph2 .soc{position:absolute;left:0;right:0;top:318px;display:flex;justify-content:center;gap:8px}
.about2 .ph2 .soc a{font:500 12px var(--mono);padding:5px 12px;border:1px solid var(--line-strong);color:var(--hud-ink);text-decoration:none}
.about2 .ph2 .soc a:hover{border-color:var(--hud);background:var(--hud-soft)}
.chan2 .ic.gh{background:#1f2a3a;font-family:var(--mono);font-size:15px}
@media (prefers-reduced-motion:reduce){.about2 .rings circle{animation:none}}
body:not(.in-scene) .about2 .ph2{width:220px;height:220px;margin:0 auto 60px}
body:not(.in-scene) .about2 .ph2 .soc{top:232px}
body:not(.in-scene) .about2 .orb{inset:15px}
.about2 .langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.about2 .langs span{font:500 12px var(--mono);color:var(--faint);padding:5px 10px;border:1px solid var(--line)}
.about2 .langs b{color:var(--ink);font-weight:500;margin-inline-end:6px;font-family:var(--sans)}
.io .mods{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ================= v8: something alive on every chapter ================= */
/* Portfolio: a conveyor carrying numbered boxes past a sensor */
.conv{position:relative;height:46px;margin:-6px 0 14px;overflow:hidden;border-bottom:1px solid var(--line)}
.conv .belt{position:absolute;left:0;right:0;bottom:6px;height:8px;background:repeating-linear-gradient(90deg,#1b2230 0 14px,#2a3446 14px 16px);animation:belt 1.2s linear infinite;border-radius:4px}
@keyframes belt{to{background-position:16px 0}}
.conv i{position:absolute;bottom:14px;left:-60px;width:42px;height:26px;background:linear-gradient(#b48c62,#9a754c);border-radius:2px;animation:ride 14s linear infinite;animation-delay:calc(var(--k) * -2s)}
.conv i::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:#c9a777}
.conv i b{position:absolute;left:5px;right:5px;bottom:4px;height:10px;background:#f2efe8;font:600 7px/10px var(--mono);color:#141b26;text-align:center;direction:ltr}
@keyframes ride{from{transform:translateX(0)}to{transform:translateX(calc(100cqw + 120px))}}
.conv{container-type:inline-size}
.conv .eye{position:absolute;left:62%;top:0;bottom:6px;width:2px;background:linear-gradient(transparent,rgba(92,242,176,.9));box-shadow:0 0 10px #5cf2b0;animation:eye 2s ease-in-out infinite}
@keyframes eye{50%{opacity:.35}}
[dir=rtl] .conv i{animation-direction:reverse}

/* Skills: live inputs flicker like a real I/O module */
.io li .led{animation:io var(--p,3s) steps(1) infinite;animation-delay:var(--d,0s)}
@keyframes io{0%,62%{background:#1d2533;border-color:#2d3748;box-shadow:none}63%,100%{background:var(--hue);border-color:var(--hue);box-shadow:0 0 8px var(--hue)}}
.io .mod header .mled{animation:blink 1.1s steps(1) infinite}

/* Experience: a pulse runs along the rail */
.xp2 .rail{overflow:hidden}
.xp2 .rail .pulse{position:absolute;top:0;bottom:0;width:90px;background:linear-gradient(90deg,transparent,rgba(76,125,255,.85),transparent);animation:pulse 3.2s linear infinite}
@keyframes pulse{from{left:-90px}to{left:100%}}
.xp2 .cled{animation:blink 1s steps(1) infinite}

/* Project pages: a vision scan line over the hero media */
.rd-media{position:relative;overflow:hidden}
.rd-media .scanline{position:absolute;left:0;right:0;height:2px;background:#5cf2b0;box-shadow:0 0 12px #5cf2b0,0 0 2px #fff;opacity:.75;animation:scanv 3.6s ease-in-out infinite;pointer-events:none}
@keyframes scanv{0%{top:4%}50%{top:94%}100%{top:4%}}
.rd-media .reticle{position:absolute;left:10px;top:10px;font:500 10px var(--mono);letter-spacing:.1em;color:#5cf2b0;background:rgba(7,9,13,.7);padding:3px 7px;border:1px solid rgba(92,242,176,.45);pointer-events:none}
.rd-media::after{content:'';position:absolute;inset:8px;pointer-events:none;background:
  linear-gradient(#5cf2b0,#5cf2b0) top left/18px 2px no-repeat,linear-gradient(#5cf2b0,#5cf2b0) top left/2px 18px no-repeat,
  linear-gradient(#5cf2b0,#5cf2b0) bottom right/18px 2px no-repeat,linear-gradient(#5cf2b0,#5cf2b0) bottom right/2px 18px no-repeat;opacity:.8}
@media (prefers-reduced-motion:reduce){.conv *,.io li .led,.xp2 .rail .pulse,.rd-media .scanline{animation:none!important}}

/* ================= v8: case-study template ================= */
.cs-status{display:inline-flex;gap:8px;align-items:center;font:500 12px var(--mono);color:#ffb38a;border:1px solid rgba(255,107,26,.4);background:rgba(255,107,26,.07);padding:5px 10px;margin:4px 0 12px}
[dir=rtl] .cs-status{font-family:var(--sans)}
.cs-status i{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:blink 1.4s steps(1) infinite}
.rd .g.flow{all:unset;cursor:zoom-in;display:block;border:1px solid var(--line-strong);background:#07090d}
.rd .g.flow img{display:block;width:100%}
.rd p.cap{font-size:13.5px;color:var(--faint);margin-top:8px}
.cs-dec{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-d{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(76,125,255,.07),transparent 50%),#0b1018;padding:14px 16px 12px}
.cs-d .n{position:absolute;top:12px;inset-inline-end:14px;font:600 12px var(--mono);color:var(--faint)}
.cs-d h4{font:600 16px/1.3 var(--sans);margin:0 26px 10px 0;color:var(--ink)}
[dir=rtl] .cs-d h4{margin:0 0 10px 26px}
.cs-d dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0}
.cs-d dt{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hud-ink);padding-top:3px}
[dir=rtl] .cs-d dt{font-family:var(--sans);letter-spacing:0}
.cs-d dt:nth-of-type(2){color:#ffb38a}.cs-d dt:nth-of-type(3){color:var(--faint)}
.cs-d dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cs-nb{display:flex;flex-direction:column;gap:6px}
.cs-nb > div{display:grid;grid-template-columns:200px 1fr;gap:4px 14px;padding:9px 0;border-bottom:1px dashed var(--line-strong)}
.cs-nb b{font-weight:500;font-size:14px;color:var(--ink);text-decoration:line-through;text-decoration-color:rgba(255,107,26,.6)}
.cs-nb span{font-size:13.5px;color:var(--muted)}
.cs-nb em{grid-column:2;font-style:normal;font-size:12.5px;color:var(--faint)}
.cs-ev{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.cs-ev ul{margin:0;padding:0;list-style:none}
.cs-ev li{position:relative;padding:6px 0 6px 22px;font-size:14px;line-height:1.5;color:var(--muted);border-bottom:1px solid var(--line)}
[dir=rtl] .cs-ev li{padding:6px 22px 6px 0}
.cs-ev ul.ok li::before{content:'✓';position:absolute;inset-inline-start:0;top:6px;color:#3ddc97;font-weight:700}
.cs-ev .open{border:1px solid rgba(255,107,26,.35);background:rgba(255,107,26,.05);padding:10px 14px}
.cs-ev .open b{display:block;font:600 11px var(--mono);letter-spacing:.1em;color:#ffb38a;margin-bottom:4px}
.cs-ev .open li::before{content:'?';position:absolute;inset-inline-start:2px;top:6px;color:#ffb38a;font-weight:700}
body:not(.in-scene) .cs-dec,body:not(.in-scene) .cs-ev,body:not(.in-scene) .cs-nb > div{grid-template-columns:1fr}
body.portrait .cs-dec,body.portrait .cs-ev,body.portrait .cs-nb > div{grid-template-columns:1fr} /* the portrait page on a phone, same layout as the old flat sheet */
body:not(.in-scene) .cs-nb em{grid-column:1}
.xp2 .xcard p.ctx{font-size:14px;color:var(--faint);font-style:italic;margin:0 0 10px}
.xp2 .pts{margin:0;padding:0;list-style:none;max-width:820px}
.xp2 .pts li{position:relative;padding:5px 0 5px 20px;font-size:15px;line-height:1.55;color:var(--muted)}
[dir=rtl] .xp2 .pts li{padding:5px 20px 5px 0}
.xp2 .pts li::before{content:'›';position:absolute;inset-inline-start:2px;top:4px;color:var(--live);font-weight:700}
[dir=rtl] .xp2 .pts li::before{content:'‹'}

/* ================= software projects: app-store page ================= */
.rd.app .app-hero{display:grid;grid-template-columns:124px 1fr;gap:24px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:18px}
.app-icon{width:124px;height:124px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(140deg,hsl(var(--hue) 72% 58%),hsl(calc(var(--hue) + 45) 70% 38%));box-shadow:0 14px 34px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.app-icon span{font:700 46px var(--mono);color:#fff;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.app-h h2{margin:6px 0 8px;font:600 32px/1.1 var(--sans)}
.app-pitch{font-size:17px;line-height:1.5;color:var(--muted);margin:0 0 12px;max-width:720px}
.app-shots{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;direction:ltr}
.app-shots .g{all:unset;flex:none;width:min(520px,70%);scroll-snap-align:start;cursor:zoom-in}
.app-shots img{width:100%;display:block;border:1px solid var(--line-strong);border-radius:10px;background:#0b1018}
.app-shots span{display:block;font:12px/1.4 var(--sans);color:var(--faint);margin-top:6px;direction:var(--dir,ltr)}
[dir=rtl] .app-shots span{direction:rtl;text-align:right}
.app-sec{margin:22px 0 0}
.app-sec h3{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
[dir=rtl] .app-sec h3{letter-spacing:0;font-family:var(--sans);font-size:13px}
.app-about p{font-size:16.5px;line-height:1.65;color:var(--ink);margin:0;max-width:820px}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.app-f{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#0b1018}
.app-f i{display:block;width:10px;height:10px;border-radius:50%;background:hsl(var(--hue) 72% 60%);box-shadow:0 0 10px hsl(var(--hue) 72% 60%);margin-bottom:10px}
.app-f b{display:block;font:600 15px var(--sans);margin-bottom:4px}
.app-f p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.app-built .rd-tech{margin-bottom:12px}
.app-role{font-size:14px;color:var(--muted);margin:0 0 8px}
.app-role b{color:var(--ink);font-weight:600;margin-inline-end:6px}
.app-built p.vibe{margin:0;padding-top:10px;border-top:1px dashed var(--line-strong);color:var(--muted);font-size:13px;display:flex;gap:8px}
.app-built p.vibe i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#3ddc97;box-shadow:0 0 8px #3ddc97}
body.portrait .rd.app .app-hero,body:not(.in-scene) .rd.app .app-hero{grid-template-columns:76px 1fr;gap:14px}
body.portrait .app-icon,body:not(.in-scene) .app-icon{width:76px;height:76px;border-radius:18px}
body.portrait .app-icon span,body:not(.in-scene) .app-icon span{font-size:28px}
body.portrait .app-h h2,body:not(.in-scene) .app-h h2{font-size:24px}
body.portrait .app-grid,body:not(.in-scene) .app-grid{grid-template-columns:1fr}
body.portrait .app-shots .g,body:not(.in-scene) .app-shots .g{width:86%}

/* pendant: I/O and LOG tabs */
.hmi .hmain{overflow:auto}
.hmi .hio .io .iohead{display:none}
.hmi .hio .io .mods{grid-template-columns:1fr 1fr;gap:8px}
.hmi .hio .io .mod header{padding:7px 10px 5px}
.hmi .hio .io .mod header b{font-size:12px}
.hmi .hio .io .mod header span.ltr{font-size:9px}
.hmi .hio .io li{padding:3px 10px;gap:6px}
.hmi .hio .io .ch{font-size:9px;width:30px}
.hmi .hio .io .nm{font-size:11.5px}
.hmi .hlog{display:flex;flex-direction:column;gap:5px}
.hmi .hlr{display:grid;grid-template-columns:96px 1fr;gap:2px 12px;align-items:baseline;padding:8px 10px;background:var(--h-panel);border:1px solid var(--h-line);border-inline-start:4px solid #9aa5b5;direction:ltr}
.hmi .hlt{font:600 11px var(--mono);color:var(--h-blue);letter-spacing:.04em}
.hmi .hlr b{font:600 12px var(--mono);color:var(--h-ink);letter-spacing:.03em}
.hmi .hlm{grid-column:2;font:500 12px var(--sans);color:var(--h-mute)}
.hmi.portrait .hio .io .mods{grid-template-columns:1fr}

/* pendant I/O list, in the pendant's own palette */
.hmi .hiol{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hmi .hiom{background:var(--h-panel);border:1px solid var(--h-line)}
.hmi .hiomh{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#dfe5ee;border-bottom:1px solid var(--h-line);font:600 10.5px var(--mono);color:var(--h-mute)}
.hmi .hiomh span{flex:1;font:600 12px var(--sans);color:var(--h-ink)}
.hmi .hiomh i{width:8px;height:8px;border-radius:50%;background:var(--h-green);box-shadow:0 0 5px var(--h-green)}
.hmi .hior{display:flex;gap:8px;align-items:center;padding:4px 10px;border-bottom:1px solid #e6eaf0;font:10.5px var(--mono)}
.hmi .hior:last-child{border-bottom:0}
.hmi .hioc{color:var(--h-mute);width:46px;flex:none}
.hmi .hion{flex:1;font:12px var(--sans);color:var(--h-ink)}
.hmi .hior i{width:7px;height:7px;border-radius:50%;background:#c7cfdb;flex:none}
.hmi .hior i.on{background:var(--h-green);box-shadow:0 0 5px var(--h-green)}
.hmi.portrait .hiol{grid-template-columns:1fr}
.app-story p{font-size:16px;line-height:1.65;color:var(--muted);margin:0;max-width:820px;border-inline-start:3px solid hsl(var(--hue) 72% 60%);padding-inline-start:14px}
.app-delivery{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 10px;max-width:820px}
.app-delivery b{color:var(--ink);font-weight:600;margin-inline-end:6px}

/* crawlable copy of every page: shown only without JavaScript */
.static{position:relative;z-index:60;max-width:860px;margin:0 auto;padding:28px 20px 60px;color:var(--ink);background:var(--bg)}
.static h1{font:600 32px/1.15 var(--sans);margin:0 0 12px}
.static h2{font:600 20px/1.2 var(--sans);margin:28px 0 8px}
.static p,.static li,.static dd{color:var(--muted);line-height:1.6}
.static .lead{color:var(--ink);font-size:18px}
.static dt{font-weight:600;color:var(--ink);margin-top:10px}
.static dd{margin:0}
.static figure{margin:14px 0}
.static img{max-width:100%;height:auto;border:1px solid var(--line)}
.static a{color:#8fb0ff}
.js .static{display:none}

/* phone: the timeline shows only the active station's name, the rest would overlap */
body.portrait .xp2 .stn span{display:none}
body.portrait .xp2 .stn.on span{display:block}