/* ══════════════════════════════════════════════════════════
   Eddie Smith · @l0y41 — horizontal code-editor landing
   ══════════════════════════════════════════════════════════ */

/* ─── tokens ─── */
:root{
  --bg:#080a10; --bg2:#0c1018; --panel:#0f1420; --panel2:#121828;
  --line:rgba(140,170,220,.13); --line2:rgba(140,170,220,.24);
  --txt:#d3dcea; --dim:#7c8aa0; --white:#f2f6ff;

  --a1:#7ee787; --a2:#79c0ff; --a3:#d2a8ff; --a4:#ffa657; --a5:#e3b341;

  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --top:46px; --bot:34px; --gut:56px;
  --r:14px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
[data-theme="matrix"]{--a1:#00ff9c;--a2:#3ff0c0;--a3:#9dffcb;--a4:#00d17a;--a5:#c6ffe4;--bg:#050a07;--bg2:#08110c;--panel:#0a150f;--panel2:#0d1b13;}
[data-theme="amber"]{--a1:#ffb454;--a2:#ffd580;--a3:#f07178;--a4:#ff8f40;--a5:#e6b450;--bg:#0b0904;--bg2:#120e06;--panel:#16110a;--panel2:#1c150c;}
[data-theme="synth"]{--a1:#ff7edb;--a2:#36f9f6;--a3:#b48eff;--a4:#fede5d;--a5:#ff5f9e;--bg:#0a0616;--bg2:#0f0a20;--panel:#150e2a;--panel2:#1b1236;}

*{box-sizing:border-box}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
body.is-booting{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,pre,figure{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--a1);color:#04180a}

.c-dim{color:var(--dim)} .c-lime{color:var(--a1)} .c-cy{color:var(--a2)}
.c-mag{color:var(--a3)} .c-or{color:var(--a4)} .c-ye{color:var(--a5)}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:var(--a1)}
.dot--lime{background:var(--a1)}.dot--cy{background:var(--a2)}.dot--mag{background:var(--a3)}
.dot--or{background:var(--a4)}.dot--ye{background:var(--a5)}
.pulse{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 70%,transparent);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ═══ BOOT ═══ */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  transition:opacity .5s var(--ease),visibility .5s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{width:min(420px,80vw);text-align:left}
.boot__mark{width:74px;height:74px;color:var(--a1);display:block;margin:0 auto 22px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--a1) 45%,transparent))}
.bm{stroke-dasharray:120;stroke-dashoffset:120;animation:drawIn .7s var(--ease) forwards}
.bm2{animation-delay:.12s}.bm3{animation-delay:.24s}
@keyframes drawIn{to{stroke-dashoffset:0}}
.boot__log{font-family:var(--mono);font-size:11.5px;color:var(--dim);min-height:76px;line-height:1.8}
.boot__log b{color:var(--a1);font-weight:500}
.boot__bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:14px}
.boot__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a2),var(--a1));transition:width .2s linear}

/* ═══ SCENE ═══ */
.scene{position:fixed;inset:0;overflow:hidden;opacity:0;transition:opacity .6s var(--ease)}
.is-ready .scene{opacity:1}
.spacer{width:1px}

/* ─── background ─── */
.bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.bg__grid{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.bg__aurora{position:absolute;inset:-30%;
  background:
    radial-gradient(38% 46% at 18% 28%,color-mix(in srgb,var(--a1) 16%,transparent),transparent 70%),
    radial-gradient(34% 40% at 78% 68%,color-mix(in srgb,var(--a3) 15%,transparent),transparent 70%),
    radial-gradient(30% 36% at 52% 12%,color-mix(in srgb,var(--a2) 12%,transparent),transparent 70%);
  filter:blur(30px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4%,-3%,0) scale(1.12)}}
