/* ============================================================
   Themes D — Retro 70s · Y2K · Synthwave · Cyberpunk · Pixel ·
   Terminal · Hand-drawn · Organic
   ============================================================ */

/* ---------------- RETRO 70s ---------------- */
.s-seventies {
  --bg: #f4e4c1; --fg: #3d2314; --muted: #6b4a33; --accent: #e76f24; --on-accent: #fff6e5;
  --surface: #fff3d9; --line: #3d2314; --r: 999px; --icon-sw: 2.6;
  --font: "Fraunces", Georgia, serif; --display: "Fraunces", "Cooper Black", Georgia, serif;
  font-variation-settings: "SOFT" 100;
}
.s-seventies .sp-bg i:nth-child(5) { display: block; inset: 0; background: var(--noise); opacity: .16; }
.s-seventies .sp-logo { font-size: 26px; font-weight: 900; }
.s-seventies .sp-mark { width: 26px; height: 26px; border: 0; background: radial-gradient(circle, #f2a93b 0 34%, #e76f24 35% 52%, #8c4a2f 53% 70%, transparent 71%); }
.s-seventies .sp-links { font-size: 16px; font-weight: 600; }
.s-seventies .sp-kicker { padding: 6px 16px; border-radius: 99px; background: #e76f24; color: #fff6e5; font-size: 14px; font-style: italic; font-weight: 700; letter-spacing: .02em; }
.s-seventies .sp-title { font-weight: 900; font-size: clamp(40px, 8cqi, 90px); line-height: .96; letter-spacing: -.02em; text-shadow: 3px 3px 0 #f2a93b, 6px 6px 0 #e76f24; }
.s-seventies .t2 { font-style: italic; }
.s-seventies .sp-lede { font-size: 18px; }
.s-seventies .sp-btn { padding: .7em 1.5em; border-radius: 999px; font-size: 17px; font-weight: 800; }
.s-seventies .sp-btn--primary { background: #e76f24; color: #fff6e5; box-shadow: inset 0 -4px 0 rgba(61, 35, 20, .25); }
.s-seventies .sp-btn--secondary { background: #f2a93b; color: #3d2314; box-shadow: inset 0 -4px 0 rgba(61, 35, 20, .2); }
.s-seventies .sp-btn:hover { transform: translateY(-2px); }
.s-seventies .sp-nav .sp-btn--secondary { background: transparent; box-shadow: inset 0 0 0 2.5px #3d2314; font-size: 14px; }
.s-seventies .sp-art { overflow: hidden; }
.s-seventies .sp-art i:nth-child(1) {
  left: 4%; right: 4%; bottom: 0; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0;
  background: radial-gradient(circle farthest-side at 50% 100%, #f4e4c1 0 28%, #7a8b3a 28% 44%, #f2a93b 44% 60%, #e76f24 60% 76%, #8c4a2f 76% 92%, #3d2314 92%);
}
.s-seventies .sp-art i:nth-child(2) { width: 17%; aspect-ratio: 1; right: 7%; top: 5%; border-radius: 50%; background: #f2a93b; box-shadow: 0 0 0 8px rgba(242, 169, 59, .35), 0 0 0 16px rgba(242, 169, 59, .18); }
.s-seventies .sp-card { overflow: hidden; padding: 38px 24px 24px; border: 3px solid #3d2314; border-radius: 28px; background: #fff3d9; }
.s-seventies .sp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(#8c4a2f 0 25%, #e76f24 25% 50%, #f2a93b 50% 75%, #7a8b3a 75%); }
.s-seventies .sp-card h3 { font-size: 22px; font-weight: 900; }
.s-seventies .sp-card p { font-size: 15px; }
.s-seventies .sp-icon { border-radius: 50%; background: #f2a93b; color: #3d2314; }
.s-seventies .sp-panel { --muted: #e3caa0; border-radius: 32px; background: #3d2314; color: #f4e4c1; }
.s-seventies .sp-label { font-size: 18px; font-style: italic; font-weight: 700; }
.s-seventies .sp-input { border: 0; border-radius: 999px; background: #f4e4c1; color: #3d2314; }
.s-seventies .sp-panel .sp-btn--primary { background: #f2a93b; color: #3d2314; }
.s-seventies .sp-controls { font-size: 15px; }
.s-seventies .sp-switch { background: #6b4a33; }
.s-seventies .sp-switch::after { background: #f4e4c1; }
.s-seventies .is-on .sp-switch { background: #e76f24; }
.s-seventies .sp-bar { height: 12px; background: #6b4a33; }
.s-seventies .sp-bar > span { background: linear-gradient(90deg, #7a8b3a, #f2a93b, #e76f24); }
.s-seventies .sp-chips span { border: 0; font-weight: 700; color: #3d2314; }
.s-seventies .sp-chips span:nth-child(1) { background: #f2a93b; }
.s-seventies .sp-chips span:nth-child(2) { background: #e76f24; color: #fff6e5; }
.s-seventies .sp-chips span:nth-child(3) { background: #7a8b3a; color: #fff6e5; }

/* ---------------- Y2K ---------------- */
.s-y2k {
  --bg: #e9f4ff; --fg: #1d2a6b; --muted: #4a5a92; --accent: #5aa8ff; --on-accent: #fff;
  --surface: rgba(255, 255, 255, .55); --line: rgba(29, 42, 107, .2); --r: 24px; --icon-sw: 2.2;
  --font: Verdana, Tahoma, "Trebuchet MS", sans-serif; --display: "Michroma", "Eurostile", sans-serif;
  --chrome: linear-gradient(180deg, #fff 0%, #dfe6f3 22%, #8e9bb8 48%, #4e5a78 50%, #c3cde2 64%, #f4f7fd 82%, #9aa6c2 100%);
  --holo: linear-gradient(120deg, #c7e3ff, #f3c7ff, #c7fff0, #fff2c7, #c7e3ff);
  --star: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  background: radial-gradient(circle at 20% 10%, #fff 0, transparent 40%), linear-gradient(160deg, #d7ecff 0%, #f3e3ff 50%, #dcfff4 100%);
}
.s-y2k .sp-bg i { display: block; width: 22px; aspect-ratio: 1; background: #fff; clip-path: var(--star); }
.s-y2k .sp-bg i:nth-child(1) { top: 12%; left: 46%; }
.s-y2k .sp-bg i:nth-child(2) { top: 58%; left: 6%; width: 14px; }
.s-y2k .sp-bg i:nth-child(3) { top: 30%; right: 5%; width: 28px; }
.s-y2k .sp-bg i:nth-child(4) { bottom: 12%; right: 42%; width: 16px; }
.s-y2k .sp-bg i:nth-child(5) { top: 82%; left: 62%; width: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .s-y2k .sp-bg i { animation: y2k-twinkle 2.6s ease-in-out infinite; }
  .s-y2k .sp-bg i:nth-child(2n) { animation-delay: -1.3s; animation-duration: 3.4s; }
}
@keyframes y2k-twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .5; } }
.s-y2k .sp-nav { padding: 10px 18px; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(220, 232, 250, .72)); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(60, 90, 180, .18), 0 0 0 1px rgba(120, 150, 210, .45); }
.s-y2k .sp-logo { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.s-y2k .sp-mark { width: 22px; height: 22px; border: 0; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #bfe2ff 30%, #5aa8ff 65%, #2d5fd6 100%); box-shadow: 0 2px 6px rgba(45, 95, 214, .4); }
.s-y2k .sp-links { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.s-y2k .sp-kicker { padding: 7px 14px; border-radius: 99px; background: var(--holo); font-family: var(--display); font-size: 9px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .8), 0 4px 12px rgba(160, 120, 255, .25); }
.s-y2k .sp-kicker::before { content: "\2726\00A0\00A0"; }
.s-y2k .sp-kicker::after { content: "\00A0\00A0\2726"; }
.s-y2k .sp-title { font-weight: 400; font-size: clamp(24px, 4.8cqi, 54px); line-height: 1.14; letter-spacing: .02em; text-transform: uppercase; filter: drop-shadow(0 2px 0 #1d2a6b) drop-shadow(0 6px 10px rgba(29, 42, 107, .25)); }
.s-y2k .sp-title span { color: transparent; background: var(--chrome); -webkit-background-clip: text; background-clip: text; }
.s-y2k .sp-lede { font-size: 14px; line-height: 1.65; }
.s-y2k .sp-btn { position: relative; overflow: hidden; padding: 1.25em 2em; border-radius: 99px; font-family: var(--display); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.s-y2k .sp-btn::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3px; height: 45%; border-radius: 99px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)); pointer-events: none; }
.s-y2k .sp-btn--primary { background: linear-gradient(180deg, #8fd0ff, #3b8cff 60%, #5fb2ff); color: #fff; text-shadow: 0 1px 1px rgba(20, 40, 120, .5); box-shadow: inset 0 -3px 6px rgba(20, 50, 160, .35), 0 6px 14px rgba(59, 140, 255, .45), 0 0 0 1px rgba(40, 90, 200, .6); }
.s-y2k .sp-btn--secondary { background: linear-gradient(180deg, #ffd2ef, #ff8fd0 60%, #ffb3e2); color: #fff; text-shadow: 0 1px 1px rgba(150, 20, 90, .45); box-shadow: inset 0 -3px 6px rgba(170, 30, 110, .3), 0 6px 14px rgba(255, 120, 200, .4), 0 0 0 1px rgba(220, 80, 160, .55); }
.s-y2k .sp-nav .sp-btn { padding: .9em 1.4em; font-size: 8px; }
.s-y2k .sp-art i:nth-child(1) { width: 56%; aspect-ratio: 1; left: 20%; top: 10%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .95) 0 8%, transparent 22%), conic-gradient(from 90deg, #c7e3ff, #f3c7ff, #c7fff0, #fff2c7, #ffc7e0, #c7e3ff); box-shadow: inset -10px -14px 30px rgba(80, 60, 200, .25), inset 10px 10px 30px rgba(255, 255, 255, .7), 0 20px 40px rgba(120, 100, 220, .3); }
.s-y2k .sp-art i:nth-child(2) {
  width: 90%; height: 30%; left: 5%; top: 34%; padding: 5px; border-radius: 50%; background: var(--chrome); transform: rotate(-16deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.s-y2k .sp-art i:nth-child(3) { width: 30%; aspect-ratio: 1; right: 4%; top: 0; background: var(--chrome); clip-path: var(--star); }
.s-y2k .sp-art i:nth-child(4) { width: 14%; aspect-ratio: 1; left: 6%; bottom: 8%; background: var(--chrome); clip-path: var(--star); }
.s-y2k .sp-art i:nth-child(5) { width: 13%; aspect-ratio: 1; right: 16%; bottom: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ffb3e2 35%, #ff5fb8 80%); }
.s-y2k .sp-card { padding: 24px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .78), var(--c)); box-shadow: inset 0 1px 0 #fff, inset 0 -8px 20px rgba(255, 255, 255, .35), 0 10px 24px rgba(60, 90, 180, .18); }
.s-y2k .sp-card:nth-child(1) { --c: rgba(120, 196, 255, .6); }
.s-y2k .sp-card:nth-child(2) { --c: rgba(255, 160, 218, .6); }
.s-y2k .sp-card:nth-child(3) { --c: rgba(160, 250, 205, .6); }
.s-y2k .sp-card h3 { font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.s-y2k .sp-card p { font-size: 13px; }
.s-y2k .sp-icon { border-radius: 50%; background: var(--chrome); color: #1d2a6b; box-shadow: 0 3px 8px rgba(29, 42, 107, .3), inset 0 1px 0 #fff; }
.s-y2k .sp-panel { border: 1px solid #fff; border-radius: 28px; background: linear-gradient(180deg, #f7f9fd, #d9e0ee 48%, #c9d2e5 52%, #eef2f9); box-shadow: 0 0 0 1px rgba(120, 140, 190, .5), 0 12px 30px rgba(60, 90, 180, .2), inset 0 1px 0 #fff; }
.s-y2k .sp-label { font-family: var(--display); font-size: 9px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.s-y2k .sp-input { border: 1px solid #9aa6c2; border-radius: 99px; background: #fff; box-shadow: inset 0 2px 4px rgba(29, 42, 107, .15); }
.s-y2k .sp-controls { font-size: 12px; }
.s-y2k .sp-switch { background: linear-gradient(#cfd8ea, #f3f6fc); box-shadow: inset 0 1px 3px rgba(29, 42, 107, .3); }
.s-y2k .sp-switch::after { background: radial-gradient(circle at 35% 30%, #fff, #c9d3e6); box-shadow: 0 1px 3px rgba(29, 42, 107, .4); }
.s-y2k .is-on .sp-switch { background: linear-gradient(#5fb2ff, #9fd3ff); }
.s-y2k .sp-bar { height: 12px; background: linear-gradient(#cfd8ea, #f3f6fc); box-shadow: inset 0 1px 3px rgba(29, 42, 107, .3); }
.s-y2k .sp-bar > span { background: var(--holo); }
.s-y2k .sp-chips span { border: 1px solid rgba(255, 255, 255, .9); background: var(--holo); font-family: var(--display); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------- SYNTHWAVE / OUTRUN ---------------- */
.s-synthwave {
  --bg: #0d0221; --fg: #f6e7ff; --muted: #c7a8e6; --accent: #ff3cac; --on-accent: #fff;
  --surface: rgba(38, 20, 71, .6); --line: #2de2e6; --r: 4px; --icon-sw: 2;
  --font: "Jost", "Avenir Next", sans-serif; --display: "Orbitron", sans-serif; --script: "Mr Dafoe", cursive;
  background: linear-gradient(180deg, #0d0221 0%, #1a0536 45%, #2a0845 72%, #0d0221 100%);
}
.s-synthwave .sp-bg i:nth-child(1) {
  display: block; inset: 0 0 45% 0; opacity: .85;
  background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 62%, #fff, transparent), radial-gradient(1px 1px at 86% 46%, #fff, transparent), radial-gradient(1px 1px at 9% 72%, #fff, transparent), radial-gradient(1.5px 1.5px at 56% 14%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1px 1px at 94% 12%, #fff, transparent);
}
.s-synthwave .sp-logo { font-family: var(--display); font-size: 18px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #2de2e6; text-shadow: 0 0 8px #2de2e6, 0 0 18px rgba(45, 226, 230, .6); }
.s-synthwave .sp-mark { border-color: #ff3cac; box-shadow: 0 0 8px #ff3cac, inset 0 0 6px #ff3cac; }
.s-synthwave .sp-links { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.s-synthwave .sp-kicker { margin-bottom: -8px; font-family: var(--script); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: 0; color: #ff3cac; text-shadow: 0 0 6px #ff3cac, 0 0 16px rgba(255, 60, 172, .8); transform: rotate(-6deg); }
.s-synthwave .sp-title { font-weight: 900; font-style: italic; font-size: clamp(32px, 6.2cqi, 70px); line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; }
.s-synthwave .sp-title span { color: transparent; background: linear-gradient(180deg, #fdfbff 0%, #b9d9ff 42%, #3b5bdb 50%, #ff9ee0 53%, #ffe0f5 80%, #fff 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px rgba(255, 60, 172, .55)); }
.s-synthwave .sp-lede { font-size: 16px; }
.s-synthwave .sp-btn { padding: 1.1em 1.8em; border-radius: 4px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.s-synthwave .sp-btn--primary { background: linear-gradient(90deg, #ff3cac, #ff6c11); color: #fff; box-shadow: 0 0 16px rgba(255, 60, 172, .6), 0 0 40px rgba(255, 108, 17, .25); }
.s-synthwave .sp-btn--secondary { background: transparent; color: #2de2e6; text-shadow: 0 0 6px #2de2e6; box-shadow: inset 0 0 0 2px #2de2e6, 0 0 12px rgba(45, 226, 230, .5), inset 0 0 12px rgba(45, 226, 230, .35); }
.s-synthwave .sp-btn:hover { filter: brightness(1.15); }
.s-synthwave .sp-nav .sp-btn { padding: .8em 1.2em; font-size: 9px; }
.s-synthwave .sp-art { overflow: hidden; }
.s-synthwave .sp-art i:nth-child(5) { z-index: -1; width: 70%; aspect-ratio: 1; left: 15%; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 172, .55), transparent 65%); }
.s-synthwave .sp-art i:nth-child(1) {
  width: 56%; aspect-ratio: 1; left: 22%; top: 6%; border-radius: 50%;
  background: linear-gradient(180deg, #f9c80e 0%, #ff6c11 45%, #ff3cac 85%);
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 82%, transparent 82% 88%, #000 88%);
  mask: linear-gradient(#000 0 52%, transparent 52% 55%, #000 55% 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 77%, #000 77% 82%, transparent 82% 88%, #000 88%);
}
.s-synthwave .sp-art i:nth-child(2) {
  left: 0; right: 0; bottom: 0; height: 42%;
  background:
    linear-gradient(#ff3cac, #ff3cac) 0 7% / 100% 1px no-repeat,
    linear-gradient(#ff3cac, #ff3cac) 0 18% / 100% 1.5px no-repeat,
    linear-gradient(#ff3cac, #ff3cac) 0 33% / 100% 2px no-repeat,
    linear-gradient(#ff3cac, #ff3cac) 0 53% / 100% 2px no-repeat,
    linear-gradient(#ff3cac, #ff3cac) 0 79% / 100% 2.5px no-repeat,
    repeating-conic-gradient(from 90deg at 50% 0%, rgba(255, 60, 172, .95) 0deg .5deg, transparent .5deg 10deg),
    linear-gradient(#2a0845, #12031f);
  box-shadow: 0 -2px 18px rgba(255, 60, 172, .65);
}
.s-synthwave .sp-art i:nth-child(3), .s-synthwave .sp-art i:nth-child(4) {
  left: 0; right: 0; height: 20%;
  clip-path: polygon(0 100%, 12% 40%, 22% 70%, 34% 18%, 46% 64%, 58% 28%, 70% 72%, 82% 34%, 92% 60%, 100% 44%, 100% 100%);
}
.s-synthwave .sp-art i:nth-child(3) { bottom: calc(42% + 2px); background: #ff3cac; }
.s-synthwave .sp-art i:nth-child(4) { bottom: 42%; background: #2a0845; }
.s-synthwave .sp-card { border: 1px solid rgba(45, 226, 230, .5); background: linear-gradient(180deg, rgba(45, 226, 230, .08), rgba(38, 20, 71, .6)); box-shadow: 0 0 18px rgba(45, 226, 230, .18), inset 0 0 18px rgba(45, 226, 230, .08); }
.s-synthwave .sp-card h3 { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2de2e6; text-shadow: 0 0 8px rgba(45, 226, 230, .7); }
.s-synthwave .sp-icon { border: 1.5px solid #ff3cac; border-radius: 4px; background: transparent; color: #ff3cac; box-shadow: 0 0 10px rgba(255, 60, 172, .5), inset 0 0 8px rgba(255, 60, 172, .3); }
.s-synthwave .sp-panel { border: 1px solid rgba(255, 60, 172, .55); background: rgba(38, 20, 71, .65); box-shadow: 0 0 22px rgba(255, 60, 172, .2); }
.s-synthwave .sp-label { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #ff9ee0; }
.s-synthwave .sp-input { border: 1px solid #2de2e6; border-radius: 4px; background: rgba(13, 2, 33, .8); color: #2de2e6; box-shadow: inset 0 0 10px rgba(45, 226, 230, .2); }
.s-synthwave .sp-input::placeholder { color: rgba(45, 226, 230, .6); }
.s-synthwave .sp-controls { color: var(--muted); }
.s-synthwave .sp-switch { background: #261447; box-shadow: inset 0 0 0 1px #2de2e6; }
.s-synthwave .sp-switch::after { background: #2de2e6; box-shadow: 0 0 8px #2de2e6; }
.s-synthwave .is-on .sp-switch { background: rgba(255, 60, 172, .35); box-shadow: inset 0 0 0 1px #ff3cac, 0 0 10px rgba(255, 60, 172, .6); }
.s-synthwave .is-on .sp-switch::after { background: #ff3cac; box-shadow: 0 0 10px #ff3cac; }
.s-synthwave .sp-bar { height: 6px; background: #261447; }
.s-synthwave .sp-bar > span { background: linear-gradient(90deg, #f9c80e, #ff6c11, #ff3cac); box-shadow: 0 0 12px rgba(255, 60, 172, .8); }
.s-synthwave .sp-chips span { border: 1px solid #2de2e6; border-radius: 3px; background: transparent; color: #2de2e6; font-family: var(--display); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 6px rgba(45, 226, 230, .8); }

/* ---------------- CYBERPUNK / SCI-FI HUD ---------------- */
.s-cyberpunk {
  --bg: #0a0a0f; --fg: #e8e8f0; --muted: #9a9ab0; --accent: #fcee0a; --on-accent: #0a0a0f;
  --surface: #12121a; --line: #fcee0a; --r: 0; --icon-sw: 2;
  --font: "Chakra Petch", sans-serif; --display: var(--font);
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0, 240, 255, .05) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(0, 240, 255, .05) 1px, transparent 1px) 0 0 / 40px 100%,
    #0a0a0f;
}
.s-cyberpunk .sp-nav { padding-bottom: 10px; border-bottom: 1px solid rgba(252, 238, 10, .4); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.s-cyberpunk .sp-nav::after { content: "SYS.ONLINE // NODE 2077"; position: absolute; right: 0; bottom: -20px; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .14em; color: #00f0ff; }
.s-cyberpunk .sp-logo { font-size: 18px; letter-spacing: .2em; text-transform: uppercase; color: #fcee0a; }
.s-cyberpunk .sp-mark { width: 18px; height: 18px; border: 0; border-radius: 0; background: #fcee0a; clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%); }
.s-cyberpunk .sp-links { gap: 0; color: var(--muted); }
.s-cyberpunk .sp-links a + a::before { content: "//"; margin: 0 10px; color: #ff003c; }
.s-cyberpunk .sp-kicker { padding: 5px 16px 5px 10px; background: #fcee0a; color: #0a0a0f; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 55%, calc(100% - 8px) 100%, 0 100%); }
.s-cyberpunk .sp-kicker::before { content: "\25B2\00A0\00A0"; }
.s-cyberpunk .sp-title { font-size: clamp(38px, 7.4cqi, 82px); line-height: .96; letter-spacing: .01em; text-transform: uppercase; color: #fcee0a; text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; }
@media (prefers-reduced-motion: no-preference) { .s-cyberpunk .t2 { animation: cp-glitch 4s steps(1) infinite; } }
@keyframes cp-glitch {
  0%, 91%, 100% { transform: none; text-shadow: -3px 0 #ff003c, 3px 0 #00f0ff; }
  92% { transform: translate(-4px, 1px) skewX(-10deg); text-shadow: 6px 0 #ff003c, -6px 0 #00f0ff; }
  94% { transform: translate(4px, -1px); text-shadow: -7px 0 #ff003c, 7px 0 #00f0ff; clip-path: inset(10% 0 40% 0); }
  96% { transform: translate(-2px, 0); clip-path: inset(55% 0 5% 0); }
  97% { clip-path: none; }
}
.s-cyberpunk .sp-lede { padding-left: 12px; border-left: 2px solid #00f0ff; font-size: 16px; }
.s-cyberpunk .sp-btn { padding: 1em 1.8em; border-radius: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; clip-path: var(--cut); }
.s-cyberpunk .sp-btn--primary { background: #fcee0a; color: #0a0a0f; }
.s-cyberpunk .sp-btn--primary:hover { background: #00f0ff; }
.s-cyberpunk .sp-btn--secondary { border: 1.5px solid transparent; background: linear-gradient(#0a0a0f, #0a0a0f) padding-box, #00f0ff border-box; color: #00f0ff; box-shadow: none; }
.s-cyberpunk .sp-nav .sp-btn { padding: .6em 1.2em; font-size: 11px; }
.s-cyberpunk .sp-art i:nth-child(1) { inset: 0; margin: auto; width: min(78%, 300px); aspect-ratio: 1; border: 1px solid rgba(0, 240, 255, .6); border-radius: 50%; box-shadow: 0 0 20px rgba(0, 240, 255, .2), inset 0 0 20px rgba(0, 240, 255, .15); }
.s-cyberpunk .sp-art i:nth-child(2) { inset: 0; margin: auto; width: min(60%, 232px); aspect-ratio: 1; border: 2px dashed #fcee0a; border-radius: 50%; opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .s-cyberpunk .sp-art i:nth-child(2) { animation: cp-spin 14s linear infinite; } }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.s-cyberpunk .sp-art i:nth-child(3) {
  inset: 0; margin: auto; width: min(92%, 350px); aspect-ratio: 1;
  background: linear-gradient(rgba(0, 240, 255, .7), rgba(0, 240, 255, .7)) center / 1px 100% no-repeat, linear-gradient(90deg, rgba(0, 240, 255, .7), rgba(0, 240, 255, .7)) center / 100% 1px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 18.5%); mask: radial-gradient(circle, transparent 18%, #000 18.5%);
}
.s-cyberpunk .sp-art i:nth-child(4) { inset: 0; margin: auto; width: 15%; aspect-ratio: 1; border: 2px solid #ff003c; box-shadow: 0 0 12px rgba(255, 0, 60, .6); }
.s-cyberpunk .sp-art i:nth-child(5) { right: 2%; top: 4%; }
.s-cyberpunk .sp-art i:nth-child(5)::after { content: "TGT_02 // LOCK"; padding: 3px 8px; background: #fcee0a; color: #0a0a0f; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .12em; white-space: nowrap; }
.s-cyberpunk .sp-card { padding: 22px; border-left: 3px solid #fcee0a; background: linear-gradient(135deg, #15151f, #0e0e15); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.s-cyberpunk .sp-card::before { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .14em; color: #00f0ff; }
.s-cyberpunk .sp-card:nth-child(1)::before { content: "01 // MODULE"; }
.s-cyberpunk .sp-card:nth-child(2)::before { content: "02 // MODULE"; }
.s-cyberpunk .sp-card:nth-child(3)::before { content: "03 // MODULE"; }
.s-cyberpunk .sp-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: #fcee0a; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.s-cyberpunk .sp-card h3 { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.s-cyberpunk .sp-icon { border: 1px solid rgba(0, 240, 255, .6); border-radius: 0; background: transparent; color: #00f0ff; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.s-cyberpunk .sp-panel { overflow: hidden; padding-top: 36px; border: 1px solid rgba(252, 238, 10, .35); background: #101018; }
.s-cyberpunk .sp-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(-45deg, #fcee0a 0 10px, #0a0a0f 10px 20px); }
.s-cyberpunk .sp-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fcee0a; }
.s-cyberpunk .sp-input { border: 0; border-bottom: 2px solid #00f0ff; border-radius: 0; background: #0a0a0f; color: #00f0ff; font: 14px "IBM Plex Mono", monospace; }
.s-cyberpunk .sp-input::placeholder { color: rgba(0, 240, 255, .55); }
.s-cyberpunk .sp-controls { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.s-cyberpunk .sp-switch { border-radius: 0; background: #1f1f2a; box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .5); }
.s-cyberpunk .sp-switch::after { border-radius: 0; background: #00f0ff; box-shadow: none; }
.s-cyberpunk .is-on .sp-switch { background: rgba(252, 238, 10, .2); box-shadow: inset 0 0 0 1px #fcee0a; }
.s-cyberpunk .is-on .sp-switch::after { background: #fcee0a; }
.s-cyberpunk .sp-bar { height: 10px; border-radius: 0; background: #1f1f2a; }
.s-cyberpunk .sp-bar > span { border-radius: 0; background: repeating-linear-gradient(90deg, #fcee0a 0 6px, transparent 6px 9px); }
.s-cyberpunk .sp-chips span { border: 1px solid rgba(0, 240, 255, .6); border-radius: 0; background: transparent; color: #00f0ff; font: 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.s-cyberpunk .sp-chips span::before { content: "["; }
.s-cyberpunk .sp-chips span::after { content: "]"; }

/* ---------------- PIXEL / 8-BIT ---------------- */
.s-pixel {
  --bg: #1d2b53; --fg: #fff1e8; --muted: #c2c3c7; --accent: #ff004d; --on-accent: #fff1e8;
  --surface: #7e2553; --line: #000; --r: 0; --icon-sw: 2;
  --font: "Pixelify Sans", monospace; --display: "Press Start 2P", monospace;
  --pb: 0 -4px 0 0 #000, 0 4px 0 0 #000, -4px 0 0 0 #000, 4px 0 0 0 #000;
  --pb-w: 0 -4px 0 0 #fff1e8, 0 4px 0 0 #fff1e8, -4px 0 0 0 #fff1e8, 4px 0 0 0 #fff1e8;
  font-size: 16px; -webkit-font-smoothing: none;
  background: radial-gradient(#fff1e8 1px, transparent 1.5px) 0 0 / 48px 48px, radial-gradient(#83769c 1px, transparent 1.5px) 24px 24px / 48px 48px, #1d2b53;
}
.s-pixel .sp-nav { margin: 4px; padding: 10px 14px; background: #000; box-shadow: var(--pb-w); }
.s-pixel .sp-logo { font-family: var(--display); font-size: 13px; font-weight: 400; color: #ffec27; }
.s-pixel .sp-mark { width: 12px; height: 12px; margin: 2px; border: 0; border-radius: 0; background: #ffec27; box-shadow: 0 -2px 0 0 #ffa300, 0 2px 0 0 #ffa300, -2px 0 0 0 #ffa300, 2px 0 0 0 #ffa300; }
.s-pixel .sp-links { font-family: var(--display); font-size: 9px; }
.s-pixel .sp-links a:first-child { color: #ffec27; }
.s-pixel .sp-kicker { font-family: var(--display); font-size: 9px; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #00e436; }
.s-pixel .sp-title { font-weight: 400; font-size: clamp(20px, 4cqi, 44px); line-height: 1.4; letter-spacing: 0; text-shadow: 4px 4px 0 #7e2553; }
.s-pixel .t2 { color: #ffec27; text-shadow: 4px 4px 0 #ab5236; }
.s-pixel .sp-lede { color: var(--muted); font-size: 18px; line-height: 1.4; }
.s-pixel .sp-actions { gap: 16px; }
.s-pixel .sp-btn { margin: 4px; padding: 14px 18px; border-radius: 0; font-family: var(--display); font-size: 10px; font-weight: 400; transition: none; }
.s-pixel .sp-btn--primary { background: #ff004d; color: #fff1e8; box-shadow: var(--pb), inset -4px -4px 0 0 #7e2553; }
.s-pixel .sp-btn--primary:hover { background: #ff77a8; }
.s-pixel .sp-btn--primary:active { box-shadow: var(--pb), inset 4px 4px 0 0 #7e2553; }
.s-pixel .sp-btn--secondary { background: #fff1e8; color: #1d2b53; box-shadow: var(--pb), inset -4px -4px 0 0 #c2c3c7; }
.s-pixel .sp-nav .sp-btn { margin: 0 4px; padding: 9px 11px; font-size: 8px; }
.s-pixel .sp-art { overflow: hidden; }
.s-pixel .sp-art i:nth-child(1) { width: 64px; height: 64px; right: 12%; top: 8%; background: #ffec27; clip-path: polygon(25% 0, 75% 0, 75% 12.5%, 87.5% 12.5%, 87.5% 25%, 100% 25%, 100% 75%, 87.5% 75%, 87.5% 87.5%, 75% 87.5%, 75% 100%, 25% 100%, 25% 87.5%, 12.5% 87.5%, 12.5% 75%, 0 75%, 0 25%, 12.5% 25%, 12.5% 12.5%, 25% 12.5%); }
.s-pixel .sp-art i:nth-child(2) { left: 0; right: 0; bottom: 12%; height: 40%; background: linear-gradient(#00e436 0 8%, #008751 8%); clip-path: polygon(0 40%, 10% 40%, 10% 24%, 20% 24%, 20% 8%, 36% 8%, 36% 24%, 46% 24%, 46% 44%, 60% 44%, 60% 28%, 70% 28%, 70% 14%, 86% 14%, 86% 34%, 100% 34%, 100% 100%, 0 100%); }
.s-pixel .sp-art i:nth-child(3) { left: 0; right: 0; bottom: 0; height: 13%; background: repeating-linear-gradient(90deg, #ab5236 0 30px, #5f574f 30px 32px); box-shadow: inset 0 4px 0 #ffccaa; }
.s-pixel .sp-art i:nth-child(4) { width: 96px; height: 32px; left: 8%; top: 14%; background: #fff1e8; clip-path: polygon(16.6% 25%, 33% 25%, 33% 0, 66% 0, 66% 25%, 83% 25%, 83% 50%, 100% 50%, 100% 100%, 0 100%, 0 50%, 16.6% 50%); }
.s-pixel .sp-art i:nth-child(5) {
  width: 6px; height: 6px; left: 40%; top: 30%;
  box-shadow:
    6px 0 #ff004d, 12px 0 #ff004d, 24px 0 #ff004d, 30px 0 #ff004d,
    0 6px #ff004d, 6px 6px #ff77a8, 12px 6px #ff004d, 18px 6px #ff004d, 24px 6px #ff004d, 30px 6px #ff004d, 36px 6px #ff004d,
    0 12px #ff004d, 6px 12px #ff004d, 12px 12px #ff004d, 18px 12px #ff004d, 24px 12px #ff004d, 30px 12px #ff004d, 36px 12px #ff004d,
    6px 18px #ff004d, 12px 18px #ff004d, 18px 18px #ff004d, 24px 18px #ff004d, 30px 18px #ff004d,
    12px 24px #ff004d, 18px 24px #ff004d, 24px 24px #ff004d,
    18px 30px #ff004d;
}
@media (prefers-reduced-motion: no-preference) { .s-pixel .sp-art i:nth-child(5) { animation: px-bob 1s steps(2) infinite; } }
@keyframes px-bob { 50% { transform: translateY(-6px); } }
.s-pixel .sp-cards { gap: 20px; padding: 4px; }
.s-pixel .sp-card { margin: 4px; padding: 20px; border-radius: 0; background: var(--c); box-shadow: var(--pb), inset -4px -4px 0 0 rgba(0, 0, 0, .25), inset 4px 4px 0 0 rgba(255, 255, 255, .18); }
.s-pixel .sp-card:nth-child(1) { --c: #7e2553; }
.s-pixel .sp-card:nth-child(2) { --c: #008751; }
.s-pixel .sp-card:nth-child(3) { --c: #ab5236; }
.s-pixel .sp-card h3 { font-family: var(--display); font-size: 12px; font-weight: 400; line-height: 1.5; color: #ffec27; }
.s-pixel .sp-card p { color: #fff1e8; font-size: 16px; line-height: 1.35; }
.s-pixel .sp-icon { margin: 3px 3px 8px; border-radius: 0; background: #000; color: #fff1e8; box-shadow: 0 -3px 0 0 #fff1e8, 0 3px 0 0 #fff1e8, -3px 0 0 0 #fff1e8, 3px 0 0 0 #fff1e8; }
.s-pixel .sp-icon svg { shape-rendering: crispEdges; }
.s-pixel .sp-panel { margin: 4px; padding: 22px; border-radius: 0; background: #000; box-shadow: var(--pb-w); }
.s-pixel .sp-label { font-family: var(--display); font-size: 10px; font-weight: 400; line-height: 1.6; color: #ffec27; }
.s-pixel .sp-input { margin: 4px; border: 0; border-radius: 0; background: #fff1e8; color: #1d2b53; font-size: 16px; box-shadow: var(--pb-w); }
.s-pixel .sp-controls { font-size: 16px; }
.s-pixel .sp-switch { margin: 3px; width: 44px; height: 20px; border-radius: 0; background: #5f574f; box-shadow: 0 -3px 0 0 #fff1e8, 0 3px 0 0 #fff1e8, -3px 0 0 0 #fff1e8, 3px 0 0 0 #fff1e8; }
.s-pixel .sp-switch::after { top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 0; background: #fff1e8; box-shadow: none; transition: none; }
.s-pixel .is-on .sp-switch { background: #00e436; }
.s-pixel .is-on .sp-switch::after { transform: translateX(24px); }
.s-pixel .sp-bar { margin: 3px; width: 124px; height: 16px; border-radius: 0; overflow: visible; background: #5f574f; box-shadow: 0 -3px 0 0 #fff1e8, 0 3px 0 0 #fff1e8, -3px 0 0 0 #fff1e8, 3px 0 0 0 #fff1e8; }
.s-pixel .sp-bar > span { border-radius: 0; background: repeating-linear-gradient(90deg, #ff004d 0 12px, transparent 12px 16px); }
.s-pixel .sp-chips { gap: 12px; }
.s-pixel .sp-chips span { margin: 3px; border: 0; border-radius: 0; background: #29adff; color: #1d2b53; font-size: 14px; box-shadow: 0 -3px 0 0 #000, 0 3px 0 0 #000, -3px 0 0 0 #000, 3px 0 0 0 #000; }

/* ---------------- TERMINAL / CLI ---------------- */
.s-terminal {
  --bg: #0b0f0c; --fg: #33ff66; --muted: #1fae4a; --accent: #33ff66; --on-accent: #0b0f0c;
  --surface: transparent; --line: #1a7f37; --r: 0; --icon-sw: 2;
  --font: "VT323", "IBM Plex Mono", monospace; --display: var(--font);
  font-size: 20px; line-height: 1.25; text-shadow: 0 0 6px rgba(51, 255, 102, .45);
  background: radial-gradient(ellipse at center, #0f1a12 0%, #060907 100%);
}
.s-terminal::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45) 100%); }
.s-terminal .sp-nav { padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: 20px; }
.s-terminal .sp-logo { gap: 0; font-size: 20px; font-weight: 400; }
.s-terminal .sp-logo::after { content: "@v2:~$"; color: var(--muted); }
.s-terminal .sp-mark { display: none; }
.s-terminal .sp-word { text-transform: lowercase; }
.s-terminal .sp-links { font-size: 20px; }
.s-terminal .sp-links a { text-transform: lowercase; }
.s-terminal .sp-links a::before { content: "["; }
.s-terminal .sp-links a::after { content: "]"; }
.s-terminal .sp-links a:hover { background: #33ff66; color: #0b0f0c; text-shadow: none; }
.s-terminal .sp-kicker { font-size: 20px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.s-terminal .sp-kicker::before { content: "# "; }
.s-terminal .sp-title { font-weight: 400; font-size: clamp(40px, 7.2cqi, 84px); line-height: .95; letter-spacing: 0; text-transform: uppercase; }
.s-terminal .t1::before { content: "> "; color: var(--muted); }
.s-terminal .t2::after { content: "\2588"; margin-left: .08em; }
@media (prefers-reduced-motion: no-preference) { .s-terminal .t2::after { animation: term-blink 1s steps(1) infinite; } }
@keyframes term-blink { 50% { opacity: 0; } }
.s-terminal .sp-lede { max-width: 52ch; color: #b6ffc8; font-size: 20px; line-height: 1.3; }
.s-terminal .sp-lede::before { content: "// "; color: var(--muted); }
.s-terminal .sp-btn { padding: .1em .5em; border-radius: 0; background: transparent; color: #33ff66; font-size: 20px; font-weight: 400; text-transform: lowercase; transition: none; }
.s-terminal .sp-btn::before { content: "[ "; }
.s-terminal .sp-btn::after { content: " ]"; }
.s-terminal .sp-btn--primary { background: #33ff66; color: #0b0f0c; text-shadow: none; box-shadow: 0 0 12px rgba(51, 255, 102, .45); }
.s-terminal .sp-btn--secondary { box-shadow: none; }
.s-terminal .sp-btn:hover { background: #b6ffc8; color: #0b0f0c; text-shadow: none; }
.s-terminal .sp-art { display: grid; place-items: center; min-height: 200px; aspect-ratio: auto; height: auto; width: 100%; }
.s-terminal .sp-art::before {
  content: "        .   *        .\A    *       _____      .\A         .-'     '-.\A   .    /   .  o    \\   *\A  ---==|=============|==---\A        \\   ORBIT   /\A      *  '-._____.-'    .\A    .         *";
  white-space: pre; font-size: clamp(14px, 1.9cqi, 21px); line-height: 1.05; color: #33ff66;
}
.s-terminal .sp-cards { gap: 16px; }
.s-terminal .sp-card { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 0; background: transparent; }
.s-terminal .sp-card::before { content: "-rw-r--r--  orbit  2.0"; font-size: 16px; color: var(--muted); }
.s-terminal .sp-icon { display: none; }
.s-terminal .sp-card h3 { font-size: 24px; font-weight: 400; text-transform: uppercase; }
.s-terminal .sp-card h3::before { content: "## "; color: var(--muted); }
.s-terminal .sp-card p { color: #b6ffc8; font-size: 19px; line-height: 1.25; }
.s-terminal .sp-panel { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 0; background: transparent; }
.s-terminal .sp-label { font-size: 0; }
.s-terminal .sp-label::before { content: "$ subscribe --weekly"; font-size: 20px; font-weight: 400; }
.s-terminal .sp-input { padding: .1em 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: #33ff66; font-size: 20px; text-shadow: inherit; }
.s-terminal .sp-input::placeholder { color: var(--muted); }
.s-terminal .sp-controls { gap: 8px 24px; font-size: 20px; }
.s-terminal .sp-switch { width: auto; height: auto; border-radius: 0; background: transparent; }
.s-terminal .sp-switch::before { content: "[ ]"; }
.s-terminal .sp-switch::after { display: none; }
.s-terminal .is-on .sp-switch { background: transparent; }
.s-terminal .is-on .sp-switch::before { content: "[x]"; }
.s-terminal .sp-bar { width: auto; height: auto; overflow: visible; border-radius: 0; background: transparent; }
.s-terminal .sp-bar::before { content: "[######----]"; }
.s-terminal .sp-bar > span { display: none; }
.s-terminal .sp-chips span { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 20px; text-transform: lowercase; }
.s-terminal .sp-chips span::before { content: "--"; }

/* ---------------- HAND-DRAWN / SKETCH ---------------- */
.s-handdrawn {
  --bg: #fdfbf4; --fg: #2b2b2b; --muted: #505050; --accent: #ffe066; --on-accent: #2b2b2b;
  --surface: #fff; --line: #2b2b2b; --r: 0; --icon-sw: 2.2;
  --font: "Patrick Hand", "Comic Sans MS", cursive; --display: "Caveat", "Patrick Hand", cursive;
  --wob: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob2: 15px 255px 15px 225px / 225px 15px 255px 15px;
  font-size: 17px;
  background: linear-gradient(rgba(116, 192, 252, .22) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(116, 192, 252, .22) 1px, transparent 1px) 0 0 / 26px 100%, #fdfbf4;
}
.s-handdrawn .sp-logo { font-size: 30px; }
.s-handdrawn .sp-mark { width: 24px; height: 22px; border: 2.5px solid #2b2b2b; border-radius: var(--wob); background: #ffe066; transform: rotate(-8deg); }
.s-handdrawn .sp-links { font-size: 18px; }
.s-handdrawn .sp-links a:first-child { text-decoration: underline wavy #ff8fab; text-underline-offset: 5px; }
.s-handdrawn .sp-kicker { padding: 0 6px; font-size: 18px; font-weight: 400; letter-spacing: 0; background: linear-gradient(104deg, transparent 2%, #ffe066 3% 97%, transparent 98%) 0 70% / 100% 60% no-repeat; }
.s-handdrawn .sp-title { font-size: clamp(46px, 8.6cqi, 98px); line-height: .92; letter-spacing: 0; }
.s-handdrawn .t2 { position: relative; display: table; }
.s-handdrawn .t2::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: -.1em; height: .26em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 40 3, 80 19, 120 9 S 185 5, 197 11' stroke='%23ff8fab' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.s-handdrawn .sp-lede { color: #444; font-size: 19px; line-height: 1.45; }
.s-handdrawn .sp-btn { padding: .45em 1.2em; border: 2.5px solid #2b2b2b; border-radius: var(--wob); font-size: 19px; font-weight: 400; }
.s-handdrawn .sp-btn--primary { background: #ffe066; color: #2b2b2b; box-shadow: 3px 4px 0 -1px #2b2b2b; transform: rotate(-1.5deg); }
.s-handdrawn .sp-btn--primary:hover { transform: rotate(1deg) scale(1.03); }
.s-handdrawn .sp-btn--secondary { background: #fff; border-radius: var(--wob2); box-shadow: none; transform: rotate(1deg); }
.s-handdrawn .sp-nav .sp-btn { padding: .3em .9em; font-size: 16px; }
.s-handdrawn .sp-art i:nth-child(1) { width: 46%; aspect-ratio: 1; left: 26%; top: 14%; background: #ffd6e0; transform: rotate(4deg); box-shadow: 2px 6px 10px rgba(0, 0, 0, .12); }
.s-handdrawn .sp-art i:nth-child(1)::before { content: ""; position: absolute; left: 32%; top: -10px; width: 36%; height: 22px; background: rgba(255, 255, 255, .72); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.s-handdrawn .sp-art i:nth-child(1)::after { content: "no more lost ideas!"; position: absolute; inset: 12%; display: grid; place-items: center; text-align: center; font: 700 clamp(18px, 2.6cqi, 30px)/1.05 "Caveat", cursive; color: #2b2b2b; }
.s-handdrawn .sp-art i:nth-child(2) { left: 12%; top: 4%; width: 74%; height: 72%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M100 10 C 40 8, 8 40, 14 66 C 22 104, 150 118, 186 74 C 206 44, 160 8, 90 14 C 70 16, 52 22, 44 30' stroke='%2374c0fc' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.s-handdrawn .sp-art i:nth-child(3) { width: 18%; aspect-ratio: 1; right: 3%; top: 0; transform: rotate(12deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L61 38 L95 38 L67 58 L78 92 L50 71 L22 92 L33 58 L5 38 L39 38 Z' fill='%23ffe066' stroke='%232b2b2b' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.s-handdrawn .sp-art i:nth-child(4) { width: 32%; aspect-ratio: 1.5; left: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M112 10 C 80 4, 40 20, 20 62' stroke='%232b2b2b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 46 L19 64 L36 55' stroke='%232b2b2b' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.s-handdrawn .sp-card { padding: 22px; border: 2.5px solid #2b2b2b; border-radius: var(--wob); background: #fff; }
.s-handdrawn .sp-card:nth-child(1) { transform: rotate(-1deg); }
.s-handdrawn .sp-card:nth-child(2) { border-radius: var(--wob2); transform: rotate(.8deg); }
.s-handdrawn .sp-card:nth-child(3) { transform: rotate(-.5deg); }
.s-handdrawn .sp-card h3 { font-size: 30px; line-height: 1; }
.s-handdrawn .sp-card p { color: #444; font-size: 17px; }
.s-handdrawn .sp-icon { border: 2px solid #2b2b2b; border-radius: var(--wob2); background: #d0ebff; color: #2b2b2b; }
.s-handdrawn .sp-card:nth-child(2) .sp-icon { background: #ffe066; }
.s-handdrawn .sp-card:nth-child(3) .sp-icon { background: #ffd6e0; }
.s-handdrawn .sp-panel { border: 2.5px dashed #2b2b2b; border-radius: var(--wob2); background: transparent; }
.s-handdrawn .sp-label { font-family: var(--display); font-size: 26px; font-weight: 700; }
.s-handdrawn .sp-input { border: 0; border-bottom: 2.5px solid #2b2b2b; border-radius: 0 0 40px 6px / 0 0 6px 30px; background: transparent; font-size: 18px; }
.s-handdrawn .sp-panel .sp-btn--primary { transform: rotate(1deg); }
.s-handdrawn .sp-controls { font-size: 17px; }
.s-handdrawn .sp-switch { width: 46px; height: 26px; border: 2.5px solid #2b2b2b; border-radius: var(--wob); background: #fff; }
.s-handdrawn .sp-switch::after { top: 2px; left: 2px; width: 16px; height: 16px; border: 2px solid #2b2b2b; border-radius: var(--wob2); background: #fff; box-shadow: none; }
.s-handdrawn .is-on .sp-switch { background: #b2f2bb; }
.s-handdrawn .is-on .sp-switch::after { transform: translateX(18px); }
.s-handdrawn .sp-bar { height: 14px; border: 2.5px solid #2b2b2b; border-radius: var(--wob); background: #fff; }
.s-handdrawn .sp-bar > span { border-radius: 0; background: repeating-linear-gradient(-55deg, #ff8fab 0 3px, transparent 3px 7px); }
.s-handdrawn .sp-chips span { border: 2px solid #2b2b2b; border-radius: var(--wob); background: transparent; font-size: 16px; }
.s-handdrawn .sp-chips span:nth-child(2) { border-radius: var(--wob2); background: #fff3bf; }

/* ---------------- ORGANIC / EARTHY ---------------- */
.s-organic {
  --bg: #f3ede2; --fg: #2f3a2f; --muted: #5f6b58; --accent: #c4704f; --on-accent: #fff;
  --surface: #e9e0cf; --line: #cfc3ad; --r: 999px; --icon-sw: 1.7;
  --font: "Nunito", sans-serif; --display: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
}
.s-organic .sp-bg i:nth-child(1) { display: block; width: 40%; aspect-ratio: 1; right: -10%; top: -14%; border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; background: #e2c9a6; opacity: .5; }
.s-organic .sp-bg i:nth-child(5) { display: block; inset: 0; background: var(--noise); opacity: .12; }
.s-organic .sp-logo { font-size: 22px; font-style: italic; font-weight: 500; }
.s-organic .sp-mark { width: 20px; height: 24px; border: 0; border-radius: 0 100% 0 100%; background: #8a9a7b; transform: rotate(-20deg); }
.s-organic .sp-links { color: var(--muted); }
.s-organic .sp-kicker { padding: 6px 14px; border-radius: 99px; background: #e2e8d8; color: #4f5f45; letter-spacing: .02em; }
.s-organic .sp-title { font-weight: 400; font-size: clamp(38px, 7cqi, 80px); line-height: 1.02; letter-spacing: -.02em; }
.s-organic .t2 { font-style: italic; font-weight: 300; color: #c4704f; }
.s-organic .sp-lede { font-size: 17px; line-height: 1.65; }
.s-organic .sp-btn { padding: .9em 1.6em; border-radius: 99px; font-weight: 700; }
.s-organic .sp-btn--primary { background: #c4704f; color: #fff; }
.s-organic .sp-btn--primary:hover { background: #a95b3d; }
.s-organic .sp-btn--secondary { background: transparent; color: #2f3a2f; box-shadow: inset 0 0 0 1.5px #8a9a7b; }
.s-organic .sp-art i:nth-child(1) { width: 64%; aspect-ratio: 1; left: 12%; top: 8%; border-radius: 58% 42% 53% 47% / 45% 55% 45% 55%; background: #8a9a7b; }
.s-organic .sp-art i:nth-child(2) { width: 32%; aspect-ratio: 3 / 4; right: 6%; bottom: 4%; border-radius: 999px 999px 16px 16px; background: #e2c9a6; }
.s-organic .sp-art i:nth-child(3) { width: 21%; aspect-ratio: 1; right: 12%; top: 14%; border-radius: 50%; background: #c4704f; }
.s-organic .sp-art i:nth-child(4), .s-organic .sp-art i:nth-child(5) { aspect-ratio: 1; border-radius: 0 100% 0 100%; }
.s-organic .sp-art i:nth-child(4) { width: 14%; left: 8%; bottom: 10%; background: #5f7a55; transform: rotate(25deg); }
.s-organic .sp-art i:nth-child(5) { width: 10%; left: 21%; bottom: 5%; background: #a3b18a; transform: rotate(70deg); }
.s-organic .sp-card { align-items: center; padding: 40px 24px 26px; text-align: center; border-radius: 160px 160px 24px 24px; background: #e9e0cf; }
.s-organic .sp-card:nth-child(2) { background: #dfe5d3; }
.s-organic .sp-card:nth-child(3) { background: #efd9c9; }
.s-organic .sp-card h3 { font-size: 22px; font-weight: 500; }
.s-organic .sp-icon { width: 48px; height: 48px; border-radius: 50%; background: #f3ede2; color: #5f7a55; }
.s-organic .sp-panel { --muted: #dfe5d3; --line: #8a9a7b; border-radius: 32px; background: #5f7a55; color: #f3ede2; }
.s-organic .sp-label { font-family: var(--display); font-size: 20px; font-style: italic; font-weight: 400; }
.s-organic .sp-input { border: 0; border-radius: 99px; background: #f3ede2; color: #2f3a2f; }
.s-organic .sp-switch { background: #8a9a7b; }
.s-organic .sp-switch::after { background: #f3ede2; }
.s-organic .is-on .sp-switch { background: #e2c9a6; }
.s-organic .sp-bar { background: #8a9a7b; }
.s-organic .sp-bar > span { background: #e2c9a6; }
.s-organic .sp-chips span { border: 0; background: rgba(243, 237, 226, .18); color: #f3ede2; }