/* Prowl design system — "Instrument" (static/prowl.css) * * One file for every Prowl page: landing, /visibility, /map, /app and the * secondary landings. Precise, technical, calm: Geist + Geist Mono, graphite * neutrals with a slight green bias, one emerald accent. * * Theme: follows the OS by default; an explicit choice (theme.js, stored in * localStorage "prowl_theme") stamps data-theme on and wins both ways. * * Rules * - Style through tokens, never through literal colors. * - Semantic colors (good / warn / bad / info) are not the accent. * - Gold is reserved for The Prowl Network (featured, built by us). * - Legacy names (--ink-dim, --bg-3, --serif ...) are aliases kept so older * page CSS keeps working; new CSS uses the canonical names. * * Fonts are linked by each page: * https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap */ :root{ --bg:#f6f7f6; --bg-2:#eef1ef; --surface:#ffffff; --surface-2:#f0f2f1; --surface-3:#e6eae8; --ink:#0f1412; --ink-2:#4b5550; --ink-3:#6f7974; --line:rgba(10,20,15,.10); --line-2:rgba(10,20,15,.18); --accent:#0d9f6e; --accent-2:#0b8a60; --accent-ink:#ffffff; --accent-text:#0b8a60; --accent-tint:rgba(13,159,110,.09); --accent-glow:rgba(13,159,110,.22); --good:#0d9f6e; --warn:#b7791f; --bad:#d64541; --info:#3565d8; --gold:#a8791f; --good-tint:rgba(13,159,110,.10); --warn-tint:rgba(183,121,31,.12); --bad-tint:rgba(214,69,65,.10); --info-tint:rgba(53,101,216,.10); --gold-tint:rgba(168,121,31,.12); --shadow:0 1px 2px rgba(10,20,15,.05),0 14px 34px -22px rgba(10,20,15,.22); --shadow-lg:0 2px 4px rgba(10,20,15,.05),0 30px 60px -30px rgba(10,20,15,.30); --nav-bg:rgba(246,247,246,.82); /* type */ --sans:'Geist',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16.5px; --fs-lg:19px; --fs-xl:23px; --fs-2xl:clamp(26px,3.2vw,32px); --fs-3xl:clamp(30px,4.4vw,44px); --fs-4xl:clamp(36px,6vw,60px); --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6; --track-display:-.035em; --track-heading:-.02em; --track-label:.1em; /* shape + space */ --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px; --col:1180px; --col-narrow:760px; --pad-x:clamp(16px,4vw,32px); --ease:cubic-bezier(.2,.7,.2,1); /* legacy aliases (older page CSS) */ --bg-3:var(--surface-2); --bg-4:var(--surface-3); --card:var(--surface); --card-2:var(--surface-2); --ink-dim:var(--ink-2); --ink-faint:var(--ink-3); --muted:var(--ink-3); --danger:var(--bad); --rose:var(--bad); --accent-3:var(--accent-text); --serif:var(--sans); /* Tailwind bridge (app.html maps its palette to these channels) */ --tw-zinc-50:15 20 18;--tw-zinc-100:23 28 25;--tw-zinc-200:35 41 38;--tw-zinc-300:53 61 57;--tw-zinc-400:75 85 80;--tw-zinc-500:115 125 120; --tw-zinc-600:163 171 167;--tw-zinc-700:205 211 208;--tw-zinc-800:226 230 228;--tw-zinc-900:255 255 255;--tw-zinc-950:246 247 246;--tw-red-50:69 10 10; --tw-red-100:127 29 29;--tw-red-200:153 27 27;--tw-red-300:185 28 28;--tw-red-400:220 38 38;--tw-red-500:239 68 68;--tw-red-600:248 113 113; --tw-red-700:252 165 165;--tw-red-800:254 202 202;--tw-red-900:254 226 226;--tw-red-950:254 242 242;--tw-yellow-50:66 32 6;--tw-yellow-100:113 63 18; --tw-yellow-200:133 77 14;--tw-yellow-300:161 98 7;--tw-yellow-400:202 138 4;--tw-yellow-500:234 179 8;--tw-yellow-600:250 204 21;--tw-yellow-700:253 224 71; --tw-yellow-800:254 240 138;--tw-yellow-900:254 249 195;--tw-yellow-950:254 252 232;--tw-amber-50:69 26 3;--tw-amber-100:120 53 15;--tw-amber-200:146 64 14; --tw-amber-300:180 83 9;--tw-amber-400:217 119 6;--tw-amber-500:245 158 11;--tw-amber-600:251 191 36;--tw-amber-700:252 211 77;--tw-amber-800:253 230 138; --tw-amber-900:254 243 199;--tw-amber-950:255 251 235;--tw-orange-50:67 20 7;--tw-orange-100:124 45 18;--tw-orange-200:154 52 18;--tw-orange-300:194 65 12; --tw-orange-400:234 88 12;--tw-orange-500:249 115 22;--tw-orange-600:251 146 60;--tw-orange-700:253 186 116;--tw-orange-800:254 215 170;--tw-orange-900:255 237 213; --tw-orange-950:255 247 237;--tw-emerald-50:2 44 34;--tw-emerald-100:6 78 59;--tw-emerald-200:6 95 70;--tw-emerald-300:4 120 87;--tw-emerald-400:13 159 110; --tw-emerald-500:34 197 139;--tw-emerald-600:52 211 153;--tw-emerald-700:110 231 183;--tw-emerald-800:167 243 208;--tw-emerald-900:209 250 229;--tw-emerald-950:236 253 245; --tw-green-50:5 46 22;--tw-green-100:20 83 45;--tw-green-200:22 101 52;--tw-green-300:21 128 61;--tw-green-400:22 163 74;--tw-green-500:34 197 94; --tw-green-600:74 222 128;--tw-green-700:134 239 172;--tw-green-800:187 247 208;--tw-green-900:220 252 231;--tw-green-950:240 253 244;--tw-blue-50:23 37 84; --tw-blue-100:30 58 138;--tw-blue-200:30 64 175;--tw-blue-300:29 78 216;--tw-blue-400:37 99 235;--tw-blue-500:59 130 246;--tw-blue-600:96 165 250; --tw-blue-700:147 197 253;--tw-blue-800:191 219 254;--tw-blue-900:219 234 254;--tw-blue-950:239 246 255;--tw-purple-50:59 7 100;--tw-purple-100:88 28 135; --tw-purple-200:107 33 168;--tw-purple-300:126 34 206;--tw-purple-400:147 51 234;--tw-purple-500:168 85 247;--tw-purple-600:192 132 252;--tw-purple-700:216 180 254; --tw-purple-800:233 213 255;--tw-purple-900:243 232 255;--tw-purple-950:250 245 255;--tw-violet-50:46 16 101;--tw-violet-100:76 29 149;--tw-violet-200:91 33 182; --tw-violet-300:109 40 217;--tw-violet-400:124 58 237;--tw-violet-500:139 92 246;--tw-violet-600:167 139 250;--tw-violet-700:196 181 253;--tw-violet-800:221 214 254; --tw-violet-900:237 233 254;--tw-violet-950:245 243 255;--tw-teal-50:4 47 46;--tw-teal-100:19 78 74;--tw-teal-200:17 94 89;--tw-teal-300:15 118 110; --tw-teal-400:13 148 136;--tw-teal-500:20 184 166;--tw-teal-600:45 212 191;--tw-teal-700:94 234 212;--tw-teal-800:153 246 228;--tw-teal-900:204 251 241; --tw-teal-950:240 253 250;--tw-sky-50:8 47 73;--tw-sky-100:12 74 110;--tw-sky-200:7 89 133;--tw-sky-300:3 105 161;--tw-sky-400:2 132 199; --tw-sky-500:14 165 233;--tw-sky-600:56 189 248;--tw-sky-700:125 211 252;--tw-sky-800:186 230 253;--tw-sky-900:224 242 254;--tw-sky-950:240 249 255; --tw-white:15 20 18; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#0a0c0b; --bg-2:#0e1110; --surface:#111513; --surface-2:#171c19; --surface-3:#1f2522; --ink:#eaeeeb; --ink-2:#a9b2ad; --ink-3:#78827d; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --accent:#22c58b; --accent-2:#3fd9a0; --accent-ink:#03140c; --accent-text:#34d399; --accent-tint:rgba(34,197,139,.12); --accent-glow:rgba(34,197,139,.28); --good:#34d399; --warn:#f2b441; --bad:#f06a5f; --info:#7aa2ff; --gold:#e8c170; --good-tint:rgba(52,211,153,.12); --warn-tint:rgba(242,180,65,.12); --bad-tint:rgba(240,106,95,.12); --info-tint:rgba(122,162,255,.12); --gold-tint:rgba(232,193,112,.12); --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -30px rgba(0,0,0,.9); --shadow-lg:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -40px rgba(0,0,0,.95); --nav-bg:rgba(10,12,11,.78); --tw-zinc-50:246 247 246;--tw-zinc-100:234 238 235;--tw-zinc-200:213 219 216;--tw-zinc-300:188 196 192;--tw-zinc-400:169 178 173;--tw-zinc-500:120 130 125; --tw-zinc-600:86 96 91;--tw-zinc-700:52 59 55;--tw-zinc-800:31 37 34;--tw-zinc-900:19 23 21;--tw-zinc-950:10 12 11;--tw-red-50:254 242 242; --tw-red-100:254 226 226;--tw-red-200:254 202 202;--tw-red-300:252 165 165;--tw-red-400:248 113 113;--tw-red-500:239 68 68;--tw-red-600:220 38 38; --tw-red-700:185 28 28;--tw-red-800:153 27 27;--tw-red-900:127 29 29;--tw-red-950:69 10 10;--tw-yellow-50:254 252 232;--tw-yellow-100:254 249 195; --tw-yellow-200:254 240 138;--tw-yellow-300:253 224 71;--tw-yellow-400:250 204 21;--tw-yellow-500:234 179 8;--tw-yellow-600:202 138 4;--tw-yellow-700:161 98 7; --tw-yellow-800:133 77 14;--tw-yellow-900:113 63 18;--tw-yellow-950:66 32 6;--tw-amber-50:255 251 235;--tw-amber-100:254 243 199;--tw-amber-200:253 230 138; --tw-amber-300:252 211 77;--tw-amber-400:251 191 36;--tw-amber-500:245 158 11;--tw-amber-600:217 119 6;--tw-amber-700:180 83 9;--tw-amber-800:146 64 14; --tw-amber-900:120 53 15;--tw-amber-950:69 26 3;--tw-orange-50:255 247 237;--tw-orange-100:255 237 213;--tw-orange-200:254 215 170;--tw-orange-300:253 186 116; --tw-orange-400:251 146 60;--tw-orange-500:249 115 22;--tw-orange-600:234 88 12;--tw-orange-700:194 65 12;--tw-orange-800:154 52 18;--tw-orange-900:124 45 18; --tw-orange-950:67 20 7;--tw-emerald-50:236 253 245;--tw-emerald-100:209 250 229;--tw-emerald-200:167 243 208;--tw-emerald-300:110 231 183;--tw-emerald-400:52 211 153; --tw-emerald-500:34 197 139;--tw-emerald-600:13 159 110;--tw-emerald-700:4 120 87;--tw-emerald-800:6 95 70;--tw-emerald-900:6 78 59;--tw-emerald-950:2 44 34; --tw-green-50:240 253 244;--tw-green-100:220 252 231;--tw-green-200:187 247 208;--tw-green-300:134 239 172;--tw-green-400:74 222 128;--tw-green-500:34 197 94; --tw-green-600:22 163 74;--tw-green-700:21 128 61;--tw-green-800:22 101 52;--tw-green-900:20 83 45;--tw-green-950:5 46 22;--tw-blue-50:239 246 255; --tw-blue-100:219 234 254;--tw-blue-200:191 219 254;--tw-blue-300:147 197 253;--tw-blue-400:96 165 250;--tw-blue-500:59 130 246;--tw-blue-600:37 99 235; --tw-blue-700:29 78 216;--tw-blue-800:30 64 175;--tw-blue-900:30 58 138;--tw-blue-950:23 37 84;--tw-purple-50:250 245 255;--tw-purple-100:243 232 255; --tw-purple-200:233 213 255;--tw-purple-300:216 180 254;--tw-purple-400:192 132 252;--tw-purple-500:168 85 247;--tw-purple-600:147 51 234;--tw-purple-700:126 34 206; --tw-purple-800:107 33 168;--tw-purple-900:88 28 135;--tw-purple-950:59 7 100;--tw-violet-50:245 243 255;--tw-violet-100:237 233 254;--tw-violet-200:221 214 254; --tw-violet-300:196 181 253;--tw-violet-400:167 139 250;--tw-violet-500:139 92 246;--tw-violet-600:124 58 237;--tw-violet-700:109 40 217;--tw-violet-800:91 33 182; --tw-violet-900:76 29 149;--tw-violet-950:46 16 101;--tw-teal-50:240 253 250;--tw-teal-100:204 251 241;--tw-teal-200:153 246 228;--tw-teal-300:94 234 212; --tw-teal-400:45 212 191;--tw-teal-500:20 184 166;--tw-teal-600:13 148 136;--tw-teal-700:15 118 110;--tw-teal-800:17 94 89;--tw-teal-900:19 78 74; --tw-teal-950:4 47 46;--tw-sky-50:240 249 255;--tw-sky-100:224 242 254;--tw-sky-200:186 230 253;--tw-sky-300:125 211 252;--tw-sky-400:56 189 248; --tw-sky-500:14 165 233;--tw-sky-600:2 132 199;--tw-sky-700:3 105 161;--tw-sky-800:7 89 133;--tw-sky-900:12 74 110;--tw-sky-950:8 47 73; --tw-white:243 245 244; } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0a0c0b; --bg-2:#0e1110; --surface:#111513; --surface-2:#171c19; --surface-3:#1f2522; --ink:#eaeeeb; --ink-2:#a9b2ad; --ink-3:#78827d; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --accent:#22c58b; --accent-2:#3fd9a0; --accent-ink:#03140c; --accent-text:#34d399; --accent-tint:rgba(34,197,139,.12); --accent-glow:rgba(34,197,139,.28); --good:#34d399; --warn:#f2b441; --bad:#f06a5f; --info:#7aa2ff; --gold:#e8c170; --good-tint:rgba(52,211,153,.12); --warn-tint:rgba(242,180,65,.12); --bad-tint:rgba(240,106,95,.12); --info-tint:rgba(122,162,255,.12); --gold-tint:rgba(232,193,112,.12); --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -30px rgba(0,0,0,.9); --shadow-lg:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -40px rgba(0,0,0,.95); --nav-bg:rgba(10,12,11,.78); --tw-zinc-50:246 247 246;--tw-zinc-100:234 238 235;--tw-zinc-200:213 219 216;--tw-zinc-300:188 196 192;--tw-zinc-400:169 178 173;--tw-zinc-500:120 130 125; --tw-zinc-600:86 96 91;--tw-zinc-700:52 59 55;--tw-zinc-800:31 37 34;--tw-zinc-900:19 23 21;--tw-zinc-950:10 12 11;--tw-red-50:254 242 242; --tw-red-100:254 226 226;--tw-red-200:254 202 202;--tw-red-300:252 165 165;--tw-red-400:248 113 113;--tw-red-500:239 68 68;--tw-red-600:220 38 38; --tw-red-700:185 28 28;--tw-red-800:153 27 27;--tw-red-900:127 29 29;--tw-red-950:69 10 10;--tw-yellow-50:254 252 232;--tw-yellow-100:254 249 195; --tw-yellow-200:254 240 138;--tw-yellow-300:253 224 71;--tw-yellow-400:250 204 21;--tw-yellow-500:234 179 8;--tw-yellow-600:202 138 4;--tw-yellow-700:161 98 7; --tw-yellow-800:133 77 14;--tw-yellow-900:113 63 18;--tw-yellow-950:66 32 6;--tw-amber-50:255 251 235;--tw-amber-100:254 243 199;--tw-amber-200:253 230 138; --tw-amber-300:252 211 77;--tw-amber-400:251 191 36;--tw-amber-500:245 158 11;--tw-amber-600:217 119 6;--tw-amber-700:180 83 9;--tw-amber-800:146 64 14; --tw-amber-900:120 53 15;--tw-amber-950:69 26 3;--tw-orange-50:255 247 237;--tw-orange-100:255 237 213;--tw-orange-200:254 215 170;--tw-orange-300:253 186 116; --tw-orange-400:251 146 60;--tw-orange-500:249 115 22;--tw-orange-600:234 88 12;--tw-orange-700:194 65 12;--tw-orange-800:154 52 18;--tw-orange-900:124 45 18; --tw-orange-950:67 20 7;--tw-emerald-50:236 253 245;--tw-emerald-100:209 250 229;--tw-emerald-200:167 243 208;--tw-emerald-300:110 231 183;--tw-emerald-400:52 211 153; --tw-emerald-500:34 197 139;--tw-emerald-600:13 159 110;--tw-emerald-700:4 120 87;--tw-emerald-800:6 95 70;--tw-emerald-900:6 78 59;--tw-emerald-950:2 44 34; --tw-green-50:240 253 244;--tw-green-100:220 252 231;--tw-green-200:187 247 208;--tw-green-300:134 239 172;--tw-green-400:74 222 128;--tw-green-500:34 197 94; --tw-green-600:22 163 74;--tw-green-700:21 128 61;--tw-green-800:22 101 52;--tw-green-900:20 83 45;--tw-green-950:5 46 22;--tw-blue-50:239 246 255; --tw-blue-100:219 234 254;--tw-blue-200:191 219 254;--tw-blue-300:147 197 253;--tw-blue-400:96 165 250;--tw-blue-500:59 130 246;--tw-blue-600:37 99 235; --tw-blue-700:29 78 216;--tw-blue-800:30 64 175;--tw-blue-900:30 58 138;--tw-blue-950:23 37 84;--tw-purple-50:250 245 255;--tw-purple-100:243 232 255; --tw-purple-200:233 213 255;--tw-purple-300:216 180 254;--tw-purple-400:192 132 252;--tw-purple-500:168 85 247;--tw-purple-600:147 51 234;--tw-purple-700:126 34 206; --tw-purple-800:107 33 168;--tw-purple-900:88 28 135;--tw-purple-950:59 7 100;--tw-violet-50:245 243 255;--tw-violet-100:237 233 254;--tw-violet-200:221 214 254; --tw-violet-300:196 181 253;--tw-violet-400:167 139 250;--tw-violet-500:139 92 246;--tw-violet-600:124 58 237;--tw-violet-700:109 40 217;--tw-violet-800:91 33 182; --tw-violet-900:76 29 149;--tw-violet-950:46 16 101;--tw-teal-50:240 253 250;--tw-teal-100:204 251 241;--tw-teal-200:153 246 228;--tw-teal-300:94 234 212; --tw-teal-400:45 212 191;--tw-teal-500:20 184 166;--tw-teal-600:13 148 136;--tw-teal-700:15 118 110;--tw-teal-800:17 94 89;--tw-teal-900:19 78 74; --tw-teal-950:4 47 46;--tw-sky-50:240 249 255;--tw-sky-100:224 242 254;--tw-sky-200:186 230 253;--tw-sky-300:125 211 252;--tw-sky-400:56 189 248; --tw-sky-500:14 165 233;--tw-sky-600:2 132 199;--tw-sky-700:3 105 161;--tw-sky-800:7 89 133;--tw-sky-900:12 74 110;--tw-sky-950:8 47 73; --tw-white:243 245 244; } /* ── Base ─────────────────────────────────────────────────────────── */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} ::selection{background:var(--accent);color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} code,kbd,pre,samp{font-family:var(--mono)} .tabular{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ── Type helpers ─────────────────────────────────────────────────── */ .p-display{font-size:var(--fs-4xl);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:600;text-wrap:balance} .p-h1{font-size:var(--fs-3xl);line-height:1.1;letter-spacing:var(--track-display);font-weight:600;text-wrap:balance} .p-h2{font-size:var(--fs-2xl);line-height:1.15;letter-spacing:var(--track-heading);font-weight:600;text-wrap:balance} .p-h3{font-size:var(--fs-lg);line-height:var(--lh-snug);letter-spacing:-.01em;font-weight:600} .p-lede{font-size:var(--fs-md);color:var(--ink-2);max-width:62ch} .p-eyebrow{font:500 11.5px/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3)} .p-eyebrow.accent{color:var(--accent-text)} .p-mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .p-dim{color:var(--ink-2)} .p-faint{color:var(--ink-3)} .p-accent{color:var(--accent-text)} /* ── Layout ───────────────────────────────────────────────────────── */ .p-wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad-x)} .p-wrap.narrow{max-width:var(--col-narrow)} .p-stack{display:grid;gap:var(--space-4)} .p-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} /* ── Site header ──────────────────────────────────────────────────── */ .p-nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)} .p-nav-inner{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad-x);height:60px;display:flex;align-items:center;gap:var(--space-5)} .p-brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink);text-decoration:none} .p-brand img,.p-brand svg{width:24px;height:24px} .p-nav-links{margin-left:auto;display:flex;align-items:center;gap:var(--space-1)} .p-nav-link{font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);transition:color .15s,background .15s} .p-nav-link:hover{color:var(--ink);background:var(--surface-2)} .p-nav-link[aria-current="page"]{color:var(--ink)} @media (max-width:640px){.p-nav-link.hide-sm{display:none}} /* ── Buttons ──────────────────────────────────────────────────────── */ .p-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .1s} .p-btn:hover{border-color:var(--ink-3)} .p-btn:active{transform:translateY(1px)} .p-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .p-btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)} .p-btn.ghost{background:none;border-color:transparent;color:var(--accent-text)} .p-btn.ghost:hover{background:var(--accent-tint)} .p-btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)} .p-btn.sm{height:34px;padding:0 13px;font-size:13.5px} .p-btn.lg{height:50px;padding:0 24px;font-size:16px;border-radius:var(--radius)} .p-btn[disabled],.p-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed} /* ── Inputs ───────────────────────────────────────────────────────── */ .p-input{width:100%;height:42px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s} .p-input::placeholder{color:var(--ink-3)} .p-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)} .p-label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px} .p-field{display:flex;gap:8px;padding:6px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow)} .p-field input{flex:1;min-width:0;border:0;background:none;padding:0 10px;font:500 15px var(--mono);color:var(--ink);outline:none} .p-field input::placeholder{color:var(--ink-3)} .p-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint),var(--shadow)} /* ── Surfaces ─────────────────────────────────────────────────────── */ .p-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-5)} .p-card.flat{box-shadow:none} .p-card.inset{background:var(--surface-2);box-shadow:none} .p-divider{height:1px;background:var(--line);border:0;margin:0} /* ── Status ───────────────────────────────────────────────────────── */ .p-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-pill);font:500 12px/1 var(--mono);white-space:nowrap;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)} .p-pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .p-pill.good{color:var(--good);background:var(--good-tint);border-color:transparent} .p-pill.warn{color:var(--warn);background:var(--warn-tint);border-color:transparent} .p-pill.bad{color:var(--bad);background:var(--bad-tint);border-color:transparent} .p-pill.info{color:var(--info);background:var(--info-tint);border-color:transparent} .p-pill.accent{color:var(--accent-text);background:var(--accent-tint);border-color:transparent} .p-pill.gold{color:var(--gold);background:var(--gold-tint);border-color:transparent} .p-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);font-size:14px;color:var(--ink-2)} .p-note.accent{background:var(--accent-tint)} .p-note.warn{background:var(--warn-tint)} .p-note.bad{background:var(--bad-tint)} .p-note b{color:var(--ink);font-weight:600} .p-score-good{color:var(--good)} .p-score-mid{color:var(--warn)} .p-score-bad{color:var(--bad)} /* ── Data ─────────────────────────────────────────────────────────── */ .p-table-wrap{overflow-x:auto} .p-table{width:100%;border-collapse:collapse;font-size:14px} .p-table th{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 12px 10px} .p-table td{padding:12px;border-top:1px solid var(--line);vertical-align:middle} .p-table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .p-meter{height:6px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden} .p-meter > i{display:block;height:100%;background:var(--accent);border-radius:inherit} .p-kbd{font:500 12px var(--mono);padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2)} .p-code{font:13px/1.6 var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;overflow-x:auto;color:var(--ink)} /* ── Theme toggle (theme.js fills the icon) ───────────────────────── */ .p-theme{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:color .15s,border-color .15s;flex:none} .p-theme:hover{color:var(--ink);border-color:var(--line-2)} .p-theme svg{width:16px;height:16px} /* ── Footer ───────────────────────────────────────────────────────── */ .p-footer{border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px} .p-footer a{color:var(--ink-2);text-decoration:none} .p-footer a:hover{color:var(--ink)}