.bg__rain{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.bg__rain text{font-family:var(--mono);font-size:12px;fill:var(--a1)}
.bg__scan{position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}
.bg__glow{position:absolute;width:640px;height:640px;left:0;top:0;margin:-320px 0 0 -320px;
  background:radial-gradient(circle,color-mix(in srgb,var(--a2) 13%,transparent),transparent 62%);
  opacity:0;transition:opacity .6s;will-change:transform}
.is-ready .bg__glow{opacity:1}

/* ─── topbar ─── */
.topbar{position:absolute;top:0;left:0;right:0;height:var(--top);z-index:40;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px}
.topbar__dots{display:flex;gap:6px}
.topbar__dots i{width:10px;height:10px;border-radius:50%;background:#3a4152}
.topbar__dots i:nth-child(1){background:#ff5f57}.topbar__dots i:nth-child(2){background:#febc2e}.topbar__dots i:nth-child(3){background:#28c840}
.topbar__logo{display:flex;align-items:center;gap:7px;color:var(--dim);white-space:nowrap}
.topbar__logo svg{width:15px;height:15px;color:var(--a1)}
.topbar__logo b{color:var(--txt);font-weight:500}
.tabs{display:flex;gap:2px;overflow:hidden;flex:1;mask-image:linear-gradient(90deg,#000 90%,transparent)}
.tab{position:relative;padding:5px 12px;border-radius:7px 7px 0 0;color:var(--dim);white-space:nowrap;
  background:none;border:0;font:inherit;cursor:pointer;transition:.25s var(--ease);display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.tab.is-on{color:var(--white);background:var(--panel)}
.tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--a1);box-shadow:0 0 12px var(--a1)}
.tab i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
.tab.is-on i{background:var(--a1);opacity:1}
.topbar__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line2);border-radius:20px;
  background:none;color:var(--dim);font:inherit;font-family:var(--mono);cursor:pointer;transition:.25s}
.lang:hover{border-color:var(--a1)}
.lang__opt{transition:.25s}.lang__opt.is-on{color:var(--a1);text-shadow:0 0 12px color-mix(in srgb,var(--a1) 60%,transparent)}
.lang__sep{opacity:.4}
.iconbtn{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:9px;
  background:none;color:var(--dim);cursor:pointer;transition:.25s}
.iconbtn:hover{color:var(--a1);border-color:var(--a1);transform:rotate(35deg)}
.iconbtn svg{width:15px;height:15px}

/* ─── gutter ─── */
.gutter{position:absolute;top:var(--top);bottom:var(--bot);left:0;width:var(--gut);z-index:30;
  overflow:hidden;border-right:1px solid var(--line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent),transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.gutter__nums{font-family:var(--mono);font-size:10.5px;color:rgba(124,138,160,.42);text-align:right;
  padding-right:12px;line-height:22px;will-change:transform}
.gutter__nums b{color:var(--a1);font-weight:400}

/* ─── track & panels ─── */
.track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:stretch;
  will-change:transform;z-index:10}
.panel{position:relative;flex:none;min-width:100vw;height:100vh;
  padding:calc(var(--top) + 34px) 6vw calc(var(--bot) + 30px) calc(var(--gut) + 4vw);
  display:flex;flex-direction:column;justify-content:center}
/* prose panels are exactly one screen wide so text wraps instead of
   stretching the flex item to its max-content width */
.panel--hero,.panel--about,.panel--contact{width:100vw}

[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* section head */
.phead{display:flex;align-items:center;gap:16px;margin-bottom:26px;max-width:min(100%,1080px)}
.phead__n{font-family:var(--mono);font-size:11px;color:var(--a1);border:1px solid color-mix(in srgb,var(--a1) 35%,transparent);
  padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--a1) 8%,transparent)}
.phead h2{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--white);white-space:nowrap}
.phead__line{flex:1;height:1px;min-width:40px;background:linear-gradient(90deg,var(--line2),transparent)}
.phead__tag{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;white-space:nowrap}

