/* ==========================================================================
   Swapz front-end theme for swapnilzambare.com (added 2026-10-25)
   Apple-style: system type, frosted chrome, soft depth, quick and calm motion.
   Themes: .theme-aurora, .theme-graphite, .theme-paper   Mode: html.dark
   All colours and options are controlled from Admin > Design.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; color-scheme: light; }
html.dark { color-scheme: dark; }

.sz {
    --accent: #0071e3;
    --bg: #fbfbfd;
    --bg-2: #f5f5f7;
    --card: #ffffff;
    --text: #1d1d1f;
    --text-2: #6e6e73;
    --line: rgba(0, 0, 0, .08);
    --glass: rgba(251, 251, 253, .72);
    --chip: rgba(0, 0, 0, .045);
    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -10px rgba(0, 0, 0, .12);
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --max: 1120px;
}
.dark .sz {
    --bg: #000000;
    --bg-2: #0e0e10;
    --card: #1c1c1e;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --line: rgba(255, 255, 255, .12);
    --glass: rgba(22, 22, 24, .72);
    --chip: rgba(255, 255, 255, .08);
    --shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 40px -14px rgba(0, 0, 0, .7);
}

/* Graphite */
.sz.theme-graphite { --bg: #f2f2f4; --bg-2: #e9e9ed; --card: #ffffff; --text: #111113; --text-2: #5f5f66; --line: rgba(0, 0, 0, .1); --glass: rgba(242, 242, 244, .75); }
.dark .sz.theme-graphite { --bg: #0a0a0b; --bg-2: #111113; --card: #161618; --text: #ededf0; --text-2: #8e8e95; --line: rgba(255, 255, 255, .09); --glass: rgba(10, 10, 11, .72); --chip: rgba(255, 255, 255, .06); }

/* Paper */
.sz.theme-paper {
    --bg: #faf8f4; --bg-2: #f3efe8; --card: #fffdf9; --text: #1f1b16; --text-2: #6b6358;
    --line: rgba(60, 40, 10, .13); --glass: rgba(250, 248, 244, .82); --chip: rgba(60, 40, 10, .06);
    --shadow: none;
    --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
.dark .sz.theme-paper { --bg: #14120f; --bg-2: #1a1814; --card: #1e1b17; --text: #f1ece4; --text-2: #a39a8c; --line: rgba(255, 240, 220, .12); --glass: rgba(20, 18, 15, .82); --chip: rgba(255, 240, 220, .07); }

.sz.corners-soft { --r-lg: 18px; --r-md: 12px; --r-sm: 8px; }
.sz.corners-square { --r-lg: 6px; --r-md: 4px; --r-sm: 3px; }

/* Base ------------------------------------------------------------------ */
body.sz {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
.sz img { max-width: 100%; height: auto; display: block; }
.sz a { color: var(--accent); text-decoration: none; }
.sz a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sz :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
.sz ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

.container { width: min(100% - 32px, var(--max)); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 64px, var(--max)); } }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--card); color: var(--text) !important; box-shadow: var(--shadow); }
.skip-link:focus { left: 8px; }

.preview-bar { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px; background: var(--accent); color: #fff; font-size: .9rem; text-align: center; }
.preview-bar form { margin: 0; }
.preview-bar button { padding: 6px 14px; border: 0; border-radius: 999px; background: #fff; color: #1d1d1f; font: 600 .85rem/1 var(--font); cursor: pointer; transition: transform .12s var(--ease); }
.preview-bar button:active { transform: scale(.96); }
.preview-bar a { color: #fff !important; font-weight: 600; text-decoration: underline; }

/* Navigation (frosted, appears on scroll) -------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-scrolled, .nav.is-open {
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none !important; }
.brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.nav__links { display: none; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-size: .9rem; font-weight: 500; transition: color .2s, background-color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); background: var(--chip); text-decoration: none; }
.nav__links .nav__cta { margin-left: 6px; background: var(--accent); color: #fff; }
.nav__links .nav__cta:hover, .nav__links .nav__cta[aria-current="page"] { background: var(--accent); color: #fff; filter: brightness(1.08); }
.nav__toggle { display: grid; place-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s var(--ease); }
.nav__toggle:active { transform: scale(.92); }
.nav__toggle .l { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
.nav__toggle .l + .l { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] .l:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .l:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.nav__sheet { padding: 4px 0 20px; transform-origin: top center; animation: sz-sheet .32s var(--ease); }
.nav__sheet[hidden] { display: none; }
.nav__sheet a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); color: var(--text) !important; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.nav__sheet a:hover { text-decoration: none; }
@keyframes sz-sheet { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 860px) {
    .nav__links { display: flex; }
    .nav__toggle, .nav__sheet { display: none !important; }
}

/* Buttons ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px;
    font: 600 1rem/1 var(--font); letter-spacing: -.01em; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s var(--ease), filter .2s, background-color .2s;
}
.btn:hover { text-decoration: none !important; }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn--primary { background: var(--accent); color: #fff !important; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: var(--chip); color: var(--text) !important; }
.btn--ghost:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.btn--block { width: 100%; }
.corners-square .btn, .corners-square .nav__links a { border-radius: var(--r-sm); }

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 11vw, 136px) 0 clamp(64px, 9vw, 112px); margin-top: -60px; padding-top: calc(60px + clamp(64px, 11vw, 136px)); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .5; }
.b1 { top: -24vmax; left: -12vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, transparent), transparent 65%); }
.b2 { top: -18vmax; right: -16vmax; background: radial-gradient(circle, rgba(175, 82, 222, .45), transparent 65%); }
.b3 { bottom: -30vmax; left: 28%; background: radial-gradient(circle, rgba(52, 199, 89, .25), transparent 65%); }
.dark .blob { opacity: .38; }

.theme-graphite .blob, .theme-paper .blob { display: none; }
.theme-graphite .hero__bg {
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

.hero__grid { display: grid; gap: 48px; align-items: center; }
.hero-centered .hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__avatar { width: 112px; height: 112px; margin-bottom: 28px; border-radius: 50%; object-fit: cover; border: 4px solid var(--card); box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.display {
    margin: 0;
    font: 700 clamp(2.75rem, 7.6vw, 5.75rem)/1.02 var(--font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
}
.theme-aurora .display {
    background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 62%, var(--accent)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-paper .display { font-weight: 600; letter-spacing: -.02em; }
.display--sm { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.lede { margin: 20px 0 0; max-width: 48ch; color: var(--text-2); font-size: clamp(1.125rem, 2.1vw, 1.375rem); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-centered .hero__cta, .hero-centered .stats { justify-content: center; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 44px 0 0; padding: 0; list-style: none; }
.stats strong { display: block; color: var(--text); font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -.02em; }
.stats span { color: var(--text-2); font-size: .85rem; }
.hero__portrait img { width: 100%; max-width: 400px; aspect-ratio: 1; margin-inline: auto; border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow); }
@media (min-width: 900px) {
    .hero-split .hero__grid { grid-template-columns: 1.25fr .75fr; gap: 64px; }
    .hero-split .hero__portrait img { margin-right: 0; }
}

/* Sections ---------------------------------------------------------------- */
.band--alt { background: var(--bg-2); }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--tight { padding-top: 16px; }
.section__head { max-width: 720px; margin-bottom: 40px; }
.kicker { margin: 0 0 10px; color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.theme-graphite .kicker { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .9rem; }
.theme-graphite .kicker::before { content: "// "; opacity: .6; }
.h2 { margin: 0; font: 700 clamp(2rem, 4.6vw, 3.25rem)/1.07 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.theme-paper .h2 { font-weight: 600; letter-spacing: -.015em; }
.sub { margin: 14px 0 0; color: var(--text-2); font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.theme-aurora .card { border-color: transparent; }
.dark .theme-aurora .card { border-color: var(--line); }

/* About */
.about { display: grid; gap: 32px; }
@media (min-width: 900px) { .about { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .about__intro { position: sticky; top: 96px; } }
.about__cta { margin: 28px 0 0; }
.about__card { padding: clamp(24px, 4vw, 44px); }
.prose { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose div { margin: 0 0 1em; }
.prose b, .prose strong, .prose span[style], .prose em { color: var(--text); font-weight: 600; font-style: normal; }
.prose [align="justify"] { text-align: left; }
.prose a { font-weight: 600; }

/* Skills */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: .95rem; font-weight: 500; letter-spacing: -.005em; transition: border-color .2s, transform .2s var(--ease); }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.corners-square .chip { border-radius: var(--r-sm); }

/* Certifications */
.cert-group + .cert-group { margin-top: 48px; }
.cert-group__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -.01em; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--text-2); font: 600 .8rem/1 var(--font); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.cert { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px 24px; text-align: center; color: var(--text) !important; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cert:hover { text-decoration: none !important; transform: translateY(-4px); }
.cert:active { transform: scale(.98); transition-duration: .1s; }
.cert img { width: 120px; height: 120px; object-fit: contain; }
.cert__name { font-size: .98rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.cert__meta { color: var(--text-2); font-size: .82rem; }

/* Trailhead */
.trail { display: grid; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .trail { grid-template-columns: 1fr 1fr; gap: 48px; } }
.trail__embed { margin: 0; }
.trail__embed iframe { display: block; width: 100%; height: 250px; border: 0; border-radius: var(--r-md); background: #fff; }
.trail__embed figcaption { margin-top: 10px; color: var(--text-2); font-size: .85rem; text-align: center; }

/* Social rail (wide screens) */
.rail {
    position: fixed; left: 16px; top: 50%; z-index: 40; transform: translateY(-50%);
    display: none; flex-direction: column; gap: 6px; padding: 6px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--glass); box-shadow: var(--shadow);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@media (min-width: 1280px) { .rail { display: flex; } }
.rail a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .2s, transform .15s var(--ease); }
.rail a:hover { background: var(--chip); }
.rail a:active { transform: scale(.9); }
.rail img, .socials img, .contact__item img { width: 22px; height: 22px; object-fit: contain; }
/* Social icons are light artwork: give them a dark surface in light mode so they stay visible. */
html:not(.dark) .rail { background: rgba(29, 29, 31, .82); border-color: rgba(255, 255, 255, .08); }
html:not(.dark) .rail a:hover { background: rgba(255, 255, 255, .14); }
html:not(.dark) .socials a { background: #1d1d1f; }
html:not(.dark) .socials a:hover { background: #3a3a3c; }
html:not(.dark) .contact__item img { box-sizing: content-box; padding: 6px; border-radius: 8px; background: #1d1d1f; }
.corners-square .rail, .corners-square .rail a { border-radius: var(--r-sm); }

/* Footer */
.footer { padding: 56px 0 32px; border-top: 1px solid var(--line); background: var(--bg); }
.footer__top { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer__top { grid-template-columns: 1.5fr 1fr; } }
.footer__name { margin: 0 0 8px; font: 700 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.footer__desc { margin: 0; max-width: 56ch; color: var(--text-2); font-size: .95rem; }
.footer__label { margin: 0 0 12px; color: var(--text-2); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); transition: transform .15s var(--ease), background-color .2s; }
.socials a:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.socials a:active { transform: scale(.92); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .85rem; }
.footer__links { display: flex; gap: 18px; }
.footer__links a { color: var(--text-2) !important; }
.footer__links a:hover { color: var(--text) !important; }

/* Contact */
.page-hero { padding: clamp(48px, 8vw, 96px) 0 32px; text-align: center; }
.page-hero .lede { margin-inline: auto; }
.contact { display: grid; gap: 32px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1.4fr .6fr; align-items: start; } }
.form-card { padding: clamp(24px, 4vw, 40px); }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: .9rem; font-weight: 600; }
.input { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea.input { min-height: 160px; resize: vertical; }
.alert { margin-bottom: 20px; padding: 14px 16px; border-radius: var(--r-sm); font-size: .95rem; }
.alert--ok { background: color-mix(in srgb, #34c759 15%, transparent); color: var(--text); }
.alert--err { background: color-mix(in srgb, #ff3b30 13%, transparent); color: var(--text); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); color: var(--text) !important; font-weight: 500; transition: transform .2s var(--ease); }
.contact__item:hover { text-decoration: none !important; transform: translateX(3px); }


/* ==========================================================================
   2026-10-25: more themes and options from Admin > Website design
   ========================================================================== */

/* Ocean */
.sz.theme-ocean { --bg: #f4fbfc; --bg-2: #e9f6f8; --card: #ffffff; --text: #0b2530; --text-2: #4b6a75; --line: rgba(11, 37, 48, .1); --glass: rgba(244, 251, 252, .75); --chip: rgba(10, 132, 168, .08); }
.dark .sz.theme-ocean { --bg: #04141a; --bg-2: #071d25; --card: #0c2630; --text: #e6f6fa; --text-2: #8fb3bf; --line: rgba(160, 230, 250, .12); --glass: rgba(4, 20, 26, .72); --chip: rgba(100, 210, 255, .1); }
.theme-ocean .b2 { background: radial-gradient(circle, rgba(48, 176, 199, .5), transparent 65%); }
.theme-ocean .b3 { background: radial-gradient(circle, rgba(0, 199, 190, .3), transparent 65%); }
.theme-ocean .display { background: linear-gradient(120deg, var(--text) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Sunset */
.sz.theme-sunset { --bg: #fffaf6; --bg-2: #fff1e8; --card: #ffffff; --text: #2b1a12; --text-2: #7a5a4a; --line: rgba(80, 40, 10, .1); --glass: rgba(255, 250, 246, .78); --chip: rgba(255, 94, 58, .08); }
.dark .sz.theme-sunset { --bg: #160c08; --bg-2: #1e110b; --card: #24150e; --text: #fff1e8; --text-2: #c9a693; --line: rgba(255, 200, 170, .12); --glass: rgba(22, 12, 8, .75); --chip: rgba(255, 140, 90, .1); }
.theme-sunset .b2 { background: radial-gradient(circle, rgba(255, 149, 0, .45), transparent 65%); }
.theme-sunset .b3 { background: radial-gradient(circle, rgba(255, 45, 85, .25), transparent 65%); }
.theme-sunset .display { background: linear-gradient(120deg, var(--accent), #ff9500); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Mono */
.sz.theme-mono { --bg: #ffffff; --bg-2: #f6f6f6; --card: #ffffff; --text: #000000; --text-2: #555555; --line: rgba(0, 0, 0, .14); --glass: rgba(255, 255, 255, .85); --chip: rgba(0, 0, 0, .05); --shadow: none; --font-display: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.dark .sz.theme-mono { --bg: #000000; --bg-2: #0a0a0a; --card: #000000; --text: #ffffff; --text-2: #a8a8a8; --line: rgba(255, 255, 255, .2); --glass: rgba(0, 0, 0, .85); --chip: rgba(255, 255, 255, .08); }
.dark .sz.theme-mono { --accent: #ffffff !important; }
.theme-mono .blob { display: none; }
.theme-mono .display, .theme-mono .h2 { font-weight: 700; letter-spacing: -.04em; text-transform: lowercase; }
.theme-mono .kicker { color: var(--text-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: none; letter-spacing: 0; }
.theme-mono .kicker::before { content: "> "; }
.theme-mono .btn--primary { color: var(--bg) !important; }
.theme-mono .card { border-width: 1.5px; }

/* Neon */
.sz.theme-neon { --bg: #f7f5ff; --bg-2: #efebff; --card: #ffffff; --text: #160f2e; --text-2: #5d5480; --line: rgba(40, 20, 90, .1); --glass: rgba(247, 245, 255, .78); --chip: rgba(191, 90, 242, .08); }
.dark .sz.theme-neon { --bg: #07060d; --bg-2: #0d0b18; --card: #14111f; --text: #f5f3ff; --text-2: #a39dbf; --line: rgba(200, 170, 255, .14); --glass: rgba(7, 6, 13, .72); --chip: rgba(191, 90, 242, .14); --shadow: 0 0 0 1px rgba(191, 90, 242, .15), 0 20px 50px -20px rgba(191, 90, 242, .35); }
.theme-neon .b1 { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, transparent), transparent 65%); }
.theme-neon .b2 { background: radial-gradient(circle, rgba(255, 55, 95, .5), transparent 65%); }
.theme-neon .b3 { background: radial-gradient(circle, rgba(94, 92, 230, .45), transparent 65%); }
.theme-neon .display { background: linear-gradient(100deg, #fff 10%, var(--accent) 60%, #ff375f); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:not(.dark) .theme-neon .display { background: linear-gradient(100deg, var(--text) 10%, var(--accent) 60%, #ff375f); -webkit-background-clip: text; background-clip: text; }
.dark .theme-neon .btn--primary { box-shadow: 0 0 24px -4px var(--accent); }

/* Fonts and text size */
.sz.font-system { --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.sz.font-serif { --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.sz.font-rounded { --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", -apple-system, sans-serif; --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sz.font-mono { --font-display: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.sz.font-serif .display, .sz.font-serif .h2 { font-weight: 600; letter-spacing: -.015em; }
body.sz.fs-s { font-size: .97rem; }
body.sz.fs-l { font-size: 1.15rem; }
.sz.fs-s .display { font-size: clamp(2.4rem, 6.4vw, 4.75rem); }
.sz.fs-l .display { font-size: clamp(3rem, 8.4vw, 6.5rem); }

/* Page width */
.sz.w-narrow { --max: 960px; }
.sz.w-wide { --max: 1320px; }

/* Hero background override (Theme default keeps each theme's own) */
.sz.hbg-glow .blob { display: block; }
.sz.hbg-glow .hero__bg { background-image: none; -webkit-mask-image: none; mask-image: none; }
.sz.hbg-grid .blob { display: none; }
.sz.hbg-grid .hero__bg {
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.sz.hbg-gradient .blob { display: none; }
.sz.hbg-gradient .hero__bg { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, var(--bg) 70%); -webkit-mask-image: none; mask-image: none; }
.sz.hbg-plain .blob { display: none; }
.sz.hbg-plain .hero__bg { display: none; }

/* Minimal hero: left aligned, no photo */
.hero-minimal .hero__copy { max-width: 820px; }
.hero-minimal .display { font-size: clamp(2.6rem, 7vw, 5.25rem); }

/* Utility */
.sz .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.footer__note { margin-top: 8px; }
.section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.trail--solo { grid-template-columns: 1fr !important; }
.contact--solo { grid-template-columns: minmax(0, 680px) !important; justify-content: center; }
.btn--light { background: #fff; color: #1d1d1f !important; }
.btn--light:hover { filter: brightness(.96); }

/* Back to top */
.to-top {
    position: fixed; right: 18px; bottom: 18px; z-index: 45; display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 50%; background: var(--glass); color: var(--text) !important; box-shadow: var(--shadow);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { text-decoration: none !important; }
.to-top:active { transform: scale(.92); }
.corners-square .to-top { border-radius: var(--r-sm); }

/* Blog posts */
.posts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.post { display: flex; flex-direction: column; gap: 10px; padding: 24px; color: var(--text) !important; transition: transform .3s var(--ease); }
.post:hover { text-decoration: none !important; transform: translateY(-3px); }
.post:active { transform: scale(.985); }
.post__date { color: var(--text-2); font-size: .82rem; }
.post__title { font: 600 1.15rem/1.3 var(--font-display); letter-spacing: -.015em; }
.post__excerpt { color: var(--text-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__more { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; font-size: .92rem; }

/* Call to action band */
.cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    padding: clamp(28px, 5vw, 56px); border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
    color: #fff;
}
.cta .h2, .cta .kicker { color: #fff; }
.cta .kicker { opacity: .8; }
.cta__text { max-width: 60ch; margin: 12px 0 0; color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
.cta__text p:last-child { margin-bottom: 0; }
.cta .prose, .cta .prose b, .cta .prose strong { color: rgba(255, 255, 255, .9); }
.cta a:not(.btn) { color: #fff; text-decoration: underline; }

/* Custom sections */
.custom__grid { display: grid; gap: 24px; }
.custom--split .custom__grid { gap: 32px; }
@media (min-width: 900px) { .custom--split .custom__grid { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } }
.custom--plain .custom__body, .custom--split .custom__body { max-width: 72ch; }
.custom__body ul, .custom__body ol { padding-left: 1.2em; }
.custom__body h3, .custom__body h4 { color: var(--text); font-family: var(--font-display); letter-spacing: -.015em; }


/* ==========================================================================
   2026-10-25 (b): header options, spacing, light/dark switch, mobile polish
   ========================================================================== */

/* Spacing scale (Admin > Website design > Look and feel) */
.sz { --navh: 60px; --hero-pad: clamp(64px, 11vw, 136px); --sec-pad: clamp(64px, 9vw, 112px); }
.sz.sp-compact { --hero-pad: clamp(36px, 6vw, 84px); --sec-pad: clamp(44px, 6vw, 76px); }
.sz.sp-airy { --hero-pad: clamp(88px, 13vw, 160px); --sec-pad: clamp(84px, 11vw, 140px); }
.sz.nav-floating { --navh: 64px; }
.hero { margin-top: calc(-1 * var(--navh)); padding: calc(var(--navh) + var(--hero-pad)) 0 calc(var(--hero-pad) * .85); }
.nav-solid .hero, .nav--static ~ main .hero { margin-top: 0; padding-top: var(--hero-pad); }
.section { padding: var(--sec-pad) 0; }
.section--tight { padding-top: 12px; }
.sp-compact .section__head { margin-bottom: 28px; }
.sp-compact .hero__avatar { margin-bottom: 20px; }
.sp-compact .hero__cta { margin-top: 26px; }
.sp-compact .stats { margin-top: 30px; }
.sp-compact .cert-group + .cert-group { margin-top: 36px; }
.sp-compact .page-hero { padding: clamp(32px, 6vw, 72px) 0 20px; }
.sp-compact .footer { padding-top: 44px; }
.sp-compact .footer__bottom { margin-top: 28px; padding-top: 20px; }
@media (max-width: 640px) {
    .sz.sp-compact { --hero-pad: 28px; --sec-pad: 40px; }
    .sz.sp-normal { --hero-pad: 44px; --sec-pad: 56px; }
    .sz.sp-airy { --hero-pad: 64px; --sec-pad: 72px; }
    .section__head { margin-bottom: 22px; }
    .stats { gap: 10px 26px; }
}

/* Header layout */
.nav__inner { gap: 12px; }
.nav__menu { margin-left: auto; }
.nav__actions { display: flex; align-items: center; gap: 2px; }
.navalign-center .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.navalign-center .brand { justify-self: start; }
.navalign-center .nav__menu { margin: 0; justify-self: center; }
.navalign-center .nav__actions { justify-self: end; }
@media (max-width: 859.98px) { .navalign-center .nav__inner { display: flex; } .navalign-center .nav__actions { margin-left: auto; } }
.nav--static { position: relative; }

/* Floating capsule header */
.nav-floating .nav, .nav-floating .nav.is-scrolled, .nav-floating .nav.is-open { padding-top: 10px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-floating .nav__inner {
    height: 54px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--glass); box-shadow: var(--shadow);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.nav-floating .nav__sheet { width: min(100% - 32px, var(--max)); margin: 8px auto 0; padding: 4px 0 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); box-shadow: var(--shadow); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.corners-square.nav-floating .nav__inner, .corners-square.nav-floating .nav__sheet { border-radius: var(--r-sm); }

/* Solid header */
.nav-solid .nav, .nav-solid .nav.is-scrolled { background: var(--bg); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Current page highlight */
.navactive-underline .nav__links a[aria-current="page"]:not(.nav__cta) { background: transparent; color: var(--text); border-radius: 0; box-shadow: inset 0 -2px 0 var(--accent); }
.navactive-none .nav__links a[aria-current="page"]:not(.nav__cta) { background: transparent; color: var(--text); font-weight: 700; }
.nav__sheet a[aria-current="page"] { color: var(--accent) !important; }

/* Light / dark switch */
.mode-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s, transform .12s var(--ease); }
.mode-toggle:active { transform: scale(.9); background: var(--chip); }
.mode-toggle .i-sun, .dark .mode-toggle .i-moon { display: none; }
.dark .mode-toggle .i-sun { display: block; }
.corners-square .mode-toggle { border-radius: var(--r-sm); }
html.sz-mode-switching, html.sz-mode-switching * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* ---------- Mobile: feel native ---------- */
html { -webkit-tap-highlight-color: transparent; }
.sz .btn, .sz .nav__links a, .sz .nav__sheet a, .sz .nav__toggle, .sz .mode-toggle, .sz .rail a, .sz .socials a, .sz .to-top, .sz .cert, .sz .post, .sz .contact__item, .sz .brand, .preview-bar button {
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.sz .input { font-size: max(16px, 1rem); }
.sz .chip:active { transform: scale(.97); }
.sz .contact__item:active { transform: scale(.98); }
.sz .socials a:active, .sz .rail a:active { transform: scale(.92); }
/* Touch screens have no hover: stop hover states from sticking after a tap */
@media (hover: none), (pointer: coarse) {
    .sz .cert:hover, .sz .chip:hover, .sz .post:hover, .sz .contact__item:hover { transform: none; }
    .sz .chip:hover { border-color: var(--line); }
    .sz .nav__links a:hover:not([aria-current]):not(.nav__cta) { background: transparent; color: var(--text-2); }
    .sz .btn--primary:hover, .sz .btn--light:hover { filter: none; }
    .sz .btn--ghost:hover { background: var(--chip); }
    .sz a:hover { text-decoration: none; }
}
/* Safe areas (notch, rounded corners, home indicator) */
.nav { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); padding-top: env(safe-area-inset-top, 0px); }
.nav-floating .nav, .nav-floating .nav.is-scrolled, .nav-floating .nav.is-open { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.to-top { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.nav__sheet { max-height: calc(100dvh - var(--navh)); overflow-y: auto; overscroll-behavior: contain; }

/* Scroll reveal (only when JS adds .js-anim) */
.js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* Accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sz *, .sz *::before, .sz *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .js-anim .reveal { opacity: 1; transform: none; }
    .cert:hover, .chip:hover, .contact__item:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .nav.is-scrolled, .nav.is-open, .rail { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .sz { --line: rgba(0, 0, 0, .35); --text-2: #3a3a3c; }
    .dark .sz { --line: rgba(255, 255, 255, .45); --text-2: #d1d1d6; }
}
@media print {
    .nav, .rail, .hero__bg, .footer__links { display: none !important; }
    .js-anim .reveal { opacity: 1; transform: none; }
}

/* Contact form captcha */
.captcha { min-height: 66px; }
.captcha-note { margin: 0 0 14px; color: var(--text-2); font-size: .78rem; }
.captcha-note a { color: var(--text-2) !important; text-decoration: underline; }

/* ==========================================================================
   2026-10-26: Trailblazer, Studio, Terminal, Bento, Glass themes,
   page loaders, hero entrance, blog and GitHub styles
   ========================================================================== */

/* ---------- Trailblazer (Salesforce developer portfolio) ---------- */
.sz.theme-trailblazer { --bg: #f7fbff; --bg-2: #eaf5fe; --card: #ffffff; --text: #032d60; --text-2: #3e5a7d; --line: rgba(3, 45, 96, .12); --glass: rgba(247, 251, 255, .8); --chip: rgba(1, 118, 211, .08); --shadow: 0 1px 2px rgba(3, 45, 96, .06), 0 12px 30px -12px rgba(3, 45, 96, .18); }
.dark .sz.theme-trailblazer { --bg: #061a33; --bg-2: #0a2342; --card: #0e2a4d; --text: #eaf5fe; --text-2: #9fbadb; --line: rgba(160, 205, 255, .14); --glass: rgba(6, 26, 51, .78); --chip: rgba(1, 118, 211, .2); }
.theme-trailblazer .hero__bg { background: linear-gradient(180deg, #cfe9fe 0%, var(--bg) 85%); }
.dark .theme-trailblazer .hero__bg { background: linear-gradient(180deg, #0b2f5c 0%, var(--bg) 85%); }
.theme-trailblazer .blob { width: 30vmax; height: 14vmax; border-radius: 999px; filter: blur(18px); opacity: .85; background: #fff; }
.dark .theme-trailblazer .blob { opacity: .08; }
.theme-trailblazer .b1 { top: 6%; left: -6%; }
.theme-trailblazer .b2 { top: 18%; right: -8%; width: 36vmax; }
.theme-trailblazer .b3 { bottom: 4%; left: 34%; width: 24vmax; opacity: .6; }
.theme-trailblazer .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--chip); letter-spacing: .05em; }
.theme-trailblazer .card { border-top: 3px solid var(--accent); }
.theme-trailblazer .chip { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------- Studio (dynamic portfolio) ---------- */
.sz.theme-studio { --bg: #f6f4f0; --bg-2: #efece6; --card: #ffffff; --text: #111111; --text-2: #5b5752; --line: rgba(0, 0, 0, .1); --glass: rgba(246, 244, 240, .8); --chip: rgba(0, 0, 0, .05); --shadow: none; }
.dark .sz.theme-studio { --bg: #0d0d0d; --bg-2: #141414; --card: #181818; --text: #f4f2ee; --text-2: #a39f99; --line: rgba(255, 255, 255, .1); --glass: rgba(13, 13, 13, .78); --chip: rgba(255, 255, 255, .07); }
.theme-studio .display { font-size: clamp(3.2rem, 11vw, 8.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.theme-studio .h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.045em; }
.theme-studio .b1 { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 65%); animation: sz-drift1 26s ease-in-out infinite alternate; }
.theme-studio .b2 { background: radial-gradient(circle, rgba(94, 92, 230, .45), transparent 65%); animation: sz-drift2 30s ease-in-out infinite alternate; }
.theme-studio .b3 { background: radial-gradient(circle, rgba(255, 159, 10, .35), transparent 65%); animation: sz-drift1 34s ease-in-out infinite alternate-reverse; }
.theme-studio .card { border-color: var(--line); }
.theme-studio .chip { background: transparent; }
.theme-studio .kicker { color: var(--text); }
.theme-studio .kicker::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--accent); }
@keyframes sz-drift1 { to { transform: translate(8vmax, 5vmax) scale(1.1); } }
@keyframes sz-drift2 { to { transform: translate(-7vmax, 6vmax) scale(.92); } }

/* ---------- Terminal (developer console) ---------- */
.sz.theme-terminal { --bg: #f4f7f2; --bg-2: #ebf0e8; --card: #ffffff; --text: #18230f; --text-2: #4d5c43; --line: rgba(24, 35, 15, .14); --glass: rgba(244, 247, 242, .85); --chip: rgba(50, 215, 75, .1); --shadow: none; --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --font-display: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.dark .sz.theme-terminal { --bg: #0c0f0a; --bg-2: #10140d; --card: #131910; --text: #d8f5d0; --text-2: #8fae86; --line: rgba(120, 255, 120, .14); --glass: rgba(12, 15, 10, .85); --chip: rgba(50, 215, 75, .1); }
body.sz.theme-terminal { font-size: .98rem; }
.theme-terminal .blob { display: none; }
.theme-terminal .hero__bg { background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 5%, transparent) 3px 4px); }
.theme-terminal .display { font-size: clamp(2.2rem, 6.4vw, 4.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.theme-terminal .display::after { content: "_"; margin-left: .05em; animation: sz-blink 1.05s steps(1) infinite; }
.theme-terminal .eyebrow::before { content: "~/portfolio $ "; color: var(--text-2); }
.theme-terminal .kicker { color: var(--accent); text-transform: none; letter-spacing: 0; font-weight: 600; }
.theme-terminal .kicker::before { content: "$ "; color: var(--text-2); }
.theme-terminal .h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.theme-terminal .card { position: relative; padding-top: 34px; border-color: var(--line); }
.theme-terminal .card::before { content: ""; position: absolute; top: 12px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840; }
.theme-terminal .cert { padding-top: 38px; }
.theme-terminal .chip { border-radius: 3px; font-size: .88rem; }
.theme-terminal .chip::before { content: "#"; color: var(--accent); margin-right: 2px; }
.theme-terminal .btn--primary { color: #0c0f0a !important; }
@keyframes sz-blink { 50% { opacity: 0; } }

/* ---------- Bento (modern tiles) ---------- */
.sz.theme-bento { --bg: #f2f2f7; --bg-2: #f2f2f7; --card: #ffffff; --text: #1d1d1f; --text-2: #6e6e73; --line: rgba(0, 0, 0, .06); --glass: rgba(242, 242, 247, .8); --chip: rgba(0, 0, 0, .05); --shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.dark .sz.theme-bento { --bg: #000000; --bg-2: #000000; --card: #1c1c1e; --text: #f5f5f7; --text-2: #a1a1a6; --line: rgba(255, 255, 255, .08); --glass: rgba(0, 0, 0, .75); --chip: rgba(255, 255, 255, .08); }
.theme-bento .blob { display: none; }
.theme-bento .hero .container.hero__grid { padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--card); box-shadow: var(--shadow); }
.theme-bento .band > .section > .container { padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: var(--card); box-shadow: var(--shadow); }
.theme-bento .band { padding: 0; }
.theme-bento .section { padding: calc(var(--sec-pad) * .3) 0; }
.theme-bento .card { background: var(--bg); box-shadow: none; border-color: transparent; }
.theme-bento .trail, .theme-bento .cta { background: var(--bg); }
.theme-bento .cta { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.theme-bento .chip { background: var(--bg); border-color: transparent; }

/* ---------- Glass (vivid colour behind frosted cards) ---------- */
.sz.theme-glass { --bg: #eef0ff; --bg-2: transparent; --card: rgba(255, 255, 255, .55); --text: #14123a; --text-2: #4a4870; --line: rgba(255, 255, 255, .6); --glass: rgba(255, 255, 255, .55); --chip: rgba(255, 255, 255, .5); --shadow: 0 10px 40px -12px rgba(40, 20, 120, .25); }
.dark .sz.theme-glass { --bg: #0b0920; --card: rgba(255, 255, 255, .07); --text: #f5f5ff; --text-2: #b8b5d9; --line: rgba(255, 255, 255, .12); --glass: rgba(20, 16, 50, .5); --chip: rgba(255, 255, 255, .08); --shadow: 0 10px 40px -12px rgba(0, 0, 0, .6); }
body.sz.theme-glass { background: radial-gradient(60vmax 60vmax at 10% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%), radial-gradient(50vmax 50vmax at 95% 30%, rgba(191, 90, 242, .4), transparent 60%), radial-gradient(60vmax 60vmax at 40% 100%, rgba(255, 55, 95, .28), transparent 60%), var(--bg); background-attachment: fixed; }
.theme-glass .blob { display: none; }
.theme-glass .band--alt { background: transparent; }
.theme-glass .card, .theme-glass .chip { -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-color: var(--line); }
.theme-glass .footer { background: transparent; }
.theme-glass .display { background: linear-gradient(110deg, var(--text) 20%, color-mix(in srgb, var(--accent) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-transparency: reduce) { .theme-glass .card, .theme-glass .chip { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Page loader ---------- */
.sz-loader { position: fixed; inset: 0; z-index: 200; pointer-events: none; transition: opacity .45s var(--ease), visibility .45s; animation: sz-loader-out 0s 3s forwards; }
.sz-loader__bar { position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: sz-loadbar 1.6s var(--ease) forwards; }
.is-loaded .sz-loader__bar { width: 100% !important; animation: none; transition: width .25s ease; }
.ld-fade .sz-loader, .ld-pulse .sz-loader { background: var(--bg); display: grid; place-items: center; pointer-events: auto; }
.ld-fade .sz-loader__bar, .ld-pulse .sz-loader__bar { display: none; }
.sz-loader__mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--accent); color: #fff; font: 700 28px/1 var(--font-display); animation: sz-pulse 1.2s ease-in-out infinite; }
.sz-loader__mark img { width: 100%; height: 100%; object-fit: cover; }
.is-loaded .sz-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.is-loaded.ld-bar .sz-loader, .is-loaded .ld-bar .sz-loader { transition-delay: .25s; }
@keyframes sz-loadbar { 0% { width: 0; } 60% { width: 70%; } 100% { width: 85%; } }
@keyframes sz-pulse { 0%, 100% { transform: scale(.92); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { transform: scale(1); box-shadow: 0 0 0 18px transparent; } }
@keyframes sz-loader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Hero entrance ---------- */
.js .he-fade .hero__copy, .js .he-fade .hero__portrait,
.js .he-rise .hero__copy, .js .he-rise .hero__portrait,
.js .he-stagger .hero__copy > *, .js .he-stagger .hero__portrait { opacity: 0; }
.is-loaded .he-fade .hero__copy, .is-loaded .he-fade .hero__portrait { animation: sz-fade .8s var(--ease) forwards; }
.is-loaded .he-rise .hero__copy { animation: sz-rise .8s var(--ease) forwards; }
.is-loaded .he-rise .hero__portrait { animation: sz-rise .8s .12s var(--ease) forwards; }
.is-loaded .he-stagger .hero__copy > * { animation: sz-rise .7s var(--ease) forwards; }
.is-loaded .he-stagger .hero__copy > :nth-child(2) { animation-delay: .07s; }
.is-loaded .he-stagger .hero__copy > :nth-child(3) { animation-delay: .14s; }
.is-loaded .he-stagger .hero__copy > :nth-child(4) { animation-delay: .21s; }
.is-loaded .he-stagger .hero__copy > :nth-child(5) { animation-delay: .28s; }
.is-loaded .he-stagger .hero__copy > :nth-child(6) { animation-delay: .35s; }
.is-loaded .he-stagger .hero__portrait { animation: sz-rise .8s .2s var(--ease) forwards; }
@keyframes sz-fade { to { opacity: 1; } }
@keyframes sz-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Blog styles ---------- */
.posts { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.posts.cols-2, .repos.cols-2 { --cols: 2; }
.posts.cols-3, .repos.cols-3 { --cols: 3; }
.posts.cols-4, .repos.cols-4 { --cols: 4; }
@media (max-width: 1024px) { .posts, .repos { --cols: 2 !important; } }
@media (max-width: 640px) { .posts, .repos { --cols: 1 !important; } }
.post { gap: 0; padding: 0; overflow: hidden; }
.post__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 22px; }
.post__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--chip); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .post:hover .post__img img { transform: scale(1.04); } }
.posts--list { grid-template-columns: 1fr !important; }
.posts--list .post { flex-direction: row; align-items: stretch; }
.posts--list .post__img { flex: none; width: min(34%, 280px); aspect-ratio: auto; }
@media (max-width: 640px) { .posts--list .post { flex-direction: column; } .posts--list .post__img { width: 100%; aspect-ratio: 16 / 9; } }
.posts--featured .post--lead { grid-column: 1 / -1; flex-direction: row; }
.posts--featured .post--lead .post__img { flex: 1.3; aspect-ratio: auto; min-height: 260px; }
.posts--featured .post--lead .post__body { flex: 1; justify-content: center; padding: clamp(22px, 4vw, 40px); }
.posts--featured .post--lead .post__title { font-size: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 760px) { .posts--featured .post--lead { flex-direction: column; } .posts--featured .post--lead .post__img { min-height: 0; aspect-ratio: 16 / 9; } }
.posts--minimal { grid-template-columns: 1fr !important; gap: 0; }
.posts--minimal .post { border-top: 1px solid var(--line); border-radius: 0; }
.posts--minimal .post:last-child { border-bottom: 1px solid var(--line); }
.posts--minimal .post__body { flex-direction: row; align-items: baseline; gap: 20px; padding: 18px 4px; }
.posts--minimal .post__date { flex: none; width: 110px; }
.posts--minimal .post__title { font-size: 1.1rem; }

/* ---------- GitHub styles ---------- */
.repos { display: grid; gap: 14px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.repo { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: var(--text) !important; transition: transform .3s var(--ease), border-color .2s; }
.repo:hover { text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) { .repo:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.repo:active { transform: scale(.985); }
.repo__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.repo__icon { flex: none; color: var(--text-2); }
.repo__name { min-width: 0; overflow: hidden; color: var(--accent); font: 600 1.02rem/1.3 var(--font-display); white-space: nowrap; text-overflow: ellipsis; }
.repo__stars { margin-left: auto; flex: none; color: var(--text-2); font-size: .85rem; }
.repo__desc { color: var(--text-2); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.repo__topics { display: flex; flex-wrap: wrap; gap: 6px; }
.repo__topics span { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: .76rem; font-weight: 600; }
.repo__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; color: var(--text-2); font-size: .82rem; }
.repo__lang { display: inline-flex; align-items: center; gap: 6px; }
.repo__lang i { width: 10px; height: 10px; border-radius: 50%; }
.repos--list { grid-template-columns: 1fr !important; gap: 10px; }
.repos--list .repo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 16px 20px; }
.repos--list .repo__top { flex: 0 1 260px; }
.repos--list .repo__desc { flex: 1 1 300px; -webkit-line-clamp: 1; }
.repos--list .repo__meta { margin: 0; }
.repos--compact { gap: 0; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 24px; }
.repos--compact .repo { flex-direction: row; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--line); border-radius: 0; }
.repos--compact .repo__meta { margin: 0; }
.btn svg { flex: none; }

/* Reduced motion: no loaders, drifting colour or entrance animations */
@media (prefers-reduced-motion: reduce) {
    .sz-loader { display: none !important; }
    .js .he-fade .hero__copy, .js .he-fade .hero__portrait, .js .he-rise .hero__copy, .js .he-rise .hero__portrait, .js .he-stagger .hero__copy > *, .js .he-stagger .hero__portrait { opacity: 1 !important; animation: none !important; }
    .theme-studio .blob, .theme-terminal .display::after { animation: none !important; }
}

/* ==========================================================================
   2026-10-26 (c): 10 portfolio themes
   Cosmos, Sakura, Brutalist, Nord, Forest, Synthwave, Newspaper, Pastel, Polar, Blueprint
   ========================================================================== */

/* ---------- Cosmos ---------- */
.sz.theme-cosmos { --bg: #f5f6ff; --bg-2: #eceeff; --card: #ffffff; --text: #14163a; --text-2: #5a5d86; --line: rgba(20, 22, 58, .1); --glass: rgba(245, 246, 255, .8); --chip: rgba(139, 123, 255, .1); }
.dark .sz.theme-cosmos { --bg: #05061a; --bg-2: #090b24; --card: rgba(255, 255, 255, .05); --text: #eef0ff; --text-2: #a3a7d6; --line: rgba(180, 185, 255, .14); --glass: rgba(5, 6, 26, .72); --chip: rgba(139, 123, 255, .14); --shadow: 0 0 0 1px rgba(160, 150, 255, .12), 0 20px 50px -24px rgba(110, 90, 255, .5); }
.dark body.sz.theme-cosmos {
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9) 50%, transparent 52%), radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.7) 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 44% 32%, rgba(255,255,255,.85) 50%, transparent 52%), radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.6) 50%, transparent 52%),
        radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.8) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 90% 56%, rgba(255,255,255,.7) 50%, transparent 52%),
        radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.6) 50%, transparent 52%), radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,.75) 50%, transparent 52%);
    background-size: 420px 420px; background-attachment: fixed;
}
.theme-cosmos .band--alt { background: transparent; }
.theme-cosmos .b1 { background: radial-gradient(circle, rgba(139, 123, 255, .7), transparent 65%); }
.theme-cosmos .b2 { background: radial-gradient(circle, rgba(59, 75, 216, .55), transparent 65%); }
.theme-cosmos .b3 { background: radial-gradient(circle, rgba(255, 90, 200, .25), transparent 65%); }
.theme-cosmos .display { background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--accent) 70%, var(--text))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .theme-cosmos .display { filter: drop-shadow(0 0 24px rgba(139, 123, 255, .35)); }
.theme-cosmos .card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- Sakura ---------- */
.sz.theme-sakura { --bg: #fff7f9; --bg-2: #ffeef3; --card: #ffffff; --text: #3a1d27; --text-2: #845866; --line: rgba(224, 69, 123, .14); --glass: rgba(255, 247, 249, .82); --chip: rgba(224, 69, 123, .08); --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --shadow: 0 10px 30px -14px rgba(224, 69, 123, .3); }
.dark .sz.theme-sakura { --bg: #1a0f13; --bg-2: #22141a; --card: #2a1820; --text: #ffe9f0; --text-2: #d4a7b6; --line: rgba(255, 180, 205, .14); --glass: rgba(26, 15, 19, .8); --chip: rgba(255, 140, 180, .12); }
.theme-sakura .b1 { background: radial-gradient(circle, rgba(255, 179, 204, .8), transparent 65%); }
.theme-sakura .b2 { background: radial-gradient(circle, rgba(255, 214, 186, .7), transparent 65%); }
.theme-sakura .b3 { background: radial-gradient(circle, rgba(224, 69, 123, .25), transparent 65%); }
.theme-sakura .display, .theme-sakura .h2 { font-weight: 600; letter-spacing: -.02em; font-style: italic; }
.theme-sakura .kicker { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.theme-sakura .kicker::before { content: "\2740  "; }
.theme-sakura .chip { background: var(--chip); border-color: transparent; color: var(--text); }
.theme-sakura .hero__portrait img { border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; }

/* ---------- Brutalist ---------- */
.sz.theme-brutal { --bg: #fffdf3; --bg-2: #fff6cc; --card: #ffffff; --text: #000000; --text-2: #2b2b2b; --line: #000000; --glass: #fffdf3; --chip: #ffffff; --ink: #000; --shadow: 6px 6px 0 var(--ink); }
.dark .sz.theme-brutal { --bg: #111111; --bg-2: #1b1b1b; --card: #181818; --text: #ffffff; --text-2: #dddddd; --line: #ffffff; --glass: #111111; --chip: #181818; --ink: #fff; }
.theme-brutal .blob { display: none; }
.theme-brutal .hero__bg { background: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--accent) 35%, transparent) 22px 24px); opacity: .5; }
.theme-brutal .card, .theme-brutal .chip, .theme-brutal .btn, .theme-brutal .input, .theme-brutal .nav-floating .nav__inner { border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 var(--ink); }
.theme-brutal .chip { box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
.theme-brutal .btn { box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.theme-brutal .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.theme-brutal .btn--primary { color: #000 !important; }
.theme-brutal a:not(.btn):not(.nav__cta):not(.brand) { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.theme-brutal .nav__links a, .theme-brutal .nav__sheet a, .theme-brutal .footer__links a, .theme-brutal .cert, .theme-brutal .post, .theme-brutal .repo, .theme-brutal .contact__item { text-decoration: none !important; }
.theme-brutal .eyebrow, .theme-brutal .post__more, .theme-brutal .repo__name { color: var(--text); }
.theme-brutal .nav__links .nav__cta { color: #000; }
.theme-brutal .btn--ghost { background: var(--card); }
.theme-brutal .display { font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .92; }
.theme-brutal .h2 { font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.theme-brutal .h2::after { content: ""; display: block; width: 72px; height: 8px; margin-top: 12px; background: var(--accent); border: 3px solid var(--ink); }
.theme-brutal .kicker { display: inline-block; padding: 4px 10px; background: var(--accent); color: #000; border: 2px solid var(--ink); }
.theme-brutal .nav.is-scrolled { box-shadow: 0 3px 0 var(--ink); background: var(--bg); }
.theme-brutal .cert img, .theme-brutal .hero__portrait img, .theme-brutal .hero__avatar { border-radius: 0; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .theme-brutal .cert:hover, .theme-brutal .post:hover, .theme-brutal .repo:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); } }

/* ---------- Nord ---------- */
.sz.theme-nord { --bg: #eceff4; --bg-2: #e5e9f0; --card: #ffffff; --text: #2e3440; --text-2: #4c566a; --line: rgba(46, 52, 64, .12); --glass: rgba(236, 239, 244, .82); --chip: rgba(94, 129, 172, .1); }
.dark .sz.theme-nord { --bg: #2e3440; --bg-2: #3b4252; --card: #3b4252; --text: #eceff4; --text-2: #d8dee9; --line: rgba(216, 222, 233, .14); --glass: rgba(46, 52, 64, .8); --chip: rgba(136, 192, 208, .14); --shadow: 0 10px 30px -16px rgba(0, 0, 0, .5); }
.theme-nord .b1 { background: radial-gradient(circle, rgba(136, 192, 208, .55), transparent 65%); }
.theme-nord .b2 { background: radial-gradient(circle, rgba(143, 188, 187, .45), transparent 65%); }
.theme-nord .b3 { background: radial-gradient(circle, rgba(180, 142, 173, .3), transparent 65%); }
.dark .theme-nord .band--alt .card { background: #434c5e; }
.theme-nord .kicker { color: #5e81ac; }
.dark .theme-nord .kicker { color: #88c0d0; }
.theme-nord .btn--primary { color: #2e3440 !important; }
html:not(.dark) .theme-nord .btn--primary { color: #fff !important; }

/* ---------- Forest ---------- */
.sz.theme-forest { --bg: #f3f6f1; --bg-2: #e8efe4; --card: #fbfdf9; --text: #1c2a1f; --text-2: #4f6352; --line: rgba(28, 42, 31, .12); --glass: rgba(243, 246, 241, .82); --chip: rgba(47, 125, 79, .1); --font-display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, sans-serif; }
.dark .sz.theme-forest { --bg: #0d1a12; --bg-2: #112218; --card: #13241a; --text: #e5f2e7; --text-2: #a4c2aa; --line: rgba(160, 220, 170, .12); --glass: rgba(13, 26, 18, .8); --chip: rgba(90, 200, 130, .12); }
.theme-forest .b1 { background: radial-gradient(circle, rgba(47, 125, 79, .45), transparent 65%); }
.theme-forest .b2 { background: radial-gradient(circle, rgba(167, 196, 160, .6), transparent 65%); }
.theme-forest .b3 { background: radial-gradient(circle, rgba(214, 180, 90, .3), transparent 65%); }
.theme-forest .hero__avatar, .theme-forest .hero__portrait img { border-radius: 62% 38% 54% 46% / 49% 61% 39% 51%; }
.theme-forest .card { border-radius: 28px 28px 28px 8px; }
.theme-forest .chip { background: var(--chip); border-color: transparent; }
.theme-forest .kicker::before { content: "\1F33F  "; }

/* ---------- Synthwave ---------- */
.sz.theme-synthwave { --bg: #f7f0ff; --bg-2: #efe4ff; --card: #ffffff; --text: #2a0a4a; --text-2: #6b4c8f; --line: rgba(120, 40, 200, .14); --glass: rgba(247, 240, 255, .82); --chip: rgba(255, 47, 208, .1); }
.dark .sz.theme-synthwave { --bg: #12002b; --bg-2: #18033a; --card: #1e0745; --text: #ffe9ff; --text-2: #c9a6ff; --line: rgba(255, 120, 230, .2); --glass: rgba(18, 0, 43, .78); --chip: rgba(1, 205, 254, .12); --shadow: 0 0 0 1px rgba(255, 47, 208, .2), 0 0 40px -14px rgba(255, 47, 208, .55); }
.theme-synthwave .blob { display: none; }
.theme-synthwave .hero__bg {
    background:
        radial-gradient(circle at 50% 78%, #ffd319 0 9vmax, #ff8b2b 9vmax 12vmax, transparent 12.1vmax) no-repeat,
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    opacity: .55;
}
.theme-synthwave .hero::after {
    content: ""; position: absolute; left: -25%; right: -25%; bottom: 0; height: 42%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #01cdfe 60%, transparent) 1px, transparent 1px);
    background-size: 56px 56px; transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
    -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%); mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
}
.theme-synthwave .display { background: linear-gradient(180deg, #ff71ce 20%, #01cdfe 95%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.dark .theme-synthwave .display { filter: drop-shadow(0 0 18px rgba(255, 47, 208, .55)); }
.theme-synthwave .kicker { color: #01cdfe; text-shadow: 0 0 12px rgba(1, 205, 254, .6); }
.dark .theme-synthwave .btn--primary { box-shadow: 0 0 24px -2px var(--accent); }

/* ---------- Newspaper ---------- */
.sz.theme-newspaper { --bg: #f4f1ea; --bg-2: #eeeae0; --card: transparent; --text: #111111; --text-2: #4a4740; --line: #111111; --glass: rgba(244, 241, 234, .9); --chip: transparent; --shadow: none; --font-display: ui-serif, "Playfair Display", "New York", Georgia, "Times New Roman", serif; --font: ui-serif, Georgia, "Times New Roman", serif; }
.dark .sz.theme-newspaper { --bg: #151413; --bg-2: #1a1918; --text: #f0ece4; --text-2: #bdb6a8; --line: #f0ece4; --glass: rgba(21, 20, 19, .9); }
.theme-newspaper .blob { display: none; }
.theme-newspaper .band--alt { background: var(--bg); }
.theme-newspaper .hero .container { border-top: 6px double var(--line); border-bottom: 1px solid var(--line); padding-top: 22px; padding-bottom: 22px; }
.theme-newspaper .display { font-weight: 900; letter-spacing: -.035em; line-height: .95; text-transform: uppercase; }
.theme-newspaper .eyebrow { color: var(--text-2); font-style: italic; }
.theme-newspaper .kicker { display: flex; align-items: center; gap: 12px; color: var(--accent); font-family: var(--font); font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; font-size: .95rem; }
.theme-newspaper .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.theme-newspaper .h2 { font-weight: 800; padding-bottom: 10px; border-bottom: 3px double var(--line); }
.theme-newspaper .card { border: 0; border-top: 2px solid var(--line); border-radius: 0; box-shadow: none; }
.theme-newspaper .about__card { columns: 2 280px; column-gap: 32px; column-rule: 1px solid color-mix(in srgb, var(--line) 30%, transparent); padding-left: 0; padding-right: 0; }
.theme-newspaper .prose > :first-child::first-letter { float: left; margin: 4px 8px 0 0; font: 900 3.4em/.8 var(--font-display); color: var(--accent); }
.theme-newspaper .chip { border: 1px solid var(--line); border-radius: 0; background: transparent; font-family: var(--font); }
.theme-newspaper .btn { border-radius: 0; }
.theme-newspaper .btn--ghost { border: 1px solid var(--line); background: transparent; }

/* ---------- Pastel ---------- */
.sz.theme-pastel { --bg: #fdf8ff; --bg-2: #f6efff; --card: #ffffff; --text: #2a2340; --text-2: #6b6188; --line: rgba(124, 92, 255, .12); --glass: rgba(253, 248, 255, .82); --chip: rgba(124, 92, 255, .08); --shadow: 0 12px 30px -14px rgba(124, 92, 255, .3); --font-display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, sans-serif; }
.dark .sz.theme-pastel { --bg: #17131f; --bg-2: #1d1828; --card: #241e31; --text: #f6f0ff; --text-2: #bdb1d9; --line: rgba(200, 180, 255, .14); --glass: rgba(23, 19, 31, .8); --chip: rgba(160, 130, 255, .14); }
.theme-pastel .b1 { background: radial-gradient(circle, rgba(167, 243, 208, .7), transparent 65%); }
.theme-pastel .b2 { background: radial-gradient(circle, rgba(255, 180, 200, .7), transparent 65%); }
.theme-pastel .b3 { background: radial-gradient(circle, rgba(196, 181, 253, .7), transparent 65%); }
.theme-pastel .card { border-radius: 28px; border-color: transparent; }
.theme-pastel .chip { border-color: transparent; font-weight: 600; }
.theme-pastel .chip:nth-child(5n+1) { background: #ffe1ea; color: #8a2b4b; }
.theme-pastel .chip:nth-child(5n+2) { background: #dff7ec; color: #1e6b4a; }
.theme-pastel .chip:nth-child(5n+3) { background: #e9e3ff; color: #4a3a9c; }
.theme-pastel .chip:nth-child(5n+4) { background: #fff1d6; color: #8a5a10; }
.theme-pastel .chip:nth-child(5n+5) { background: #dcefff; color: #1f5a8a; }
.dark .theme-pastel .chip { filter: saturate(.9) brightness(.9); }
.theme-pastel .btn { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.theme-pastel .display { font-weight: 800; }

/* ---------- Polar (northern lights) ---------- */
.sz.theme-polar { --bg: #effaf7; --bg-2: #e3f5f0; --card: #ffffff; --text: #082a25; --text-2: #3f6a63; --line: rgba(8, 42, 37, .1); --glass: rgba(239, 250, 247, .82); --chip: rgba(62, 232, 181, .12); }
.dark .sz.theme-polar { --bg: #020b14; --bg-2: #04121f; --card: rgba(255, 255, 255, .05); --text: #e6fff7; --text-2: #9cc9c0; --line: rgba(120, 255, 210, .14); --glass: rgba(2, 11, 20, .75); --chip: rgba(62, 232, 181, .12); }
.theme-polar .blob { width: 70vmax; height: 18vmax; border-radius: 50%; filter: blur(50px); opacity: .55; }
.theme-polar .b1 { top: -4vmax; left: -10vmax; background: linear-gradient(90deg, transparent, rgba(62, 232, 181, .9), rgba(90, 200, 250, .7), transparent); transform: rotate(-12deg); animation: sz-aurora1 18s ease-in-out infinite alternate; }
.theme-polar .b2 { top: 8vmax; right: -20vmax; background: linear-gradient(90deg, transparent, rgba(90, 200, 250, .7), rgba(191, 90, 242, .5), transparent); transform: rotate(8deg); animation: sz-aurora2 22s ease-in-out infinite alternate; }
.theme-polar .b3 { display: none; }
@keyframes sz-aurora1 { to { transform: rotate(-4deg) translateX(6vmax) scaleY(1.3); } }
@keyframes sz-aurora2 { to { transform: rotate(2deg) translateX(-6vmax) scaleY(.8); } }
.theme-polar .display { background: linear-gradient(100deg, #3ee8b5, #5ac8fa 60%, #bf5af2); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:not(.dark) .theme-polar .display { background: linear-gradient(100deg, #0a7a5c, #0a6aa8 60%, #7a2fbf); -webkit-background-clip: text; background-clip: text; }
.dark .theme-polar .band--alt { background: transparent; }
.dark .theme-polar .card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dark .theme-polar .btn--primary { color: #02261d !important; }

/* ---------- Blueprint ---------- */
.sz.theme-blueprint { --bg: #f4f8ff; --bg-2: #eaf1ff; --card: rgba(255, 255, 255, .7); --text: #0b3d91; --text-2: #3a62a8; --line: rgba(11, 61, 145, .35); --glass: rgba(244, 248, 255, .86); --chip: transparent; --shadow: none; --grid: rgba(11, 61, 145, .08); --grid-major: rgba(11, 61, 145, .14); --font-display: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.dark .sz.theme-blueprint { --bg: #0b3d91; --bg-2: #0b3d91; --card: rgba(255, 255, 255, .04); --text: #ffffff; --text-2: #c6d8ff; --line: rgba(255, 255, 255, .45); --glass: rgba(11, 61, 145, .86); --grid: rgba(255, 255, 255, .07); --grid-major: rgba(255, 255, 255, .14); }
body.sz.theme-blueprint { background-color: var(--bg); background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-attachment: fixed; }
.theme-blueprint .blob, .theme-blueprint .hero__bg { display: none; }
.theme-blueprint .band--alt, .theme-blueprint .footer { background: transparent; }
.theme-blueprint .card, .theme-blueprint .chip { border: 1.5px dashed var(--line); border-radius: 0; }
.theme-blueprint .display { font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.theme-blueprint .kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.dark .theme-blueprint .kicker { color: #ffd166; }
.theme-blueprint .kicker::before { content: "[ "; } .theme-blueprint .kicker::after { content: " ]"; }
.theme-blueprint .h2::after { content: attr(id); display: block; margin-top: 8px; font: 500 .7rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); opacity: .7; }
.theme-blueprint .hero__portrait img, .theme-blueprint .hero__avatar { border-radius: 0; border: 1.5px dashed var(--line); padding: 6px; background: transparent; }
.theme-blueprint .btn { border-radius: 0; }
.dark .theme-blueprint .btn--primary { color: #0b3d91 !important; }
html:not(.dark) .theme-blueprint .btn--primary { color: #0b3d91 !important; }
html:not(.dark) .theme-blueprint .kicker { color: #0b3d91; }

@media (prefers-reduced-motion: reduce) { .theme-polar .blob { animation: none !important; } }

/* ==========================================================================
   2026-10-26 (d): 10 more portfolio themes
   Liquid, Slate, Swiss, Zen, Noir, Clay, Soft UI, Prism, Cyber, Desert
   ========================================================================== */

/* ---------- Liquid (liquid glass) ---------- */
.sz.theme-liquid { --bg: #eef3ff; --bg-2: transparent; --card: rgba(255, 255, 255, .38); --text: #14182b; --text-2: #4d5575; --line: rgba(255, 255, 255, .7); --glass: rgba(255, 255, 255, .45); --chip: rgba(255, 255, 255, .45); --shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 10px 34px -10px rgba(31, 38, 135, .18); }
.dark .sz.theme-liquid { --bg: #0a0d1a; --card: rgba(255, 255, 255, .06); --text: #f2f5ff; --text-2: #a9b1d6; --line: rgba(255, 255, 255, .14); --glass: rgba(16, 20, 40, .5); --chip: rgba(255, 255, 255, .07); --shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 40px -12px rgba(0, 0, 0, .6); }
body.sz.theme-liquid { background: radial-gradient(45vmax 45vmax at 15% 10%, rgba(10, 132, 255, .35), transparent 60%), radial-gradient(40vmax 40vmax at 90% 25%, rgba(255, 140, 190, .35), transparent 60%), radial-gradient(50vmax 50vmax at 50% 100%, rgba(120, 230, 200, .3), transparent 60%), var(--bg); background-attachment: fixed; }
.theme-liquid .blob, .theme-liquid .band--alt { display: none; background: transparent; }
.theme-liquid .band--alt { display: block; }
.theme-liquid .card, .theme-liquid .chip, .theme-liquid .btn--ghost { border: 1px solid var(--line); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); box-shadow: var(--shadow); }
.theme-liquid .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -8px var(--accent); }
.theme-liquid .footer { background: transparent; }
@media (prefers-reduced-transparency: reduce) { .theme-liquid .card, .theme-liquid .chip { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Slate (modern product) ---------- */
.sz.theme-slate { --bg: #f7f8fa; --bg-2: #f0f2f5; --card: #ffffff; --text: #0f1219; --text-2: #5b6474; --line: rgba(15, 18, 25, .08); --glass: rgba(247, 248, 250, .82); --chip: rgba(15, 18, 25, .04); --shadow: 0 1px 2px rgba(15, 18, 25, .05); }
.dark .sz.theme-slate { --bg: #0b0d12; --bg-2: #0e1117; --card: #11141b; --text: #f2f4f8; --text-2: #8b93a5; --line: rgba(255, 255, 255, .07); --glass: rgba(11, 13, 18, .75); --chip: rgba(255, 255, 255, .04); --shadow: none; }
.theme-slate .b2, .theme-slate .b3 { display: none; }
.theme-slate .b1 { left: 50%; top: -30vmax; width: 60vmax; height: 40vmax; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: .55; }
.theme-slate .hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent); mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent); }
.theme-slate .display { font-weight: 650; letter-spacing: -.045em; background: linear-gradient(180deg, var(--text) 40%, var(--text-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-slate .h2 { font-weight: 650; letter-spacing: -.035em; }
.theme-slate .card { background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%); }
.theme-slate .kicker { display: inline-flex; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
.theme-slate .chip { font-size: .88rem; padding: 7px 14px; }
.dark .theme-slate .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 24px -8px var(--accent); }

/* ---------- Swiss ---------- */
.sz.theme-swiss { --bg: #ffffff; --bg-2: #f2f2f2; --card: #ffffff; --text: #111111; --text-2: #4a4a4a; --line: #111111; --glass: rgba(255, 255, 255, .92); --chip: transparent; --shadow: none; --font: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif; --font-display: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif; }
.dark .sz.theme-swiss { --bg: #111111; --bg-2: #181818; --card: #111111; --text: #f5f5f5; --text-2: #bdbdbd; --line: #f5f5f5; --glass: rgba(17, 17, 17, .92); }
.theme-swiss .blob, .theme-swiss .hero__bg { display: none; }
.theme-swiss main { counter-reset: sz-sec; }
.theme-swiss .display { font-weight: 700; letter-spacing: -.05em; line-height: .9; font-size: clamp(3rem, 10vw, 7.5rem); }
.theme-swiss .hero .container { border-left: 12px solid var(--accent); padding-left: clamp(16px, 3vw, 32px); }
.theme-swiss .h2 { font-weight: 700; letter-spacing: -.04em; }
.theme-swiss .h2::before { counter-increment: sz-sec; content: counter(sz-sec, decimal-leading-zero); display: block; margin-bottom: 8px; color: var(--accent); font-size: 1rem; letter-spacing: 0; }
.theme-swiss .kicker { color: var(--text); font-weight: 700; letter-spacing: .02em; border-top: 2px solid var(--line); padding-top: 8px; }
.theme-swiss .card, .theme-swiss .chip { border: 1px solid var(--line); border-radius: 0; }
.theme-swiss .btn { border-radius: 0; font-weight: 700; }
.theme-swiss .band--alt { background: var(--bg-2); }

/* ---------- Zen ---------- */
.sz.theme-zen { --bg: #f7f5f0; --bg-2: #f1eee6; --card: transparent; --text: #1a1a1a; --text-2: #6b665e; --line: rgba(26, 26, 26, .14); --glass: rgba(247, 245, 240, .9); --chip: transparent; --shadow: none; }
.dark .sz.theme-zen { --bg: #141311; --bg-2: #181714; --text: #ece8e0; --text-2: #a39d92; --line: rgba(236, 232, 224, .14); --glass: rgba(20, 19, 17, .9); }
.theme-zen .blob, .theme-zen .hero__bg { display: none; }
.theme-zen .band--alt { background: var(--bg); }
.theme-zen .band + .band .section { border-top: 1px solid var(--line); }
.theme-zen .display { font-weight: 300; letter-spacing: -.03em; font-size: clamp(2.8rem, 8vw, 6rem); }
.theme-zen .h2 { font-weight: 300; letter-spacing: -.02em; }
.theme-zen .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.theme-zen .eyebrow::before { content: ""; width: 14px; height: 14px; background: var(--accent); border-radius: 2px; }
.theme-zen .kicker { color: var(--text-2); font-weight: 400; letter-spacing: .25em; }
.theme-zen .card { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.theme-zen .chip { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px; margin-right: 10px; }
.theme-zen .btn--primary { background: var(--text); color: var(--bg) !important; }
.theme-zen .btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Noir ---------- */
.sz.theme-noir { --bg: #f5f1ea; --bg-2: #ece6dc; --card: #fbf8f2; --text: #0a0a0a; --text-2: #4a4640; --line: rgba(10, 10, 10, .18); --glass: rgba(245, 241, 234, .9); --chip: transparent; --shadow: none; --font-display: ui-serif, "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; }
.dark .sz.theme-noir { --bg: #0a0a0a; --bg-2: #101010; --card: #141414; --text: #f5f1ea; --text-2: #a8a39a; --line: rgba(245, 241, 234, .18); --glass: rgba(10, 10, 10, .85); }
.theme-noir .blob { display: none; }
.theme-noir .hero__bg { background: radial-gradient(ellipse 50% 70% at 28% 10%, rgba(255, 255, 255, .14), transparent 70%); }
html:not(.dark) .theme-noir .hero__bg { background: radial-gradient(ellipse 50% 70% at 28% 10%, rgba(0, 0, 0, .06), transparent 70%); }
body.sz.theme-noir::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.theme-noir .display { font-weight: 400; font-style: italic; letter-spacing: -.02em; }
.theme-noir .h2 { font-weight: 400; font-style: italic; }
.theme-noir .kicker { color: var(--text-2); letter-spacing: .3em; }
.theme-noir .hero__portrait img, .theme-noir .hero__avatar, .theme-noir .brand img { filter: grayscale(1) contrast(1.15); }
.theme-noir .card { border-radius: 0; border-color: var(--line); }
.theme-noir .btn--primary { color: var(--bg) !important; background: var(--text); }
.theme-noir .chip { border-radius: 0; background: transparent; }

/* ---------- Clay ---------- */
.sz.theme-clay { --bg: #f3ece4; --bg-2: #efe6dc; --card: #fbf6f1; --text: #3a2b24; --text-2: #7a6559; --line: transparent; --glass: rgba(243, 236, 228, .86); --chip: #fbf6f1; --clay: 12px 14px 30px rgba(140, 100, 70, .18), inset -6px -8px 14px rgba(140, 100, 70, .08), inset 6px 8px 14px rgba(255, 255, 255, .85); --shadow: var(--clay); }
.dark .sz.theme-clay { --bg: #2a211c; --bg-2: #2f251f; --card: #362a23; --text: #f6ebe3; --text-2: #c7ad9e; --glass: rgba(42, 33, 28, .86); --chip: #362a23; --clay: 12px 14px 30px rgba(0, 0, 0, .35), inset -6px -8px 14px rgba(0, 0, 0, .2), inset 6px 8px 14px rgba(255, 255, 255, .05); }
.theme-clay .blob { display: none; }
.theme-clay .card { border: 0; border-radius: 34px; box-shadow: var(--clay); }
.theme-clay .chip { border: 0; box-shadow: 4px 5px 12px rgba(140, 100, 70, .14), inset -2px -3px 6px rgba(140, 100, 70, .08), inset 2px 3px 6px rgba(255, 255, 255, .8); }
.dark .theme-clay .chip { box-shadow: 4px 5px 12px rgba(0, 0, 0, .3), inset 2px 3px 6px rgba(255, 255, 255, .04); }
.theme-clay .btn { box-shadow: 6px 8px 18px color-mix(in srgb, var(--accent) 35%, transparent), inset -3px -4px 8px rgba(0, 0, 0, .12), inset 3px 4px 8px rgba(255, 255, 255, .4); }
.theme-clay .btn--ghost { background: var(--card); box-shadow: var(--clay); }
.theme-clay .hero__portrait img, .theme-clay .hero__avatar { border-radius: 40px; box-shadow: var(--clay); }
.theme-clay .display { font-weight: 800; }

/* ---------- Soft UI (neumorphism) ---------- */
.sz.theme-soft { --bg: #e6e9ef; --bg-2: #e6e9ef; --card: #e6e9ef; --text: #2d3440; --text-2: #626b7a; --line: transparent; --glass: rgba(230, 233, 239, .88); --chip: #e6e9ef; --sh-d: #c3c8d2; --sh-l: #ffffff; --shadow: 10px 10px 22px var(--sh-d), -10px -10px 22px var(--sh-l); }
.dark .sz.theme-soft { --bg: #23262c; --bg-2: #23262c; --card: #23262c; --text: #e6e9ef; --text-2: #9aa3b2; --glass: rgba(35, 38, 44, .88); --chip: #23262c; --sh-d: #191b1f; --sh-l: #2d3139; }
.theme-soft .blob, .theme-soft .hero__bg { display: none; }
.theme-soft .card { border: 0; box-shadow: var(--shadow); }
.theme-soft .chip { border: 0; box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l); }
.theme-soft .chip:active { box-shadow: inset 4px 4px 8px var(--sh-d), inset -4px -4px 8px var(--sh-l); }
.theme-soft .btn--ghost { background: var(--bg); box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); }
.theme-soft .btn--ghost:active { box-shadow: inset 4px 4px 10px var(--sh-d), inset -4px -4px 10px var(--sh-l); transform: none; }
.theme-soft .btn--primary { box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); }
.theme-soft .input { background: var(--bg); border: 0; box-shadow: inset 4px 4px 10px var(--sh-d), inset -4px -4px 10px var(--sh-l); }
.theme-soft .hero__avatar { border: 0; box-shadow: var(--shadow); }
.theme-soft .footer { border-top: 0; }

/* ---------- Prism ---------- */
.sz.theme-prism { --bg: #ffffff; --bg-2: #fafaff; --card: #ffffff; --text: #15121f; --text-2: #5d5875; --line: rgba(21, 18, 31, .08); --glass: rgba(255, 255, 255, .85); --chip: rgba(122, 92, 255, .06); --rainbow: linear-gradient(120deg, #ff5f6d, #ffc371, #47e5bc, #00c2ff, #7a5cff, #ff5f6d); }
.dark .sz.theme-prism { --bg: #0d0b14; --bg-2: #110e1a; --card: #15121f; --text: #f5f3ff; --text-2: #a8a2c4; --line: rgba(255, 255, 255, .08); --glass: rgba(13, 11, 20, .8); --chip: rgba(122, 92, 255, .1); }
.theme-prism .b1 { background: radial-gradient(circle, rgba(0, 194, 255, .4), transparent 65%); }
.theme-prism .b2 { background: radial-gradient(circle, rgba(255, 95, 109, .35), transparent 65%); }
.theme-prism .b3 { background: radial-gradient(circle, rgba(71, 229, 188, .3), transparent 65%); }
.theme-prism .display { background: var(--rainbow); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sz-prism 9s linear infinite; }
@keyframes sz-prism { to { background-position: 220% center; } }
.theme-prism .card { border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--rainbow) border-box; }
.theme-prism .chip { border: 1px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--rainbow) border-box; }
.theme-prism .btn--primary { background: linear-gradient(120deg, #7a5cff, #00c2ff); }
.theme-prism .kicker { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Cyber ---------- */
.sz.theme-cyber { --bg: #f4f4f0; --bg-2: #ebebe4; --card: #ffffff; --text: #0a0a0f; --text-2: #4a4a55; --line: rgba(10, 10, 15, .2); --glass: rgba(244, 244, 240, .9); --chip: transparent; --shadow: none; --cut: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); --font-display: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.dark .sz.theme-cyber { --bg: #0a0a0f; --bg-2: #0f0f16; --card: #12121b; --text: #f5f5f5; --text-2: #a0a0b0; --line: rgba(252, 238, 10, .3); --glass: rgba(10, 10, 15, .88); }
.theme-cyber .blob { display: none; }
.theme-cyber .hero__bg { background-image: linear-gradient(transparent 0 calc(100% - 6px), transparent), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 12px, transparent 12px 24px); -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000); mask-image: linear-gradient(90deg, transparent 55%, #000); }
.theme-cyber .display { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; text-shadow: 3px 0 #00f0ff, -3px 0 #ff2a6d; animation: sz-glitch 5s steps(1) infinite; }
@keyframes sz-glitch { 0%, 90%, 100% { transform: none; text-shadow: 3px 0 #00f0ff, -3px 0 #ff2a6d; } 92% { transform: translate(-3px, 1px) skewX(-6deg); text-shadow: -4px 0 #00f0ff, 4px 0 #ff2a6d; } 94% { transform: translate(3px, -1px); text-shadow: 5px 0 #00f0ff, -2px 0 #ff2a6d; } 96% { transform: none; } }
.theme-cyber .card, .theme-cyber .btn, .theme-cyber .hero__portrait img { clip-path: var(--cut); border-radius: 0; }
.theme-cyber .card { border: 1px solid var(--line); }
.theme-cyber .btn--primary { color: #0a0a0f !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
html:not(.dark) .theme-cyber .btn--primary { background: #0a0a0f; color: var(--accent) !important; }
.theme-cyber .kicker { display: inline-block; padding: 3px 10px; background: var(--accent); color: #0a0a0f; letter-spacing: .15em; }
.theme-cyber .chip { border-radius: 0; border-color: var(--line); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.theme-cyber .h2 { text-transform: uppercase; }

/* ---------- Desert ---------- */
.sz.theme-desert { --bg: #fbf3e8; --bg-2: #f6e8d6; --card: #fffaf3; --text: #3b2418; --text-2: #7e5a45; --line: rgba(120, 70, 40, .14); --glass: rgba(251, 243, 232, .85); --chip: rgba(200, 85, 61, .08); --dune1: #f2c18d; --dune2: #e9a46b; --sun: #ffb347; }
.dark .sz.theme-desert { --bg: #1d1410; --bg-2: #241913; --card: #2a1d16; --text: #fbe9d7; --text-2: #c9a487; --line: rgba(255, 200, 150, .12); --glass: rgba(29, 20, 16, .85); --chip: rgba(200, 85, 61, .14); --dune1: #3b2418; --dune2: #4a2e1e; --sun: #d9622b; }
.theme-desert .blob { display: none; }
.theme-desert .hero__bg { background: radial-gradient(circle at 78% 34%, var(--sun) 0 7vmax, transparent 7.2vmax), radial-gradient(120% 55% at 22% 112%, var(--dune1) 60%, transparent 61%), radial-gradient(110% 50% at 85% 118%, var(--dune2) 60%, transparent 61%), linear-gradient(180deg, color-mix(in srgb, var(--sun) 18%, var(--bg)), var(--bg) 70%); opacity: .9; }
.theme-desert.hero-split .hero__bg { background: radial-gradient(120% 55% at 22% 112%, var(--dune1) 60%, transparent 61%), radial-gradient(110% 50% at 85% 118%, var(--dune2) 60%, transparent 61%), linear-gradient(180deg, color-mix(in srgb, var(--sun) 18%, var(--bg)), var(--bg) 70%); }
.theme-desert .hero__portrait img { border-radius: 200px 200px 24px 24px; }
.theme-desert .card { border-color: var(--line); }
.theme-desert .kicker { color: var(--accent); }
.theme-desert .display { font-weight: 800; letter-spacing: -.04em; }

@media (prefers-reduced-motion: reduce) { .theme-prism .display, .theme-cyber .display { animation: none !important; } }

/* Preview bar stays readable on themes with a light accent colour */
.theme-cyber .preview-bar, .theme-noir .preview-bar, .theme-brutal .preview-bar, .theme-blueprint .preview-bar, .dark .theme-mono .preview-bar { color: #111; }
.theme-cyber .preview-bar a, .theme-noir .preview-bar a, .theme-brutal .preview-bar a, .theme-blueprint .preview-bar a, .dark .theme-mono .preview-bar a { color: #111 !important; }

/* ---------- Trailhead score card (own, 2026-10-26) ---------- */
.thcard { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.thcard__rank { display: flex; align-items: center; gap: 16px; }
.thcard__rank img { flex: none; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
.thcard__badge { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.thcard__label { display: block; color: var(--text-2); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.thcard__title { display: block; margin-top: 2px; font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -.015em; }
.thcard__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0; }
.thcard__stats > div { padding: 14px 12px; border-radius: var(--r-sm); background: var(--card); box-shadow: 0 0 0 1px var(--line); text-align: center; }
.thcard__stats dt { color: var(--text-2); font-size: .8rem; font-weight: 500; }
.thcard__stats dd { margin: 0 0 2px; color: var(--accent); font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.thcard__stats > div { display: flex; flex-direction: column; }
.thcard__stats dd { order: 1; }
.thcard__stats dt { order: 2; }
.thcard__progress-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--text-2); font-size: .88rem; }
.thcard__progress-row strong { color: var(--text); }
.thcard__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.thcard__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); transform-origin: left; }
.js-anim .thcard__bar span { transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.js-anim .reveal.is-in .thcard__bar span, .js-anim .thcard.is-in .thcard__bar span { transform: none; }
.thcard__link { align-self: flex-start; font-weight: 600; font-size: .95rem; }
.corners-square .thcard, .corners-square .thcard__stats > div { border-radius: var(--r-sm); }