/* berezka.dev /whoami/ - "What this website knows about you".
   Tokens, header, buttons and footer mirror the root pages (index*.html) 1:1;
   the page-specific part starts at "whoami". Fonts are the same files the root
   pages inline, served from /fonts/ (same bytes, same rendering). */

/* ============ fonts (same subsets as the root pages; unicode-range keeps downloads to what a page uses).
   The Plex Sans 400/500/600 files are byte-identical, so all three weights point at one URL and load once. ============ */
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-normal-400-700-latin.woff2?v=20260925) 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:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-normal-400-700-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-normal-400-700-cyrillic.woff2?v=20260925) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-italic-400-700-latin.woff2?v=20260925) 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:'Literata';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-italic-400-700-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/Literata-italic-400-700-cyrillic.woff2?v=20260925) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin.woff2?v=20260925) 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 Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-cyrillic.woff2?v=20260925) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin.woff2?v=20260925) 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 Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-cyrillic.woff2?v=20260925) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin.woff2?v=20260925) 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 Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-normal-400-cyrillic.woff2?v=20260925) 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(/fonts/IBMPlexMono-normal-400-latin.woff2?v=20260925) 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(/fonts/IBMPlexMono-normal-400-latin-ext.woff2?v=20260925) 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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexMono-normal-400-cyrillic.woff2?v=20260925) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}

/* ============ tokens (verbatim from the root pages) ============ */
:root{
  --bg:#F3F1EB; --surface:#FBFAF6; --surface-2:#EAE7DF;
  --ink:#1D2025; --ink-soft:#43464D; --ink-muted:#5F636B;
  --logo-leaf:#697E4A;
  --line:#D8D4C8; --line-strong:#B9B4A5;
  --accent:#BC3F2C; --accent-ink:#A93823; --accent-contrast:#FFFFFF;
  --blue-ink:#24405F; --ok:#2F6B46;
  --lift:0 1px 2px rgb(15 18 22 / .06), 0 14px 34px -14px rgb(15 18 22 / .20);
  --press:inset 0 1px 3px rgb(15 18 22 / .22);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.22,.61,.2,1);
  --fs-h2:clamp(1.9rem, 1.25rem + 2.1vw, 3.1rem);
  --fs-h3:clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --sect:clamp(4.5rem, 10vw, 8rem);
  --gut:clamp(1.25rem, 4vw, 3rem);
  --head-h:72px;
  --font-display:'Literata', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg:#12151A; --surface:#1A1E25; --surface-2:#232830;
  --ink:#EAE7DF; --ink-soft:#C4C1B8; --ink-muted:#9297A0;
  --logo-leaf:#8CA163;
  --line:#2E333C; --line-strong:#454B56;
  --accent:#E2664A; --accent-ink:#EC7B5F; --accent-contrast:#1A0C08;
  --blue-ink:#7FA3CC; --ok:#7DBE97;
  --lift:0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -14px rgb(0 0 0 / .5);
  --press:inset 0 1px 3px rgb(0 0 0 / .5);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#12151A; --surface:#1A1E25; --surface-2:#232830;
    --ink:#EAE7DF; --ink-soft:#C4C1B8; --ink-muted:#9297A0;
    --logo-leaf:#8CA163;
    --line:#2E333C; --line-strong:#454B56;
    --accent:#E2664A; --accent-ink:#EC7B5F; --accent-contrast:#1A0C08;
    --blue-ink:#7FA3CC; --ok:#7DBE97;
    color-scheme: dark;
  }
}
/* Farbwelten (design-system.md 2) */
[data-palette="gezeiten"]{
  --bg:#EDF0F2; --surface:#F8FAFB; --surface-2:#E0E5E9;
  --ink:#171D24; --ink-soft:#3D4650; --ink-muted:#59636E;
  --line:#CED5DA; --line-strong:#A8B2BB;
  --accent:#2E6284; --accent-ink:#295874; --accent-contrast:#FFFFFF;
  --blue-ink:#3A6B5F; --ok:#2F6B46;
}
[data-palette="gezeiten"][data-theme="dark"]{
  --bg:#0F141B; --surface:#161C25; --surface-2:#1F2731;
  --ink:#E6EAEE; --ink-soft:#BEC6CE; --ink-muted:#8E99A5;
  --line:#2A333E; --line-strong:#43505D;
  --accent:#5B9BD0; --accent-ink:#7FB3DE; --accent-contrast:#06121C;
  --blue-ink:#6FC2B4; --ok:#7DBE97;
}
[data-palette="forst"]{
  --bg:#F0EFE4; --surface:#FAF9F1; --surface-2:#E5E3D3;
  --ink:#1C211C; --ink-soft:#414840; --ink-muted:#5D655C;
  --line:#D4D1BE; --line-strong:#B0AC94;
  --accent:#2E6B4F; --accent-ink:#2A5F47; --accent-contrast:#FFFFFF;
  --blue-ink:#8A6414; --ok:#2F6B46;
}
[data-palette="forst"][data-theme="dark"]{
  --bg:#101613; --surface:#17201B; --surface-2:#202B24;
  --ink:#E7E9DF; --ink-soft:#C1C6B8; --ink-muted:#91998C;
  --line:#29342C; --line-strong:#435046;
  --accent:#4E9E77; --accent-ink:#82C4A0; --accent-contrast:#06130C;
  --blue-ink:#D3B36A; --ok:#7DBE97;
}
[data-palette="graphit"]{
  --bg:#F0F0EE; --surface:#FAFAF8; --surface-2:#E4E4E1;
  --ink:#1B1D20; --ink-soft:#43454A; --ink-muted:#5F6166;
  --line:#D4D4CF; --line-strong:#ACACA5;
  --accent:#B87400; --accent-ink:#7E5300; --accent-contrast:#221703;
  --blue-ink:#3E566E; --ok:#2F6B46;
}
[data-palette="graphit"][data-theme="dark"]{
  --bg:#131417; --surface:#1B1C20; --surface-2:#25262B;
  --ink:#E8E7E3; --ink-soft:#C2C1BC; --ink-muted:#94959A;
  --line:#2C2D33; --line-strong:#46484F;
  --accent:#E8A83E; --accent-ink:#ECB255; --accent-contrast:#1F1403;
  --blue-ink:#8FA9C4; --ok:#7DBE97;
}