/* ═══ HERO ═══ */
.panel--hero{justify-content:center}
.hero{display:flex;align-items:center;gap:5vw;width:100%;max-width:1180px}
.hero__text{max-width:640px;flex:1 1 auto}
.term{border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel) 80%,transparent);
  overflow:hidden;max-width:430px;margin-bottom:26px;box-shadow:0 20px 50px -30px #000}
.term__bar{display:flex;align-items:center;gap:6px;padding:7px 11px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;color:var(--dim)}
.term__bar i{width:8px;height:8px;border-radius:50%;background:#3a4152}
.term__bar i:nth-child(1){background:#ff5f57}.term__bar i:nth-child(2){background:#febc2e}.term__bar i:nth-child(3){background:#28c840}
.term__bar span{margin-left:8px}
.term__body{padding:11px 13px;font-family:var(--mono);font-size:12px;line-height:1.85}
.term__body b{font-weight:700}

.caret{display:inline-block;width:7px;height:1em;background:var(--a1);vertical-align:-2px;margin-left:3px;
  animation:blink 1.05s steps(1) infinite}
.caret--fat{width:12px;height:.86em;vertical-align:-1px;box-shadow:0 0 18px var(--a1)}
@keyframes blink{50%{opacity:0}}

.hero__title{font-size:clamp(31px,5.1vw,63px);line-height:1.04;font-weight:800;letter-spacing:-.035em;
  color:var(--white);margin-bottom:20px;text-wrap:balance}
.hero__sub{font-size:clamp(14px,1.35vw,17px);color:var(--dim);max-width:520px;margin-bottom:22px}
.hero__meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--txt);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;background:rgba(255,255,255,.02);
  transition:.25s var(--ease)}
.pill:hover{border-color:var(--a1);transform:translateY(-2px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:24px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:11px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid var(--line2);transition:.3s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn--primary{background:var(--a1);color:#05160a;border-color:var(--a1);
  box-shadow:0 10px 34px -14px var(--a1)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--a1)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--ghost{color:var(--txt);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--a1);color:var(--a1);transform:translateY(-2px)}
.hero__hint{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.hero__hint svg{width:22px;height:22px;color:var(--a1);animation:nudge 1.9s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.hero__art{flex:0 0 min(42vw,420px);will-change:transform}
.core{width:100%;height:auto;display:block;overflow:visible}
.spin-slow{animation:spin 34s linear infinite;transform-origin:230px 230px}
.spin-rev{animation:spin 22s linear infinite reverse;transform-origin:230px 230px}
.spin-mid{animation:spin 60s linear infinite;transform-origin:230px 230px}
@keyframes spin{to{transform:rotate(360deg)}}
.core__glyph .draw{stroke-dasharray:180;stroke-dashoffset:180;animation:drawIn 1s var(--ease) .5s forwards}
.d2{animation-delay:.7s}.d3{animation-delay:.9s}
.chip__t{font-family:var(--mono);font-size:12px;fill:var(--txt)}
.chip{animation:float 6s ease-in-out infinite}
.c2{animation-delay:-1.5s}.c3{animation-delay:-3s}.c4{animation-delay:-4.5s}
@keyframes float{50%{transform:translateY(-11px)}}

/* ═══ ABOUT ═══ */
.about{display:flex;align-items:center;gap:5vw;width:100%;max-width:1180px}
.about__doc{max-width:620px}
.doc{font-family:var(--mono);font-size:12px;line-height:1.85;padding:16px 18px;border-radius:12px;
  border:1px solid var(--line);border-left:2px solid var(--a1);
  background:color-mix(in srgb,var(--panel) 70%,transparent);margin-bottom:22px;overflow-x:auto}
.about__body p{margin-bottom:14px;font-size:clamp(14px,1.25vw,16.5px);color:var(--txt);max-width:600px}
.about__body p:last-child{color:var(--dim)}
.about__art{flex:0 0 min(34vw,360px)}
.stackart{width:100%;height:auto}
.lbl{font-family:var(--mono);font-size:11.5px;fill:var(--white);letter-spacing:.04em;font-weight:500}
.layer{transition:transform .5s var(--ease)}
.layer:hover{transform:translateY(-7px)}
.l1{animation:float 7s ease-in-out infinite}
.l2{animation:float 7s ease-in-out -2.3s infinite}
.l3{animation:float 7s ease-in-out -4.6s infinite}

/* ═══ SKILLS ═══ */
.skills{display:flex;align-items:center;gap:34px;min-height:min(430px,56vh)}
.skills__json{flex:none;width:330px}
.filecard{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 82%,transparent);box-shadow:0 24px 60px -34px #000}
.filecard__bar{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.filecard__badge{margin-left:auto;font-weight:400;color:var(--a4);border:1px solid color-mix(in srgb,var(--a4) 35%,transparent);
  border-radius:5px;padding:1px 6px;font-size:9.5px}
.json{font-family:var(--mono);font-size:11.5px;line-height:1.8;padding:14px 16px;overflow:auto;max-height:52vh}
.json .k{color:var(--a2)}.json .v{color:var(--a1)}.json .p{color:var(--dim)}

.skills__grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:14px;align-content:center}
.skcol{width:250px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent);transition:.35s var(--ease)}
.skcol:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px var(--ac)}
.skcol__h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  color:var(--ac);letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px}
.skcol__h svg{width:15px;height:15px}
.skcol ul{display:flex;flex-wrap:wrap;gap:6px}
.skcol li{font-family:var(--mono);font-size:11px;color:var(--txt);border:1px solid var(--line);
  border-radius:7px;padding:3px 9px;background:rgba(255,255,255,.02);transition:.2s;cursor:default}
