/* Fonts: Inter and Roboto Mono (SIL Open Font License), served from this server. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-mono-cyrillic-ext-wght-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-mono-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-mono-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/roboto-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   Posting tool — one stylesheet for every page.
   Built on the Syntax Studio design system (operator-console tokens:
   ink surfaces, cursor blue, Inter + Roboto Mono, the Syntax icon set).
   Every colour is light-dark(LIGHT, DARK); the page follows the phone.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces — Syntax ink scale */
  --bg:          light-dark(#F7F8FA, #0B0E14);   /* ink-1 */
  --surface:     light-dark(#FFFFFF, #11151D);   /* ink-2 */
  --surface-2:   light-dark(#F2F5FA, #161C27);   /* ink-4 / ink-3 */
  --surface-3:   light-dark(#EAEDF2, #1E2632);   /* ink-0 / ink-4 */
  --line:        light-dark(rgba(13,22,40,.10), rgba(255,255,255,.09));
  --line-2:      light-dark(rgba(13,22,40,.18), rgba(255,255,255,.16));

  /* Text — Syntax tx scale */
  --text:        light-dark(#111722, #EEF2F8);   /* tx-0 */
  --text-2:      light-dark(#3D4757, #A9B4C4);   /* tx-1 */
  --text-3:      light-dark(#6B7686, #8A96A8);   /* tx-2 (dark lifted for 4.5:1) */

  /* Accent — cursor blue */
  --accent:      light-dark(#135FC4, #66A6FF);   /* links, icons on soft tiles */
  --accent-fill: light-dark(#135FC4, #2F8BFF);   /* primary button */
  --accent-fill-hover: light-dark(#0F4FA6, #66A6FF);
  --accent-fill-press: light-dark(#0B3E85, #8FB6FF);
  --on-accent:   light-dark(#FFFFFF, #07090E);   /* DS rule: body text on blue is ink */
  --accent-soft: light-dark(rgba(28,122,240,.10), rgba(47,139,255,.14));
  --accent-line: light-dark(rgba(28,122,240,.28), rgba(47,139,255,.34));

  /* Semantic — Syntax ok / warn / danger */
  --ok:          light-dark(#15803D, #4ED197);
  --ok-soft:     light-dark(rgba(21,128,61,.10), rgba(78,209,151,.14));
  --warn:        light-dark(#B4400B, #FFB454);
  --warn-soft:   light-dark(rgba(194,65,12,.10), rgba(255,180,84,.14));
  --danger:      light-dark(#C81E6B, #FF6E9C);
  --danger-soft: light-dark(rgba(219,39,119,.10), rgba(255,110,156,.14));

  --focus:       light-dark(#1C7AF0, #66A6FF);
  --media-bg:    #07090E;
  --shadow-card: light-dark(0 1px 2px rgba(16,24,40,.05), 0 1px 0 rgba(255,255,255,.04) inset);
  --shadow-bar:  light-dark(0 -1px 0 rgba(13,22,40,.10), 0 -1px 0 rgba(255,255,255,.09));

  /* Spacing — Syntax scale (exact values) */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px;
  --sp-7: 16px; --sp-8: 18px; --sp-9: 22px; --sp-10: 24px; --sp-11: 28px; --sp-12: 32px; --sp-14: 40px; --sp-16: 48px;

  /* Type — Inter for words, Roboto Mono for machine labels (self-hosted; nothing loads from a CDN). */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-label: 12px;  /* mono section labels, uppercase */
  --fs-pill: 13px;
  --fs-sm: 14px;     /* meta, hints */
  --fs-md: 16px;     /* body, buttons, inputs */
  --fs-lg: 18px;     /* card titles */
  --fs-xl: 24px;     /* record titles */
  --fs-2xl: 30px;    /* view titles (DS h1 floor) */

  /* Radius — Syntax */
  --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 99px;

  /* Motion — Syntax */
  --ease-out: cubic-bezier(.2,.7,.3,1); --dur-fast: 140ms;

  --tap: 44px;
  --chev: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m9 6 6 6-6 6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --col: 560px;
}

/* Canvas-only forcing (also usable for an in-app theme switch later) */
.theme-light { color-scheme: light; }
.theme-dark  { color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.app { font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-wrap: pretty; container-type: inline-size; }
.app h1, .app h2, .app h3, .app p, .app dl, .app dd, .app ul, .app ol, .app pre, .app figure { margin: 0; }
.app a { color: var(--accent); text-underline-offset: 3px; }
.app a:hover { color: var(--accent-fill-hover); }
.app :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.app button { font-family: inherit; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }

/* ---------- Icons: Syntax icon set, painted with currentColor ---------- */
.ic { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-sm { width: 16px; height: 16px; } .ic-lg { width: 24px; height: 24px; }
/* Icon tile (DS: stroke icons sit in 34–38 px accent-soft tiles) */
.tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent); }
.tile.ok { background: var(--ok-soft); color: var(--ok); }
.tile.warn { background: var(--warn-soft); color: var(--warn); }
.tile.bad { background: var(--danger-soft); color: var(--danger); }
.tile.plain { background: var(--surface-2); color: var(--text-2); }
.tile.brand { background: var(--surface-2); color: var(--text); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--col); margin: 0 auto; padding: var(--sp-7) var(--sp-7) var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-11); }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.split { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); }

/* ---------- Titles ---------- */
.large-title { font-size: var(--fs-2xl); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em; padding: var(--sp-3) 2px 0; }
.page-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.page-title { font-size: var(--fs-xl); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.lede { color: var(--text-2); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-2); font-size: 15px; }
.meta-line > span { display: inline-flex; align-items: center; gap: 6px; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); font-weight: 600; text-decoration: none; margin-left: -6px; }
.app a.back { color: var(--accent); text-decoration: none; }

/* ---------- Sections ---------- */
.section { display: flex; flex-direction: column; gap: var(--sp-5); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); padding: 0 4px; }
.section-title { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.section-count { font-family: var(--mono); font-size: var(--fs-label); color: var(--text-3); }
.group-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); padding: var(--sp-2) 4px 0; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.card-title { font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.card-head { display: flex; align-items: center; gap: var(--sp-5); }
.card.tone-ok   { background: var(--ok-soft);     border-color: transparent; box-shadow: none; }
.card.tone-warn { background: var(--warn-soft);   border-color: transparent; box-shadow: none; }
.card.tone-bad  { background: var(--danger-soft); border-color: transparent; box-shadow: none; }
.card.tone-info { background: var(--accent-soft); border-color: transparent; box-shadow: none; }

/* ---------- Lists & rows ---------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; list-style: none; padding: 0; margin: 0; }
.list > * + * { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; padding: var(--sp-5) var(--sp-7); color: var(--text); text-decoration: none; width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.app a.row { color: var(--text); text-decoration: none; }
a.row, summary.row, button.row { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
a.row:hover, summary.row:hover, button.row:hover { background: var(--surface-2); }
a.row:active, summary.row:active, button.row:active { background: var(--surface-3); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-title { font-weight: 600; overflow-wrap: anywhere; }
.row-meta { font-size: var(--fs-sm); color: var(--text-3); }
.row-meta.bad { color: var(--danger); } .row-meta.warn { color: var(--warn); }
.row-end { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
a.row::after, summary.row::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: var(--text-3); opacity: .7;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
summary.row { list-style: none; }
summary.row::-webkit-details-marker { display: none; }
details[open] > summary.row::after { transform: rotate(90deg); }
.row-body { padding: 0 var(--sp-7) var(--sp-7) calc(var(--sp-7) + 36px + var(--sp-5)); display: flex; flex-direction: column; gap: var(--sp-4); }
.row.danger, .app button.row.danger { color: var(--danger); font-weight: 600; }

/* ---------- Status pills (only for states that ask something of you) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-pill); font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.pill .ic { width: 14px; height: 14px; }
.pill-ok   { background: var(--ok-soft);     color: var(--ok); }
.pill-warn { background: var(--warn-soft);   color: var(--warn); }
.pill-bad  { background: var(--danger-soft); color: var(--danger); }
.pill-info { background: var(--accent-soft); color: var(--accent); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
/* Quiet status text for states that need nothing */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.status .ic { width: 16px; height: 16px; }
.status-ok { color: var(--ok); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--tap); padding: 0 18px; border-radius: var(--r-md); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: var(--fs-md); line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out); }
.app a.btn { text-decoration: none; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.app a.btn-primary, .app a.btn-primary:hover { color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-primary:active { background: var(--accent-fill-press); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.app a.btn-secondary, .app a.btn-secondary:hover { color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary:active { background: var(--surface-3); }
/* Destructive actions (Disconnect, Stop…, Sign Claude out): one style everywhere — a quiet red button, always behind confirm(). */
.btn-danger { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-danger:active { background: var(--danger-soft); border-color: var(--danger); }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: var(--accent-soft); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-3); color: var(--text-3); border-color: transparent; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-md); }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 17px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row > .btn, .btn-row > form { flex: 1 1 140px; }
.btn-row > form > .btn { width: 100%; }

/* ---------- Switch (a submit button that looks like a toggle; no JS needed) ---------- */
.switch { position: relative; width: 51px; height: 31px; border-radius: var(--r-pill); border: 0; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; flex-shrink: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-fast) var(--ease-out); }
.switch[aria-pressed="true"] { background: var(--ok); box-shadow: none; }
.switch[aria-pressed="true"]::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--sp-9); }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 600; font-size: 15px; }
.hint { font-size: var(--fs-sm); color: var(--text-3); }
.input, .textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); }
.textarea { min-height: 176px; resize: vertical; font-family: var(--mono); font-size: 15px; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled { background: var(--surface-2); color: var(--text-3); }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); color: var(--danger); font-weight: 600; }
.field-error .ic { width: 16px; height: 16px; margin-top: 2px; }

/* ---------- Notices ---------- */
.notice { display: flex; gap: var(--sp-5); align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.notice > .ic { margin-top: 2px; }
.notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notice-title { font-weight: 650; }
.notice p { font-size: 15px; color: var(--text-2); }
.notice-ok   { background: var(--ok-soft);     border-color: transparent; } .notice-ok   > .ic, .notice-ok   .notice-title { color: var(--ok); }
.notice-warn { background: var(--warn-soft);   border-color: transparent; } .notice-warn > .ic, .notice-warn .notice-title { color: var(--warn); }
.notice-bad  { background: var(--danger-soft); border-color: transparent; } .notice-bad  > .ic, .notice-bad  .notice-title { color: var(--danger); }
.notice-info { background: var(--accent-soft); border-color: transparent; } .notice-info > .ic, .notice-info .notice-title { color: var(--accent); }
.notice .btn-row { margin-top: var(--sp-3); }

/* ---------- Key / value ---------- */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; font-size: 15px; }
.kv dt { color: var(--text-3); display: flex; gap: 8px; align-items: center; }
.kv dd { overflow-wrap: anywhere; }

/* ---------- Code to copy ---------- */
.code { display: block; font-family: var(--mono); font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* ---------- Caption ---------- */
.caption { font: inherit; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-7); max-height: 340px; overflow: auto; }

/* ---------- Media ---------- */
.media { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--r-lg); background: var(--media-bg); overflow: hidden; display: grid; place-items: center; color: #fff; }
.media.square { aspect-ratio: 4 / 5; }
.media video, .media img { width: 100%; height: 100%; object-fit: contain; }
.media-play { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.media-tag { position: absolute; left: 12px; bottom: 12px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: var(--r-sm); }
.media-missing { aspect-ratio: auto; min-height: 150px; background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--text-3); gap: 6px; align-content: center; justify-items: center; font-size: var(--fs-sm); }
.carousel { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--sp-7) var(--sp-3); margin: 0 calc(var(--sp-7) * -1); }
.carousel > figure { flex: 0 0 74%; scroll-snap-align: center; display: flex; flex-direction: column; gap: var(--sp-3); }
.carousel figcaption { font-size: 13px; color: var(--text-3); font-family: var(--mono); }

/* ---------- Checks ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.checks li { display: flex; gap: var(--sp-4); font-size: 15px; align-items: flex-start; }
.checks li .ic { width: 18px; height: 18px; margin-top: 2px; }

/* ---------- Sticky action bar (post review) ---------- */
.actionbar { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: var(--shadow-bar); padding: var(--sp-5) var(--sp-7) calc(var(--sp-5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Steps ---------- */
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-family: var(--mono); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.step.done { background: var(--ok-soft); color: var(--ok); }

/* ---------- Home views: three views on one URL, no JS ----------
   Tabs link to #posts, #accounts, #settings. With no hash, Posts shows. */
.view { display: none; flex-direction: column; gap: var(--sp-11); }
.view:target, .views:not(:has(.view:target)) > .view-default { display: flex; }

/* ---------- Tab bar: bottom on the phone, top segmented control when wide ---------- */
.tabbar { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); box-shadow: var(--shadow-bar); padding: 4px 8px env(safe-area-inset-bottom); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; font-size: 12px; font-weight: 600; border-radius: var(--r-md); }
.app a.tab { color: var(--text-3); text-decoration: none; }
.app a.tab[aria-current="page"] { color: var(--accent); }
.tab .ic { width: 24px; height: 24px; }
.badge { position: absolute; top: 5px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: light-dark(#fff, #07090E); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
@container (min-width: 720px) {
  .tabbar { position: static; box-shadow: none; background: var(--surface-2); border-radius: var(--r-md); padding: 4px; max-width: 440px; }
  .tab { flex-direction: row; gap: 8px; min-height: 40px; font-size: 15px; }
  .app a.tab[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  .tab .ic { width: 18px; height: 18px; }
  .badge { position: static; }
}

/* ---------- Long text (public pages) ---------- */
.prose { display: flex; flex-direction: column; gap: var(--sp-7); }
.prose h2 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }


/* ---------- Fixes: buttons never wrap; opened-row actions use the full width ---------- */
.btn { white-space: nowrap; }
.btn > span:not(.ic) { overflow: hidden; text-overflow: ellipsis; }
.row-body { padding-left: var(--sp-7); }
.btn-row > .btn, .btn-row > form { flex: 1 1 auto; }


/* ---------- Phone rows: status goes under the title so long ids never squeeze into 4 lines ---------- */
@container (max-width: 519px) {
  .row:has(> .tile):has(> .pill, > .status) { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: var(--sp-5); row-gap: 6px; align-items: center; }
  .row:has(> .tile):has(> .pill, > .status) > .tile { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .row:has(> .tile):has(> .pill, > .status) > .row-main { grid-column: 2; grid-row: 1; }
  .row:has(> .tile):has(> .pill, > .status) > .pill,
  .row:has(> .tile):has(> .pill, > .status) > .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .row:has(> .tile):has(> .pill, > .status)::after { grid-column: 3; grid-row: 1 / span 2; }
}


/* ---------- Fixes from the render check ---------- */
.app .media { margin-left: auto; margin-right: auto; }
.row-stack { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-5); row-gap: 10px; align-items: start; }
.row-stack > .tile { grid-row: 1 / span 2; }
.row-stack > .btn { grid-column: 2; justify-self: start; min-height: 40px; }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app a.tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }


/* ---------- Round 3: media sizes, wide layouts, action bar ---------- */
/* One size rule per media type, at every width */
.app .media { max-width: 300px; }                 /* reel, story: 9:16 */
.app .media.square { max-width: 320px; }          /* photo: 4:5 */
.app .carousel .media { max-width: none; }        /* carousel item: 74% of the column, swipe */
.media video { width: 100%; height: 100%; object-fit: contain; background: var(--media-bg); display: block; }

/* Post review: one column on phones; media left, details right from 1024 px */
.review { display: flex; flex-direction: column; gap: var(--sp-11); }
.review-body { display: flex; flex-direction: column; gap: var(--sp-11); min-width: 0; }
@container (min-width: 1024px) {
  .wrap.wrap-review { max-width: 1040px; }
  .review { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-14); align-items: start; }
  .review-media { position: sticky; top: var(--sp-10); }
}
/* Settings and platform pages stay 560 px wide at every size: forms read best narrow. */

/* Action bar: sticky at the bottom at every width; from 720 px the buttons sit in one row, primary on the right */
@container (min-width: 720px) {
  .actionbar { position: sticky; bottom: 0; box-shadow: var(--shadow-bar); background: var(--surface); flex-direction: row-reverse; justify-content: flex-start; align-items: center;
    padding: var(--sp-5) max(var(--sp-7), calc((100% - 1040px) / 2)); }
  .actionbar .btn { width: auto; min-width: 220px; }
  .actionbar > form { flex: 0 0 auto; }
  .actionbar > p { margin-right: auto; }
}

/* ==========================================================================
   Icons — generated from the Syntax icon set (components/core/icon-set.js).
   Use: <span class="ic i-check" aria-hidden="true"></span>
   ========================================================================== */
.i-check{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m5 12 5 5 9-12%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-x{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5 5l14 14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M19 5l-14 14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-chevright{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m9 6 6 6-6 6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-chevleft{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m15 6-6 6 6 6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-chevdown{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m6 9 6 6 6-6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-plus{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5 12h14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 5v14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpolyline points=%2212 6 12 12 16 14%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-schedule{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5%22 /%3E%3Cpath d=%22M16 2v4%22 /%3E%3Cpath d=%22M8 2v4%22 /%3E%3Cpath d=%22M3 10h5%22 /%3E%3Cpath d=%22M17.5 17.5 16 16.3V14%22 /%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%226%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-alert{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M10.3 3.7 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 9v4%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 17h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-info{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 11v6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 7h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E")}
.i-external{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22 /%3E%3Cpath d=%22M10 14 21 3%22 /%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-settings{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.04 4.96l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-bell{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M10.3 21a2 2 0 0 0 3.4 0%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-logout{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4%22/%3E%3Cpath d=%22M16 17l5-5-5-5%22/%3E%3Cpath d=%22M21 12H9%22/%3E%3C/svg%3E")}
.i-trash{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2%22/%3E%3Cpath d=%22M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6%22/%3E%3Cpath d=%22M10 11v6%22/%3E%3Cpath d=%22M14 11v6%22/%3E%3C/svg%3E")}
.i-eye{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-play{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%226 3 20 12 6 21 6 3%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-image{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Ccircle cx=%228.5%22 cy=%229.5%22 r=%221.6%22/%3E%3Cpath d=%22m4 18 5-5 4 4 3-3 4 4%22/%3E%3C/svg%3E")}
.i-carousel{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3v18%22 /%3E%3Crect width=%2212%22 height=%2218%22 x=%226%22 y=%223%22 rx=%222%22 /%3E%3Cpath d=%22M22 3v18%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-format-story{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2212%22 height=%2220%22 x=%226%22 y=%222%22 rx=%222%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-video{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5%22 /%3E%3Crect x=%222%22 y=%226%22 width=%2214%22 height=%2212%22 rx=%222%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-sliders{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M4 21V14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4 10V3%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 21v-9%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 8V3%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M20 21v-5%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M20 12V3%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M1 14h6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9 8h6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M17 16h6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-link{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7 0l3-3a5 5 0 1 0-7-7l-1 1%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-copy{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9 9h11v11H9z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5 15H4V4h11v1%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-users{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-inbox{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M22 12h-6l-2 3h-4l-2-3H2%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.5 5h13l3.5 7v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7l3.5-7Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-home{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m3 11 9-8 9 8%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5 10v10h14V10%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5 5h14v15H5z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5 9h14%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9 3v4%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M15 3v4%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-instagram{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-threads{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-facebook{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-youtube{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-tiktok{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-bot{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 8V4H8%22 /%3E%3Crect width=%2216%22 height=%2212%22 x=%224%22 y=%228%22 rx=%222%22 /%3E%3Cpath d=%22M2 14h2%22 /%3E%3Cpath d=%22M20 14h2%22 /%3E%3Cpath d=%22M15 13v2%22 /%3E%3Cpath d=%22M9 13v2%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-upload{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M17 8l-5-5-5 5%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 3v13%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-flag{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z%22 /%3E%3Cline x1=%224%22 x2=%224%22 y1=%2222%22 y2=%2215%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-hash{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cline x1=%224%22 x2=%2220%22 y1=%229%22 y2=%229%22 /%3E%3Cline x1=%224%22 x2=%2220%22 y1=%2215%22 y2=%2215%22 /%3E%3Cline x1=%2210%22 x2=%228%22 y1=%223%22 y2=%2221%22 /%3E%3Cline x1=%2216%22 x2=%2214%22 y1=%223%22 y2=%2221%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-send{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z%22 /%3E%3Cpath d=%22m21.854 2.147-10.94 10.939%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-globe{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18%22/%3E%3Cpath d=%22M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z%22/%3E%3C/svg%3E")}
.i-package{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22m21 16-9 5-9-5V8l9-5 9 5v8Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22m3.3 7 8.7 5 8.7-5%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 12v10%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-folder{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M3 7h6l2 2h10v10H3V7Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-mail{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22m3 7 9 6 9-6%22/%3E%3C/svg%3E")}
.i-telegram{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z%22 fill=%22black%22/%3E%3C/svg%3E")}
.i-helpcircle{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 17h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-feed-grid{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%227%22 height=%227%22 x=%223%22 y=%223%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%227%22 x=%2214%22 y=%223%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%227%22 x=%2214%22 y=%2214%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%227%22 x=%223%22 y=%2214%22 rx=%221%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-sparkles{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22 /%3E%3Cpath d=%22M20 3v4%22 /%3E%3Cpath d=%22M22 5h-4%22 /%3E%3Cpath d=%22M4 17v2%22 /%3E%3Cpath d=%22M5 18H3%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-zap{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-time{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 7v5l3 2%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-search{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-list{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M8 6h13%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8 12h13%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8 18h13%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M3 6h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M3 12h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M3 18h.01%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-empty{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M3 7h18v13H3z%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M3 7l3-4h12l3 4%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9 12h6%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.i-verified{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22 /%3E%3Cpath d=%22m9 12 2 2 4-4%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-location{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22 /%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-mention{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 /%3E%3Cpath d=%22M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-comment{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.9 20A9 9 0 1 0 4 16.1L2 22Z%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-captions{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2214%22 x=%223%22 y=%225%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M7 15h4M15 15h2M7 11h2M13 11h4%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-text-input{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1%22 /%3E%3Cpath d=%22M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5%22 /%3E%3Cpath d=%22M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1%22 /%3E%3Cpath d=%22M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7%22 /%3E%3Cpath d=%22M9 7v10%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-target{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22 /%3E%3C/g%3E%3C/svg%3E")}
.i-rocket{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z%22 /%3E%3Cpath d=%22m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z%22 /%3E%3Cpath d=%22M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0%22 /%3E%3Cpath d=%22M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5%22 /%3E%3C/g%3E%3C/svg%3E")}
/* Custom glyphs drawn to the Syntax set's rules (24 grid, 1.6 stroke, round caps) where the set has no match */
.i-shield{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z%22/%3E%3C/g%3E%3C/svg%3E")}
.i-shield-check{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z%22/%3E%3Cpath d=%22m9 12 2.2 2.2L15.5 10%22/%3E%3C/g%3E%3C/svg%3E")}
.i-lock{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2210.5%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 10.5V7.5a4 4 0 0 1 8 0v3%22/%3E%3Cpath d=%22M12 14.5v2.5%22/%3E%3C/g%3E%3C/svg%3E")}
.i-key{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22m11 12 8.5-8.5%22/%3E%3Cpath d=%22m16.5 6.5 2.5 2.5%22/%3E%3Cpath d=%22m14.5 8.5 2 2%22/%3E%3C/g%3E%3C/svg%3E")}
.i-block{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m5.6 5.6 12.8 12.8%22/%3E%3C/g%3E%3C/svg%3E")}
.i-cloud-off{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 18h10.5a3.5 3.5 0 0 0 1.4-6.7%22/%3E%3Cpath d=%22M16.5 8.6A5.5 5.5 0 0 0 6.6 10 4 4 0 0 0 7 18%22/%3E%3Cpath d=%22M3 3l18 18%22/%3E%3C/g%3E%3C/svg%3E")}
.i-unlink{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-6.5-7.5%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 6.5 7.5%22/%3E%3Cpath d=%22M3 3l3 3%22/%3E%3Cpath d=%22M18 18l3 3%22/%3E%3C/g%3E%3C/svg%3E")}
.i-bucket{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16l-1.6 12.2a2 2 0 0 1-2 1.8H7.6a2 2 0 0 1-2-1.8L4 7Z%22/%3E%3Cellipse cx=%2212%22 cy=%227%22 rx=%228%22 ry=%222.5%22/%3E%3C/g%3E%3C/svg%3E")}
.i-pause{--i:url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%224%22 width=%224%22 height=%2216%22 rx=%221%22 /%3E%3Crect x=%226%22 y=%224%22 width=%224%22 height=%2216%22 rx=%221%22 /%3E%3C/g%3E%3C/svg%3E")}

/* ==========================================================================
   Rebuild wiring — not drawn in the design, needed to serve its pages for real.
   Each Home view carries its own title and tab bar (the active tab can't follow
   the URL hash without JS otherwise); the tab bar shows at the bottom on phones
   and beside the title from 720 px, exactly where the design draws each.
   ========================================================================== */
/* The page colour also behind a short page (the design's frames are always full). */
html { background: var(--bg); }
.views > .view { display: none; gap: 0; }
.views > .view:target, .views:not(:has(> .view:target)) > .view-default { display: block; }
.view-head { display: block; }
.view-head > .tabbar { display: none; }
@container (min-width: 720px) {
  .view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-5); }
  .view-head > .large-title { padding: 0; }
  .view-head > .tabbar { display: grid; flex: 0 1 440px; }
  .view > .tabbar { display: none; }
  .wrap { padding-top: var(--sp-10); }   /* every wide frame in the design starts 24 px down */
  .wrap.wrap-home { padding-top: var(--sp-12); }
}
@container (min-width: 1024px) { .wrap.wrap-home { max-width: 760px; } }
.row-when { display: flex; gap: 5px; align-items: center; color: var(--accent); }
.only-wide { display: none; }
@container (min-width: 520px) { .only-narrow { display: none; } .only-wide { display: inline-flex; } }
/* Setup help kept from the old pages, in a row that opens in place. */
.help-body { font-size: 15px; color: var(--text-2); }
.help-body ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }