/* Design variants (test build). Each design re-sets the tokens from site.css and adds a few signature rules.
   html[data-design] is set by design.js before first paint; html[data-shape="square"] squares every corner. */

/* ---------- the switcher itself: neutral, readable on any design ---------- */
.dz{position:relative;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.dz-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;border:1px solid rgba(127,127,127,.45);background:transparent;color:inherit;font:600 12.5px/1 system-ui,-apple-system,'Segoe UI',sans-serif;cursor:pointer;color:var(--ink)}
.dz-btn:hover{border-color:var(--acc)}
.dz-ic{width:14px;height:14px;border-radius:50%;background:conic-gradient(#E30613 0 25%,#FFD23F 0 50%,#2563EB 0 75%,#111 0)}
.dz-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:200;width:330px;max-height:min(78vh,640px);overflow:auto;background:#fff;color:#1a1a1a;border:1px solid #ddd;border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.28);padding:8px;text-align:left}
.dz-menu[hidden]{display:none}
.dz-hd{font-weight:700;font-size:13px;padding:6px 8px 8px;display:flex;justify-content:space-between;align-items:baseline}
.dz-hd small{font-weight:500;font-size:11px;color:#888}
.dz-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dz-menu li button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;color:#1a1a1a;text-align:left;cursor:pointer;font:inherit}
.dz-menu li button:hover,.dz-menu li button:focus-visible{background:#f2f2f2;outline:none}
.dz-menu li button[aria-pressed="true"]{background:#eef2ff;box-shadow:inset 3px 0 0 #2563EB}
.dz-sw{display:flex;flex:none}
.dz-sw i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);margin-left:-5px}
.dz-sw i:first-child{margin-left:0}
.dz-tx b{display:block;font-size:13px;font-weight:650}
.dz-tx small{display:block;font-size:11.5px;color:#777;line-height:1.3}
.dz-ft{font-size:11px;color:#888;padding:8px 8px 4px;border-top:1px solid #eee;margin-top:6px;line-height:1.4}
.dz-ft code{font-size:10.5px}
@media(max-width:900px){.dz-lb{display:none}.dz-btn{padding:0 10px}}
@media(max-width:520px){.dz-menu{position:fixed;left:12px;right:12px;top:64px;width:auto}}

/* ---------- shared helpers ---------- */
html[data-shape="square"] :is(.tile,.stat,.btn,.cta-mini,.inst div,.spec dl,ul.road li,.tags li,.chain li,.gh-link,.cal-payoff,.hs-tip,.cmp-list button,.cmp-list img,.cmp-tag,.badge,.cmp-mode,.cmp-mode button,.cmp-scale b,.contact-links a,.hd-for-grid div,.perf table,.cv-proj a,.rss,.log-media video,.log-media img,.cv-langs .btn){border-radius:0}

/* =========================================================== SWISS */
html[data-design="swiss"]{
  --bg:#FFFFFF;--ink:#111111;--mut:#3D3D3D;--soft:#6B6B6B;--panel:#F1F1F1;--line:#111111;
  --acc:#E30613;--accd:#B80510;--cta:#E30613;
  --p1:#111111;--p1b:#1C1C1C;--p1line:#3A3A3A;--p1ink:#FFFFFF;--p1mut:#BDBDBD;--ok:#00B060;--dev:#FF3B30;
  --card:#FFFFFF;--top-bg:#FFFFFF;--p1hi:#2A2A2A;--ng-grad:#F1F1F1;--p1-grad:#111111;
  --contact-mut:rgba(255,255,255,.88);--contact-eye:#FFFFFF;
  --hs-fill:rgba(227,6,19,.2);--hs-line:#E30613;--hs-dot:#E30613;
  --r:0px;--gap:14px;
  --disp:'Inter',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
}
html[data-design="swiss"] .top{border-bottom:2px solid #111}
html[data-design="swiss"] :is(h1,h2,h3){font-weight:800;letter-spacing:-.035em}
html[data-design="swiss"] h1{line-height:.95}
html[data-design="swiss"] .stat{background:#fff;border-top:6px solid #111}
html[data-design="swiss"] .stat:first-child{border-top-color:#E30613}
html[data-design="swiss"] .hero-tile{border:0;border-top:6px solid #E30613}
html[data-design="swiss"] :is(.eyebrow,.kicker,.pf-kind){letter-spacing:.08em;font-weight:800}
html[data-design="swiss"] .spec dl{border-width:2px}

/* =========================================================== MINIMAL */
html[data-design="minimal"]{
  --bg:#FFFFFF;--ink:#161616;--mut:#5C5C5C;--soft:#8A8A8A;--panel:#F6F6F4;--line:#E6E6E1;
  --acc:#161616;--accd:#000000;--cta:#161616;
  --p1:#F6F6F4;--p1b:#EEEEEA;--p1line:#E0E0DA;--p1ink:#161616;--p1mut:#5C5C5C;--ok:#2F9E6A;--dev:#161616;
  --card:#FFFFFF;--top-bg:rgba(255,255,255,.96);--p1hi:#E8E8E3;--ng-grad:#F6F6F4;--p1-grad:#F6F6F4;
  --contact-mut:#CFCFCF;--contact-eye:#9A9A9A;
  --hs-fill:rgba(0,0,0,.1);--hs-line:#161616;--hs-dot:#161616;
  --r:4px;--gap:26px;
  --disp:'Manrope',system-ui,sans-serif;--body:'Manrope',system-ui,sans-serif;
}
html[data-design="minimal"] :is(h1,h2,h3,h4){font-weight:500;letter-spacing:-.025em}
html[data-design="minimal"] .hero-tile{background:#fff;border:0}
html[data-design="minimal"] .stat{background:#fff;border-top:1px solid var(--line)}
html[data-design="minimal"] .top{border-bottom-color:transparent}
html[data-design="minimal"] :is(.eyebrow,.kicker,.pf-kind){font-weight:500;color:var(--soft)!important}
html[data-design="minimal"] .cmp-knob::before{border-right-color:#161616}
html[data-design="minimal"] .cmp-knob::after{border-left-color:#161616}

/* =========================================================== CORPORATE */
html[data-design="corporate"]{
  --bg:#F7F9FC;--ink:#0F1B2D;--mut:#4A5872;--soft:#6B7A93;--panel:#FFFFFF;--line:#E2E8F0;
  --acc:#2563EB;--accd:#1D4ED8;--cta:#2563EB;
  --p1:#0B1F44;--p1b:#10295A;--p1line:#1E3A70;--p1ink:#F1F5FF;--p1mut:#A9B8D6;--ok:#22C55E;--dev:#7FB2FF;
  --card:#F8FAFC;--top-bg:rgba(255,255,255,.95);--p1hi:#173A7A;
  --ng-grad:linear-gradient(135deg,#FFFFFF,#EEF4FF);--p1-grad:linear-gradient(135deg,#0B1F44,#123173);
  --contact-mut:#DCE7FF;--contact-eye:#BFD4FF;
  --hs-fill:rgba(37,99,235,.2);--hs-line:#2563EB;--hs-dot:#2563EB;
  --r:12px;
  --disp:'IBM Plex Sans',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;
}
html[data-design="corporate"] :is(.tile,.stat){box-shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.07)}
html[data-design="corporate"] :is(.right .ng,.stat,.pf:not(.dark)){border:1px solid var(--line)}
html[data-design="corporate"] :is(h1,h2,h3){font-weight:600;letter-spacing:-.015em}
html[data-design="corporate"] :is(.btn,.cta-mini){border-radius:8px}

/* =========================================================== EDITORIAL */
html[data-design="editorial"]{
  --bg:#F7F3EC;--ink:#1B1B1B;--mut:#4A4640;--soft:#7A746B;--panel:#EFE9DE;--line:#D8CFBF;
  --acc:#9E1B1B;--accd:#7A1414;--cta:#1B1B1B;
  --p1:#1F1D1A;--p1b:#2A2723;--p1line:#3A362F;--p1ink:#F3EEE4;--p1mut:#BDB5A6;--ok:#6BBF8A;--dev:#E0A458;
  --card:#FBF8F2;--top-bg:rgba(247,243,236,.96);--p1hi:#34302A;--ng-grad:#EFE9DE;--p1-grad:#1F1D1A;
  --contact-mut:#E2DACB;--contact-eye:#E0A458;
  --hs-fill:rgba(158,27,27,.2);--hs-line:#9E1B1B;--hs-dot:#9E1B1B;
  --r:0px;--gap:20px;
  --disp:'Playfair Display',Georgia,serif;--body:'PT Serif',Georgia,serif;
}
html[data-design="editorial"] body{font-size:16.5px}
html[data-design="editorial"] .top{border-bottom:3px double var(--ink)}
html[data-design="editorial"] :is(h1,h2){font-weight:800;letter-spacing:-.01em}
html[data-design="editorial"] .tagline{font-style:italic}
html[data-design="editorial"] :is(.head,.pf-head,.hero-tile){border-top:2px solid var(--ink)}
html[data-design="editorial"] .hero-tile{border-left:0;border-right:0;border-bottom:1px solid var(--line);background:transparent}
html[data-design="editorial"] :is(.eyebrow,.kicker,.pf-kind,.stat .l){font-family:var(--body);font-weight:700;letter-spacing:.22em}
html[data-design="editorial"] .stat{background:transparent;border-top:1px solid var(--ink)}
html[data-design="editorial"] .media figcaption{font-style:italic}

/* =========================================================== DARK MODE */
html[data-design="dark"]{
  --bg:#0D0F14;--ink:#E7E9EE;--mut:#A3A9B6;--soft:#7D8492;--panel:#161A22;--line:#262C38;
  --acc:#7AA2FF;--accd:#9DBBFF;--cta:#3B6FF5;
  --p1:#12151C;--p1b:#1A1F29;--p1line:#2A3140;--p1ink:#E7E9EE;--p1mut:#9AA1AE;--ok:#3DD68C;--dev:#8FB0FF;
  --card:#1C212B;--top-bg:rgba(13,15,20,.9);--p1hi:#222A3A;
  --ng-grad:linear-gradient(135deg,#161A22,#1B2130);--p1-grad:linear-gradient(135deg,#12151C,#1A1F2B);
  --contact-mut:#DCE6FF;--contact-eye:#C7D6FF;
  --hs-fill:rgba(122,162,255,.25);--hs-line:#7AA2FF;--hs-dot:#3B6FF5;
  --r:14px;
  --disp:'Onest',system-ui,sans-serif;--body:'Onest',system-ui,sans-serif;
  color-scheme:dark;
}
html[data-design="dark"] .right .media.render img{background:#F2F3F6}
html[data-design="dark"] :is(.right .ng,.stat,.hero-tile){border:1px solid var(--line)}

/* =========================================================== DASHBOARD / BLUEPRINT */
html[data-design="dashboard"]{
  --bg:#0B1220;--ink:#DCE6F5;--mut:#9AAAC3;--soft:#6F80A0;--panel:#101A2C;--line:#22324F;
  --acc:#4FD1FF;--accd:#8BE2FF;--cta:#1F8FFF;
  --p1:#0E1728;--p1b:#132038;--p1line:#22324F;--p1ink:#DCE6F5;--p1mut:#93A4C0;--ok:#3DDC97;--dev:#4FD1FF;
  --card:#14213A;--top-bg:rgba(11,18,32,.92);--p1hi:#1A2B4A;--ng-grad:#101A2C;--p1-grad:#0E1728;
  --contact-mut:#E0EEFF;--contact-eye:#CDE6FF;
  --hs-fill:rgba(79,209,255,.2);--hs-line:#4FD1FF;--hs-dot:#1F8FFF;
  --r:6px;--gap:14px;
  --disp:'JetBrains Mono',ui-monospace,monospace;--body:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}
html[data-design="dashboard"] body{background-image:linear-gradient(rgba(80,140,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(80,140,255,.07) 1px,transparent 1px);background-size:24px 24px}
html[data-design="dashboard"] :is(.tile,.stat){border:1px solid var(--line)}
html[data-design="dashboard"] :is(h1,h2){letter-spacing:-.03em}
html[data-design="dashboard"] :is(.eyebrow,.kicker,.pf-kind)::before{content:"// ";opacity:.6}
html[data-design="dashboard"] :is(.media figcaption,.stat .l,.spec dd,.tags li,.cal-stats td){font-family:'JetBrains Mono',ui-monospace,monospace}
html[data-design="dashboard"] .media figcaption{font-size:12px}
html[data-design="dashboard"] .stat .n{color:var(--acc)}
html[data-design="dashboard"] .right .media.render img{background:#E9EEF6}

/* =========================================================== MONOCHROME */
html[data-design="mono"]{
  --bg:#F2F7F7;--ink:#0B2E33;--mut:#2F5A60;--soft:#5C8186;--panel:#E3EEEF;--line:#C5DADC;
  --acc:#0E6E78;--accd:#0A4F57;--cta:#0E6E78;
  --p1:#0B2E33;--p1b:#0F3B41;--p1line:#1B4D54;--p1ink:#E6F3F4;--p1mut:#9CC2C6;--ok:#7FD3DB;--dev:#7FD3DB;
  --card:#F7FBFB;--top-bg:rgba(242,247,247,.94);--p1hi:#164A51;
  --ng-grad:linear-gradient(135deg,#E3EEEF,#D2E5E7);--p1-grad:linear-gradient(135deg,#0B2E33,#124249);
  --contact-mut:#D3ECEE;--contact-eye:#A8DDE2;
  --hs-fill:rgba(14,110,120,.25);--hs-line:#0E6E78;--hs-dot:#0E6E78;
  --r:12px;
  --disp:'Raleway',system-ui,sans-serif;--body:'Golos Text',system-ui,sans-serif;
}
html[data-design="mono"] :is(h1,h2,h3){font-weight:800}
html[data-design="mono"] :is(.media img,.media video,.pf-media img,.pf-media video,.hero-media video,.hero-media img){filter:grayscale(1) sepia(.35) hue-rotate(130deg) saturate(1.3);transition:filter .3s}
html[data-design="mono"] :is(.media,.pf-media,.hero-media):hover :is(img,video){filter:none}

/* =========================================================== GLASSMORPHISM */
html[data-design="glass"]{
  --bg:#0E1030;--ink:#F4F5FF;--mut:rgba(235,238,255,.8);--soft:rgba(225,230,255,.64);--panel:rgba(255,255,255,.08);--line:rgba(255,255,255,.2);
  --acc:#8FD3FF;--accd:#B9E4FF;--cta:#7B6CFF;
  --p1:rgba(8,10,36,.42);--p1b:rgba(255,255,255,.06);--p1line:rgba(255,255,255,.16);--p1ink:#F4F5FF;--p1mut:rgba(225,230,255,.74);--ok:#5CF2B0;--dev:#C9BEFF;
  --card:rgba(255,255,255,.1);--top-bg:rgba(20,22,60,.45);--p1hi:rgba(255,255,255,.14);
  --ng-grad:rgba(255,255,255,.1);--p1-grad:rgba(8,10,36,.42);
  --contact-mut:#ECEBFF;--contact-eye:#D9D4FF;
  --hs-fill:rgba(143,211,255,.25);--hs-line:#8FD3FF;--hs-dot:#7B6CFF;
  --r:22px;
  --disp:'Montserrat',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}
html[data-design="glass"] body{background:radial-gradient(at 12% 8%,#6D5BFF 0,transparent 42%),radial-gradient(at 88% 28%,#00A8E8 0,transparent 40%),radial-gradient(at 40% 70%,#C2418F 0,transparent 42%),radial-gradient(at 90% 95%,#3A2BB8 0,transparent 40%),#0E1030;background-attachment:fixed}
html[data-design="glass"] :is(.tile,.stat){backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.25)}
html[data-design="glass"] .contact{background:rgba(123,108,255,.55)}
html[data-design="glass"] .right .media.render img{background:rgba(255,255,255,.92)}
html[data-design="glass"] .dz-btn{color:#fff}

/* =========================================================== NEUMORPHISM */
html[data-design="neumorph"]{
  --bg:#E4E8EE;--ink:#2D3446;--mut:#5A6378;--soft:#7C8598;--panel:#E4E8EE;--line:#D3D9E2;
  --acc:#5B6CFF;--accd:#3F4FE0;--cta:#5B6CFF;
  --p1:#E4E8EE;--p1b:#DDE2E9;--p1line:#CDD4DE;--p1ink:#2D3446;--p1mut:#5A6378;--ok:#2BB673;--dev:#5B6CFF;
  --card:#E4E8EE;--top-bg:rgba(228,232,238,.94);--p1hi:#D8DDE5;--ng-grad:#E4E8EE;--p1-grad:#E4E8EE;
  --contact-mut:#E6E9FF;--contact-eye:#D2D7FF;
  --hs-fill:rgba(91,108,255,.22);--hs-line:#5B6CFF;--hs-dot:#5B6CFF;
  --r:24px;--gap:26px;
  --disp:'Comfortaa',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;
}
html[data-design="neumorph"] :is(.tile,.stat){box-shadow:9px 9px 18px #C3C9D3,-9px -9px 18px #FFFFFF}
html[data-design="neumorph"] .hero-tile{border-color:transparent}
html[data-design="neumorph"] .top{border-bottom-color:transparent;box-shadow:0 6px 14px rgba(163,172,186,.35)}
html[data-design="neumorph"] :is(.inst div,ul.road li,.tags li,.chain li,.gh-link,.cal-payoff,.cmp-list button,.hd-for-grid div,.cv-proj a,.rss){border-color:transparent;box-shadow:inset 3px 3px 6px #C8CED8,inset -3px -3px 6px #FFFFFF}
html[data-design="neumorph"] .spec dl{gap:0;background:transparent;border:0;box-shadow:inset 4px 4px 8px #C8CED8,inset -4px -4px 8px #FFFFFF}
html[data-design="neumorph"] .spec dl div{background:transparent}
html[data-design="neumorph"] .btn.ghost{border-color:transparent;box-shadow:5px 5px 10px #C3C9D3,-5px -5px 10px #FFFFFF}
html[data-design="neumorph"] :is(.btn.primary,.cta-mini){box-shadow:5px 5px 12px #B9BFD9,-5px -5px 12px #FFFFFF}
html[data-design="neumorph"] :is(h1,h2,h3){font-weight:700}

/* =========================================================== NEO BRUTALISM */
html[data-design="neubrutal"]{
  --bg:#FFF5E1;--ink:#111111;--mut:#2B2B2B;--soft:#4A4A4A;--panel:#FFFFFF;--line:#111111;
  --acc:#4D7CFE;--accd:#1F4FE0;--cta:#FFD23F;
  --p1:#4D7CFE;--p1b:#3A66E6;--p1line:#111111;--p1ink:#FFFFFF;--p1mut:#EEF2FF;--ok:#3DDC97;--dev:#FFD23F;
  --card:#FFFFFF;--top-bg:#FFF5E1;--p1hi:#2F5BE0;--ng-grad:#FFD23F;--p1-grad:#4D7CFE;
  --contact-mut:#222222;--contact-eye:#111111;
  --hs-fill:rgba(255,107,154,.35);--hs-line:#111111;--hs-dot:#FF6B9A;
  --r:10px;
  --disp:'Rubik',system-ui,sans-serif;--body:'Rubik',system-ui,sans-serif;
}
html:is([data-design="neubrutal"],[data-design="litho"]) :is(h1,h2){font-weight:900;letter-spacing:-.02em}
html:is([data-design="neubrutal"],[data-design="litho"]) h3{font-weight:800}
html:is([data-design="neubrutal"],[data-design="litho"]) .top{border-bottom:3px solid #111}
html:is([data-design="neubrutal"],[data-design="litho"]) :is(.tile,.stat){border:3px solid #111;box-shadow:6px 6px 0 #111}
html:is([data-design="neubrutal"],[data-design="litho"]) :is(.btn,.cta-mini,.gh-link,.contact-links a,.cmp-list button){border:2px solid #111;box-shadow:3px 3px 0 #111;color:#111}
html:is([data-design="neubrutal"],[data-design="litho"]) :is(.btn,.cta-mini,.gh-link,.contact-links a):hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #111}
html:is([data-design="neubrutal"],[data-design="litho"]) .btn.ghost{background:#fff}
html:is([data-design="neubrutal"],[data-design="litho"]) :is(.inst div,ul.road li,.tags li,.chain li,.cal-payoff,.hs-tip,.hd-for-grid div,.cv-proj a,.rss){border:2px solid #111}
html[data-design="neubrutal"] .stat:nth-child(2){background:#FF6B9A}
html[data-design="neubrutal"] .stat:nth-child(3){background:#3DDC97}
html[data-design="neubrutal"] .stat:nth-child(4){background:#FFD23F}
html[data-design="neubrutal"] .stat .l{color:#111}
html[data-design="neubrutal"] .contact{color:#111}
html:is([data-design="neubrutal"],[data-design="litho"]) .contact-links a{background:#fff}
html:is([data-design="neubrutal"],[data-design="litho"]) .cmp-list button{color:#fff}
html:is([data-design="neubrutal"],[data-design="litho"]) .right .ng .eyebrow,html:is([data-design="neubrutal"],[data-design="litho"]) .pf-head .eyebrow{color:#111}

/* =========================================================== NEO BRUTALISM · EXPOSURE
   The colours of an exposure job: blue exposes (440 nm), red is the resist-safe autofocus light,
   violet is the layout, green marks exposed fields. Structure is shared with Neo Brutalism above. */
html[data-design="litho"]{
  --bg:#F7F5FF;--ink:#111111;--mut:#2B2B2B;--soft:#4A4A4A;--panel:#FFFFFF;--line:#111111;
  --acc:#3355FF;--accd:#1F3AC4;--cta:#8A3FFC;
  --p1:#3355FF;--p1b:#2A47E0;--p1line:#111111;--p1ink:#FFFFFF;--p1mut:#E8ECFF;--ok:#3DD68C;--dev:#9CFFCB;
  --card:#FFFFFF;--top-bg:#F7F5FF;--p1hi:#1F3AC4;--ng-grad:#CBB8FF;--p1-grad:#3355FF;
  --contact-mut:#F1E9FF;--contact-eye:#FFFFFF;
  --hs-fill:rgba(138,63,252,.3);--hs-line:#111111;--hs-dot:#FF4D5E;
  --r:10px;
  --disp:'Rubik',system-ui,sans-serif;--body:'Rubik',system-ui,sans-serif;
}
html[data-design="litho"] :is(.btn.primary,.cta-mini){color:#fff}
html[data-design="litho"] .stat{color:#fff}
html[data-design="litho"] .stat:nth-child(1){background:#8A3FFC}
html[data-design="litho"] .stat:nth-child(2){background:#3DD68C;color:#111}
html[data-design="litho"] .stat:nth-child(3){background:#3355FF}
html[data-design="litho"] .stat:nth-child(4){background:#FF4D5E}
html[data-design="litho"] .stat .l{color:inherit;opacity:.85}
html[data-design="litho"] .cmp-list button[aria-pressed="true"]{box-shadow:inset 4px 0 0 #FF4D5E,3px 3px 0 #111}
html[data-design="litho"] .cal-stats td:nth-child(3){color:#9CFFCB}
html[data-design="litho"] ul.marks li::before{height:3px}
html[data-design="litho"] .left .p1 ul.marks li::before{background:#9CFFCB}

/* =========================================================== BAUHAUS */
html[data-design="bauhaus"]{
  --bg:#F2EBDD;--ink:#111111;--mut:#333333;--soft:#555555;--panel:#FFFFFF;--line:#111111;
  --acc:#D7263D;--accd:#A81B2E;--cta:#1D4E9E;
  --p1:#111111;--p1b:#1D1D1D;--p1line:#333333;--p1ink:#F2EBDD;--p1mut:#C9C1B0;--ok:#F2C12E;--dev:#F2C12E;
  --card:#FFFFFF;--top-bg:#F2EBDD;--p1hi:#2A2A2A;--ng-grad:#F2C12E;--p1-grad:#111111;
  --contact-mut:#DCE6F7;--contact-eye:#F2C12E;
  --hs-fill:rgba(215,38,61,.25);--hs-line:#D7263D;--hs-dot:#D7263D;
  --r:0px;
  --disp:'Jost',system-ui,sans-serif;--body:'Jost',system-ui,sans-serif;
}
html[data-design="bauhaus"] body{font-size:16px}
html[data-design="bauhaus"] .top{border-bottom:4px solid #111}
html[data-design="bauhaus"] :is(h1,h2){text-transform:uppercase;font-weight:700;letter-spacing:.01em}
html[data-design="bauhaus"] :is(.eyebrow,.kicker)::before{content:"";display:inline-block;width:.85em;height:.85em;border-radius:50%;background:#D7263D;margin-right:.55em;vertical-align:-1px}
html[data-design="bauhaus"] .tile{border:3px solid #111}
html[data-design="bauhaus"] .stat{border:3px solid #111;color:#fff}
html[data-design="bauhaus"] .stat:nth-child(1){background:#D7263D}
html[data-design="bauhaus"] .stat:nth-child(2){background:#1D4E9E}
html[data-design="bauhaus"] .stat:nth-child(3){background:#F2C12E;color:#111}
html[data-design="bauhaus"] .stat:nth-child(4){background:#111}
html[data-design="bauhaus"] .stat .l{color:inherit;opacity:.85}
html[data-design="bauhaus"] .right .ng .eyebrow,html[data-design="bauhaus"] .pf-head .eyebrow{color:#111}

/* =========================================================== RETRO-FUTURISM */
html[data-design="retrofuture"]{
  --bg:#F4EAD5;--ink:#2B1D14;--mut:#5C4636;--soft:#85705E;--panel:#FBF3E2;--line:#E2CFAE;
  --acc:#E4572E;--accd:#B8401D;--cta:#E4572E;
  --p1:#1F3B4D;--p1b:#284A5F;--p1line:#36607A;--p1ink:#F7EBD3;--p1mut:#C9D6CF;--ok:#9BC53D;--dev:#F2A541;
  --card:#FFF9EC;--top-bg:rgba(244,234,213,.95);--p1hi:#2E5672;
  --ng-grad:linear-gradient(135deg,#FBF3E2,#F6DFB8);--p1-grad:linear-gradient(135deg,#1F3B4D,#2C5470);
  --contact-mut:#FFE8D9;--contact-eye:#FFD7A8;
  --hs-fill:rgba(228,87,46,.25);--hs-line:#E4572E;--hs-dot:#E4572E;
  --r:26px;
  --disp:'Unbounded',system-ui,sans-serif;--body:'Manrope',system-ui,sans-serif;
}
html[data-design="retrofuture"] .top{border-bottom:0;box-shadow:0 4px 0 #E4572E,0 8px 0 #F2A541,0 12px 0 #1F3B4D}
html[data-design="retrofuture"] :is(h1,h2,h3){font-weight:600;letter-spacing:-.02em}
html[data-design="retrofuture"] :is(.btn,.cta-mini,.contact-links a){border-radius:999px}
html[data-design="retrofuture"] .hero-tile{border:0}
html[data-design="retrofuture"] .stat{background:#FBF3E2;border-bottom:6px solid #F2A541}
html[data-design="retrofuture"] .stat:nth-child(2n){border-bottom-color:#E4572E}

/* =========================================================== ART DECO */
html[data-design="artdeco"]{
  --bg:#0E1116;--ink:#F1E9D6;--mut:#C8BFA8;--soft:#A39A84;--panel:#151A22;--line:#3A3326;
  --acc:#C9A55C;--accd:#E2C27D;--cta:#C9A55C;
  --p1:#0B0D11;--p1b:#12161D;--p1line:#3A3326;--p1ink:#F1E9D6;--p1mut:#B8AF98;--ok:#8FBF8F;--dev:#C9A55C;
  --card:#1A2029;--top-bg:rgba(14,17,22,.93);--p1hi:#1E242E;
  --ng-grad:linear-gradient(135deg,#151A22,#1C222C);--p1-grad:linear-gradient(135deg,#0B0D11,#151922);
  --contact-mut:#2B2618;--contact-eye:#0E1116;
  --hs-fill:rgba(201,165,92,.25);--hs-line:#C9A55C;--hs-dot:#C9A55C;
  --r:0px;
  --disp:'Poiret One',Georgia,serif;--body:'Montserrat',system-ui,sans-serif;
  color-scheme:dark;
}
html[data-design="artdeco"] body{font-size:15px}
html[data-design="artdeco"] :is(h1,h2){font-weight:400;text-transform:uppercase;letter-spacing:.07em}
html[data-design="artdeco"] :is(h3,h4){font-family:'Montserrat',system-ui,sans-serif;font-weight:600;letter-spacing:.04em}
html[data-design="artdeco"] :is(.eyebrow,.kicker,.pf-kind){font-family:'Montserrat',system-ui,sans-serif;color:#C9A55C!important;letter-spacing:.35em}
html[data-design="artdeco"] :is(.tile,.stat){border:1px solid rgba(201,165,92,.45)}
html[data-design="artdeco"] :is(.head,.pf-head,.hero-tile){border-top:4px double #C9A55C}
html[data-design="artdeco"] .stat .n{font-family:'Poiret One',Georgia,serif;color:#C9A55C}
html[data-design="artdeco"] :is(.btn.primary,.cta-mini){color:#0E1116}
html[data-design="artdeco"] .contact{color:#0E1116}
html[data-design="artdeco"] .contact .eyebrow{color:#0E1116!important}
html[data-design="artdeco"] .contact h2{font-family:'Montserrat',system-ui,sans-serif;font-weight:600;letter-spacing:.04em}
html[data-design="artdeco"] .contact-links a{color:#0E1116;border-color:rgba(14,17,22,.45)}
html[data-design="artdeco"] .contact-links a:hover{border-color:#0E1116}
html[data-design="artdeco"] .right .media.render img{background:#ECE6D8}

/* =========================================================== CYBERPUNK */
html[data-design="cyberpunk"]{
  --bg:#07060B;--ink:#E9F7FF;--mut:#9FB7C8;--soft:#6F8798;--panel:#0E0C16;--line:#2A1F3D;
  --acc:#00F0FF;--accd:#5CF6FF;--cta:#FF2BD6;
  --p1:#0B0A12;--p1b:#12101C;--p1line:#2E1F45;--p1ink:#E9F7FF;--p1mut:#9FB7C8;--ok:#39FF88;--dev:#FF2BD6;
  --card:#120F1E;--top-bg:rgba(7,6,11,.9);--p1hi:#21143A;
  --ng-grad:linear-gradient(135deg,#0E0C16,#1A0F2A);--p1-grad:linear-gradient(135deg,#0B0A12,#160B22);
  --contact-mut:#FFE3F8;--contact-eye:#FFFFFF;
  --hs-fill:rgba(0,240,255,.2);--hs-line:#00F0FF;--hs-dot:#FF2BD6;
  --r:0px;
  --disp:'Russo One',system-ui,sans-serif;--body:'Exo 2',system-ui,sans-serif;
  color-scheme:dark;
}
html[data-design="cyberpunk"] body{background-image:repeating-linear-gradient(0deg,rgba(0,240,255,.035) 0 1px,transparent 1px 4px)}
html[data-design="cyberpunk"] :is(h1,h2,h3,h4){font-weight:400;letter-spacing:.02em}
html[data-design="cyberpunk"] h1{text-shadow:0 0 18px rgba(0,240,255,.55),2px 0 0 rgba(255,43,214,.6)}
html[data-design="cyberpunk"] :is(.tile,.stat){clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:inset 0 0 0 1px rgba(0,240,255,.22)}
html[data-design="cyberpunk"] .hero-tile{border-color:rgba(0,240,255,.35)}
html[data-design="cyberpunk"] .top{border-bottom:1px solid #FF2BD6;box-shadow:0 0 18px rgba(255,43,214,.35)}
html[data-design="cyberpunk"] :is(.btn.primary,.cta-mini){box-shadow:0 0 18px rgba(255,43,214,.6)}
html[data-design="cyberpunk"] .stat .n{color:#00F0FF;text-shadow:0 0 12px rgba(0,240,255,.5)}
html[data-design="cyberpunk"] .right .media.render img{background:#DDE3EA}

/* =========================================================== SEM (experimental, v2)
   The page as a secondary-electron micrograph: a near-black grainy field with faint scan lines; flat dark
   surfaces; what makes the image is the edge effect — every raised feature has a thin, blooming bright rim,
   etched features are black wells whose sidewalls glow inward. No cast shadows, no soft gradients. */
html[data-design="sem"]{
  --bg:#0B0B0B;--ink:#EDEDED;--mut:#BDBDBD;--soft:#9A9A9A;--panel:#232323;--line:rgba(255,255,255,.28);
  --acc:#FF3B30;--accd:#FF5A50;--cta:#FF3B30;
  --p1:#070707;--p1b:#070707;--p1line:rgba(255,255,255,.22);--p1ink:#EDEDED;--p1mut:#B5B5B5;--ok:#FFFFFF;--dev:#FF3B30;
  --card:#161616;--top-bg:rgba(10,10,10,.9);--p1hi:#1A1A1A;--ng-grad:#232323;--p1-grad:#070707;
  --contact-mut:#C4C4C4;--contact-eye:#FFFFFF;
  --hs-fill:rgba(255,59,48,.22);--hs-line:#FF3B30;--hs-dot:#FF3B30;
  --r:5px;--gap:18px;
  --disp:'IBM Plex Mono',ui-monospace,monospace;--body:'IBM Plex Sans',system-ui,sans-serif;
  --sem-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sem-edge:inset 0 0 0 1px rgba(255,255,255,.92),inset 0 0 7px 1px rgba(255,255,255,.3),0 0 10px rgba(255,255,255,.32);
  --sem-well:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 18px 2px rgba(255,255,255,.26);
  --sem-fine:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 5px rgba(255,255,255,.18);
  color-scheme:dark;
}
html[data-design="sem"] body{color:var(--ink);background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),var(--sem-noise),#0B0B0B;background-blend-mode:normal,soft-light,normal}
/* raised features: flat dark surface, bright blooming rim */
html[data-design="sem"] .tile,html[data-design="sem"] .stat{position:relative;color:var(--ink);background:#222;border:0;box-shadow:var(--sem-edge)}
html[data-design="sem"] .stat{box-shadow:var(--sem-edge),inset 0 4px 0 var(--acc)}
/* etched features: black well, sidewalls glowing inward */
html[data-design="sem"] :is(.left .tile,.tile.p1,.pf.dark,.cmp-tile,.cv-key){background:#060606;box-shadow:var(--sem-well);color:var(--p1ink)}
html[data-design="sem"] :is(.tile,.stat)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sem-noise);opacity:.14;mix-blend-mode:screen;pointer-events:none}
/* fine features inside a surface */
html[data-design="sem"] :is(.inst div,ul.road li,.tags li,.chain li,.gh-link,.cal-payoff,.hd-for-grid div,.cv-proj a,.rss,.btn.ghost,.toc a,.contact-links a,.cmp-list button,.path){background:#141414;border-color:transparent;box-shadow:var(--sem-fine);color:var(--ink)}
html[data-design="sem"] .cmp-list button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px #fff,0 0 12px rgba(255,255,255,.45)}
html[data-design="sem"] .spec dl{gap:0;background:transparent;border:0;box-shadow:var(--sem-fine)}
html[data-design="sem"] .spec dl div{background:transparent;border-bottom:1px solid rgba(255,255,255,.12)}
html[data-design="sem"] .hs-tip{background:#111;border:0;color:var(--mut);box-shadow:var(--sem-edge)}
/* bright = charging: the one thing that glows solid */
html[data-design="sem"] :is(.btn.primary,.cta-mini){color:#fff;background:var(--acc);box-shadow:0 0 0 1px #FF7A70,0 0 16px rgba(255,59,48,.55)}
html[data-design="sem"] :is(.btn.primary,.cta-mini):hover{background:#FF5045;box-shadow:0 0 0 1px #FFA39C,0 0 24px rgba(255,59,48,.8)}
html[data-design="sem"] .top{border-bottom:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.75),0 1px 10px rgba(255,255,255,.18)}
html[data-design="sem"] .contact{color:#fff}
html[data-design="sem"] .contact-links a:hover,html[data-design="sem"] .path:hover,html[data-design="sem"] .toc a:hover{box-shadow:inset 0 0 0 1px #fff,0 0 12px rgba(255,255,255,.5)}
html[data-design="sem"] .dz-btn{color:#EDEDED;border-color:rgba(255,255,255,.5)}
html[data-design="sem"] .hs-dot{stroke:#fff;filter:drop-shadow(0 0 5px rgba(255,59,48,.9))}
html[data-design="sem"] .dot.ok{box-shadow:0 0 8px #fff}
html[data-design="sem"] .dot.dev{background:transparent;box-shadow:inset 0 0 0 1.5px #D8D8D8}
/* typography: instrument labels */
html[data-design="sem"] :is(h1,h2){font-weight:500;letter-spacing:-.03em;text-shadow:0 0 14px rgba(255,255,255,.25)}
html[data-design="sem"] :is(h3,h4){font-family:var(--body);font-weight:600}
html[data-design="sem"] :is(.eyebrow,.kicker,.pf-kind,.stat .l){font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500}
html[data-design="sem"] .stat .l{color:var(--soft)}
html[data-design="sem"] :is(.eyebrow,.kicker,.pf-kind){color:var(--acc)!important}
html[data-design="sem"] .top nav a[aria-current]{color:#fff;box-shadow:0 2px 0 var(--acc)}
html[data-design="sem"] .stat .n{font-weight:500}
html[data-design="sem"] .hero-text h1::after{content:"10 µm";display:block;width:116px;margin-top:16px;padding-top:5px;border-top:5px solid #fff;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-align:center;color:#fff;text-shadow:none;box-shadow:0 -4px 10px -4px rgba(255,255,255,.6)}
html[data-design="sem"] .toc b{color:var(--soft)}
/* footer: the micrograph's data bar */
html[data-design="sem"] .foot{color:var(--soft);border-top-color:rgba(255,255,255,.18)}
html[data-design="sem"] .foot::before{content:"HV 5.00 kV   WD 4.9 mm   det SE   mag 5 000 ×   HFW 25.4 µm   tilt 0°   iliasidorov.com";display:block;margin-bottom:24px;padding:8px 12px;font:500 12px/1.3 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#E6E6E6;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);white-space:pre;overflow:hidden;text-overflow:ellipsis}
html[data-design="sem"] .foot-nav b{color:#EDEDED}
html[data-design="sem"] .foot-nav a{color:var(--soft)}
html[data-design="sem"] .foot-nav a:hover{color:#fff}
html[data-design="sem"] .foot-c{color:#7E7E7E}