.skcol li:hover{color:var(--ac);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,transparent)}

.skills__graph{flex:none;width:min(28vw,340px)}
.graph{width:100%;height:auto;overflow:visible}
.graph .edge{stroke:var(--line2);stroke-width:1.2;stroke-dasharray:4 5;animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-90}}
.graph .node{fill:color-mix(in srgb,var(--panel2) 90%,transparent);stroke-width:1.4}
.graph .nt{font-family:var(--mono);font-size:10.5px;fill:var(--txt);text-anchor:middle}
.graph .gnode{animation:float 8s ease-in-out infinite}

/* ═══ CARDS (work) ═══ */
.cards{display:flex;gap:22px;align-items:stretch;padding-top:34px;position:relative}
.cards::before{content:"";position:absolute;top:12px;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 6%,var(--line2) 94%,transparent)}
.card{position:relative;flex:none;width:clamp(260px,26vw,340px);border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in srgb,var(--panel) 84%,transparent);display:flex;flex-direction:column;
  transition:.4s var(--ease);box-shadow:0 26px 60px -40px #000}
.card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--ac) 55%,transparent);
  box-shadow:0 34px 70px -34px color-mix(in srgb,var(--ac) 55%,transparent)}
.card__commit{position:absolute;top:-28px;left:22px;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;color:var(--dim);white-space:nowrap}
.card__commit b{width:12px;height:12px;border-radius:50%;background:var(--bg);flex:none;
  border:2.5px solid var(--ac);box-shadow:0 0 14px color-mix(in srgb,var(--ac) 75%,transparent)}
.card:hover .card__commit{color:var(--ac)}
.card__art{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);overflow:hidden;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--ac) 11%,transparent),transparent 70%)}
.card__art svg{position:absolute;inset:0;width:100%;height:100%}
.card__chrome{position:absolute;top:0;left:0;right:0;height:22px;display:flex;align-items:center;gap:4px;
  padding:0 8px;background:rgba(0,0,0,.32);border-bottom:1px solid var(--line);z-index:2}
.card__chrome i{width:5px;height:5px;border-radius:50%;background:#4a5265}
.card__chrome span{margin-left:6px;font-family:var(--mono);font-size:8.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__t{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--white)}
.card__t em{font-style:normal;color:var(--ac)}
.card__d{font-size:13px;color:var(--dim);line-height:1.55;flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:5px}
.card__tags span{font-family:var(--mono);font-size:9.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px}
.card__go{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ac);
  margin-top:2px;transition:gap .25s var(--ease)}
