@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{
  --bg:#020817;
  --bg2:#07111d;
  --bg3:#0b1624;
  --panel:rgba(10, 23, 36, .88);
  --panel2:rgba(6, 14, 25, .94);
  --line:#1d3248;
  --line-strong:#284668;
  --ink:#eff7ff;
  --muted:#9bb0c5;
  --dim:#627186;
  --cyan:#58b6d6;
  --teal:#46c0b9;
  --aqua:#78eaf6;
  --lime:#9ca50f;
  --yellow:#f6e600;
  --glow:rgba(246,230,0,.18);
  --glow-cyan:rgba(88,182,214,.16);
  --mono:Consolas,'SFMono-Regular',monospace;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:
    radial-gradient(circle at 18% 16%, rgba(156,165,15,.08), transparent 24%),
    radial-gradient(circle at 77% 12%, rgba(88,182,214,.09), transparent 18%),
    radial-gradient(circle at 80% 78%, rgba(70,192,185,.10), transparent 20%),
    linear-gradient(135deg,#020817 0%,#06101c 45%,#091524 100%);
  font-family:var(--body);color:var(--ink);font-size:15px;overflow-x:hidden;
}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
body.overlay-open{overflow:hidden}
.noise,.ambient-grid{position:fixed;inset:0;pointer-events:none}
.noise{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,0));mix-blend-mode:soft-light;opacity:.2}
.ambient-grid{z-index:-1;background-image:linear-gradient(rgba(88,182,214,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(88,182,214,.055) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(90deg,#000,transparent 90%)}
.site-wrap{max-width:1560px;min-height:100vh;margin:auto;padding:0 clamp(18px,4vw,64px);position:relative}
.site-wrap::before,.site-wrap::after{content:'';position:fixed;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(88,182,214,.16),transparent);pointer-events:none}
.site-wrap::before{left:max(10px,calc((100vw - 1550px)/2))}
.site-wrap::after{right:max(10px,calc((100vw - 1550px)/2))}
.top-bar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(88,182,214,.18);gap:18px}
.wordmark{display:flex;align-items:center;gap:15px;white-space:nowrap}
.wordmark-icon{display:grid;place-items:center;width:50px;height:42px;border:1px solid var(--cyan);font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-1px;background:linear-gradient(180deg,rgba(88,182,214,.16),rgba(2,8,23,.3));clip-path:polygon(0 0,84% 0,100% 18%,100% 100%,0 100%)}
.wordmark-dot{color:var(--yellow)}
.wordmark-text{font:700 13px var(--mono);letter-spacing:.15em}
.wordmark-slash{color:var(--teal)}
.wordmark-version{font-size:10px;color:var(--dim);font-weight:400;margin-left:6px}
.top-middle{color:var(--dim);font:10px var(--mono);letter-spacing:.14em;white-space:nowrap}
.status-light{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow);margin-right:9px}
.top-slash{padding:0 10px;color:#456378}
.top-actions{display:flex;align-items:center;gap:10px}
.text-action,.contact-action{font:11px var(--mono);font-weight:700;letter-spacing:.055em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,transform .2s,border-color .2s}
.text-action{color:var(--muted);background:transparent;border:1px solid var(--line);padding:14px 18px}
.text-action:hover{color:var(--ink);border-color:var(--yellow);box-shadow:0 0 0 1px rgba(246,230,0,.15) inset}
.contact-action{background:linear-gradient(90deg,var(--yellow),#f7f463);color:#09111e;padding:15px 19px;font-weight:800}
.contact-action:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(246,230,0,.12)}
.intro{padding:36px 0 20px}
.eyebrow{display:flex;gap:12px;align-items:center;font:11px var(--mono);color:var(--teal);letter-spacing:.19em}
.crosshair{font-size:16px;line-height:1}.eyebrow-line{display:inline-block;width:27px;height:1px;background:var(--dim)}
.intro-line{display:flex;align-items:end;justify-content:space-between;gap:25px}
.intro h1{font:700 clamp(44px,5vw,78px)/.99 var(--display);letter-spacing:.002em;text-transform:uppercase;margin:12px 0 7px}
.intro h1 em{font-style:normal;color:var(--yellow)}
.intro p{margin:0;color:var(--muted);font-size:13px;letter-spacing:.008em;max-width:65ch}
.record-id{border-left:1px solid var(--line-strong);padding:5px 0 5px 20px;display:flex;flex-direction:column;gap:2px;min-width:140px}
.record-id span,.record-id small{font:10px var(--mono);letter-spacing:.12em;color:var(--dim)}
.record-id strong{font:700 26px var(--display);letter-spacing:.07em}
.record-id small{color:var(--yellow)}
.inventory-heading{display:flex;align-items:center;gap:17px;font:10px var(--mono);letter-spacing:.17em;color:var(--dim);padding:20px 0 14px}
.decorative-rule{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
.inventory-grid{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) minmax(390px,1.65fr) minmax(220px,1fr);gap:16px;align-items:stretch}
.category-stack{display:flex;flex-direction:column;gap:14px;justify-content:center;position:relative;z-index:2}
.category{min-height:108px;width:100%;text-align:left;color:var(--ink);background:linear-gradient(105deg,rgba(14,28,44,.84),rgba(5,14,26,.94));border:1px solid rgba(88,182,214,.25);display:flex;align-items:center;gap:14px;padding:17px;position:relative;cursor:pointer;transition:all .25s ease;overflow:hidden;backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(88,182,214,.04) inset}
.category::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:transparent;transition:background .2s}
.category::after{content:'';position:absolute;inset:auto 14px 10px auto;width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(246,230,0,.45));opacity:0;transition:opacity .2s,transform .2s;transform:translateX(8px)}
.category:hover,.category.is-active{background:linear-gradient(115deg,rgba(18,35,53,.94),rgba(7,19,32,.98));border-color:rgba(246,230,0,.55);transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.28),0 0 0 1px rgba(246,230,0,.06) inset}
.category:hover::before,.category.is-active::before{background:linear-gradient(180deg,var(--yellow),var(--teal))}
.category:hover::after,.category.is-active::after{opacity:1;transform:translateX(0)}
.category-count{align-self:flex-start;font:11px var(--mono);color:var(--yellow);display:flex;flex-direction:column;gap:9px;min-width:22px}
.category-mark{font-size:24px;line-height:25px;color:var(--cyan)}
.category-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.category-copy strong{font:700 clamp(17px,1.65vw,24px)/1 var(--display);letter-spacing:.045em}
.category-copy small{font-size:11px;line-height:1.45;color:var(--muted)}
.category-arrow{margin-left:auto;align-self:flex-end;opacity:.7;color:var(--yellow);font-size:18px;transition:transform .2s}
.category:hover .category-arrow{transform:translate(3px,-3px)}
.connector-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.connector-path{fill:none;stroke:rgba(88,182,214,.25);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 8;opacity:.18;transition:opacity .22s ease, stroke .22s ease, filter .22s ease, stroke-width .22s ease}
.connector-node{fill:#58b6d6;opacity:.15;transition:opacity .22s ease, filter .22s ease, fill .22s ease}
.connector-node.target{fill:#46c0b9}
.connector-label{fill:#6b7c91;font:9px var(--mono);letter-spacing:.12em;opacity:.0;transition:opacity .22s ease}
.connector-active .connector-path{stroke:rgba(246,230,0,.92);stroke-width:2.2;opacity:.95;filter:drop-shadow(0 0 5px rgba(246,230,0,.4))}
.connector-active .connector-node{opacity:1;filter:drop-shadow(0 0 6px rgba(246,230,0,.45));fill:#f6e600}
.connector-active .connector-node.target{fill:#78eaf6;filter:drop-shadow(0 0 8px rgba(120,234,246,.45))}
.connector-active .connector-label{opacity:.95}
.character-stage{height:440px;position:relative;overflow:hidden;background:radial-gradient(circle at center 36%,rgba(88,182,214,.12),transparent 30%),linear-gradient(180deg,rgba(7,19,31,.82),rgba(3,9,18,.98));border:1px solid rgba(88,182,214,.28);isolation:isolate;backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(88,182,214,.04) inset}
.character-stage::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(120,234,246,.015) 6px 7px);pointer-events:none;z-index:10}
.character-stage::after{content:'';position:absolute;inset:auto 0 0 0;height:88px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.36));pointer-events:none;z-index:0}
.stage-bar{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--teal));box-shadow:0 0 16px rgba(246,230,0,.24)}
.stage-border-tl,.stage-border-br{position:absolute;width:28px;height:28px;border-color:var(--yellow);z-index:11}.stage-border-tl{top:0;left:0;border-top:2px solid;border-left:2px solid}.stage-border-br{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}
.stage-topline{position:absolute;top:15px;left:18px;right:18px;display:flex;justify-content:space-between;font:10px var(--mono);color:#90a5be;letter-spacing:.1em;z-index:3}
.visual-live{color:var(--yellow)}.visual-live i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--yellow)}
.stage-coordinates{position:absolute;top:60px;left:18px;color:var(--dim);font:10px/1.7 var(--mono);letter-spacing:.1em;z-index:3}
.stage-scaffold{position:absolute;top:64px;bottom:85px;width:1px;background:linear-gradient(transparent,rgba(88,182,214,.2),transparent)}
.stage-scaffold-left{left:15%}.stage-scaffold-right{right:15%}
.scan-circle{position:absolute;border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%);pointer-events:none}
.scan-circle-outer{width:320px;height:320px;border:1px dashed rgba(88,182,214,.22)}
.scan-circle-inner{width:240px;height:240px;border:1px solid rgba(70,192,185,.16);box-shadow:0 0 90px 14px rgba(88,182,214,.08)}
.character-hitarea{position:absolute;inset:42px 0 46px;cursor:pointer;border:0;background:none;padding:0;width:100%;display:flex;align-items:center;justify-content:center;z-index:4}
.portrait-shell{position:relative;width:min(76%,330px);height:min(100%,318px);display:flex;align-items:center;justify-content:center;transition:transform .28s ease}
.character-hitarea:hover .portrait-shell{transform:translateY(-2px)}
.portrait-frame{position:absolute;inset:0;border:1px solid rgba(88,182,214,.38);clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%)}
.frame-outer{box-shadow:0 0 0 1px rgba(88,182,214,.06) inset,0 0 40px rgba(88,182,214,.08)}
.frame-inner{inset:12px;border-color:rgba(246,230,0,.28);opacity:.95}
.portrait-outline{position:absolute;inset:7px;border:1px dashed rgba(120,234,246,.18);clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);opacity:.55;transition:opacity .25s ease, box-shadow .25s ease, border-color .25s ease}
.portrait-photo-wrap{position:absolute;inset:22px;overflow:hidden;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);background:linear-gradient(180deg,rgba(7,17,29,.8),rgba(5,12,22,.96));box-shadow:inset 0 -40px 80px rgba(0,0,0,.38)}
.avatar-photo{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.02);transform:scale(1.02);transform-origin:center top}
.photo-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(88,182,214,.08),transparent 26%,transparent 60%,rgba(2,8,23,.18) 100%),linear-gradient(120deg,rgba(246,230,0,.07),transparent 35%,transparent 70%,rgba(70,192,185,.08) 100%)}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 6px);mix-blend-mode:soft-light;opacity:.35}
.hotspot{position:absolute;width:18px;height:18px;border-radius:50%;border:1px solid rgba(120,234,246,.45);background:rgba(88,182,214,.16);box-shadow:0 0 0 8px rgba(88,182,214,.03);opacity:.45;transition:opacity .22s ease,background .22s ease,border-color .22s ease,transform .22s ease, box-shadow .22s ease}
.hotspot::after{content:'';position:absolute;inset:4px;border-radius:50%;background:currentColor;color:#78eaf6;opacity:.85}
.hotspot-head{top:62px;left:50%;transform:translateX(-50%)}
.hotspot-torso{top:152px;left:39%}
.hotspot-shoulder{top:156px;right:29%}
.hotspot-heart{top:170px;left:47%}
.avatar-hover-label{position:absolute;top:16px;right:-2px;background:rgba(5,16,29,.96);border:1px solid rgba(246,230,0,.65);font:10px var(--mono);padding:9px 10px;color:var(--yellow);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.character-hitarea:hover .avatar-hover-label,.character-hitarea:focus-visible .avatar-hover-label{opacity:1;transform:none}
.character-stage[data-active="profile"] .portrait-outline{opacity:1;border-color:rgba(246,230,0,.75);box-shadow:0 0 26px rgba(246,230,0,.14)}
.character-stage[data-active="experience"] .hotspot-torso,
.character-stage[data-active="projects"] .hotspot-torso,
.character-stage[data-active="education"] .hotspot-head,
.character-stage[data-active="skills"] .hotspot-shoulder,
.character-stage[data-active="codex"] .hotspot-heart{opacity:1;background:rgba(246,230,0,.2);border-color:rgba(246,230,0,.75);box-shadow:0 0 0 8px rgba(246,230,0,.06),0 0 18px rgba(246,230,0,.16);transform:scale(1.08)}
.stage-floor{position:absolute;bottom:34px;left:50%;width:54%;height:56px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(70,192,185,.28);z-index:1}
.stage-floor div{position:absolute;inset:11px;border-radius:50%;border:1px dashed rgba(88,182,214,.24)}
.stage-floor span{position:absolute;inset:23px;border-radius:50%;border:1px solid rgba(246,230,0,.3)}
.stage-name{position:absolute;bottom:16px;left:18px;display:flex;flex-direction:column;z-index:6;gap:2px;text-shadow:0 2px 8px #00151d}
.stage-name span{font:9px var(--mono);letter-spacing:.1em;color:var(--yellow)}
.stage-name strong{font:700 28px/1 var(--display);letter-spacing:.04em}.stage-name small{font:9px var(--mono);color:var(--muted);letter-spacing:.05em}
.stage-status{position:absolute;right:14px;bottom:14px;font:9px var(--mono);color:var(--dim);letter-spacing:.04em;z-index:8}.stage-status span{color:var(--teal)}
.data-panel{border:1px solid rgba(88,182,214,.3);margin-top:15px;background:linear-gradient(103deg,rgba(7,18,31,.95),rgba(4,12,21,.98));position:relative;box-shadow:0 16px 30px rgba(0,0,0,.18)}
.data-panel::before{content:'';position:absolute;top:-1px;left:-1px;width:110px;border-top:2px solid var(--yellow)}
.panel-identifier{padding:12px 19px 0;display:flex;gap:7px;align-items:center;font:9px var(--mono);letter-spacing:.15em;color:var(--dim)}
.panel-dot{width:5px;height:5px;background:var(--yellow);border-radius:50%;margin-right:4px}.panel-identifier #panel-id{color:var(--teal)}
.panel-body{padding:12px 18px 19px;display:grid;grid-template-columns:1.35fr 1fr auto;gap:20px;align-items:center}
.panel-copy h2{margin:0 0 6px;font:700 clamp(28px,2vw,42px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}.panel-copy p{margin:0;color:var(--muted);line-height:1.55}.panel-tag-caption{font:9px var(--mono);color:var(--dim);letter-spacing:.14em;margin-bottom:10px}.tag-list{display:flex;gap:8px;flex-wrap:wrap}.tag-list span{display:inline-flex;align-items:center;border:1px solid rgba(88,182,214,.25);padding:9px 11px;background:rgba(88,182,214,.05);font-size:12px;color:var(--ink)}
.open-record{padding:16px 18px;border:1px solid rgba(246,230,0,.6);background:linear-gradient(90deg,rgba(246,230,0,.06),rgba(88,182,214,.08));color:var(--ink);font:700 11px var(--mono);letter-spacing:.09em;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,border-color .2s}.open-record:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.18);border-color:var(--yellow)}
.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 28px;color:var(--dim);font:10px var(--mono);letter-spacing:.11em}.footer-hint{color:var(--teal)}
.record-overlay,.quick-overlay{position:fixed;inset:0;background:rgba(0,7,14,.74);display:grid;place-items:center;padding:clamp(14px,3vw,28px);z-index:100}
.record-screen,.quick-screen{width:min(1080px,100%);max-height:min(88vh,900px);overflow:auto;background:linear-gradient(180deg,#07111c,#030a13);border:1px solid rgba(88,182,214,.28);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.record-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 20px;border-bottom:1px solid rgba(88,182,214,.18);position:sticky;top:0;background:rgba(5,14,25,.95);backdrop-filter:blur(12px);z-index:4}.record-brand{font:700 13px var(--mono);letter-spacing:.14em}.close-record,.quick-close,#next-record-btn,.quick-cta button{cursor:pointer;background:transparent;color:var(--ink);border:1px solid rgba(88,182,214,.28);padding:10px 12px;transition:all .2s ease}.close-record span{color:var(--dim)}
.close-record:hover,.quick-close:hover,#next-record-btn:hover,.quick-cta button:hover{border-color:rgba(246,230,0,.65);transform:translateY(-1px)}
.record-container{padding:26px}.record-eyebrow,.record-prefix{font:10px var(--mono);letter-spacing:.14em;color:var(--teal)}
.record-heading-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 0 24px;border-bottom:1px solid rgba(88,182,214,.16)}
.record-heading-row h2,.quick-screen h2{margin:10px 0 6px;font:700 clamp(36px,5vw,68px)/.94 var(--display);text-transform:uppercase}.record-lead,.quick-subtitle,.quick-screen p{color:var(--muted);max-width:72ch;line-height:1.68}.record-symbol{font:700 clamp(52px,8vw,92px)/1 var(--display);color:rgba(246,230,0,.85)}
.record-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:24px 0}.record-card{background:linear-gradient(180deg,rgba(9,20,35,.96),rgba(4,11,20,.96));border:1px solid rgba(88,182,214,.2);padding:18px;min-height:200px}.record-card-meta{font:10px var(--mono);letter-spacing:.14em;color:var(--teal);margin-bottom:10px}.record-card h3{margin:0 0 10px;font:700 26px/1 var(--display);letter-spacing:.02em}.record-card p{margin:0;color:var(--muted);line-height:1.65}.record-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px;border-top:1px solid rgba(88,182,214,.16);color:var(--dim);font:10px var(--mono);letter-spacing:.12em}
.quick-screen{position:relative;padding:26px}.quick-close{position:absolute;top:14px;right:14px}.quick-eyebrow{font:10px var(--mono);letter-spacing:.15em;color:var(--teal)}.quick-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.quick-columns h3{margin:0 0 8px;font:700 20px/1 var(--display);letter-spacing:.03em}.quick-columns p{margin:0}.quick-cta{display:flex;flex-wrap:wrap;gap:12px}.quick-cta a{padding:12px 14px;background:linear-gradient(90deg,var(--yellow),#f7f463);color:#08111d;font:800 11px var(--mono);letter-spacing:.09em}
[hidden]{display:none !important}
@media (max-width:1180px){
  .inventory-grid{grid-template-columns:1fr;gap:14px}
  .connector-layer{display:none}
  .category-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .category{min-height:94px}
  .character-stage{order:-1}
  .panel-body{grid-template-columns:1fr}
  .bottom-bar{flex-wrap:wrap}
}
@media (max-width:860px){
  .top-bar,.intro-line,.record-heading-row,.record-bottom{flex-direction:column;align-items:flex-start}
  .top-bar{height:auto;padding:18px 0}
  .top-actions{width:100%;flex-wrap:wrap}
  .top-middle{white-space:normal}
  .category-stack{grid-template-columns:1fr 1fr}
  .character-stage{height:420px}
  .portrait-shell{width:min(80%,310px)}
  .stage-name strong{font-size:24px}
  .quick-columns{grid-template-columns:1fr}
}
@media (max-width:640px){
  .intro h1{font-size:38px}
  .category-stack{grid-template-columns:1fr}
  .character-stage{height:390px}
  .character-hitarea{inset:40px 0 62px}
  .portrait-shell{width:min(82%,290px);height:min(100%,280px)}
  .avatar-hover-label{display:none}
  .stage-name{bottom:14px;right:18px}
  .stage-name small{max-width:32ch}
}