/* Port42 Nautilus design system. Extracted from index-nautilus.html (2026-09-26). Shared by the Nautilus page drafts. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --green:#00ff41; --green-dim:rgba(0,255,65,.14); --green-glow:rgba(0,255,65,.4);
  --teal:#00d4aa; --cyan:#00d4ff; --amber:#ffb000;
  --bg:#000; --panel:#0a0d0a; --line:rgba(0,255,65,.14); --line-soft:rgba(255,255,255,.07);
  --text:#c8c8c8; --dim:#7a7a7a; --bright:#fff;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --beige-1:#d4c5a9; --beige-2:#b8a88a; --beige-3:#a89878;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--green)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px 28px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:8px;color:var(--green);font-weight:700;text-decoration:none;letter-spacing:.04em;margin-right:auto}
.nav .brand img{width:22px;height:22px}
.nav a.l{color:var(--green);text-decoration:none;font-size:.85rem;opacity:.85}
.nav a.l:hover{opacity:1;color:#fff}
@media(max-width:820px){.nav{gap:16px;padding:12px 16px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a.l{white-space:nowrap;flex:none}.nav .brand{margin-right:6px;flex:none}}

/* section scaffolding */
section{padding:112px 0;position:relative}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--bright);line-height:1.15;letter-spacing:-.02em;margin-bottom:18px;font-weight:700}
h2 em{font-style:normal;color:var(--green)}
.lede{font-size:1.12rem;max-width:640px;color:var(--text)}
.lede + .lede{margin-top:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:36px}}

/* hero */
.hero{min-height:100vh;padding:120px 0 72px;display:flex;align-items:center;text-align:center;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,255,65,.10),transparent 70%)}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.06;letter-spacing:-.03em;color:var(--bright);font-weight:800;max-width:900px;margin:0 auto 22px}
.hero h1 span{color:var(--green)}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:700px;margin:0 auto 34px}
.prompt{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:clamp(.9rem,2vw,1.1rem);
  background:#050805;border:1px solid var(--line);border-radius:10px;padding:12px 18px;margin-bottom:36px;color:var(--bright);
  box-shadow:0 0 30px rgba(0,255,65,.08);max-width:100%;overflow:hidden;white-space:nowrap}
.prompt .caret{color:var(--green)}
.prompt .cursor{display:inline-block;width:.6em;height:1.1em;background:var(--green);animation:blink 1s steps(1) infinite;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;padding:14px 28px;border-radius:12px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--green);color:#000;box-shadow:0 0 22px var(--green-glow)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 42px var(--green-glow)}
.btn.ghost{color:var(--green);border:1px solid rgba(0,255,65,.4)}
.btn.ghost:hover{background:rgba(0,255,65,.08)}
.fine{margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.4)}

/* the retro frame */
.frame{position:relative;margin:64px auto 0;max-width:920px;border-radius:26px;padding:26px 26px 38px;
  background:linear-gradient(180deg,var(--beige-1) 0%,var(--beige-2) 45%,var(--beige-3) 100%);
  box-shadow:0 0 160px rgba(0,255,65,.18),0 0 60px rgba(0,255,65,.12),0 24px 70px rgba(0,0,0,.7),inset 0 2px 4px rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.2)}
