/* PONCLAW - shared shell.
   Liquid glass over an interactive wireframe, in the ponsfamily palette:
   near-black #0D0D0D, off-white #F2F2F2, lime #D4FC50. */
:root{
  --bg:#0d0d0d;
  --bg-2:#161616;
  --bg-3:#1f1f1f;
  --ink:#f2f2f2;
  --ink-2:rgba(242,242,242,.58);
  --ink-3:rgba(242,242,242,.40);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --line-hot:rgba(212,252,80,.42);
  --acc:#d4fc50;
  --acc-soft:rgba(212,252,80,.55);
  --acc-glow:rgba(212,252,80,.18);
  --blue:rgba(59,130,246,.9);
  --warn:#f5c451;
  --bad:#ff7a7a;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
  --nav-h:64px;

  /* The glass recipe.
     ⚠ backdrop-filter is reserved for the three surfaces that actually sit
     over moving content: the nav, the modal scrim and the toasts. Putting it
     on every scrolling card stacks dozens of compositor layers over the fixed
     wireframe canvas and the browser starts handing back blank paints. The
     cards use a translucent gradient plus a lit top edge instead, which is
     indistinguishable on a dark ground and costs nothing. */
  --glass-bg:linear-gradient(180deg,rgba(30,30,30,.82),rgba(19,19,19,.74));
  --glass-blur:blur(18px) saturate(1.4);
  --glass-line:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
/* live wireframe canvas sits under everything */
/* The mesh is masked out of the middle of the viewport. Panels are
   translucent, so lines running behind a card read as clutter crossing the
   copy; this keeps the backdrop to the margins where it frames instead of
   collides. */
#wire{
  position:fixed;inset:0;z-index:0;display:block;pointer-events:none;opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 42%,transparent 30%,#000 92%);
  mask-image:radial-gradient(ellipse 58% 52% at 50% 42%,transparent 30%,#000 92%);
}
/* ⚠ display:inline-flex on .badge beats the [hidden] attribute, so a hidden
   badge keeps rendering. Restore the attribute's meaning globally. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acc);color:#111}

.wrap{width:min(1180px,92vw);margin-inline:auto;position:relative;z-index:1}

/* ------------------------------------------------------------------ glass */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-hi);
  border-radius:var(--r);
}
/* Wireframe corner ticks: the interactive-wireframe read, drawn in CSS so it
   costs nothing and survives any content inside the panel. */
.wire{position:relative}
.wire::before,.wire::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border:1px solid var(--line-hot);opacity:.22;transition:opacity .25s ease;
}
.wire::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r)}
.wire::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r)}
.wire:hover::before,.wire:hover::after{opacity:.7}

/* ------------------------------------------------------------------- typo */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--acc);margin:0 0 14px;
}
.eyebrow.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.dim{color:var(--ink-2)}
.h1{font-size:clamp(38px,6.4vw,76px);line-height:1;letter-spacing:-.04em;font-weight:700;margin:0}
.h2{font-size:clamp(25px,3.4vw,40px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:0}
.h3{font-size:18px;letter-spacing:-.02em;font-weight:600;margin:0}
.lede{color:var(--ink-2);font-size:clamp(15px,1.4vw,17.5px);line-height:1.62;margin:16px 0 0}
.acc{color:var(--acc)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;border:1px solid var(--line);
  font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  background:var(--glass-bg);
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
.btn svg{width:15px;height:15px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--acc);color:#101208;border-color:transparent;box-shadow:0 8px 30px -14px var(--acc)}
.btn-primary:hover{box-shadow:0 12px 36px -12px var(--acc)}
.btn-ghost:hover{border-color:var(--line-hot);color:var(--acc)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* -------------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(13,13,13,.55);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:24px;width:min(1180px,94vw);margin-inline:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.035em;font-size:18px}
.brand .mark{width:26px;height:26px;flex:none}
.nav-links{display:flex;align-items:center;gap:20px;margin-left:6px;flex:1}
.nav-links a{font-size:13.5px;color:var(--ink-2);transition:color .15s ease}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:9px}
.nav-burger{display:none}

/* Shared control. ⚠ This lives in base.css, not app.css: the landing page
   trial uses it too and only loads base + landing, so a console-only
   definition renders the model and preset choices as bare text. */
.pillset{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink-2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.pill:hover{border-color:var(--line-hot);color:var(--ink)}
.pill.on{border-color:var(--acc);color:var(--acc);background:rgba(212,252,80,.13)}

/* The nav right cluster is the first thing to run out of room once the links
   collapse: drop the feed badge, then the CTA labels, before anything clips.
   ⚠ The selector has to stay more specific than the plain `.badge` rule
   further down, or source order hands `display:inline-flex` straight back. */
@media(max-width:900px){.nav-right .badge{display:none}}
@media(max-width:600px){.nav-right .lbl{display:none}.nav-right .btn{padding:9px 12px}}

@media(max-width:1000px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(13,13,13,.98);border-bottom:1px solid var(--line);padding:6px 6vw 14px;
  }
  .nav-links.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft);font-size:15px}
  .nav-burger{display:inline-flex;padding:8px;border-radius:10px;border:1px solid var(--line)}
  .nav-burger svg{width:18px;height:18px}
}

/* ----------------------------------------------------------------- panels */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--glass-hi);
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.13);color:var(--ink);
}
.badge.lime{background:rgba(212,252,80,.16);border-color:var(--line-hot);color:var(--acc)}
.badge.gray{color:var(--ink-3);border-color:var(--line-soft);background:rgba(255,255,255,.05)}
.badge.warn{color:var(--warn);border-color:rgba(245,196,81,.35);background:rgba(245,196,81,.12)}
.badge.bad{color:var(--bad);border-color:rgba(255,122,122,.35);background:rgba(255,122,122,.12)}
.badge.blue{background:var(--blue);border-color:transparent;color:#fff}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot.live{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.up{color:var(--acc)}
.down{color:var(--bad)}

/* ----------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line-soft);margin-top:100px;padding:54px 0 32px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li a{font-size:13.5px;color:var(--ink-2)}
.foot li a:hover{color:var(--acc)}
.foot-note{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);font-family:var(--mono);
}
.foot-sig{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:26px;padding:14px 18px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
}
.foot-sig .acc{color:var(--acc)}
.foot-sig a{color:var(--acc);border-bottom:1px solid var(--line-hot)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the mute control: icon only, so it survives the narrow nav */
.sfx-btn{padding:9px 11px}
.sfx-btn svg{width:15px;height:15px;display:block}
.sfx-btn.on{color:var(--acc);border-color:var(--line-hot)}
@media(max-width:600px){.nav-right .sfx-btn{display:none}}