:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: #030304;
  color: #d8dbe3;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; isolation: isolate; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #8dafea; outline-offset: 7px; }
#atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.stage { min-height: 100svh; display: grid; place-items: center; padding: 64px 28px; }
.project-grid { width: min(100%, 782px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-slot { min-width: 0; animation: arrive 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.project-slot:nth-child(2) { animation-delay: .13s; }
.project-slot:nth-child(3) { animation-delay: .26s; }
.project-card {
  position: relative;
  width: 100%;
  min-height: 104px;
  padding: 23px 24px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid #ffffff10;
  border-radius: 23px;
  background: linear-gradient(155deg, #101115, #090a0d 80%);
  box-shadow: inset 0 1px 0 #ffffff04, 0 6px 24px #00000030;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
  letter-spacing: .05px;
  text-wrap: balance;
  transition: transform 850ms cubic-bezier(.16, 1, .3, 1), border-color 800ms ease, background-color 800ms ease, box-shadow 900ms ease, color 600ms ease;
}
.project-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, #547ec71a, transparent 80%);
  opacity: 0;
  transition: opacity 850ms ease;
}
.project-card:hover, .project-card:focus-visible {
  transform: translateY(-5px) scale(1.035);
  color: #f0f3fb;
  border-color: #7797ce42;
  box-shadow: inset 0 1px 0 #a9c6ff0a, 0 14px 55px #00000050, 0 0 36px #517bc309;
}
.project-card:hover::before, .project-card:focus-visible::before { opacity: 1; }
.project-card:active { transform: translateY(-1px) scale(.975); transition-duration: 230ms; }
.dialog-open { overflow: hidden; }
.stage { transition: filter 900ms ease, opacity 900ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.dialog-open .stage { opacity: .35; filter: blur(4px); transform: scale(.98); }
dialog {
  position: fixed;
  padding: 48px 36px 28px;
  width: min(530px, calc(100% - 36px));
  max-height: calc(100dvh - 48px);
  border: 1px solid #ffffff13;
  border-radius: 28px;
  background: #0b0c10;
  color: #d8dbe3;
  box-shadow: 0 30px 140px #000000a0;
  overscroll-behavior: contain;
}
dialog[open] { animation: reveal 650ms cubic-bezier(.16, 1, .3, 1); }
dialog::backdrop { background: #00000070; backdrop-filter: blur(10px); }
.close-button { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 50%; color: #707582; transition: background 400ms, color 400ms; }
.close-button:hover { background: #ffffff06; color: #e5e9f2; }
h1 { font-size: 23px; font-weight: 450; line-height: 1.35; letter-spacing: -.5px; margin: 0 22px 18px 0; text-wrap: balance; }
.detail-description { font-size: 13px; color: #9cA0ac; line-height: 1.85; margin: 0 0 24px; }
.capabilities { padding: 0 0 0 14px; font-size: 12px; line-height: 1.8; color: #8f94a1; margin: 0 0 25px; }
.capabilities li { padding-left: 4px; margin-bottom: 10px; }
.capabilities li::marker { color: #62789c; font-size: 8px; }
.tech-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-list span { font-size: 10px; padding: 6px 10px; border: 1px solid #ffffff0d; border-radius: 20px; color: #a1a8b7; }
.boundary { border-top: 1px solid #ffffff09; padding-top: 20px; margin-top: 24px; font-size: 11px; line-height: 1.8; color: #828996; }
.detail-footer { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: #8291aa; margin-top: 20px; line-height: 1.8; }
.detail-footer a { color: #b5c7e7; text-decoration: none; }
.focus-only { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.focus-only:focus-visible { clip-path: none; width: auto; height: auto; padding: 12px 20px; border-radius: 20px; border: 1px solid #ffffff20; background: #101116; color: #b6bfce; font-size: 12px; }
.motion-paused *, .page-hidden * { animation-play-state: paused !important; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 650px) {
  .project-grid { width: min(268px, 100%); grid-template-columns: 1fr; gap: 17px; }
  .project-card { min-height: 90px; padding: 20px 25px; border-radius: 22px; font-size: 14px; }
  dialog { padding: 48px 25px 25px; border-radius: 25px; }
  h1 { font-size: 22px; }
}
@media (hover: none) { .project-card:hover { transform: none; } .project-card:active { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .project-card:hover, .project-card:focus-visible, .dialog-open .stage { transform: none; } }

/* A quiet pool of blue light keeps the scene dimensional without adding content. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 48% 32% at 50% 52%, #0a204d62, transparent 80%),
    radial-gradient(ellipse 65% 70% at 50% 50%, #070e1c55, transparent 85%);
  animation: atmosphere-breathe 15s ease-in-out infinite alternate;
}
.project-grid { gap: 26px; width: min(100%, 810px); perspective: 1200px; }
.project-slot { animation: arrive 1.8s cubic-bezier(.16,1,.3,1) backwards, levitate 6.8s ease-in-out 1.8s infinite; }
.project-slot:nth-child(2) { animation-duration: 1.8s, 8.2s; animation-delay: .16s, -2.5s; }
.project-slot:nth-child(3) { animation-duration: 1.8s, 9.6s; animation-delay: .32s, -5s; }
.project-card {
  min-height: 124px; border-radius: 31px; border: 1px solid #5799f04a; font-size: 15px;
  background: linear-gradient(155deg, #142c4aee, #091321f5 75%) padding-box,
    linear-gradient(145deg, #7fb5ff65, #45699924 45%, #6799ea48) border-box;
  box-shadow: inset 0 1px 2px #c5dfff20, inset 0 -1px 0 #598be81a, 0 14px 35px #00000065, 0 0 38px #1d6bea1c;
  color: #dceaff; letter-spacing: .12px;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  translate: 0 0;
  transition: translate 750ms cubic-bezier(.16,1,.3,1), border-color 750ms ease, scale 800ms cubic-bezier(.2,1.6,.35,1), border-radius 800ms cubic-bezier(.2,1.5,.35,1), box-shadow 850ms ease, color 600ms ease;
}
.project-card::before {
  inset: 0; opacity: .45;
  background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 0%), #419aff42, transparent 80%);
}
.project-card::after {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, #b7ddffb0, transparent);
  opacity: .75; transition: opacity 800ms ease; pointer-events: none; animation: edge-drift 8s ease-in-out infinite;
}
.project-card:hover, .project-card:focus-visible {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  translate: 0 -6px; scale: 1.055; border-radius: 38px; border-color: #8bc3ffc9; color: #f4f8ff;
  box-shadow: inset 0 1px 3px #d4eaff40, inset 0 -1px 0 #598be83a, 0 0 0 1px #6cb3ff24, 0 20px 45px #00000070, 0 0 36px #2f83ff55, 0 0 90px #286de030;
}
.project-card:hover::after, .project-card:focus-visible::after { opacity: 1; }
.project-card:active { scale: .965; transition: scale 180ms ease-out; }
dialog { border-color: #7faaf02b; border-radius: 32px; background: linear-gradient(145deg,#101825,#090d15 65%); box-shadow: inset 0 1px #adcfff0b, 0 35px 150px #000b, 0 0 70px #2461c50b; }
dialog::backdrop { background: #00000058; backdrop-filter: blur(12px); }
@keyframes levitate { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes atmosphere-breathe { from { opacity: .6; } to { opacity: 1; } }
@media (max-width:650px) {
  .project-grid { width: min(278px,100%); gap: 22px; }
  .project-card { min-height: 104px; border-radius: 30px; font-size: 15px; }
  body::before { background: radial-gradient(ellipse 90% 45% at 50% 50%, #0b23505c, transparent 85%); }
}
@media (hover:none) { .project-card:hover { scale: 1; translate: 0 0; } .project-card:active { scale: .965; } }
@media (prefers-reduced-motion:reduce) {
  .project-card, .project-card:hover, .project-card:focus-visible { transform: none; scale: 1; translate: none; }
}
.motion-paused::before, .motion-paused body::before, .motion-paused *::before { animation-play-state: paused !important; }
.page-hidden body::before { animation-play-state: paused !important; }

/* Keep the reading view comfortable and its exit within reach at every size. */
dialog { padding: 0; scrollbar-width: thin; scrollbar-color: #3f5576 transparent; }
.dialog-controls {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end;
  padding: 10px 10px 0;
  background: #101825ed; backdrop-filter: blur(14px);
}
.close-button { position: static; flex: 0 0 44px; color: #a0b0c8; }
#detail-content { padding: 0 36px 28px; }
.detail-description { font-size: 14px; }
.capabilities { font-size: 13px; }
.boundary { font-size: 12px; }
dialog::backdrop { transition: background-color 320ms ease, backdrop-filter 320ms ease; }
dialog.is-closing::backdrop { background: transparent; backdrop-filter: blur(0); }
.detail-closing .stage { opacity: 1; filter: none; transform: none; }
.next-project {
  margin-top: 24px; padding: 13px 16px; width: 100%; display: flex; justify-content: space-between; align-items: center;
  color: #bbcbe4; font-size: 11px; background: #6095ed08; border: 1px solid #7499d71c; border-radius: 16px;
  transition: background 400ms, border-color 400ms;
}
.next-project span { font-size: 18px; transition: translate 500ms cubic-bezier(.16,1,.3,1); }
.next-project:hover { background: #6095ed12; border-color: #7499d73b; }
.next-project:hover span { translate: 3px 0; }
@media (max-width:650px) {
  #detail-content { padding: 0 25px 25px; }
  dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { .next-project:hover span { translate: none; } }

/* Barely lit instrumentation, framing the projects rather than competing with them. */
.stage { position: relative; overflow: clip; }
.project-grid { position: relative; z-index: 1; }
.interface-field {
  position: absolute; left: 50%; top: 50%; width: min(1120px, 112vw);
  translate: -50% -50%; pointer-events: none; opacity: .7;
  transition: opacity 1.5s ease; animation: interface-arrive 2.5s ease backwards;
}
.interface-field svg { width: 100%; height: auto; display: block; overflow: visible; }
.orbit-track { stroke: #5a96ef; stroke-opacity: .13; stroke-width: .7; vector-effect: non-scaling-stroke; }
.orbit-guide { stroke: #84b5ff; stroke-opacity: .19; stroke-width: 1; vector-effect: non-scaling-stroke; }
.secondary-orbit { stroke-opacity: .08; }
.orbit-signal { transform-origin: 0 0; animation: signal-orbit 75s linear infinite; }
.orbit-signal-secondary { animation: signal-orbit 105s linear -35s infinite reverse; }
.interface-brackets { stroke: #659eea; stroke-opacity: .28; stroke-width: .8; }
.interface-ticks { stroke: #76aaf2; stroke-opacity: .22; stroke-width: .8; }
.stage:has(.project-card:hover) .interface-field,
.stage:has(.project-card:focus-visible) .interface-field { opacity: 1; }
@keyframes signal-orbit { to { transform: rotate(360deg); } }
@keyframes interface-arrive { from { opacity: 0; } to { opacity: .7; } }
@media (max-width:650px) {
  .interface-field { width: 740px; rotate: 90deg; opacity: .5; }
  .interface-brackets { stroke-opacity: .14; }
}

@keyframes edge-drift { 0%,100% { translate: -9px 0; } 50% { translate: 9px 0; } }
.motion-paused *::after, .page-hidden *::after { animation-play-state: paused !important; }