.card:hover .card__go{gap:12px}
.card__go svg{width:13px;height:13px}
.card__scan{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--ac) 22%,transparent) 50%,transparent 55%)}
.card:hover .card__scan{opacity:1;animation:scan 1.5s linear infinite}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ═══ LAB ═══ */
.lab{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:16px;align-content:start;
  min-height:min(430px,56vh)}
.mini{position:relative;width:clamp(210px,20vw,248px);border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--panel) 84%,transparent);overflow:hidden;display:flex;gap:11px;
  padding:11px;align-items:center;transition:.35s var(--ease)}
.mini:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 55%,transparent);
  background:color-mix(in srgb,var(--ac) 7%,var(--panel))}
.mini__ic{flex:none;width:52px;height:52px;border-radius:10px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--ac) 9%,transparent);display:grid;place-items:center;overflow:hidden}
.mini__ic svg{width:100%;height:100%}
.mini__b{min-width:0;display:block}
.mini__t{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.mini__d{display:-webkit-box;font-size:11.5px;color:var(--dim);line-height:1.42;
  -webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini__go{position:absolute;top:9px;right:9px;color:var(--ac);opacity:0;transform:translate(-4px,4px);
  transition:.3s var(--ease);display:block}
.mini:hover .mini__go{opacity:1;transform:none}
.mini__go svg{width:13px;height:13px}

/* ═══ HOW ═══ */
.how{display:flex;gap:20px;align-items:flex-start;min-height:min(430px,56vh)}
.fn{position:relative;flex:none;width:clamp(270px,25vw,330px);border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in srgb,var(--panel) 84%,transparent);padding:20px;transition:.4s var(--ease);overflow:hidden}
.fn::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0,color-mix(in srgb,var(--ac) 13%,transparent),transparent 70%);
  opacity:0;transition:opacity .4s}
.fn:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--ac) 50%,transparent)}
.fn:hover::after{opacity:1}
.fn__ic{width:46px;height:46px;margin-bottom:15px;color:var(--ac)}
.fn__ic svg{width:100%;height:100%}
.fn__sig{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:9px}
.fn__sig b{color:var(--ac);font-weight:500}
.fn__t{font-size:19px;font-weight:800;color:var(--white);margin-bottom:8px;letter-spacing:-.02em}
.fn__d{font-size:13.5px;color:var(--dim);line-height:1.6}
.fn__n{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:42px;font-weight:800;
  color:color-mix(in srgb,var(--ac) 13%,transparent);line-height:1}

/* ═══ CONTACT ═══ */
.contact{display:flex;gap:38px;align-items:flex-start;flex-wrap:wrap}
.contact__req{width:min(430px,44vw)}
.http{font-family:var(--mono);font-size:11.5px;line-height:1.8;padding:15px 17px;overflow-x:auto}
.statusline{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:13px}
.contact__res{flex:1;min-width:min(300px,100%)}
.resline{font-family:var(--mono);font-size:12px;margin-bottom:15px;display:flex;gap:8px;align-items:center}
.contacts{display:flex;flex-direction:column;gap:9px;max-width:470px}
.contacts li{display:flex;gap:8px;align-items:stretch}
.crow{flex:1;min-width:0;display:flex;align-items:center;gap:13px;padding:12px 15px;
  border:1px solid var(--line2);border-radius:11px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);transition:.3s var(--ease)}
