:root{--bg:#0b0b0b;--panel:#141414;--line:rgba(255,255,255,.08);--tx:#f2f2f2;--dim:#7d7d7d;--r:22px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg) radial-gradient(ellipse at 50% 0,#1d1d1d,transparent 60%);color:var(--tx);font:400 15px/1.7 'Outfit',sans-serif;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 85%)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:'Space Mono',monospace}.dim{color:var(--dim)}.sm{font-size:12px;letter-spacing:.2em}.small{font-size:13px}
.wrap{width:min(1100px,92%);margin:0 auto}
.center{text-align:center}

/* splash */
#splash{position:fixed;inset:0;z-index:99;background:#000;display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .7s,visibility .7s}
#splash.hide{opacity:0;visibility:hidden}
.splash-icons{display:flex;gap:14px}.splash-icons span{width:38px;height:38px;border-radius:50%;background:#151515;display:grid;place-items:center;font-size:16px;animation:pop .8s both}
.splash-icons span:nth-child(2){animation-delay:.12s}.splash-icons span:nth-child(3){animation-delay:.24s}
.splash-text{font:800 34px 'Syne';letter-spacing:.02em;background:linear-gradient(#fff,#777);-webkit-background-clip:text;color:transparent;animation:pop .9s .3s both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.9)}}

/* nav */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1100px,92%);z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 26px;border-radius:18px;background:rgba(18,18,18,.72);backdrop-filter:blur(14px);border:1px solid var(--line);font-family:'Space Mono',monospace;font-size:13px}
.logo{color:#bdbdbd}.nav nav{display:flex;gap:32px}.nav nav a{color:#8a8a8a;padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
.nav nav a.active{color:#fff;border-color:#fff}.nav nav a:hover{color:#fff}

/* hero */
section{padding:110px 0 40px}
.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;position:relative;padding-top:130px}
h1{font:800 clamp(54px,8vw,92px)/.95 'Syne';letter-spacing:-.02em}
h1 span{background:linear-gradient(#bbb,#555);-webkit-background-clip:text;color:transparent}
.hero-text .mono.dim{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
.role{margin:30px 0 14px;font-size:15px;min-height:26px}.role:after{content:"|";margin-left:3px;animation:blink 1s steps(1) infinite;color:var(--dim)}
@keyframes blink{50%{opacity:0}}
.desc{color:#9a9a9a;max-width:470px;font-size:14px}.desc.just{max-width:none;text-align:justify}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.chips span{font:12px 'Space Mono';padding:7px 16px;border-radius:999px;background:#151515;border:1px solid var(--line);color:#bbb}
.hint{font-size:12px;margin-top:26px;line-height:1.9}
.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.25em}

/* lanyard */
.lanyard{position:relative;height:100%;min-height:560px;display:flex;justify-content:center;touch-action:none}
.swing{position:absolute;top:-130px;left:50%;width:240px;margin-left:-120px;transform-origin:50% 0;display:flex;flex-direction:column;align-items:center;will-change:transform;cursor:grab}
.swing:active{cursor:grabbing}
.strap{width:26px;height:460px;background:#050505;border:1px solid #222;display:flex;flex-direction:column;justify-content:space-around;align-items:center;overflow:hidden}
.strap b{writing-mode:vertical-rl;font:800 8px 'Syne';letter-spacing:.2em;color:#ddd}
.clip{width:18px;height:20px;background:linear-gradient(#999,#333);border-radius:3px;margin-top:-4px}
.idcard{width:150px;padding:8px;background:#e8e8e8;border-radius:12px;box-shadow:0 20px 50px #000;margin-top:-6px}
.idcard img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;display:block;background:#222;pointer-events:none}

/* about */
.about-top{display:grid;grid-template-columns:1fr 300px;gap:50px;align-items:center}
.big{font:800 clamp(40px,6vw,58px)/1.05 'Syne';margin:8px 0 22px}
.quote{display:inline-block;margin:22px 0;padding:10px 22px;border-radius:12px;background:#161616;border:1px solid var(--line);font-style:italic;font-size:12px}
.avatar{width:270px;height:270px;border-radius:50%;padding:8px;border:1px solid var(--line);justify-self:center}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:12px;font-weight:500;font-size:14px;background:#2a2a2a;border:1px solid var(--line);transition:.2s}
.btn:hover{background:#383838}.btn.light{background:#fff;color:#000}.btn.light:hover{background:#ddd}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25)}.btn.ghost:hover{background:#1e1e1e}.btn.off{opacity:.35;pointer-events:none}
.btn.mini{padding:8px 18px;border-radius:999px;font-size:13px}.btn.block{width:100%;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.stat{position:relative;padding:22px;border-radius:var(--r);background:#141414;border:1px solid var(--line);display:flex;flex-direction:column;gap:30px;transition:.2s}
.stat:hover{border-color:#444;transform:translateY(-3px)}
.stat>svg{width:36px;height:36px;padding:9px;border-radius:10px;background:#1e1e1e}
.stat b{position:absolute;top:18px;right:24px;font:700 15px 'Space Mono'}
.stat span{font-size:12px;letter-spacing:.12em;color:#aaa}.stat i{position:absolute;bottom:20px;right:22px;color:#777}

/* portfolio */
.title{font:700 clamp(32px,5vw,44px) 'Syne'}.sub{color:#8a8a8a;margin:6px 0 30px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);max-width:620px;margin:0 auto 40px;padding:6px;border-radius:999px;background:#121212;border:1px solid var(--line)}
.tabs button{padding:14px;border-radius:999px;color:#999;font-size:14px;transition:.25s}.tabs button.on{background:#262626;color:#fff}
.pane{display:none}.pane.on{display:block;animation:fade .45s}@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;text-align:left}
.card{background:#141414;border:1px solid var(--line);border-radius:26px}
.pcard,.ccard{padding:14px;color:inherit;text-align:left}
.thumb{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#1b1b1b;margin-bottom:16px}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .thumb{aspect-ratio:4/3}.ccard{cursor:zoom-in;transition:.2s}.ccard:hover{border-color:#444}
.pcard h3,.ccard h3{font:600 17px 'Syne';padding:0 6px}.pcard p,.ccard p{color:#8a8a8a;font-size:13.5px;padding:6px 6px 0;line-height:1.6}
.pfoot{display:flex;justify-content:space-between;align-items:center;padding:16px 6px 4px;font-size:13px}
.techgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;max-width:900px;margin:auto}
.tech{aspect-ratio:1;border-radius:26px;background:#141414;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:12px;color:#ccc;transition:.2s}
.tech:hover{transform:translateY(-4px);border-color:#444}.tech img{width:48px;height:48px;object-fit:contain}

/* contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;text-align:left;align-items:start;margin-top:36px}
.form-card{padding:34px;border-radius:34px}.h3{font:700 26px 'Syne';margin-bottom:6px}.h3.sm{font-size:16px}
.form{display:grid;gap:14px;margin-top:22px}
.field,.plain{display:flex;gap:12px;align-items:center;padding:15px 18px;border-radius:14px;background:#101010;border:1px solid var(--line);color:#8a8a8a;width:100%}
.field.area{align-items:flex-start}.field:focus-within,.plain:focus,.plain:focus-within{border-color:#cfcfcf;color:#fff}
.field input,.field textarea,.plain{background:transparent;border:0;outline:0;color:#fff;font:inherit;width:100%;resize:none}
.field textarea{height:100px}textarea.plain{height:110px;border:1px solid var(--line);background:#101010}input.plain{border:1px solid var(--line);background:#101010}
.upl{cursor:pointer;color:#999;border-style:solid}.btn.alt{background:#2b2b2b;padding:15px}
.note{font-size:13px;min-height:18px;color:#9c9}.note.err{color:#e88}
hr{border:0;border-top:1px solid var(--line);margin:26px 0 16px}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.social{display:flex;flex-direction:column;padding:14px 18px;border-radius:14px;background:#101010;border:1px solid var(--line);font-size:14px;transition:.2s}.social:hover{border-color:#444}.social span{font-size:11px}
.clist{margin-top:22px;display:grid;gap:10px;max-height:520px;overflow:auto;padding:12px;border-radius:22px;background:#101010;border:1px solid var(--line)}
.comment{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:#161616;border:1px solid var(--line)}
.comment.pinned{background:#1b1424;border-color:#3b2a52}
.av{width:38px;height:38px;border-radius:50%;background:#2b2b2b;display:grid;place-items:center;font-size:13px;flex:none}
.cbody{flex:1;min-width:0;font-size:14px}.cbody p{color:#aaa;font-size:13px;line-height:1.5;word-wrap:break-word}.cimg{max-width:180px;border-radius:12px;margin-top:8px}
.pin{display:inline-flex;gap:4px;align-items:center;margin-left:8px;padding:1px 9px;border-radius:999px;background:#2d1f44;color:#c9a9ff;font:normal 10px 'Space Mono'}
.like{display:flex;gap:5px;align-items:center;font-size:12px;color:#888}.like.on{color:#ff6b8a}.like.on svg{fill:#ff6b8a}
.foot{text-align:center;padding:60px 0 40px;font-size:12px}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.88);display:none;place-items:center;padding:30px}
#lightbox.on{display:grid}#lightbox img{max-width:min(900px,95%);max-height:90vh;border-radius:18px;background:#fff}
#lbx{position:absolute;top:24px;right:30px;width:44px;height:44px;border-radius:50%;background:#222;font-size:26px}

/* detail */
.pd{padding:60px 0}.back{display:inline-block;margin-bottom:28px;font-size:14px}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-title{font:800 clamp(34px,5vw,48px)/1.1 'Syne'}.rule{width:90px;height:2px;background:linear-gradient(90deg,#888,transparent);margin:16px 0 30px}
.mini-stats{display:flex;gap:14px;margin:26px 0}.mini-stats .card{padding:18px 26px;border-radius:18px;display:flex;flex-direction:column}.mini-stats b{font:700 22px 'Syne'}.mini-stats span{font-size:11px;color:#777}
.shot{padding:0;overflow:hidden;border-radius:30px}.shot img{width:100%;display:block}
.feats{margin-top:22px;padding:28px;border-radius:26px}.feats ul{list-style:none;margin-top:14px;display:grid;gap:12px;font-size:14px;color:#ddd}.feats li:before{content:"›";margin-right:12px;color:#777}
.pd .h3.sm{margin:30px 0 12px}

@media(max-width:860px){.hero,.about-top,.contact-grid,.pd-grid{grid-template-columns:1fr}.lanyard{min-height:420px}.nav nav{gap:16px}.logo{display:none}.stats{grid-template-columns:1fr}.avatar{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}