/* Live style previews — one mini mockup, one class per design style. */
.sp{--bg:#fff;--fg:#111;--mut:#666;--acc:#2563eb;--acc-fg:#fff;--card:#f4f4f5;--bd:#e4e4e7;--r:10px;--sh:none;--font:Inter,sans-serif;--hfont:var(--font);--hw:700;--hs:0;
  position:relative;aspect-ratio:16/10;margin:10px 10px 0;border-radius:14px;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:11px;line-height:1.35;isolation:isolate;border:1px solid var(--line)}
.sp *{box-sizing:border-box}
.sp-bg{position:absolute;inset:0;z-index:-1}
.sp-nav{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:10px;color:var(--mut)}
.sp-logo{font-family:var(--hfont);font-weight:800;color:var(--fg);margin-right:auto;font-size:12px}
.sp-hero{padding:4px 14px 0}
.sp-hero h4{margin:0 0 4px;font-family:var(--hfont);font-weight:var(--hw);font-size:21px;line-height:1.05;letter-spacing:var(--hs)}
.sp-hero h4 em{font-style:normal;color:var(--acc)}
.sp-hero p{margin:0 0 9px;color:var(--mut);max-width:70%}
.sp-row{display:flex;gap:7px}
.sp-btn{display:inline-flex;align-items:center;font-style:normal;padding:6px 11px;border-radius:var(--r);background:var(--acc);color:var(--acc-fg);font-weight:600;font-size:10px;box-shadow:var(--sh)}
.sp-btn.sm{padding:4px 9px}
.sp-btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--bd);box-shadow:none}
.sp-card{position:absolute;right:12px;bottom:12px;width:44%;padding:9px;border-radius:var(--r);background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);display:flex;gap:7px;align-items:center}
.sp-in{flex:1;padding:5px 7px;border-radius:calc(var(--r)*.7);background:var(--bg);border:1px solid var(--bd);color:var(--mut);font-size:9.5px;white-space:nowrap;overflow:hidden}
.sp-tg{width:26px;height:15px;border-radius:9px;background:var(--acc);position:relative;flex:none}
.sp-tg::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--acc-fg)}
/* phone variant */
.sp.phone{display:grid;place-items:center;background:var(--frame,#e9edf2)}
.sp.phone .sp-screen{position:relative;width:34%;height:92%;border-radius:18px;overflow:hidden;background:var(--bg);border:3px solid #111;isolation:isolate}
.sp.phone .sp-hero h4{font-size:15px}.sp.phone .sp-hero p{max-width:100%}
.sp.phone .sp-card{left:8px;right:8px;width:auto;bottom:8px}
.sp.phone .sp-nav span{display:none}

/* ------- styles ------- */
.s-swiss{--r:0;--acc:#e30613;--font:'Inter';--hw:800;--hs:-.03em;--bd:#111}
.s-swiss .sp-hero h4{font-size:24px}.s-swiss .sp-nav{border-bottom:2px solid #111;color:#111}
.s-neu{--bg:#e6e9ef;--card:#e6e9ef;--fg:#3a4150;--mut:#7a8394;--acc:#6c7cff;--bd:transparent;--r:14px;--sh:5px 5px 11px #b8bec9,-5px -5px 11px #fff;--font:'Nunito'}
.s-neu .sp-btn.ghost{box-shadow:inset 3px 3px 6px #b8bec9,inset -3px -3px 6px #fff;border:0}
.s-neu .sp-in{box-shadow:inset 3px 3px 6px #b8bec9,inset -3px -3px 6px #fff;border:0;background:#e6e9ef}
.s-glass{--bg:#312e81;--fg:#fff;--mut:rgba(255,255,255,.75);--card:rgba(255,255,255,.14);--bd:rgba(255,255,255,.3);--acc:#fff;--acc-fg:#312e81;--r:14px}
.s-glass .sp-bg{background:radial-gradient(40% 60% at 20% 30%,#ec4899,transparent),radial-gradient(40% 60% at 80% 70%,#06b6d4,transparent),#312e81}
.s-glass .sp-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.s-glass .sp-in{background:rgba(255,255,255,.12);color:#fff}
.s-brutal{--bg:#fff;--fg:#000;--mut:#000;--acc:#ff0;--acc-fg:#000;--card:#fff;--bd:#000;--r:0;--font:'Space Mono',monospace;--hfont:'Archivo',sans-serif;--hw:900}
.s-brutal .sp-btn,.s-brutal .sp-card,.s-brutal .sp-in{border:3px solid #000}.s-brutal .sp-hero h4{font-size:24px;text-transform:uppercase}.s-brutal .sp-bg{background:repeating-linear-gradient(0deg,transparent 0 19px,#0001 19px 20px)}
.s-3d{--bg:#0f172a;--fg:#fff;--mut:#94a3b8;--acc:#f59e0b;--acc-fg:#111;--card:linear-gradient(145deg,#334155,#1e293b);--bd:#475569;--r:12px;--sh:0 14px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.s-3d .sp-card{background:linear-gradient(145deg,#334155,#1e293b);transform:perspective(300px) rotateY(-14deg) rotateX(8deg)}.s-3d .sp-btn{background:linear-gradient(#fbbf24,#d97706);box-shadow:0 4px 0 #92400e}
.s-vibrant{--bg:#ffe600;--fg:#111;--mut:#333;--acc:#ff2e63;--card:#00d1ff;--bd:#111;--r:6px;--font:'Poppins';--hw:800}
.s-vibrant .sp-bg{background:linear-gradient(90deg,#ffe600 60%,#7c3aed 60%)}.s-vibrant .sp-card{border:2px solid #111}
.s-oled{--bg:#000;--fg:#fff;--mut:#8a8a8a;--acc:#22d3ee;--acc-fg:#000;--card:#0a0a0a;--bd:#1f1f1f}
.s-a11y{--bg:#fff;--fg:#111;--mut:#333;--acc:#0b57d0;--card:#f8f9fa;--bd:#111;--r:6px;--font:'Atkinson Hyperlegible'}
.s-a11y .sp-btn{outline:3px solid #fbbc04;outline-offset:2px;text-decoration:underline}.s-a11y .sp-hero p{color:#111}
.s-clay{--bg:#f7e8ff;--fg:#4c1d95;--mut:#7c3aed;--acc:#fb7185;--card:#fde68a;--bd:transparent;--r:20px;--font:'Fredoka';--sh:inset -4px -4px 8px rgba(0,0,0,.12),inset 4px 4px 8px rgba(255,255,255,.7),0 8px 16px rgba(124,58,237,.25)}
.s-aurora{--bg:#0b1020;--fg:#fff;--mut:#c7d2fe;--acc:#fff;--acc-fg:#0b1020;--card:rgba(255,255,255,.08);--bd:rgba(255,255,255,.18);--r:14px}
.s-aurora .sp-bg{background:radial-gradient(60% 50% at 20% 20%,#22d3ee88,transparent),radial-gradient(50% 60% at 80% 30%,#a855f788,transparent),radial-gradient(60% 50% at 50% 100%,#10b98188,transparent),#0b1020;filter:blur(8px)}
.s-retro{--bg:#1a0033;--fg:#ffd1f5;--mut:#ff9de6;--acc:#ff00c8;--card:#2a004f;--bd:#ff00c8;--r:4px;--font:'Orbitron';--hfont:'Orbitron'}
.s-retro .sp-bg{background:linear-gradient(transparent 55%,#ff00c833 55%),repeating-linear-gradient(90deg,#00f0ff33 0 1px,transparent 1px 22px),linear-gradient(#1a0033,#3b0764)}.s-retro .sp-hero h4{text-shadow:0 0 10px #ff00c8}
.s-flat{--bg:#ecf0f1;--fg:#2c3e50;--mut:#7f8c8d;--acc:#e74c3c;--card:#3498db;--bd:transparent;--r:4px;--font:'Lato'}
.s-flat .sp-in{border:0}
.s-skeu{--bg:#d9c8a9;--fg:#3b2a1a;--mut:#5b4633;--acc:#7a4b1f;--card:#f3e9d2;--bd:#a88b62;--r:8px;--font:'Libre Baskerville';--sh:0 3px 6px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.s-skeu .sp-bg{background:repeating-linear-gradient(90deg,#cbb690 0 3px,#d9c8a9 3px 9px)}.s-skeu .sp-btn{background:linear-gradient(#a0662f,#6b3f16);border:1px solid #4a2a0c}
.s-liquid{--bg:#dbeafe;--fg:#0f172a;--mut:#334155;--acc:rgba(255,255,255,.55);--acc-fg:#0f172a;--card:rgba(255,255,255,.35);--bd:rgba(255,255,255,.7);--r:18px;--sh:inset 0 1px 1px rgba(255,255,255,.9),0 8px 24px rgba(15,23,42,.18)}
.s-liquid .sp-bg{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Ccircle cx='25' cy='20' r='18' fill='%23f97316'/%3E%3Ccircle cx='75' cy='45' r='20' fill='%236366f1'/%3E%3C/svg%3E") center/cover}
.s-liquid .sp-card,.s-liquid .sp-btn{backdrop-filter:blur(10px) saturate(1.8);-webkit-backdrop-filter:blur(10px) saturate(1.8);border:1px solid rgba(255,255,255,.7)}
.s-motion .sp-hero h4 em{display:inline-block;animation:spBounce 1.4s ease-in-out infinite}.s-motion .sp-card{animation:spFloat 3s ease-in-out infinite}
.s-micro .sp-btn{animation:spPulse 1.6s ease-in-out infinite}.s-micro .sp-tg::after{animation:spSlide 1.8s ease-in-out infinite alternate}
.s-inclusive{--bg:#fffdf5;--fg:#1a1a1a;--mut:#333;--acc:#005a9c;--card:#fff;--bd:#1a1a1a;--r:8px;--font:'Lexend'}.s-inclusive .sp-hero h4{font-size:19px}
.s-zero{--bg:#fafafa;--fg:#111;--mut:#999;--card:transparent;--bd:transparent}.s-zero .sp-nav span,.s-zero .sp-btn.ghost{display:none}.s-zero .sp-hero{text-align:center;padding-top:22px}.s-zero .sp-hero p{margin:0 auto 9px}.s-zero .sp-row{justify-content:center}.s-zero .sp-card{display:none}
.s-softui{--bg:#f1f3f8;--card:#fff;--fg:#1f2937;--mut:#6b7280;--acc:#7c5cff;--bd:#eef0f5;--r:14px;--sh:0 6px 16px rgba(124,92,255,.14),0 1px 2px rgba(0,0,0,.05);--font:'Plus Jakarta Sans'}
.s-neubrutal{--bg:#fdf6e3;--fg:#111;--mut:#333;--acc:#ff6b6b;--acc-fg:#111;--card:#a7f3d0;--bd:#111;--r:8px;--sh:4px 4px 0 #111;--font:'Space Grotesk';--hw:800}
.s-neubrutal .sp-btn,.s-neubrutal .sp-card,.s-neubrutal .sp-in{border:2px solid #111}.s-neubrutal .sp-btn.ghost{background:#fde047;box-shadow:4px 4px 0 #111}
.s-y2k{--bg:#e0e7ff;--fg:#1e1b4b;--mut:#4338ca;--acc:#ec4899;--card:linear-gradient(#fff,#c7d2fe);--bd:#a5b4fc;--r:20px;--font:'Syncopate';--hfont:'Syncopate'}
.s-y2k .sp-bg{background:radial-gradient(circle at 80% 20%,#f0abfc,transparent 40%),linear-gradient(135deg,#e0e7ff,#fbcfe8,#bae6fd)}.s-y2k .sp-card{background:linear-gradient(#fff,#c7d2fe)}.s-y2k .sp-hero h4{font-size:16px;background:linear-gradient(90deg,#6366f1,#ec4899);-webkit-background-clip:text;color:transparent}
.s-cyber{--bg:#0a0a0f;--fg:#f0f;--mut:#0ff;--acc:#fcee0a;--acc-fg:#000;--card:#111;--bd:#0ff;--r:0;--font:'Share Tech Mono';--hfont:'Orbitron'}
.s-cyber .sp-hero h4{color:#fcee0a;text-shadow:2px 0 #f0f,-2px 0 #0ff}.s-cyber .sp-card{clip-path:polygon(0 0,92% 0,100% 30%,100% 100%,8% 100%,0 70%)}.s-cyber .sp-bg{background:repeating-linear-gradient(0deg,#0ff1 0 1px,transparent 1px 3px)}
.s-bio{--bg:#eef5e9;--fg:#1f3b2c;--mut:#4a6b57;--acc:#3f7d4e;--card:#fff8ec;--bd:#cfe0c3;--r:22px;--font:'Nunito';--hfont:'Lora'}
.s-bio .sp-bg{background:radial-gradient(50% 70% at 100% 0,#b7d7a8,transparent 60%),radial-gradient(40% 60% at 0 100%,#d9c7a7,transparent 60%)}.s-bio .sp-card{border-radius:30px 10px 30px 10px}
.s-ainative{--bg:#fbfaff;--fg:#1c1b29;--mut:#6b6880;--acc:#7c3aed;--card:#fff;--bd:#e9e5ff;--r:16px}
.s-ainative .sp-in{border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#7c3aed,#06b6d4,#f472b6) border-box}.s-ainative .sp-hero h4 em{background:linear-gradient(90deg,#7c3aed,#06b6d4);-webkit-background-clip:text;color:transparent}
.s-memphis{--bg:#fff7e6;--fg:#111;--mut:#333;--acc:#ff4f79;--card:#00c2a8;--bd:#111;--r:0;--font:'Poppins';--hw:800}
.s-memphis .sp-bg{background:radial-gradient(circle at 85% 20%,#ffcf00 0 14px,transparent 15px),radial-gradient(circle at 10% 85%,#3d5afe 0 10px,transparent 11px),repeating-linear-gradient(45deg,transparent 0 8px,#ff4f7922 8px 10px)}.s-memphis .sp-card{border:2px solid #111;transform:rotate(-3deg)}
.s-vapor{--bg:#ff71ce;--fg:#fff;--mut:#fffb96;--acc:#01cdfe;--acc-fg:#111;--card:#b967ff;--bd:#fff;--r:0;--font:'VT323';--hfont:'Righteous'}
.s-vapor .sp-bg{background:linear-gradient(#ff71ce,#b967ff 55%,#05ffa1 56%,#01cdfe)}.s-vapor .sp-hero h4{font-size:22px;text-shadow:3px 3px 0 #01cdfe}
.s-layer{--bg:#eef2ff;--fg:#1e1b4b;--mut:#4338ca;--acc:#4f46e5;--card:#fff;--bd:#c7d2fe;--r:12px;--sh:0 2px 0 #c7d2fe,0 10px 0 -3px #e0e7ff,0 18px 26px rgba(79,70,229,.25)}
.s-exmin{--bg:#f5f5f0;--fg:#0a0a0a;--mut:#777;--acc:#0a0a0a;--card:transparent;--bd:#0a0a0a;--r:0;--hw:900;--hs:-.06em}.s-exmin .sp-hero h4{font-size:34px}.s-exmin .sp-hero p,.s-exmin .sp-btn.ghost,.s-exmin .sp-nav span{display:none}
.s-kinetic{--bg:#0a0a0a;--fg:#fff;--mut:#a3a3a3;--acc:#d9ff00;--acc-fg:#000;--card:#171717;--bd:#262626;--hfont:'Anton';--hw:400}
.s-kinetic .sp-hero h4{font-size:30px;text-transform:uppercase;white-space:nowrap;animation:spMarquee 5s linear infinite}
.s-parallax{--bg:#0c1b2a;--fg:#fff;--mut:#cbd5e1;--acc:#fb923c;--card:rgba(255,255,255,.1);--bd:rgba(255,255,255,.2);--hfont:'Playfair Display'}
.s-parallax .sp-bg{background:linear-gradient(transparent 60%,#0c1b2a),radial-gradient(120% 60% at 50% 110%,#1e3a5f 40%,transparent 41%),radial-gradient(90% 50% at 20% 100%,#27496d 40%,transparent 41%),linear-gradient(#f97316,#7c2d12 50%,#0c1b2a)}
.s-swiss2{--bg:#fff;--fg:#000;--mut:#555;--acc:#0033ff;--card:#fff;--bd:#000;--r:0;--hw:700;--hs:-.04em}.s-swiss2 .sp-bg{background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),#0033ff22 calc(100%/6 - 1px) calc(100%/6))}.s-swiss2 .sp-hero h4{font-size:26px}
.s-hud{--bg:#02080f;--fg:#7dd3fc;--mut:#38bdf8;--acc:#22d3ee;--acc-fg:#02080f;--card:rgba(34,211,238,.06);--bd:#22d3ee;--r:0;--font:'Share Tech Mono';--hfont:'Chakra Petch'}
.s-hud .sp-card{border-width:1px;box-shadow:0 0 12px #22d3ee55 inset}.s-hud .sp-bg{background:radial-gradient(circle at 75% 40%,transparent 22%,#22d3ee33 22.5%,transparent 23.5%,transparent 30%,#22d3ee22 30.5%,transparent 31.5%)}
.s-pixel{--bg:#5c94fc;--fg:#fff;--mut:#fff;--acc:#e45c10;--card:#fcfcfc;--bd:#000;--r:0;--font:'Press Start 2P';--hfont:'Press Start 2P';--hw:400}
.s-pixel .sp-hero h4{font-size:12px;line-height:1.6;text-shadow:2px 2px 0 #000}.s-pixel .sp-hero p{font-size:7px;line-height:1.7}.s-pixel .sp-btn,.s-pixel .sp-card{box-shadow:3px 3px 0 #000;border:2px solid #000;font-size:7px}.s-pixel .sp-in{font-size:7px;color:#000}.s-pixel .sp-nav{font-size:7px}
.s-bento{--bg:#f4f4f5;--card:#fff;--bd:#e4e4e7;--r:14px;--acc:#111}
.s-spatial{--bg:#6b7280;--fg:#fff;--mut:rgba(255,255,255,.8);--acc:rgba(255,255,255,.9);--acc-fg:#111;--card:rgba(255,255,255,.2);--bd:rgba(255,255,255,.35);--r:22px;--sh:0 20px 40px rgba(0,0,0,.35)}
.s-spatial .sp-bg{background:linear-gradient(160deg,#94a3b8,#475569 60%,#1e293b)}.s-spatial .sp-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateZ(0) scale(1.04)}
.s-eink{--bg:#f2f0e9;--fg:#1a1a1a;--mut:#555;--acc:#1a1a1a;--acc-fg:#f2f0e9;--card:#f2f0e9;--bd:#1a1a1a;--r:0;--font:'Newsreader';--hfont:'Newsreader';--hw:600}.s-eink .sp-bg{filter:grayscale(1)}
.s-genz{--bg:#b4ff00;--fg:#111;--mut:#111;--acc:#ff00a8;--card:#00e5ff;--bd:#111;--r:30px;--font:'Syne';--hfont:'Syne';--hw:800}
.s-genz .sp-hero h4{font-size:26px;transform:rotate(-4deg)}.s-genz .sp-card{transform:rotate(5deg);border:2px dashed #111}.s-genz .sp-bg{background:radial-gradient(circle at 80% 30%,#ff00a8 0 20%,transparent 21%),repeating-radial-gradient(circle at 10% 90%,#1111 0 2px,transparent 3px 8px)}
.s-biomim{--bg:#062b2b;--fg:#d1fae5;--mut:#6ee7b7;--acc:#34d399;--acc-fg:#062b2b;--card:rgba(52,211,153,.12);--bd:#34d39955;--r:28px}.s-biomim .sp-bg{background:radial-gradient(30% 45% at 70% 50%,#10b98155,transparent),radial-gradient(25% 35% at 30% 80%,#06b6d455,transparent)}
.s-raw{--bg:#fff;--fg:#000;--mut:#000;--acc:#00f;--acc-fg:#fff;--card:#fff;--bd:#000;--r:0;--font:'Times New Roman',serif;--hfont:'Times New Roman',serif;--hw:400}.s-raw .sp-btn{text-decoration:underline;background:none;color:#00f;padding:0}.s-raw .sp-hero h4{font-size:22px}
.s-tactile{--bg:#ffe4e6;--fg:#881337;--mut:#be123c;--acc:#fb7185;--card:#fecdd3;--bd:transparent;--r:24px;--sh:0 10px 0 #fda4af,0 14px 20px rgba(136,19,55,.25)}.s-tactile .sp-btn{animation:spSquish 1.6s ease-in-out infinite}
.s-naturedist{--bg:#f3efe6;--fg:#2f3a2f;--mut:#6b705c;--acc:#a44a3f;--card:#e8e2d4;--bd:#d6ccb8;--r:6px;--hfont:'Cormorant Garamond';--hw:600}.s-naturedist .sp-hero h4{font-size:24px}
.s-cursor{--bg:#111;--fg:#fff;--mut:#a3a3a3;--acc:#fff;--acc-fg:#111;--card:#1f1f1f;--bd:#333}.s-cursor .sp-bg::after{content:"";position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;mix-blend-mode:difference;left:30%;top:36%;animation:spCursor 3s ease-in-out infinite}
.s-voice{--bg:#0f0a1e;--fg:#fff;--mut:#c4b5fd;--acc:#a78bfa;--card:#1c1433;--bd:#2e2350;--r:30px}.s-voice .sp-bg{background:radial-gradient(circle at 50% 60%,#a78bfa66 0 12%,transparent 13%),radial-gradient(circle at 50% 60%,#a78bfa33 0 20%,transparent 21%)}.s-voice .sp-bg{animation:spPulse 1.8s ease-in-out infinite}
.s-3dprod{--bg:#f5f5f7;--fg:#1d1d1f;--mut:#6e6e73;--acc:#0071e3;--card:#fff;--bd:#e5e5ea;--r:14px}.s-3dprod .sp-bg{background:radial-gradient(circle at 75% 45%,#fff 0 12%,transparent 12.5%),radial-gradient(ellipse 26% 8% at 75% 72%,#0002,transparent),#f5f5f7}.s-3dprod .sp-bg::after{content:"";position:absolute;left:66%;top:22%;width:18%;aspect-ratio:1;border-radius:22%;background:linear-gradient(135deg,#d4d4d8,#71717a);transform:rotate(18deg);animation:spSpin 6s linear infinite}
.s-mesh{--bg:#fff;--fg:#111;--mut:#333;--acc:#111;--card:rgba(255,255,255,.6);--bd:rgba(255,255,255,.8);--r:16px}.s-mesh .sp-bg{background:radial-gradient(at 10% 20%,#fde68a,transparent 50%),radial-gradient(at 90% 10%,#f9a8d4,transparent 50%),radial-gradient(at 60% 90%,#93c5fd,transparent 55%),radial-gradient(at 20% 90%,#a7f3d0,transparent 50%),#fff}
.s-editorial{--bg:#fbf8f3;--fg:#111;--mut:#555;--acc:#b91c1c;--card:#fbf8f3;--bd:#111;--r:0;--font:'Source Serif 4';--hfont:'Playfair Display';--hw:800}.s-editorial .sp-nav{border-bottom:1px solid #111;font-variant:small-caps}.s-editorial .sp-hero h4{font-size:24px;font-style:italic}
.s-rgb{--bg:#000;--fg:#fff;--mut:#aaa;--acc:#fff;--acc-fg:#000;--card:#0a0a0a;--bd:#333;--hw:900}.s-rgb .sp-hero h4{font-size:26px;text-shadow:-3px 0 #f00,3px 0 #0ff}
.s-analog{--bg:#e8dcc4;--fg:#3d2b1f;--mut:#6b4f3a;--acc:#c0562f;--card:#f2e8d5;--bd:#b39b7a;--r:3px;--hfont:'Abril Fatface';--hw:400}.s-analog .sp-bg{background:radial-gradient(circle,transparent 60%,#3d2b1f55),repeating-radial-gradient(#0000 0 1px,#0001 1px 2px)}
.s-bauhaus{--bg:#f0ebe0;--fg:#111;--mut:#333;--acc:#d62828;--card:#f0ebe0;--bd:#111;--r:0;--font:'Jost';--hw:700}.s-bauhaus .sp-bg{background:radial-gradient(circle at 82% 30%,#f4b400 0 13%,transparent 13.5%),linear-gradient(135deg,transparent 70%,#1d4ed8 70%)}.s-bauhaus .sp-btn{border-radius:50px}.s-bauhaus .sp-card{border:2px solid #111}
.s-mono{--bg:#fff;--fg:#000;--mut:#666;--acc:#000;--card:#f5f5f5;--bd:#000;--r:0}
.s-cinema{--bg:#0b0b0d;--fg:#fff;--mut:#8b8b94;--acc:#e50914;--card:#17171b;--bd:#26262c;--r:10px}.s-cinema .sp-bg{background:linear-gradient(transparent,#0b0b0d 80%),radial-gradient(80% 60% at 70% 0,#7f1d1d,transparent)}
.s-saasm{--bg:#fff;--fg:#0f172a;--mut:#64748b;--acc:#4f46e5;--card:#f8fafc;--bd:#e2e8f0;--r:12px;--font:'Plus Jakarta Sans'}
.s-term{--bg:#0c0c0c;--fg:#33ff66;--mut:#1fa84a;--acc:#33ff66;--acc-fg:#0c0c0c;--card:#0c0c0c;--bd:#33ff66;--r:0;--font:'JetBrains Mono';--hfont:'JetBrains Mono'}.s-term .sp-hero h4::before{content:"$ "}.s-term .sp-hero h4::after{content:"_";animation:spBlink 1s steps(1) infinite}
.s-material{--bg:#fef7ff;--fg:#1d1b20;--mut:#49454f;--acc:#6750a4;--card:#f3edf7;--bd:transparent;--r:20px;--font:'Roboto'}.s-material .sp-btn{border-radius:20px}.s-material .sp-btn.ghost{background:#e8def8;color:#1d192b}
.s-boldtype{--bg:#ff4d00;--fg:#fff;--mut:#fff;--acc:#fff;--acc-fg:#ff4d00;--card:#111;--bd:#111;--r:0;--hfont:'Bebas Neue';--hw:400}.s-boldtype .sp-hero h4{font-size:40px;line-height:.9}
.s-academia{--bg:#f7f3ea;--fg:#2b1d0e;--mut:#5c4631;--acc:#7b1e1e;--card:#fffdf7;--bd:#c8b89a;--r:2px;--font:'EB Garamond';--hfont:'Cinzel'}
.s-defi{--bg:#0d0d0d;--fg:#fff;--mut:#9ca3af;--acc:#f7931a;--acc-fg:#111;--card:#1a1a1a;--bd:#2d2d2d;--r:14px;--font:'Space Grotesk'}.s-defi .sp-hero h4 em{color:#f7931a}
.s-enterprise{--bg:#f8fafc;--fg:#0f172a;--mut:#475569;--acc:#0f62fe;--card:#fff;--bd:#cbd5e1;--r:4px;--font:'IBM Plex Sans'}
.s-sketch{--bg:#fffef7;--fg:#222;--mut:#555;--acc:#fff59d;--acc-fg:#222;--card:#fff;--bd:#222;--r:255px 15px 225px 15px/15px 225px 15px 255px;--font:'Patrick Hand';--hfont:'Caveat';--hw:700}.s-sketch .sp-btn,.s-sketch .sp-card,.s-sketch .sp-in{border:2px solid #222}.s-sketch .sp-hero h4{font-size:26px}

/* landing wireframes & dashboards */
.sp.wire{--bg:#fff;--fg:#111;--mut:#9ca3af;--card:#f3f4f6;--acc:var(--c1,#2563eb)}
.sp.wire .w{position:absolute;border-radius:6px;background:var(--card)}
.sp.wire .w.a{background:var(--acc)}.sp.wire .w.t{background:#d1d5db;height:6px}
.sp.dash{--bg:#f8fafc;--card:#fff;--bd:#e5e7eb;--acc:var(--c1,#2563eb);--acc2:var(--c2,#10b981)}
.sp.dash.dk{--bg:#0f172a;--card:#1e293b;--bd:#334155}
.sp.dash .side{position:absolute;left:0;top:0;bottom:0;width:14%;background:var(--card);border-right:1px solid var(--bd)}
.sp.dash .kpi,.sp.dash .pan{position:absolute;background:var(--card);border:1px solid var(--bd);border-radius:6px}
.sp.dash .bars{position:absolute;inset:auto 8% 12% 8%;height:60%;display:flex;align-items:flex-end;gap:5%}
.sp.dash .bars i{flex:1;background:var(--acc);border-radius:2px 2px 0 0}
.sp.dash .heat{position:absolute;inset:14% 6% 10% 6%;display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.sp.dash .heat i{border-radius:2px;background:var(--acc)}
.sp.dash .line{position:absolute;inset:18% 6% 12% 6%}
.sp.dash .line svg{width:100%;height:100%;overflow:visible}

@keyframes spBounce{50%{transform:translateY(-4px)}}
@keyframes spFloat{50%{transform:translateY(-5px)}}
@keyframes spPulse{50%{transform:scale(1.06)}}
@keyframes spSlide{from{transform:translateX(-11px)}to{transform:translateX(0)}}
@keyframes spMarquee{from{transform:translateX(20%)}to{transform:translateX(-60%)}}
@keyframes spSquish{50%{transform:scale(1.08,.9)}}
@keyframes spCursor{50%{left:62%;top:52%}}
@keyframes spSpin{to{transform:rotate(378deg)}}
@keyframes spBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sp *,.sp{animation:none!important}}