/* site.css — Shadoukita · Scarlet Command Terminal (16:9 sci-fi HUD) */

:root{
  --bg:#06070b; --bg2:#0a0c12;
  --cr:#ff2740; --cr-soft:#ff6b78; --cr-deep:#7a0c18;
  --line:rgba(255,39,64,.26);
  --glass:rgba(16,14,20,.55);
  --tx:#eef1f6; --mut:#7f8794; --mut2:#cbb9bc;
  --disp:'Chakra Petch',sans-serif;
  --num:'Rajdhani',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --body:'Sora',sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; min-height:100%; color:var(--tx);
  font-family:var(--body); -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden;
  background:
    radial-gradient(120% 70% at 28% 0%, rgba(255,39,64,.16), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(122,12,24,.20), transparent 60%),
    linear-gradient(180deg,#080910,#06070b 60%);
  background-attachment:fixed; }

/* user-fillable slot themed for dark crimson */
image-slot::part(empty){ color:rgba(255,200,205,.8); font-family:var(--mono); }
image-slot::part(ring){ border:1.5px dashed rgba(255,39,64,.5)!important; }
image-slot::part(frame){ background:rgba(255,39,64,.05); }

/* ── SCROLLING CONTENT OVER FIXED CHROME ───────────────────────────── */
.scroll{ position:relative; z-index:6; max-width:1340px; margin:0 auto;
  padding:clamp(60px,8vh,80px) clamp(16px,2vw,40px) clamp(54px,7vh,68px); }
.hero{ position:relative; min-height:calc(100vh - clamp(116px,16vh,150px));
  display:flex; align-items:center; }
.hero .main{ width:100%; }
.scrollcue{ position:absolute; left:50%; bottom:clamp(4px,1.5vh,16px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.32em; color:var(--mut); text-transform:uppercase;
  animation:bob 2.2s ease-in-out infinite; }
.scrollcue:hover{ color:var(--cr-soft); }
.scrollcue .chev{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); }
@keyframes bob{ 50%{ transform:translate(-50%,7px); } }

/* background layers */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-stars{ background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 58% 18%, rgba(255,160,168,.5), transparent),
    radial-gradient(1px 1px at 76% 48%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 46% 86%, rgba(255,160,168,.4), transparent);
  opacity:.7; animation:drift 24s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-14px,-10px,0); } }

.bg-floor{ left:-25%; right:-25%; bottom:-8%; height:52%;
  background-image:
    linear-gradient(rgba(255,39,64,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,39,64,.16) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(440px) rotateX(66deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 2%, transparent 78%);
          mask-image:linear-gradient(to top,#000 2%, transparent 78%);
  opacity:.52; animation:floor 9s linear infinite; }
@keyframes floor{ from{ background-position:0 0; } to{ background-position:0 64px; } }

.bg-reticle{ top:46%; left:27%; width:min(64vh,640px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; border:1px dashed rgba(255,39,64,.13);
  box-shadow:inset 0 0 60px rgba(255,39,64,.04); animation:spin 80s linear infinite; }
.bg-reticle::before{ content:''; position:absolute; inset:13%; border-radius:50%;
  border:1px solid rgba(255,39,64,.09); }
.bg-reticle::after{ content:''; position:absolute; inset:34%; border-radius:50%;
  border:1px dashed rgba(255,39,64,.16); animation:spin 50s linear infinite reverse; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.bg-scan{ background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen; }
.bg-sweep{ background:linear-gradient(180deg, transparent, rgba(255,39,64,.05), transparent);
  height:30%; animation:vscan 7s linear infinite; }
@keyframes vscan{ 0%{ transform:translateY(-40vh); } 100%{ transform:translateY(120vh); } }
.vignette{ box-shadow:inset 0 0 200px 40px rgba(0,0,0,.7); }

/* frame corners */
.framecorner{ position:fixed; width:26px; height:26px; border:2px solid var(--cr); z-index:21;
  opacity:.55; filter:drop-shadow(0 0 6px rgba(255,39,64,.6)); }
.fc-tl{ top:8px; left:8px; border-right:0; border-bottom:0; }
.fc-tr{ top:8px; right:8px; border-left:0; border-bottom:0; }
.fc-bl{ bottom:8px; left:8px; border-right:0; border-top:0; }
.fc-br{ bottom:8px; right:8px; border-left:0; border-top:0; }

/* ── TOP HUD BAR ───────────────────────────────────────────────────── */
.hud-top{ position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(12px,1.6vh,18px) clamp(16px,2vw,40px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,7,11,.95), rgba(6,7,11,.55) 70%, transparent);
  backdrop-filter:blur(8px); }
.brand{ display:flex; align-items:baseline; gap:10px; font-family:var(--disp); font-weight:700;
  letter-spacing:.12em; font-size:clamp(15px,1.5vw,19px); }
.brand .dia{ color:var(--cr); filter:drop-shadow(0 0 8px var(--cr)); animation:beat 3s ease-in-out infinite; }
@keyframes beat{ 50%{ filter:drop-shadow(0 0 14px var(--cr)); } }
.brand .sys{ font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.22em; color:var(--mut); }
.readout{ display:flex; align-items:center; gap:clamp(10px,1.4vw,22px); font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:var(--mut); }
.readout .stat-on{ color:#7fdc9a; }
.readout .stat-on::before{ content:'●'; margin-right:6px; color:#39d36a; filter:drop-shadow(0 0 6px #39d36a);
  animation:beat 1.8s ease-in-out infinite; }
.readout #clock{ color:var(--cr-soft); font-variant-numeric:tabular-nums; }

/* ── MAIN GRID ─────────────────────────────────────────────────────── */
.main{ position:relative; display:grid; grid-template-columns:minmax(260px,330px) 1fr;
  gap:clamp(20px,2.6vw,46px); align-items:start; width:100%; }

/* portrait panel */
.portrait{ position:relative; display:flex; flex-direction:column; gap:clamp(9px,1.4vh,14px); min-height:0; }
.pframe{ position:relative; width:100%; max-width:330px; height:min(330px,40vh); margin:0 auto;
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; background:linear-gradient(160deg, rgba(255,39,64,.06), rgba(8,8,12,.5)); }
.pframe image-slot{ position:absolute; inset:0; width:100%; height:100%; }
/* live Discord avatar overlay \u2014 sits above the slot, below the veil; GIF-capable */
.live-av{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; -webkit-user-drag:none; user-select:none; }
.live-av.is-live{ display:block; }
.dc-av .live-av-circle{ width:64px; height:64px; inset:0; border-radius:50%; z-index:1; }
.pframe .pveil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,7,11,.1) 40%, rgba(6,7,11,.85) 100%),
             linear-gradient(90deg, rgba(255,39,64,.08), transparent 40%); }
.pframe .pscan{ position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg, transparent, var(--cr), transparent);
  box-shadow:0 0 14px var(--cr); opacity:.8; animation:pscan 4.5s ease-in-out infinite; }
@keyframes pscan{ 0%,100%{ top:2%; } 50%{ top:98%; } }
.pframe .pcorner{ position:absolute; width:18px; height:18px; border:2px solid var(--cr); opacity:.8; z-index:3; }
.pframe .pc-tl{ top:7px; left:7px; border-right:0; border-bottom:0; }
.pframe .pc-tr{ top:7px; right:7px; border-left:0; border-bottom:0; }
.pframe .pc-bl{ bottom:7px; left:7px; border-right:0; border-top:0; }
.pframe .pc-br{ bottom:7px; right:7px; border-left:0; border-top:0; }
.pframe .ptag{ position:absolute; left:10px; top:10px; z-index:3; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; color:#ffd2d6; background:rgba(6,7,11,.5); border:1px solid var(--line);
  padding:4px 8px; border-radius:3px; }
.pframe .pid{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; }
.pframe .pid h2{ font-family:var(--disp); font-weight:700; font-size:clamp(20px,2vw,26px); margin:0; letter-spacing:.04em; }
.pframe .pid .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--cr-soft); margin-top:4px; }
.ptele{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; color:var(--mut); }

/* ── HERO live presence (mirrors the real Discord activity) ── */
.hero-live{ position:relative; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(6px);
  padding:13px 15px; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px)); }
.hero-live::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cr);
  box-shadow:0 0 12px var(--cr); }
.hl-head{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cr-soft); margin-bottom:11px; }
.hl-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#39d36a; box-shadow:0 0 7px #39d36a;
  animation:beat 2.2s ease-in-out infinite; }
.hl-dot.is-online{ background:#39d36a; box-shadow:0 0 7px #39d36a; }
.hl-dot.is-idle{ background:#f0b232; box-shadow:0 0 7px #f0b232; }
.hl-dot.is-dnd{ background:#f23f43; box-shadow:0 0 7px #f23f43; }
.hl-dot.is-offline{ background:#80848e; box-shadow:none; animation:none; }
.hl-body{ display:flex; align-items:center; gap:12px; }
.hl-ico{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; font-family:var(--num);
  font-weight:700; font-size:15px; color:#ffd9dc; background:linear-gradient(160deg,#2a1213,#160c0d);
  border:1px solid rgba(255,39,64,.4); border-radius:9px; box-shadow:inset 0 0 12px rgba(255,39,64,.25);
  background-size:cover; background-position:center; overflow:hidden; }
.hl-ico.has-img{ color:transparent; box-shadow:none; }
.hl-txt{ min-width:0; flex:1; }
.hl-t{ font-family:var(--disp); font-weight:700; font-size:15px; color:#fff; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-s{ font-size:11.5px; color:var(--mut2); margin-top:3px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-time{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--cr-soft); margin-top:5px;
  font-variant-numeric:tabular-nums; }
.hl-time:empty{ display:none; }
/* idle look: calmer, the left bar + icon cool down */
.hero-live.is-idle-state::before{ background:#80848e; box-shadow:none; }
.hero-live.is-idle-state .hl-head{ color:var(--mut); }
.hero-live.is-idle-state .hl-ico{ color:#aeb2bd; background:linear-gradient(160deg,#15161c,#0d0e13);
  border-color:rgba(255,255,255,.08); box-shadow:none; font-size:18px; }
.hero-live.is-idle-state .hl-t{ color:#cdd0d8; }
.ptele .row{ display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px dotted rgba(255,39,64,.16); }
.ptele .row b{ color:var(--mut2); font-weight:500; }

/* content column */
.content{ display:flex; flex-direction:column; min-height:0; align-items:center; text-align:center; }
.content .about{ margin-left:auto; margin-right:auto; }
.content .slabel{ width:100%; }
.content .links, .content .friends{ width:100%; }
.content .friends{ justify-content:center; }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--cr-soft);
  text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.kicker::before{ content:''; width:26px; height:1px; background:var(--cr); box-shadow:0 0 8px var(--cr); }
h1.title{ font-family:var(--disp); font-weight:700; font-size:clamp(38px,5.4vw,76px); line-height:.92;
  margin:8px 0 0; letter-spacing:.01em; text-transform:uppercase; text-shadow:0 0 30px rgba(255,39,64,.35);
  animation:flick 6s steps(1) 1s infinite; }
h1.title span{ color:var(--cr); }
@keyframes flick{ 0%,97%,100%{ opacity:1; } 97.5%{ opacity:.6; } 98.5%{ opacity:1; } 99%{ opacity:.75; } }
.role{ font-family:var(--mono); font-size:clamp(10px,1vw,12px); letter-spacing:.3em; color:var(--mut);
  margin-top:10px; text-transform:uppercase; }
.about{ font-size:clamp(12.5px,1.05vw,14.5px); line-height:1.62; color:var(--mut2); margin:14px 0 0;
  max-width:62ch; text-wrap:pretty; }

/* gauges (left column, vertical compact rows) */
.gauges{ display:flex; flex-direction:column; gap:clamp(7px,1vh,10px); }
.gauge{ position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 14px 11px; border:1px solid var(--line); background:var(--glass); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,11px 100%,0 calc(100% - 11px)); }
.gauge .g-k{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.gauge .g-v{ font-family:var(--num); font-weight:700; font-size:clamp(16px,1.5vw,20px); line-height:1; color:#fff; white-space:nowrap; }
.gauge .g-bar{ position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cr-deep),var(--cr)); box-shadow:0 0 8px var(--cr);
  animation:fill 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fill{ to{ width:var(--w,70%); } }

/* section label */
.slabel{ display:flex; align-items:center; gap:12px; margin:clamp(16px,2.2vh,26px) 0 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--mut); text-transform:uppercase; }
.kicker{ justify-content:center; }
.slabel .ix{ color:var(--cr-soft); }
.slabel .ln{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

/* link tiles */
.links{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(9px,1vw,13px); }
.tile{ position:relative; display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--tx);
  padding:12px 13px; background:var(--glass); border:1px solid var(--line); overflow:hidden;
  backdrop-filter:blur(6px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, border-color .2s; }
.tile::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cr);
  box-shadow:0 0 10px var(--cr); opacity:.6; transition:.2s; }
.tile .sweep{ position:absolute; top:0; bottom:0; width:40%; left:-60%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); transition:left .5s; }
.tile:hover{ transform:translateY(-3px); background:rgba(40,12,16,.6); border-color:rgba(255,39,64,.7);
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,39,64,.32); }
.tile:hover::before{ width:4px; opacity:1; }
.tile:hover .sweep{ left:130%; }
.tile .mono{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:15px; color:#ffd9dc; background:rgba(255,39,64,.1);
  border:1px solid rgba(255,39,64,.4); clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px)); }
.tile:hover .mono{ background:rgba(255,39,64,.26); color:#fff; }
.tile .t-txt{ flex:1 1 auto; min-width:0; line-height:1.15; }
.tile .t-nm{ display:block; font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .t-hd{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--mut); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .arr{ flex:0 0 auto; margin-left:8px; color:var(--mut); font-family:var(--mono); font-size:13px; transition:.2s; }
.tile:hover .arr{ color:var(--cr); transform:translateX(2px); }
.tile .live{ position:absolute; top:8px; right:13px; font-family:var(--mono); font-size:8px; letter-spacing:.1em;
  color:#fff; background:var(--cr); padding:2px 5px; box-shadow:0 0 12px rgba(255,39,64,.8);
  animation:blink 1.5s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.4; } }

/* friends */
.friends{ display:flex; flex-wrap:wrap; gap:9px; }
.friend{ text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mut2);
  padding:8px 13px; background:var(--glass); border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); transition:.2s; }
