/* Wikiflover, the Wildflover help wiki. Plain CSS, no build step.
   Order: fonts, tokens, base, top bar, layout, sidebar, article head + infobox,
   article body, figures + callouts, steps, notes, tables, FAQ, links + pager,
   footer, search, lightbox, link preview, home (masthead, showcase, guides, sections, bento),
   responsive, motion. */

/* ---------- Fonts (same files as wildflover.wf) ---------- */
@font-face { font-family: 'Clash Display'; src: url('../fonts/clash-display-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('../fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-tr.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0160-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: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; 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: 'Clash Display Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 109.11%; ascent-override: 81.57%; descent-override: 22.91%; line-gap-override: 8.25%; }
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 98.33%; ascent-override: 102.72%; descent-override: 24.41%; line-gap-override: 10.17%; }

/* ---------- Tokens: the app's surfaces + the default Myth theme (the app icon's red) ---------- */
:root {
  color-scheme: dark;
  --bg: #07050b;
  --bar: #08060d;
  --panel: #0c0911;
  --panel-2: #100c17;
  --inset: #06040a;
  --glass: linear-gradient(180deg, #1c1526 0%, #0c0911 100%);
  --fill-1: rgba(255, 255, 255, .035);
  --fill-2: rgba(255, 255, 255, .06);
  --line-1: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .11);
  --line-3: rgba(255, 255, 255, .18);
  --text-1: #fff;
  --text-2: rgba(255, 255, 255, .8);
  --text-3: rgba(255, 255, 255, .58);
  --text-4: rgba(255, 255, 255, .4);

  --accent: #e23744;
  --accent-light: #ff6b76;
  --accent-lighter: #ffb6bd;
  --accent-rgb: 226, 55, 68;

  --tip: #34d399;
  --info: #7cc4ff;
  --warn: #fbbf24;
  --danger: #fb7185;

  --font-display: 'Clash Display', 'Clash Display Fallback', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Satoshi', 'Satoshi Fallback', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --top-h: 60px;
  --side-w: 276px;
  --read: 70ch;
  --wide: 1080px;
  --gutter: 20px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* page to page: a short cross-fade instead of a cut. The bar is the same pixels on both pages so it stays still;
   the menu switches at once (no doubled list while it fades), it only fades when one of the pages has none (home) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.wk-top { view-transition-name: wk-top; }
.wk-side { view-transition-name: wk-side; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .22s; animation-timing-function: var(--ease-out); }
::view-transition-old(wk-side) { animation: none; opacity: 0; }
::view-transition-new(wk-side) { animation: none; }
::view-transition-old(wk-side):only-child { opacity: 1; animation: wk-vt-out .22s var(--ease-out) both; }
::view-transition-new(wk-side):only-child { animation: wk-vt-in .22s var(--ease-out) both; }
@keyframes wk-vt-out { to { opacity: 0; } }
@keyframes wk-vt-in { from { opacity: 0; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-2);
  font: 400 1.0625rem/1.75 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-lighter); text-decoration-color: rgba(var(--accent-rgb), .5); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s var(--ease-out), text-decoration-color .15s var(--ease-out); }
a:hover { color: #fff; text-decoration-color: var(--accent-light); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(var(--accent-rgb), .45); color: #fff; }
kbd {
  display: inline-block; min-width: 1.6em; padding: .05em .45em; border-radius: 6px;
  font: 600 .78em/1.5 var(--font-ui); color: var(--text-1); text-align: center;
  background: linear-gradient(180deg, #221a2e, #120d1a); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 -2px 0 rgba(0, 0, 0, .45);
}
.wk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font: 600 .9rem var(--font-ui); text-decoration: none; }
.wk-skip:focus { top: 12px; }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .45) transparent; }

/* the wordmark: WIKI + FLOVER, the app's WILDFLOVER family */
.wk-word { font: 600 1rem/1 var(--font-display); letter-spacing: .08em; color: #fff; white-space: nowrap; }
.wk-word b { font-weight: 600; background: linear-gradient(180deg, #fff 5%, var(--accent-light) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* solid panel with a light edge on top: every grouped surface uses it */
.wk-panel, .wk-infobox, .wk-links, .wk-table-wrap, .wk-search-box, .wk-peek {
  position: relative; background: var(--panel); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px -40px #000;
}
.wk-infobox::before, .wk-search-box::before, .wk-peek::before {
  content: ''; position: absolute; z-index: 3; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .85), transparent);
}

/* app glyphs: two-tone, no box */
.wk-glyph { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.25em; height: 1.25em; color: var(--accent-light); }
.wk-glyph svg { width: 100%; height: 100%; }

/* a page's icon on a black glass tile (home cards, search) */
.wk-ic {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; overflow: hidden;
  color: var(--accent-light); background: linear-gradient(180deg, #1d1527, #0d0912);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: box-shadow .15s var(--ease-out);
}
.wk-ic svg { width: 21px; height: 21px; }
.wk-ic img { width: 24px; height: 24px; object-fit: contain; }
.wk-ic img[src*="alya"] { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Top bar ---------- */
/* three columns: brand | search (always centred) | links. No bar of its own: the page's art runs up
   behind it; once you scroll, a dark fade appears behind the controls only so text never runs under them */
.wk-top {
  position: sticky; top: 0; z-index: 40; height: var(--top-h);
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(260px, 580px) minmax(max-content, 1fr); align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: transparent;
}
.wk-top::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(7, 5, 11, .97) 0%, rgba(7, 5, 11, .92) 66%, rgba(7, 5, 11, 0) 100%); transition: opacity .25s var(--ease-out); }
body.is-scrolled .wk-top::before, body.is-nav-open .wk-top::before { opacity: 1; }
.wk-top-l, .wk-top-r { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-top-r { justify-content: flex-end; gap: 8px; }
.wk-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.wk-brand img { width: 28px; height: 28px; filter: drop-shadow(0 2px 10px rgba(var(--accent-rgb), .55)); }
.wk-brand .wk-word { font-size: 1.06rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }

/* the controls: dark glass pills with one neutral hairline edge; no colour on the edges, light only on hover */
.wk-top-ic { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--text-3); transition: color .15s var(--ease-out); }
.wk-top .wk-top-ic svg { width: 17px; height: 17px; }

.wk-search-btn {
  width: 100%; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 7px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: rgba(12, 9, 16, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: var(--text-3); font: 500 .9rem var(--font-ui); transition: box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.wk-search-btn .t { flex: 1; white-space: nowrap; }
.wk-search-btn small { padding: 3px 8px; border-radius: 999px; font: 600 .7rem var(--font-ui); color: var(--text-4); letter-spacing: .02em; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.wk-mast-search small { font: 600 .74rem var(--font-ui); color: var(--text-4); letter-spacing: .02em; }

.wk-toplinks { display: flex; align-items: center; gap: 6px; }
.wk-toplinks a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 13px; border-radius: 999px;
  font: 500 .86rem var(--font-ui); color: var(--text-2); text-decoration: none;
  background: rgba(12, 9, 16, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
/* download: the same pill, a touch brighter so it reads as the main action */
.wk-top .wk-get { height: 40px; padding: 0 16px 0 14px; gap: 8px; border-radius: 999px; font-weight: 600; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wk-top .wk-get .wk-top-ic { color: #fff; }
@media (hover: hover) {
  .wk-search-btn:hover, .wk-toplinks a:hover, .wk-top .wk-get:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
  .wk-search-btn:hover .wk-top-ic, .wk-toplinks a:hover .wk-top-ic { color: var(--text-1); }
}
.wk-get, .wk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 10px; flex: 0 0 auto;
  font: 600 .88rem var(--font-ui); color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: box-shadow .15s var(--ease-out), transform .16s var(--ease-out);
}
.wk-get svg, .wk-btn svg { width: 17px; height: 17px; }
@media (hover: hover) { .wk-get:hover, .wk-btn:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .85); } }
.wk-get:active, .wk-btn:active { transform: scale(.97); }
.wk-menu-btn { display: none; width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgba(12, 9, 16, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); cursor: pointer; }
.wk-menu-btn svg { width: 20px; height: 20px; margin: auto; }

/* ---------- Layout ---------- */
.wk-layout { position: relative; z-index: 1; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.wk-main { min-width: 0; padding: 34px var(--gutter) 96px 52px; }

/* every page sits in a faint theme light (fixed, so it never scrolls into flat black) and a fine grain */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(48% 58% at 100% 0%, rgba(var(--accent-rgb), .14), transparent 70%),
    radial-gradient(42% 52% at 0% 100%, rgba(var(--accent-rgb), .1), transparent 70%),
    radial-gradient(34% 40% at 60% 50%, rgba(255, 107, 118, .035), transparent 70%);
}
body::after {
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* articles: the Crimson art, faint, behind the title */
.is-article .wk-layout::before {
  content: ''; position: absolute; z-index: -1; left: var(--side-w); right: 0; top: calc(var(--top-h) * -1); height: 620px; pointer-events: none;
  background: radial-gradient(60% 90% at 55% 0%, rgba(var(--accent-rgb), .16), transparent 70%), url('../img/art/crimson.webp') center 30% / cover no-repeat;
  opacity: .32;
  /* fades down and in from both sides, so no hard edge shows in the transparent bar */
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent), linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 10%, transparent), linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); mask-composite: intersect;
}
/* reading progress under the top bar (transform only) */
.wk-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.wk-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-light)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8); }

/* ---------- Sidebar: sections fold, the open one shows its pages and the page's headings ---------- */
.wk-side {
  position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 14px 40px var(--gutter);
  background: linear-gradient(180deg, rgba(13, 9, 19, .82), rgba(8, 6, 13, .7));
  box-shadow: inset -1px 0 0 var(--line-1);
}
.wk-side-label { padding: 0 8px 12px; font: 600 .76rem var(--font-ui); color: var(--text-4); }
.wk-nav-group + .wk-nav-group { margin-top: 2px; }
.wk-nav-title {
  list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 8px; cursor: pointer; user-select: none;
  font: 600 .88rem/1.3 var(--font-ui); color: var(--text-3); transition: color .15s var(--ease-out);
}
.wk-nav-title::-webkit-details-marker { display: none; }
.wk-nav-title > span:nth-child(2) { flex: 1; }
.wk-nav-gl { display: inline-grid; flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-4); transition: color .15s var(--ease-out); }
.wk-nav-gl svg { width: 16px; height: 16px; }
.wk-nav-title > svg:last-child { width: 13px; height: 13px; color: var(--text-4); transition: transform .2s var(--ease-out); }
@media (hover: hover) { .wk-nav-title:hover { color: #fff; } .wk-nav-title:hover .wk-nav-gl { color: var(--accent-light); } }
.wk-nav-group[open] > .wk-nav-title { color: #fff; }
.wk-nav-group[open] > .wk-nav-title .wk-nav-gl { color: var(--accent-light); }
.wk-nav-group[open] > .wk-nav-title > svg:last-child { transform: rotate(180deg); }
/* the pages: plain text on a thin rail; the open one is white with a lit segment of the rail */
.wk-nav-list { list-style: none; margin: 2px 0 12px 15px; padding: 0; display: grid; box-shadow: inset 1px 0 0 var(--line-2); }
.wk-nav-list > li > a { position: relative; display: block; padding: 6px 8px 6px 18px; font: 500 .875rem/1.45 var(--font-ui); color: var(--text-3); text-decoration: none; transition: color .15s var(--ease-out); }
@media (hover: hover) { .wk-nav-list > li > a:hover { color: #fff; } }
.wk-nav-list > li > a.is-active { color: #fff; font-weight: 600; }
.wk-nav-list > li > a.is-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent-light); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }
.wk-nav-toc { list-style: none; margin: 0 0 8px 18px; padding: 0; display: grid; }
.wk-nav-toc a { position: relative; display: block; padding: 4px 8px 4px 13px; font: 500 .8rem/1.45 var(--font-ui); color: var(--text-4); text-decoration: none; transition: color .15s var(--ease-out); }
.wk-nav-toc a::before { content: ''; position: absolute; left: 0; top: .82em; width: 4px; height: 4px; border-radius: 50%; background: var(--line-3); transition: background-color .15s var(--ease-out); }
.wk-nav-toc a:hover, .wk-nav-toc a.is-active { color: #fff; }
.wk-nav-toc a.is-active::before { background: var(--accent-light); }
.wk-side-foot { margin: 28px 10px 0; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line-1); font: 500 .78rem/1.55 var(--font-ui); color: var(--text-4); }

/* ---------- Article head: title + lead, infobox beside ---------- */
.wk-article { position: relative; z-index: 1; min-width: 0; max-width: var(--wide); }
.wk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font: 500 .82rem var(--font-ui); color: var(--text-4); }
.wk-crumbs a { color: var(--text-3); text-decoration: none; }
.wk-crumbs a:hover { color: #fff; }
.wk-crumbs .sep { width: 6px; height: 6px; border-right: 1.5px solid var(--text-4); border-top: 1.5px solid var(--text-4); transform: rotate(45deg); }
.wk-article::after { content: ''; display: table; clear: both; }
.wk-head { display: flow-root; padding-bottom: 10px; }
.wk-head h1 { font: 600 clamp(2.1rem, 1.5rem + 1.7vw, 2.95rem)/1.1 var(--font-display); letter-spacing: -.005em; color: #fff; text-wrap: balance; }
.wk-lead { margin-top: 18px; font: 400 1.2rem/1.65 var(--font-text); color: var(--text-2); max-width: 60ch; }
.wk-head-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font: 500 .82rem var(--font-ui); color: var(--text-4); }
.wk-head-meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: var(--text-4); vertical-align: middle; }

/* the infobox floats right; the title, lead and first paragraphs wrap beside it */
.wk-infobox { float: right; width: 300px; margin: 6px 0 28px 44px; overflow: hidden; }
.wk-infobox-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--inset); box-shadow: inset 0 -1px 0 var(--line-1); }
.wk-infobox-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .15s var(--ease-out); }
@media (hover: hover) { .wk-infobox-pic:hover img { opacity: .86; } }
.wk-infobox-title { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; font: 600 1.08rem/1.3 var(--font-display); color: #fff; letter-spacing: .01em; }
.wk-infobox-title .wk-glyph { width: 20px; height: 20px; }
.wk-infobox-facts { padding: 4px 18px 10px; }
.wk-infobox-facts > div { padding: 10px 0; }
.wk-infobox-facts > div + div { box-shadow: inset 0 1px 0 var(--line-1); }
.wk-infobox-facts dt { font: 500 .78rem/1.3 var(--font-ui); color: var(--text-4); }
.wk-infobox-facts dd { margin-top: 5px; font: 500 .9rem/1.5 var(--font-ui); color: var(--text-1); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-infobox-facts dd a { color: var(--text-1); text-decoration-color: var(--line-3); }
.wk-infobox-facts dd a:hover { color: var(--accent-lighter); }

/* badges: access and edition, a coloured dot + word */
.wk-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px;
  font: 600 .76rem/1 var(--font-ui); white-space: nowrap; color: var(--text-1);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2);
}
.wk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wk-badge[data-kind="full"] { color: var(--accent-lighter); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.wk-badge[data-kind="lite"] { color: #99f6e4; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .4); }
.wk-badge[data-kind="premium"] { color: #ffd58f; box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .42); }
.wk-badge[data-kind="trial"] { color: #fde68a; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35); }
.wk-badge[data-kind="free"] { color: #a7f3d0; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .38); }
.wk-badge[data-kind="new"] { color: #fff; background: rgba(var(--accent-rgb), .28); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .7); }

/* menu path: Araçlar › LCU */
.wk-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; font: 600 .86em/1.4 var(--font-ui); color: var(--text-1); }
.wk-path > span { display: inline-flex; align-items: center; }
.wk-path > span + span::before { content: ''; width: 5px; height: 5px; margin: 0 8px 0 5px; border-right: 1.5px solid var(--accent-light); border-top: 1.5px solid var(--accent-light); transform: rotate(45deg); }

/* a label as the app writes it */
.wk-ui { font: 600 .9em/1.3 var(--font-ui); color: #fff; padding: .08em .42em; border-radius: 6px; white-space: nowrap; background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }

/* ---------- Article body: text column, wide figures ---------- */
.wk-body { margin-top: 8px; }
.wk-body > * { max-width: var(--read); display: flow-root; }
.wk-body > ul:not([class]), .wk-body > ol:not([class]), .wk-body > .wk-steps, .wk-body > .wk-callouts { display: grid; }
.wk-body > * + * { margin-top: 18px; }
.wk-body > .wk-shot, .wk-body > .wk-callouts, .wk-body > .wk-table-wrap, .wk-body > .wk-steps { max-width: none; }
.wk-body > .wk-shot, .wk-body > .wk-callouts, .wk-body > .wk-table-wrap { clear: right; }
.wk-body h2 { position: relative; max-width: none; margin-top: 64px; padding-top: 28px; font: 600 1.7rem/1.25 var(--font-display); color: #fff; letter-spacing: .002em; text-wrap: balance; }
.wk-body h2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .6), var(--line-1) 24%, var(--line-1) 80%, transparent); }
.wk-body h2::after { content: ''; position: absolute; left: 0; top: -1px; width: 52px; height: 3px; border-radius: 2px; background: var(--accent-light); box-shadow: 0 0 14px rgba(var(--accent-rgb), .75); }
.wk-body h3 { position: relative; margin-top: 38px; padding-left: 18px; font: 600 1.2rem/1.35 var(--font-ui); color: #fff; letter-spacing: -.01em; }
.wk-body h3::before { content: ''; position: absolute; left: 1px; top: .55em; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: var(--accent-light); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.wk-body h2 + *, .wk-body h3 + * { margin-top: 12px; }
.wk-anchor { margin-left: 10px; opacity: 0; color: var(--text-4); text-decoration: none; font-weight: 500; transition: opacity .15s; }
.wk-body h2:hover .wk-anchor, .wk-body h3:hover .wk-anchor, .wk-anchor:focus { opacity: 1; }
.wk-body p, .wk-body li { color: rgba(255, 255, 255, .84); }
.wk-body strong { color: #fff; font-weight: 700; }
.wk-body ul:not([class]), .wk-body ol:not([class]) { list-style: none; padding-left: 2px; display: grid; gap: 8px; }
.wk-body ul:not([class]) > li { position: relative; padding-left: 22px; }
.wk-body ul:not([class]) > li::before { content: ''; position: absolute; left: 4px; top: .74em; width: 6px; height: 6px; border-radius: 1.5px; transform: rotate(45deg); background: var(--accent-light); }
.wk-body ol:not([class]) { counter-reset: li; }
.wk-body ol:not([class]) > li { position: relative; padding-left: 32px; counter-increment: li; }
.wk-body ol:not([class]) > li::before { content: counter(li); position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--font-ui); color: #fff; background: rgba(var(--accent-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.wk-body code { font: 500 .88em var(--font-mono); padding: .1em .38em; border-radius: 6px; background: var(--fill-2); color: #ffd7db; }

/* ---------- Figures + numbered callouts ---------- */
.wk-shot { margin-top: 30px !important; }
.wk-shot-frame { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--inset); box-shadow: 0 0 0 1px var(--line-2), 0 28px 60px -40px #000; }
.wk-shot-frame img { width: 100%; height: auto; }
.wk-shot-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none; }
.wk-shot.is-narrow .wk-shot-frame { display: inline-block; max-width: 100%; vertical-align: top; }
.wk-shot.is-narrow .wk-shot-frame img { width: auto; max-width: 100%; }
.wk-shot figcaption { display: flex; gap: 10px; margin-top: 12px; max-width: var(--read); font: 500 .88rem/1.55 var(--font-ui); color: var(--text-3); }
.wk-shot figcaption::before { content: ''; flex: 0 0 auto; width: 14px; height: 1px; margin-top: .8em; background: var(--accent-light); }
.wk-zoom-hint { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font: 600 .72rem var(--font-ui); color: #fff; background: rgba(8, 6, 13, .86); box-shadow: inset 0 0 0 1px var(--line-3); opacity: 0; transition: opacity .15s var(--ease-out); pointer-events: none; }
.wk-zoom-hint svg { width: 13px; height: 13px; }
@media (hover: hover) { .wk-shot-frame:hover .wk-zoom-hint { opacity: 1; } }
.wk-shot-missing { cursor: default; aspect-ratio: 16 / 9; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #0c0911 0 14px, #0f0b16 14px 28px); }
.wk-shot-ph { display: grid; gap: 4px; text-align: center; font: 500 .85rem var(--font-ui); color: var(--text-4); }
.wk-shot-ph b { color: var(--text-2); font-weight: 600; }

.wk-pin {
  position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font: 700 .76rem/1 var(--font-ui); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff7f89, var(--accent) 60%, #9c1d2a);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 4px 14px rgba(0, 0, 0, .65), 0 0 18px rgba(var(--accent-rgb), .6);
  transition: transform .15s var(--ease-out), opacity .15s var(--ease-out);
}
.wk-pin:active { transform: scale(.94); }
.wk-target { position: absolute; z-index: 1; border-radius: 8px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--accent-light), 0 0 0 9999px rgba(5, 3, 8, .5); transition: opacity .18s var(--ease-out); }
.wk-shot.is-focus .wk-target.is-on { opacity: 1; }
.wk-shot.is-focus .wk-pin:not(.is-on) { opacity: .45; }

.wk-callouts { list-style: none; padding: 0; counter-reset: co; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; margin-top: 14px !important; }
.wk-callouts > li { counter-increment: co; position: relative; padding: 9px 12px 9px 46px; border-radius: 10px; font: 400 .95rem/1.55 var(--font-text); color: var(--text-2); transition: background-color .15s var(--ease-out); }
.wk-callouts > li::before { content: counter(co); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--font-ui); color: #fff; background: rgba(var(--accent-rgb), .25); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6); transition: background-color .15s var(--ease-out); }
.wk-callouts > li b { display: block; font: 600 .92rem/1.45 var(--font-ui); color: #fff; margin-bottom: 1px; }
.wk-callouts > li.is-on, .wk-callouts > li:hover { background: var(--fill-1); }
.wk-callouts > li.is-on::before { background: var(--accent); }
.wk-callouts.is-single { grid-template-columns: 1fr; }

/* ---------- Steps ---------- */
.wk-steps { list-style: none; padding: 0; counter-reset: st; display: grid; margin-top: 22px !important; }
.wk-steps > li { counter-increment: st; position: relative; padding: 0 0 24px 56px; }
.wk-steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 600 .98rem/1 var(--font-display); color: #fff; background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.wk-steps > li::after { content: ''; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .6), var(--line-1)); }
.wk-steps > li:last-child { padding-bottom: 4px; }
.wk-steps > li:last-child::after { display: none; }
.wk-steps > li > strong { display: block; max-width: var(--read); font: 600 1.04rem/1.45 var(--font-ui); color: #fff; padding-top: 5px; }
.wk-steps > li > p, .wk-steps > li > ul, .wk-steps > li > aside { max-width: var(--read); margin-top: 6px; }
.wk-steps > li > figure { margin-top: 14px !important; }

/* ---------- Notes ---------- */
.wk-note {
  --tone: var(--info); --tone-rgb: 124, 196, 255;
  position: relative; padding: 16px 20px 16px 56px; border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(var(--tone-rgb), .07), transparent 55%), var(--panel);
  box-shadow: inset 3px 0 0 var(--tone), inset 0 0 0 1px var(--line-2);
}
.wk-note::before { content: ''; position: absolute; left: 20px; top: 18px; width: 20px; height: 20px; background: var(--tone); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.wk-note > * + * { margin-top: 6px; }
.wk-note p { font-size: .98rem; }
.wk-note-title { font: 600 .94rem/1.4 var(--font-ui) !important; color: #fff !important; }
.wk-note[data-kind="info"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E"); }
.wk-note[data-kind="tip"] { --tone: var(--tip); --tone-rgb: 52, 211, 153; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2Zm-3 18h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E"); }
.wk-note[data-kind="warn"] { --tone: var(--warn); --tone-rgb: 251, 191, 36; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.9 2.5a1 1 0 0 0-1.8 0l-9.8 17A1 1 0 0 0 2.2 21h19.6a1 1 0 0 0 .9-1.5ZM13 18h-2v-2h2Zm0-4h-2V9h2Z'/%3E%3C/svg%3E"); }
.wk-note[data-kind="danger"] { --tone: var(--danger); --tone-rgb: 251, 113, 133; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.7 2H8.3L2 8.3v7.4L8.3 22h7.4l6.3-6.3V8.3ZM13 17h-2v-2h2Zm0-4h-2V7h2Z'/%3E%3C/svg%3E"); }

/* ---------- Tables ---------- */
.wk-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.wk-table { width: 100%; border-collapse: collapse; font: 400 .95rem/1.55 var(--font-text); }
.wk-table th { text-align: left; padding: 12px 16px; font: 600 .8rem/1.3 var(--font-ui); color: var(--text-3); background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--line-2); }
.wk-table td { padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--line-1); color: var(--text-2); }
.wk-table tr:last-child td { border-bottom: 0; }
.wk-table td:first-child { color: #fff; font-weight: 500; }
/* two-column tables (glossary, term lists) keep one column line across the page */
.wk-table:has(th:nth-child(2):last-child) th:first-child { width: 190px; }

/* ---------- FAQ: one list, hairlines between questions ---------- */
.wk-faq { border-top: 1px solid var(--line-2); }
.wk-faq + .wk-faq { margin-top: 0 !important; border-top-color: var(--line-1); }
.wk-faq:not(:has(+ .wk-faq)) { border-bottom: 1px solid var(--line-2); }
.wk-faq summary { position: relative; list-style: none; cursor: pointer; padding: 16px 48px 16px 4px; font: 600 1rem/1.45 var(--font-ui); color: #fff; transition: color .15s var(--ease-out); }
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::after { content: ''; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--accent-light); border-bottom: 2px solid var(--accent-light); transform: rotate(45deg); transition: transform .2s var(--ease-out), margin .2s var(--ease-out); }
.wk-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (hover: hover) { .wk-faq summary:hover { color: var(--accent-lighter); } }
.wk-faq > div { padding: 0 4px 18px; }
.wk-faq > div > * + * { margin-top: 10px; }
.wk-faq:target summary { color: var(--accent-lighter); }

/* ---------- Related pages, pager, article foot ---------- */
.wk-links { clear: both; margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wk-links > div { padding: 22px 26px 24px; }
.wk-links > div + div { box-shadow: inset 1px 0 0 var(--line-1); }
.wk-links h2 { font: 600 .9rem/1.4 var(--font-ui); color: var(--text-3); margin-bottom: 10px; }
.wk-links ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.wk-links a { position: relative; display: block; padding: 5px 0 5px 16px; font: 500 .94rem/1.45 var(--font-ui); color: var(--text-1); text-decoration: none; }
.wk-links a::before { content: ''; position: absolute; left: 1px; top: .92em; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg); background: var(--line-3); transition: background-color .15s; }
.wk-links a:hover { color: var(--accent-lighter); }
.wk-links a:hover::before { background: var(--accent-light); }
.wk-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--line-1); }
.wk-pager a { display: inline-flex; align-items: center; gap: 14px; max-width: 48%; font: 600 1rem/1.4 var(--font-ui); color: #fff; text-decoration: none; }
.wk-pager a svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-light); }
.wk-pager a small { display: block; font: 500 .78rem/1.4 var(--font-ui); color: var(--text-4); margin-bottom: 2px; }
.wk-pager a.next { text-align: right; margin-left: auto; }
.wk-pager a:hover { color: var(--accent-lighter); }
.wk-article-foot { margin-top: 32px; font: 500 .84rem/1.6 var(--font-ui); color: var(--text-4); }

/* ---------- Site footer ---------- */
.wk-foot { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, #160d17 0%, #0e0911 46%, #0b0810 100%); }
.wk-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 320px; pointer-events: none; background: radial-gradient(46% 100% at 50% 0%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .08) 55%, transparent 78%); }
/* one hairline across the whole width, a touch of the red light where it meets the glow */
.wk-foot::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 140, 150, .5) 50%, rgba(255, 255, 255, .07)); }
/* left: big mark, the social accounts, ©, the small print; right: four headed link columns */
.wk-foot-in { position: relative; max-width: 1320px; margin: 0 auto; padding: 60px var(--gutter) 68px; display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 48px 72px; align-items: start; }
.wk-foot-brand { display: inline-flex; gap: 14px; align-items: center; text-decoration: none; }
.wk-foot-brand img { width: 58px; height: 58px; margin-left: -4px; filter: drop-shadow(0 6px 22px rgba(var(--accent-rgb), .45)); }
.wk-foot-brand .wk-word { display: grid; gap: 6px; font-size: 1.6rem; line-height: .95; letter-spacing: .07em; }
.wk-foot-social { display: flex; gap: 4px; margin: 22px 0 0 -7px; }
.wk-foot-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); transition: color .15s var(--ease-out); }
.wk-foot-social svg { width: 21px; height: 21px; }
.wk-foot-copy { margin-top: 18px; font: 500 .92rem var(--font-ui); color: var(--text-2); }
.wk-foot-legal { max-width: 44ch; margin-top: 10px; font: 400 .76rem/1.6 var(--font-ui); color: rgba(255, 255, 255, .5); }
.wk-foot-cols { display: grid; grid-template-columns: repeat(4, max-content); gap: 36px 64px; }
.wk-foot-cols > div { display: flex; flex-direction: column; align-items: flex-start; }
.wk-foot-cols h2 { margin: 0 0 20px; font: 600 1.06rem var(--font-display); letter-spacing: .01em; color: #fff; }
.wk-foot-cols a { font: 500 .9rem/1.3 var(--font-ui); color: var(--text-3); text-decoration: none; transition: color .15s var(--ease-out); }
.wk-foot-cols a + a { margin-top: 13px; }
@media (hover: hover) { .wk-foot-social a:hover, .wk-foot-cols a:hover { color: #fff; } }
@media (max-width: 1360px) { .wk-foot-cols { column-gap: 44px; } }
/* not enough room beside the four columns: the brand block goes on top */
@media (max-width: 1180px) {
  .wk-foot-in { grid-template-columns: minmax(0, 1fr); }
  .wk-foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
}

/* ---------- Search dialog: a lit header, the top pages as screens, quiet rows ---------- */
.wk-search { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: 8vh 16px 16px; background: rgba(4, 2, 7, .8); }
.wk-search[hidden] { display: none; }
.wk-search-box {
  position: relative; width: min(780px, 100%); max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: radial-gradient(90% 55% at 50% 0%, rgba(var(--accent-rgb), .18), transparent 62%), linear-gradient(180deg, #130d1a, #0a070f 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 120px -30px #000, 0 0 140px -60px rgba(var(--accent-rgb), .8);
  animation: wk-pop .18s var(--ease-out);
}
.wk-search-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .14) .9px, transparent 1.3px); background-size: 10px 10px; opacity: .5; -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000, transparent); mask-image: radial-gradient(60% 100% at 50% 0%, #000, transparent); }
.wk-search-field { position: relative; display: flex; align-items: center; gap: 16px; height: 78px; padding: 0 28px; }
.wk-search-field::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .85), transparent); }
.wk-search-field svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--accent-light); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .9)); }
.wk-search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 500 1.22rem var(--font-ui); letter-spacing: -.005em; }
.wk-search-field input::placeholder { color: var(--text-4); }
.wk-search-field input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.wk-search-list { position: relative; overflow-y: auto; padding: 18px 16px 12px; }
.wk-search-label { padding: 0 10px 10px; font: 600 .76rem var(--font-ui); color: var(--text-4); }
.wk-search-label + * { margin-bottom: 18px; }
.wk-search-list mark { background: none; color: var(--accent-light); font-weight: 700; }
.wk-search-sep { color: var(--text-4); }

/* the three most read pages, as their own screens */
.wk-search-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 6px; }
.wk-sf { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; text-decoration: none; background: #0a070f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 34px -20px #000; transition: box-shadow .15s var(--ease-out); }
.wk-sf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .8; transition: opacity .15s var(--ease-out); }
.wk-sf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8, 5, 12, .95)); }
.wk-sf-c { position: absolute; z-index: 1; left: 13px; bottom: 33px; font: 600 .7rem var(--font-ui); color: var(--accent-lighter); }
.wk-sf b { position: absolute; z-index: 1; left: 13px; right: 13px; bottom: 11px; font: 600 1.02rem/1.2 var(--font-display); color: #fff; letter-spacing: .01em; }
.wk-sf.is-sel, .wk-sf:hover { box-shadow: 0 0 0 2px var(--accent-light), 0 0 34px -8px rgba(var(--accent-rgb), .9); }
.wk-sf.is-sel img, .wk-sf:hover img { opacity: 1; }

/* quiet rows: the page's glyph, its name, its section; the chosen row lit from the left */
.wk-search-rows { display: grid; gap: 2px; }
.wk-sr { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 11px 14px; border-radius: 12px; text-decoration: none; transition: background-color .12s var(--ease-out); }
.wk-sr-g { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--accent-light); }
.wk-sr-g svg, .wk-sr-g img { width: 20px; height: 20px; }
.wk-sr-g img[src*="alya"] { border-radius: 50%; object-fit: cover; object-position: top; }
.wk-sr > .t { font: 600 .98rem/1.35 var(--font-ui); color: #fff; }
.wk-sr > .c { font: 500 .8rem var(--font-ui); color: var(--text-4); }
@media (hover: hover) { .wk-sr:hover { background: rgba(255, 255, 255, .035); } }
.wk-sr.is-sel { background: linear-gradient(90deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .02) 85%); }
.wk-sr.is-sel::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent-light); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); }
/* a search hit: where it is, its title, one or two lines, and a picture of the page */
.wk-sr.is-hit { grid-template-columns: 22px minmax(0, 1fr) 118px; align-items: start; padding: 13px 14px; }
.wk-sr.is-hit .wk-sr-g { margin-top: 2px; }
.wk-sr-text { min-width: 0; }
.wk-sr-text .w { display: block; font: 500 .76rem/1.4 var(--font-ui); color: var(--text-4); }
.wk-sr-text .t { display: block; margin-top: 2px; font: 600 1rem/1.4 var(--font-ui); color: #fff; }
.wk-sr-text .s { display: -webkit-box; margin-top: 4px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 400 .88rem/1.55 var(--font-text); color: var(--text-3); }
.wk-sr-thumb { width: 118px; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: 8px; opacity: .75; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: opacity .12s var(--ease-out); }
.wk-sr.is-sel .wk-sr-thumb { opacity: 1; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6); }
.wk-search-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px 32px; text-align: center; font: 500 .95rem/1.55 var(--font-ui); color: var(--text-3); }
.wk-search-empty img { width: 92px; height: auto; }
.wk-search-foot { display: flex; gap: 18px; padding: 12px 24px; box-shadow: inset 0 1px 0 var(--line-1); font: 500 .76rem var(--font-ui); color: var(--text-4); }
@keyframes wk-pop { from { opacity: 0; transform: scale(.97); } }

/* ---------- Lightbox ---------- */
.wk-lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: rgba(3, 2, 5, .94); cursor: zoom-out; }
.wk-lightbox[hidden] { display: none; }
.wk-lightbox-in { position: relative; max-width: min(1700px, 100%); animation: wk-pop .2s var(--ease-out); }
.wk-lightbox-in img { max-height: calc(100vh - 110px); width: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2); }
.wk-lightbox-cap { margin-top: 12px; text-align: center; font: 500 .9rem var(--font-ui); color: var(--text-2); }
.wk-lightbox-close { position: fixed; right: 18px; top: 16px; width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-3); color: #fff; font-size: 20px; }

/* ---------- Link preview: hover a wiki link, see the page ---------- */
.wk-peek { position: fixed; z-index: 80; width: 340px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.97); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
.wk-peek.is-on { opacity: 1; transform: none; }
.wk-peek.is-instant { transition: none; }
.wk-peek-pic { aspect-ratio: 16 / 8; overflow: hidden; background: var(--inset); box-shadow: inset 0 -1px 0 var(--line-1); }
.wk-peek-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wk-peek-body { padding: 14px 16px 16px; }
.wk-peek-c { font: 500 .76rem var(--font-ui); color: var(--accent-lighter); }
.wk-peek-t { margin-top: 2px; font: 600 1rem/1.35 var(--font-display); color: #fff; letter-spacing: .01em; }
.wk-peek-s { margin-top: 6px; font: 400 .88rem/1.55 var(--font-text); color: var(--text-2); }

/* ---------- Home ---------- */
.wk-home { position: relative; z-index: 1; overflow: hidden; margin-top: calc(var(--top-h) * -1); padding-top: var(--top-h); }
.wk-atmos { position: absolute; left: 0; right: 0; top: 0; height: 1120px; z-index: -1; pointer-events: none; overflow: hidden; }
/* the Crimson theme art (the app's own background), fading out to nothing: no edge where it ends */
.wk-atmos::before {
  content: ''; position: absolute; inset: 0; background: url('../img/art/crimson.webp') 0% 28% / cover no-repeat;
  filter: saturate(1.08) brightness(.62); opacity: .74;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .35) 62%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .35) 62%, transparent 90%);
}
.wk-atmos::after { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 60% at 22% 8%, rgba(var(--accent-rgb), .18), transparent 70%), linear-gradient(180deg, rgba(7, 5, 11, .25), rgba(7, 5, 11, .45) 55%, rgba(7, 5, 11, 0) 100%); }
.wk-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* the masthead: one centred column over the Crimson art; lit sigil, the name,
   one sentence, the search, then the wiki's real numbers in metal */
