#projects-chapter {
  --project-blue: #94ade8;
  position: relative;
  isolation: isolate;
  padding: 76px 0 max(44px,env(safe-area-inset-bottom));
  border-top: 1px solid #202735;
  background: #020304;
  color: #e5e9f0;
}
.projects-header { width: min(1480px,88%); margin-inline: auto; display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.projects-kicker { margin: 0; color: #92a4c0; font: 9px/1.6 'Courier New',monospace; letter-spacing: .14em; text-transform: uppercase; }
.projects-header h2 { margin: 22px 0 0; font-size: clamp(42px,5.4vw,82px); font-weight: 400; line-height: 1.06; letter-spacing: -.05em; }
.projects-header h2 em { font-family: Georgia,'Times New Roman',serif; color: var(--project-blue); font-weight: 400; }
.projects-header > p { margin: 0 0 7px; color: #9aa7b8; font-size: 12px; line-height: 1.8; }
.projects-menu { position: relative; width: 100%; height: clamp(430px,68svh,850px); margin: 30px auto 0; overflow: hidden; background: #020304; }
.projects-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity .3s; }
.projects-canvas.is-dragging { cursor: grabbing; }
.projects-canvas:focus-visible { outline: 1px solid #8daee5; outline-offset: -8px; }
.projects-menu[data-mode=sphere] .projects-canvas { opacity: 1; }
.projects-fallback { position: absolute; width: min(48svh,70vw); height: min(48svh,70vw); top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; border-radius: 50%; background: #080b12; pointer-events: none; }
.projects-fallback img { width: 100%; height: 100%; display: block; }
.projects-fallback[data-fit=contain] img { padding: 13%; }
.projects-menu[data-mode=sphere] .projects-fallback { display: none; }
.project-open { position: absolute; z-index: 2; bottom: 11%; left: 50%; display: grid; place-items: center; width: 64px; height: 64px; border: 5px solid #020304; border-radius: 50%; transform: translateX(-50%); background: #3353a0; color: #ecf3ff; font-size: 30px; line-height: 1; transition: transform .35s,opacity .25s,background .2s; }
.project-open:hover { background: #5278c7; }
.project-open:focus-visible { outline: 2px solid #bdd3ff; outline-offset: 5px; }
.projects-menu.is-moving .project-open { opacity: 0; transform: translate(-50%,18px) scale(.75); pointer-events: none; }
.projects-navigation { display: flex; justify-content: center; align-items: center; gap: 15px; width: min(580px,96%); margin: 13px auto 0; }
.projects-navigation > button { width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #33415a; border-radius: 50%; color: #aabddb; background: #060a11; font-size: 21px; transition: border-color .2s,background .2s; }
.projects-navigation > button:hover { border-color: #839dcb; background: #142037; }
.projects-index { display: flex; flex-wrap: wrap; justify-content: center; }
.project-dot { width: 36px; height: 44px; padding: 0; border: 0; background: none; position: relative; }
.project-dot::after { content: ''; position: absolute; width: 5px; height: 5px; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #495974; transition: width .2s,height .2s,background .2s; }
.project-dot:hover::after { background: #c1d3f7; }
.project-dot[aria-pressed=true]::after { width: 8px; height: 8px; background: #9cbaff; box-shadow: 0 0 10px #5578c67a; }
@media(max-width:700px) {
  #projects-chapter { padding-top: 54px; }
  .projects-header { display: block; }
  .projects-header h2 { font-size: clamp(39px,11vw,65px); margin-top: 20px; }
  .projects-header > p { font-size: 11px; margin: 21px 0 0; }
  .projects-menu { height: clamp(360px,58svh,600px); margin-top: 6px; }
  .project-open { bottom: 13%; width: 60px; height: 60px; font-size: 27px; }
  .projects-navigation { gap: 8px; }
  .projects-index { flex: 1; max-width: 240px; }
  .project-dot { width: 28px; height: 44px; }
  .projects-navigation > button { flex-basis: 44px; width: 44px; height: 44px; }
}
@media(prefers-reduced-motion:reduce) { .projects-canvas,.project-open,.project-dot::after { transition: none; } }