/* ============================================================
   Themes E — Art Nouveau · Constructivism · Mid-century modern ·
   Pop art · Psychedelic 60s
   ============================================================ */

/* ---------------- ART NOUVEAU ---------------- */
.s-nouveau {
  --bg: #efe4cc; --fg: #4a2e2a; --muted: #6e5a4c; --accent: #6b7042; --on-accent: #f6efdd;
  --surface: #f6eddb; --line: #b8913e; --r: 0; --icon-sw: 1.6;
  --font: "Cormorant Garamond", Georgia, serif; --display: "Macondo", "Cormorant Garamond", serif;
  --whip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30'%3E%3Cpath d='M0 15 C 30 0, 50 30, 80 15 S 130 0, 160 15 S 210 30, 240 15' fill='none' stroke='%23b8913e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  font-size: 17px;
  background: radial-gradient(ellipse at 50% 0%, #f8f0de 0, transparent 60%), #efe4cc;
}
.s-nouveau .sp-nav { padding-bottom: 22px; background: var(--whip) bottom center / 240px 24px repeat-x; }
.s-nouveau .sp-logo { font-size: 25px; font-weight: 400; }
.s-nouveau .sp-mark { width: 24px; height: 24px; border: 0; background: radial-gradient(circle, #c89b3c 0 20%, transparent 21%), conic-gradient(#c98a7a 0 12.5%, transparent 0 25%, #c98a7a 0 37.5%, transparent 0 50%, #c98a7a 0 62.5%, transparent 0 75%, #c98a7a 0 87.5%, transparent 0); }
.s-nouveau .sp-links { font-size: 17px; font-style: italic; }
.s-nouveau .sp-kicker { font-size: 18px; font-style: italic; font-weight: 500; letter-spacing: .02em; color: #6b7042; }
.s-nouveau .sp-kicker::before { content: "\2766\00A0\00A0"; color: #b8913e; font-style: normal; }
.s-nouveau .sp-title { font-weight: 400; font-size: clamp(38px, 6.6cqi, 76px); line-height: 1.04; letter-spacing: 0; }
.s-nouveau .t2 { color: #6b7042; }
.s-nouveau .sp-lede { font-size: 19px; line-height: 1.5; }
.s-nouveau .sp-btn { border-radius: 22px 4px 22px 4px; font-size: 17px; font-weight: 600; padding: .7em 1.5em; }
.s-nouveau .sp-btn--primary { background: #6b7042; color: #f6efdd; box-shadow: 0 0 0 3px #efe4cc, 0 0 0 4px #b8913e; }
.s-nouveau .sp-btn--secondary { background: transparent; color: #4a2e2a; font-style: italic; box-shadow: inset 0 0 0 1px #b8913e; }
.s-nouveau .sp-btn:hover { filter: brightness(1.06); }
.s-nouveau .sp-art i:nth-child(1) {
  width: 78%; aspect-ratio: 1; left: 11%; top: 6%; border-radius: 50%;
  background: radial-gradient(circle, #f9f0da 0 49%, #b8913e 49.5% 51%, transparent 51.5%), repeating-conic-gradient(#c98a7a 0 5deg, #b8913e 5deg 7deg, #e2c58d 7deg 12deg);
  box-shadow: 0 0 0 4px #efe4cc, 0 0 0 7px #6b7042, inset 0 0 0 3px #b8913e;
}
.s-nouveau .sp-art i:nth-child(2) { left: calc(50% - 2px); width: 4px; top: 36%; bottom: 10%; border-radius: 2px; background: #6b7042; }
.s-nouveau .sp-art i:nth-child(3) { width: 30px; height: 30px; left: calc(50% - 15px); top: 26%; border-radius: 50%; background: #d9a08f; box-shadow: 0 -26px 0 #c98a7a, 25px -8px 0 #c98a7a, 15px 21px 0 #c98a7a, -15px 21px 0 #c98a7a, -25px -8px 0 #c98a7a; }
.s-nouveau .sp-art i:nth-child(4) { width: 16px; height: 16px; left: calc(50% - 8px); top: calc(26% + 7px); border-radius: 50%; background: #c89b3c; }
.s-nouveau .sp-art i:nth-child(5) { width: 44px; height: 22px; left: calc(50% + 2px); top: 60%; border-radius: 0 100% 0 100%; background: #6b7042; transform: rotate(-18deg); transform-origin: 0 50%; }
.s-nouveau .sp-art i:nth-child(5)::after { content: ""; position: absolute; width: 44px; height: 22px; right: 48px; top: 14px; border-radius: 100% 0 100% 0; background: #6b7042; transform: rotate(36deg); }
.s-nouveau .sp-card { align-items: center; padding: 30px 22px 24px; text-align: center; border: 1px solid #b8913e; border-radius: 80px 80px 6px 6px; background: #f6eddb; box-shadow: inset 0 0 0 5px #f6eddb, inset 0 0 0 6px rgba(184, 145, 62, .55); }
.s-nouveau .sp-card::before { content: "\2767"; margin-top: -8px; font-size: 22px; line-height: 1; color: #b8913e; }
.s-nouveau .sp-card h3 { font-size: 23px; font-weight: 400; }
.s-nouveau .sp-card p { font-size: 17px; }
.s-nouveau .sp-icon { border: 1px solid #b8913e; border-radius: 50%; background: transparent; color: #6b7042; }
.s-nouveau .sp-panel { padding-top: 34px; border-bottom: 1px solid #b8913e; background: var(--whip) top center / 240px 24px repeat-x, #e9dcbe; }
.s-nouveau .sp-label { font-size: 19px; font-style: italic; font-weight: 600; }
.s-nouveau .sp-input { padding: .5em 0; border: 0; border-bottom: 1px solid #b8913e; border-radius: 0; background: transparent; font-style: italic; font-size: 17px; }
.s-nouveau .sp-controls { font-size: 16px; font-style: italic; }
.s-nouveau .sp-switch { background: #d8c79f; }
.s-nouveau .is-on .sp-switch { background: #6b7042; }
.s-nouveau .sp-switch::after { background: #f6efdd; }
.s-nouveau .sp-bar { height: 6px; background: #d8c79f; }
.s-nouveau .sp-bar > span { background: linear-gradient(90deg, #6b7042, #c89b3c); }
.s-nouveau .sp-chips span { border: 1px solid #b8913e; border-radius: 12px 2px 12px 2px; background: transparent; font-size: 15px; font-style: italic; }

/* ---------------- CONSTRUCTIVISM ---------------- */
.s-constructivism {
  --bg: #eadfc8; --fg: #111; --muted: #2b2b2b; --accent: #c8201e; --on-accent: #f4ecdc;
  --surface: #f4ecdc; --line: #111; --r: 0; --icon-sw: 2.6;
  --font: "Oswald", "Arial Narrow", sans-serif; --display: var(--font);
  font-size: 16px;
  background: linear-gradient(115deg, transparent 64%, rgba(200, 32, 30, .12) 64% 71%, transparent 71%), #eadfc8;
}
.s-constructivism .sp-nav { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0; padding: 12px var(--pad); background: #111; color: #eadfc8; letter-spacing: .06em; text-transform: uppercase; }
.s-constructivism .sp-logo { font-size: 22px; letter-spacing: .08em; }
.s-constructivism .sp-mark { width: 22px; height: 22px; border: 0; border-radius: 0; background: #c8201e; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.s-constructivism .sp-links { font-weight: 500; }
.s-constructivism .sp-kicker { padding: 4px 10px; background: #111; color: #eadfc8; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.s-constructivism .sp-title { font-size: clamp(44px, 9cqi, 104px); line-height: .92; letter-spacing: -.005em; text-transform: uppercase; }
.s-constructivism .t2 { display: table; margin-top: .08em; padding: 0 .12em; background: #c8201e; color: #f4ecdc; transform: rotate(-3deg); transform-origin: left center; }
.s-constructivism .sp-lede { max-width: 40ch; padding-left: 12px; border-left: 8px solid #c8201e; color: #2b2b2b; font-size: 17px; }
.s-constructivism .sp-btn { border-radius: 0; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .7em 1.8em .7em 1.3em; }
.s-constructivism .sp-btn--primary { background: #c8201e; color: #f4ecdc; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.s-constructivism .sp-btn--primary:hover { background: #111; }
.s-constructivism .sp-btn--secondary { background: transparent; color: #111; box-shadow: inset 0 0 0 3px #111; padding-right: 1.3em; }
.s-constructivism .sp-nav .sp-btn--secondary { color: #eadfc8; box-shadow: inset 0 0 0 2px #eadfc8; }
.s-constructivism .sp-art { overflow: hidden; background: linear-gradient(90deg, #111 0 48%, #f4ecdc 48%); box-shadow: 0 0 0 3px #111; }
.s-constructivism .sp-art i:nth-child(1) { width: 50%; aspect-ratio: 1; left: 6%; top: 24%; border-radius: 50%; background: #f4ecdc; }
.s-constructivism .sp-art i:nth-child(2) { width: 58%; height: 40%; right: 6%; top: 34%; background: #c8201e; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.s-constructivism .sp-art i:nth-child(3) { left: -10%; right: -10%; top: 12%; height: 5%; background: #c8201e; transform: rotate(-22deg); }
.s-constructivism .sp-art i:nth-child(4) { width: 12%; aspect-ratio: 1; left: 62%; top: 8%; background: #111; transform: rotate(18deg); }
.s-constructivism .sp-art i:nth-child(5) { right: 7%; bottom: 7%; width: 32%; height: 13%; background: repeating-linear-gradient(#111 0 5px, transparent 5px 11px); }
.s-constructivism .sp-card { padding: 20px; border: 3px solid #111; border-radius: 0; background: #f4ecdc; }
.s-constructivism .sp-card:nth-child(2) { background: #c8201e; color: #f4ecdc; transform: rotate(-2.5deg); }
.s-constructivism .sp-card:nth-child(3) { background: #111; color: #f4ecdc; }
.s-constructivism .sp-card:nth-child(n+2) p { color: #f4ecdc; }
.s-constructivism .sp-card h3 { font-size: 24px; letter-spacing: .02em; text-transform: uppercase; }
.s-constructivism .sp-card p { color: #2b2b2b; font-size: 15px; }
.s-constructivism .sp-icon { border-radius: 0; background: #111; color: #eadfc8; }
.s-constructivism .sp-card:nth-child(3) .sp-icon { background: #c8201e; }
.s-constructivism .sp-panel { --line: #eadfc8; --muted: #cbbfa5; color: #eadfc8; background: linear-gradient(115deg, #111 0 72%, #c8201e 72% 76%, #111 76%); }
.s-constructivism .sp-label { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.s-constructivism .sp-input { border: 0; border-radius: 0; background: #eadfc8; color: #111; }
.s-constructivism .sp-controls { letter-spacing: .06em; text-transform: uppercase; }
.s-constructivism .sp-switch { border-radius: 0; background: #555; }
.s-constructivism .sp-switch::after { border-radius: 0; background: #eadfc8; box-shadow: none; }
.s-constructivism .is-on .sp-switch { background: #c8201e; }
.s-constructivism .sp-bar { height: 10px; border-radius: 0; background: #555; }
.s-constructivism .sp-bar > span { border-radius: 0; background: #c8201e; }
.s-constructivism .sp-chips span { border: 2px solid #eadfc8; border-radius: 0; background: transparent; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------- MID-CENTURY MODERN ---------------- */
.s-midcentury {
  --bg: #f3ead8; --fg: #3b2f24; --muted: #6a5a48; --accent: #d9632b; --on-accent: #fff8ec;
  --surface: #fff8ec; --line: #3b2f24; --r: 14px; --icon-sw: 2.2;
  --font: "Jost", "Futura", sans-serif; --display: "Jost", "Futura", sans-serif;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-48L5-5 48 0 5 5 0 48-5 5-48 0-5-5Z'/%3E%3Cpath d='M0-28L4-4 28 0 4 4 0 28-4 4-28 0-4-4Z' transform='rotate(45)'/%3E%3C/svg%3E");
}
.s-midcentury .sp-logo { font-family: "Atomic Age", var(--display); font-size: 24px; font-weight: 400; color: #2a8c8c; }
.s-midcentury .sp-mark { width: 24px; height: 24px; border: 0; border-radius: 0; background: #e0a526; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.s-midcentury .sp-links { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.s-midcentury .sp-kicker { font-family: "Yellowtail", cursive; font-size: 28px; font-weight: 400; letter-spacing: 0; color: #d9632b; transform: rotate(-4deg); }
.s-midcentury .sp-title { font-weight: 700; font-size: clamp(36px, 6.6cqi, 76px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #2a8c8c; }
.s-midcentury .t2 { margin-top: .05em; font-family: "Yellowtail", cursive; font-size: 1.22em; font-weight: 400; letter-spacing: 0; text-transform: none; color: #d9632b; }
.s-midcentury .sp-lede { font-size: 17px; }
.s-midcentury .sp-btn { border-radius: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }
.s-midcentury .sp-btn--primary { background: #d9632b; color: #fff8ec; }
.s-midcentury .sp-btn--primary:hover { background: #2a8c8c; }
.s-midcentury .sp-btn--secondary { background: transparent; color: #2a8c8c; box-shadow: inset 0 0 0 2.5px #2a8c8c; }
.s-midcentury .sp-art i:nth-child(1) { width: 58%; aspect-ratio: 1; left: 2%; bottom: 0; border-radius: 50%; background: #2a8c8c; }
.s-midcentury .sp-art i:nth-child(2) { width: 54%; height: 30%; right: 4%; top: 16%; border-radius: 60% 40% 60% 40% / 70% 50% 50% 30%; background: #e0a526; transform: rotate(-18deg); -webkit-mask: radial-gradient(circle at 78% 20%, transparent 0 30%, #000 31%); mask: radial-gradient(circle at 78% 20%, transparent 0 30%, #000 31%); }
.s-midcentury .sp-art i:nth-child(3) { width: 42%; aspect-ratio: 1; right: 10%; bottom: 4%; background: #d9632b; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.s-midcentury .sp-art i:nth-child(4) { width: 16%; aspect-ratio: 1; left: 44%; top: 2%; background: #3b2f24; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.s-midcentury .sp-art i:nth-child(5) { width: 30%; height: 20%; left: 14%; top: 18%; background: radial-gradient(#7c8a3f 2.5px, transparent 3px) 0 0 / 13px 13px; }
.s-midcentury .sp-card { padding: 24px 22px; border-radius: 40px 14px 40px 14px; color: #fff8ec; }
.s-midcentury .sp-card:nth-child(1) { background: #2a8c8c; }
.s-midcentury .sp-card:nth-child(2) { background: #e0a526; color: #3b2f24; }
.s-midcentury .sp-card:nth-child(3) { background: #d9632b; }
.s-midcentury .sp-card h3 { font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.s-midcentury .sp-card p { color: inherit; opacity: .92; }
.s-midcentury .sp-icon { border-radius: 50%; background: #fff8ec; color: #3b2f24; }
.s-midcentury .sp-panel { --line: #6a5a48; --muted: #d8c9ae; border-radius: 22px; background: #3b2f24; color: #f3ead8; }
.s-midcentury .sp-label { font-family: "Yellowtail", cursive; font-size: 24px; font-weight: 400; color: #e0a526; }
.s-midcentury .sp-input { border: 0; border-radius: 999px; background: #f3ead8; color: #3b2f24; }
.s-midcentury .sp-switch { background: #6a5a48; }
.s-midcentury .is-on .sp-switch { background: #e0a526; }
.s-midcentury .sp-bar { background: #6a5a48; }
.s-midcentury .sp-bar > span { background: #d9632b; }
.s-midcentury .sp-chips span { border: 0; color: #fff8ec; font-weight: 600; }
.s-midcentury .sp-chips span:nth-child(1) { background: #2a8c8c; }
.s-midcentury .sp-chips span:nth-child(2) { background: #e0a526; color: #3b2f24; }
.s-midcentury .sp-chips span:nth-child(3) { background: #d9632b; }

/* ---------------- POP ART ---------------- */
.s-popart {
  --bg: #fff6a8; --fg: #111; --muted: #222; --accent: #e3001b; --on-accent: #fff;
  --surface: #fff; --line: #111; --r: 0; --icon-sw: 2.6;
  --font: "Helvetica Neue", Arial, sans-serif; --display: "Bangers", Impact, sans-serif;
  --burst: polygon(50% 0%, 58% 22%, 78% 6%, 74% 30%, 100% 24%, 82% 44%, 100% 58%, 76% 62%, 86% 86%, 62% 74%, 54% 100%, 44% 76%, 22% 94%, 26% 68%, 0% 72%, 16% 52%, 0% 34%, 24% 32%, 14% 8%, 38% 22%);
  background: radial-gradient(circle, #8fd3f2 24%, transparent 26%) 0 0 / 13px 13px, #fff6a8;
}
.s-popart .sp-nav { padding: 10px 14px; border: 3px solid #111; background: #fff; }
.s-popart .sp-logo { font-size: 27px; font-weight: 400; letter-spacing: .03em; color: #e3001b; }
.s-popart .sp-mark { width: 22px; height: 22px; border: 3px solid #111; background: #0098d8; }
.s-popart .sp-links a { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.s-popart .sp-kicker { padding: 4px 10px; border: 3px solid #111; background: #ffe600; font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: .05em; }
.s-popart .sp-title { font-weight: 400; font-size: clamp(44px, 8.6cqi, 102px); line-height: .98; letter-spacing: .02em; color: #ffe600; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 5px 5px 0 #e3001b; }
.s-popart .t2 { color: #e3001b; text-shadow: 5px 5px 0 #0098d8; }
.s-popart .sp-lede { position: relative; max-width: 40ch; padding: 14px 18px; border: 3px solid #111; border-radius: 28px; background: #fff; color: #111; font-weight: 600; }
.s-popart .sp-lede::before { content: ""; position: absolute; left: 30px; bottom: -24px; width: 34px; height: 24px; background: #111; clip-path: polygon(0 0, 100% 0, 16% 100%); }
.s-popart .sp-lede::after { content: ""; position: absolute; left: 35px; bottom: -16px; width: 24px; height: 17px; background: #fff; clip-path: polygon(0 0, 100% 0, 14% 100%); }
.s-popart .sp-actions { margin-top: 16px; }
.s-popart .sp-btn { border: 3px solid #111; border-radius: 0; font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: .05em; padding: .4em 1.1em; box-shadow: 4px 4px 0 #111; }
.s-popart .sp-btn--primary { background: radial-gradient(circle, rgba(255, 255, 255, .35) 24%, transparent 27%) 0 0 / 8px 8px, #e3001b; color: #fff; }
.s-popart .sp-btn--secondary { background: #ffe600; color: #111; }
.s-popart .sp-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.s-popart .sp-nav .sp-btn { font-size: 16px; }
.s-popart .sp-art i:nth-child(1) { width: 64%; aspect-ratio: 1; left: 2%; top: 18%; border-radius: 50%; background: radial-gradient(circle, #e3001b 30%, transparent 33%) 0 0 / 11px 11px; opacity: .85; }
.s-popart .sp-art i:nth-child(2), .s-popart .sp-art i:nth-child(3) { width: 68%; aspect-ratio: 1; clip-path: var(--burst); }
.s-popart .sp-art i:nth-child(2) { left: 16%; top: 12%; background: #111; }
.s-popart .sp-art i:nth-child(3) { left: calc(16% + 10px); top: calc(12% + 10px); width: calc(68% - 20px); background: #ffe600; }
.s-popart .sp-art i:nth-child(3)::after { content: "POW!"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(26px, 5cqi, 58px)/1 "Bangers", Impact, sans-serif; letter-spacing: .04em; color: #e3001b; -webkit-text-stroke: 2px #111; paint-order: stroke fill; transform: rotate(-10deg); }
.s-popart .sp-art i:nth-child(4) { right: 0; top: 0; padding: 8px 14px; border: 3px solid #111; border-radius: 50%; background: #fff; }
.s-popart .sp-art i:nth-child(4)::after { content: "WOW!"; font: 400 22px/1 "Bangers", Impact, sans-serif; letter-spacing: .04em; color: #111; }
.s-popart .sp-card { padding: 20px; border: 3px solid #111; border-radius: 0; background: #fff; box-shadow: 5px 5px 0 #111; }
.s-popart .sp-card:nth-child(2) { background: radial-gradient(circle, #ffb3a1 26%, transparent 29%) 0 0 / 10px 10px, #fff; }
.s-popart .sp-card:nth-child(3) { background: radial-gradient(circle, #8fd3f2 26%, transparent 29%) 0 0 / 10px 10px, #fff; }
.s-popart .sp-card h3 { align-self: flex-start; padding: 2px 8px; border: 2px solid #111; background: #ffe600; font-size: 21px; font-weight: 400; letter-spacing: .04em; }
.s-popart .sp-card p { color: #111; font-weight: 500; }
.s-popart .sp-icon { border: 3px solid #111; border-radius: 50%; background: #e3001b; color: #fff; }
.s-popart .sp-panel { --line: #111; border: 3px solid #111; background: radial-gradient(circle, rgba(255, 255, 255, .28) 24%, transparent 27%) 0 0 / 10px 10px, #0098d8; color: #fff; box-shadow: 5px 5px 0 #111; }
.s-popart .sp-label { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.s-popart .sp-input { border: 3px solid #111; border-radius: 0; background: #fff; color: #111; }
.s-popart .sp-panel .sp-btn--primary { box-shadow: 3px 3px 0 #111; }
.s-popart .sp-controls { font-weight: 700; }
.s-popart .sp-switch { border: 3px solid #111; background: #fff; width: 46px; height: 26px; }
.s-popart .sp-switch::after { top: 2px; left: 2px; width: 16px; height: 16px; border: 2px solid #111; background: #ffe600; box-shadow: none; }
.s-popart .is-on .sp-switch { background: #e3001b; }
.s-popart .is-on .sp-switch::after { transform: translateX(20px); }
.s-popart .sp-bar { height: 16px; border: 3px solid #111; background: #fff; }
.s-popart .sp-bar > span { border-radius: 0; background: radial-gradient(circle, #111 26%, transparent 29%) 0 0 / 6px 6px, #ffe600; }
.s-popart .sp-chips span { border: 2px solid #111; border-radius: 0; background: #ffe600; color: #111; font-family: var(--display); font-size: 15px; letter-spacing: .04em; }

/* ---------------- PSYCHEDELIC 60s ---------------- */
.s-psychedelic {
  --bg: #ff6a00; --fg: #2b0a3d; --muted: #3d0f52; --accent: #e0218a; --on-accent: #fff4c2;
  --surface: #ffd400; --line: #2b0a3d; --r: 28px; --icon-sw: 2.6;
  --font: "Nunito", sans-serif; --display: "Shrikhand", cursive;
  background: repeating-conic-gradient(from 0deg at 72% 26%, #ff6a00 0 9deg, #e0218a 9deg 18deg);
}
.s-psychedelic .sp-nav { padding: 10px 18px; border: 3px solid #2b0a3d; border-radius: 999px; background: #ffd400; }
.s-psychedelic .sp-logo { font-size: 24px; font-weight: 400; color: #e0218a; }
.s-psychedelic .sp-mark { width: 24px; height: 24px; border: 0; background: repeating-radial-gradient(circle, #2b0a3d 0 3px, #a4e635 3px 6px); }
.s-psychedelic .sp-links { font-weight: 800; }
.s-psychedelic .sp-kicker { padding: 6px 16px; border-radius: 999px; background: #2b0a3d; color: #ffd400; font-family: var(--display); font-size: 16px; font-weight: 400; letter-spacing: .02em; }
.s-psychedelic .sp-kicker::before { content: "\273F\00A0"; color: #a4e635; }
.s-psychedelic .sp-title { font-weight: 400; font-size: clamp(38px, 7.6cqi, 90px); line-height: 1.06; letter-spacing: .01em; color: #ffd400; -webkit-text-stroke: 2px #2b0a3d; paint-order: stroke fill; text-shadow: 4px 4px 0 #6a1b9a, 8px 8px 0 #1fc2c2, 12px 12px 0 #2b0a3d; }
.s-psychedelic .t2 { color: #a4e635; }
.s-psychedelic .sp-lede { padding: 16px 22px; border: 3px solid #2b0a3d; border-radius: 40px 70px 40px 70px / 70px 40px 70px 40px; background: #fff4c2; color: #2b0a3d; font-weight: 700; }
.s-psychedelic .sp-btn { border: 3px solid #2b0a3d; border-radius: 999px; font-family: var(--display); font-size: 17px; font-weight: 400; padding: .55em 1.4em; }
.s-psychedelic .sp-btn--primary { background: #a4e635; color: #2b0a3d; box-shadow: 0 0 0 4px #e0218a, 0 0 0 7px #2b0a3d; }
.s-psychedelic .sp-btn--secondary { background: #1fc2c2; color: #2b0a3d; box-shadow: 0 0 0 4px #ffd400, 0 0 0 7px #2b0a3d; }
.s-psychedelic .sp-btn:hover { transform: rotate(-3deg) scale(1.04); }
.s-psychedelic .sp-nav .sp-btn { box-shadow: none; font-size: 14px; }
.s-psychedelic .sp-art i:nth-child(1), .s-psychedelic .sp-art i:nth-child(2) { inset: 0; margin: auto; width: min(88%, 340px); aspect-ratio: 1; border-radius: 50%; }
.s-psychedelic .sp-art i:nth-child(1) { background: repeating-conic-gradient(#2b0a3d 0 12deg, #ffd400 12deg 24deg); box-shadow: 0 0 0 6px #2b0a3d; }
.s-psychedelic .sp-art i:nth-child(2) { background: repeating-radial-gradient(circle, transparent 0 13px, rgba(224, 33, 138, .85) 13px 23px); }
@media (prefers-reduced-motion: no-preference) { .s-psychedelic .sp-art i:nth-child(1) { animation: psy-spin 24s linear infinite; } }
@keyframes psy-spin { to { transform: rotate(360deg); } }
.s-psychedelic .sp-art i:nth-child(3), .s-psychedelic .sp-art i:nth-child(4), .s-psychedelic .sp-art i:nth-child(5) { border-radius: 50%; background: #ffd400; }
.s-psychedelic .sp-art i:nth-child(3) { width: 34px; height: 34px; left: calc(50% - 17px); top: calc(50% - 17px); box-shadow: 0 0 0 5px #2b0a3d, 0 -38px 0 4px #fff4c2, 36px -12px 0 4px #fff4c2, 22px 31px 0 4px #fff4c2, -22px 31px 0 4px #fff4c2, -36px -12px 0 4px #fff4c2; }
.s-psychedelic .sp-art i:nth-child(4) { width: 16px; height: 16px; left: 6%; top: 8%; background: #e0218a; box-shadow: 0 -18px 0 2px #a4e635, 17px -6px 0 2px #a4e635, 11px 15px 0 2px #a4e635, -11px 15px 0 2px #a4e635, -17px -6px 0 2px #a4e635; }
.s-psychedelic .sp-art i:nth-child(5) { width: 14px; height: 14px; right: 6%; bottom: 8%; background: #1fc2c2; box-shadow: 0 -16px 0 2px #ffd400, 15px -5px 0 2px #ffd400, 9px 13px 0 2px #ffd400, -9px 13px 0 2px #ffd400, -15px -5px 0 2px #ffd400; }
.s-psychedelic .sp-card { padding: 30px 28px; border: 3px solid #2b0a3d; border-radius: 46% 54% 42% 58% / 34% 42% 58% 66%; }
.s-psychedelic .sp-card:nth-child(1) { background: #a4e635; }
.s-psychedelic .sp-card:nth-child(2) { background: #1fc2c2; border-radius: 58% 42% 54% 46% / 44% 60% 40% 56%; }
.s-psychedelic .sp-card:nth-child(3) { background: #ffd400; }
.s-psychedelic .sp-card h3 { font-family: var(--display); font-size: 22px; font-weight: 400; }
.s-psychedelic .sp-card p { color: #2b0a3d; font-weight: 700; }
.s-psychedelic .sp-icon { border-radius: 50%; background: #fff4c2; color: #2b0a3d; box-shadow: 0 0 0 3px #2b0a3d, 0 0 0 6px #e0218a; }
.s-psychedelic .sp-panel { --line: #6a1b9a; --muted: #ffd9a8; border: 3px solid #ffd400; border-radius: 40px; background: #2b0a3d; color: #fff4c2; box-shadow: 0 0 0 5px #2b0a3d, 0 0 0 9px #a4e635; }
.s-psychedelic .sp-label { font-family: var(--display); font-size: 20px; font-weight: 400; color: #ffd400; }
.s-psychedelic .sp-input { border: 3px solid #ffd400; border-radius: 999px; background: #fff4c2; color: #2b0a3d; }
.s-psychedelic .sp-controls { font-weight: 800; }
.s-psychedelic .sp-switch { background: #6a1b9a; }
.s-psychedelic .is-on .sp-switch { background: #e0218a; }
.s-psychedelic .sp-switch::after { background: #ffd400; }
.s-psychedelic .sp-bar { height: 12px; background: #6a1b9a; }
.s-psychedelic .sp-bar > span { background: repeating-linear-gradient(90deg, #ff6a00 0 8px, #ffd400 8px 16px, #a4e635 16px 24px, #1fc2c2 24px 32px); }
.s-psychedelic .sp-chips span { border: 0; font-weight: 800; color: #2b0a3d; }
.s-psychedelic .sp-chips span:nth-child(1) { background: #a4e635; }
.s-psychedelic .sp-chips span:nth-child(2) { background: #1fc2c2; }
.s-psychedelic .sp-chips span:nth-child(3) { background: #ffd400; }