@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Inter", sans-serif;
  color: #faf7fc;
  background: #25212e;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --secondary: #d2cbdc;
  --line: rgb(243 232 255 / 15%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  --page-block-padding: clamp(24px, 5vw, 72px);
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: var(--page-block-padding);
  display: grid;
  place-items: center;
  background: #25212e;
}

body::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: -1;
  background: url("assets/opal.webp") center / cover no-repeat;
  filter: blur(10px);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 35%, rgb(248 184 164 / 35%), transparent 55%),
    radial-gradient(ellipse at 82% 65%, rgb(172 158 240 / 30%), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* Anchor the compact 404 panel to the top of the full homepage frame. */
.panel-stage {
  width: min(100%, 640px);
  min-height: 385px;
  min-height: min(385px, calc(100svh - 2 * var(--page-block-padding)));
}

.glass-panel {
  --panel-radius: 26px;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgb(244 226 255 / 32%);
  border-radius: var(--panel-radius);
  background: rgb(36 32 47 / 94%);
  box-shadow: 0 28px 80px rgb(10 6 20 / 28%), inset 0 1px 1px rgb(255 255 255 / 12%);
  clip-path: inset(0 0 0 0 round var(--panel-radius));
}

.panel-collapsed { clip-path: inset(0 0 calc(100% - 66px) 0 round 33px); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: linear-gradient(135deg, rgb(66 53 72 / 64%), rgb(32 29 44 / 75%));
    -webkit-backdrop-filter: blur(30px) saturate(115%);
    backdrop-filter: blur(30px) saturate(115%);
  }
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.search-header {
  min-height: 64px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--secondary);
}

.search-icon { width: 24px; height: 24px; }
input, button { font: inherit; }

input[type="search"] {
  min-width: 0;
  width: 100%;
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #faf7fc;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.55px;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder { color: var(--secondary); opacity: 1; }
input::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="search"]:focus { outline: none; }
.search-header:focus-within .search-icon { color: #faf7fc; }

.clear-search {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
  color: var(--secondary);
  cursor: pointer;
}

.clear-search svg { width: 20px; height: 20px; }
.clear-search:hover { background: rgb(255 255 255 / 16%); }
/* Reserve the four 64px rows so filtering cannot recenter the search field. */
.links-section { min-height: 272px; padding: 8px; }

.link-list { list-style: none; padding: 0; margin: 0; }

.link-row {
  min-height: 64px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}

a.link-row { transition: background-color 160ms ease; }
a.link-row:hover { background: rgb(255 255 255 / 7%); }
a.link-row:hover .external-arrow { color: #fff; transform: translate(2px, -2px); }
a:focus-visible, button:focus-visible { outline: 2px solid #d8c5ed; outline-offset: 3px; }

.icon-tile {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgb(255 255 255 / 27%);
  border-radius: 11px;
  background: linear-gradient(145deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 6%));
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 13%), 0 5px 14px rgb(11 7 19 / 12%);
}

.icon-tile svg { width: 20px; height: 20px; }
.icon-blue { color: #acd4fc; }
.icon-pink { color: #ffaeba; }
.icon-gold { color: #f4cf84; }
.link-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.link-title { font-size: 16px; line-height: 1.3; letter-spacing: -.25px; font-weight: 500; }
.link-description { color: var(--secondary); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.external-arrow { width: 18px; height: 18px; margin-left: auto; color: var(--secondary); transition: color 160ms ease, transform 160ms ease; }
.status-description { display: flex; align-items: baseline; gap: 6px; }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #f4cf84; }
.panel-footer { padding: 14px 20px; border-top: 1px solid var(--line); color: var(--secondary); font-size: 12px; line-height: 1.5; letter-spacing: .1px; }
.empty-state { min-height: 128px; margin: 0; padding: 24px 12px; color: var(--secondary); font-size: 13px; line-height: 1.6; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.error-title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 400; letter-spacing: -.55px; }
.error-content { padding: 24px 20px 32px; }
.error-description { max-width: 380px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--secondary); }
.home-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #e4c9ee; font-size: 14px; text-underline-offset: 5px; }
.home-link svg { width: 16px; height: 16px; }

@media (max-width: 540px) {
  body { --page-block-padding: 24px; padding-inline: 16px; }
  .glass-panel { --panel-radius: 24px; }
  input[type="search"], .error-title { font-size: 22px; }
}

@media (pointer: coarse) {
  .clear-search { width: 44px; height: 44px; margin-block: -6px; }
}

@media (prefers-reduced-motion: no-preference) {
  .glass-panel { transition: clip-path 1500ms cubic-bezier(.22, 1, .36, 1); }
  .panel-collapsed { transition-duration: 1250ms; transition-timing-function: cubic-bezier(.64, 0, .78, 0); }
  body::before { animation: opal-drift 24s ease-in-out infinite; }
  body::after { animation: opal-light 18s ease-in-out infinite; }
  .intro-panel {
    animation: spotlight-open 1500ms cubic-bezier(.22, 1, .36, 1) 550ms backwards;
  }
}

@keyframes opal-drift {
  0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1.08); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.16); }
}

@keyframes opal-light {
  0%, 100% { transform: translate3d(-8%, 4%, 0) rotate(-5deg); opacity: .16; }
  50% { transform: translate3d(8%, -4%, 0) rotate(5deg); opacity: .38; }
}

/* Only the clipping boundary moves; the panel's size and position stay fixed. */
@keyframes spotlight-open {
  from { clip-path: inset(0 0 calc(100% - 66px) 0 round 33px); }
  to { clip-path: inset(0 0 0 0 round var(--panel-radius)); }
}

@media (prefers-reduced-motion: reduce) {
  a.link-row, .external-arrow { transition: none; }
  a.link-row:hover .external-arrow { transform: none; }
}