@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-vietnamese.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-vietnamese.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-vietnamese.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-vietnamese.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;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-vietnamese.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-vietnamese.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-vietnamese.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-vietnamese.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-vietnamese.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.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;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-latin.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;
}

:root {
  --bg-base: #08090C;
  --bg-main: #12141C;
  --bg-sidebar: #0A0B10;
  --bg-panel: #171A24;
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);

  --accent-primary: oklch(0.62 0.18 270);
  --accent-primary-soft: oklch(0.62 0.18 270 / 0.18);
  --accent-text: oklch(0.72 0.15 270);
  --accent-secondary: oklch(0.66 0.16 248);
  --accent-secondary-soft: oklch(0.66 0.16 248 / 0.16);
  --brand-blue: #2B97EE;
  --brand-violet: #7743CF;
  --brand-flat: #5D7BF1;

  --ringo: oklch(0.80 0.088 66);
  --ringo-soft: oklch(0.80 0.088 66 / 0.16);

  --success: oklch(0.73 0.13 156);
  --success-soft: oklch(0.73 0.13 156 / 0.16);
  --warning: oklch(0.79 0.13 80);
  --warning-soft: oklch(0.79 0.13 80 / 0.16);
  --danger: oklch(0.70 0.17 25);
  --danger-soft: oklch(0.70 0.17 25 / 0.16);
  --text-on-ringo: #1a1206;
  --warning-face: oklch(0.79 0.13 80);
  --warning-face-top: oklch(0.83 0.12 82);
  --warning-face-deep: oklch(0.75 0.135 77);
  --warning-face-highlight: oklch(0.9 0.08 85 / 0.7);
  --grad-warning-face: radial-gradient(130% 150% at 0% 0%, var(--warning-face-top) 0%, var(--warning-face) 45%, var(--warning-face-deep) 100%);
  --shadow-warning-face: 0 14px 28px -16px rgba(0, 0, 0, 0.7);
  --btn-dark-face: #12141c;
  --btn-dark-face-hover: #1e212c;
  --btn-glass-face: rgba(255, 255, 255, 0.28);
  --btn-glass-face-hover: rgba(255, 255, 255, 0.45);
  --warning-face-umber: oklch(0.3375 0.0608 77);

  --text-primary: oklch(0.97 0.004 265);
  --text-secondary: oklch(0.80 0.008 265);
  --text-muted: oklch(0.68 0.012 265);
  --text-on-accent: #ffffff;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --divider: rgba(255, 255, 255, 0.06);

  --grad-brand: linear-gradient(135deg, #2B97EE 0%, #7743CF 100%);
  --grad-main: radial-gradient(135% 95% at 50% -12%, #1c1f2c 0%, #14161f 42%, #0c0e15 100%);
  --grad-sidebar: radial-gradient(110% 60% at 50% 0%, #15171f 0%, #0b0c11 72%);
  --grad-panel: radial-gradient(130% 100% at 100% 0%, oklch(0.62 0.18 270 / 0.30) 0%, oklch(0.62 0.18 270 / 0.08) 34%, rgba(20, 22, 30, 0) 62%), #171a24;
  --grad-tile: radial-gradient(150% 130% at 0% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.012) 58%);
  --grad-ringo: radial-gradient(120% 120% at 30% 20%, oklch(0.82 0.09 66 / 0.95), oklch(0.66 0.12 48 / 0.95));
  --grad-button: linear-gradient(180deg, oklch(0.66 0.18 270), oklch(0.55 0.18 270));

  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: blur(20px) saturate(140%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 26px 50px -26px rgba(0, 0, 0, 0.85);
}

:root {
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;
  --font-wordmark: 'Syne', 'Hanken Grotesk', system-ui, sans-serif;
  --track-wordmark: -0.02em;

  --type-display-xl: 400 58px/1.04 var(--font-display);
  --type-display-l: 400 42px/1.08 var(--font-display);
  --type-display-m: 500 32px/1.12 var(--font-display);
  --track-display-xl: -0.025em;
  --track-display-l: -0.02em;
  --track-display-m: -0.015em;

  --type-heading: 600 24px/1.2 var(--font-body);
  --type-subheading: 600 19px/1.3 var(--font-body);
  --type-title: 600 16px/1.4 var(--font-body);
  --type-body-lg: 400 16px/1.6 var(--font-body);
  --type-body: 400 15px/1.6 var(--font-body);
  --type-body-sm: 400 13.5px/1.55 var(--font-body);
  --type-caption: 500 12.5px/1.4 var(--font-body);

  --type-label: 600 11.5px/1.4 var(--font-data);
  --track-label: 0.14em;
  --type-data-lg: 500 30px/1.1 var(--font-data);
  --type-data: 500 14px/1.5 var(--font-data);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 11px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --sidebar-width: 240px;
  --panel-width: 320px;
  --page-max: 1180px;
  --content-max: 720px;
}

:root {
  --shadow-sm: 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 26px 50px -26px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 10px 24px -14px oklch(0.62 0.18 270 / 0.9);
  --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

@keyframes songracPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.5); }
}