.friend:hover{ color:#fff; border-color:var(--cr); box-shadow:0 0 16px rgba(255,39,64,.35); transform:translateY(-2px); }
.friend b{ color:var(--cr); }

/* ── BOTTOM HUD BAR ────────────────────────────────────────────────── */
.hud-bot{ position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(9px,1.2vh,14px) clamp(16px,2vw,40px); border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(6,7,11,.95), rgba(6,7,11,.5) 70%, transparent);
  backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.hud-bot .seg{ display:flex; align-items:center; gap:8px; }
.hud-bot .dot{ width:6px; height:6px; background:var(--cr); border-radius:50%; box-shadow:0 0 8px var(--cr); }

/* entrance */
.rise{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.fade{ opacity:0; animation:fade .9s ease forwards; }
@keyframes fade{ to{ opacity:1; } }

/* scroll-reveal for below-the-fold sections */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ── BELOW-THE-FOLD SECTIONS ───────────────────────────────────────── */
.sec{ position:relative; padding:clamp(40px,7vh,84px) 0 0; }
.sec-lead{ font-size:clamp(13px,1.05vw,15px); line-height:1.6; color:var(--mut2); max-width:64ch;
  margin:0 auto clamp(18px,2.4vh,28px); text-align:center; text-wrap:pretty; }

/* CURRENTLY status cards */
.now-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px); }
.now-card{ position:relative; padding:clamp(16px,1.8vw,22px); border:1px solid var(--line);
  background:var(--glass); overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s;
  clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px)); }
.now-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cr);
  box-shadow:0 0 10px var(--cr); opacity:.6; }
.now-card:hover{ transform:translateY(-3px); border-color:rgba(255,39,64,.6);
  box-shadow:0 12px 28px rgba(0,0,0,.45), 0 0 22px rgba(255,39,64,.22); }
.now-head{ display:flex; align-items:center; justify-content:space-between; }
.now-k{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--cr-soft); text-transform:uppercase; }
.now-pulse{ width:8px; height:8px; border-radius:50%; background:#39d36a; box-shadow:0 0 8px #39d36a;
  animation:beat 1.8s ease-in-out infinite; }
.now-pulse.idle{ background:var(--mut); box-shadow:none; animation:none; }
.now-v{ font-family:var(--disp); font-weight:700; font-size:clamp(18px,1.7vw,22px); color:#fff; margin-top:14px;
  line-height:1.1; }
.now-sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--mut); margin-top:7px; }

/* LOADOUT */
.loadout{ border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(6px);
  padding:clamp(8px,1vw,14px) clamp(16px,2vw,26px);
  clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px)); }
.load-row{ display:grid; grid-template-columns:clamp(82px,9vw,120px) 1fr; gap:16px; align-items:center;
  padding:clamp(13px,1.7vh,18px) 0; border-bottom:1px dotted rgba(255,39,64,.16); }
.load-row:last-child{ border-bottom:0; }
.load-k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mut2);
  padding:7px 12px; background:rgba(255,39,64,.06); border:1px solid var(--line);
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); transition:.2s; }
.chip:hover{ color:#fff; border-color:rgba(255,39,64,.55); box-shadow:0 0 14px rgba(255,39,64,.25); }
.chip.hot{ color:#ffd9dc; border-color:rgba(255,39,64,.5); background:rgba(255,39,64,.12); }

/* TELEMETRY count-up */
.tele-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px); }
.tele{ position:relative; text-align:center; padding:clamp(18px,2.2vw,28px) 12px; border:1px solid var(--line);
  background:var(--glass); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px)); }
.tele::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cr),transparent); opacity:.5; }
.tele-v{ font-family:var(--num); font-weight:700; font-size:clamp(30px,4vw,52px); line-height:1; color:#fff;
  text-shadow:0 0 22px rgba(255,39,64,.4); font-variant-numeric:tabular-nums; }
.tele-k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; margin-top:10px; }

/* FEATURED BUILD terminal */
.term{ border:1px solid var(--line); background:rgba(8,9,14,.78); backdrop-filter:blur(6px); overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(255,39,64,.08);
  clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px)); }
