/* ============================================================= TOOLS CHROME — shared design system override Loaded LAST in by every /tools/* page so it can override the legacy inline styles. Drop-in: no per-page rewrite needed. Same palette + glass treatment as /launch, /ecosystem, /cloud. ============================================================= */ :root{ /* iOS Liquid Glass substrate */ --bg:#0A0A0C; --bg-elev:#0F0F12; --ink:#0A0A0C; --ink-2:#0F0F12; --ink-3:#16161A; --card-bg:rgba(28,28,32,0.64); --glass:rgba(44,44,52,0.55); --glass2:rgba(44,44,52,0.72); --glass-light:rgba(60,60,72,0.40); /* Accents */ --blue:#0A84FF; --blue-glow:rgba(10,132,255,0.45); --purple:#BF5AF2; --purple-glow:rgba(191,90,242,0.35); --teal:#64D2FF; --teal-glow:rgba(100,210,255,0.35); --green:#30D158; --red:#FF453A; --amber:#FF9F0A; --orange:#FF9F0A; --acc:#64D2FF; --acc2:#30D158; /* Legacy gold/spark/violet remapped to iOS palette so existing `var(--gold)`, `var(--spark)` etc. in tool pages render in the new tone */ --gold:#FFD46B; --gold-hi:#E8C98A; --gold-glow:rgba(255,212,107,0.28); --spark:#64D2FF; --spark-glow:rgba(100,210,255,0.30); --violet:#BF5AF2; --rose:#F472B6; --text:#F2F2F7; --text-sec:#ffffff; --text-muted:#ffffff; --fg1:#F2F2F7; --fg2:#ffffff; --fg3:#ffffff; --bd:rgba(255,255,255,0.08); --bd2:rgba(255,255,255,0.14); --border:rgba(255,255,255,0.08); --border-highlight:rgba(255,255,255,0.14); --border-strong:rgba(255,255,255,0.20); --bd-gold:rgba(255,212,107,0.34); --bd-spark:rgba(100,210,255,0.34); --shadow:0 8px 32px rgba(0,0,0,0.40); --inner-shadow:inset 0 1px 0 rgba(255,255,255,0.08); --radius:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:9999px; --fh:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; --fb:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; --fm:ui-monospace,SFMono-Regular,Menlo,monospace; --font-head:var(--fh); --font-body:var(--fb); --font-mono:var(--fm); --max:1280px; --ease:cubic-bezier(.22,.61,.36,1); --ease-ios:cubic-bezier(0.25,0.1,0.25,1); } html,body{background:var(--bg);color:var(--text);font-family:var(--fb)} body{-webkit-font-smoothing:antialiased} /* Kill legacy ambient layers so the new ones paint cleanly */ body::before,body::after{display:none !important} #embers,canvas#embers{display:none !important} .wash,.gridbg{display:none !important} body > .grid{display:none !important} /* iOS ambient layers (matches /launch + /ecosystem + /cloud) */ .bg-field{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden} .bg-field::before,.bg-field::after{content:"";position:absolute;border-radius:50%; filter:blur(100px);opacity:.35} .bg-field::before{width:50vw;height:50vw;top:-10vw;left:-10vw; background:radial-gradient(circle at 40% 40%,var(--blue-glow),transparent 65%)} .bg-field::after{width:45vw;height:45vw;bottom:-15vw;right:-10vw; background:radial-gradient(circle at 60% 60%,var(--purple-glow),transparent 65%)} .bg-violet{position:fixed;z-index:-3;width:40vw;height:40vw;top:35%;left:50%; border-radius:50%;filter:blur(120px);opacity:.25;pointer-events:none; background:radial-gradient(circle,var(--teal-glow),transparent 65%)} .bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.4; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:60px 60px; mask:radial-gradient(ellipse 80% 60% at 50% 20%,#000,transparent 75%); -webkit-mask:radial-gradient(ellipse 80% 60% at 50% 20%,#000,transparent 75%)} /* Typography overrides */ h1,h2,h3{font-family:var(--fh);letter-spacing:-.02em;line-height:1.1;color:var(--text)} .mono{font-family:var(--fm)} .grad{background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 55%,var(--teal) 100%) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important;color:transparent !important;animation:none !important} /* Wrap container — wider to match /launch */ .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(14px,3.4vw,40px);position:relative;z-index:2} /* ───────── NAV — both legacy `