.crow:hover{border-color:var(--a1);transform:translateX(5px);background:color-mix(in srgb,var(--a1) 7%,transparent)}
.crow__ic{width:17px;height:17px;color:var(--a1);flex:none;display:block}
.crow__ic svg{width:100%;height:100%;display:block}
.crow__k{font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;width:78px;flex:none}
.crow__v{font-family:var(--mono);font-size:13.5px;color:var(--white);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy{width:28px;height:28px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;
  background:none;color:var(--dim);cursor:pointer;transition:.25s}
.copy:hover{color:var(--a1);border-color:var(--a1)}
.copy svg{width:13px;height:13px}
.copy.is-ok{color:var(--a1);border-color:var(--a1)}
.contact__sig{margin-top:22px;font-family:var(--mono);font-size:10.5px}
.sig{width:190px;height:44px;display:block;margin-bottom:6px}
.sig__p{stroke-dasharray:640;stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease) .25s}
[data-reveal]:not(.is-in) .sig__p{stroke-dashoffset:640;transition:none}
.foot{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:30px;
  padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--dim);
  max-width:1000px;flex-wrap:wrap}

/* ═══ STATUSBAR ═══ */
.statusbar{position:absolute;left:0;right:0;bottom:0;height:var(--bot);z-index:40;
  display:flex;align-items:center;gap:16px;padding:0 14px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.statusbar__l,.statusbar__r{display:flex;align-items:center;gap:14px}
.statusbar__c{flex:1;display:flex;align-items:center;gap:11px;max-width:440px;margin:0 auto}
.sb-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.sb-branch svg{width:13px;height:13px;color:var(--a3)}
.sb-branch b{color:var(--a4)}
.sb-ok{color:var(--a1)}
.sb-pct{width:34px;justify-content:flex-end;color:var(--a1)}
.progress{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--a2),var(--a1));box-shadow:0 0 12px var(--a1)}

/* ═══ MINIMAP ═══ */
.minimap{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:9px}
.mm{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:10px;color:var(--dim);flex-direction:row-reverse}
.mm i{display:block;width:22px;height:2px;border-radius:2px;background:var(--line2);transition:.35s var(--ease)}
.mm span{opacity:0;transform:translateX(6px);transition:.3s var(--ease);white-space:nowrap}
.mm:hover span{opacity:1;transform:none}
.mm:hover i{background:var(--txt);width:30px}
.mm.is-on i{background:var(--a1);width:34px;box-shadow:0 0 12px var(--a1)}
.mm.is-on span{opacity:1;transform:none;color:var(--a1)}

/* ═══ KEYHINT ═══ */
.keyhint{position:absolute;left:calc(var(--gut) + 16px);bottom:calc(var(--bot) + 14px);z-index:40;
  display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;color:var(--dim);
  opacity:.75;transition:opacity .4s}
.keyhint.is-hidden{opacity:0}
kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line2);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;color:var(--txt)}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px){
  .skills{gap:24px}
  .skills__graph{display:none}
  .hero__art{flex-basis:min(38vw,330px)}
}
@media (max-width:940px){
  :root{--gut:34px}
  .gutter__nums{padding-right:8px;font-size:9px}
  .hero{flex-direction:column;align-items:stretch;gap:24px}
  .hero__text{max-width:100%;width:100%}
  .hero__art{flex:none;width:200px;align-self:center;margin-top:-10px}
  .term{display:none}
  .about{flex-direction:column;align-items:stretch;gap:20px}
  .about__doc{max-width:100%;width:100%}
  .about__body p{max-width:100%}
  .about__art{flex:none;width:230px;align-self:center}
  .skills{align-items:flex-start;min-height:0}
  .skills__json{width:min(290px,80vw)}
  .how,.lab{min-height:0}
  .hero__sub{max-width:100%}
  .contact{gap:24px}
  .contact__req{width:min(400px,86vw)}
  .hide-sm{display:none}
  .minimap{display:none}
  .panel{padding-right:8vw}
}
@media (max-width:640px){
  .tabs{display:none}
  .hero__title{font-size:31px}
  .skills__grid{grid-auto-flow:column;grid-template-rows:repeat(3,auto)}
  .skcol{width:220px}
  .lab{grid-template-rows:repeat(3,auto)}
  .keyhint{display:none}
  .statusbar__c{max-width:150px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}