/* ============================================================
   ICY3D — one stylesheet, one system.
   Tokens match the marketing site exactly. No !important anywhere:
   if something needs overriding, the selector is wrong.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Velvet & Gold: a jewellery case. Deep navy, warm gold, ivory text.
     Pendant artwork always sits on --art (pure black) so metal and stones
     read the same whatever surrounds them. */
  --bg-dark:#0E1320;
  --bg-bar:rgba(11,15,26,.92);
  --bg-surface:#131A29;
  --bg-card:#161D2E;
  --bg-card-hover:#1C2539;
  --bg-input:#0F1524;
  --art:#000000;

  --primary:#D7B06A;
  --primary-hi:#E4C283;
  --on-primary:#1B1406;
  --primary-glow:rgba(215,176,106,.28);
  --primary-soft:rgba(215,176,106,.12);
  --accent-cyan:#8FB8E8;
  --accent-blue:#8FB8E8;
  --gold:#D7B06A;
  --danger:#EE8A8A;
  --danger-soft:rgba(238,138,138,.10);
  --danger-line:rgba(238,138,138,.42);
  --warn:#E9C98A;
  --warn-soft:rgba(233,201,138,.08);
  --warn-line:rgba(233,201,138,.28);
  --overlay:rgba(8,11,19,.86);

  --text-main:#F3EFE7;
  --text-muted:#A7ADBB;
  --text-faint:#6B7387;

  --line:#262F45;
  --line-hi:#34405C;

  --tabbar-h:64px;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:38px; --s6:56px;

  --f-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);

  --sh:0 10px 30px -12px rgba(0,0,0,.7);

  /* The landing page came from a separate design file and uses longer names
     for the same values. Aliased rather than rewritten, so one change to a
     colour still only happens in one place. */
  --border-subtle:var(--line);
  --border-bright:var(--line-hi);
  --radius-sm:var(--r-sm);
  --radius-md:var(--r);
  --radius-lg:var(--r-lg);
  --radius-xl:var(--r-xl);
  --radius-pill:var(--r-pill);
  --font-sans:var(--f-sans);
  --font-mono:var(--f-mono);
  --ease-smooth:var(--ease);
  --ease-bounce:var(--bounce);
}

*{box-sizing:border-box;margin:0;padding:0}

/* The hidden attribute must beat any display we set on a class. Without this
   an overlay like .veil stays on screen and swallows every click. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;background:var(--bg-dark)}
body{
  min-height:100vh;position:relative;overflow-x:hidden;
  background:var(--bg-dark);color:var(--text-main);
  font-family:var(--f-sans);font-size:15.5px;line-height:1.6;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
}
/* A soft warm glow at the top instead of the old grid: calmer, and it lifts
   the navy without looking like a code editor. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 55% at 50% -10%,rgba(215,176,106,.07),transparent 70%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
::selection{background:var(--primary-glow)}

/* ---------------------------------------------------------- type */
h1{font-size:clamp(25px,3.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.12}
h2{font-size:22px;font-weight:700;letter-spacing:-.028em;line-height:1.2}
h3{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
p{max-width:74ch}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.mono{font-family:var(--f-mono);font-size:12.5px}
.lead{color:var(--text-muted);font-size:16px;margin-top:var(--s1)}

/* ---------------------------------------------------------- layout */
.shell{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:var(--s5) var(--s4) 96px}
@media(max-width:760px){
  .shell{padding:var(--s4) 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom,0px))}
  .page-head{margin-bottom:var(--s4)}
}
.page-head{margin-bottom:var(--s5)}
.stack{display:flex;flex-direction:column;gap:var(--s5)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.row.center{justify-content:center}
.row.end{justify-content:flex-end}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.grow{flex:1}
@media(max-width:760px){.split{grid-template-columns:1fr}}