:root {
  --bg: #ffffff; --fill: #f5f5f7; --fill-hi: #e8e8ed; --raised: #ffffff; --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #a1a1a6;
  --line: rgba(0, 0, 0, .12); --header: rgba(255, 255, 255, .85);
  --accent: #9f2d4d; --accent-ink: #9f2d4d; --accent-soft: rgba(159, 45, 77, .1); --on-accent: #ffffff;
  --purple: #8e44c8; --teal: #0b7f8f; --ok: #248a3d; --ok-soft: rgba(52, 199, 89, .14); --warn: #b26f00; --warn-soft: rgba(255, 184, 0, .16); --danger: #d70015; --danger-soft: rgba(255, 59, 48, .1);
  --code-bg: #1d1d20; --code-fg: #f5f5f7;
  --pop: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05), 0 28px 64px -16px rgba(0, 0, 0, .28);
  --lift: 0 1px 3px rgba(0, 0, 0, .1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b0b0c; --fill: #161618; --fill-hi: #27272a; --raised: #1b1b1e; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73;
  --line: rgba(255, 255, 255, .12); --header: rgba(11, 11, 12, .85);
  --accent: #c8456b; --accent-ink: #ff8fae; --accent-soft: rgba(255, 143, 174, .16); --on-accent: #ffffff;
  --purple: #bf5af2; --teal: #40c8e0; --ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .12); --danger: #ff6961; --danger-soft: rgba(255, 105, 97, .14);
  --code-bg: #2a2a2e; --code-fg: #f5f5f7;
  --pop: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .4), 0 28px 64px -16px rgba(0, 0, 0, .85);
  --lift: 0 1px 3px rgba(0, 0, 0, .5);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0b0b0c; --fill: #161618; --fill-hi: #27272a; --raised: #1b1b1e; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73;
  --line: rgba(255, 255, 255, .12); --header: rgba(11, 11, 12, .85);
  --accent: #c8456b; --accent-ink: #ff8fae; --accent-soft: rgba(255, 143, 174, .16); --on-accent: #ffffff;
  --purple: #bf5af2; --teal: #40c8e0; --ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .12); --danger: #ff6961; --danger-soft: rgba(255, 105, 97, .14);
  --code-bg: #2a2a2e; --code-fg: #f5f5f7;
  --pop: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .4), 0 28px 64px -16px rgba(0, 0, 0, .85);
  --lift: 0 1px 3px rgba(0, 0, 0, .5);
  color-scheme: dark }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; transition: color .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h2 { font-size: 24px; line-height: 1.5; letter-spacing: -.025em; font-weight: 600; }
p { margin: 0; }
small { font-size: inherit; }
code, pre { font-family: var(--mono); }
::selection { background: var(--accent-soft); }
.gutter { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1080px; margin-inline: auto; }
main { min-height: 62vh; padding-bottom: 24px; overflow-x: clip; }
.center { text-align: center; display: grid; justify-items: center; gap: 10px; }