.frame::before{content:'PORT42';display:block;text-align:center;font:700 11px var(--mono);letter-spacing:4px;color:#2b5a2b;margin-bottom:12px}
.frame .screen{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:1920/1197;box-shadow:inset 0 0 0 3px #1a1a1a}
.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame .tag{position:absolute;left:12px;bottom:12px;font:12px var(--mono);color:#fff;background:rgba(0,0,0,.6);border:1px solid var(--line);padding:4px 10px;border-radius:6px}
.frame .placeholder{position:absolute;right:12px;top:12px;font:11px var(--mono);color:var(--amber);background:rgba(0,0,0,.65);padding:3px 8px;border-radius:5px;border:1px solid rgba(255,176,0,.35)}
.frame .foot{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:10px}
.frame .foot i{width:34px;height:5px;border-radius:3px;background:rgba(0,0,0,.18)}

/* the mess -> one desktop */
.stage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-family:var(--mono);font-size:.82rem}
.toggle button{background:none;border:0;color:var(--dim);padding:9px 16px;cursor:pointer;font:inherit}
.toggle button.on{background:var(--green-dim);color:var(--green)}
.stage{position:relative;height:430px;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#0d140d,#030503 70%)}
.meter{text-align:right;margin-top:12px;font-family:var(--mono);font-size:.85rem;color:var(--amber);transition:color .6s}
.meter b{font-size:1.5rem;color:inherit}
.meter.tidy{color:var(--green)}
.win{position:absolute;border-radius:9px;background:#101310;border:1px solid rgba(255,255,255,.12);overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.6);transition:all .9s cubic-bezier(.2,.8,.2,1);
  left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh);transform:rotate(var(--mr));z-index:var(--mz)}
.stage.tidy .win{left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);transform:none;z-index:1;border-color:var(--line)}
.win .bar{height:24px;display:flex;align-items:center;gap:6px;padding:0 9px;background:rgba(255,255,255,.05);font:11px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden}
.win .bar i{width:8px;height:8px;border-radius:50%;background:#444;flex:none}
.stage:not(.tidy) .win .bar i:nth-child(1){background:#ff5f57}.stage:not(.tidy) .win .bar i:nth-child(2){background:#febc2e}.stage:not(.tidy) .win .bar i:nth-child(3){background:#28c840}
.stage.tidy .win .bar i{display:none}
.win .bar .port{display:none;color:var(--green)}
.stage.tidy .win .bar .port{display:inline}
.stage.tidy .win .bar .app{display:none}
.win .body{padding:9px 10px;font:11px/1.55 var(--mono);color:#9a9a9a;height:calc(100% - 24px);overflow:hidden}
.win .body .g{color:var(--green)}.win .body .c{color:var(--cyan)}.win .body .a{color:var(--amber)}
.win.shader .body{padding:0;background:radial-gradient(circle at 50% 55%,#0ff 0%,#0a6 12%,#032 35%,#000 70%);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{filter:hue-rotate(40deg) brightness(1.2)}}
.win.parked{opacity:1}
.stage.tidy .win.parked{opacity:.55}
.win.clip{background:#2a2a18}
.stage.tidy .win.clip{opacity:0;transform:scale(.6)}
.rail{position:absolute;right:0;top:0;bottom:0;width:6%;border-left:1px dashed rgba(0,255,65,.18);opacity:0;transition:opacity .6s}
.stage.tidy .rail{opacity:1}
@media(max-width:700px){.stage{height:520px}}

/* UX cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:880px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--line-soft);border-radius:14px;padding:22px;background:var(--panel);transition:border-color .2s}
.card:hover{border-color:var(--line)}
.card .glyph{height:74px;margin-bottom:14px;border-radius:9px;background:#050705;border:1px solid var(--line-soft);position:relative;overflow:hidden}
.card h3{color:var(--bright);font-size:1.05rem;margin-bottom:6px}
.card p{font-size:.93rem;color:#a8a8a8}
.g-zoom span{position:absolute;border:1px solid var(--green);border-radius:4px;left:50%;top:50%;transform:translate(-50%,-50%)}
.g-zoom span:nth-child(1){width:84%;height:80%;opacity:.25}.g-zoom span:nth-child(2){width:56%;height:56%;opacity:.5}.g-zoom span:nth-child(3){width:26%;height:30%;background:var(--green-dim);animation:zoom 3s ease-in-out infinite}
@keyframes zoom{50%{width:80%;height:78%}}
.g-peek span{position:absolute;left:-30%;top:18%;width:38%;height:64%;border:1px solid var(--green);border-radius:5px;background:var(--green-dim);animation:peek 3.4s ease-in-out infinite}
@keyframes peek{0%,20%{left:-30%}45%,75%{left:6%}100%{left:-30%}}
.g-focus span{position:absolute;left:22%;top:22%;width:56%;height:56%;border:1px solid var(--green);border-radius:5px;display:flex;align-items:center;padding-left:10px;font:11px var(--mono);color:var(--green)}
.g-focus span::after{content:'';width:6px;height:13px;background:var(--green);margin-left:3px;animation:blink 1s steps(1) infinite}
.g-park span{position:absolute;right:8px;width:18px;height:12px;border:1px solid var(--green);border-radius:3px;opacity:.7}
.g-park span:nth-child(1){top:10px}.g-park span:nth-child(2){top:28px}.g-park span:nth-child(3){top:46px;animation:park 3s ease-in-out infinite}
.g-park b{position:absolute;right:34px;top:8px;bottom:8px;border-left:1px dashed rgba(0,255,65,.3)}
@keyframes park{0%,30%{right:60%;width:40px;height:34px;top:18px}60%,100%{right:8px;width:18px;height:12px;top:46px}}
.g-stay span{position:absolute;border:1px solid rgba(0,255,65,.5);border-radius:4px}
.g-stay span:nth-child(1){left:8%;top:14%;width:30%;height:40%}.g-stay span:nth-child(2){left:42%;top:14%;width:24%;height:70%}.g-stay span:nth-child(3){left:70%;top:52%;width:22%;height:32%;border-color:var(--green);background:var(--green-dim);animation:appear 3s ease-in-out infinite}
@keyframes appear{0%,20%{opacity:0}40%,100%{opacity:1}}
.g-hist{display:flex;align-items:center;justify-content:center;gap:10px;font:12px var(--mono)}
.g-hist span{padding:4px 9px;border:1px solid var(--line-soft);border-radius:5px;color:var(--dim)}
.g-hist span.now{border-color:var(--green);color:var(--green)}

/* chat excerpt */
.chat{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;font-size:.93rem}
.chat .head{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line-soft);font:12px var(--mono);color:var(--dim)}
.chat .head b{color:var(--green);font-weight:400}
.msg{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03)}
.msg .who{font:12px var(--mono);margin-bottom:3px}
.msg .who.lead{color:var(--green)}.msg .who.codex{color:var(--cyan)}.msg .who.claude{color:var(--teal)}.msg .who.you{color:var(--amber)}
.msg p{color:#ddd}
.msg .m{color:var(--green)}
.msg.write{font:12px var(--mono);color:var(--dim);background:rgba(255,176,0,.05)}
.note{font-size:.8rem;color:var(--dim);margin-top:10px}

/* pipe */
.pipe{display:grid;gap:26px}
.pipe .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pipe .label{font:12px var(--mono);color:var(--dim);width:100%;letter-spacing:.1em;text-transform:uppercase}
.pipe .unix{font:clamp(1rem,2.4vw,1.35rem) var(--mono);color:var(--bright);background:#050705;border:1px solid var(--line-soft);border-radius:10px;padding:14px 18px}
.pipe .unix .p{color:var(--green);padding:0 6px}
.nodes{display:flex;align-items:center;gap:0;flex-wrap:nowrap;width:100%}
.node{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;background:#050705;padding:12px;text-align:center}
.node .t{font:11px var(--mono);color:var(--green);margin-bottom:6px}
.node .v{font:600 1.1rem var(--mono);color:var(--bright)}
.node.render .v{height:26px;display:flex;align-items:flex-end;gap:3px;justify-content:center}
.node.render .v i{width:6px;background:var(--green);border-radius:2px}
.wire{flex:0 0 52px;height:2px;background:rgba(0,255,65,.25);position:relative;overflow:visible}
.wire::after{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:flow 1.2s linear infinite}
@keyframes flow{to{left:calc(100% - 8px)}}

/* door diagram */
.door{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
@media(max-width:720px){.door{grid-template-columns:1fr}}
.callers{display:grid;gap:8px}
.caller{font:13px var(--mono);border:1px solid var(--line-soft);border-radius:8px;padding:9px 12px;color:#ccc;display:flex;justify-content:space-between;gap:10px}
.caller span{color:var(--dim)}
.gate{border:1px solid var(--green);border-radius:12px;padding:20px 18px;text-align:center;background:var(--green-dim);min-width:190px}
.gate b{display:block;color:var(--green);font:700 .95rem var(--mono);letter-spacing:.12em;margin-bottom:6px}
.gate small{font:12px var(--mono);color:#bfe8c9;display:block;line-height:1.7}
.target{border:1px solid var(--line);border-radius:12px;padding:18px;background:#050705}
.target .t{font:12px var(--mono);color:var(--green);margin-bottom:8px}
.target ul{list-style:none;font-size:.9rem;color:#bbb;display:grid;gap:6px}
.target li::before{content:'▸ ';color:var(--green)}

/* share */
.invite{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px}
.invite .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chip{font:12px var(--mono);border:1px solid var(--line);color:var(--green);padding:7px 12px;border-radius:8px;background:#050705}
.invite .link{font:13px var(--mono);color:#ddd;background:#050705;border:1px dashed rgba(0,255,65,.3);padding:10px 12px;border-radius:8px}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lane{border:1px solid var(--line-soft);border-radius:10px;padding:12px;font-size:.88rem}
.lane b{display:block;color:var(--bright);margin-bottom:2px}

/* swap */
.swap{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px}
.seats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.seat{border:1px solid var(--line-soft);border-radius:10px;padding:12px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;user-select:none}
.seat:hover{border-color:var(--green)}
.seat .role{font:11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.seat .cli{font:600 .98rem var(--mono);margin-top:4px}
.seat .cli.claude{color:var(--teal)}.seat .cli.codex{color:var(--cyan)}
.seat.flash{background:var(--green-dim)}
.swap .hint{font:12px var(--mono);color:var(--dim)}
.swap .port-line{font:13px var(--mono);color:var(--green);margin-top:10px}

/* yours */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:720px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid var(--green);padding-top:14px}
.fact b{color:var(--bright);display:block;margin-bottom:4px}
.fact p{font-size:.93rem;color:#a8a8a8}

/* close */
.close{text-align:center;padding:140px 0 120px;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(0,212,255,.10),transparent 70%)}
.close .lore{font-size:clamp(1.15rem,2.6vw,1.5rem);color:#ddd;max-width:640px;margin:0 auto 10px;line-height:1.5}
.close .ocean{font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--cyan);font-weight:700;margin-bottom:44px}
.close .basic{font:clamp(1rem,2.2vw,1.25rem) var(--mono);color:var(--green);margin-bottom:26px}
footer{border-top:1px solid var(--line-soft);padding:36px 0 50px;font-size:.85rem;color:var(--dim)}
footer .wrap{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--green)}

/* nautilus v4 additions */
.tidy-only{display:none}
.stage.tidy .tidy-only{display:inline}
.stage.tidy .mess-only{display:none}
.win .tabs{display:flex;gap:2px;padding:3px 6px;background:rgba(255,255,255,.04)}
.win .tabs b{flex:1;height:8px;border-radius:2px 2px 0 0;background:rgba(255,255,255,.12)}
.win .tabs b.on{background:rgba(0,255,65,.4)}
.win .err{margin:10px;display:inline-block;font:11px var(--mono);color:#ff6b6b;background:rgba(0,0,0,.7);padding:4px 7px;border-radius:4px;border:1px solid rgba(255,80,80,.4)}
.win.notes{background:#1c1a10}
.stage.tidy .win.notes{background:#101310}
.clipfly{position:absolute;z-index:30;font:700 12px var(--mono);color:#000;background:var(--amber);padding:4px 8px;border-radius:6px;box-shadow:0 0 18px rgba(255,176,0,.6);
  left:46%;top:22%;animation:fly 4.8s ease-in-out infinite;pointer-events:none}
@keyframes fly{0%{left:46%;top:22%}22%{left:48%;top:72%}28%{left:48%;top:72%}50%{left:64%;top:56%}56%{left:64%;top:56%}78%{left:10%;top:28%}84%{left:10%;top:28%}100%{left:46%;top:22%}}
.stage.tidy .clipfly{opacity:0;animation:none}
.meter.tidy{color:var(--green)}
.caller.seat{cursor:pointer}
.caller.seat:hover,.caller.you:hover{border-color:var(--green)}
.caller.you{cursor:pointer}
.caller em{font-style:normal;color:var(--teal)}
.caller .who{color:#ccc}
.caller em.cx{color:var(--cyan)}
.caller.active{border-color:var(--green);background:var(--green-dim)}
.caller.flash{background:rgba(0,212,255,.12)}
.target .driver{font:600 1rem var(--mono);color:var(--bright);margin:8px 0 4px}
.target .dlog{font:12px var(--mono);color:var(--green);margin-bottom:14px}
.wheel{background:none;border:1px solid var(--amber);color:var(--amber);font:12px var(--mono);padding:7px 12px;border-radius:8px;cursor:pointer}
.wheel:hover{background:rgba(255,176,0,.08)}
.hood{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
@media(max-width:880px){.hood{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hood{grid-template-columns:1fr}}
.hood div{border-top:1px solid var(--green);padding-top:12px;font-size:.92rem;color:#a8a8a8}
.hood b{display:block;color:var(--bright);margin-bottom:4px}
.close-prompt{margin:10px 0 34px}
.basic-big{font:700 clamp(2rem,5vw,3.2rem) var(--sans);letter-spacing:-.02em;color:var(--green);text-shadow:0 0 30px rgba(0,255,65,.35);margin-bottom:8px}
.close .basic{margin:30px 0 0}

.live{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.live-head{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font:12px var(--mono);color:var(--green)}
.live-head .drv{color:var(--bright);transition:color .3s}
.live-head .drv.you{color:var(--amber)}
.orbbox{height:170px;display:flex;align-items:center;justify-content:center;background:#020402}
.orb{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#7ff 0%,#0c9 30%,#043 60%,transparent 72%);transition:transform .5s,filter .5s}
.slider{display:flex;align-items:center;gap:12px;padding:12px 14px;font:12px var(--mono);color:var(--dim)}
.slider input{flex:1;accent-color:var(--amber)}
.slider b{color:var(--bright);font-weight:400;width:36px;text-align:right}
.log{height:128px;overflow:hidden;padding:4px 14px 8px;font:12px/1.75 var(--mono);color:#9a9a9a;border-top:1px solid var(--line-soft)}
.log .l-you{color:var(--amber)}.log .l-ref{color:#ff8a65}.log .l-sys{color:var(--green)}
.team{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line-soft)}
.team button{background:#050705;border:1px solid var(--line-soft);color:#ccc;font:12px var(--mono);padding:6px 9px;border-radius:7px;cursor:pointer}
.team button:hover{border-color:var(--green)}
.team button em{font-style:normal;color:var(--teal)}.team button em.cx{color:var(--cyan)}

.both{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:40px 0 28px}
@media(max-width:720px){.both{grid-template-columns:1fr}}
.kind{border:1px solid var(--line-soft);border-radius:12px;padding:14px;background:#050705}
.kind.port{border-color:var(--green);box-shadow:0 0 30px rgba(0,255,65,.12)}
.k-title{font:12px var(--mono);color:var(--dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em}
.kind.port .k-title{color:var(--green)}
.k-face{height:84px;border-radius:8px;background:#000;border:1px solid var(--line-soft);margin-bottom:10px;display:flex;align-items:center;justify-content:center}
.k-face.mono{justify-content:flex-start;align-items:flex-start;padding:10px;font:12px/1.6 var(--mono);color:#9a9a9a}
.k-face.app{gap:8px}.k-face.app i{width:26%;height:56%;border-radius:6px;background:linear-gradient(135deg,#2a3a4a,#1a2530)}
.mini-orb{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#7ff 0%,#0c9 30%,#043 60%,transparent 72%);animation:breathe 4s ease-in-out infinite}
.k-row{display:flex;gap:8px;font:12px var(--mono)}
.k-row span{padding:3px 8px;border-radius:5px}
.k-row .yes{color:var(--green);background:var(--green-dim)}
.k-row .no{color:#666;text-decoration:line-through;background:rgba(255,255,255,.03)}
.faces{display:flex;align-items:stretch;gap:0}
@media(max-width:720px){.faces{flex-direction:column}.fwire{width:2px!important;height:28px;margin:0 auto}}
.fport{flex:1;border:1px solid var(--line);border-radius:10px;background:#050705;overflow:hidden;min-width:0}
.fbar{font:11px var(--mono);color:var(--green);padding:7px 10px;background:rgba(255,255,255,.04)}
.fbody{height:120px;position:relative;padding:10px}
.fbody svg{width:100%;height:70px;display:block}
.fval{font:600 1.3rem var(--mono);color:var(--bright);margin-top:4px}
.fbody.gauge{display:flex;align-items:center;justify-content:center}
.dial{--v:0;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--v)*1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;transition:--v .6s}
.dial span{width:74px;height:74px;border-radius:50%;background:#050705;display:flex;align-items:center;justify-content:center;font:600 1.2rem var(--mono);color:var(--bright)}
.fwire{flex:0 0 36px;align-self:center;height:2px;background:rgba(0,255,65,.25);position:relative}
.fwire::after{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:flow 1.2s linear infinite}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* share: one invite, the same port live on both machines */
.share2{display:grid;grid-template-columns:1fr 190px 1fr;gap:0;align-items:center;margin-top:34px}
@media(max-width:760px){.share2{grid-template-columns:1fr}.swire{height:70px!important;width:2px!important;justify-self:center}.swire small{left:14px!important;top:22px!important;width:160px;text-align:left!important}}
.desk{border:1px solid var(--line-soft);border-radius:14px;padding:14px;background:#030503}
.dlab{font:12px var(--mono);color:var(--dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.12em}
.sport{border:1px solid var(--green);border-radius:10px;background:#050705;overflow:hidden;box-shadow:0 0 24px rgba(0,255,65,.10)}
.sbar{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;font:11px var(--mono);color:var(--green);background:rgba(255,255,255,.04)}
.sbar .who{color:var(--bright)}
.sface{height:110px;display:flex;align-items:center;justify-content:center;background:#020402}
.sorb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#7ff 0%,#0c9 30%,#043 60%,transparent 72%);transition:transform .45s,filter .45s}
.sslider{width:calc(100% - 20px);margin:10px;accent-color:var(--amber);height:4px;background:rgba(255,255,255,.15);border-radius:3px}
.dnote{font:12px var(--mono);color:var(--dim);margin-top:10px}
.swire{position:relative;height:2px;background:rgba(0,255,65,.3);align-self:center}
.swire small{position:absolute;left:0;right:0;top:12px;text-align:center;font:11px var(--mono);color:var(--green);line-height:1.5}
.swire .pulse{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px var(--amber);opacity:0}
.swire .pulse.go-r{animation:gor .6s ease-in-out}
.swire .pulse.go-l{animation:gol .6s ease-in-out}
@keyframes gor{0%{left:0;opacity:1}100%{left:calc(100% - 10px);opacity:1}}
@keyframes gol{0%{left:calc(100% - 10px);opacity:1}100%{left:0;opacity:1}}
@media(max-width:760px){@keyframes gor{0%{top:0;left:-4px;opacity:1}100%{top:60px;left:-4px;opacity:1}}@keyframes gol{0%{top:60px;left:-4px;opacity:1}100%{top:0;left:-4px;opacity:1}}}
.share2-web{display:flex;align-items:center;gap:12px;margin-top:14px;border:1px dashed rgba(0,212,255,.35);border-radius:12px;padding:12px 14px;font-size:.92rem;color:#bbb}
.share2-web .bchip{font:12px var(--mono);color:var(--cyan);border:1px solid rgba(0,212,255,.4);border-radius:6px;padding:3px 8px;white-space:nowrap}

/* section navigator (nautilus-subnav.js) */
.subnav{position:sticky;top:52px;z-index:40;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sn-row{display:flex;align-items:center;gap:14px;height:46px}
.sn-page{font:12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.sn-cur{flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--bright);font:600 .95rem var(--sans);cursor:pointer;display:flex;align-items:center;gap:8px;overflow:hidden}
.sn-cur-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-caret{color:var(--green);transition:transform .2s}
.subnav.open .sn-caret{transform:rotate(180deg)}
.sn-count{font:12px var(--mono);color:var(--green);white-space:nowrap}
.sn-list{display:none;border-top:1px solid var(--line-soft);padding:8px 0 14px;background:#000;box-shadow:0 18px 30px rgba(0,0,0,.7)}
.subnav.open .sn-list{display:block}
.sn-list .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 18px}
.sn-list a{display:flex;gap:12px;padding:8px 6px;border-radius:7px;color:#bbb;text-decoration:none;font-size:.92rem}
.sn-list a span{font:12px var(--mono);color:var(--dim);padding-top:2px}
.sn-list a:hover{background:var(--green-dim);color:#fff}
.sn-list a.on{color:var(--green)}
.sn-progress{height:2px;background:transparent}
.sn-progress i{display:block;height:2px;width:0;background:var(--green);box-shadow:0 0 8px var(--green)}
section[id],h3[id]{scroll-margin-top:110px}
@media(max-width:820px){.subnav{top:48px}.sn-page{display:none}}

/* sharing disclaimer */
.disclaim{margin-top:16px;border:1px solid rgba(255,176,0,.35);background:rgba(255,176,0,.05);color:#cfcfcf;border-radius:10px;padding:11px 14px;font-size:.88rem;line-height:1.55;max-width:900px}
.disclaim b{color:#ffb000}