/* ============ Farbwelt switcher (single cycling button, as on the root pages) ============ */
.pal-btn{appearance:none; cursor:pointer; width:44px; height:44px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--line); background:var(--surface); flex:none}
.pal-btn .chip{width:19px; height:19px; border-radius:999px; flex:none; pointer-events:none;
  background:linear-gradient(135deg, var(--pc-p) 0 50%, var(--pc-a) 50% 100%);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .22)}
.pal-btn[data-pal="siegel"]{--pc-p:#F3F1EB; --pc-a:#BC3F2C}
.pal-btn[data-pal="gezeiten"]{--pc-p:#EDF0F2; --pc-a:#2E6284}
.pal-btn[data-pal="forst"]{--pc-p:#F0EFE4; --pc-a:#2E6B4F}
.pal-btn[data-pal="graphit"]{--pc-p:#F0F0EE; --pc-a:#B87400}
.pal-btn:hover .chip{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .22), 0 0 0 2px var(--bg), 0 0 0 3px var(--ink-muted)}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background-color:var(--bg); overscroll-behavior-y:none}
body{
  margin:0; background-color:var(--bg); background-image:var(--grain); overscroll-behavior-y:none;
  color:var(--ink); font-family:var(--font-body);
  font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .3s ease, color .3s ease;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} body{transition:none !important} }
img,svg{display:block; max-width:100%}
p, li, dd{text-wrap:pretty}
h1, h2, h3{text-wrap:balance}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.container{max-width:1200px; margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-contrast); padding:12px 20px; z-index:99; border-radius:0 0 8px 0}
.skip:focus{left:0}
.vh{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============ header (as on the root pages) ============ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:20px; min-height:64px; flex-wrap:wrap; padding-block:6px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; padding:8px 0}
.brand svg{width:32px; height:32px; color:var(--ink)}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.28rem; letter-spacing:-.01em; line-height:1}
.brand-name em{font-style:italic; color:var(--accent-ink)}
.main-nav{display:flex; gap:4px}
.main-nav a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:13px 12px; border-radius:8px; white-space:nowrap;
}
.main-nav a:hover{color:var(--ink); background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.head-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.langs{position:relative}
.lang-btn{
  appearance:none; background:transparent; border:0; cursor:pointer; color:var(--ink-soft);
  padding:8px; min-width:44px; min-height:44px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  transition:color .2s, transform .2s;
}
.lang-btn:hover{color:var(--ink); transform:translateY(-1px)}
.lang-btn .flag-ic{width:22px; height:16px; border-radius:2px; box-shadow:0 0 0 1px rgb(0 0 0 / .08)}
.lang-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:6px; margin:0; list-style:none; z-index:60; box-shadow:0 10px 28px rgb(0 0 0 / .16);
  grid-template-columns:repeat(4, 44px); gap:1px;
}
.langs.open .lang-dropdown{display:grid}
.lang-dropdown li{width:44px; height:44px; list-style:none}
.lang-dropdown a{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:8px; text-decoration:none; border:0; cursor:pointer; transition:background .15s;
}
.lang-dropdown a:hover{background:var(--surface-2)}
.lang-dropdown .lang-active a{background:var(--surface-2); outline:1px solid var(--line)}
.lang-dropdown .flag-ic{width:28px; height:21px; border-radius:3px; box-shadow:0 0 0 1px rgb(0 0 0 / .08)}
.theme-btn{
  appearance:none; cursor:pointer; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.theme-btn:hover{color:var(--ink); box-shadow:var(--lift)}
.theme-btn:active{transform:scale(.94); box-shadow:var(--press)}
.theme-btn .ic-moon{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-moon{display:block}

/* ============ type + buttons (as on the root pages) ============ */
.eyebrow{
  font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); display:flex; align-items:center; gap:14px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--accent); flex:none}
