.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--sky); }
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: var(--grain-op); mix-blend-mode: overlay;
}

@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: -20%; }
@property --rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.shim { position: relative; isolation: isolate; }
.shim::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1px;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%),
      var(--lilac-bright) 0%, var(--lilac-dim) 30%, transparent 70%),
    conic-gradient(from var(--rot), var(--lilac-dim) 0deg, transparent 70deg,
      transparent 290deg, var(--lilac-dim) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.7; animation: rot-sweep 11s linear infinite; pointer-events: none;
}
@keyframes rot-sweep { to { --rot: 360deg; } }

/* ============================================================
   Top bar. The wordmark IS the logo — it never hides.
   ============================================================ */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-90);
  min-height: var(--bar); padding: 0.5rem clamp(0.85rem, 2.5vw, 1.75rem);
  background: var(--head-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: var(--sp-40); flex: none;
  padding: 0.2rem 0.1rem; border-radius: var(--radius); cursor: pointer;
  transition: opacity 0.2s ease;
}
.wordmark:hover { opacity: 0.72; }
.wordmark-name {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500;
  font-style: italic; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--wordmark);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); align-self: center;
  box-shadow: 0 0 0 0 var(--lilac-dim); animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--lilac-dim); }
  55% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.top-rule { width: 1px; height: 1.5rem; background: var(--line); flex: none; }

.propsel {
  flex: 0 1 17rem; min-width: 0; display: flex; align-items: center; gap: var(--sp-50);
  padding: 0.42rem 0.7rem; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: var(--panel);
}
.propsel select { flex: 1; min-width: 0; font-size: var(--fs-86); font-weight: 600; }
.propsel select option { background: var(--bg-1); color: var(--text); }
.propsel svg { flex: none; color: var(--text-faint); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-50); }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius); border: 1px solid var(--line-soft); color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--line); background: var(--panel); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--violet);
  display: grid; place-items: center; font-size: var(--fs-70); font-weight: 700; color: #fff;
}

/* ============================================================
   Shell
   ============================================================ */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.rail { border-right: 1px solid var(--line-soft); padding: 1.25rem 0.75rem; position: sticky; top: var(--bar); align-self: start; }
.nav { display: grid; gap: var(--sp-10); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-70); width: 100%; text-align: left;
  padding: 0.55rem 0.7rem; border-radius: var(--radius);
  font-size: 0.88rem; font-weight: 500; color: var(--text-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-item svg { flex: none; opacity: 0.65; }
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--panel-2); color: var(--text); font-weight: 600; }
.nav-item[aria-current="page"] svg { opacity: 1; color: var(--lilac); }
.tabbar { display: none; }

.main { padding: 1.5rem clamp(0.85rem, 2.5vw, 2rem) 5rem; min-width: 0; }

@media (max-width: 52rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .main { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  .top { gap: 0.6rem 0.75rem; }
  .top-rule { display: none; }
  .propsel { order: 3; flex: 1 1 100%; }
  .top-right { order: 2; }
  .wordmark-name { font-size: 1.1rem; }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--head-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid var(--line-soft); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab { display: grid; justify-items: center; gap: var(--sp-15); padding: 0.55rem 0.25rem 0.5rem; font-size: var(--fs-62); font-weight: 600; color: var(--text-faint); }
  .tab svg { opacity: 0.75; }
  .tab[aria-current="page"] { color: var(--text); }
  .tab[aria-current="page"] svg { opacity: 1; color: var(--lilac); }
}