.wk-mast { position: relative; isolation: isolate; max-width: 1180px; margin: 0 auto; padding: 56px var(--gutter) 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wk-mast-orbs { position: absolute; inset: -60px -12% -20px; z-index: -1; pointer-events: none; }
.wk-mast-orbs i { position: absolute; border-radius: 50%; will-change: transform; animation: wk-drift 18s ease-in-out infinite alternate; }
.wk-mast-orbs i:nth-child(1) { width: 560px; height: 560px; left: 2%; top: -80px; background: radial-gradient(circle, rgba(var(--accent-rgb), .3), transparent 64%); }
.wk-mast-orbs i:nth-child(2) { width: 460px; height: 460px; right: 0; top: 10px; background: radial-gradient(circle, rgba(255, 107, 118, .2), transparent 64%); animation-duration: 23s; animation-delay: -7s; }
.wk-mast-orbs i:nth-child(3) { width: 420px; height: 420px; left: 34%; top: 260px; background: radial-gradient(circle, rgba(255, 182, 189, .1), transparent 64%); animation-duration: 27s; animation-delay: -13s; }
@keyframes wk-drift { from { transform: translate3d(-36px, 12px, 0) scale(1); } to { transform: translate3d(44px, -26px, 0) scale(1.08); } }
.wk-mast-seal { position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin-bottom: 14px; }
.wk-mast-seal::before { content: ''; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .12) 42%, transparent 66%); animation: wk-breathe 5.5s ease-in-out infinite alternate; }
.wk-mast-seal img { position: relative; width: 76px; height: 76px; filter: drop-shadow(0 8px 26px rgba(var(--accent-rgb), .85)); }
@keyframes wk-breathe { from { opacity: .55; } to { opacity: 1; } }
.wk-mast.is-still .wk-mast-orbs i, .wk-mast.is-still .wk-mast-seal::before { animation-play-state: paused; }
.wk-mast-title { font: 600 clamp(3.8rem, 1.8rem + 6.2vw, 7.6rem)/.9 var(--font-display); letter-spacing: -.016em; color: #fff; text-shadow: 0 12px 50px rgba(0, 0, 0, .55); }
.wk-mast-title span { display: inline-block; padding-bottom: .08em; background: linear-gradient(180deg, #fff 0%, var(--accent-lighter) 38%, var(--accent-light) 72%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 32px rgba(var(--accent-rgb), .45)); }
.wk-mast-lead { margin-top: 22px; max-width: 54ch; font: 400 1.28rem/1.6 var(--font-text); color: var(--text-2); text-wrap: balance; }
.wk-mast-lead b { font-weight: 700; color: var(--accent-lighter); }
@media (min-width: 641px) { .wk-mast-lead b { white-space: nowrap; } }
.wk-mast-search {
  width: min(700px, 100%); height: 64px; margin-top: 34px; display: flex; align-items: center; gap: 14px; padding: 0 20px 0 22px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  color: var(--text-3); font: 500 1.06rem var(--font-ui); background: rgba(6, 4, 10, .88);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 0 7px rgba(var(--accent-rgb), .07), 0 26px 60px -26px rgba(var(--accent-rgb), .7);
  transition: box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.wk-mast-search svg { width: 22px; height: 22px; color: var(--accent-light); flex: 0 0 auto; }
.wk-mast-search > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
@media (hover: hover) { .wk-mast-search:hover { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--accent-light), 0 0 0 7px rgba(var(--accent-rgb), .11), 0 26px 60px -22px rgba(var(--accent-rgb), .85); } }
.wk-mast-stats { display: flex; justify-content: center; margin-top: 46px; }
.wk-mast-stats > div { display: grid; gap: 6px; padding: 2px 36px; }
.wk-mast-stats > div + div { box-shadow: inset 1px 0 0 var(--line-2); }
.wk-mast-stats b { font: 600 2.3rem/1 var(--font-display); letter-spacing: .01em; background: linear-gradient(180deg, #fff 18%, #d8c9d2 55%, #8f7c8a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-mast-stats span { font: 500 .84rem var(--font-ui); color: var(--text-3); }
.wk-mast-date { margin-top: 20px; font: 500 .8rem var(--font-ui); color: var(--text-4); }
.wk-mast-pop-label { margin-top: 30px; font: 500 .84rem var(--font-ui); color: var(--text-4); }
/* the most read pages as small screens of themselves, a strip under the search */
.wk-mast-pop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: min(1080px, 100%); margin-top: 12px; }
.wk-mast-pop a {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 13px; text-align: left; text-decoration: none; background: #0a070f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -24px #000; transition: box-shadow .18s var(--ease-out);
}
.wk-mast-pop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .72; transition: opacity .18s var(--ease-out); }
.wk-mast-pop a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(8, 5, 12, .88) 58%, rgba(8, 5, 12, .96)); }
.wk-mast-pop .t { position: absolute; z-index: 1; left: 12px; right: 10px; bottom: 10px; display: grid; gap: 2px; }
.wk-mast-pop .c { font: 600 .68rem var(--font-ui); color: var(--accent-lighter); }
.wk-mast-pop b { font: 600 .92rem/1.2 var(--font-display); color: #fff; letter-spacing: .01em; }
@media (hover: hover) { .wk-mast-pop a:hover { box-shadow: 0 0 0 2px var(--accent-light), 0 0 30px -6px rgba(var(--accent-rgb), .85), 0 20px 40px -24px #000; } .wk-mast-pop a:hover img { opacity: 1; } }

/* ---------- 404 (wk-lost): the masthead's language. Alya's "could not find it" drawing in a small medallion,
   the code in metal like the home numbers, one plain sentence, the search, then pages to go to ---------- */
/* sized so the way out (search, cards, buttons) stays above the fold on a 1366 x 768 laptop */
.wk-lost { padding-top: 28px; padding-bottom: 88px; }
.wk-lost-seal { position: relative; width: 100px; height: 100px; margin-bottom: 10px; }
.wk-lost-seal::before { content: ''; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .1) 44%, transparent 68%); animation: wk-breathe 5.5s ease-in-out infinite alternate; }
.wk-lost-seal img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 0; background: radial-gradient(circle at 50% 30%, #2a1a26, #120c16 72%); }
/* the ring sits inside the medallion, over the picture, so nothing outside can cut it */
.wk-lost-seal::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -20px 28px -18px rgba(var(--accent-rgb), .6); }
.wk-mast.is-still .wk-lost-seal::before { animation-play-state: paused; }
.wk-lost-code { font: 600 clamp(4.5rem, 2rem + 5vw, 7rem)/.84 var(--font-display); letter-spacing: -.02em; background: linear-gradient(180deg, #fff 16%, #e2d2db 48%, #8f7c8a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 16px 44px rgba(var(--accent-rgb), .38)); }
.wk-lost-title { margin-top: 12px; font: 600 clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem)/1.15 var(--font-display); letter-spacing: .005em; color: #fff; }
.wk-lost .wk-mast-lead { margin-top: 12px; }
.wk-lost .wk-mast-search { margin-top: 26px; }
.wk-lost .wk-mast-pop-label { margin-top: 22px; }
.wk-mast-lead b.wk-lost-path { white-space: normal; overflow-wrap: anywhere; }
/* one to three guesses: as wide as the search above, centred, no empty column */
@media (min-width: 641px) {
  .wk-mast-pop.is-few { display: flex; justify-content: center; width: min(700px, 100%); }
  .wk-mast-pop.is-few a { flex: 0 1 calc((100% - 24px) / 3); }
}
.wk-lost-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.wk-lost-go .wk-btn { height: 44px; padding: 0 18px; }

.wk-ix, .wk-show, .wk-guides-sec, .wk-bento-sec { max-width: 1320px; margin: 0 auto; padding: 28px var(--gutter); }
.wk-shead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.wk-shead h2 { font: 600 1.8rem/1.2 var(--font-display); color: #fff; }
.wk-shead p { font: 400 1rem/1.55 var(--font-text); color: var(--text-3); }


/* the sections: a short grid, each card one of the section's own screens, name, count */
.wk-secs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wk-sec {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 200px; padding: 20px 22px;
  overflow: hidden; border-radius: 20px; text-decoration: none; background: #0d0a13; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  scroll-margin-top: calc(var(--top-h) + 16px); transition: box-shadow .2s var(--ease-out);
}
.wk-sec:first-child { grid-column: span 2; }
.wk-sec img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: .5; transition: opacity .2s var(--ease-out); }
.wk-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 7, 15, .15), rgba(10, 7, 15, .94) 72%), radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-rgb), .22), transparent 70%); }
.wk-sec .wk-ic { position: absolute; top: 18px; left: 20px; }
.wk-sec-text b { display: block; font: 600 1.32rem/1.2 var(--font-display); color: #fff; letter-spacing: .01em; }
.wk-sec-text span { display: block; margin-top: 4px; font: 400 .9rem/1.45 var(--font-text); color: var(--text-2); }
.wk-sec small { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--font-ui); color: var(--accent-lighter); }
.wk-sec small svg { width: 14px; height: 14px; }
@media (hover: hover) { .wk-sec:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); } .wk-sec:hover img { opacity: .66; } }
.wk-sec:target { box-shadow: inset 0 0 0 1px var(--accent-light); }

/* tips + frequent questions: one panel, two columns */
/* ---------- Home: showcase, two real windows in perspective ---------- */
.wk-show { padding-top: 0 !important; }
.wk-show-stage { position: relative; height: clamp(260px, 40vw, 600px); perspective: 2400px; perspective-origin: 50% 0%; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 97%); mask-image: linear-gradient(180deg, #000 52%, transparent 97%); }
.wk-show-stage::before { content: ''; position: absolute; left: 12%; right: 12%; top: 4%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .32), transparent); }
.wk-show-win { position: absolute; left: 50%; overflow: hidden; border-radius: 16px; transform-origin: 50% 0; background: #050308; }
.wk-show-win img { display: block; width: 100%; height: auto; }
.wk-show-win.is-back { top: 0; width: min(820px, 76%); transform: translateX(-50%) rotateX(30deg); opacity: .5; filter: saturate(.75) brightness(.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.wk-show-win.is-front { top: clamp(30px, 4.6vw, 72px); width: min(1040px, 94%); transform: translateX(-50%) rotateX(26deg); box-shadow: 0 0 0 1px rgba(255, 182, 189, .2), 0 60px 140px -40px #000, 0 0 160px -50px rgba(var(--accent-rgb), .85); }
.wk-show-win.is-front::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 182, 189, .9), transparent); }
.wk-show-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; transform: translate(-13px, -50%); }
.wk-show-pin b { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; font: 700 .76rem/1 var(--font-ui); color: #fff; background: radial-gradient(circle at 35% 30%, #ff7f89, var(--accent) 60%, #9c1d2a); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 18px rgba(var(--accent-rgb), .75); }
.wk-show-pin span { padding: 5px 10px; border-radius: 8px; font: 600 .78rem/1.2 var(--font-ui); color: #fff; white-space: nowrap; background: rgba(8, 6, 13, .92); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }

/* three columns under the showcase: icon, title, one sentence */
.wk-feats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(-70px, -4vw, -20px); }
.wk-feats > div { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 44px; text-align: center; }
.wk-feats > div + div::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-3), transparent); }
.wk-feats .wk-ic { width: 50px; height: 50px; border-radius: 14px; }
.wk-feats .wk-ic svg { width: 22px; height: 22px; }
.wk-ic-pin { font: 700 .9rem/1 var(--font-ui); color: #fff; background: radial-gradient(circle at 50% 50%, var(--accent) 0 12px, rgba(255, 255, 255, .9) 12.5px 14px, transparent 14.5px), linear-gradient(180deg, #1d1527, #0d0912) !important; }
.wk-feats h3 { margin-top: 18px; font: 600 1.28rem/1.3 var(--font-ui); color: #fff; letter-spacing: -.01em; }
.wk-feats p { margin-top: 10px; max-width: 34ch; font: 400 1rem/1.6 var(--font-text); color: var(--text-3); }
.wk-feats b, .wk-guide p b, .wk-bento-text p b { font-weight: 600; color: var(--accent-light); }

/* ---------- Home: illustrated guide cards ---------- */
.wk-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wk-guide {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; text-decoration: none;
  background: radial-gradient(120% 70% at 50% 0%, #1b1323 0%, #0d0a13 64%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -60px #000;
  transition: box-shadow .2s var(--ease-out);
}
@media (hover: hover) { .wk-guide:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -50px rgba(var(--accent-rgb), .6); } .wk-guide:hover h3 svg { color: var(--accent-light); } }
.wk-guide-art { position: relative; display: grid; place-items: center; height: 290px; overflow: hidden; }
.wk-guide-art::before, .wk-bento-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) .9px, transparent 1.3px); background-size: 10px 10px; opacity: .55; -webkit-mask-image: radial-gradient(52% 58% at 50% 56%, #000, transparent); mask-image: radial-gradient(52% 58% at 50% 56%, #000, transparent); }
.wk-guide-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 42% at 50% 64%, rgba(var(--accent-rgb), .34), transparent 72%); }
.wk-guide-text { padding: 4px 32px 30px; }
.wk-guide h3 { display: flex; align-items: center; gap: 10px; font: 600 1.38rem/1.3 var(--font-ui); color: #fff; letter-spacing: -.01em; }
.wk-guide h3 svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-4); transition: color .15s var(--ease-out); }
.wk-guide p { margin-top: 10px; font: 400 1rem/1.6 var(--font-text); color: var(--text-3); }

/* a fan of skin cards, the chosen one lit, the Kuşan key under it */
.wk-fan { position: relative; z-index: 1; width: 340px; height: 236px; }
.wk-fan img { position: absolute; left: 50%; bottom: 30px; width: 92px; height: 156px; margin-left: -46px; object-fit: cover; border-radius: 12px; transform-origin: 50% 130%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 18px 34px -12px #000; }
.wk-fan .f1 { transform: rotate(-26deg); filter: brightness(.6); }
.wk-fan .f2 { transform: rotate(-13deg); filter: brightness(.8); }
.wk-fan .f4 { transform: rotate(13deg); filter: brightness(.8); }
.wk-fan .f5 { transform: rotate(26deg); filter: brightness(.6); }
.wk-fan .f3 { width: 106px; height: 180px; margin-left: -53px; bottom: 34px; z-index: 2; box-shadow: 0 0 0 2px var(--accent-light), 0 0 34px rgba(var(--accent-rgb), .7), 0 24px 40px -14px #000; }
.wk-fan-key { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 11px; font: 600 .84rem var(--font-ui); color: #fff; white-space: nowrap; background: linear-gradient(180deg, #241a2e, #120d19); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 12px 26px -8px rgba(var(--accent-rgb), .7); }
.wk-fan-key svg { width: 15px; height: 15px; color: var(--accent-light); }

/* a glass folder, mod covers rising out of it */
.wk-folder { position: relative; z-index: 1; width: 300px; height: 226px; }
.wk-folder-back { position: absolute; left: 18px; right: 18px; top: 36px; bottom: 28px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 190, 196, .22); }
.wk-folder-back::before { content: ''; position: absolute; left: 18px; top: -15px; width: 92px; height: 22px; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 190, 196, .2); }
.wk-folder img { position: absolute; width: 148px; height: 82px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 28px -10px #000; }
.wk-folder .m1 { left: 30px; top: 30px; transform: rotate(-10deg); }
.wk-folder .m2 { left: 78px; top: 10px; z-index: 1; transform: rotate(2deg); }
.wk-folder .m3 { right: 26px; top: 32px; transform: rotate(11deg); }
.wk-folder-front { position: absolute; z-index: 2; left: 4px; right: 4px; bottom: 0; height: 130px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, rgba(56, 32, 46, .86), rgba(22, 14, 24, .96)); box-shadow: inset 0 0 0 1px rgba(255, 170, 178, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 46px -12px rgba(var(--accent-rgb), .6); }
.wk-folder-front b { font: 600 1.55rem/1 var(--font-display); letter-spacing: .01em; color: rgba(255, 255, 255, .42); }
.wk-folder-front i { position: absolute; left: 26px; right: 26px; bottom: 30px; height: 1px; background: rgba(255, 255, 255, .1); }
.wk-folder-front i + i { bottom: 22px; right: 90px; }
.wk-folder-ic { position: absolute; z-index: 3; right: 16px; top: 88px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 10px 24px -8px rgba(var(--accent-rgb), .8) !important; }

/* the sigil under an arc of the steps it automates */
.wk-orbit { position: relative; z-index: 1; width: 340px; height: 236px; }
.wk-orbit-arc { position: absolute; left: 0; top: 10px; width: 100%; height: 210px; overflow: visible; }
.wk-orbit-arc path { fill: none; stroke: rgba(255, 182, 189, .38); stroke-width: 1.2; stroke-dasharray: 3 5; }
.wk-orbit .wk-ic { position: absolute; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 26px -6px rgba(var(--accent-rgb), .8); }
.wk-orbit .wk-ic svg { width: 23px; height: 23px; }
.wk-orbit .o1 { left: 40px; top: 100px; }
.wk-orbit .o2 { left: 144px; top: 58px; }
.wk-orbit .o3 { right: 40px; top: 100px; }
.wk-orbit-seal { position: absolute; left: 50%; bottom: 2px; width: 118px; margin-left: -59px; filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), .85)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }

/* ---------- Home: bento (Discord, questions, picked guides) ---------- */
.wk-bento { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 18px; }
.wk-bento-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; text-decoration: none;
  background: radial-gradient(110% 80% at 50% 0%, #19121f, #0c0911 66%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: box-shadow .2s var(--ease-out);
}
.wk-bento-card::before { -webkit-mask-image: radial-gradient(60% 50% at 50% 34%, #000, transparent); mask-image: radial-gradient(60% 50% at 50% 34%, #000, transparent); }
@media (hover: hover) { a.wk-bento-card:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .06); } }
.wk-bento-text { position: relative; }
.wk-bento-text h3 { font: 600 1.42rem/1.3 var(--font-ui); color: #fff; letter-spacing: -.01em; }
.wk-bento-text p { margin-top: 8px; font: 400 1rem/1.6 var(--font-text); color: var(--text-3); }
.wk-bento-row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-top: auto; padding: 0 30px 28px; }

.wk-bento-tall { grid-row: span 2; justify-content: flex-end; min-height: 620px; text-align: center; background: radial-gradient(85% 46% at 50% 104%, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .08) 60%, transparent 76%), radial-gradient(110% 80% at 50% 0%, #19121f, #0c0911 66%); }
.wk-bento-tall .wk-bento-text { padding: 0 30px 34px; }
.wk-bento-tall .wk-btn { margin-top: 20px; }
.wk-beam { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wk-beam span { position: absolute; left: 50%; bottom: 0; width: 92px; height: 66%; margin-left: -46px; background: linear-gradient(0deg, rgba(255, 140, 150, .6), rgba(var(--accent-rgb), .22) 55%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.wk-beam img { position: relative; width: 196px; margin-top: -170px; filter: drop-shadow(0 0 34px rgba(var(--accent-rgb), .9)) drop-shadow(0 0 2px rgba(255, 210, 214, .9)); }

.wk-wave { position: relative; height: 210px; }
.wk-wave > svg { position: absolute; left: 0; top: 40px; width: 100%; height: 140px; }
.wk-wave > svg path { fill: none; stroke: rgba(255, 182, 189, .3); stroke-width: 1.4; }
.wk-wave .wk-ic { position: absolute; width: 60px; height: 60px; border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(255, 190, 196, .3), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px -8px rgba(var(--accent-rgb), .9); }
.wk-wave .wk-ic svg { width: 26px; height: 26px; }
.wk-wave .w1 { left: calc(16.67% - 30px); top: 40px; }
.wk-wave .w2 { left: calc(33.33% - 30px); top: 120px; }
.wk-wave .w3 { left: calc(50% - 30px); top: 40px; }
.wk-wave .w4 { left: calc(66.67% - 30px); top: 120px; }
.wk-wave .w5 { left: calc(83.33% - 30px); top: 40px; }

.wk-picks { position: relative; height: 262px; }
.wk-picks-lines { position: absolute; left: 0; top: 0; width: 100%; height: 120px; }
.wk-picks-lines path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; }
.wk-pick { position: absolute; top: 74px; width: 30%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 40px -16px #000; transition: box-shadow .15s var(--ease-out); }
.wk-pick img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.wk-pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 5, 12, .92)); }
.wk-pick b { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 11px; font: 600 1.12rem/1.15 var(--font-display); color: #fff; text-shadow: 0 2px 12px #000; }
.wk-pick.p1 { left: 6%; transform: rotate(-5deg); }
.wk-pick.p2 { left: 35%; top: 58px; z-index: 2; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 40px -10px rgba(var(--accent-rgb), .8), 0 24px 40px -16px #000; }
.wk-pick.p3 { left: 64%; transform: rotate(5deg); }
@media (hover: hover) { .wk-pick:hover { box-shadow: 0 0 0 2px var(--accent-light), 0 0 40px -8px rgba(var(--accent-rgb), .9), 0 24px 40px -16px #000; } }

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
}
/* below wide screens the three links keep only their round icon so the search stays in the centre */
@media (max-width: 1720px) {
  .wk-toplinks a { width: 40px; padding: 0; justify-content: center; }
  .wk-toplinks a > span:not(.wk-top-ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* laptops: the search gives up width so both sides stay equal (each side at least 340px) */
@media (max-width: 1360px) {
  .wk-top { grid-template-columns: minmax(max-content, 1fr) minmax(260px, calc(100% - 728px)) minmax(max-content, 1fr); }
}
@media (max-width: 1100px) {
  .wk-top { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 1240px) {
  .wk-infobox { float: none; width: auto; margin: 0 0 8px; display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .wk-article { display: flex; flex-direction: column; }
  .wk-article > * { order: 3; }
  .wk-crumbs { order: 0; }
  .wk-head { order: 1; margin-bottom: 22px; }
  .wk-infobox { order: 2; }
  .wk-infobox-pic { grid-row: span 2; align-self: start; margin: 16px 0 16px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-1); }
}
@media (max-width: 960px) {
  .wk-menu-btn { display: grid; }
  .wk-layout { grid-template-columns: minmax(0, 1fr); }
  .is-article .wk-layout::before { left: 0; }
  .wk-side { position: fixed; z-index: 60; top: var(--top-h); left: 0; width: min(320px, 86vw); background: #0a0710; box-shadow: 30px 0 60px -20px #000; transform: translateX(-102%); transition: transform .26s var(--ease-out); padding-left: 18px; }
  body.is-nav-open .wk-side { transform: none; }
  body.is-nav-open::after { content: ''; position: fixed; inset: var(--top-h) 0 0; z-index: 50; background: rgba(3, 2, 5, .6); }
  .wk-main { padding: 26px var(--gutter) 80px; }
  .wk-toplinks a:not(:last-child) { display: none; }
  .wk-mast { padding-top: 40px; }
  .wk-mast-stats > div { padding: 2px 22px; }
  .wk-mast-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-guides { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .wk-bento { grid-template-columns: minmax(0, 1fr); }
  .wk-bento-tall { grid-row: auto; min-height: 480px; }
  .wk-feats > div { padding: 0 20px; }
  .wk-show-pin span { display: none; }
  .wk-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --top-h: 58px; }
  .wk-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .wk-brand .wk-word { font-size: .94rem; }
  .wk-search-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .wk-search-btn .t, .wk-search-btn small, .wk-mast-search small { display: none; }
  .wk-toplinks { display: none; }
  .wk-top .wk-get { width: 40px; padding: 0; justify-content: center; }
  .wk-top .wk-get > span:not(.wk-top-ic) { display: none; }
  .wk-ui { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .wk-infobox { grid-template-columns: minmax(0, 1fr); }
  .wk-infobox-pic { grid-row: auto; margin: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--line-1); }
  .wk-callouts { grid-template-columns: 1fr; }
  .wk-links > div + div { box-shadow: inset 0 1px 0 var(--line-1); }
  .wk-pager { flex-direction: column; }
  .wk-pager a { max-width: none; }
  .wk-pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: .64rem; }
  .wk-steps > li { padding-left: 48px; }
  .wk-mast-search { height: 56px; font-size: .94rem; margin-top: 26px; }
  .wk-mast-seal { width: 96px; height: 96px; }
  .wk-mast-pop { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); width: auto; align-self: stretch; padding: 4px var(--gutter) 8px; }
  .wk-mast-pop::-webkit-scrollbar { display: none; }
  .wk-mast-pop { scroll-padding-inline: var(--gutter); }
  .wk-mast-pop a { flex: 0 0 62%; scroll-snap-align: start; }
  .wk-mast-search .ex { display: none; }
  .wk-mast-seal img { width: 62px; height: 62px; }
  .wk-mast-lead { font-size: 1.1rem; }
  .wk-mast-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; width: 100%; margin-top: 34px; }
  .wk-mast-stats > div { padding: 0 12px; }
  .wk-mast-stats > div:nth-child(3) { box-shadow: none; }
  .wk-mast-stats b { font-size: 1.9rem; }
  .wk-head-meta { gap: 6px 16px; }
  .wk-head-meta span + span::before { display: none; }
  .wk-search-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-search-feat .wk-sf:nth-child(3) { display: none; }
  .wk-sr.is-hit { grid-template-columns: 22px minmax(0, 1fr); }
  .wk-sr-thumb { display: none; }
  .wk-search-field { height: 64px; padding: 0 18px; }
  .wk-search-list { padding: 10px; }
  .wk-secs { grid-template-columns: minmax(0, 1fr); }
  .wk-sec:first-child { grid-column: auto; }
  .wk-sec { min-height: 0; padding-top: 18px; }
  .wk-sec .wk-ic { position: static; margin-bottom: 8px; }
  .wk-feats { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 0; }
  .wk-feats > div + div::before { left: 20%; right: 20%; top: -15px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-3), transparent); }
  .wk-show-pin { display: none; }
  .wk-guide-art { height: 250px; }
  .wk-fan, .wk-folder, .wk-orbit { transform: scale(.88); }
  .wk-guide-text, .wk-bento-row, .wk-bento-tall .wk-bento-text { padding-left: 22px; padding-right: 22px; }
  .wk-bento-row { flex-direction: column; align-items: flex-start; }
  .wk-wave { height: 170px; }
  .wk-wave .wk-ic { width: 46px; height: 46px; border-radius: 13px; }
  .wk-wave .wk-ic svg { width: 20px; height: 20px; }
  .wk-wave .w1, .wk-wave .w3, .wk-wave .w5 { top: 47px; margin-left: 7px; }
  .wk-wave .w2, .wk-wave .w4 { top: 127px; margin-left: 7px; }
  .wk-picks { height: 200px; }
  .wk-pick b { font-size: .86rem; left: 9px; bottom: 7px; }
  .wk-foot-in { padding-top: 48px; }
  .wk-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .wk-mast-orbs i, .wk-mast-seal::before, .wk-lost-seal::before { animation: none !important; }
}