@keyframes ringoGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--ringo-soft), var(--shadow-md); }
  50% { box-shadow: 0 0 26px 3px var(--ringo-soft), var(--shadow-md); }
}

html, body { height: 100%; margin: 0; }
#page-root, #page-root > .page-host { height: 100%; }

.sg-focus-field:focus{border-color: var(--accent-primary) !important;background: var(--surface-2) !important}
.sg-hover-accent:hover{color: var(--accent-text) !important}
.sg-hover-ghost:hover{background: var(--surface-1) !important;color: var(--text-primary) !important}
.sg-hover-pause:hover{animation-play-state: paused !important}
.sg-hover-raise:hover{background: var(--surface-2) !important}
.sg-hover-raise-text:hover{background: var(--surface-2) !important;color: var(--text-primary) !important}
.sg-hover-store:hover{color: rgba(255,255,255,0.90) !important}
.sg-hover-text:hover{color: var(--text-primary) !important}

[data-when][hidden] { display: none !important; }

html.sg-narrow [data-when="wide"], html.sg-narrow [data-when="showDeskScrim"] { display: none !important; }
html.sg-narrow [data-when="showMobGlow"][hidden], html.sg-narrow [data-when="showMobScrim"][hidden],
html.sg-narrow [data-when="showBand"][hidden], html.sg-narrow [data-when="narrow"][hidden] { display: block !important; }

#page-root > .page-host > div { overflow-x: clip; }

.sg-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box; padding: var(--space-4) clamp(16px, 5.5vw, 32px); background: var(--grad-warning-face); box-shadow: inset 0 1px 0 var(--warning-face-highlight), var(--shadow-warning-face); color: var(--text-on-ringo); font: var(--type-body-sm); }
.sg-consent[hidden] { display: none; }
.sg-consent-inner { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.sg-consent p { flex: 1 1 420px; margin: 0; color: var(--text-on-ringo); }
.sg-consent a { color: var(--text-on-ringo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sg-consent-actions { flex: 0 1 auto; display: flex; gap: 10px; }
.sg-consent-actions button { flex: 1 1 0; min-width: 120px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-md); border: 0; background: var(--btn-dark-face); color: var(--text-on-accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sg-consent-actions button:hover { background: var(--btn-dark-face-hover); }
.sg-consent[data-buttons="glass"] .sg-consent-actions button { border: 1px solid color-mix(in srgb, var(--text-on-ringo) 35%, transparent); background: var(--btn-glass-face); color: var(--text-on-ringo); }
.sg-consent[data-buttons="glass"] .sg-consent-actions button:hover { background: var(--btn-glass-face-hover); }
.sg-consent[data-buttons="outline"] .sg-consent-actions button { border: 2px solid var(--text-on-ringo); background: transparent; color: var(--text-on-ringo); }
.sg-consent[data-buttons="outline"] .sg-consent-actions button:hover { background: var(--btn-glass-face); }
.sg-consent[data-buttons="amber"] .sg-consent-actions button { background: var(--warning-face-umber); color: var(--text-primary); }
.sg-consent[data-buttons="amber"] .sg-consent-actions button:hover { background: color-mix(in oklch, var(--warning-face-umber) 85%, var(--warning-face-deep)); }
@media (max-width: 560px) { .sg-consent-actions { flex: 1 1 100%; } }
.sg-consent-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.sg-consent-link[hidden] { display: none; }
.sg-consent-link:hover { color: var(--text-primary); }
.sg-consent:focus-visible, .sg-consent a:focus-visible, .sg-consent-actions button:focus-visible { outline: 2px solid var(--text-on-ringo); outline-offset: 2px; }
.sg-consent-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }