#portfolio { scroll-margin-top: 100px; }
.portfolio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; }
.portfolio-eyebrow { display:block; color:#38e1d6; font:11px/1.6 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.portfolio-heading>p { color:#9aa2bd; font:14px/1.7 Inter,sans-serif; }
.portfolio-panels { display:flex; gap:10px; }
.portfolio-panel { position:relative; isolation:isolate; overflow:hidden; min-width:0; flex:1; border:1px solid #262e47; border-radius:18px; background:#101625; }
.portfolio-backdrop { position:absolute; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.32; filter:saturate(.5); transition:opacity .5s; }
.portfolio-panel:before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0a0e1a22,#0a0e1ae8); }
.portfolio-panel-heading { margin:0; }
.portfolio-toggle { width:100%; display:flex; align-items:center; gap:18px; padding:22px; color:#e4e1ee; text-align:left; }
.portfolio-number { color:#38e1d6; font:14px 'JetBrains Mono',monospace; }
.portfolio-rail-title { font:600 18px/1.25 'Space Grotesk',sans-serif; }
.portfolio-plus { display:grid; place-items:center; flex-shrink:0; margin-left:auto; width:34px; height:34px; border:1px solid #ffffff30; border-radius:50%; font:25px/1 Inter,sans-serif; transition:transform .4s,background .4s; }
.portfolio-toggle:focus-visible,.portfolio-visit:focus-visible,.portfolio-bottom a:focus-visible { outline:2px solid #38e1d6; outline-offset:-4px; }
.portfolio-detail { padding:0 24px 28px; }
.portfolio-detail[hidden] { display:none; }
.portfolio-browser { overflow:hidden; border:1px solid #ffffff20; border-radius:10px; background:#101625; box-shadow:0 18px 40px #0004; }
.portfolio-browser-bar { height:28px; display:flex; align-items:center; gap:5px; padding:0 10px; }
.portfolio-browser-bar>span { width:5px; height:5px; border-radius:50%; background:#626b82; }
.portfolio-browser-bar i { font:9px Inter,sans-serif; color:#9aa2bd; margin:auto; padding-right:25px; }
.portfolio-browser img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.portfolio-copy { padding-top:24px; }
.portfolio-copy .portfolio-eyebrow { margin-bottom:6px; }
.portfolio-project-name { font:600 clamp(24px,2.6vw,36px)/1.1 'Space Grotesk',sans-serif; color:#e4e1ee; letter-spacing:-.03em; }
.portfolio-description { color:#b5bdd2; font:14px/1.75 Inter,sans-serif; margin:12px 0 18px; max-width:510px; }
.portfolio-visit { display:inline-flex; align-items:center; gap:28px; padding:11px 19px; border-radius:8px; background:#5b52e6; color:white; font:500 14px Inter,sans-serif; transition:background .2s; }
.portfolio-visit:hover { background:#6c63ff; }
.portfolio-bottom { display:flex; justify-content:space-between; gap:16px; margin-top:20px; font:12px/1.6 Inter,sans-serif; color:#9aa2bd; }
.portfolio-bottom a { color:#38e1d6; }
.portfolio-ready .portfolio-panel { transition:flex-grow .7s cubic-bezier(.65,0,.35,1),border-color .3s; }
.portfolio-ready .portfolio-panel.is-open { flex-grow:5.8; border-color:#6c63ff70; }
.portfolio-ready .is-open .portfolio-backdrop { opacity:.08; }
.portfolio-ready .is-open .portfolio-plus { transform:rotate(45deg); background:#6c63ff30; }
.portfolio-ready .portfolio-detail { animation:portfolio-reveal .55s ease both; }
@keyframes portfolio-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(min-width:768px) {
  .portfolio-ready .portfolio-panels { min-height:570px; }
  .portfolio-ready .portfolio-panel:not(.is-open) .portfolio-panel-heading { height:100%; }
  .portfolio-ready .portfolio-panel:not(.is-open) .portfolio-toggle { height:100%; flex-direction:column; padding:26px 12px; }
  .portfolio-ready .portfolio-panel:not(.is-open) .portfolio-rail-title { writing-mode:vertical-rl; transform:rotate(180deg); margin-top:auto; font-size:22px; }
  .portfolio-ready .portfolio-panel:not(.is-open) .portfolio-plus { margin:24px 0 0; }
  .portfolio-ready .portfolio-browser { max-width:570px; margin:0 auto; }
  .portfolio-ready .portfolio-detail { padding:0 30px 28px; }
  .portfolio-ready .portfolio-copy { max-width:570px; margin:auto; }
}
@media(hover:hover) and (pointer:fine) {
  .portfolio-ready:not(.has-open) .portfolio-panel:hover { flex-grow:1.35; border-color:#38e1d680; }
  .portfolio-toggle:hover .portfolio-plus { border-color:#38e1d6; }
}
@media(max-width:767px) {
  .portfolio-heading { display:block; margin-bottom:24px; }
  .portfolio-heading>p { margin-top:14px; }
  .portfolio-panels { flex-direction:column; }
  .portfolio-toggle { padding:20px 16px; gap:12px; min-height:80px; }
  .portfolio-rail-title { font-size:17px; }
  .portfolio-detail { padding:0 16px 24px; }
  .portfolio-bottom { flex-direction:column; gap:8px; }
  .portfolio-eyebrow { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  #portfolio *,#portfolio *:before { animation:none!important; transition:none!important; }
}