h1{
  font-family:var(--font-display); font-weight:560; font-optical-sizing:auto;
  font-size:clamp(2.35rem, 1.05rem + 3.7vw, 4.1rem); line-height:1.06; letter-spacing:-.015em; margin:0 0 24px;
}
h2{font-family:var(--font-display); font-weight:540; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.01em; margin:0 0 18px}
h3{font-family:var(--font-display); font-weight:560; font-size:var(--fs-h3); line-height:1.2; margin:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 26px; border-radius:10px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1.3; text-decoration:none; text-align:center;
  border:1px solid transparent;
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), background-color .2s ease;
}
.btn-primary{background:var(--accent); color:var(--accent-contrast)}
.btn-primary:hover{box-shadow:var(--lift); transform:translateY(-1px)}
.btn-primary:active{transform:scale(.97); box-shadow:var(--press)}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); box-shadow:var(--lift)}
.btn-ghost:active{transform:scale(.97)}
.btn[disabled]{cursor:progress; opacity:.8; transform:none; box-shadow:none}

/* ============ footer (as on the root pages) ============ */
footer{border-top:1px solid var(--line); padding-block:clamp(2.5rem,6vw,4rem) 2rem; background:color-mix(in srgb, var(--surface) 45%, transparent)}
.foot-grid{display:flex; justify-content:space-between; gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap; margin-bottom:34px}
.foot-brand{max-width:340px}
.foot-brand .brand{margin:0 0 12px; padding:0}
.foot-brand p{margin:0; color:var(--ink-muted); font-size:.92rem}
.foot-cols{display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap}
.foot-col .k{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 12px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.foot-col a{color:var(--ink-soft); text-decoration:none; font-size:.95rem; display:inline-block; padding:5px 0; min-height:32px}
.foot-col a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.foot-legal{border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
.foot-credit{margin:14px 0 0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-muted)}
.foot-credit a{color:var(--ink-soft); white-space:nowrap}

/* =====================================================================
   whoami
   ===================================================================== */

/* one orchestrated entrance for the hero, one for the result (CSS only, no JS needed to see the page) */
@keyframes wk-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.wk-rise{animation:wk-rise .65s var(--ease) both; animation-delay:calc(var(--rd,0) * 70ms)}

/* ---- hero + consent ---- */
.wk-hero{position:relative; overflow:hidden}
.wk-marks{position:absolute; inset:0; pointer-events:none; color:var(--line-strong)}
.wk-marks i{position:absolute; width:18px; height:18px}
.wk-marks i::before,.wk-marks i::after{content:""; position:absolute; background:currentColor; opacity:.55}
.wk-marks i::before{width:100%; height:1px; top:50%}
.wk-marks i::after{height:100%; width:1px; left:50%}
.wk-marks .t-a{left:var(--gut); bottom:30px}
.wk-marks .t-b{right:var(--gut); top:44px}
.wk-hero-in{
  position:relative; display:grid; grid-template-columns:minmax(0,7.4fr) minmax(0,4.2fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-block:clamp(3rem,7vw,5.8rem) clamp(3.2rem,7vw,5.2rem);
}
.wk-lead{max-width:54ch; color:var(--ink-soft); margin:0 0 30px; font-size:1.11rem}
.wk-consent{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:clamp(1.25rem,2.6vw,1.9rem); max-width:640px;
}
.wk-consent p{margin:0 0 22px; font-size:.98rem; line-height:1.62; color:var(--ink-soft)}
.wk-go-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.wk-note{margin:16px 0 0; font-size:.95rem; line-height:1.5; color:var(--ok)}
.wk-note:empty{display:none}
.wk-noscript{margin:18px 0 0; padding:14px 16px; border:1px dashed var(--line-strong); border-radius:10px; color:var(--ink-soft); font-size:.95rem}

/* decorative seal: the brand mark with a page-specific ring text. Not a button here - the only trigger is #wk-go. */
.wk-seal-wrap{display:flex; align-items:center; justify-content:center}
.wk-seal{position:relative; width:min(290px,26vw); aspect-ratio:1; color:var(--ink-soft)}
.wk-seal svg{width:100%; height:100%; overflow:visible}
.wk-seal .ring-rot{transform-origin:50% 50%; animation:wk-spin 80s linear infinite}
.wk-seal .ring-text{font-family:var(--font-mono); font-size:12.5px; letter-spacing:3.5px; fill:currentColor}
.wk-seal circle{fill:none; stroke:currentColor}
.wk-seal .seal-logo{color:var(--accent)}
@keyframes wk-spin{to{transform:rotate(360deg)}}

/* ---- result ---- */
.wk-res{scroll-margin-top:calc(var(--head-h) + 12px)}
.wk-res{padding-block:clamp(3rem,6.5vw,5.2rem) clamp(3.5rem,7vw,5.5rem); border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 40%, transparent)}
.wk-res-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.wk-res-head h2{margin:0; max-width:22ch}
.wk-res-foot{display:flex; justify-content:flex-end; margin-top:clamp(1.6rem,4vw,2.4rem)}
.wk-in .wk-res{animation:wk-rise .5s var(--ease) both}

/* summary sheet: four facts, then the stamped fingerprint */
.wk-sum{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:clamp(2.4rem,6vw,3.8rem)}
.wk-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line)}
.wk-fact{background:var(--surface); padding:22px 24px 24px; min-width:0}
.wk-k{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 10px}
.wk-big{font-family:var(--font-display); font-weight:560; font-size:clamp(1.3rem, 1.1rem + .55vw, 1.62rem); line-height:1.2; margin:0; color:var(--ink); overflow-wrap:anywhere}
.wk-big.wk-na{font-family:var(--font-body); font-weight:400; font-size:1rem; line-height:1.45; color:var(--ink-muted)}
.wk-sub{margin:7px 0 0; font-size:.92rem; line-height:1.45; color:var(--ink-soft); overflow-wrap:anywhere}
.wk-sub.raw{font-family:var(--font-mono); font-size:.86rem}
.wk-fp{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,3.5vw,2.8rem); align-items:center;
  padding:clamp(1.4rem,3vw,2.1rem) 24px; border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-2) 40%, var(--surface))}
.wk-fp p{margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.6; max-width:62ch}
.wk-stamp{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; margin:6px 4px;
  padding:14px 20px 12px; border:2px solid var(--accent); border-radius:10px;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--accent) 50%, transparent);
  transform:rotate(-1.2deg); transform-origin:50% 50%;
}
.wk-code{font-family:var(--font-mono); font-size:clamp(1.28rem, 1rem + 1.1vw, 1.85rem); letter-spacing:.07em; line-height:1.1; color:var(--accent-ink); white-space:nowrap}
.wk-code.wk-na{font-family:var(--font-body); font-size:1rem; letter-spacing:0; white-space:normal; color:var(--ink-muted)}
.wk-cap{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted)}
@keyframes wk-stamp{
  0%{opacity:0; transform:rotate(-1.2deg) scale(1.14)}
  55%{opacity:1; transform:rotate(-1.2deg) scale(.96)}
  100%{opacity:1; transform:rotate(-1.2deg) scale(1)}
}
.wk-in .wk-stamp{animation:wk-stamp .5s var(--ease) .3s both}

/* groups: a heading with its source tag, then a plain two-column table (parameter | value),
   ruled with hairlines like the price table on the root pages */
.wk-tables{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4.5vw,3.6rem); align-items:start}
.wk-col{min-width:0}
.wk-group{margin:0 0 clamp(2rem,4vw,2.8rem)}
.wk-group:last-child{margin-bottom:0}
.wk-group-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin:0 0 12px}
.wk-group-head h3{margin:0}
.wk-src{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
  display:flex; align-items:baseline; gap:8px; margin:0; white-space:nowrap}