.term-bar{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,39,64,.05); }
.term-dots{ display:flex; gap:6px; }
.term-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,39,64,.35); }
.term-dots i:first-child{ background:var(--cr); box-shadow:0 0 8px var(--cr); }
.term-title{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mut2); }
.term-stat{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--cr-soft); }
.term-body{ font-family:var(--mono); font-size:clamp(11px,1.05vw,13px); line-height:1.85; color:#cfe3d6;
  padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,26px); min-height:236px; text-align:left; white-space:pre-wrap; }
.term-body .tl-pr{ color:var(--cr-soft); }
.term-body .tl-ok{ color:#7fdc9a; }
.term-body .tl-mut{ color:var(--mut); }
.term-body .tl-w{ color:#fff; }
.term-cursor{ display:inline-block; width:8px; height:1.05em; background:var(--cr); vertical-align:-2px;
  box-shadow:0 0 8px var(--cr); animation:cur .9s steps(1) infinite; }
@keyframes cur{ 50%{ opacity:0; } }
.build-meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:16px; }
.build-link{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; color:var(--cr-soft); text-transform:uppercase; border:1px solid var(--line);
  padding:10px 16px; clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); transition:.2s; }
.build-link b{ color:var(--cr); }
.build-link:hover{ color:#fff; border-color:var(--cr); box-shadow:0 0 18px rgba(255,39,64,.3); }
.build-link .bl-arr{ transition:transform .2s; }
.build-link:hover .bl-arr{ transform:translateX(3px); }
.build-tags{ display:flex; flex-wrap:wrap; gap:9px; }

/* DISCORD RELAY */
.dc-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(12px,1.5vw,18px); }
.dc-card{ position:relative; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(6px);
  overflow:hidden; clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px)); }
.dc-banner{ height:64px; background:
    linear-gradient(120deg, rgba(255,39,64,.45), rgba(122,12,24,.5)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 6px, transparent 6px 12px);
  border-bottom:1px solid var(--line); }
