/* Device-specific portfolio experience. Deliberately scoped away from games and Geometric AI. */
.hx-phone-dock,.hx-tablet-rail{display:none}
@media(max-width:1024px){
  html[data-experience="phone"] body:not(.no-handheld),html[data-experience="tablet"] body:not(.no-handheld){background-image:radial-gradient(circle at 110% 0,color-mix(in srgb,var(--blue,var(--accent2,var(--accent))) 13%,transparent),transparent 34%),radial-gradient(circle at -10% 35%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 38%)}
  .hx-handheld .projects-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .hx-handheld .projects-hero::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-115px;top:-100px;background:radial-gradient(circle,color-mix(in srgb,var(--blue,var(--accent2,var(--accent))) 20%,transparent),transparent 68%);pointer-events:none}
  .hx-handheld .project-detail,.hx-handheld .lab-workspace{min-width:0}
  .hx-handheld .project-detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hx-handheld .project-detail-actions .button{justify-content:center;text-align:center;min-height:50px}
}
@media(max-width:720px){
  html[data-experience="phone"]{scroll-padding-top:72px}
  html[data-experience="phone"] body{padding-bottom:0}
  html[data-experience="phone"] header{min-height:68px;padding:10px 14px;background:color-mix(in srgb,var(--bg) 91%,transparent);backdrop-filter:blur(18px)}
  html[data-experience="phone"] .brand{font-size:1.5rem}html[data-experience="phone"] .brand>span{font-size:.78rem}html[data-experience="phone"] .brand small{display:none}
  html[data-experience="phone"] .wrap{width:calc(100% - 28px)}
  html[data-experience="phone"] .section{padding-block:58px}
  html[data-experience="phone"] .projects-hero{padding:46px 14px 38px;min-height:38svh;display:flex;flex-direction:column;justify-content:flex-end}
  html[data-experience="phone"] .projects-hero h1{font-size:clamp(2.55rem,12vw,4rem);line-height:.98}
  html[data-experience="phone"] .projects-hero .lead{font-size:1rem;line-height:1.55}
  html[data-experience="phone"] .hero{padding-top:38px}
  html[data-experience="phone"] .project-grid{display:grid;grid-template-columns:1fr;gap:14px}
  html[data-experience="phone"] .project-card{min-height:0;border-radius:16px;padding:24px 20px;box-shadow:0 18px 50px #0002}
  html[data-experience="phone"] .project-card.hx-science-card{background:radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--blue,var(--accent2,var(--accent))) 9%,transparent),transparent 35%),var(--surface,var(--panel,var(--bg2)))}
  html[data-experience="phone"] .project-card h2{font-size:1.55rem}
  html[data-experience="phone"] .project-card .project-number{margin-bottom:24px}
  html[data-experience="phone"] .card-bottom{gap:8px}
  html[data-experience="phone"] .filter-bar{position:sticky;top:68px;z-index:18;margin-inline:-14px;padding:10px 14px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  html[data-experience="phone"] .filter-bar::-webkit-scrollbar{display:none}html[data-experience="phone"] .filter-bar button{white-space:nowrap}
  html[data-experience="phone"] .filter-bar #filter-count{display:none}
  html[data-experience="phone"] .vnext-project-nav{top:68px;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px 14px}
  html[data-experience="phone"] .vnext-project-nav a{min-height:42px;font-size:.73rem;padding:5px 8px}html[data-experience="phone"] .vnext-project-nav a[data-project-nav="all"]{grid-column:1/-1;grid-row:1}
  html[data-experience="phone"] .project-detail-actions{grid-template-columns:1fr}
  .hx-phone-dock,.hx-tablet-rail{display:none!important}
  html[data-experience="phone"] .contact{padding-bottom:60px}
}
@media(min-width:721px) and (max-width:1024px){
  html[data-experience="tablet"] body{padding-left:0}
  html[data-experience="tablet"] .wrap{width:min(1100px,calc(100% - 48px))}
  html[data-experience="tablet"] .hero{grid-template-columns:1fr;min-height:0}
  html[data-experience="tablet"] .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  html[data-experience="tablet"] .project-card{border-radius:16px;min-height:300px}
  html[data-experience="tablet"] .vnext-project-nav{top:76px}
  .hx-tablet-rail{display:none!important}
}