/* Portfolio visual narrative */
:root{--electric:#b8a5ff;--mint:#9ce7d0;--paper:#eeedf8}
body{background:radial-gradient(ellipse at 78% 4%,#343053 0,transparent 32%),#0c0e18}
.hero{position:relative}.hero:before{content:'01 / PORTFOLIO';position:absolute;right:0;top:25px;color:#918ba9;font:10px var(--mono);letter-spacing:.18em}.hero h1{letter-spacing:-.06em}.hero h1 span{color:#d8ccff}.hero h1 em{color:#b6a7ff}.hero-side{overflow:hidden;box-shadow:0 28px 90px #0006;border-radius:4px;background:linear-gradient(150deg,#25223d,#131621 75%)}.hero-side:after{content:'';position:absolute;width:180px;height:180px;right:-80px;top:-80px;border:1px solid #d1c5ff55;border-radius:50%;box-shadow:0 0 0 24px #b6a7ff09,0 0 0 50px #b6a7ff08;pointer-events:none}.flow-stack>div{border-left:2px solid #ae9aff}.flow-stack>div:nth-child(2){border-left-color:#9ce7d0}.flow-stack>div:nth-child(3){border-left-color:#f4bcb0}
.trace{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;border-top:1px solid #343547}.trace-copy h2{font-size:clamp(36px,4.2vw,62px);line-height:1.04;letter-spacing:-.045em;margin:28px 0}.trace-copy>p:not(.label){max-width:330px;color:#bcbac9;line-height:1.7;margin-bottom:28px}.trace-board{border:1px solid #514b6b;background:linear-gradient(150deg,#1b1b2b,#11151e);box-shadow:0 30px 80px #0004}.trace-bar,.trace-caption{display:flex;justify-content:space-between;padding:18px 22px;color:#aaa4c5;font:9px var(--mono);letter-spacing:.1em}.trace-bar{border-bottom:1px solid #3a394b}.trace-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #3a394b}.trace-steps button{appearance:none;text-align:left;border:0;border-right:1px solid #3a394b;background:transparent;color:#aaa7ba;padding:20px 13px;cursor:pointer;min-width:0;transition:background .25s,color .25s}.trace-steps button:last-child{border-right:0}.trace-steps button:hover,.trace-steps button[aria-selected=true]{background:#332d4b;color:#fff}.trace-steps button[aria-selected=true]{box-shadow:inset 0 -3px var(--electric)}.trace-steps span,.trace-steps b,.trace-steps small{display:block}.trace-steps span{font:10px var(--mono);color:var(--electric);margin-bottom:16px}.trace-steps b{font-size:13px}.trace-steps small{font-size:10px;color:#aaa7ba;margin-top:5px}.trace-content{padding:30px 24px 24px;min-height:240px;display:grid;grid-template-columns:28px 1fr;column-gap:20px}.trace-indicator{display:flex;flex-direction:column;gap:12px;align-items:center}.trace-indicator span{width:9px;height:9px;background:#49455c;border-radius:50%}.trace-indicator span:first-child{background:var(--mint);box-shadow:0 0 18px #9ce7d0}.trace-kicker{color:var(--mint);font:10px var(--mono);letter-spacing:.13em;margin:0 0 14px}.trace-content h3{font-size:25px;letter-spacing:-.035em;margin:0 0 12px}.trace-content p:not(.trace-kicker){color:#bcbac9;line-height:1.7;margin:0;max-width:440px}.trace-code{grid-column:2;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;font:10px var(--mono);color:#b7b2ca}.trace-code b{color:#9ce7d0}.trace-caption{border-top:1px solid #3a394b;font-size:9px}.project-detail{background:radial-gradient(circle at 100% 0,#332b4b 0,transparent 45%),#171924}.project-list button{transition:background .2s,box-shadow .2s}.skill-grid article{transition:background .25s,transform .25s}.skill-grid article:hover{background:#27233b;transform:translateY(-3px)}a:focus-visible,button:focus-visible{outline:2px solid #a8f1d9;outline-offset:3px}
@media(max-width:800px){.hero:before{display:none}.trace{padding-top:75px;padding-bottom:75px;grid-template-columns:1fr;gap:30px}.trace-copy h2{font-size:40px}.trace-steps button{padding:16px 9px}.trace-steps b{font-size:11px}.trace-steps small{font-size:9px}.trace-content{min-height:225px}.trace-code{gap:6px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}