/* ZEROPINK — zeropink.net
   One stylesheet: self-hosted fonts, identity tokens, resets, interaction states.
   All layout lives in inline styles on the pages themselves. */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hk-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hk-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hk-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hk-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hk-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hk-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hk-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hk-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hk-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ZEROPINK Audio Tools — identity tokens.
   Extracted verbatim from the shipped product embeds (VU Meter, Spectrum,
   Loudness, Contour). Dark skin is the default; both skins re-theme via
   [data-skin]. Pink is light, not paint: needles, traces, indicator glow. */

:root{
  /* pink ramp — #D4537E is the brand core ("PINK" in the wordmark) */
  --pz-pink-050:#FCEAF0;
  --pz-pink-100:#F4C0D1;
  --pz-pink-300:#ED93B1;
  --pz-pink-500:#D4537E;
  --pz-pink-600:#B5436A;
  --pz-pink-700:#9E3A5C;
  --pz-pink-800:#8E3151;
  --pz-pink-900:#5E223A;

  /* chassis depths (skin-independent) */
  --pz-black:#040506;
  --pz-edge:#0E0F10;
  --pz-panel:#1E2022;

  /* type */
  --pz-font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* default = dark */
:root, [data-skin="dark"]{
  --surface:linear-gradient(180deg,#3C3F43,#26282B);
  --surface-edge:#0E0F10;
  --surface-sh:0 1px 0 #44474A inset,0 -2px 8px rgba(0,0,0,0.55) inset;
  --surface-raised:linear-gradient(180deg,#34373B,#23252A);
  --divider:#202225;
  --text-primary:#E8E4D7;
  --text-secondary:#B8B4A6;
  --text-mute:#8A887E;
  --pill:#1b1d21;
  --pill-edge:#101215;
}

[data-skin="light"]{
  --surface:linear-gradient(180deg,#F1EEE7,#E2DED4);
  --surface-edge:#9C988C;
  --surface-sh:0 1px 0 #FBF8F1 inset,0 -2px 8px rgba(0,0,0,0.10) inset;
  --surface-raised:linear-gradient(180deg,#FBF8F1,#E7E3D9);
  --divider:#CFCBBF;
  --text-primary:#1C1D1B;
  --text-secondary:#3A392F;
  --text-mute:#76746A;
  --pill:#D7D2C6;
  --pill-edge:#BCB7AA;
}

::selection{background:var(--pz-pink-500);color:#fff}

/* resets */
html,body{margin:0;padding:0;background:#040506;color:#E8E4D7;font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:#ED93B1;text-decoration:none}
a:hover{color:#F4C0D1}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #D4537E;outline-offset:2px}
button{font-family:inherit}
input,textarea{font-family:inherit}
input:focus,textarea:focus{border-color:#D4537E !important}
input[type=checkbox]{accent-color:#D4537E}
::selection{background:#D4537E;color:#fff}

/* interaction states lifted out of the markup */
.x1:hover{color:#ED93B1 !important}
.x2:hover{color:#ED93B1 !important}
.x3:hover{color:#ED93B1 !important}
.x4:hover{color:#ED93B1 !important}
.x5:hover{color:#ED93B1 !important}
.x6:hover{background:#D4537E !important;color:#fff !important}
.x7:hover{background:#ED93B1 !important}
.x8:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x9:hover{color:#ED93B1 !important}
.x10:hover{color:#ED93B1 !important}
.x11:hover{color:#ED93B1 !important}
.x12:hover{color:#ED93B1 !important}
.x13:hover{background:#ED93B1 !important}
.x14:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x15:hover{background:#ED93B1 !important}
.x16:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x17:hover{color:#ED93B1 !important}
.x18:hover{color:#ED93B1 !important}
.x19:hover{color:#ED93B1 !important}
.x20:hover{color:#ED93B1 !important}
.x21:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x22:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x23:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x24:hover{border-color:#D4537E !important;color:#ED93B1 !important}
.x25:hover{color:#ED93B1 !important}
.x26:hover{color:#ED93B1 !important}
.x27:hover{color:#ED93B1 !important}
.x28:hover{color:#ED93B1 !important}
.x29:hover{background:#D4537E !important;color:#fff !important}
.x30:hover{background:#D4537E !important;color:#fff !important}
.x31:hover{color:#ED93B1 !important}
.x32:hover{color:#ED93B1 !important}
.x33:hover{color:#ED93B1 !important}
.x34:hover{color:#ED93B1 !important}
.x35:hover{border-color:#3A2530 !important}
.x36:hover{background:#D4537E !important;color:#fff !important}
.x37:hover{color:#ED93B1 !important}
.x38:hover{color:#ED93B1 !important}
.x39:hover{color:#ED93B1 !important}
.x40:hover{color:#ED93B1 !important}
.x41:hover{color:#ED93B1 !important}
.x42:hover{color:#ED93B1 !important}
.x43:hover{color:#ED93B1 !important}
.x44:hover{color:#ED93B1 !important}
.x45:hover{background:#ED93B1 !important}
.x46:hover{background:#D4537E !important;color:#fff !important}
.x47:hover{background:#D4537E !important;color:#fff !important}
.x48:hover{color:#ED93B1 !important}
.x49:hover{color:#ED93B1 !important}
.x50:hover{color:#ED93B1 !important}
.x51:hover{color:#ED93B1 !important}
.x52:hover{color:#ED93B1 !important}

/* phone widths — the composition is desktop-first, so only the tightest grids need help */
@media (max-width:720px){
  h1{font-size:clamp(30px,9vw,44px) !important}
  section > div, article, footer > div{padding-left:20px !important;padding-right:20px !important}
  [style*="grid-template-columns:140px"],[style*="grid-template-columns:90px"],[style*="grid-template-columns:130px"],[style*="grid-template-columns:180px"],[style*="grid-template-columns:170px"],[style*="grid-template-columns:120px"]{grid-template-columns:1fr !important;gap:6px !important}
  [style*="columns:2"]{columns:1 !important}
  [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr 1fr !important;row-gap:4px !important}
}
