/* VergeLabs Media Library — site design system.
   Grammar shared with vergelabs.nl (perk register): OT Sono, paper ground tinted toward the accent,
   1px hairlines, 28px radii, one accent, film grain. The accent is four numbers on :root; the admin
   theme setting overrides them (see /api/theme.css). Everything else derives. */

@font-face{font-family:"OTSono";font-weight:400;font-display:swap;src:url(/fonts/OTSono-Regular.woff2) format("woff2")}
@font-face{font-family:"OTSono";font-weight:500;font-display:swap;src:url(/fonts/OTSono-Medium.woff2) format("woff2")}
@font-face{font-family:"OTSono";font-weight:600;font-display:swap;src:url(/fonts/OTSono-Semibold.woff2) format("woff2")}

:root{
  /* accent: cobalt #2846A8 as hue / saturation / lightness, plus the hue the paper is tinted toward */
  --ah:226;--as:62%;--al:41%;--th:226;
  --accent:hsl(var(--ah) var(--as) var(--al));
  --accent-dark:hsl(var(--ah) var(--as) calc(var(--al) - 11%));
  --accent-light:hsl(var(--ah) var(--as) calc(var(--al) + 9%));
  --soft:hsl(var(--ah) min(var(--as),45%) 91%);
  --soft-text:hsl(var(--ah) min(calc(var(--as) + 5%),55%) 24%);
  --page:hsl(var(--th) 30% 98%);
  --hero:hsl(var(--th) 45% 93%);
  --band:hsl(var(--th) 40% 88%);
  --surface:hsl(var(--th) 28% 95%);
  --surface-h:hsl(var(--th) 28% 92%);
  --tile-active:hsl(var(--th) 28% 90%);
  --ah2:calc(var(--ah) + 150);--ah3:calc(var(--ah) - 60);
  --accent-2:hsl(var(--ah2) 72% 56%);--soft-2:hsl(var(--ah2) 70% 92%);--soft-text-2:hsl(var(--ah2) 60% 30%);
  --accent-3:hsl(var(--ah3) 48% 44%);--soft-3:hsl(var(--ah3) 45% 91%);--soft-text-3:hsl(var(--ah3) 50% 24%);
  --white:#fff;
  --ink:hsl(var(--th) 10% 7%);
  --n50:hsl(var(--th) 5% 27%);
  --n60:hsl(var(--th) 4% 42%);
  --n70:hsl(var(--th) 4% 52%);
  --n80:hsl(var(--th) 14% 80%);
  --dark:hsl(var(--ah) 42% 12%);
  --dark-2:hsl(var(--ah) 38% 17%);
  --dark-card:hsl(var(--ah) 40% 15%);
  --ok-bg:#D6FFEF;--ok:#007D4B;--warn-bg:#FDE7ED;--warn:#D20F46;
  --font:"OTSono",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r-m:28px;--r-s:18px;--r-xs:8px;--max:1300px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}


/* ---------- the original page, in this skin ---------- */
:root{--font-display:var(--font);
  /* the dark blocks: one deep tone from the accent hue, not black */
  --dark:hsl(var(--ah) 42% 12%);--dark-2:hsl(var(--ah) 38% 17%);--dark-card:hsl(var(--ah) 40% 15%);
  /* the highlight role: the accent on paper, a light accent on dark */
  --hl:var(--accent);--on-hl:var(--white)}
[style*="background:var(--dark)"],[style*="background:var(--accent)"],[style*="background: var(--dark)"],[style*="background: var(--accent)"]{--hl:hsl(var(--ah) 90% 78%);--on-hl:var(--ink)}
[style*="background: var(--dark)"][style*="padding: 56px"],[style*="background: var(--dark)"][style*="padding: 64px"],[style*="background: var(--dark)"][style*="padding: 72px"]{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06)}
/* the floating pill nav, as on vergelabs.nl */
header[style]{position:sticky!important;top:0!important;z-index:30;background:transparent!important;border-bottom:0!important;backdrop-filter:none!important;padding:20px 30px;pointer-events:none}
header[style]>div:first-child{pointer-events:auto;max-width:1380px!important;height:74px!important;padding:0 40px!important;background:var(--surface);border-radius:50px;box-shadow:0 1px 0 rgb(20 20 15/.06),0 8px 24px -20px rgb(20 20 15/.25)}
header[style]>div:not(:first-child){pointer-events:auto;max-width:1380px;margin:12px auto 0;border-radius:28px;overflow:hidden}
header[style] nav[data-nav] a>span[style*="height: 2px"]{background:var(--accent)!important;border-radius:1px}
header[style] nav[data-nav] a[href="/account"]{border:1px solid var(--n80)!important;color:var(--ink)!important;border-radius:12px!important;padding:12px 20px!important}
header[style] nav[data-nav] a[data-nav-cta]{border-radius:12px!important;padding:13px 22px!important;box-shadow:0 10px 24px -16px var(--accent)}
@media (max-width:900px){header[style]{padding:12px}header[style]>div:first-child{height:64px!important;padding:0 20px!important}[data-pair],[data-intro]{grid-template-columns:1fr!important}[data-pair]>div{padding:36px 28px!important}}
html,body{background:var(--page)}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:0}
h1,h2,h3,h4{font-family:var(--font);font-weight:500;letter-spacing:-.03em}
h1{letter-spacing:-.035em}
::selection{background:var(--soft);color:var(--soft-text)}
a:hover{color:var(--accent-dark)}
input[type=range]{accent-color:var(--accent)}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.18;mix-blend-mode:multiply;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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}