.dc-pres{ display:flex; align-items:flex-end; gap:14px; padding:0 clamp(16px,2vw,22px); margin-top:-26px; }
.dc-av{ position:relative; width:64px; height:64px; flex:0 0 auto; border-radius:50%;
  box-shadow:0 0 0 4px #0a0c12; overflow:visible; }
.dc-av image-slot{ width:64px; height:64px; border-radius:50%; overflow:hidden; display:block; }
.dc-status{ position:absolute; right:1px; bottom:1px; width:16px; height:16px; border-radius:50%; z-index:3;
  background:#39d36a; box-shadow:0 0 0 4px #0a0c12, 0 0 8px #39d36a; animation:beat 2.4s ease-in-out infinite; }
/* live status variants driven by Lanyard */
.dc-status.is-online{ background:#39d36a; box-shadow:0 0 0 4px #0a0c12, 0 0 8px #39d36a; }
.dc-status.is-idle{ background:#f0b232; box-shadow:0 0 0 4px #0a0c12, 0 0 8px #f0b232; }
.dc-status.is-dnd{ background:#f23f43; box-shadow:0 0 0 4px #0a0c12, 0 0 8px #f23f43; }
.dc-status.is-offline{ background:#80848e; box-shadow:0 0 0 4px #0a0c12; animation:none; }
/* LIVE pill — only shows once connected */
.dc-live{ margin-left:auto; align-self:flex-start; display:none; align-items:center; gap:6px; padding-bottom:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--cr-soft); }
.dc-live i{ width:6px; height:6px; border-radius:50%; background:var(--cr); box-shadow:0 0 7px var(--cr);
  animation:beat 1.6s ease-in-out infinite; }
#dc-presence[data-state="online"] .dc-live,
#dc-presence[data-state="idle"] .dc-live,
#dc-presence[data-state="dnd"] .dc-live,
#dc-presence[data-state="offline"] .dc-live{ display:flex; }
#dc-presence[data-state="offline"]{ opacity:.78; }
#dc-presence[data-state="offline"] .dc-live i{ background:#80848e; box-shadow:none; animation:none; }
.dc-id{ padding-bottom:6px; }
.dc-name{ font-family:var(--disp); font-weight:700; font-size:clamp(18px,1.7vw,22px); color:#fff; line-height:1; }
.dc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mut); margin-top:5px; }
.dc-note{ margin:14px clamp(16px,2vw,22px) 0; font-size:13px; color:var(--mut2);
  padding:10px 12px; background:rgba(255,39,64,.05); border:1px solid var(--line); border-radius:8px; }
.dc-note .dc-emoji{ color:var(--cr); margin-right:6px; }
.dc-activity{ margin:14px clamp(16px,2vw,22px) clamp(16px,2vw,22px); }
.dc-act-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--cr-soft);
  text-transform:uppercase; margin-bottom:10px; }
.dc-act-row{ display:flex; gap:13px; align-items:center; }
.dc-act-ico{ flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center; font-family:var(--num);
  font-weight:700; font-size:16px; color:#ffd9dc; background:linear-gradient(160deg,#2a1213,#160c0d);
  border:1px solid rgba(255,39,64,.4); border-radius:10px; box-shadow:inset 0 0 12px rgba(255,39,64,.25);
  background-size:cover; background-position:center; overflow:hidden; }
.dc-act-ico.has-img{ color:transparent; box-shadow:none; }
.dc-act-t{ font-weight:600; font-size:14px; color:#fff; }
.dc-act-s{ font-size:12px; color:var(--mut2); margin-top:3px; }
.dc-act-time{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--cr-soft); margin-top:5px;
  font-variant-numeric:tabular-nums; }

/* invite card */
.dc-invite{ display:flex; flex-direction:column; justify-content:center; padding:clamp(18px,2.2vw,26px); gap:0; }
.dc-inv-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.dc-inv-row{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.dc-inv-ico{ flex:0 0 auto; width:50px; height:50px; display:grid; place-items:center; font-family:var(--disp);
  font-weight:700; font-size:22px; color:#fff; background:linear-gradient(160deg,var(--cr),var(--cr-deep));
  border-radius:14px; box-shadow:0 0 18px rgba(255,39,64,.4); }
.dc-inv-name{ font-family:var(--disp); font-weight:700; font-size:clamp(16px,1.5vw,19px); color:#fff; }
.dc-inv-counts{ display:flex; gap:16px; margin-top:7px; font-family:var(--mono); font-size:11px; color:var(--mut); }
.dc-inv-counts b{ color:var(--mut2); font-weight:600; }
.dc-inv-counts i{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:2px; }
.dc-inv-counts .dot-on{ background:#39d36a; box-shadow:0 0 6px #39d36a; }
.dc-inv-counts .dot-idle{ background:#caa23a; }
.dc-join{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; text-decoration:none;
  font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.04em; color:#fff;
  padding:13px; background:linear-gradient(180deg,var(--cr),var(--cr-deep)); border:1px solid rgba(255,39,64,.6);
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px)); transition:.2s; }
.dc-join:hover{ box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 24px rgba(255,39,64,.5); transform:translateY(-2px); }
.dc-join .bl-arr{ transition:transform .2s; }
.dc-join:hover .bl-arr{ transform:translateX(3px); }
.dc-inv-foot{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--mut); margin-top:13px; text-align:center; }
/* placeholder \u201ccoming soon\u201d invite \u2014 no live server yet */
.dc-join-soon{ cursor:default; color:var(--mut2); background:rgba(255,255,255,.03);
  border:1px solid var(--line); box-shadow:none; }
.dc-join-soon:hover{ transform:none; box-shadow:none; }
.dc-invite-soon .dc-inv-ico{ background:linear-gradient(160deg,#2a1213,#160c0d); color:#caa23a;
  border:1px solid rgba(202,162,58,.4); box-shadow:none; }

/* HOMELAB */
.lab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,18px); align-items:stretch; }
.lab-card{ position:relative; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(6px);
  padding:clamp(18px,2vw,24px); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px)); }
.lab-head{ display:flex; align-items:center; gap:13px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.lab-leds{ display:flex; gap:5px; flex:0 0 auto; }
.lab-leds i{ width:7px; height:7px; border-radius:1px; background:#39d36a; box-shadow:0 0 7px #39d36a;
  animation:labLed 2.4s ease-in-out infinite; }
.lab-leds i:nth-child(2){ animation-delay:.4s; } .lab-leds i:nth-child(3){ animation-delay:.8s; }
.lab-leds i:nth-child(4){ animation-delay:1.2s; }
.lab-leds.idle i{ background:#caa23a; box-shadow:none; animation:none; }
@keyframes labLed{ 50%{ opacity:.35; } }
.lab-name{ font-family:var(--disp); font-weight:700; font-size:clamp(18px,1.8vw,23px); color:#fff; white-space:nowrap; }
.lab-stat{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; padding:4px 9px;
  border-radius:4px; text-transform:uppercase; }
.lab-stat.on{ color:#7fdc9a; border:1px solid rgba(57,211,106,.4); background:rgba(57,211,106,.08); }
.lab-stat.idle{ color:#caa23a; border:1px solid rgba(202,162,58,.35); background:rgba(202,162,58,.07); }
.lab-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 4px; }
.lab-spec{ padding:11px 12px; border:1px solid var(--line); background:rgba(255,39,64,.04);
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px)); }
.ls-k{ display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.ls-v{ display:block; font-family:var(--num); font-weight:700; font-size:clamp(13px,1.15vw,15px); color:#fff; margin-top:6px; line-height:1.15; }
.lab-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--cr-soft); text-transform:uppercase;
  margin:18px 0 11px; }
.lab-svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.svc{ display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line);
  background:rgba(8,9,14,.5); transition:.2s;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px)); }
.svc:hover{ border-color:rgba(255,39,64,.55); box-shadow:0 0 14px rgba(255,39,64,.2); }
.svc-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:#39d36a; box-shadow:0 0 7px #39d36a; }
.svc-dot.idle{ background:#caa23a; box-shadow:none; }
.svc-n{ font-weight:600; font-size:12.5px; color:#fff; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svc-r{ font-family:var(--mono); font-size:9px; color:var(--mut); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* second server */
.lab-sec{ display:flex; flex-direction:column; }
.lab-desc{ font-size:13px; line-height:1.6; color:var(--mut2); margin:16px 0 0; text-wrap:pretty; }
.lab-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; padding-top:18px; }
.lab-pill{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--mut2); padding:7px 12px;
  background:rgba(202,162,58,.06); border:1px solid rgba(202,162,58,.28);
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); }

/* SYSTEM LOG timeline */
.log{ position:relative; padding-left:26px; }
.log::before{ content:''; position:absolute; left:5px; top:6px; bottom:14px; width:1px;
  background:linear-gradient(180deg,var(--cr),rgba(255,39,64,.12)); }
.log-item{ position:relative; padding:0 0 clamp(18px,2.6vh,28px); }
.log-item:last-child{ padding-bottom:0; }
.log-item::before{ content:''; position:absolute; left:-26px; top:4px; width:11px; height:11px;
  background:var(--cr); box-shadow:0 0 12px var(--cr); transform:translateX(0);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.log-yr{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--cr-soft); }
.log-t{ font-family:var(--disp); font-weight:600; font-size:clamp(15px,1.4vw,18px); color:#fff; margin-top:3px; }
.log-d{ font-size:12.5px; line-height:1.55; color:var(--mut2); margin-top:4px; max-width:60ch; text-wrap:pretty; }

/* sign-off */
.signoff{ text-align:center; padding:clamp(40px,7vh,80px) 0 clamp(8px,1.5vh,16px); }
.signoff .so-line{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--mut);
  text-transform:uppercase; }
.signoff .so-line b{ color:var(--cr-soft); }
.signoff .so-top{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; text-decoration:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--cr-soft); text-transform:uppercase;
  border:1px solid var(--line); padding:9px 16px;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); transition:.2s; }
.signoff .so-top:hover{ color:#fff; border-color:var(--cr); box-shadow:0 0 16px rgba(255,39,64,.3); }

/* responsive fallback for narrow screens */
@media (max-width:900px){
  .main{ grid-template-columns:1fr; }
  .portrait{ max-width:380px; margin:0 auto; }
  .links{ grid-template-columns:repeat(2,1fr); }
  .now-grid{ grid-template-columns:repeat(2,1fr); }
  .tele-grid{ grid-template-columns:repeat(2,1fr); }
  .dc-grid{ grid-template-columns:1fr; }
  .lab-grid{ grid-template-columns:1fr; }
  .lab-svcs{ grid-template-columns:repeat(2,1fr); }
  .hero{ min-height:auto; padding:clamp(20px,5vh,48px) 0; }
  .readout #coord{ display:none; }
}
@media (max-width:560px){
  .links{ grid-template-columns:1fr; }
  .brand .sys, .hud-bot .seg:nth-child(2){ display:none; }
}

/* ── ERROR PAGES (404 / 500 / 403) ──────────────────────────────────── */
.err-wrap{ position:relative; z-index:6; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(80px,12vh,140px) clamp(16px,3vw,40px) clamp(48px,7vh,72px); }
.err-tag{ font-family:var(--mono); font-size:clamp(10px,1.1vw,12px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--cr-soft); margin-bottom:clamp(14px,2.4vh,24px);
  display:flex; align-items:center; gap:10px; }
.err-tag i{ width:7px; height:7px; border-radius:50%; background:var(--cr);
  box-shadow:0 0 9px var(--cr); animation:beat 1.8s ease-in-out infinite; }
.err-code{ position:relative; font-family:var(--disp); font-weight:700; line-height:.9;
  font-size:clamp(96px,22vw,260px); letter-spacing:-.02em; color:#fff;
  text-shadow:0 0 40px rgba(255,39,64,.35); }
.err-code::before, .err-code::after{ content:attr(data-code); position:absolute; inset:0;
  clip-path:inset(0 0 0 0); }
.err-code::before{ color:var(--cr); transform:translate(-3px,-1px); opacity:.7;
  animation:glitchA 3.2s steps(2,end) infinite; }
.err-code::after{ color:#3ad6ff; transform:translate(3px,1px); opacity:.5; mix-blend-mode:screen;
  animation:glitchB 2.6s steps(2,end) infinite; }
@keyframes glitchA{
  0%,82%,100%{ clip-path:inset(0 0 100% 0); transform:translate(-3px,-1px); }
  84%{ clip-path:inset(12% 0 56% 0); transform:translate(-7px,0); }
  88%{ clip-path:inset(64% 0 12% 0); transform:translate(5px,1px); }
  92%{ clip-path:inset(38% 0 38% 0); transform:translate(-4px,-2px); }
}
@keyframes glitchB{
  0%,86%,100%{ clip-path:inset(100% 0 0 0); transform:translate(3px,1px); }
  88%{ clip-path:inset(20% 0 50% 0); transform:translate(6px,0); }
  94%{ clip-path:inset(58% 0 18% 0); transform:translate(-5px,2px); }
}
.err-title{ font-family:var(--disp); font-weight:700; font-size:clamp(22px,3.6vw,40px);
  color:var(--tx); margin:clamp(10px,2vh,20px) 0 clamp(10px,1.6vh,16px); letter-spacing:.01em; }
.err-msg{ max-width:560px; font-size:clamp(14px,1.5vw,16px); line-height:1.6; color:var(--mut2);
  margin-bottom:clamp(26px,4vh,40px); text-wrap:pretty; }
.err-msg code{ font-family:var(--mono); color:var(--cr-soft); background:rgba(255,39,64,.08);
  border:1px solid var(--line); border-radius:4px; padding:1px 7px; font-size:.9em; }
.err-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.err-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 22px; border-radius:7px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.err-btn .arr{ transition:transform .18s ease; }
.err-btn:hover .arr{ transform:translateX(4px); }
.err-btn-primary{ color:#fff; background:linear-gradient(160deg,#ff3347,#c00f22);
  border:1px solid rgba(255,107,120,.6); box-shadow:0 0 18px rgba(255,39,64,.34); }
.err-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 26px rgba(255,39,64,.5); }
.err-btn-ghost{ color:var(--mut2); background:rgba(255,255,255,.03); border:1px solid var(--line); }
.err-btn-ghost:hover{ transform:translateY(-2px); color:#fff; border-color:var(--cr); }
.err-readout{ margin-top:clamp(34px,6vh,60px); display:flex; flex-wrap:wrap; gap:8px 22px;
  justify-content:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mut); }
.err-readout b{ color:var(--cr-soft); font-weight:500; }
@media (max-width:560px){
  .err-actions{ flex-direction:column; width:100%; max-width:300px; }
  .err-btn{ justify-content:center; }
}

/* secret easter-egg link (hidden in the bio) */
.egg-link{ color:inherit; text-decoration:none; cursor:help;
  border-bottom:1px dotted rgba(255,107,120,.35); transition:color .2s ease, text-shadow .2s ease, border-color .2s ease; }
.egg-link:hover{ color:var(--cr-soft); border-bottom-color:var(--cr);
  text-shadow:0 0 12px rgba(255,39,64,.6); }
.egg-link:hover::after{ content:"\2020"; margin-left:4px; color:var(--cr); }

/* ── ERROR PAGES (404 / 500 / 403) ──────────────────────────────────── */
.err-term{ width:min(620px,100%); text-align:left; margin:clamp(6px,1.4vh,14px) 0 clamp(26px,4vh,40px);
  background:rgba(10,9,14,.82); border:1px solid var(--line); border-radius:9px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(255,39,64,.05);
  backdrop-filter:blur(6px); }
.et-bar{ display:flex; align-items:center; gap:8px; padding:9px 13px;
  background:rgba(255,39,64,.07); border-bottom:1px solid var(--line); }
.et-dot{ width:10px; height:10px; border-radius:50%; background:#3a2a2d; }
.et-dot.r{ background:#ff5f57; } .et-dot.y{ background:#febc2e; } .et-dot.g{ background:#28c840; }
.et-name{ margin-left:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--mut); }
.et-body{ padding:15px 16px 17px; font-family:var(--mono); font-size:13px; line-height:1.7;
  color:#cdd2da; white-space:pre-wrap; word-break:break-word; }
.et-body .pr{ color:var(--cr-soft); }            /* prompt user@host */
.et-body .pa{ color:#6f7782; }                    /* path */
.et-body .cmd{ color:#eef1f6; }                   /* typed command */
.et-body .err{ color:#ff5f6b; }                   /* error text */
.et-body .ok{ color:#28c840; }                    /* success-ish */
.et-body .dim{ color:#6f7782; }                   /* comments */
.et-line{ display:block; }
.et-cursor{ display:inline-block; width:8px; height:15px; vertical-align:-2px; margin-left:2px;
  background:var(--cr); box-shadow:0 0 8px var(--cr); animation:etblink 1.05s steps(1) infinite; }
@keyframes etblink{ 50%{ opacity:0; } }