@font-face {
  font-family: 'Inter';
  src: url('https://ukacq.com/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --blue: #00AEF0; --blue-alt: #129BF2; --dark: #2F3136; --coral: #F77D7A;
  --red: #FF4500; --yellow: #FFBB00; --green: #43AC3C; --grey: #88898C;
  --bg: #f8fafc; --card: #fff; --border: #e2e8f0;
  --tx1: #0f172a; --tx2: #475569; --tx3: #94a3b8;
  --gradient: linear-gradient(166deg, #129bf2 7%, #f77d7a 92%);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#151719; --card:#1E2124; --border:rgba(255,255,255,.10);
          --tx1:#E8E9EA; --tx2:#9AA0A6; --tx3:#6C7278; }
}
:root[data-theme="dark"] {
  --bg:#151719; --card:#1E2124; --border:rgba(255,255,255,.10);
  --tx1:#E8E9EA; --tx2:#9AA0A6; --tx3:#6C7278;
}
:root[data-theme="light"] {
  --bg:#f8fafc; --card:#fff; --border:#e2e8f0;
  --tx1:#0f172a; --tx2:#475569; --tx3:#94a3b8;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg); color: var(--tx1); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 1.5em 1.5em 4em; }

/* nav */
.demo-nav {
  display: flex; gap: .4em; flex-wrap: wrap; align-items: center;
  padding: .8em 0 1.2em; border-bottom: 1px solid var(--border); margin-bottom: 1.5em;
}
.demo-nav a {
  font-size: .82em; font-weight: 600; text-decoration: none; color: var(--tx2);
  padding: .35em .8em; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); transition: all .15s;
}
.demo-nav a:hover { border-color: var(--blue); color: var(--blue); }
.demo-nav a.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.demo-nav .spacer { flex: 1; }

h1 { font-size: 1.75em; font-weight: 800; letter-spacing: -.03em; margin-bottom: .1em; }
.subtitle { color: var(--tx2); font-size: .9em; margin-bottom: 1.8em; }
h2 { font-size: 1.25em; font-weight: 700; margin: 2em 0 .5em; letter-spacing: -.02em; }
h3 { font-size: 1.02em; font-weight: 650; margin: 1.1em 0 .35em; }

/* steps */
.step {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.3em 1.4em 1.1em; margin-bottom: .9em; position: relative;
}
.step-num {
  position: absolute; top: -11px; left: 16px; background: var(--blue); color: #fff;
  font-weight: 700; font-size: .78em; padding: 2px 11px; border-radius: 12px;
  letter-spacing: .02em;
}
.step h3 { margin-top: .25em; }
.url {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .84em;
  color: var(--blue); background: rgba(0,174,240,.08); padding: 2px 8px; border-radius: 4px;
  word-break: break-all;
}
.step ul { margin: .6em 0 .2em 1.15em; }
.step li { margin-bottom: .3em; font-size: .93em; }
.step ul ul { margin-top: .3em; }
.say {
  background: rgba(0,174,240,.07); border-left: 3px solid var(--blue);
  padding: .55em .85em; margin: .65em 0; font-size: .89em; font-style: italic;
  border-radius: 0 6px 6px 0;
}
.note { background: rgba(255,187,0,.10); border-left: 3px solid var(--yellow);
        padding: .6em .9em; margin: .7em 0; font-size: .87em; border-radius: 0 6px 6px 0; }
.warn { background: rgba(255,69,0,.09); border-left: 3px solid var(--red);
        padding: .6em .9em; margin: .7em 0; font-size: .87em; border-radius: 0 6px 6px 0; }
.good { background: rgba(67,172,60,.09); border-left: 3px solid var(--green);
        padding: .6em .9em; margin: .7em 0; font-size: .87em; border-radius: 0 6px 6px 0; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 4px;
         font-size: .75em; font-weight: 650; color: #fff; vertical-align: middle; }
.badge-live { background: var(--green); }
.badge-wip { background: var(--yellow); color: #4a3800; }
.badge-broken { background: var(--red); }
.badge-skip { background: var(--grey); }
.badge-open { background: #7c3aed; }

table { width: 100%; border-collapse: collapse; font-size: .87em; margin: .8em 0; }
th { text-align: left; font-weight: 650; padding: .45em .6em; border-bottom: 2px solid var(--border);
     color: var(--tx2); font-size: .82em; text-transform: uppercase; letter-spacing: .04em; }
td { padding: .45em .6em; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl-scroll { overflow-x: auto; }

code { font-family: ui-monospace,'SF Mono',Consolas,monospace; font-size: .88em;
       background: rgba(127,127,127,.12); padding: .1em .35em; border-radius: 3px; }

.toc { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
       padding: 1em 1.4em; margin-bottom: 1.5em; }
.toc ol { margin: .5em 0 0 1.2em; }
.toc li { margin-bottom: .22em; font-size: .92em; }
.toc a { color: var(--blue); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.footer { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--border);
          font-size: .78em; color: var(--tx3); }

.unknown { color: #7c3aed; font-weight: 650; }

@media (max-width: 600px) {
  .wrap { padding: 1em 1em 3em; }
  h1 { font-size: 1.35em; }
  .step { padding: 1.1em 1em .9em; }
}