/* Shared project navigation stays useful without JavaScript. */
.top { gap:22px; }
.project-nav { display:flex; align-items:center; gap:18px; min-width:0; flex-shrink:0; }
.project-nav .brand { flex-shrink:0; }
.project-nav .brand-inactive { color:#a3a9b9; opacity:.72; }
.project-nav .brand-inactive img { filter:grayscale(1); opacity:.8; }
.project-nav .brand-inactive:hover { color:var(--fg); opacity:1; }
.projects-switch { display:inline-flex; align-items:center; gap:7px; color:#939bac; font-size:12px; font-weight:550; padding:8px 10px; border:1px solid transparent; border-radius:9px; white-space:nowrap; transition:color .2s,background .2s,border-color .2s; }
.projects-switch-icon { font-size:15px; line-height:1; color:#8b95ab; }
.projects-switch:hover { color:var(--fg); background:#b9c9ef08; }
.projects-switch.active { color:#e3e8f6; border-color:#bdccec26; background:linear-gradient(135deg,#a8c3ff12,#e0b7dd08); }
.projects-switch.active .projects-switch-icon { color:#c6d4f5; }
.top nav { gap:14px; font-size:13px; }
.language-switch { display:flex; align-items:center; gap:5px; border-left:1px solid #bfcdf426; padding-left:13px; margin-left:1px; color:#6e788e; font-size:10px; flex-shrink:0; }
.language-switch a { padding:5px 2px; color:#9ba5ba; }
.language-switch a[aria-current] { color:#eef2ff; font-weight:700; }
.language-switch a:hover { color:var(--fg); }
.top nav>a[aria-current="page"]:not(.pill) { color:var(--fg); }
.footer-identity { min-width:0; }
.footer-authors { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:7px; font-size:11px; line-height:1.6; }
.footer-authors>span:first-child { margin-right:2px; color:#80899d; }
.foot .footer-authors a { color:#bac2d5; }
.foot .footer-authors a:hover { color:var(--fg); }
.foot .links { flex-wrap:wrap; justify-content:flex-end; }
.verification-panel .sub { overflow-wrap:anywhere; }
.verification-panel input[name="code"] { font-family:ui-monospace,Consolas,monospace; font-size:22px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.verification-panel form + form { margin-top:14px; }
.email-verified { color:#bbd7dd; }

/* Public support remains reachable before sign-in and email verification. */
.foot .footer-support { display:inline-block; margin-top:8px; font-size:11px; color:#a2b4d1; overflow-wrap:anywhere; }
.footer-copyright { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-verification { display:inline-flex; align-items:center; padding-left:12px; border-left:1px solid #b9c7e226; font-size:10px; color:#8792a9; line-height:1.4; }
.footer-verification code { color:#b9c7e2; font:inherit; letter-spacing:.03em; }
.foot .links { max-width:480px; row-gap:9px; }
.support-contact { width:100%; margin:25px 0 28px; background:linear-gradient(130deg,#aac5ff0b,#e5bdd908),#10151f; }
.support-contact-label { margin:0 0 9px; color:#a2b5d3; font-size:11px; }
.support-contact h2,.support-ticket-access h2 { margin:0 0 10px; font-size:23px; }
.support-contact .muted { max-width:620px; line-height:1.8; }
.support-email { display:inline-flex; align-items:center; gap:12px; max-width:100%; margin-top:7px; color:#d5e2fa; font-size:clamp(17px,2.6vw,24px); line-height:1.6; overflow-wrap:anywhere; }
.support-email:hover { color:#fff; }
.support-email span { font-size:17px; flex-shrink:0; }
.support-contact .support-contact-note { margin:13px 0 0; color:#8996af; font-size:11px; }
.support-ticket-intro { margin-bottom:18px; overflow-wrap:anywhere; }
.support-ticket-access { width:100%; margin-top:20px; }
.support-ticket-access p { max-width:660px; line-height:1.8; }
.support-ticket-access .btn { margin-top:8px; }
@media (max-width:650px) {
  .support-contact,.support-ticket-access { padding:23px; border-radius:18px; }
  .support-email { display:block; }
  .support-contact h2,.support-ticket-access h2 { font-size:21px; }
  .foot .links { max-width:100%; }
}

/* A quiet collection surface, with the same cold metal as the product site. */
.projects-page { position:relative; isolation:isolate; background:#0a0c12; }
.projects-page::before { content:""; position:absolute; top:0; left:0; right:0; height:820px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 12% 0,#5277bd1c,transparent 52%),radial-gradient(ellipse at 90% 18%,#aa86c218,transparent 48%); }
.projects-page main { padding-bottom:80px; }
.projects-hero { padding:76px 0 45px; max-width:730px; }
.projects-hero .eyebrow { margin:0 0 19px; color:#9aafcf; font-size:10px; letter-spacing:.17em; }
.projects-hero h1 { margin:0 0 21px; font-size:clamp(42px,6vw,70px); font-weight:550; letter-spacing:-.06em; line-height:1.04; }
.projects-title-dot { color:#a5b6d9; }
.projects-intro { max-width:600px; color:#aeb8cd; font-size:16px; line-height:1.8; margin:0; }
.projects-collection { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; }
.project-card { min-width:0; display:flex; flex-direction:column; padding:32px; border:1px solid #b8c9f026; border-radius:19px; background:linear-gradient(145deg,#b6c9f70a,#ffffff01 48%,#d8b5df06),#11151e; }
.project-available { box-shadow:0 20px 70px #00000026; }
.project-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:34px; }
.project-card-top img { border-radius:17px; box-shadow:0 0 32px #adc3ff12; }
.project-state { display:inline-flex; align-items:center; gap:7px; color:#c2d2e9; font-size:10px; line-height:1.6; padding:5px 10px; border:1px solid #b6caef24; border-radius:99px; }
.project-state i { width:4px; height:4px; border-radius:50%; background:#c4eedb; }
.project-platform { margin:0 0 9px; font-size:10px; color:#8f9db6; letter-spacing:.08em; }
.project-card h2 { text-align:left; margin:0 0 15px; font-size:31px; font-weight:550; letter-spacing:-.035em; }
.project-description { margin:0 0 26px; color:#b3bdcf; font-size:14px; line-height:1.85; max-width:470px; }
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:32px; }
.project-tags span { padding:4px 9px; border:1px solid #b7c5e617; border-radius:6px; color:#8d9ab4; font-size:10px; }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:auto; }
.project-actions .btn { font-size:12px; padding-inline:18px; }
.project-text-link { color:#bbc8e1; font-size:12px; }
.project-future { background:linear-gradient(145deg,#a7b8d906,#ffffff01),#0e1119; border-color:#a7b8d918; }
.project-future-mark { display:grid; place-items:center; width:58px; height:58px; font:300 27px/1 monospace; color:#8797b2; border:1px dashed #9eafd62b; border-radius:17px; }
.project-state-muted { color:#929eb5; border-color:#b6caef17; }
.project-future-note { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; color:#8896b0; font-size:11px; }
.project-future-note>span { color:#a9b9d7; font-size:17px; }
.projects-invitation { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:50px; padding-top:34px; border-top:1px solid #c4d1ee17; }
.projects-invitation .eyebrow { margin:0 0 9px; color:#a2b3d0; font-size:10px; }
.projects-invitation h2 { margin:0 0 8px; text-align:left; font-size:25px; font-weight:500; }
.projects-invitation p:not(.eyebrow) { margin:0; color:#8e9ab3; font-size:13px; }
.projects-invitation .btn { flex-shrink:0; font-size:12px; }

@media (max-width:1160px) {
  .top { position:relative; }
  .top .nav-burger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:44px; padding:0 11px; margin:0; border-radius:12px; cursor:pointer; flex-shrink:0; background:#ffffff08; box-shadow:inset 0 0 0 1px var(--stroke); }
  .nav-burger span { display:block; height:2px; border-radius:2px; background:var(--fg); transition:transform 220ms var(--spring),opacity 160ms ease; }
  .nav-toggle:focus-visible~.nav-burger { outline:2px solid var(--accent); outline-offset:3px; }
  .top nav,.landing-page .top nav { display:none; position:absolute; top:calc(100% - 6px); left:16px; right:16px; z-index:40; flex-direction:column; align-items:stretch; gap:4px; padding:10px; border-radius:16px; background:#111624f5; backdrop-filter:blur(16px); box-shadow:inset 0 0 0 1px var(--stroke2),0 30px 70px -20px #000; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overflow-y:auto; }
  .top .nav-toggle:checked~nav,.landing-page .top .nav-toggle:checked~nav { display:flex; }
  .top nav>a { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:10px; }
  .top nav>a:not(.pill):hover { background:#aec4fc10; }
  .top nav>a.pill { justify-content:center; margin-top:2px; }
  .nav-toggle:checked~.nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked~.nav-burger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked~.nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .top nav .language-switch { padding:9px 14px 4px; margin:3px 0 0; border-left:0; border-top:1px solid #bfcdf41a; gap:12px; }
  .top nav .language-switch a { display:flex; align-items:center; justify-content:center; padding:7px 10px; min-width:44px; min-height:40px; border-radius:7px; }
  .top nav .language-switch a[aria-current] { background:#b9c9ef10; }
}
@media (max-width:900px) {
  .foot .links { justify-content:flex-start; }
  .projects-hero { padding-top:55px; }
  .projects-collection { grid-template-columns:1fr 1fr; gap:16px; }
  .project-card { padding:25px; }
  .project-card h2 { font-size:27px; }
}
@media (max-width:650px) {
  .top { gap:12px; }
  .project-nav { gap:10px; }
  .projects-switch { gap:5px; padding-inline:7px; font-size:11px; }
  .projects-switch-icon { font-size:13px; }
  .project-nav .brand { gap:8px; font-size:18px; }
  .project-nav .brand img { width:29px; height:29px; }
  .projects-hero { padding:46px 0 30px; }
  .projects-intro { font-size:14px; }
  .projects-collection { grid-template-columns:1fr; }
  .project-card { padding:25px; }
  .project-card-top { margin-bottom:27px; }
  .projects-invitation { align-items:flex-start; flex-direction:column; gap:22px; margin-top:36px; }
  .projects-invitation h2 { font-size:23px; }
}
@media (max-width:380px) {
  .project-nav { gap:7px; }
  .projects-switch { gap:4px; padding-inline:5px; font-size:10px; }
  .project-nav .brand { gap:6px; font-size:16px; }
  .project-nav .brand img { width:26px; height:26px; }
  .top .nav-burger { width:42px; }
}
@media (prefers-reduced-motion:reduce) {
  .projects-switch,.nav-burger span { transition:none; }
}
@media (forced-colors:active) {
  .project-nav .brand-inactive { opacity:1; }
  .projects-switch.active,.project-card,.project-future-mark { border:1px solid CanvasText; }
  .project-nav a[aria-current="page"] { outline:1px solid Highlight; }
}