header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--header); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.bar { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 17px var(--display); letter-spacing: -.02em; flex: none; border-radius: 8px; }
.mark { width: 28px; height: 28px; flex: none; display: block; }
.mark svg { display: block; width: 100%; height: 100%; }
.searchpill { display: flex; align-items: center; gap: 10px; height: 36px; width: 164px; flex: none; background: var(--fill); border-radius: 999px; padding: 0 16px; margin-left: 8px; color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; transition: background-color .15s var(--ease), color .15s var(--ease); }
.searchpill:hover { background: var(--fill-hi); color: var(--ink); }
.searchpill svg { flex: none; width: 14px; height: 14px; }
.searchpill span { flex: 1; }
kbd { font: inherit; }
.searchpill kbd { font-size: 11px; color: var(--ink-2); }
.iconbtn { display: none; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; padding: 0; transition: background-color .15s var(--ease); }
.iconbtn:hover { background: var(--fill); }
nav.main { display: flex; gap: 28px; font-size: 14px; font-weight: 600; margin-inline: auto; align-items: center; }
nav.main > a, .navbtn { display: inline-flex; align-items: center; gap: 4px; height: 36px; white-space: nowrap; }
nav.main > a:hover, nav.main > a[aria-current] { color: var(--accent-ink); }
.navbtn { all: unset; display: inline-flex; align-items: center; gap: 4px; height: 36px; cursor: pointer; font: 600 14px var(--sans); color: var(--ink); transition: color .15s var(--ease); }
.navbtn:hover, .navbtn.on, .navbtn:has(+ :popover-open) { color: var(--accent-ink); }
.navbtn svg { transition: transform .2s var(--ease); }
.navbtn:has(+ :popover-open) svg { transform: rotate(180deg); }
.navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.end { display: flex; align-items: center; gap: 16px; flex: none; font-size: 14px; font-weight: 600; }
.end > a:not(.btn):hover { color: var(--accent-ink); }
.langs { display: inline-flex; gap: 0; background: var(--fill); border-radius: 999px; padding: 2px; font-size: 12px; font-weight: 600; }
.langs a { padding: 3px 9px; border-radius: 999px; color: var(--ink-2); }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { background: var(--bg); color: var(--ink); box-shadow: var(--lift); }
.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 600 15px var(--sans); flex: none; border: 0; padding: 0; cursor: pointer; transition: box-shadow .15s var(--ease); }
.avatar:hover { box-shadow: 0 0 0 3px var(--fill-hi); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.menu { inset: auto; margin: 0; border: 0; padding: 12px; background: var(--bg); color: var(--ink); border-radius: 24px; box-shadow: var(--pop); font-size: 14px; font-weight: 400; transform-origin: center top; }
.menu:popover-open { animation: menu-in .22s cubic-bezier(.2, .9, .3, 1.1); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.navbtn { anchor-name: --developers; }
.devmenu { position-anchor: --developers; position-area: bottom; margin-top: 12px; width: 364px; }
.navbtn[data-menu=categories] { anchor-name: --categories; }
.catmenu { position-anchor: --categories; position-area: bottom; margin-top: 12px; width: 440px; padding: 8px; }
.catmenu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.catmenu li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-weight: 500; transition: background-color .15s var(--ease); }
.catmenu li a:hover { background: var(--fill); }
.catmenu .seemore { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--line); }
.avatar[popovertarget] { anchor-name: --account; }
.account { position-anchor: --account; position-area: bottom span-left; margin-top: 12px; width: 260px; padding: 8px; }
.mrow { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 12px; transition: background-color .15s var(--ease); }
.mrow:hover { background: var(--fill); }
.mrow .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--fill); transition: background-color .15s var(--ease); }
.mrow:hover .tile { background: var(--bg); }
.mrow > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.mrow b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mrow small { font-size: 12.5px; line-height: 1.375; color: var(--ink-2); }
.mrow .go { color: var(--ink-3); opacity: 0; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.mrow:hover .go { opacity: 1; transform: translateX(2px); }
.who { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; min-width: 0; }
.who .avatar { width: 40px; height: 40px; cursor: default; }
.who b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mgroup { display: grid; padding-block: 4px; }
.mgroup + .mgroup, ul + .mgroup { border-top: 1px solid var(--line); }
.mitem { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; cursor: pointer; color: var(--ink); }
.mitem svg { color: var(--ink-2); }
.mitem:hover { background: var(--fill); }
.mitem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bar { anchor-name: --bar; }
.menubtn .shut, .menubtn:has(+ :popover-open) .open { display: none; }
.menubtn:has(+ :popover-open) .shut { display: contents; }
.menubtn span { display: contents; }
.sheet { position: fixed; inset: auto 0 auto 0; top: 72px; top: anchor(--bar bottom); margin: 0; width: auto; max-height: calc(100dvh - 72px); overflow-y: auto; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 12px 20px 24px; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet h2 { margin: 24px 0 8px; font: 600 13px var(--sans); letter-spacing: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ptiles a { display: block; border-radius: 12px; background: var(--fill); padding: 12px 16px; font-size: 14px; font-weight: 500; }
.ptiles a:hover { background: var(--fill-hi); }
.pcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.pcats a { display: flex; align-items: center; gap: 10px; padding-block: 8px; font-size: 14px; font-weight: 500; min-width: 0; }
.pcats span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prows a, .prows button { all: unset; display: block; cursor: pointer; padding-block: 8px; font-size: 15px; font-weight: 500; }
.prows a:hover, .prows button:hover { color: var(--accent-ink); }
.sheet .langs { margin-top: 20px; }
@supports not (position-area: bottom) { .devmenu, .catmenu, .account { position: fixed; top: 72px; right: 20px; left: auto; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 999px; padding: 0 20px; font: 500 14px/1 var(--sans); cursor: pointer; background: var(--accent); color: var(--on-accent); white-space: nowrap; transition: filter .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.98); }
.btn.alt { background: var(--fill); color: var(--ink); }
.btn.alt:hover { background: var(--fill-hi); filter: none; }
.btn.small { height: 36px; padding: 0 16px; font-size: 14px; }
.btn.big { height: 44px; padding: 0 24px; font-size: 15px; }
.btn.wide { width: 100%; height: 48px; font-size: 15px; gap: 12px; }
.btn.ink { background: var(--ink); color: var(--bg); height: 40px; }
.btn.ink svg { width: 18px; height: 18px; }
.btn.danger { background: transparent; color: var(--danger); padding: 0 12px; }
.btn.danger:hover { background: var(--danger-soft); filter: none; }
.end .btn.small { padding: 0 16px; }

.hero { text-align: center; padding-block: 80px; display: grid; justify-items: center; }
.pill { display: inline-flex; gap: 8px; align-items: center; height: 28px; border-radius: 999px; padding: 0 12px 0 3px; font-size: 12.5px; font-weight: 400; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.pill b { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #000; color: #fff; font-weight: 600; }
.pill::after { content: "›"; color: var(--ink-3); font-size: 15px; line-height: 1; }
.pill:hover { box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink); }
.hero h1 { margin-top: 24px; font-size: clamp(44px, 8.4vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; }
.hero h1 span { color: var(--ink-2); display: block; }
.hero > p { margin-top: 20px; max-width: 520px; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.62; color: var(--ink-2); }
.iconrow { display: flex; justify-content: center; margin-top: 24px; }
.iconrow a { position: relative; display: block; margin-right: -6px; border-radius: 22%; transition: transform .2s var(--ease); }
.iconrow a:last-child { margin-right: 0; }
.iconrow .mono { box-shadow: 0 0 0 2px var(--bg), 0 1px 2px rgba(0, 0, 0, .08); }
.iconrow a:hover, .iconrow a:focus-visible { transform: translateY(-4px) scale(1.12); z-index: 2; }
.peek { position: absolute; left: 50%; top: calc(100% + 10px); width: 264px; transform: translateX(-50%) scale(.89); transform-origin: top center; display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--raised); box-shadow: var(--pop); text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); }
.iconrow a:hover .peek, .iconrow a:focus-visible .peek { opacity: 1; }
.peek .panel { width: 88px; height: 56px; flex: none; border-radius: 8px; font: 600 8px/1.2 var(--sans); padding: 6px; color: #fff; display: grid; align-items: end; overflow: hidden; }
.peek > span:last-child { display: grid; min-width: 0; }
.peek b { font-size: 13px; font-weight: 600; color: var(--ink); }
.peek small { font-size: 12px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.btn.big { padding: 0 24px 0 20px; }
.btn.big .mark { width: 18px; height: 18px; }
.leafglyph { display: inline-block; height: .8em; width: auto; vertical-align: -.04em; margin-right: .12em; fill: currentColor; }

img.mono { display: block; object-fit: cover; background: var(--fill); }
.mono { display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; letter-spacing: -.02em; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .08); }

.sec { margin-top: 80px; }
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.sechead p { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.seemore { font-size: 14px; font-weight: 500; color: var(--accent-ink); white-space: nowrap; }
.seemore:hover { opacity: .75; }

.scroller .track { --bleed: max(20px, env(safe-area-inset-left, 0px), 50vw - 540px); position: relative; list-style: none; margin: 0 calc(-1 * var(--bleed)); padding: 0 var(--bleed) 4px; scroll-padding-inline: var(--bleed); display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scroller .track::-webkit-scrollbar { display: none; }
.scroller .track > li { scroll-snap-align: start; display: grid; min-width: 0; }
.js .scroller.still .arrows { display: none; }
@media (min-width: 721px) {
  .scroller .track { grid-auto-columns: calc((100% - 16px) / 2); }
  .scroller .track:has(> li:nth-child(5)) { grid-template-rows: repeat(2, auto); row-gap: 32px; }
  .scroller .track:has(> li:nth-child(5)) > li { scroll-snap-align: none; }
  .scroller .track:has(> li:nth-child(5)) > li:nth-child(4n+1) { scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .scroller .track, .scroller .track:has(> li:nth-child(5)) { margin: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 32px 16px; }
  .js .scroller .arrows, .js .scroller .dots { display: none; }
}
.scroller.strip { margin-top: 32px; }
.scroller.strip .sechead { margin-bottom: 16px; }
.scroller.strip .track, .scroller.strip .track:has(> li:nth-child(5)) { margin: 0 calc(-1 * var(--bleed)); padding: 0 var(--bleed) 4px; scroll-padding-inline: var(--bleed); overflow-x: auto; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: none; grid-auto-columns: min(640px, 86%); gap: 16px; }
.scroller.strip .track > li, .scroller.strip .track:has(> li:nth-child(5)) > li { scroll-snap-align: start; }
.js .scroller.strip:not(.still) .arrows, .js .scroller.strip .dots { display: flex; }
.shot { display: block; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.revcard .scroller.strip { margin: 0; }
.revcard .scroller.strip .track, .revcard .scroller.strip .track:has(> li:nth-child(5)) { margin: 0; padding: 0 0 4px; scroll-padding-inline: 0; grid-auto-columns: min(440px, 86%); }
.revcard .shot { background: var(--bg); }
.dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; }
.js .dots { display: flex; }
.dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--fill-hi); cursor: pointer; transition: width .45s cubic-bezier(.32, .72, 0, 1), background-color .45s cubic-bezier(.32, .72, 0, 1); }
.dots span.on { width: 24px; background: var(--ink-2); }
a.feat { display: grid; gap: 12px; min-width: 0; }
.feat .clip { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; }
.feat .panel { width: 100%; height: 100%; display: grid; align-items: end; color: #fff; font: 600 22px/1.2 var(--display); letter-spacing: -.02em; padding: 22px; text-wrap: balance; transition: transform .5s var(--ease); }
a.feat:hover .panel { transform: scale(1.02); }
.panel.shot { object-fit: cover; padding: 0; background: var(--fill); }
picture { display: contents; }
picture > source { display: none; }
.peek .panel.shot { display: block; }
.feat .row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.feat b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.feat small { color: var(--ink-2); font-size: 13px; line-height: 1.375; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arrows { display: none; gap: 8px; }
.js .arrows { display: flex; }
.roundbtn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); cursor: pointer; transition: background-color .15s var(--ease); }
.roundbtn:hover { background: var(--fill-hi); }
.roundbtn:disabled { opacity: .4; cursor: default; background: var(--fill); }

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
.cat { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.3; min-width: 0; color: var(--ink); transition: background-color .15s var(--ease); }
.cat:hover { background: var(--fill); }
.cat i { width: 28px; height: 28px; flex: none; border-radius: 28%; display: grid; place-items: center; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4); }
.cat i svg { width: 16px; height: 16px; }
.cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat small { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.cat[aria-current] { color: var(--accent-ink); font-weight: 600; }
.sec.catsec { margin-top: 40px; }
.catcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card.catcard { grid-template-columns: 40px minmax(0, 1fr); color: var(--ink); }
.catcard i { width: 40px; height: 40px; border-radius: 28%; display: grid; place-items: center; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4); }
.catcard i svg { width: 22px; height: 22px; }
.catcard small { display: block; margin-top: 8px; color: var(--ink-3); font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { background: var(--fill); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; transition: background-color .15s var(--ease); }
.card:hover { background: var(--fill-hi); }
.card b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.5; min-width: 0; }
.card p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.375; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.wide { grid-template-columns: minmax(0, 1fr); }
:root { --seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z'/%3E%3C/svg%3E"); }
.check { display: inline-block; width: 14px; height: 14px; flex: none; font-size: 0; color: transparent; background: linear-gradient(180deg, var(--accent-ink), var(--accent)); -webkit-mask: var(--seal) center / contain no-repeat; mask: var(--seal) center / contain no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.chips > span + span:not(.fs)::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
.chip { color: var(--ink-2); }

.fs { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--fill-hi); color: var(--ink-2); }
.fs-yes { background: var(--ok-soft); color: var(--ok); }
.fs-partial { background: var(--warn-soft); color: var(--warn); }
.fs-no { background: var(--danger-soft); color: var(--danger); }
.card .fs { background: var(--ok-soft); }
.statusp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; background: var(--fill); color: var(--ink); border-radius: 999px; padding: 2px 10px; line-height: 1.5; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.statusp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.statusp.ok::before { background: var(--ok); }
.statusp.wait::before { background: var(--warn); }
.statusp.no::before { background: var(--danger); }
.card .statusp { font-size: 11px; padding: 0 8px; }

.pagehead { padding-block: 48px 4px; display: grid; gap: 8px; justify-items: start; }
.pagehead h1, .tool h1, .doc h1 { font-size: clamp(32px, 5vw, 42px); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
.pagehead > p { color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 640px; }
.pagehead.center { justify-items: center; text-align: center; padding-top: 56px; }
.pagehead.center > p { max-width: 520px; }
.pagehead .eyebrow { color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.pagehead .path { font: 400 13px var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.crumb { display: flex; width: fit-content; align-items: center; gap: 4px; color: var(--ink-2); font-size: 14px; margin-block: 28px 16px; }
.crumb + :not(.crumb) { padding-top: 0; }
.askrow, .headrow .askrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.askrow .asklabel { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.askrow a { display: inline-flex; align-items: center; gap: 4px; }
.askrow a:hover { color: var(--ink); }
.askrow svg { width: 11px; height: 11px; flex: none; }
.crumb:hover { color: var(--ink); }
.crumb::before { content: ""; width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin: 0 3px 0 2px; }
.headrow { display: flex; gap: 20px; align-items: flex-start; }
.headrow i { width: 64px; height: 64px; border-radius: 28%; display: grid; place-items: center; flex: none; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4); }
.headrow i svg { width: 30px; height: 30px; }
.headrow > div { display: grid; gap: 6px; min-width: 0; }
.headrow p { color: var(--ink-2); font-size: 16px; line-height: 1.625; }
.headrow > div > p:first-of-type { margin-top: 2px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; }
.chipset { display: contents; }
.chipset a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color .15s var(--ease); }
.chipset a:hover { background: var(--fill-hi); }
.chipset a[aria-current] { background: var(--ink); color: var(--bg); }
.clearchip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; background: var(--fill); border-radius: 999px; padding: 2px; min-height: 32px; }
.seg a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.seg.sort { order: 9; margin-left: auto; }
.count { display: block; width: 100%; order: 10; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.listing .grid, .listing .empty { margin-top: 20px; }
.listing .grid, .listing .empty { margin-top: 12px; }

.empty { background: var(--fill); border-radius: 16px; padding: 56px 24px; color: var(--ink); font-weight: 500; font-size: 15px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.textlink { color: var(--accent-ink); font-size: 14px; font-weight: 500; }
.textlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.empty b { color: var(--ink); font: 600 17px var(--display); letter-spacing: -.01em; }

.tool { padding-block: 28px 0; }
.toolhead { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 10px; }
.toolhead h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.toolhead h1 .check { width: 22px; height: 22px; }
.toolhead p { margin: 4px 0 0; color: var(--ink-2); font-size: clamp(17px, 2.2vw, 19px); line-height: 1.5; }
.toolhead .sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.toolhead .go { align-self: center; }
.toolbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; margin-top: 44px; align-items: start; }
.toolbody h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 12px; }
.toolbody h2:not(:first-child) { margin-top: 36px; }
.toolbody > div > p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; max-width: 68ch; }
.toolbody aside { display: grid; gap: 28px; position: sticky; top: 80px; }
.catchips { display: flex; flex-wrap: wrap; gap: 6px; }
.catchips .fpill { height: auto; padding: 6px 12px; }
.side, .askai.side { display: grid; gap: 6px; margin: 0; justify-content: start; }
.side b { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.askai.side ul { margin-left: -6px; }
.reduced .askai, .reduced .askrow { display: none; }
.facts { background: var(--fill); border-radius: 16px; padding: 20px; font-size: 13px; margin: 0; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts div:first-child { padding-top: 0; }
.facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { color: var(--ink-2); flex: none; }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; font-weight: 500; }
.facts dd a { color: var(--accent-ink); }
.claim { background: var(--fill); border-radius: 16px; padding: 16px 20px; font-size: 13px; color: var(--ink-2); }
.claim a { color: var(--accent-ink); font-weight: 500; }
.claim a:hover { text-decoration: underline; text-underline-offset: 2px; }

.tablewrap { background: var(--fill); border-radius: 16px; padding: 4px 20px; margin: 0 0 12px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: baseline; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td:last-child { padding-right: 0; color: var(--ink-2); }
th { font-weight: 600; }
.ft td:first-child { font-weight: 500; }
.ft a { color: var(--accent-ink); white-space: nowrap; }
.toolbody .note { color: var(--ink-3); font-size: 13px; line-height: 1.5; }

.doc { max-width: 720px; margin-inline: auto; padding-block: 64px 20px; }
.doc .eyebrow { color: var(--accent-ink); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.doc h1 { margin-bottom: 20px; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; }
.doc .docmeta { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc .docmeta .statusp { white-space: normal; line-height: 1.4; border-radius: 12px; padding-block: 4px; }
.doc .docmeta a { color: var(--accent-ink); }
.doc .docmeta a:hover { text-decoration: underline; }
.doc h2 { font-size: 20px; letter-spacing: -.015em; margin: 40px 0 12px; }
.doc p { margin: 0 0 12px; font-size: 16px; line-height: 1.625; color: var(--ink); }

.formgrid { display: grid; gap: 16px; }
.formgrid label, .fldhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.formgrid > label { display: grid; gap: 8px; justify-content: stretch; }
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]):not([type=search]), textarea, select { font: 400 15px/1.5 var(--sans); height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); width: 100%; min-width: 0; outline: none; transition: background-color .15s var(--ease), box-shadow .15s var(--ease); -webkit-appearance: none; appearance: none; }
textarea { height: auto; padding: 12px 14px; line-height: 1.625; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:not([type=radio]):not([type=checkbox]):not([type=search]):focus, textarea:focus, select:focus { background: var(--raised); box-shadow: 0 0 0 2px var(--accent); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input:user-invalid, textarea:user-invalid, .fld:has(.err) input, .fld:has(.err) textarea { box-shadow: 0 0 0 2px var(--danger); }
input[type=file] { font: 400 14px var(--sans); color: var(--ink-2); }
input[type=file]::file-selector-button { font: 500 14px var(--sans); height: 36px; padding: 0 16px; margin-right: 12px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--fill-hi); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }
.fld { display: grid; gap: 8px; min-width: 0; }
.fldhead label { font-weight: 600; }
.cnt { color: var(--ink-2); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.hint { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; line-height: 1.375; }
.opt { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.err { color: var(--danger); font-size: 13px; font-weight: 500; margin: 0 !important; }
.notice { background: var(--warn-soft); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; margin: 16px 0; }
.notice.good { background: var(--ok-soft); }
.lede { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.keep { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
pre.code { background: var(--code-bg); color: var(--code-fg); border-radius: 12px; padding: 14px 16px; font: 400 12.5px/1.6 var(--mono); overflow-x: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.copyrow { display: flex; gap: 8px; align-items: center; background: var(--fill); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.copyrow code { font: 400 13px/1.5 var(--mono); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.copyrow.white { background: var(--raised); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill-b { position: relative; cursor: pointer; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--fill); color: var(--ink-2); transition: background-color .15s var(--ease), color .15s var(--ease); user-select: none; }
.pill-b:hover { background: var(--fill-hi); color: var(--ink); }
.pill-b input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill-b:has(input:checked) { background: var(--ink); color: var(--bg); }
.pill-b:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.signin { max-width: 380px; margin: 28px auto 0; display: grid; gap: 16px; text-align: center; }
.signin > p { color: var(--ink-2); font-size: 15px; }
.signin > p a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.signin .formgrid { text-align: left; }
.signin .formgrid > label { justify-items: stretch; }
.signin input[type=email], .signin input[name=code] { height: 48px; border-radius: 999px; padding: 0 20px; text-align: center; font-size: 15px; }
.signin .formgrid .btn { height: 48px; font-size: 15px; width: 100%; }
.signin .hint { text-align: center; line-height: 1.6; }
.signin h2 { font-size: 17px; letter-spacing: -.01em; margin-top: 12px; }
.signin.wide { max-width: 520px; text-align: left; }
.signin.wide .hint { text-align: left; }
.login { max-width: 400px; margin: 0 auto; padding: 80px 20px 96px; display: grid; justify-items: center; text-align: center; }
.login > h1 { margin-top: 24px; font-size: 34px; line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
.login > p:not(.fine) { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.375; }
.login .notice { width: 100%; margin: 24px 0 0; text-align: left; }
.login .ways, .login .way { width: 100%; margin-top: 36px; }
.login .ways { display: grid; }
.login .way { display: grid; gap: 10px; text-align: center; }
.login .ways:not(.shown), .login .way.email:not(.shown) { display: none; }
html:not(.js) .login:has(#email:target) #email, html:not(.js) .login:has(#ways:target) #ways { display: grid; }
html:not(.js) .login:has(#email:target) #ways, html:not(.js) .login:has(#ways:target) #email { display: none; }
.login .intro { color: var(--ink-2); font-size: 14px; line-height: 1.375; margin-bottom: 6px; }
.login form { display: grid; gap: 10px; }
.login form label { display: block; }
.login input[type=email], .login input[name=code] { height: 48px; border-radius: 999px; padding: 0 20px; text-align: center; font-size: 15px; }
.login input[name=code] { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.login form .hint { margin-top: 6px; text-align: center; line-height: 1.375; }
.login .back { justify-self: center; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.login .back:hover { color: var(--ink); }
.login .fine { margin-top: 32px; font-size: 13px; line-height: 1.625; color: var(--ink-2); }
.login .fine a { color: var(--ink); text-underline-offset: 2px; }
.login .fine a:hover { text-decoration: underline; }
.startlink ~ .login, .notice ~ .login { padding-top: 40px; }
.providers { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.btn.alt.wide { font-weight: 500; color: var(--ink); }
.btn.alt.wide.busy .pmark { animation: spin .8s linear infinite; }
.btn.alt.wide.busy .pmark svg { visibility: hidden; }
.btn.alt.wide.busy .pmark { border: 2px solid var(--ink-3); border-top-color: transparent; border-radius: 50%; width: 18px; height: 18px; }
.btn.alt.wide.off { opacity: .6; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.pmark { display: flex; width: 20px; justify-content: center; }
.pmark svg { width: 18px; height: 18px; display: block; }
.pmark.quiet { color: var(--ink-2); }
.lastused { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.lastused[hidden] { display: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin-block: 20px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.brandmark { width: 64px; height: 64px; margin: 0 auto; display: block; filter: drop-shadow(0 6px 16px rgba(96, 19, 42, .22)); }
.brandmark svg { width: 100%; height: 100%; display: block; }

.starthero { display: grid; justify-items: center; gap: 14px; text-align: center; padding-block: 56px 0; }
.starthero h1 { font-size: clamp(32px, 5vw, 40px); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; }
.starthero p { max-width: 460px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.startlink { max-width: 560px; margin: 36px auto 0; display: grid; gap: 8px; }
.startlink label { font-weight: 600; font-size: 14px; }
.urlrow { display: flex; gap: 8px; }
.urlrow input { flex: 1 1 auto; height: 48px !important; border-radius: 999px !important; padding: 0 20px !important; }
.urlrow .btn { height: 48px; padding: 0 24px; font-size: 15px; }
.yours { max-width: 560px; margin: 40px auto 0; display: grid; gap: 10px; }
.yours h2 { font-size: 17px; letter-spacing: -.01em; }
.yours ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.yours ul a { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fill); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; }
.yours ul a::after { content: "›"; color: var(--ink-3); font-size: 18px; line-height: 1; }
.yours ul a:hover { background: var(--fill-hi); }
.mine { display: grid; gap: 12px; }
.dash { max-width: 720px; margin: 0 auto; padding-block: 40px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.dashhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashwho { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.dashhead form { flex: none; }
.dashwho b { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.big { width: 56px; height: 56px; font-size: 22px; cursor: default; }
.avatar.big:hover { box-shadow: none; }
.dashbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dashbar h1 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -.025em; }
.dashempty { background: var(--fill); border-radius: 24px; padding: 28px 24px; color: var(--ink-2); margin: 0; }
.minecard { background: var(--fill); border-radius: 24px; padding: 20px 24px; display: grid; gap: 16px; }
.minehead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.minehead b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.minehead .statusp { background: none; padding: 0; font-size: 13px; color: var(--ink-2); }
.minecard .pills .btn.alt { background: var(--bg); }
.minecard .pills .btn.alt:hover { background: var(--fill-hi); }
.narrowcard { max-width: 560px; margin: 48px auto 0; }
.subcard { background: var(--fill); border-radius: 24px; padding: 24px; min-width: 0; font-size: 14px; }
.agentcard { display: grid; gap: 12px; }
.agentcard h2 { font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; }
.agentcard h2::before { content: ""; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--accent) var(--spark) center / 16px no-repeat; }
:root { --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1l1.6 4.4L14 7l-4.4 1.6L8 13l-1.6-4.4L2 7l4.4-1.6z'/%3E%3C/svg%3E"); }
.agentcard > p { color: var(--ink-2); line-height: 1.5; padding-left: 40px; }
.agentcard > p.keep { padding-left: 0; }
.agentcard strong { font-size: 14px; margin-top: 4px; }
.agentcard form { display: flex; flex-wrap: wrap; gap: 8px; }
.agentcard > .btn { justify-self: start; }
.mcp .agentcard { margin-top: 32px; }
.mcp .agentcard h2 { margin: 0; }
.mcp .agentcard > p { font-size: 14px; margin: 0; }
.mcp .tools { display: grid; gap: 16px; margin: 0 0 32px; }
.mcp .tools div { display: grid; gap: 4px; min-width: 0; }
.mcp .tools dt code { font: 600 14px/1.4 var(--mono); }
.mcp .tools dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
.mcp .makers a { color: var(--accent-ink); }
.mcp .makers a:hover { text-decoration: underline; }
.agentcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.agentcard .meta form { display: inline-flex; gap: 16px; }
.copyrow .copybtn { margin: -4px -8px -4px 0; }
.copybtn { display: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; flex: none; transition: background-color .15s var(--ease); }
.js .copybtn { display: inline-flex; }
.copybtn:hover { background: var(--fill-hi); }
.copybtn.done { color: var(--ok); }
.howto { background: var(--raised); border-radius: 20px; overflow: hidden; }
.howto summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.howto summary::-webkit-details-marker { display: none; }
.howto > summary { height: 64px; padding: 0 20px; font-size: 16px; font-weight: 500; }
.howto > summary > svg { margin-left: auto; color: var(--ink-3); transition: transform .2s var(--ease); }
.howto[open] > summary > svg { transform: rotate(180deg); }
.howto .marks { display: inline-flex; gap: 8px; color: var(--ink); }
.howto .marks svg { width: 16px; height: 16px; }
.howto details { border-top: 1px solid var(--line); }
.howto details > summary { padding: 14px 20px; }
.howto details > summary:hover { background: var(--fill); }
.howto .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--fill); color: var(--ink); }
.howto .tile svg { width: 20px; height: 20px; }
.howto details b { font-size: 16px; font-weight: 500; }
.howto .where { margin-left: auto; color: var(--ink-2); font-size: 14px; }
.howto details > summary > svg { color: var(--ink-3); transition: transform .2s var(--ease); }
.howto details[open] > summary > svg { transform: rotate(90deg); }
.client { display: grid; gap: 12px; padding: 4px 20px 20px; color: var(--ink); font-size: 15px; }
.client .sub { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.client .btn.ink { justify-self: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; line-height: 1.5; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.terminal { background: var(--code-bg); color: var(--code-fg); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .35); }
.tbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; }
.lights { width: 52px; height: 12px; flex: none; background: radial-gradient(circle at 6px 6px, #ff5f57 5.5px, transparent 6px), radial-gradient(circle at 26px 6px, #febc2e 5.5px, transparent 6px), radial-gradient(circle at 46px 6px, #28c840 5.5px, transparent 6px); }
.ttl { font: 400 12.5px var(--mono); color: #a1a1a6; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal .copybtn { background: none; color: #a1a1a6; height: 28px; padding: 0 4px; }
.terminal .copybtn:hover { color: #f5f5f7; background: none; }
.terminal pre { margin: 0; padding: 14px 16px 18px; font: 400 13px/1.6 var(--mono); white-space: pre; overflow-x: auto; }
.terminal .ps { color: #6e6e73; }
.thenask { display: grid; gap: 10px; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.thenask b { font-size: 15px; font-weight: 600; }
.askpill { display: inline-flex; align-items: center; gap: 12px; justify-self: start; max-width: 100%; min-height: 44px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; }
.askpill > span { min-width: 0; overflow-wrap: anywhere; }
.askpill .copybtn { background: rgba(255, 255, 255, .18); color: var(--on-accent); }
.askpill .copybtn:hover { background: rgba(255, 255, 255, .28); }
html:not(.js) .askpill { padding-right: 18px; }

.edhead { display: flex; align-items: center; gap: 16px; padding-block: 36px 8px; flex-wrap: wrap; }
.edhead .mono { width: 72px; height: 72px; border-radius: 22%; font-size: 26px; }
.edhead h1 { font-size: 28px; letter-spacing: -.025em; font-weight: 600; line-height: 1.2; }
.edhead > div { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.edhead .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--ink-2); font-size: 13px; }
.edhead .meta a { color: var(--accent-ink); }
.edhead form { display: inline; }
.edstack { display: grid; gap: 16px; margin-top: 16px; }
.edstack .claim { padding: 20px 24px; }
.edstack .claim h2 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.edstack .claim ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.edstack .claim li { display: flex; gap: 8px; align-items: baseline; color: var(--ink); }
.edstack .claim li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; transform: translateY(-2px); }
.edstack .checklist ul + h2 { margin-top: 16px; }
.edstack .checklist ul:first-of-type li::before { background: var(--warn); }
.edstack .claim li a { color: var(--ink); }
.edstack .claim li a:hover { color: var(--accent-ink); }
.edstack .claim strong { color: var(--ink); }
.edgrid { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 32px 24px; }
.ednav { position: sticky; top: 96px; display: grid; gap: 2px; }
.ednav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.ednav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); margin: 0 5px; flex: none; }
.ednav a:hover { background: var(--fill); color: var(--ink); }
.edmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; min-width: 0; max-width: 736px; }
.edmain section, section#sec-images { display: grid; gap: 20px; scroll-margin-top: 96px; min-width: 0; }
.sechd { display: flex; align-items: baseline; gap: 8px; }
.sechd h2 { font-size: 20px; letter-spacing: -.02em; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.factform { display: grid; gap: 12px; }
.factrow { background: var(--fill); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.factrow b { font-size: 15px; font-weight: 600; }
.factrow .pill-b { background: var(--raised); height: 32px; font-size: 13px; }
.factrow .pill-b:has(input:checked) { background: var(--ink); color: var(--bg); }
.factrow input:not([type=radio]) { background: var(--raised); }
.edmain > .claim { position: sticky; bottom: 0; z-index: 20; margin-inline: -20px; border-radius: 0; background: var(--header); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; gap: 8px; }
.edmain > .claim .btn { height: 40px; }
.picsec { max-width: 736px; margin-left: calc(208px + 56px); padding-bottom: 24px; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.thumbs li { background: var(--fill); border-radius: 16px; padding: 10px; display: grid; gap: 8px; justify-items: start; }
.thumbs img { width: 100%; aspect-ratio: 16/10; object-fit: contain; border-radius: 10px; background: var(--fill-hi); display: block; }
#sec-images .formgrid { background: var(--fill); border-radius: 16px; padding: 16px; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
#sec-images .formgrid > label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
#sec-images .formgrid > label:nth-of-type(3) { display: grid; font-weight: 600; }
.edafter { max-width: 736px; margin: 0 0 0 calc(208px + 56px); padding-bottom: 24px; }
.edfoot { display: flex; justify-content: center; padding-bottom: 32px; }
.lnk { all: unset; cursor: pointer; color: var(--accent-ink); }
.lnk:hover { text-decoration: underline; text-underline-offset: 2px; }
.ednav a.done::before { width: 16px; height: 16px; margin: 0; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.2l2.4 2.3 4.6-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ednav a.open::before { background: var(--warn); }
.edmain > .claim .keep { margin-right: auto; align-self: center; order: 0; }
.edmain > .claim .btn.alt { order: 1; }
.edmain > .claim .btn:not(.alt) { order: 2; }

.revlist { display: grid; gap: 28px; margin-top: 28px; }
.revcard { background: var(--fill); border-radius: 24px; padding: 24px; display: grid; gap: 20px; min-width: 0; font-size: 14px; }
.revhead { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; }
.revhead > a { display: block; border-radius: 16px; }
.revhead h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.revhead h2 .statusp { background: var(--bg); }
.revhead p { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.revhead .sub { font-size: 13px; margin-top: 6px; }
.revurl { display: inline-block; margin-top: 6px; color: var(--accent-ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.revurl:hover { text-decoration: underline; text-underline-offset: 2px; }
.revsignals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.revsignals .statusp { background: var(--bg); white-space: normal; line-height: 1.4; border-radius: 12px; padding: 5px 12px; }
.revnone { margin: 0; background: var(--bg); border-radius: 14px; padding: 16px 20px; color: var(--ink-3); font-size: 13px; }
.revbody { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.revbody h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.revbody h3:not(:first-child) { margin-top: 24px; }
.revbody p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; max-width: 68ch; }
.revcard .tablewrap { background: var(--bg); margin-bottom: 10px; }
.revfacts td:first-child label, .revfacts .nolabel { display: flex; align-items: center; gap: 10px; font-weight: 500; min-width: 0; }
.revfacts td:first-child label > span:last-child, .revfacts .nolabel > span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.revfacts td:first-child label { cursor: pointer; }
.revfacts input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.revfacts .nobox { width: 18px; flex: none; }
.revbody .revnote { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0; }
.revmaker { background: var(--bg); border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px; min-width: 0; }
.revmaker h3 { margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.revwho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.revwho a { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.revwho a:hover { color: var(--accent-ink); }
.revmaker p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.revmaker ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.revmaker ul a { color: var(--accent-ink); overflow-wrap: anywhere; }
.revbar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px; border-radius: 22px; background: var(--header); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--pop); }
.revbar textarea { flex: 1 1 auto; min-height: 40px; max-height: 160px; padding: 8px 14px; border-radius: 14px; resize: none; field-sizing: content; font-size: 14px; }
.revacts { display: flex; gap: 8px; flex: none; }
.revbar .reject:hover { background: var(--danger-soft); color: var(--danger); }

footer { margin-top: 96px; border-top: 1px solid var(--line); padding-block: 20px 40px; font-size: 14px; }
.askai { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.askai h2 { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.askai ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.askai a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); }
.askai a:hover { background: var(--fill); color: var(--ink); }
.askai svg { width: 14px; height: 14px; }
.fcols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; font-size: 13px; }
.fcols > div { display: grid; gap: 10px; align-content: start; }
.fcols b { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.fcols a { color: var(--ink-2); width: fit-content; }
.fcols a:hover { color: var(--ink); }
.fcols a.logo { color: var(--ink); }
.fcols p { color: var(--ink-2); max-width: 260px; line-height: 1.625; }
.follows { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.fcols a.follow { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 13px; font-weight: 500; }
.fcols a.follow:hover { background: var(--fill-hi); }
.follow svg { width: 13px; height: 13px; flex: none; }
.themes { display: none; width: fit-content; background: var(--fill); border-radius: 999px; padding: 2px; margin-top: 6px; }
.js .themes { display: inline-flex; }
.themes button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; }
.themes button[aria-pressed=true] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--ink-3); font-size: 13px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal span:first-child { color: var(--ink-2); }
.bigmark { margin-top: 32px; text-align: center; font: 700 clamp(64px, 19vw, 240px)/.8 var(--display); letter-spacing: -.06em; color: var(--fill-hi); user-select: none; overflow: hidden; }
footer { padding-bottom: 0; }

.found { display: grid; gap: 10px; }
.found h2 { font-size: 17px; letter-spacing: -.01em; }
.found ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.found li { overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #dfe3ea; border-radius: 12px; background: #fff; color: #15181d; font: 500 14px var(--sans); }
.badgestage { display: flex; justify-content: center; padding: 20px; border-radius: 16px; background: var(--fill); }
.doc .badgestage { justify-content: flex-start; margin-block: 20px; }
.badgecta { margin-top: 28px; }
.wall { list-style: none; margin: 28px auto 0; padding: 0; display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; justify-content: center; }
.wall .place { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22%; }
.wall .free { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 500 12px var(--sans); }
.wall .taken a { display: block; border-radius: 22%; transition: transform .2s var(--ease); }
.wall .taken a:hover, .wall .taken a:focus-visible { transform: translateY(-3px) scale(1.1); z-index: 2; }
.wall .taken small { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 10px var(--sans); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.wallpage { text-align: center; }
.wallpage > p { max-width: 560px; margin-inline: auto; }
.wallpage > p:last-child { margin-top: 32px; }
.devpage ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; max-width: 560px; }
.offer { gap: 18px; }
.offer > div { display: grid; gap: 4px; }
.offer p { color: var(--ink-2); line-height: 1.55; }
.offer .places { color: var(--ink); font-size: 15px; }
.found li strong { color: var(--ink-2); font-weight: 500; margin-right: 4px; }
.found a { color: var(--accent-ink); }

.lost { max-width: 840px; margin-inline: auto; }
.losthead { padding-block: 96px 56px; }
.losthead .eyebrow { color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.losthead h1 { margin-top: 12px; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.losthead .lede { margin-top: 16px; max-width: 560px; font-size: 16px; line-height: 1.625; color: var(--ink-2); }
.bigsearch { margin-top: 40px; border-radius: 22px; background: var(--raised); box-shadow: var(--pop); overflow: hidden; }
.bigsearch:focus-within { box-shadow: var(--pop), 0 0 0 2px var(--accent); }
.panelrow { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: var(--ink-2); }
.panelrow svg { width: 20px; height: 20px; flex: none; }
.panelrow input { all: unset; flex: 1; min-width: 0; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.panelrow input::placeholder { color: var(--ink-3); }
.near { border-top: 1px solid var(--line); margin: 0; padding: 20px; font-size: 14px; line-height: 1.625; color: var(--ink-2); }
.near .ink { color: var(--ink); overflow-wrap: anywhere; }
.losthead .cta { justify-content: flex-start; margin-top: 32px; gap: 10px; }
.lost .sec { margin-top: 40px; }
.lost h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 20px; }
.ways2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.waycard { display: flex; gap: 16px; padding: 20px; border-radius: 16px; background: var(--fill); transition: background-color .15s var(--ease); }
.waycard:hover { background: var(--fill-hi); }
.waycard > span:last-child { display: grid; gap: 4px; }
.waycard b { font-size: 15px; font-weight: 600; }
.waycard small { font-size: 14px; line-height: 1.625; color: var(--ink-2); }
.waycard .ctile svg { width: 20px; height: 20px; }

.finder { padding: 0; border: 0; width: calc(100% - 32px); max-width: 600px; max-height: 76vh; margin: 12vh auto auto; border-radius: 24px; background: var(--bg); color: var(--ink); box-shadow: var(--pop); overflow: hidden; flex-direction: column; }
.finder[open] { display: flex; animation: menu-in .22s cubic-bezier(.2, .9, .3, 1.1); }
.finder::backdrop { background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fhead { display: flex; align-items: center; gap: 12px; padding: 16px 16px 4px 24px; color: var(--ink-2); }
.fhead > svg { display: none; }
.fhead input { all: unset; flex: 1; min-width: 0; height: 48px; font-size: 16px; color: var(--ink); }
.fhead input::placeholder { color: var(--ink-2); }
.fhead input::-webkit-search-cancel-button { display: none; }
.fclose { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.fclose:hover { background: var(--fill); }
.fbody { overflow-y: auto; padding: 8px 16px 16px; }
.fhd { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
p.fhd + .fpills, .fpills + p.fhd { margin-top: 0; }
.fpills + p.fhd { margin-top: 20px; }
.flink { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--accent-ink); }
.flink:hover { text-decoration: underline; }
.marquee-fade { margin: 8px -16px 12px; padding-block: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.marquee { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee li { padding-left: 14px; }
.marquee a { display: block; border-radius: 22%; transition: transform .2s var(--ease); }
.marquee a:hover { transform: translateY(-2px) scale(1.05); }
@keyframes marquee { to { transform: translateX(-50%); } }
.fpills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0 8px; }
.fpill { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 500; transition: background-color .15s var(--ease); }
.fpill:has(.ctile) { padding-left: 6px; }
.fpill:hover { background: var(--fill-hi); }
.ctile { display: inline-grid; place-items: center; flex: none; border-radius: 28%; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4); }
.fgroup { margin-bottom: 8px; }
.fgroup .fhd { padding-bottom: 4px; }
.fopt { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 8px; color: var(--ink); }
.fopt > span:last-child { display: grid; min-width: 0; flex: 1; }
.fopt b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt b strong { font-weight: 700; }
.fopt small { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt[aria-selected=true] { background: var(--accent); color: var(--on-accent); }
.fopt[aria-selected=true] small { color: rgba(255, 255, 255, .8); }
.fnone { padding: 12px 8px; color: var(--ink-2); font-size: 14px; }
.fkeys { display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }

@media (max-width: 1023px) {
  .searchpill { display: none; }
  .searchicon { display: grid; }
  nav.main { gap: 20px; }
}
@media (max-width: 860px) {
  .toolbody { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .toolbody aside { position: static; }
  .edgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 16px; }
  .ednav { position: sticky; top: 112px; z-index: 10; display: flex; overflow-x: auto; scrollbar-width: none; background: var(--header); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); margin-inline: -20px; padding: 8px 20px; }
  .ednav::-webkit-scrollbar { display: none; }
  .ednav a { white-space: nowrap; background: var(--fill); border-radius: 999px; height: 32px; padding: 0 14px; font-size: 13px; }
  .ednav a::before { display: none; }
  .picsec { margin-left: 0; }
  .edafter { margin-left: 0; }
  #sec-images .formgrid { grid-template-columns: minmax(0, 1fr); }
  .fcols { grid-template-columns: 1fr 1fr; }
  .fcols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  nav.main { display: none; }
  .bar { gap: 4px; }
  .searchicon { display: grid; margin-left: -2px; }
  .end { gap: 8px; margin-left: auto; }
  .end > .langs, .end > .avatar, .end > a:not(.btn) { display: none; }
  .menubtn { display: grid; }
  .finder { margin-top: 8vh; }
  .fkeys { display: none; }
  .login { padding-top: 56px; }
  .login > h1 { font-size: 30px; }
  .logo { font-size: 16px; gap: 6px; }
  .mark { width: 26px; height: 26px; }
  .hero { padding-block: 44px 24px; }
  .toolhead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .toolhead .mono { width: 96px !important; height: 96px !important; font-size: 36px !important; }
  .toolhead .go { justify-self: start; }
  .iconrow { gap: 5px; }
  .iconrow .mono { width: 34px !important; height: 34px !important; font-size: 13px !important; border-radius: 8px !important; }
  .ft tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); padding: 10px 0; gap: 4px 12px; }
  .ft tr:last-child { border-bottom: 0; }
  .ft td { border-bottom: 0; padding: 0; min-width: 0 !important; }
  .ft td:nth-child(3) { grid-column: 1 / -1; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .urlrow { flex-wrap: wrap; }
  .urlrow .btn { width: 100%; }
  .pagehead { padding-top: 28px; }
  .headrow { gap: 16px; align-items: start; }
  .headrow i { width: 56px; height: 56px; }
  .subcard { padding: 20px; border-radius: 20px; }
  .agentcard > p { padding-left: 0; }
  .edhead .mono { width: 56px; height: 56px; font-size: 20px; }
  .edmain > .claim .btn { flex: 1 1 0; }
  .edmain > .claim .keep { display: none; }
  .revcard { padding: 18px; border-radius: 20px; gap: 16px; }
  .revhead { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
  .revhead .mono { width: 56px !important; height: 56px !important; font-size: 21px !important; border-radius: 13px !important; }
  .revhead h2 { font-size: 20px; }
  .revhead p { font-size: 15px; }
  .revbody { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .revcard .tablewrap { padding-inline: 14px; }
  .revbar { flex-wrap: wrap; margin-inline: -8px; }
  .revbar textarea { flex-basis: 100%; }
  .revacts { flex: 1 1 100%; }
  .revacts .btn { flex: 1 1 0; padding: 0 12px; }
}
@media (max-width: 860px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero { padding-block: 56px; }
  .catcards { grid-template-columns: minmax(0, 1fr); }
  .cta { flex-direction: column; align-items: center; }
  .cta .btn { min-width: 220px; }
  .losthead .cta { flex-direction: row; }
  .peek { display: none; }
  .seg.sort { order: 9; margin-left: 0; }
  .filters .seg { flex-wrap: wrap; overflow: visible; }
  .ways2 { grid-template-columns: minmax(0, 1fr); }
  .losthead { padding-block: 56px 40px; }
  .doc { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }