/* Guia PES. Reference: docs/DESIGN.md (Duolingo): a course map of units and nodes, flat colour, pressable 3D
   buttons and cards (a thicker bottom border, never blurred shadows), one colour per Fag, Rubik everywhere.
   Shape rule: 16px for buttons, cards and inputs; nodes are circles; pills 999px. */
@font-face { font-family: "Rubik"; src: url("/fonts/rubik-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --f-sans: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f7; --field: #ffffff;
  --ink: #4b4b4b; --head: #1f2a33; --muted: #6b6b6b; --line: #e5e5e5; --line-strong: #cfcfcf;
  --green: #58cc02; --green-dark: #46a302; --green-text: #2c7a00; --green-soft: #d7ffb8; --on-color: #102b00;
  --blue: #1cb0f6; --blue-dark: #1899d6; --blue-text: #0a6ca3; --blue-soft: #ddf4ff;
  --red: #ff4b4b; --red-dark: #ea2b2b; --red-text: #c2161f; --red-soft: #ffdfe0;
  --gold: #ffc800; --gold-dark: #d9a900; --orange: #ff9600; --purple: #ce82ff;
  --f1: #ffc800; --f1d: #d9a900; --f2: #ff9600; --f2d: #d97f00; --f3: #58cc02; --f3d: #46a302;
  --f4: #1cb0f6; --f4d: #1899d6; --f5: #ce82ff; --f5d: #a568cc; --locked: #e5e5e5; --locked-d: #cfcfcf;
  --accent: #1cb0f6; --accent-hover: #1899d6; --accent-ink: #062a3d; --accent-text: #0a6ca3;
  --danger: #c2161f; --r-s: 12px; --r-m: 16px; --r-btn: 16px;
  --shadow: 0 2px 0 var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131f24; --surface: #131f24; --surface-2: #1b2b32; --field: #1b2b32;
    --ink: #dce6eb; --head: #f1f7fb; --muted: #a2b3bc; --line: #37464f; --line-strong: #4b5d67;
    --green-text: #8ee000; --green-soft: #1f3a12; --blue-text: #49c0f8; --blue-soft: #10334a; --red-text: #ff7b7b; --red-soft: #3d1c20;
    --locked: #37464f; --locked-d: #2a3840;
    --accent: #1cb0f6; --accent-hover: #49c0f8; --accent-ink: #052131; --accent-text: #49c0f8;
    --danger: #ff7b7b;
  }
}
body { font-weight: 400; letter-spacing: .005em; }
h1, h2, h3 { color: var(--head); font-weight: 750; letter-spacing: -0.02em; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--head); }
.brand svg { width: 34px; height: 34px; }
.mono, code, kbd { font-family: var(--f-mono); }
code { font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 1px 6px; }
a { color: var(--blue-text); }
.prose a:not(.btn), .legal a:not(.btn) { color: var(--blue-text); }
@media (min-width: 900px) and (max-width: 1199px) { .head-nav { display: none; } .menu { display: block; } }
@media (min-width: 1200px) { .head-nav a { font-weight: 600; } }
.head-nav a[aria-current], .menu-panel a[aria-current] { color: var(--blue-text); background: var(--blue-soft); }

/* ------------------------------------------------------------------ pressable buttons */
.btn { border-radius: var(--r-btn); border: 2px solid transparent; border-bottom-width: 4px; font-weight: 700; letter-spacing: .03em; min-height: 50px; padding: 0 22px; transition: transform .1s, border-bottom-width .1s, filter .15s; }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn-solid { background: var(--green); border-color: var(--green-dark); color: var(--on-color); }
.btn-solid:hover { background: var(--green); filter: brightness(1.06); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--blue-text); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn-blue { background: var(--blue); border-color: var(--blue-dark); color: var(--accent-ink); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-m); padding: 22px; }
a.card { display: block; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
a.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
a.card:active { transform: translateY(2px); border-bottom-width: 2px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.kicker { text-wrap: balance; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); margin: 0 0 10px; }

/* ------------------------------------------------------------------ layout */
.sec { padding-block: 64px 0; }
.sec-head { max-width: 760px; margin-bottom: 26px; }
.sec h2, .page-h h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.1; }
.page-h { padding-block: 44px 8px; }
.page-h h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); max-width: 20ch; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink); }
.toc a:hover { border-color: var(--blue); color: var(--blue-text); }
.note { padding: 14px 16px; border-radius: var(--r-s); background: var(--blue-soft); color: var(--ink); border: 2px solid transparent; }
.note.warn { background: var(--red-soft); }
.note.ok { background: var(--green-soft); }
.note b:first-child { color: var(--head); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: 40px 16px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; padding-block: 24px; } }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--green-text); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* "now" card */
.now { position: relative; padding: 24px; }
.now-week { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; font-weight: 700; color: var(--head); }
.now-week span:last-child { color: var(--muted); font-weight: 600; font-size: .9rem; }
.bar { height: 16px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--green); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .12), inset 0 4px 0 rgb(255 255 255 / .35); transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.next-box { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--line); }
.days { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; background: var(--fag, var(--green)); color: var(--on-color); border-bottom: 5px solid var(--fagd, var(--green-dark)); text-align: center; line-height: 1; }
.days b { font-size: 2.4rem; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.days span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.next-box p { margin: 0; }
.next-what { font-weight: 750; color: var(--head); font-size: 1.1rem; }
.next-when { color: var(--muted); font-size: .92rem; }

/* ------------------------------------------------------------------ course map */
.map { position: relative; display: grid; gap: 34px; max-width: 560px; margin-inline: auto; }
.unit { display: grid; gap: 18px; }
.unit-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-radius: var(--r-m); background: var(--fag); border-bottom: 5px solid var(--fagd); color: var(--on-color); }
.unit-head h3 { color: inherit; margin: 0; font-size: 1.15rem; }
.unit-head p { margin: 2px 0 0; font-size: .86rem; font-weight: 600; }
.unit-head h2 { color: inherit; }
.unit-head .tag { background: rgb(255 255 255 / .55); color: var(--on-color); }
.unit.locked .unit-head { background: var(--locked); border-bottom-color: var(--locked-d); color: var(--ink); }
.nodes { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 22px; justify-items: center; }
.node { --x: 0px; transform: translateX(var(--x)); position: relative; }
.node button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 70px; height: 64px; border-radius: 50%; background: var(--fag); border-bottom: 7px solid var(--fagd); color: var(--on-color); transition: transform .12s; }
.node button:hover { filter: brightness(1.05); }
.node button:active { transform: translateY(4px); border-bottom-width: 3px; }
.node button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.node button .i { width: 30px; height: 30px; }
.node.done button { opacity: 1; }
.node.todo button { background: var(--locked); border-bottom-color: var(--locked-d); color: var(--muted); }
.node.now button { box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px var(--fag); }
.node .bubble { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--surface); border: 2px solid var(--line); color: var(--head); border-color: var(--fag); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 12px; animation: bob 1.8s ease-in-out infinite; }
.node .bubble::after { content: ""; position: absolute; top: 100%; left: 50%; width: 10px; height: 10px; background: var(--surface); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translate(-50%, -5px) rotate(45deg); }
@keyframes bob { 50% { transform: translate(-50%, -5px); } }
.node .label { position: absolute; top: 50%; left: calc(100% + 14px); transform: translateY(-50%); width: max-content; max-width: 180px; font-size: .84rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.node .label b { display: block; color: var(--head); font-weight: 700; }
.node.left .label { left: auto; right: calc(100% + 14px); text-align: right; }
.pop { position: fixed; z-index: 70; inset: auto 12px 12px; max-width: 460px; margin-inline: auto; padding: 20px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 20px; transform: translateY(20px); opacity: 0; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }
.pop.open { transform: none; opacity: 1; }
.pop h3 { margin: 0 0 4px; }
.pop .pop-date { color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.pop .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ guide cards */
.guides { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.guide { display: grid; gap: 8px; align-content: start; }
.guide .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--c, var(--green)); border-bottom: 4px solid var(--cd, var(--green-dark)); color: var(--on-color); margin-bottom: 6px; }
.guide .ico .i { width: 28px; height: 28px; }
.guide h3 { margin: 0; font-size: 1.15rem; }
.guide p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------------ checklists */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: block; }
.checklist label { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.checklist label:hover { border-color: var(--line-strong); }
.checklist input { appearance: none; width: 30px; height: 30px; margin: 0; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.checklist input::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--on-color); border-bottom: 3px solid var(--on-color); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.checklist input:checked { background: var(--green); border-color: var(--green-dark); transform: scale(1.06); }
.checklist input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checklist input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.checklist label:has(input:checked) { background: var(--green-soft); border-color: transparent; }
.checklist .txt { line-height: 1.45; padding-top: 3px; }
.checklist .txt small { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cl-head h3 { margin: 0; }
.ring { width: 54px; height: 54px; flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--green); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .6s cubic-bezier(.16,1,.3,1); }
.ring text { font: 800 14px var(--f-sans); fill: var(--head); }

/* ------------------------------------------------------------------ Fag tabs (deliverables) */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.tabs button { all: unset; cursor: pointer; padding: 10px 16px; border-radius: 14px; font-weight: 700; border: 2px solid var(--line); border-bottom-width: 4px; color: var(--ink); background: var(--surface); }
.tabs button[aria-selected="true"] { background: var(--fag); border-color: var(--fagd); color: var(--on-color); }
.tabs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.panel-fag { display: grid; gap: 20px; }
.fag-1 { --fag: var(--f1); --fagd: var(--f1d); } .fag-2 { --fag: var(--f2); --fagd: var(--f2d); }
.fag-3 { --fag: var(--f3); --fagd: var(--f3d); } .fag-4 { --fag: var(--f4); --fagd: var(--f4d); }
.fag-5 { --fag: var(--f5); --fagd: var(--f5d); } .fag-0 { --fag: var(--locked); --fagd: var(--locked-d); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); font-family: var(--f-mono); font-size: .9rem; overflow-wrap: anywhere; }
.files li span { color: var(--muted); font-family: var(--f-sans); font-size: .82rem; }
.copy { all: unset; cursor: pointer; font-family: var(--f-sans); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-text); padding: 4px 8px; border-radius: 8px; }
.copy:hover { background: var(--blue-soft); }
.copy:focus-visible { outline: 2px solid var(--blue); }
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-weight: 700; color: var(--head); font-size: .92rem; }
.input input, .input select, select.select, textarea { border-width: 2px; border-radius: 14px; background: var(--field); font-weight: 500; }
textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 2px solid var(--line-strong); color: var(--ink); font: inherit; resize: vertical; }
textarea:focus { outline: none; border-color: var(--blue); }
.row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tree { font-family: var(--f-mono); font-size: .9rem; line-height: 1.7; background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px; padding: 16px 18px; overflow-x: auto; white-space: pre; margin: 0; }

/* ------------------------------------------------------------------ calendar list */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.week { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
.wk { display: grid; place-items: center; text-align: center; height: 70px; border-radius: 18px; background: var(--fag); border-bottom: 5px solid var(--fagd); color: var(--on-color); line-height: 1.05; }
.wk b { font-size: 1.6rem; font-weight: 800; display: block; }
.wk span { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.week.past .wk { background: color-mix(in srgb, var(--fag) 35%, var(--surface-2)); border-bottom-color: color-mix(in srgb, var(--fagd) 35%, var(--surface-2)); color: var(--ink); }
.week.current .wk { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--fag); }
.week-body { padding: 12px 16px; border: 2px solid var(--line); border-radius: 16px; min-height: 70px; }
.week.current .week-body { border-color: var(--fag); }
.week-dates { font-size: .84rem; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.evs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.evs li { display: flex; gap: 8px; align-items: baseline; }
.evs .d { font-family: var(--f-mono); font-size: .82rem; color: var(--muted); min-width: 6.6em; }
.evs .k-due { font-weight: 800; color: var(--head); }
.evs .k-off { color: var(--muted); font-style: italic; }
.evs li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transform: translateY(-1px); }
.evs .k-talk::before { background: var(--red); }
.evs .k-due::before { background: var(--fag); box-shadow: 0 0 0 2px var(--fagd); }
.evs .k-meet::before { background: var(--blue); }

/* ------------------------------------------------------------------ user stories */
.us-card { font-size: 1.05rem; line-height: 1.5; padding: 18px 20px; border-radius: 16px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); }
.us-card .w { color: var(--blue-text); font-weight: 750; }
.pair { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0 0 18px; }
.bad, .good { position: relative; padding: 16px 18px 16px 52px; border-radius: 16px; border: 2px solid; }
.bad { border-color: var(--red); background: var(--red-soft); }
.good { border-color: var(--green); background: var(--green-soft); }
.bad::before, .good::before { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; }
.bad::before { content: "✕"; background: var(--red-dark); }
.good::before { content: "✓"; background: var(--green-dark); }
.bad p, .good p { margin: 0; }
.bad small, .good small { display: block; margin-top: 6px; color: var(--ink); opacity: .85; }
.invest { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.flip { perspective: 900px; min-height: 172px; }
.flip button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; height: 100%; min-height: 172px; position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.flip button[aria-pressed="true"] { transform: rotateY(180deg); }
.flip button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 16px; }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; padding: 16px; display: grid; align-content: center; gap: 4px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); }
.flip .front { text-align: center; }
.flip .front b { font-size: 3rem; line-height: 1; font-weight: 800; color: var(--c); }
.flip .front span { font-weight: 700; color: var(--head); }
.flip .back { transform: rotateY(180deg); font-size: .92rem; background: var(--surface-2); }
.gwt { font-family: var(--f-mono); font-size: .92rem; line-height: 1.7; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--line); white-space: pre-wrap; margin: 0 0 14px; }
.gwt b { color: var(--blue-text); }

/* planning poker */
.poker { display: grid; gap: 16px; }
.poker-story { font-weight: 600; }
.cards { display: flex; flex-wrap: wrap; gap: 10px; }
.pcard { all: unset; cursor: pointer; display: grid; place-items: center; width: 58px; height: 82px; border-radius: 12px; font-weight: 800; font-size: 1.4rem; color: var(--head); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 5px; transition: transform .15s; }
.pcard:hover { transform: translateY(-4px); }
.pcard[aria-pressed="true"] { background: var(--blue); border-color: var(--blue-dark); color: var(--accent-ink); transform: translateY(-8px); }
.pcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.votes { display: flex; flex-wrap: wrap; gap: 10px; min-height: 90px; }
.vote { width: 58px; height: 82px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; background: var(--blue-soft); border: 2px solid var(--line); perspective: 600px; }
.vote.hidden { background: repeating-linear-gradient(45deg, var(--blue) 0 8px, var(--blue-dark) 8px 16px); color: transparent; }
.vote small { display: block; font-size: .62rem; font-weight: 700; color: var(--muted); text-align: center; }

/* quiz */
.quiz { display: grid; gap: 14px; }
.q { font-weight: 700; color: var(--head); font-size: 1.08rem; }
.opts { display: grid; gap: 10px; }
.opt { all: unset; box-sizing: border-box; cursor: pointer; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; font-weight: 500; line-height: 1.4; }
.opt:hover { background: var(--surface-2); }
.opt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt.right { background: var(--green-soft); border-color: var(--green); }
.opt.wrong { background: var(--red-soft); border-color: var(--red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz-bar { display: flex; align-items: center; gap: 12px; }
.quiz-bar .bar { flex: 1; }
.feedback { padding: 14px 16px; border-radius: 14px; font-weight: 600; }
.feedback.right { background: var(--green-soft); color: var(--green-text); }
.feedback.wrong { background: var(--red-soft); color: var(--red-text); }

/* task board */
.board { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
.col { background: var(--surface-2); border-radius: 16px; padding: 12px; min-height: 220px; border: 2px dashed transparent; transition: border-color .2s, background .2s; }
.col.over { border-color: var(--blue); background: var(--blue-soft); }
.col h4 { margin: 0 0 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.task { background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; font-size: .9rem; line-height: 1.35; touch-action: none; }
.task:active { cursor: grabbing; }
.task.dragging { opacity: .5; }
.task small { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-weight: 600; }
.task .who { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--purple); color: #1d0a2b; font-size: .66rem; font-weight: 800; }
.task:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* charts */
.chart-box { display: grid; gap: 16px; }
.chart { width: 100%; height: auto; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.chart .grid line { stroke: var(--line); }
.chart text { font: 600 12px var(--f-sans); fill: var(--muted); }
.chart .ideal { stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 6 6; fill: none; }
.chart .real { stroke: var(--blue); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: var(--surface); stroke: var(--blue); stroke-width: 3; }
.chart .barv { fill: var(--green); }
.chart .barv-top { fill: var(--green-dark); }
.chart .avg { stroke: var(--orange); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.chart .title { font: 800 14px var(--f-sans); fill: var(--head); }
.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.nums { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.nums label { display: grid; gap: 2px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.nums input { width: 100%; min-height: 42px; padding: 0 10px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--field); color: var(--ink); font: 600 1rem var(--f-mono); }
.nums input:focus { outline: none; border-color: var(--blue); }
.seg { border-radius: 16px; }
.seg label { border-radius: 12px; }

/* grade simulator */
.sim { display: grid; gap: 22px; }
@media (min-width: 960px) { .sim { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } .sim-out { position: sticky; top: 88px; } }
.slider-f { display: grid; gap: 4px; }
.slider-f .top { display: flex; justify-content: space-between; font-weight: 700; color: var(--head); }
.slider-f output { font-family: var(--f-mono); color: var(--blue-text); }
.slider-f small { color: var(--muted); }
input[type="range"] { accent-color: var(--green); height: 28px; }
.score { display: grid; place-items: center; text-align: center; padding: 26px; }
.score .big { font-size: clamp(3.6rem, 10vw, 5.4rem); font-weight: 800; line-height: 1; color: var(--head); font-variant-numeric: tabular-nums; }
.score .big.pass { color: var(--green-text); }
.score .big.fail { color: var(--red-text); }
.formula { font-family: var(--f-mono); font-size: .88rem; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; overflow-x: auto; white-space: nowrap; }
.comps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 16px; }
.comp { border: 2px solid var(--line); border-radius: 14px; padding: 10px; }
.comp b { display: block; font-size: 1.8rem; font-weight: 800; }
.comp span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.wtable td.c, .wtable th.c { text-align: center; }
.levels td:first-child { font-weight: 700; color: var(--head); }

/* timer */
.timer { display: grid; justify-items: center; gap: 18px; text-align: center; }
.dial { position: relative; width: min(280px, 72vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 16; }
.dial .bg { stroke: var(--line); }
.dial .zone { stroke: var(--green-soft); }
.dial .fg { stroke: var(--blue); stroke-linecap: round; transition: stroke .3s; }
.dial.in .fg { stroke: var(--green); }
.dial.over .fg { stroke: var(--red); }
.dial .t { position: absolute; inset: 0; display: grid; place-content: center; }
.dial .t b { font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; }
.dial .t span { color: var(--muted); font-weight: 600; font-size: .9rem; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* diagrams: every colour is a token, so light and dark both keep contrast */
:root { --d-new: #e3f9d0; --d-open: #dcf2ff; --d-iface: #f3e6ff; --d-test: #fff1c2; --d-data: #e8eefc; --d-run: #e6f6ee; --d-ci: #eceffc; --d-net: #fff0e0; --d-team: #ffe8e8; --d-vm: #f4f8fb; --d-docker: #eef7fd; --d-note: #fffbea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --d-new: #1f3a12; --d-open: #10334a; --d-iface: #2f2244; --d-test: #3a3214; --d-data: #1c2846; --d-run: #143428; --d-ci: #232a46; --d-net: #3b2a14; --d-team: #3d1c20; --d-vm: #17262d; --d-docker: #122c3c; --d-note: #2e2a14; } }
.diagram { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 12px; overflow-x: auto; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram svg text { font: 500 13px var(--f-sans); fill: var(--head); }
.diagram svg .h { font-weight: 700; font-size: 14px; }
.diagram svg .it { font-style: italic; }
.diagram svg .m { font: 500 12px var(--f-mono); fill: var(--ink); }
.diagram svg .rl { font: 600 12px var(--f-sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.diagram svg .col { font: 800 12px var(--f-sans); letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.diagram svg .kt { font: 800 10px var(--f-mono); fill: var(--head); }
.diagram svg .body { fill: var(--surface); }
.diagram svg .frame { fill: none; stroke: var(--head); stroke-width: 1.6; }
.diagram svg .sep { stroke: var(--head); stroke-width: 1.2; }
.diagram svg .hd { fill: var(--surface-2); }
.diagram svg .hd.new { fill: var(--d-new); } .diagram svg .hd.open { fill: var(--d-open); } .diagram svg .hd.iface { fill: var(--d-iface); }
.diagram svg .hd.test { fill: var(--d-test); } .diagram svg .hd.data { fill: var(--d-data); }
.diagram svg .note { fill: var(--d-note); stroke: var(--line-strong); stroke-width: 1.2; }
.diagram svg .card { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.6; }
.diagram svg .card.c-client { fill: var(--d-new); } .diagram svg .card.c-run { fill: var(--d-run); } .diagram svg .card.c-data { fill: var(--d-data); }
.diagram svg .card.c-ext { fill: var(--d-open); } .diagram svg .card.c-team { fill: var(--d-team); } .diagram svg .card.c-net { fill: var(--d-net); }
.diagram svg .card.c-ci { fill: var(--d-ci); } .diagram svg .card.c-new { fill: var(--d-new); }
.diagram svg .card.dash, .diagram svg .l.dash { stroke-dasharray: 7 5; }
.diagram svg .zone { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.6; }
.diagram svg .zone.z-vm { fill: var(--d-vm); stroke: var(--f4d); stroke-width: 2; }
.diagram svg .zone.z-docker { fill: var(--d-docker); stroke: #2496ed; stroke-dasharray: 8 5; }
.diagram svg .chip { fill: #fff; stroke: var(--line-strong); stroke-width: 1; }
.diagram svg .glyph { fill: var(--surface); stroke: var(--head); stroke-width: 1.4; }
.diagram svg .key { stroke: none; } .diagram svg .key.pk { fill: var(--gold); } .diagram svg .key.fk { fill: var(--d-open); stroke: var(--f4d); stroke-width: 1; }
.diagram svg .l { stroke: var(--head); stroke-width: 1.7; fill: none; }
.diagram svg .l.dot { stroke-dasharray: 2 5; stroke-linecap: round; stroke: var(--f2d); }
.diagram svg .mk { fill: var(--head); } .diagram svg .mk-open { fill: var(--surface); stroke: var(--head); stroke-width: 1.4; }
.diagram svg line:not([class]) { stroke: var(--head); stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) { .diagram svg .l.dot { animation: flow 1.4s linear infinite; } }
.diagram figcaption, figure figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; }
figure { margin: 0 0 22px; }
.mistakes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mistakes li { padding: 12px 14px 12px 44px; position: relative; border-radius: 14px; background: var(--red-soft); }
.mistakes li::before { content: "!"; position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--red-dark); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: .8rem; }

/* gitflow */
.gitflow svg { min-width: 560px; }
.gitflow .lane { font: 700 12px var(--f-mono); }
.gitflow circle { stroke: var(--surface); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .gitflow.in .br { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
  .gitflow.in circle { animation: pop .4s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
  @keyframes pop { from { transform: scale(0); } }
}

/* service rotation */
.rotation { display: grid; place-items: center; }
.rotation svg { width: min(420px, 100%); height: auto; }
.rotation text { font: 800 22px var(--f-sans); fill: var(--on-color); }
.rotation .lbl { font: 600 12px var(--f-sans); fill: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .rotation .flow { stroke-dasharray: 6 10; animation: flow 1.2s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -32; } }
}

/* faq + tables */
.faq { display: grid; border-top: 2px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 2px; font-weight: 700; color: var(--head); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--blue-text); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 2px 18px; max-width: 70ch; }
.table-scroll { border-width: 2px; border-radius: 16px; }
thead th { background: var(--surface-2); }

/* confetti canvas */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* 404 */
.nf .nf-code { color: var(--green-text); font-family: var(--f-sans); font-weight: 800; }
@media print { .node .bubble, #confetti { display: none; } }
.node.now { margin-top: 34px; }
@media (max-width: 560px) { .node { --x: 0px !important; } .node .label { max-width: min(150px, 34vw); } }

/* tools: code tabs, NAT table, commit checker */
:root { --warn-text: #9a5200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn-text: #ffb347; } }
.tabs.code button { --fag: var(--blue); --fagd: var(--blue-dark); font-family: var(--f-mono); font-size: .88rem; }
.out, .cmd { font-family: var(--f-mono); font-size: .84rem; line-height: 1.6; background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0; overflow: auto; white-space: pre; tab-size: 2; }
.out { max-height: 440px; }
.out code, .cmd code { background: none; border: 0; padding: 0; font-size: inherit; }
.out-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
textarea.code { font-family: var(--f-mono); font-size: .88rem; line-height: 1.6; min-height: 330px; tab-size: 2; white-space: pre; overflow: auto; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.types code { font-size: .8rem; }
table.nat td, table.nat th { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.checks li::before { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-weight: 800; font-size: .85rem; }
.checks li.ok::before { content: "✓"; background: var(--green); color: var(--on-color); }
.checks li.bad::before { content: "✗"; background: var(--red); color: #fff; }
.checks li.warn::before { content: "!"; background: var(--gold); color: #3d2e00; }
.checks li.info::before { content: "i"; background: var(--blue-soft); color: var(--blue-text); }
.checks li.bad { color: var(--red-text); } .checks li.warn { color: var(--warn-text); } .checks li.info { color: var(--muted); font-weight: 500; }
.count { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); font-weight: 700; }
.count.over { color: var(--red-text); }
.steps { counter-reset: st; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps > li { counter-increment: st; position: relative; padding-left: 52px; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--f4); color: var(--on-color); font-weight: 800; border-bottom: 4px solid var(--f4d); }
.steps > li b:first-child { color: var(--head); }

/* architecture flow (MVVM, BLoC, mock swap) */
.flow-d { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.flow-d .box { overflow-wrap: anywhere; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; padding: 16px 12px; text-align: center; background: var(--surface); font-weight: 750; color: var(--head); }
.flow-d .box small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.flow-d .box.c1 { border-color: var(--f3d); } .flow-d .box.c2 { border-color: var(--f4d); } .flow-d .box.c3 { border-color: var(--f5d); }
.flow-d .arr { display: grid; gap: 4px; justify-items: center; font-size: .74rem; color: var(--muted); font-weight: 600; }
.flow-d .arr i { display: block; width: 46px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 14px); }
.flow-d .arr i.back { transform: scaleX(-1); background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 14px); }
@media (prefers-reduced-motion: no-preference) { .flow-d .arr i { background-size: 14px 4px; animation: dash .7s linear infinite; } @keyframes dash { to { background-position: 14px 0; } } }
@media (max-width: 640px) { .flow-d { grid-template-columns: 1fr; } .flow-d .arr i { animation: none !important; } .flow-d .arr { grid-auto-flow: column; justify-content: center; } .flow-d .arr i { width: 4px; height: 26px; background: repeating-linear-gradient(180deg, var(--blue) 0 8px, transparent 8px 14px); } .flow-d .arr i.back { transform: scaleY(-1); background: repeating-linear-gradient(180deg, var(--green) 0 8px, transparent 8px 14px); } }
.swap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.swap .box.fake { border-style: dashed; }

p > a:only-child { display: inline-block; min-height: 24px; }
.fag-0 .wk { color: var(--ink); }

/* presentation mode: one section per slide, sized for a projector */
.pres-open { position: fixed; right: 18px; bottom: 18px; z-index: 40; all: unset; position: fixed; right: 18px; bottom: 18px; z-index: 40; cursor: pointer; padding: 10px 16px; border-radius: 14px; font-weight: 700; color: var(--on-color); background: var(--green); border-bottom: 4px solid var(--green-dark); box-shadow: 0 4px 18px rgb(0 0 0 / .12); }
.pres-open:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
html.present { font-size: clamp(16px, 0.55vw + 10px, 26px); scroll-behavior: auto; }
html.present .site-head, html.present .site-foot, html.present .pres-open, html.present main > :not(section), html.present .adsbygoogle, html.present .google-auto-placed, html.present .skip { display: none !important; }
html.present main > section { display: none !important; }
html.present main > section.cur { display: flex !important; flex-direction: column; justify-content: center; min-height: 100vh; box-sizing: border-box; padding: 5vh 0 11vh; margin: 0 auto; }
html.present main > section.cur.wrap, html.present main > section.cur .wrap { max-width: min(1500px, 92vw); width: 100%; }
html.present main > section.cur > .wrap { margin: 0 auto; }
html.present .diagram svg { min-width: 0 !important; max-height: 58vh; }
.pres-hud { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px 8px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 8px 30px rgb(0 0 0 / .18); opacity: .35; transition: opacity .25s; font-size: 15px; }
.pres-hud:hover, .pres-hud:focus-within { opacity: 1; }
.pres-hud button { all: unset; cursor: pointer; min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; color: var(--head); }
.pres-hud button:hover { background: var(--surface-2); }
.pres-hud button:focus-visible { outline: 3px solid var(--blue); }
.pres-where { padding: 0 8px; color: var(--muted); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.pres-where b { color: var(--head); }
.pres-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pres-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s cubic-bezier(.16,1,.3,1); }
.pres-toast { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 70; padding: 22px 30px; border-radius: 20px; background: var(--green); color: var(--on-color); font-weight: 800; font-size: 1.6rem; border-bottom: 6px solid var(--green-dark); }
@media (prefers-reduced-motion: no-preference) { html.present main > section.cur { animation: slidein .35s cubic-bezier(.16,1,.3,1); } @keyframes slidein { from { opacity: 0; transform: translateX(24px); } } }
@media print { .pres-open, .pres-hud { display: none !important; } }

/* presentation mode on a projector: forced light theme with darker text (pale greys vanish when projected) */
html.present[data-theme="light"] { color-scheme: light; --ink: #2a3036; --muted: #4a535a; --line: #d5d9dc; --line-strong: #b4bcc2; }
html.present[data-theme="dark"] { color-scheme: dark; --bg: #131f24; --surface: #131f24; --surface-2: #1b2b32; --field: #1b2b32; --ink: #dce6eb; --head: #f1f7fb; --muted: #a2b3bc; --line: #37464f; --line-strong: #4b5d67; --green-text: #8ee000; --green-soft: #1f3a12; --blue-text: #49c0f8; --blue-soft: #10334a; --red-text: #ff7b7b; --red-soft: #3d1c20; --locked: #37464f; --locked-d: #2a3840; --accent-text: #49c0f8; --d-new: #1f3a12; --d-open: #10334a; --d-iface: #2f2244; --d-test: #3a3214; --d-data: #1c2846; --d-run: #143428; --d-ci: #232a46; --d-net: #3b2a14; --d-team: #3d1c20; --d-vm: #17262d; --d-docker: #122c3c; --d-note: #2e2a14; }
html.present body { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------------------------ hero stage (3D on wide screens) */
.hero-stage { position: relative; }
.hero-stage .card { position: relative; z-index: 1; }
/* The canvas never reaches the text column: it covers the stage, a band above the card and a strip on its right. */
.hero-3d { position: absolute; z-index: 0; top: -24px; left: 0; width: calc(100% + 32px); height: calc(100% + 48px); pointer-events: none; }
.hero { overflow-x: clip; }
@media (min-width: 980px) {
  .hero-stage { padding: 92px 0 36px; }
  .hero-stage .card { width: calc(100% - 78px); }   /* always, so the canvas arriving later shifts nothing */
  .hero-stage .card { box-shadow: 0 0 0 8px var(--bg); }
}
/* Phones: the live countdown sits right under the title instead of two screens down. */
@media (max-width: 979px) {
  .hero { padding-block: 24px 8px; }
  .hero-grid { gap: 18px; }
  .hero-text { display: contents; }
  .hero-text .kicker { order: 1; margin-bottom: -10px; }
  .hero-text h1 { order: 2; margin-bottom: 0; }
  .hero-stage { order: 3; }
  .hero-text .lead { order: 4; margin: 0; }
  .hero-text .actions { order: 5; margin-top: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-text .actions .btn { width: 100%; }
  .now { padding: 18px; }
  .next-box { margin-top: 14px; padding-top: 14px; }
  .days { width: 76px; height: 76px; border-radius: 20px; }
  .days b { font-size: 2rem; }
}

/* ------------------------------------------------------------------ course map: path and folded Fags */
.map-path { position: absolute; inset: 0 0 auto 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.map-path path { fill: none; stroke-linecap: round; stroke-width: 10; }
.map-path .track { stroke: var(--line); stroke-dasharray: 2 18; }
.map-path .done { stroke: var(--green); opacity: .35; }
.map > .unit, .map > .map-fold { position: relative; z-index: 1; }
.unit.folded { gap: 0; }
.map-fold { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; justify-content: center; padding: 12px 16px; border-radius: var(--r-m); border: 2px dashed var(--line-strong); color: var(--muted); font-weight: 700; font-size: .92rem; background: var(--surface); }
.map-fold:hover { border-color: var(--green); color: var(--head); }
.map-fold:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.map-fold-dots { display: inline-flex; }
.map-fold-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--fag); border: 2px solid var(--surface); margin-left: -4px; }

/* ------------------------------------------------------------------ reading progress (motion.js) */
.read-progress { position: fixed; z-index: 41; left: 0; right: 0; top: 0; height: 3px; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html.present .read-progress { display: none; }

/* ------------------------------------------------------------------ verified with Racó, subscription */
.verified { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 16px 0 0; font-size: .88rem; color: var(--muted); font-weight: 500; }
.verified > .i { color: var(--green-text); width: 18px; height: 18px; }
.verified .changes summary { cursor: pointer; color: var(--blue-text); font-weight: 600; }
.verified .changes ul { margin: 6px 0 0; padding-left: 1.2em; }
.sub-help { margin: 12px 0 0; font-size: .9rem; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------------------ checklist sharing */
.cl-share { margin-top: 12px; }
.cl-import { display: grid; gap: 10px; margin-bottom: 14px; }
.cl-import p { margin: 0; }
.cl-import .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ diagram viewer (phones) */
figure.diagram { position: relative; }
.dg-zoom { display: none; }
@media (max-width: 760px) {
  .dg-zoom { all: unset; position: sticky; left: calc(100% - 46px); top: 0; float: right; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -4px 0 0; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; color: var(--head); cursor: pointer; }
  .dg-zoom:focus-visible { outline: 3px solid var(--blue); }
}
.dg-view { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.dg-view::backdrop { background: rgb(0 0 0 / .4); }
.dg-pan { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 64px 16px 24px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.dg-pan svg { width: 900px !important; min-width: 900px !important; max-width: none; height: auto; }
.dg-pan svg text { font: 500 13px var(--f-sans); fill: var(--head); }
.dg-close { position: fixed; top: 12px; right: 12px; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .dg-view[open] { animation: dg-in .22s cubic-bezier(.23,1,.32,1); } @keyframes dg-in { from { opacity: 0; transform: scale(.98); } } }

/* ------------------------------------------------------------------ table of contents: active section, sticky on phones */
.toc a[aria-current] { border-color: var(--blue); color: var(--blue-text); background: var(--blue-soft); }
.toc-float { display: none; }
@media (max-width: 899px) {
  .toc-float { display: flex; position: fixed; z-index: 39; left: 0; right: 0; top: 64px; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transform: translateY(-120%); visibility: hidden; transition: transform .25s cubic-bezier(.23,1,.32,1), visibility 0s .25s; }
  .toc-float.on { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.23,1,.32,1); }
  .toc-float::-webkit-scrollbar { display: none; }
  .toc-float a { white-space: nowrap; flex: none; background: var(--surface); padding: 6px 12px; font-size: .86rem; }
  html.present .toc-float { display: none; }
}

/* ------------------------------------------------------------------ folder tree: notes drop below on phones */
@media (max-width: 560px) {
  .tree { font-size: .8rem; }
  .tree .tp { display: none; }
  .tree .tc { display: block; padding-left: 4ch; color: var(--muted); white-space: pre-wrap; }
}

/* ------------------------------------------------------------------ hover lift only where hover exists */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .guide .ico { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  a.guide:hover .ico { transform: translateY(-3px) rotate(-6deg); }
}

/* ------------------------------------------------------------------ mock API (/mock-api): editor + live API
   Signature: the route board, every endpoint a pressable chip coloured by HTTP method that fires into the console.
   Motion only says what changed: a 200 ms reveal when an API is created, a blur cross-fade for each new response. */
:root { --m-get: var(--blue); --m-post: var(--green); --m-put: var(--gold); --m-del: var(--red-dark); --ease-out: cubic-bezier(.23,1,.32,1); }
.mk-hero h1 { max-width: 18ch; }
.mk-hero-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; }
.mk-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--surface); }
.mk-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex: none; }
.mk-status[data-state="ok"] i { background: var(--green); }
.mk-status[data-state="busy"] { border-color: var(--gold); } .mk-status[data-state="busy"] i { background: var(--gold); }
.mk-status[data-state="down"] { border-color: var(--red); } .mk-status[data-state="down"] i { background: var(--red); }
@media (prefers-reduced-motion: no-preference) { .mk-status[data-state="ok"] i { animation: mk-pulse 2.4s ease-out infinite; } }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.mk-demo { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-width: 0; max-width: 100%; }
.mk-demo a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-demo code { font-size: .82rem; }

.mk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; }
@media (max-width: 1023px) { .mk { grid-template-columns: minmax(0, 1fr); } }
.mk-edit, .mk-live, .mk-api, .mk-empty, .mk-visual, .mk-res, .mk-fields, .mk-routes, .mk-console, .mk-resp, .mk-report, .vt-form, .vt-out, .vt-step { grid-template-columns: minmax(0, 1fr); }
.mk-edit { display: grid; gap: 14px; min-width: 0; }
.mk-edit-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.mk-edit-head h3, .mk-empty h3, .mk-h { margin: 0; font-size: 1.15rem; }
.mk-tabs { margin-bottom: 12px; }
.mk-ta { width: 100%; box-sizing: border-box; min-height: 260px; padding: 12px 14px; border: 2px solid var(--line); color: var(--head); }
.mk-ta-sm { min-height: 120px; }
.mk-ta:focus, .mk-path:focus, .mk-f input:focus, .mk-f select:focus, .mk-res-name:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* visual editor */
.mk-visual { display: grid; gap: 12px; }
.mk-res { border: 2px solid var(--line); border-radius: var(--r-m); padding: 12px; display: grid; gap: 8px; background: var(--surface-2); }
.mk-res-head { display: flex; gap: 8px; align-items: center; }
.mk-res-name { flex: 1; min-width: 0; font: 700 1rem var(--f-mono); color: var(--head); background: var(--field); border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.mk-res-id { font: 600 .78rem var(--f-mono); color: var(--muted); padding: 4px 8px; border-radius: 999px; border: 2px dashed var(--line-strong); }
.mk-fields { display: grid; gap: 6px; }
.mk-f { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.mk-f input, .mk-f select { width: 100%; min-width: 0; box-sizing: border-box; font: 500 .9rem var(--f-mono); color: var(--head); background: var(--field); border: 2px solid var(--line); border-radius: 10px; padding: 7px 8px; min-height: 40px; }
.mk-f input[hidden] { display: block; visibility: hidden; }
.mk-x { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); transition: background-color .15s, color .15s, transform .1s; }
.mk-x:hover { background: var(--red-soft); color: var(--red-text); }
.mk-x:active { transform: scale(.94); }
.mk-x:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.mk-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-add { justify-self: start; gap: 6px; }
.mk-file { position: relative; overflow: hidden; gap: 8px; }
.mk-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-file:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

.mk-errs, .mk-msg { margin: 0; font-weight: 600; min-height: 1.4em; }
.mk-errs[data-kind="ok"], .mk-msg[data-kind="ok"] { color: var(--green-text); }
.mk-errs[data-kind="err"], .mk-msg[data-kind="err"], .mk-hint[data-kind="err"] { color: var(--red-text); }
.mk-opts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 520px) { .mk-opts { grid-template-columns: minmax(0, 1fr); } }
.mk-access { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.mk-access legend { font-weight: 700; color: var(--head); font-size: .92rem; margin-bottom: 6px; padding: 0; }
.mk-access label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .9rem; line-height: 1.35; transition: border-color .15s, background-color .15s; }
.mk-access label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.mk-access input { margin: 3px 0 0; accent-color: var(--blue-dark); }
.mk-access b { color: var(--head); margin-right: 4px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mk-pf { margin-left: auto; gap: 6px; }
@media (max-width: 520px) { .mk-pf { margin-left: 0; } .mk-actions .btn:not(.btn-sm) { flex: 1 1 100%; } }
.mk-fine { margin: 0; font-size: .82rem; }
.btn[aria-busy="true"] { cursor: progress; filter: saturate(.7); }
.btn-danger { background: var(--surface); border-color: var(--red-soft); color: var(--red-text); }
.btn-danger:hover { background: var(--red-soft); }

/* live API */
.mk-live { display: grid; gap: 14px; min-width: 0; }
.mk-empty { display: grid; gap: 10px; border-style: dashed; }
.mk-empty p { margin: 0; color: var(--muted); }
.mk-steps { margin: 4px 0 0; padding-left: 1.3em; display: grid; gap: 4px; font-weight: 600; color: var(--head); }
.mk-api { display: grid; gap: 14px; min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mk-api.is-new { animation: mk-in .22s var(--ease-out); }
  @keyframes mk-in { from { opacity: 0; transform: translateY(6px) scale(.99); } }
}
.mk-url { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--blue-soft); }
.mk-url code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; background: none; border: 0; font-size: .92rem; font-weight: 600; color: var(--head); padding: 0; }
.mk-url .tag { background: var(--surface); color: var(--blue-text); }
.mk-meta { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .86rem; color: var(--muted); }
.mk-secret { border: 2px solid var(--gold); border-radius: 14px; padding: 0 14px; }
.mk-secret summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--head); }
.mk-secret[open] { padding-bottom: 14px; }
.mk-secret > * + * { margin-top: 10px; }
.mk-sec-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .86rem; font-weight: 600; }
.mk-sec-row code { overflow-wrap: anywhere; font-size: .8rem; }
.mk-sec-row[hidden] { display: none; }
@media (max-width: 520px) { .mk-sec-row { grid-template-columns: minmax(0, 1fr) auto; } .mk-sec-row > span { grid-column: 1 / -1; } }

/* the route board */
.mk-routes { display: grid; gap: 12px; }
.mk-rg h4 { margin: 0 0 6px; font: 700 .9rem var(--f-mono); color: var(--head); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { --c: var(--m-get); all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 10px 3px 4px; border-radius: 10px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink); transition: transform .1s var(--ease-out), border-color .15s; }
.mk-chip b { font: 800 .72rem var(--f-mono); letter-spacing: .02em; padding: 3px 6px; border-radius: 6px; background: var(--c); color: var(--on-color); }
.mk-chip[data-m="get"] b { color: var(--accent-ink); }
.mk-chip[data-m="post"] { --c: var(--m-post); }
.mk-chip[data-m="put"], .mk-chip[data-m="patch"] { --c: var(--m-put); }
.mk-chip[data-m="delete"] { --c: var(--m-del); }
.mk-chip[data-m="delete"] b { color: #fff; }
@media (hover: hover) and (pointer: fine) { .mk-chip:hover { border-color: var(--c); } }
.mk-chip:active { transform: translateY(2px); border-bottom-width: 2px; }
.mk-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
span.mk-chip { cursor: default; padding-right: 4px; }

/* console */
.mk-console { display: grid; gap: 10px; border-top: 2px solid var(--line); }
.mk-req { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; padding-top: 14px; }
.mk-req select { min-height: 40px; font: 700 .86rem var(--f-mono); }
.mk-path { min-width: 0; box-sizing: border-box; font: 500 .9rem var(--f-mono); color: var(--head); background: var(--field); border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; }
@media (max-width: 520px) { .mk-req { grid-template-columns: 96px minmax(0, 1fr); } .mk-req .btn { grid-column: 1 / -1; } }
.mk-req-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .86rem; }
.mk-req-opts label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; min-height: 32px; }
.mk-req-opts label[hidden] { display: none; }
.mk-req-opts .linklike { margin-left: auto; color: var(--blue-text); font: inherit; font-weight: 600; min-height: 32px; }
.mk-resp { display: grid; gap: 8px; min-width: 0; }
.mk-resp[hidden] { display: none; }
.mk-resp-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .86rem; color: var(--muted); }
.mk-code { font: 800 .86rem var(--f-mono); padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--head); }
.mk-resp[data-cls="2"] .mk-code { background: var(--green-soft); color: var(--green-text); }
.mk-resp[data-cls="4"] .mk-code { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--warn-text); }
.mk-resp[data-cls="5"] .mk-code, .mk-resp[data-cls="0"] .mk-code { background: var(--red-soft); color: var(--red-text); }
.mk-hint { margin: 0; font-size: .9rem; font-weight: 600; }
.mk-hint:empty { display: none; }
.mk-out { max-height: 360px; }
.mk-resp.is-loading .mk-out { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .mk-resp.is-swap .mk-out { animation: mk-swap .18s var(--ease-out); }
  @keyframes mk-swap { from { opacity: .3; filter: blur(2px); } }
}

/* my APIs, tables, report */
.mk-list { display: grid; gap: 10px; }
.mk-none { margin: 0; color: var(--muted); }
.mk-item { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-m); background: var(--surface); }
.mk-item.is-cur { border-color: var(--blue); }
.mk-item-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 260px; }
.mk-item-main b { color: var(--head); overflow-wrap: anywhere; }
.mk-item-main code { font-size: .78rem; overflow-wrap: anywhere; justify-self: start; }
.mk-item-meta { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--muted); }
.mk-item-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mk-table th, .mk-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mk-table th { color: var(--head); font-weight: 700; background: var(--surface-2); }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-table td:first-child code { white-space: nowrap; }
.mk-table td[data-lim] { font: 700 .95rem var(--f-mono); color: var(--head); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-report { display: grid; gap: 12px; }
.mk-report textarea, .mk-report .select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid var(--line); font: inherit; color: var(--head); }
.mk-report .btn { justify-self: start; }
.mk-work ::selection, .mk-out ::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }

/* ------------------------------------------------------------------ virtech generator (/virtech), promos on /api */
.vt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 22px; align-items: start; }
@media (max-width: 1023px) { .vt { grid-template-columns: minmax(0, 1fr); } }
.vt-form { display: grid; gap: 14px; }
@media (min-width: 1024px) { .vt-form { position: sticky; top: 84px; } }
.vt-form [hidden] { display: none; }
.vt-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 420px) { .vt-2 { grid-template-columns: minmax(0, 1fr); } }
.vt-form .select { width: 100%; }
.vt-form .btn { justify-self: start; gap: 6px; }
.vt-out { display: grid; gap: 18px; min-width: 0; counter-reset: vt; }
.vt-step { display: grid; gap: 8px; min-width: 0; }
.vt-step h3 { margin: 0; font-size: 1.02rem; }
.vt-step-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.vt-step .help { margin: 0; }
.vt-step .cmd { white-space: pre; }
table.nat { width: 100%; border-collapse: collapse; }
table.nat th { text-align: left; color: var(--head); background: var(--surface-2); }
table.nat tr.is-cur td { background: var(--green-soft); }
table.nat .tag { background: var(--green); color: var(--on-color); margin-left: 6px; }
.mk-promo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; align-items: center; border-color: var(--blue); }
.mk-promo h2 { margin: 0 0 8px; }
.mk-promo .lead { margin: 0; }
.mk-promo-ex { display: grid; gap: 12px; justify-items: start; }
.mk-promo-ex .help { margin: 0; }
.mk-promo-ex .presets { justify-content: flex-start; }
table.nat th { white-space: normal; }
.mk-promo-ex .btn-solid { gap: 8px; }
@media (max-width: 760px) { .mk-promo { grid-template-columns: minmax(0, 1fr); } }
.vt-promo { display: grid; gap: 10px; justify-items: start; max-width: 860px; }
.vt-promo h2 { margin: 0; }
.vt-promo p { margin: 0; color: var(--ink); }
.vt-promo .btn { gap: 8px; pointer-events: none; }

/* ------------------------------------------------------------------ tools index (top of /eines) */
.tools-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.tool-row { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--r-m); text-decoration: none; color: var(--ink); background: var(--surface); transition: transform .1s cubic-bezier(.23,1,.32,1), border-color .15s; }
.tool-row b { display: block; color: var(--head); }
.tool-row small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.tool-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-text); }
.tool-ico svg { width: 22px; height: 22px; }
.tool-row:nth-child(-n+2) .tool-ico { background: var(--green-soft); color: var(--green-text); }
@media (hover: hover) and (pointer: fine) { .tool-row:hover { border-color: var(--blue); } }
.tool-row:active { transform: translateY(2px); border-bottom-width: 2px; }
.tool-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------------------ mock API: relationship tree (visual schema) */
:root { --rel-0: var(--blue-dark); --rel-1: var(--green-dark); --rel-2: #a568cc; --rel-3: #d97f00; --rel-4: #c2161f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rel-0: #49c0f8; --rel-1: #8ee000; --rel-2: #ce82ff; --rel-3: #ffb347; --rel-4: #ff7b7b; } }
.mk-opts { grid-template-columns: minmax(0, 1fr); }
.mk-diagram { position: relative; display: grid; gap: 12px; padding-left: calc(10px + var(--lanes, 0) * 8px); }
.mk-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mk-link { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-link.rel-0 { stroke: var(--rel-0); } .mk-link.rel-1 { stroke: var(--rel-1); } .mk-link.rel-2 { stroke: var(--rel-2); }
.mk-link.rel-3 { stroke: var(--rel-3); } .mk-link.rel-4 { stroke: var(--rel-4); }
@media (prefers-reduced-motion: no-preference) {
  .mk-link.is-new { stroke-dasharray: 600; stroke-dashoffset: 600; animation: mk-draw .45s var(--ease-out) forwards; }
  @keyframes mk-draw { to { stroke-dashoffset: 0; } }
}
.mk-res { margin-left: calc(var(--depth, 0) * 14px); }
.mk-res-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.mk-count { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.mk-count input { width: 64px; box-sizing: border-box; font: 700 .9rem var(--f-mono); text-align: right; color: var(--head); background: var(--field); border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; min-height: 40px; }
.mk-count input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.mk-f { grid-template-columns: 22px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 36px; row-gap: 2px; }
.mk-f-ico { display: grid; place-items: center; color: var(--muted); }
.mk-f-ico .mk-i { width: 16px; height: 16px; }
.mk-f-pk .mk-f-ico { color: var(--gold-dark); }
.mk-f-pk { min-height: 40px; }
.mk-ro { font: 700 .9rem var(--f-mono); color: var(--head); padding-left: 10px; }
.mk-f-auto { grid-column: 3 / -1; font-size: .8rem; color: var(--muted); }
.mk-f-ex { grid-column: 2 / -1; font: 500 .74rem var(--f-mono); color: var(--muted); padding: 0 2px 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-f-fk .mk-f-arg { font-weight: 700; }
.mk-f-fk[data-rel="0"] .mk-f-ico, .mk-f-fk[data-rel="0"] .mk-f-arg { color: var(--rel-0); }
.mk-f-fk[data-rel="1"] .mk-f-ico, .mk-f-fk[data-rel="1"] .mk-f-arg { color: var(--rel-1); }
.mk-f-fk[data-rel="2"] .mk-f-ico, .mk-f-fk[data-rel="2"] .mk-f-arg { color: var(--rel-2); }
.mk-f-fk[data-rel="3"] .mk-f-ico, .mk-f-fk[data-rel="3"] .mk-f-arg { color: var(--rel-3); }
.mk-f-fk[data-rel="4"] .mk-f-ico, .mk-f-fk[data-rel="4"] .mk-f-arg { color: var(--rel-4); }
.mk-res-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-belongs { min-height: 40px; max-width: 100%; font: 600 .86rem var(--f-sans); color: var(--blue-text); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; padding: 0 10px; cursor: pointer; }
.mk-belongs:disabled { opacity: .5; cursor: default; }
.mk-belongs:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 520px) {
  .mk-f { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .mk-f .mk-f-arg { grid-column: 2 / 4; }
  .mk-f input.mk-f-arg[hidden] { display: none; }
  .mk-res { margin-left: calc(var(--depth, 0) * 8px); }
  .mk-res-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mk-count span { display: none; }
}

/* ------------------------------------------------------------------ search dialog (assets/search.js) */
.search-dlg { position: fixed; inset: 0; margin: 9vh auto auto; width: min(660px, calc(100vw - 24px)); max-height: min(78dvh, 640px); padding: 0; overflow: hidden;
  display: none; flex-direction: column; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); }
.search-dlg[open] { display: flex; animation: sd-in .16s ease-out; }
.search-dlg::backdrop { background: rgba(19, 31, 36, .55); backdrop-filter: blur(3px); }
@keyframes sd-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .search-dlg[open] { animation: none; } }
html.searching { overflow: hidden; }
.sd-head { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; border-bottom: 2px solid var(--line); }
.sd-head > svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.sd-head input { flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; color: var(--head); font: 500 1.08rem var(--f-sans); outline: none; -webkit-appearance: none; appearance: none; }
.sd-head input::-webkit-search-cancel-button { display: none; }
.sd-head input::placeholder { color: var(--muted); }
.sd-close { font: 700 .72rem var(--f-mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.sd-close:hover { color: var(--ink); }
.search-dlg ul { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-dlg ul:empty { display: none; }
.search-dlg li a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.search-dlg li[aria-selected="true"] a { background: var(--blue-soft); border-color: var(--accent); }
.sd-h { color: var(--head); font-weight: 700; }
.sd-p { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.sd-x { font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-dlg mark { background: var(--gold); color: #2a2100; border-radius: 3px; padding: 0 1px; }
.sd-foot { padding: 14px 18px 4px; }
.sd-foot:empty { display: none; }
.sd-sugg, .sd-none { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.sd-chips .chip { font: 600 .88rem var(--f-sans); color: var(--head); background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.sd-chips .chip:hover, .sd-chips .chip:focus-visible { border-color: var(--accent); }
.sd-hint { margin: 0; padding: 9px 18px; font-size: .78rem; color: var(--muted); border-top: 2px solid var(--line); background: var(--surface-2); }
@media (pointer: coarse) { .sd-hint { display: none; } }
@media (max-width: 560px) { .search-dlg { margin-top: 12px; max-height: calc(100dvh - 24px); } }
html.present .head-search { display: none; }

/* header with the search button: tighter gaps so the longest translation (es) fits in 1168px next to the nav */
@media (min-width: 900px) {
  .head-row { gap: 12px; }
  .head-search, .head-search + .lang-switch { margin-left: 0; }
}
@media (min-width: 1200px) { .head-nav a { padding-inline: 10px; } .head-nav { margin-left: auto; } .head-nav + .head-search { margin-left: 8px; } }
@media (min-width: 900px) and (max-width: 1199px) { .head-search { margin-left: auto; } }
@media (max-width: 899px) { .head-row { gap: 6px; } .head-search, .head-search + .lang-switch, .head-search ~ .menu { margin-left: 0; } .head-search { margin-left: auto; } .brand { flex: none; } .brand svg { flex: none; } }
@media (max-width: 400px) { .brand span { display: none; } }   /* the logo alone (the link keeps its aria-label) so search, language and menu fit at 360px */

/* ================================================================ mockups page showcase (/maquetes, tool/mockups.py)
   Product art (Bici Verda, an invented app) keeps its own fixed colours in both themes: it is a picture of a product.
   Phones size everything in em of .ph (width / 22). The 3D box is pure CSS 3D; assets/mockups.js drives it. */
.ph { --pw: 220px; position: relative; flex: none; box-sizing: border-box; width: var(--pw); height: calc(var(--pw) * 2.08); padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .16); font-size: calc(var(--pw) / 22); background: linear-gradient(145deg, #3a4048, #0c0e11 38%, #1c2025 70%, #0a0b0d); box-shadow: inset 0 0 0 1.5px #5b636d, inset 0 0 0 calc(var(--pw) * .012) #07080a, 0 2.2em 4em -1.6em rgb(5 25 18 / .55), 0 .8em 1.4em -.8em rgb(0 0 0 / .4); }
.ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 8; background: linear-gradient(115deg, rgb(255 255 255 / .2) 0 14%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 78%, rgb(255 255 255 / .06)); }
.ph-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .13); background: #f3f6f1; color: #13241c; font-family: var(--f-sans); line-height: 1.25; text-align: left; letter-spacing: 0; isolation: isolate; }
.ph-scr::before { content: ""; position: absolute; z-index: 9; top: .75em; left: 50%; width: 6.4em; height: 1.9em; margin-left: -3.2em; border-radius: 1em; background: #050607; }
.ph-scr b { font-weight: 700; }
.ph-scr small { font-size: inherit; }
.ph-scr p { max-width: none; }
.ph .mk-i { width: 1.3em; height: 1.3em; flex: none; }
.sb { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: 3.2em; display: flex; align-items: center; justify-content: space-between; padding: 0 2em 0 2.4em; color: #0f2219; }
.sb b { font-size: 1.1em; font-weight: 600; }
.sb-r { display: flex; align-items: center; gap: .5em; }
.sb-sig { display: inline-flex; align-items: flex-end; gap: .15em; height: 1em; }
.sb-sig i { display: block; width: .28em; border-radius: .1em; background: currentColor; }
.sb-sig i:nth-child(1) { height: .35em; } .sb-sig i:nth-child(2) { height: .55em; } .sb-sig i:nth-child(3) { height: .75em; } .sb-sig i:nth-child(4) { height: 1em; }
.sb-bat { display: block; width: 2em; height: 1em; padding: .12em; box-sizing: border-box; border: .12em solid currentColor; border-radius: .32em; }
.sb-bat i { display: block; width: 72%; height: 100%; border-radius: .12em; background: currentColor; }
.home { position: absolute; z-index: 9; left: 50%; bottom: .7em; width: 8em; height: .36em; margin-left: -4em; border-radius: .2em; background: #0f2219; opacity: .85; }
/* map: Eixample-like grid at 45 degrees, a park, the sea and the Diagonal */
.map { position: absolute; inset: 0; overflow: hidden; background-color: #e5ede0; background-image: repeating-linear-gradient(45deg, transparent 0 2.7em, #fff 2.7em 2.95em), repeating-linear-gradient(-45deg, transparent 0 2.7em, #fff 2.7em 2.95em); }
.map i { position: absolute; display: block; }
.map-park { left: 4%; top: 36%; width: 34%; height: 13%; border-radius: 45% 55% 50% 40%; background: #c5e4b0; transform: rotate(-18deg); }
.map-sea { right: -30%; bottom: -12%; width: 80%; height: 30%; background: #b7dbee; transform: rotate(-32deg); }
.map-diag { left: -20%; top: 44%; width: 150%; height: .6em; background: #fff; box-shadow: 0 0 0 .14em #d6e0d0; transform: rotate(-27deg); }
.map.stale { filter: grayscale(1); opacity: .45; }
.map .pin { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; border: .22em solid #fff; box-sizing: border-box; transform: translate(-50%, -50%); color: #fff; font-style: normal; font-weight: 700; font-size: .95em; box-shadow: 0 .3em .6em rgb(10 40 25 / .28); }
.map .pin-ok { background: #17924d; } .map .pin-low { background: #d9480f; } .map .pin-none { background: #c92a2a; }
.map .pin.sel { width: 3.5em; height: 3.5em; font-size: 1.1em; background: #0b3b2c; z-index: 2; box-shadow: 0 0 0 .45em rgb(23 146 77 / .28), 0 .4em .9em rgb(10 40 25 / .35); }
.map .pin-end { width: 3em; height: 3em; background: #0b3b2c; }
.map .pin-end .mk-i { width: 1.3em; height: 1.3em; }
.map .map-me { width: 1.5em; height: 1.5em; box-sizing: border-box; border-radius: 50%; background: #2f7cf6; border: .26em solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 .8em rgb(47 124 246 / .2); }
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-route path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.map-route .alt { stroke: #8f9c95; stroke-width: 4px; stroke-dasharray: 1 7; }
.map-route .best { stroke: #17924d; stroke-width: 6px; }
.srch { position: absolute; z-index: 5; top: 3.5em; left: 1.1em; right: 1.1em; height: 3.4em; display: flex; align-items: center; gap: .7em; padding: 0 .5em 0 1.1em; border-radius: 1.7em; background: #fff; color: #51615a; box-shadow: 0 .3em 1em rgb(16 40 30 / .14); }
.srch span { flex: 1; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av { display: grid; place-items: center; width: 2.5em; height: 2.5em; flex: none; border-radius: 50%; background: #b8f05c; color: #0b3b2c; font-style: normal; font-weight: 700; font-size: .9em; }
.chips { position: absolute; z-index: 5; top: 7.6em; left: 1.1em; display: flex; gap: .45em; }
.chips span { padding: .45em .95em; border-radius: 1em; background: #fff; color: #23332c; font-size: .9em; font-weight: 600; box-shadow: 0 .15em .4em rgb(0 0 0 / .1); white-space: nowrap; }
.chips .on { background: #0b3b2c; color: #fff; }
.sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: .8em 1.5em 2.6em; border-radius: 1.9em 1.9em 0 0; background: #fff; box-shadow: 0 -.4em 1.6em rgb(16 40 30 / .15); }
.grab { display: block; width: 3.4em; height: .4em; margin: 0 auto .9em; border-radius: .2em; background: #d3dcd6; }
.sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: .6em; }
.sh-t { display: block; font-size: 1.6em; letter-spacing: -.02em; color: #0f2219; }
.sh-h small { display: block; margin-top: .2em; color: #51615a; font-size: .95em; }
.sh-fav { display: grid; place-items: center; width: 2.7em; height: 2.7em; flex: none; border-radius: 50%; background: #f1f5f2; color: #c98b00; }
.sh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: 1em 0 .8em; }
.sh-stats > div { padding: .7em .9em; border-radius: 1em; background: #f2f6f3; }
.sh-stats b { display: block; font-size: 2.2em; line-height: 1; color: #0f2219; }
.sh-stats b.ok { color: #127a3f; }
.sh-stats span { display: block; margin-top: .2em; font-size: .95em; font-weight: 600; }
.sh-stats small { display: block; font-size: .8em; color: #51615a; }
.sh-bar { display: block; height: .5em; margin-bottom: 1em; border-radius: .25em; overflow: hidden; background: #e3ebe6; }
.sh-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17924d, #7fd66b); }
.app-btn { display: flex; align-items: center; justify-content: center; gap: .6em; height: 3.9em; padding: 0 1.4em; border-radius: 1.95em; background: #0b3b2c; color: #fff; font-weight: 600; font-size: 1.12em; white-space: nowrap; box-shadow: 0 .3em .9em -.2em rgb(11 59 44 / .5); }
.toast-ok { position: absolute; z-index: 7; top: 7.4em; left: 1.1em; right: 1.1em; display: flex; align-items: center; gap: .8em; padding: .9em 1em; border-radius: 1.2em; background: #0b3b2c; color: #fff; box-shadow: 0 .6em 1.4em rgb(11 59 44 / .35); }
.ph .toast-ok > .mk-i { width: 2.1em; height: 2.1em; padding: .35em; box-sizing: border-box; border-radius: 50%; background: #b8f05c; color: #0b3b2c; stroke-width: 3; }
.toast-ok b { display: block; font-size: 1.08em; }
.toast-ok small { display: block; font-size: .88em; color: #cfe7da; }
.rt-card { position: absolute; z-index: 5; top: 3.7em; left: 1.1em; right: 1.1em; padding: .3em 1em; border-radius: 1.3em; background: #fff; box-shadow: 0 .3em 1em rgb(16 40 30 / .14); }
.rt { display: flex; align-items: center; gap: .8em; padding: .75em 0; }
.rt + .rt { border-top: 1px solid #e6ece8; }
.rt > div { flex: 1; min-width: 0; }
.rt b { display: block; font-size: 1.08em; color: #0f2219; }
.rt-dot { width: .95em; height: .95em; border-radius: 50%; flex: none; background: #17924d; box-shadow: 0 0 0 .3em rgb(23 146 77 / .2); }
.rt-dot.alt { background: #8f9c95; box-shadow: none; }
.air { display: inline-block; margin-top: .2em; padding: .1em .55em; border-radius: .6em; font-style: normal; font-size: .85em; font-weight: 600; }
.air.ok { background: #e1f5e6; color: #11703a; } .air.bad { background: #fde8e8; color: #b42318; }
.rt .rt-min { font-size: 1.7em; letter-spacing: -.02em; }
.rt-min small { font-size: .5em; margin-left: .15em; color: #51615a; }
.co2 { display: flex; align-items: center; gap: .5em; margin: 0 0 .9em; color: #11703a; font-weight: 600; font-size: 1em; }
.bd-head { padding: 4em 1.5em 0; font-size: 1.6em; }
.bd-head b { letter-spacing: -.02em; }
.ring { display: grid; place-items: center; width: 11.5em; height: 11.5em; margin: 1.1em auto .7em; border-radius: 50%; background: conic-gradient(#17924d calc(var(--p) * 1%), #dbe5de 0); }
.ring > div { display: grid; place-content: center; text-align: center; width: 8.9em; height: 8.9em; border-radius: 50%; background: #f3f6f1; }
.ring b { font-size: 3em; line-height: 1; letter-spacing: -.03em; color: #0f2219; }
.ring span { font-size: .85em; color: #51615a; }
.streak { display: flex; align-items: center; justify-content: center; gap: .4em; margin: 0 0 1.1em; color: #c2410c; font-weight: 600; }
.bdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em .6em; padding: 0 1.4em; }
.bdg { text-align: center; }
.bdg > i { display: grid; place-items: center; width: 4.3em; height: 4.3em; margin: 0 auto .35em; border-radius: 1.4em; background: var(--c); color: #fff; box-shadow: 0 .3em 0 rgb(0 0 0 / .2); }
.ph .bdg > i .mk-i { width: 2em; height: 2em; }
.bdg span { font-size: .82em; font-weight: 600; }
.bdg.off > i { background: #d5ddd8; box-shadow: none; }
.bdg.off span { color: #6b7a72; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5.4em; display: flex; justify-content: space-around; padding-top: 1em; box-sizing: border-box; background: #fff; border-top: 1px solid #e3ebe6; }
.tabbar i { color: #8a968f; } .tabbar i.on { color: #0b3b2c; }
.ph .tabbar .mk-i { width: 1.8em; height: 1.8em; }
.st-body { position: absolute; z-index: 5; top: 10em; left: 1.6em; right: 1.6em; display: grid; justify-items: center; text-align: center; }
.st-body > b { text-wrap: balance; font-size: 1.45em; letter-spacing: -.01em; color: #0f2219; }
.st-body p { margin: .4em 0 1.4em; color: #51615a; font-size: 1em; }
.st-ill { display: grid; place-items: center; width: 7.6em; height: 7.6em; margin-bottom: 1.1em; border-radius: 50%; background: #e3f2e7; color: #17924d; }
.ph .st-ill .mk-i { width: 3.6em; height: 3.6em; stroke-width: 1.6; }
.st-ill.err { background: #fde8e8; color: #c92a2a; }
.st-body.card-err { top: auto; bottom: 3.2em; left: 1.1em; right: 1.1em; padding: 1.6em 1.2em 1.2em; border-radius: 1.6em; background: #fff; box-shadow: 0 .4em 1.6em rgb(16 40 30 / .18); }
.st-body.card-err .st-ill { width: 5.6em; height: 5.6em; margin-bottom: .8em; }
.ph .st-body.card-err .st-ill .mk-i { width: 2.6em; height: 2.6em; }
.st-body .app-btn { justify-self: stretch; }
.skel { position: absolute; top: 7.8em; left: 1.1em; right: 1.1em; bottom: 2.4em; display: grid; gap: .8em; align-content: start; }
.sk { display: block; border-radius: 1em; background: linear-gradient(90deg, #e2e9e4 0 40%, #f3f7f4 50%, #e2e9e4 60% 100%) 0 0 / 300% 100%; }
.sk-map { height: 20em; } .sk-l1 { height: 1.7em; width: 66%; } .sk-l2 { height: 1.1em; width: 42%; }
.sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; } .sk-row .sk { height: 5em; }
.sk-btn { height: 3.9em; border-radius: 1.95em; }
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: mk-shim 1.5s linear infinite; }
  @keyframes mk-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .map .pin.sel::after { content: ""; position: absolute; inset: -.25em; border-radius: 50%; border: .2em solid #17924d; animation: mk-ping 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
  @keyframes mk-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
}

/* header: three phones in a fan, with design annotations and two collaborators' cursors as in a shared design file */
.mk-hero-grid { display: grid; gap: 8px; align-items: center; }
@media (min-width: 980px) { .mk-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; } }
.mk-fan { position: relative; height: 480px; perspective: 1500px; }
.mk-fan-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--fx, 4deg)) rotateY(var(--fy, -8deg)); }
.mk-glow { position: absolute; inset: 6% 0 2%; border-radius: 50%; background: radial-gradient(closest-side, rgb(88 204 2 / .26), rgb(88 204 2 / 0)), radial-gradient(40% 40% at 78% 70%, rgb(28 176 246 / .2), rgb(28 176 246 / 0)); pointer-events: none; }
.mk-fan .ph { --pw: 196px; position: absolute; left: 50%; top: 50%; margin: calc(var(--pw) * -1.04) 0 0 calc(var(--pw) / -2); }
.mk-fan .fan-l { transform: translateX(-64%) translateZ(-130px) rotateY(24deg) rotateZ(-3deg); }
.mk-fan .fan-r { transform: translateX(64%) translateZ(-130px) rotateY(-24deg) rotateZ(3deg); }
.mk-fan .fan-c { transform: translateZ(40px); }
.mk-note { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--head); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.mk-note .mk-i { width: 16px; height: 16px; color: var(--green-text); stroke-width: 3; }
.mk-note.n1 { left: 0; top: 16%; }
.mk-note.n2 { right: 0; bottom: 12%; background: var(--blue-soft); border-color: var(--accent); color: var(--accent-text); }
.mk-cur { position: absolute; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; color: var(--c); }
.mk-cur svg { width: 18px; height: 18px; fill: currentColor; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.mk-cur b { margin: 15px 0 0 -5px; padding: 3px 8px; border-radius: 9px 9px 9px 3px; color: #fff; background: var(--c); font-size: .74rem; font-weight: 700; }
.mk-cur.c1 { --c: #c2410c; left: 74%; top: 22%; }
.mk-cur.c2 { --c: #0a6ca3; left: 10%; top: 74%; }
@media (max-width: 979px) { .mk-fan { height: 400px; margin-top: 8px; } .mk-fan .ph { --pw: 160px; } }
@media (max-width: 520px) { .mk-fan { height: 330px; } .mk-fan .ph { --pw: 128px; } .mk-note { font-size: .72rem; padding: 4px 8px; } .mk-note.n1 { top: 2%; } .mk-note.n2 { bottom: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .mk-fan .ph { animation: mk-in .9s cubic-bezier(.16,1,.3,1) both, mk-float 7s ease-in-out 1s infinite; }
  .mk-fan .fan-c { animation-delay: .05s, 1.2s; } .mk-fan .fan-l { animation-delay: .18s, 2.2s; } .mk-fan .fan-r { animation-delay: .3s, 3.1s; }
  @keyframes mk-in { from { opacity: 0; translate: 0 48px; } }
  @keyframes mk-float { 50% { translate: 0 -10px; } }
  .mk-cur.c1 { animation: mk-c1 11s ease-in-out infinite; } .mk-cur.c2 { animation: mk-c2 13s ease-in-out infinite; }
  @keyframes mk-c1 { 0%, 100% { translate: 0 0; } 22%, 30% { translate: -14px 64px; } 55%, 64% { translate: 22px 170px; } 82% { translate: 30px 40px; } }
  @keyframes mk-c2 { 0%, 100% { translate: 0 0; } 25%, 34% { translate: 24px -70px; } 60%, 70% { translate: 8px -190px; } }
}

/* product box: a studio stage (dark in both themes, like a product photo) and a CSS 3D box with a lid */
.pbx-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 980px) { .pbx-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; } }
.pbx-side { display: grid; gap: 16px; }
.pbx-stage { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 18px; border-radius: 28px; color: #e9f5ee; background: radial-gradient(120% 75% at 50% 8%, #1f4134 0%, #0d1a16 58%, #070d0b 100%); box-shadow: 0 30px 60px -36px rgb(4 30 20 / .7); }
.pbx-view { --W: 260px; --H: 370px; --D: 92px; --s: 1; position: relative; height: 660px; perspective: 1500px; perspective-origin: 50% 30%; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.pbx-view.drag { cursor: grabbing; }
.pbx-view:focus-visible { box-shadow: inset 0 0 0 3px #49c0f8; border-radius: 28px 28px 0 0; }
.pbx-spot { position: absolute; left: 50%; top: -14%; width: 760px; height: 760px; margin-left: -380px; border-radius: 50%; background: radial-gradient(closest-side, rgb(184 240 92 / .2), rgb(184 240 92 / .05) 55%, rgb(184 240 92 / 0)); pointer-events: none; }
.pbx-floor { position: absolute; left: 50%; top: calc(61% + (var(--H) * .5 + 20px) * var(--s)); width: 380px; height: 70px; margin: -35px 0 0 -190px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .7), rgb(0 0 0 / 0)); transform: scaleX(var(--shw, 1)); pointer-events: none; }
.pbx-scene { position: absolute; left: 50%; top: 61%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--s)); }
.pbx { --rx: -14deg; --ry: -30deg; --open: 0deg; --rise: 0px; --ty: 0px; position: absolute; transform-style: preserve-3d; transform: translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)); }
/* animated descendants get their own compositing layers, which escape the face's clip in 3D: keep the box still */
.pbx *, .pbx *::before, .pbx *::after { animation: none !important; }
.pbx-face { position: absolute; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; }
.pbx-face > .shade { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: rgb(0 0 0 / var(--sh, 0)); }
.pbx-face > .sheen { position: absolute; inset: 0; z-index: 19; pointer-events: none; background: linear-gradient(105deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / .17) 48%, rgb(255 255 255 / 0) 60%) var(--gx, 60%) 0 / 280% 100% no-repeat; }
.f-front, .f-back, .in-front, .in-back { width: var(--W); height: var(--H); left: calc(var(--W) / -2); top: calc(var(--H) / -2); }
.f-left, .f-right, .in-left, .in-right { width: var(--D); height: var(--H); left: calc(var(--D) / -2); top: calc(var(--H) / -2); }
.f-bottom, .in-bottom { width: var(--W); height: var(--D); left: calc(var(--W) / -2); top: calc(var(--D) / -2); }
.f-front { --sh: .04; transform: translateZ(calc(var(--D) / 2)); }
.f-back { --sh: .3; transform: rotateY(180deg) translateZ(calc(var(--D) / 2)); }
.f-left { --sh: .5; transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); }
.f-right { --sh: .24; transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); background: #04170f; }
/* the lid hinges on the back edge: the element's top edge is the hinge (transform-origin), 90deg lays it flat */
.pbx-lid { position: absolute; width: var(--W); height: var(--D); left: calc(var(--W) / -2); top: calc(var(--D) / -2); transform-style: preserve-3d; transform-origin: 50% 0; transform: translate3d(0, calc((var(--H) - var(--D)) / -2), calc(var(--D) / -2)) rotateX(calc(90deg + var(--open))); }
.pbx-lid .pbx-face { inset: 0; width: 100%; height: 100%; }
.f-top { display: flex; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg, #145c42, #0b3b2c); }
.f-top .bv-logo { width: 38px; height: 38px; }
.f-top .tab { padding: 5px 9px; border: 1.5px dashed rgb(184 240 92 / .55); border-radius: 7px; color: #b8f05c; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.f-top-in { --sh: .1; display: grid; place-items: center; transform: rotateX(180deg); background: linear-gradient(0deg, #c9a56c, #b48d55); }
.f-top-in b { color: #5b3f15; font-size: 19px; font-weight: 800; opacity: .85; }
.pbx-face.in { background: linear-gradient(180deg, #a98252, #7b5a30); }
.in-front { transform: translateZ(calc(var(--D) / 2 - 1px)) rotateY(180deg); }
.in-back { transform: translateZ(calc(var(--D) / -2 + 1px)); }
.in-left { transform: rotateY(-90deg) translateZ(calc(var(--W) / 2 - 1px)) rotateY(180deg); }
.in-right { transform: rotateY(90deg) translateZ(calc(var(--W) / 2 - 1px)) rotateY(180deg); }
.pbx-face.in-bottom { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2 - 1px)) rotateX(180deg); background: #6c4e28; }
.pbx-riser { --pw: 176px; position: absolute; width: var(--pw); height: calc(var(--pw) * 2.08); left: calc(var(--pw) / -2); top: calc(var(--pw) * -1.04); transform-style: preserve-3d; transform: translateY(var(--rise)); }
.pbx-riser .ph { --pw: 176px; position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pbx-riser::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--pw) * .16); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: radial-gradient(circle at 26% 12%, #2b3138 0 9%, transparent 9.5%), linear-gradient(150deg, #232a31, #0d1014); box-shadow: inset 0 0 0 1.5px #5b636d; }
/* box art: front */
.f-front { padding: 20px 18px; color: #fff; background: linear-gradient(160deg, #13583f 0%, #0b3b2c 55%, #06261c 100%); }
.bv-grid { position: absolute; inset: -30%; background-image: repeating-linear-gradient(45deg, transparent 0 22px, rgb(184 240 92 / .08) 22px 23.5px), repeating-linear-gradient(-45deg, transparent 0 22px, rgb(184 240 92 / .08) 22px 23.5px); }
.bv-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.bv-path path { fill: none; stroke: #b8f05c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .55; }
.bv-brand { position: relative; display: flex; align-items: center; gap: 9px; }
.bv-brand .bv-logo { width: 32px; height: 32px; }
.bv-brand b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.bv-slogan { position: relative; margin: 18px 0 0; max-width: 6.4ch; font-size: 35px; line-height: .98; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; color: #fff; }
.bv-sticker { position: absolute; top: 16px; right: 14px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #ffc800; color: #3d2c00; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transform: rotate(12deg); box-shadow: 0 4px 0 #c99a00; outline: 1.5px dashed rgb(61 44 0 / .4); outline-offset: -6px; }
.bv-feats { position: absolute; left: 16px; bottom: 18px; width: 112px; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bv-feats li { display: grid; grid-template-columns: 24px 1fr; gap: 7px; align-items: center; font-size: 11.5px; line-height: 1.2; font-weight: 600; }
.bv-feats li > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgb(184 240 92 / .16); color: #b8f05c; }
.bv-feats .mk-i { width: 14px; height: 14px; }
.f-front .bv-ph { --pw: 128px; position: absolute; right: -16px; bottom: -84px; transform: rotate(-9deg); box-shadow: inset 0 0 0 1.5px #5b636d, -14px 18px 30px rgb(0 0 0 / .45); }
/* back */
.f-back { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px; color: #0b3b2c; background: #f1f9ea; }
.bv-back-h { display: flex; align-items: center; gap: 8px; }
.bv-back-h .bv-logo { width: 26px; height: 26px; }
.bv-back-h b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.bv-bens { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bv-bens li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; }
.bv-bens li > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #0b3b2c; color: #b8f05c; flex: none; }
.bv-bens .mk-i { width: 11px; height: 11px; stroke-width: 3.4; }
.bv-shots { display: flex; justify-content: center; gap: 10px; }
.bv-shots .ph { --pw: 42px; box-shadow: inset 0 0 0 1px #5b636d, 0 6px 10px -4px rgb(0 0 0 / .35); }
.bv-quote { margin: 0; padding: 7px 10px; border-left: 3px solid #17924d; border-radius: 4px 10px 10px 4px; background: #fff; }
.bv-quote p { margin: 0; font-size: 11px; line-height: 1.3; font-weight: 600; font-style: italic; }
.bv-quote cite { display: block; margin-top: 2px; font-size: 9.5px; font-style: normal; color: #3f5a4c; }
.bv-reqs { display: flex; gap: 5px; }
.bv-reqs span { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; padding: 4px 5px; border: 1.5px solid #cfe3c5; border-radius: 8px; font-size: 9.5px; font-weight: 700; line-height: 1.1; }
.bv-reqs .mk-i { width: 13px; height: 13px; flex: none; }
.bv-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.bv-foot > small { max-width: 48%; font-size: 8.5px; line-height: 1.25; text-align: right; color: #3f5a4c; }
.bv-code { display: grid; gap: 2px; justify-items: center; padding: 4px 6px 2px; background: #fff; }
.bv-code .bars { display: flex; gap: 1.5px; height: 22px; }
.bv-code .bars i { display: block; background: #0b3b2c; }
.bv-code small { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .1em; }
/* spines */
.f-left { background: linear-gradient(90deg, #06261c, #0b3b2c); color: #fff; }
.f-right { background: linear-gradient(90deg, #a9e44c, #b8f05c); color: #0b3b2c; }
.spine { height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; writing-mode: vertical-rl; transform: rotate(180deg); }
.spine .bv-logo { width: 34px; height: 34px; transform: rotate(90deg); }
.spine b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.spine.alt { transform: none; gap: 10px; }
.spine.alt b { font-size: 21px; }
.spine.alt small { font-size: 10.5px; font-weight: 700; opacity: .8; white-space: nowrap; }
/* controls */
.pbx-ctrl { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.pbx-ctrl button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 14px; border: 2px solid rgb(255 255 255 / .18); border-bottom-width: 4px; background: rgb(255 255 255 / .07); color: #eef8f2; font-size: .9rem; font-weight: 700; transition: transform .1s cubic-bezier(.23,1,.32,1), background-color .15s, border-color .15s; }
.pbx-ctrl button:hover { background: rgb(255 255 255 / .13); }
.pbx-ctrl button:active { transform: translateY(2px); }
.pbx-ctrl button[aria-pressed="true"] { background: #b8f05c; border-color: #8fcf3a; color: #0b3b2c; }
.pbx-ctrl button:focus-visible { outline: 3px solid #49c0f8; outline-offset: 2px; }
.pbx-ctrl .mk-i { width: 18px; height: 18px; }
.pbx-hint { margin: 10px 16px 0; text-align: center; font-size: .82rem; color: #b9cfc4; }
@media (max-width: 979px) { .pbx-view { --s: .86; height: 570px; } }
@media (max-width: 520px) { .pbx-view { --s: .7; height: 480px; } .pbx-ctrl button { padding: 6px 11px; font-size: .84rem; } }
html.present .pbx-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
html.present .pbx-side { grid-template-columns: 1fr 1fr; align-items: start; }
html.present .pbx-side .note { grid-column: 1 / -1; }
html.present .pbx-view { --s: .6; height: 48vh; }
html.present .pbx-hint { display: none; }
html.present .pbx-ctrl button { min-height: 34px; padding: 4px 10px; font-size: 14px; }

/* sketch to mockup: one phone, three stacked layers, the higher fidelity wipes in from the left */
.fid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .fid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.fid-stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: 34px 0; perspective: 1400px; }
.fid-stage::before { content: ""; position: absolute; inset: 4% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--green-soft), transparent); }
.fid-ph { --pw: 236px; transform: rotateY(var(--ty, -10deg)) rotateX(var(--tx, 4deg)); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.fl { position: absolute; inset: 0; }
.fl.l2, .fl.l3 { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.65,0,.35,1); }
.fid input[data-n="2"]:checked ~ .fid-stage .l2, .fid input[data-n="3"]:checked ~ .fid-stage .l2, .fid input[data-n="3"]:checked ~ .fid-stage .l3 { clip-path: inset(0); }
.scan { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: .3em; margin-left: -.15em; background: #b8f05c; box-shadow: 0 0 1.4em .5em rgb(184 240 92 / .7); opacity: 0; pointer-events: none; }
.paper { position: absolute; inset: 0; background: #fbfaf4 radial-gradient(#d8d2c0 .09em, transparent .11em) 0 0 / 1.4em 1.4em; }
.sk-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-svg .pen { fill: none; stroke: #3a3a3a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-svg .pen.thin { stroke-width: 1.1; opacity: .75; }
.sk-svg .arrow { stroke: #2f7cf6; }
.wf { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: .8em; padding: 3.6em 1.1em 2.4em; background: #fff; font-family: var(--f-mono); color: #4f5a63; }
.wf-box { position: relative; display: flex; align-items: center; gap: .5em; padding: .6em .8em; border: .15em solid #98a2ab; border-radius: .5em; background: #f1f3f5; font-size: .95em; }
.wf-top { height: 3.4em; box-sizing: border-box; }
.wf-ico { display: block; width: 1.4em; height: 1.4em; border: .15em solid #98a2ab; border-radius: 50%; box-sizing: border-box; }
.wf-map { justify-content: center; }
.wf-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-map path { stroke: #c3cad0; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wf-map span { position: relative; padding: .1em .5em; background: #f1f3f5; }
.wf-sheet { display: grid; gap: .55em; align-items: start; }
.wf-line { display: block; height: .7em; border-radius: .2em; background: #c9d0d6; }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.wf-cell { display: block; padding: .8em .3em; border: .15em dashed #98a2ab; border-radius: .4em; text-align: center; font-style: normal; font-size: .82em; }
.wf-btn { display: block; padding: .9em; border: .15em solid #4f5a63; border-radius: .5em; text-align: center; font-style: normal; font-weight: 700; color: #2d353b; }
.fid-tag, .fid-ann { position: absolute; z-index: 2; padding: 5px 11px; border-radius: 12px; font-size: .8rem; font-weight: 700; white-space: nowrap; transition: opacity .4s, translate .5s cubic-bezier(.16,1,.3,1); }
.fid-tag { top: 2%; right: 4%; border: 2px solid var(--accent); background: var(--blue-soft); color: var(--accent-text); }
.fid-ann { border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--head); opacity: 0; translate: 0 8px; }
.fid-ann::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.fid-ann.a1 { left: 2%; top: 22%; } .fid-ann.a2 { right: 0; top: 56%; } .fid-ann.a3 { left: 4%; bottom: 14%; }
.fid input[data-n="1"]:checked ~ .fid-stage .fid-tag { opacity: 0; }
.fid input[data-n="3"]:checked ~ .fid-stage .fid-ann { opacity: 1; translate: 0 0; }
.fid input[data-n="3"]:checked ~ .fid-stage .a2 { transition-delay: .1s; } .fid input[data-n="3"]:checked ~ .fid-stage .a3 { transition-delay: .2s; }
.fid-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fid-seg label { cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); color: var(--head); font-weight: 700; text-align: center; font-size: .92rem; transition: transform .1s cubic-bezier(.23,1,.32,1), border-color .15s, background-color .15s; }
.fid-seg label:active { transform: translateY(2px); }
.fid-seg label b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-size: .85rem; }
.fid input[data-n="1"]:checked ~ .fid-side label[for$="-1"], .fid input[data-n="2"]:checked ~ .fid-side label[for$="-2"], .fid input[data-n="3"]:checked ~ .fid-side label[for$="-3"] { border-color: var(--green-dark); background: var(--green-soft); }
.fid input[data-n="1"]:checked ~ .fid-side label[for$="-1"] b, .fid input[data-n="2"]:checked ~ .fid-side label[for$="-2"] b, .fid input[data-n="3"]:checked ~ .fid-side label[for$="-3"] b { background: var(--green); color: var(--on-color); }
.fid input[data-n="1"]:focus-visible ~ .fid-side label[for$="-1"], .fid input[data-n="2"]:focus-visible ~ .fid-side label[for$="-2"], .fid input[data-n="3"]:focus-visible ~ .fid-side label[for$="-3"] { outline: 3px solid var(--blue); outline-offset: 2px; }
.fid-notes { margin-top: 14px; }
.fid-note { display: none; padding: 16px 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); }
.fid-note p { margin: 0; }
.fid-note .fid-q { margin-bottom: 6px; font-size: 1.15rem; font-weight: 800; color: var(--head); }
.fid input[data-n="1"]:checked ~ .fid-side .n1, .fid input[data-n="2"]:checked ~ .fid-side .n2, .fid input[data-n="3"]:checked ~ .fid-side .n3 { display: block; }
.fid-prog { height: 4px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: var(--surface-2); opacity: 0; transition: opacity .3s; }
.fid-prog.on { opacity: 1; }
.fid-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 520px) { .fid-ph { --pw: 200px; } .fid-ann { font-size: .72rem; padding: 4px 8px; } }
html.present .fid-ph { --pw: min(236px, 26vh); }

/* the four states, as a curved gallery */
.mk-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 12px 4px 6px; list-style: none; perspective: 1800px; }
.mk-states li { display: grid; justify-items: center; align-content: start; gap: 14px; }
.mk-states .ph { --pw: 188px; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.mk-states li:nth-child(1) .ph { transform: rotateY(14deg); } .mk-states li:nth-child(2) .ph { transform: rotateY(5deg) translateZ(20px); }
.mk-states li:nth-child(3) .ph { transform: rotateY(-5deg) translateZ(20px); } .mk-states li:nth-child(4) .ph { transform: rotateY(-14deg); }
@media (hover: hover) { .mk-states li:hover .ph { transform: translateY(-10px) translateZ(40px); } }
.mk-states > li > p { margin: 0; max-width: 24ch; text-align: center; font-size: .92rem; }
.mk-states > li > p b { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--head); font-size: 1.02rem; }
.mk-states .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.mk-states .s-load .dot { background: var(--blue); } .mk-states .s-err .dot { background: var(--red); } .mk-states .s-ok .dot { background: var(--green); }
.mk-states.pre li { opacity: 0; transform: translateY(46px) rotateX(18deg); }
.mk-states.go li { opacity: 1; transform: none; transition: opacity .7s, transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
@media (max-width: 1100px) { .mk-states .ph { --pw: 168px; } }
@media (max-width: 899px) {
  .mk-states { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 196px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 16px 14px; margin-inline: -16px; scrollbar-width: thin; }
  .mk-states li { scroll-snap-align: center; } .mk-states li .ph { transform: none !important; --pw: 170px; }
}
html.present .mk-states .ph { --pw: min(188px, 24vh); }