/* ==========================================================================
   WargXP — shared styles for every page
   Glass on a deep ink background.

   1. Fonts          5. Glass & layout     9.  Home page       13. Footer
   2. Colours/sizes  6. Top menu           10. Labs page       14. Motion
   3. Base           7. Buttons            11. Privacy page    15. Small screens
   4. Background     8. Text styles        12. Tools (shared)

   Each tool keeps only its own extra styles in /tool/<name>/style.css.
   ========================================================================== */

/* ---------- 1. Fonts (stored on our own site) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---------- 2. Colours, fonts and sizes — change them here and every page follows ---------- */
:root {
  --bg0: #15122a;
  --bg1: #0c0b18;
  --bg2: #07060e;
  --glow1: rgba(124, 92, 255, .42);
  --glow2: rgba(255, 92, 168, .20);
  --glow3: rgba(56, 189, 248, .20);
  --panel: #221f3a;
  --panel-high: #2e2a4c;
  --accent: #6d4aff;
  --accent-bright: #b7a5ff;
  --pink: #ff7ab8;
  --cyan: #67d4ff;
  --text: #f5f3ff;
  --text-2: #aaa4c8;

  /* status colours (badges, messages) */
  --ok: #86efac;     --ok-bg: rgba(34,197,94,.12);   --ok-line: rgba(34,197,94,.3);
  --warn: #fcd34d;   --warn-bg: rgba(245,158,11,.12); --warn-line: rgba(245,158,11,.3);
  --bad: #fca5a5;    --bad-bg: rgba(239,68,68,.12);   --bad-line: rgba(239,68,68,.3);
  --info: var(--cyan); --info-bg: rgba(56,189,248,.12); --info-line: rgba(56,189,248,.3);

  --glass: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-high: color-mix(in srgb, var(--panel-high) 68%, transparent);
  --edge: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 45%, rgba(255,255,255,.1));
  --sheen: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  --field: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.1);

  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  color-scheme: dark;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg1); color: var(--text); font: 400 17px/1.6 var(--font-body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 8px; }
.muted { color: var(--text-2); }

/* ---------- 4. Background ---------- */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 8% 0%, var(--glow1), transparent 62%),
    radial-gradient(48vmax 48vmax at 100% 30%, var(--glow2), transparent 60%),
    radial-gradient(55vmax 55vmax at 10% 100%, var(--glow3), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2));
}
.grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Glass & layout ---------- */
.glass {
  position: relative; background: var(--sheen), var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border-radius: var(--radius); isolation: isolate;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(64px, 9vw, 120px) 0 0; scroll-margin-top: 90px; }

/* ---------- 6. Top menu ---------- */
.nav {
  position: sticky; top: 12px; z-index: 50; margin: 12px auto 0;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 18px; border-radius: 999px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 21px/1 var(--font-display); letter-spacing: .01em; }
.logo-mark { width: 28px; height: 32px; flex: none; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent)); }
.logo b { font-weight: 800; background: linear-gradient(100deg, var(--accent-bright), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo:hover { color: var(--text); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.07); }
.nav .btn[aria-current="page"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-bright) 55%, transparent), 0 10px 30px -10px var(--accent); }

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1 var(--font-body); color: #fff; text-decoration: none; white-space: nowrap;
  padding: 15px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff 22%), var(--accent));
  box-shadow: 0 10px 30px -10px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.3); }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn.small { padding: 11px 18px; font-size: 15px; }
.btn.ghost { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.btn.ghost:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { color: #fff; background: rgba(239,68,68,.22); box-shadow: inset 0 0 0 1px rgba(239,68,68,.45); }
.btn.done, .btn.done:hover { background: linear-gradient(180deg, #34d399, #10b981); box-shadow: 0 10px 30px -10px #10b981, inset 0 1px 0 rgba(255,255,255,.3); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* round icon-only button */
.ibtn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-grid; place-items: center; padding: 0;
  color: var(--text-2); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, box-shadow .2s; }
.ibtn:hover:not([disabled]) { color: var(--text); background: rgba(255,255,255,.13); }
.ibtn svg { width: 18px; height: 18px; }
.ibtn[disabled] { opacity: .35; cursor: not-allowed; }
.ibtn.danger:hover:not([disabled]) { color: #fff; background: rgba(239,68,68,.25); box-shadow: inset 0 0 0 1px rgba(239,68,68,.5); }
.ibtn.success, .ibtn.success:hover { color: var(--ok); background: rgba(34,197,94,.14); box-shadow: inset 0 0 0 1px rgba(34,197,94,.4); }
.ibtn.busy { pointer-events: none; }
.ibtn.busy svg { animation: spin .9s linear infinite; }

/* ---------- 8. Text styles ---------- */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(42px, 6.4vw, 86px); line-height: .98; font-weight: 800; margin: 22px 0; }
h1 .ln { display: block; }
@media (min-width: 641px) { h1 .ln { white-space: nowrap; } }
h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.02; font-weight: 800; max-width: 18ch; }
.glow { background: linear-gradient(100deg, var(--text), var(--accent-bright) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-bright); padding: 9px 14px; border-radius: 999px;
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 12px var(--accent-bright); }
.kicker { font: 500 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); margin: 0 0 16px; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 40ch; margin: 0 0 30px; }
.section-lede { color: var(--text-2); max-width: 56ch; margin: 18px 0 0; font-size: 18px; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }

/* Product icons (rounded tiles with a drawn icon or an image) */
.ico { display: grid; place-items: center; flex: none; overflow: hidden; }
.ico img { width: 100%; height: 100%; object-fit: cover; }
.ico svg { width: 56%; height: 56%; color: #fff; }
.ico.s-violet { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.ico.s-blue { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.ico.s-orange { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ico.s-green { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.ico.s-cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.ico.s-indigo { background: linear-gradient(135deg, #6366f1, #22c55e); }
.ico.s-pink { background: linear-gradient(135deg, #ec4899, #f97316); }
.ico.s-slate { background: linear-gradient(135deg, #475569, #1e293b); }
/* Section icons (outlined) */
.icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 30%, transparent); }
.icon svg { width: 22px; height: 22px; color: var(--accent-bright); }

/* ---------- 9. Home page ---------- */
.hero { padding: clamp(56px, 9vw, 110px) 0 20px; }
.hero h1 { font-size: clamp(40px, 5vw, 70px); }
.hero-grid { display: grid; grid-template-columns: 1.2fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.hero .stats li { display: grid; gap: 2px; }
.hero .stats b { font: 800 26px/1 var(--font-display); }
.hero .stats span { color: var(--text-2); font-size: 14px; }

/* the "lab bench": floating product tiles */
.bench { position: relative; aspect-ratio: 1 / .92; }
.tile {
  position: absolute; display: grid; gap: 10px; padding: 18px; border-radius: 24px; width: 46%;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.75); animation: float 7s ease-in-out infinite; text-decoration: none; color: var(--text);
}
.tile:hover { color: var(--text); }
.tile small { color: var(--text-2); font-size: 13px; line-height: 1.35; }
.tile strong { font: 700 17px/1.2 var(--font-display); }
.tile .ico { width: 48px; height: 48px; border-radius: 14px; }
.tile.t1 { left: 2%; top: 4%; }
.tile.t2 { right: 0; top: 14%; animation-delay: -2s; }
.tile.t3 { left: 8%; bottom: 6%; animation-delay: -4s; }
.tile.t4 { right: 4%; bottom: 0; animation-delay: -5.5s; }

/* what we do */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kind { padding: 24px; text-decoration: none; color: var(--text); transition: transform .3s ease; display: grid; gap: 14px; align-content: start; }
.kind:hover { color: var(--text); transform: translateY(-4px); }
.kind h3 { font-size: 22px; line-height: 1.15; }
.kind p { margin: 0; color: var(--text-2); font-size: 15px; }
.kind .go { font: 500 13px/1 var(--font-mono); color: var(--accent-bright); letter-spacing: .04em; margin-top: 4px; }

/* featured */
.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature { padding: clamp(24px, 3.5vw, 36px); display: grid; gap: 18px; align-content: start; }
.feature .top { display: flex; align-items: center; gap: 16px; }
.feature .ico { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.8); }
.feature h3 { font-size: 28px; line-height: 1.1; }
.feature .meta { color: var(--text-2); font: 500 13px/1.4 var(--font-mono); }
.feature p { margin: 0; color: var(--text-2); }
.feature .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font: 500 12px/1 var(--font-mono); padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-2); }

/* how we build */
.principles { padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; align-items: center; }
.principles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.principles li { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); }
.principles li b { display: block; font-family: var(--font-display); font-size: 20px; }
.principles li span { color: var(--text-2); font-size: 14px; }

/* final call */
.final { text-align: center; padding: clamp(40px, 7vw, 80px) var(--gutter); display: grid; justify-items: center; gap: 18px; }
.final h2 { max-width: 16ch; }
.final .mark { width: 68px; height: 78px; filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--accent) 60%, transparent)); }

/* ---------- 10. Labs page ---------- */
.labs-hero { padding: clamp(48px, 8vw, 96px) 0 10px; }
.labs-hero h1 { font-size: clamp(40px, 6vw, 76px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; }
.filters button {
  font: 600 15px/1 var(--font-body); color: var(--text-2); cursor: pointer; padding: 11px 16px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s;
}
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: none; }
.filters .n { font: 500 12px/1 var(--font-mono); opacity: .7; margin-left: 6px; }
.group { padding-top: clamp(44px, 6vw, 72px); }
.group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.group-head h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: none; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project { padding: 24px; display: grid; gap: 14px; align-content: start; transition: transform .3s ease; }
.project:hover { transform: translateY(-4px); }
.project .top { display: flex; align-items: center; gap: 14px; }
.project .ico { width: 52px; height: 52px; border-radius: 15px; }
.project h3 { font-size: 21px; line-height: 1.15; }
.project .platform { display: block; color: var(--text-2); font: 500 12px/1.4 var(--font-mono); margin-top: 3px; }
.project p { margin: 0; color: var(--text-2); font-size: 15px; }
/* the name is the link; its ::after stretches over the whole card so the card is clickable */
.project h3 a { color: var(--text); text-decoration: none; }
.project h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.project h3 .go { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -1px; color: var(--accent-bright); transition: transform .25s ease; }
.project.has-link { cursor: pointer; }
.project.has-link:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 45%, transparent), 0 18px 40px -22px var(--accent); }
.project.has-link:hover h3 a { color: var(--accent-bright); }
.project.has-link:hover .go { transform: translate(2px, -2px); }
.project h3 a:focus-visible { outline: none; }
.project.has-link:focus-within { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.project .status { justify-self: start; font: 500 12px/1 var(--font-mono); padding: 7px 10px; border-radius: 99px; letter-spacing: .03em; }
.project .status.live { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.project .status.soon { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.project .status.dev { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.group-empty { padding: 28px; color: var(--text-2); }
.group-empty b { color: var(--text); display: block; font-family: var(--font-display); font-size: 20px; }

/* ---------- 11. Privacy page ---------- */
.legal-wrap { padding-top: clamp(28px, 4vw, 48px); }
.legal { max-width: 820px; padding: clamp(26px, 5vw, 56px); }
.legal h2 { font-size: clamp(22px, 2.6vw, 28px); max-width: none; margin: 36px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-2); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.legal b { color: var(--text); }
.legal a { color: var(--accent-bright); }

/* ---------- 12. Tools (shared by every /tool/ page) ---------- */
.tool-hero { padding: clamp(44px, 7vw, 88px) 0 0; text-align: center; }
.tool-hero h1 { font-size: clamp(38px, 5.5vw, 66px); margin: 22px 0 16px; }
.tool-hero .lede { max-width: 46ch; margin: 0 auto; }
.block { padding-top: clamp(48px, 6vw, 72px); }
.narrow { max-width: 760px; margin: 0 auto; }

/* rounded text box */
.pill-input { min-width: 0; font: 500 16px/1.2 var(--font-body); color: var(--text); padding: 14px 20px;
  border-radius: 999px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  outline: none; transition: box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.pill-input::placeholder { color: var(--text-2); font-weight: 400; }
.pill-input:focus { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1.5px var(--accent-bright), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); }

/* panel header: a label on the left, small buttons (Paste, Clear…) on the right */
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-top label { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); padding-left: 6px; }
.mini-row { display: flex; gap: 6px; }
.mini { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-body); color: var(--text-2); cursor: pointer;
  padding: 9px 13px; border-radius: 999px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: color .2s, background .2s; }
.mini:hover { color: var(--text); background: rgba(255,255,255,.11); }
.mini svg { width: 16px; height: 16px; flex: none; }

/* big text box */
.text-area { width: 100%; min-height: 170px; max-height: 60vh; resize: vertical; display: block;
  font: 400 15px/1.55 var(--font-body); color: var(--text); padding: 16px 18px;
  border-radius: 18px; border: 0; background: var(--field); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  outline: none; transition: box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.text-area::placeholder { color: var(--text-2); }
.text-area:focus { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1.5px var(--accent-bright), 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); }

/* small mono line under a text box ("12 links found…") */
.field-note { font: 500 13px/1.4 var(--font-mono); color: var(--text-2); padding-left: 6px; margin: 0; }
.field-note b { color: var(--text); font-weight: 500; }

/* row of big buttons under a panel (Copy, Download, Clear…) */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { padding: 13px 20px; font-size: 15px; }
.actions .grow { flex: 1 1 auto; }

/* note under a tool ("Everything runs in your browser…") */
.how { color: var(--text-2); font-size: 15px; text-align: center; margin: 22px auto 0; max-width: 60ch; }

/* results heading + list of links with Open / Copy buttons */
.res-head { display: flex; align-items: end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.res-head h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: none; }
.res-head h2 small { display: block; font: 500 13px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--text-2); margin-top: 8px; overflow-wrap: anywhere; }
.progress { font: 500 13px/1 var(--font-mono); color: var(--text-2); }
.progress b { color: var(--text); font-weight: 500; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.link-row .num { font: 500 12px/1 var(--font-mono); color: var(--text-2); min-width: 2.2em; }
.link-row .url { font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; padding: 6px 0; }
.link-row .url small { display: block; font: 500 12px/1.4 var(--font-mono); color: var(--text-2); margin-top: 2px; }
.link-row.is-opened .url { color: var(--text-2); }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0;
  cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--text); text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .2s, color .2s, box-shadow .2s; }
.act:hover { color: var(--text); background: rgba(255,255,255,.13); }
.act svg { width: 17px; height: 17px; flex: none; }
.act.open.on { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.act.copy.on { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }

/* small message at the bottom of the screen */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--panel-high) 94%, transparent); color: var(--text); font: 600 14px/1.3 var(--font-body); text-align: center;
  padding: 13px 20px; border-radius: 999px; max-width: calc(100% - 32px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 40px -12px rgba(0,0,0,.8);
  transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { color: #fecaca; box-shadow: inset 0 0 0 1px rgba(239,68,68,.45), 0 16px 40px -12px rgba(0,0,0,.8); }

/* ---------- 13. Footer ---------- */
footer { margin-top: 90px; padding: 30px 0 40px; border-top: 1px solid rgba(255,255,255,.08); color: var(--text-2); font-size: 14px; }
footer .wrap { display: flex; flex-direction: column; gap: 18px; justify-content: center; align-items: center; text-align: center; }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.socials a { font: 600 14px/1 var(--font-body); color: var(--text-2); padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, background .2s; }
.socials a:hover { color: var(--text); background: rgba(255,255,255,.1); }

/* ---------- 14. Motion ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.load { animation: rise 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 15. Small screens ---------- */
@media (max-width: 980px) {
  .hero-grid, .principles, .featured { grid-template-columns: minmax(0, 1fr); }
  .kinds, .grid { grid-template-columns: repeat(2, 1fr); }
  .bench { max-width: 560px; width: 100%; margin: 10px auto 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { gap: 8px; }
  .nav-links a { padding: 8px 10px; font-size: 14px; }
  .wide-only { display: none; }
  .kinds, .grid, .principles ul { grid-template-columns: 1fr; }
  .tile { width: 52%; padding: 14px; gap: 8px; border-radius: 20px; }
  .tile .ico { width: 40px; height: 40px; border-radius: 12px; }
  .tile strong { font-size: 15px; }
  .tile small { font-size: 12px; }
  /* tools */
  .text-area { font-size: 16px; min-height: 150px; }
  .mini span { display: none; }
  .mini { padding: 9px 11px; }
  .actions .btn { flex: 1 1 calc(50% - 5px); padding: 13px 14px; }
  .actions .grow { flex-basis: 100%; }
  .link-row { grid-template-columns: minmax(0, 1fr) auto auto; padding: 10px 8px 10px 14px; }
  .link-row .num { display: none; }
  .act { width: 40px; padding: 0; }
  .act span { display: none; }
}
@media (max-width: 360px) {
  .logo span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}