.wk-src::before{content:""; flex:none; width:7px; height:7px; border-radius:99px; background:var(--ok); transform:translateY(-1px)}
.wk-src.net::before{background:var(--blue-ink)}
.wk-tbl{width:100%; border-collapse:collapse; table-layout:fixed}
.wk-tbl th, .wk-tbl td{padding:10px 0; border-top:1px solid var(--line); vertical-align:top; text-align:left; line-height:1.45}
.wk-tbl tbody tr:last-child > *{border-bottom:1px solid var(--line)}
.wk-tbl th{width:40%; padding-right:16px; font-weight:400; font-size:.92rem; color:var(--ink-soft)}
.wk-tbl td{font-size:.97rem; font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.wk-tbl td.raw{font-family:var(--font-mono); font-weight:400; font-size:.9rem}
.wk-tbl td.small{font-size:.82rem; font-weight:400; line-height:1.55}
.wk-tbl td.wk-na{font-weight:400; font-size:.92rem; color:var(--ink-muted)}
.wk-tag{display:inline-block; margin-left:8px; padding:0 7px; border:1px solid var(--line-strong); border-radius:6px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:400; letter-spacing:.06em; line-height:1.6; color:var(--ink-soft); vertical-align:1px; white-space:nowrap}
/* the canvas result, shown like a print proof with crop marks */
.wk-proof{--m:var(--line-strong); display:inline-block; padding:8px; margin:-2px 0 4px -8px; max-width:calc(100% + 8px);
  background:
    linear-gradient(var(--m),var(--m)) 0 0/10px 1px no-repeat, linear-gradient(var(--m),var(--m)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/10px 1px no-repeat, linear-gradient(var(--m),var(--m)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 100%/10px 1px no-repeat, linear-gradient(var(--m),var(--m)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 100%/10px 1px no-repeat, linear-gradient(var(--m),var(--m)) 100% 100%/1px 10px no-repeat}
.wk-proof img{width:280px; max-width:100%; height:auto; border-radius:3px}

/* ---- how to show less + studio card ---- */
.wk-tips{padding-block:var(--sect); border-top:1px solid var(--line)}
.wk-tips-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4.6fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.wk-tips-head h2{margin:0 0 22px}
.wk-tips-tbl thead th{padding:0 16px 10px 0; border-top:0; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); font-weight:400}
.wk-tips-tbl tbody th{width:56%; font-size:.97rem; font-weight:500; color:var(--ink)}
.wk-tips-tbl td{font-weight:400; color:var(--ink-soft)}
.wk-cta{position:sticky; top:calc(var(--head-h) + 20px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(1.5rem,3vw,2.2rem)}
.wk-cta h2{font-size:clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height:1.18; margin:0 0 22px}
.wk-cta-seal{width:56px; height:56px; color:var(--ink-muted); margin:0 0 16px}

/* ============ responsive ============ */
@media (max-width:1000px){
  .wk-hero-in{grid-template-columns:1fr; padding-block:3rem 3.6rem}
  .wk-seal-wrap{order:-1; justify-content:flex-end; margin-bottom:-12px}
  .wk-seal{width:120px}
  .wk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-tables{grid-template-columns:1fr}
  .wk-col + .wk-col{margin-top:clamp(2rem,4vw,2.8rem)}
  .wk-tips-grid{grid-template-columns:1fr}
  .wk-cta{position:static; max-width:640px}
}
@media (max-width:640px){
  :root{--head-h:112px}   /* the header wraps to two rows here and stays sticky, as on the root pages */
  .head-in{row-gap:0}
  .main-nav{order:3; width:calc(100% + 16px); flex-wrap:wrap; justify-content:space-between; margin-inline:-8px; padding-bottom:4px; gap:0}
  .main-nav a{padding:13px 8px; font-size:.72rem; letter-spacing:.07em}
  .wk-seal-wrap{display:none}
  .wk-marks .t-b{display:none}
  .wk-lead{font-size:1.03rem}
  .wk-go-row .btn{width:100%}
  .wk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-fact{padding:14px 14px 16px}
  .wk-k{margin-bottom:6px; letter-spacing:.12em}
  .wk-big{font-size:1.04rem}
  .wk-sub{font-size:.84rem; margin-top:4px}
  .wk-fp{grid-template-columns:1fr; padding:22px 20px}
  .wk-tbl th{padding-right:12px}
  .wk-tips-tbl tbody th{width:50%}
  .wk-res-head .btn, .wk-res-foot .btn{width:100%}
  .foot-legal{flex-direction:column; gap:6px}
  .foot-col ul{gap:0}
  .foot-col a{display:inline-flex; align-items:center; min-height:44px; padding:0}
}
@media (prefers-reduced-motion: reduce){
  .wk-rise, .wk-in .wk-res, .wk-in .wk-stamp{animation:none}
  .wk-seal .ring-rot{animation:none}
  .btn, .theme-btn, .lang-btn{transition:none}
}