:root {
  --bar: #232323;
  --bar-2: #2f2f2f;
  --bar-line: #444;
  --bar-fg: #fff;
  --bar-dim: #a9a9a9;
  --bg: #fff;
  --fg: #2c2c2c;
  --dim: #6b6b6b;
  --line: #dcdcdc;
  --soft: #f4f4f4;
  --link: #4b64ff;
  --ok: #2d8a4e;
  --bad: #c0392b;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
[hidden] { display: none !important; }

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main { flex: 1; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: #fff; border: 1px solid var(--line); padding: 1px 5px; }
.dim { color: var(--dim); }

.pawl { position: relative; isolation: isolate; }
.pawl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: var(--paw-size, 60px);
  height: var(--paw-size, 60px);
  background: var(--paw, var(--link));
  -webkit-mask: url(/assets/paw.svg) center / contain no-repeat;
  mask: url(/assets/paw.svg) center / contain no-repeat;
  transform: translate(-41%, -74%) rotate(20deg) scale(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.pawl:hover, .pawl:focus-visible { color: var(--paw-ink, #fff); text-decoration: none; }
.pawl:hover::before, .pawl:focus-visible::before, .pawl[aria-expanded="true"]::before {
  transform: translate(-41%, -74%) rotate(20deg) scale(1);
}

.bar { position: sticky; top: 0; z-index: 50; background: var(--bar); color: var(--bar-fg); }
.bar-in { display: flex; align-items: stretch; height: 56px; padding: 0 16px; gap: 4px; max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; padding-right: 14px; margin-right: 6px; border-right: 1px solid var(--bar-line); }
.brand img { width: 36px; height: 36px; }
.cats { display: flex; align-items: stretch; }
.cat {
  --paw: #fff;
  --paw-ink: var(--bar);
  --paw-size: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 96px;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--bar-fg);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .03em;
}
.cat svg { width: 22px; height: 22px; }
.cat { overflow: hidden; transition: background .15s, color .15s; }
.cat::before { --paw: var(--bar); opacity: .16; transform: translate(-50%, -50%) rotate(20deg) scale(0); }
.cat:hover, .cat:focus-visible, .cat[aria-expanded="true"] { background: #fff; color: var(--bar); }
.cat:hover::before, .cat:focus-visible::before, .cat[aria-expanded="true"]::before { transform: translate(-30%, -42%) rotate(20deg) scale(1); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-link { --paw: #fff; --paw-ink: var(--bar); --paw-size: 44px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--bar-fg); }
.icon-link svg { width: 20px; height: 20px; }
.login { color: var(--bar-fg); font-size: 13px; font-weight: 700; padding: 7px 14px; border: 1px solid #777; white-space: nowrap; }
.login:hover { text-decoration: none; background: #fff; color: var(--bar); border-color: #fff; }
.auth { display: flex; align-items: center; }
.me { display: flex; align-items: center; gap: 8px; color: var(--bar-fg); font-size: 13px; }
.me:hover { text-decoration: none; }
.me img { width: 28px; height: 28px; }
.logout { background: none; border: 0; color: var(--bar-dim); cursor: pointer; font-size: 12px; margin-left: 10px; }
.logout:hover { color: #fff; text-decoration: underline; }

.panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bar-2); border-top: 1px solid var(--bar-line); box-shadow: 0 10px 18px rgba(0, 0, 0, .25); }
.panel-in { max-width: 1200px; margin: 0 auto; padding: 24px 16px 28px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.panel-lead h2 { font-size: 22px; font-weight: 300; margin-bottom: 6px; }
.panel-lead p { color: var(--bar-dim); font-size: 13px; max-width: 380px; }
.panel h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bar-dim); margin-bottom: 8px; font-weight: 400; }
.panel ul { list-style: none; }
.panel li a { color: #fff; display: inline-block; padding: 3px 0; font-size: 14px; }
.panel .soon { color: #7a7a7a; font-size: 14px; padding: 3px 0; }

.subbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.subbar-in { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 46px; flex-wrap: wrap; }
.subnav { display: flex; flex-wrap: wrap; margin-left: -10px; }
.subnav a { --paw: var(--link); --paw-size: 20px; color: var(--fg); font-size: 13px; padding: 12px 12px 12px 32px; transition: background .15s, color .15s; }
.subnav a::before { left: 9px; top: 50%; transform: translateY(-50%) rotate(20deg) scale(0); z-index: 0; }
.subnav a:hover::before, .subnav a:focus-visible::before { transform: translateY(-50%) rotate(20deg) scale(1); }
.subnav a:hover, .subnav a:focus-visible { background: var(--fg); color: #fff; }
.subnav a[aria-current="page"] { font-weight: 700; }
.subsearch { display: flex; }
.subsearch input { border: 1px solid #bbb; border-right: 0; padding: 6px 10px; width: 220px; font-size: 13px; background: #fff; }
.subsearch button { border: 1px solid var(--fg); background: var(--fg); color: #fff; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.subsearch button:hover { background: var(--link); border-color: var(--link); }

.flash { background: #fff4e5; border-bottom: 1px solid #f0c27a; color: #7a4b00; padding: 10px 16px; text-align: center; font-size: 14px; }

.btn {
  --paw: var(--link);
  --paw-size: 108px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fg);
  color: #fff;
  border: 1px solid var(--fg);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 5px 10px; font-size: 12px; --paw-size: 84px; }
.btn-ghost { background: #fff; color: var(--fg); }
.btn:disabled { opacity: .5; cursor: default; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; }

.hero { text-align: center; padding: 36px 16px 28px; }
.hero-logo { width: min(560px, 100%); height: auto; margin: 0 auto; }
.hero-tag { color: var(--dim); font-size: 15px; letter-spacing: .04em; margin-top: 6px; }

.waggy { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.waggy-in { max-width: 1200px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; align-items: center; }
.waggy h2 { font-size: 32px; font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
.waggy h2 span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.waggy-title p { color: var(--dim); margin-top: 6px; }
.waggy-form { display: flex; width: 100%; }
.waggy-form input { flex: 1; min-width: 0; border: 1px solid #999; border-right: 0; padding: 11px 14px; font-size: 16px; background: #fff; }
.waggy-form input:focus, .subsearch input:focus, .field input:focus, .field textarea:focus { outline: 2px solid var(--link); outline-offset: -2px; }

.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--dim); font-weight: 400; margin: 40px 0 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); color: var(--fg); background: #fff; transition: border-color .15s, box-shadow .15s; }
.tile:hover { text-decoration: none; border-color: var(--fg); }
.tile-art { position: relative; isolation: isolate; overflow: hidden; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--bar); color: #fff; border-bottom: 1px solid var(--line); transition: background .15s, color .15s; }
.tile-art svg { width: 54px; height: 54px; }
.tile-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: -26px;
  width: 128px;
  height: 128px;
  background: #fff;
  opacity: .1;
  -webkit-mask: url(/assets/paw.svg) center / contain no-repeat;
  mask: url(/assets/paw.svg) center / contain no-repeat;
  transform: rotate(20deg);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
}
.tile:hover .tile-art { background: #fff; color: var(--bar); }
.tile:hover .tile-art::after { background: var(--bar); opacity: .14; transform: rotate(28deg) scale(1.15); }
.tile-body { padding: 14px 14px 12px; flex: 1; }
.tile-body h3 { font-size: 16px; margin-bottom: 4px; }
.tile-body p { font-size: 13px; color: var(--dim); }
.tile-meta { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; }

.notice { margin: 40px 0 56px; border-left: 4px solid var(--fg); background: var(--soft); padding: 16px 20px; font-size: 14px; }

.page-head { background: var(--soft); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-top: 26px; padding-bottom: 24px; }
.crumb { font-size: 12px; color: var(--dim); }
.page-head h1 { font-size: 30px; font-weight: 300; margin: 2px 0 4px; }
.lead { color: var(--dim); }
.page-head .waggy-form { margin-top: 12px; max-width: 720px; }

.content { padding-top: 28px; padding-bottom: 56px; }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.aside h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-weight: 400; margin-bottom: 6px; }
.aside p { font-size: 14px; margin-bottom: 20px; }

.form { max-width: 640px; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 4px; }
.field input, .field textarea { width: 100%; border: 1px solid #bbb; padding: 10px 12px; background: #fff; }
.field textarea { resize: vertical; }
.msg { font-size: 14px; margin-top: 10px; min-height: 1.5em; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--bad); }

.state { border: 1px solid var(--line); padding: 28px; max-width: 600px; }
.state.wide { max-width: 760px; }
.state h2 { font-size: 20px; font-weight: 400; margin-bottom: 6px; }
.state p { color: var(--dim); }
.state .btn { margin-top: 16px; }
.ticks { list-style: none; margin: 14px 0 4px; border-top: 1px solid var(--line); }
.ticks li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

.searchline { display: flex; max-width: 520px; margin-bottom: 18px; }
.searchline input { flex: 1; border: 1px solid #999; padding: 10px 12px; font-size: 15px; background: #fff; }
.searchline input:focus { outline: 2px solid var(--link); outline-offset: -2px; }

.rows { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row img { width: 40px; height: 40px; flex: none; }
.row-main { flex: 1; min-width: 140px; }
.row-name { font-weight: 700; }
.row-sub { font-size: 12px; color: var(--dim); font-weight: 400; }
.row-body { flex-basis: 100%; white-space: pre-wrap; font-size: 14px; padding-left: 52px; }
.tag { font-size: 11px; border: 1px solid var(--line); padding: 2px 7px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.tag.on { border-color: var(--ok); color: var(--ok); }
.inbox-title { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-weight: 400; margin-bottom: 10px; }

.result { padding: 14px 0; border-bottom: 1px solid var(--line); }
.result a { font-size: 17px; }
.result p { font-size: 13px; color: var(--dim); }

.foot { background: var(--bar); color: var(--bar-dim); font-size: 12px; }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 20px 16px; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.foot a { color: #fff; }

@media (max-width: 760px) {
  .tiles.two { grid-template-columns: 1fr; }
  .prof-head { flex-wrap: wrap; }
  .band { min-height: 110px; }
  .band-label { width: 130px; padding: 16px; }
  .band-run span { font-size: 44px; }
  .admin-link { display: none; }
  .bar-in { padding: 0 12px; }
  .brand { padding-right: 8px; margin-right: 2px; }
  .brand img { width: 30px; height: 30px; }
  .cat { width: 46px; min-width: 0; padding: 0; --paw-size: 64px; }
  .cat span { display: none; }
  .bar .icon-link { display: none; }
  .me span { display: none; }
  .logout { margin-left: 6px; }
  .panel-in { grid-template-columns: 1fr; gap: 18px; }
  .subsearch { width: 100%; padding-bottom: 10px; }
  .subsearch input { flex: 1; width: auto; }
  .waggy-in { grid-template-columns: 1fr; gap: 16px; }
  .waggy h2 { font-size: 26px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .row-body { padding-left: 0; }
}

.tiles.two { grid-template-columns: 1fr 1fr; margin-top: 32px; gap: 24px; }
.tiles.two .tile-art { height: 260px; }
.tiles.two .tile-art svg { width: 84px; height: 84px; }
.tiles.two .tile-art::after { width: 220px; height: 220px; right: -30px; bottom: -50px; }
.tiles.two .tile-body { padding: 20px 20px 16px; }
.tiles.two .tile-body h3 { font-size: 22px; }
.tiles.two .tile-body p { font-size: 15px; }

.admin-link { color: var(--bar-dim); font-size: 12px; margin-right: 14px; }
.admin-link:hover { color: #fff; }

.prof-head { display: flex; align-items: center; gap: 24px; padding-top: 32px !important; padding-bottom: 32px !important; }
.prof-avatar { width: 112px; height: 112px; flex: none; border: 1px solid var(--line); }
.prof-main { flex: 1; min-width: 200px; }
.prof-user { color: var(--dim); font-size: 14px; }
.prof-bio { margin-top: 10px; max-width: 640px; white-space: pre-wrap; }

.bands { border-bottom: 1px solid var(--line); }
.band {
  --c: #2c2c2c;
  --t: #fff;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 150px;
  background: var(--c);
  color: var(--t);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background .2s, color .2s;
}
.band:hover, .band:focus-visible { background: var(--t); color: var(--c); text-decoration: none; }
.band-discord { --c: #5865f2; }
.band-x { --c: #1da1f2; }
.band-steam { --c: #1b2838; }
.band-epic { --c: #313131; }
.band-roblox { --c: #232527; }
.band-twitch { --c: #9146ff; }
.band-youtube { --c: #e62117; }
.band-github { --c: #24292f; }
.band-bluesky { --c: #1185fe; }
.band-label {
  flex: none;
  width: 220px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid currentColor;
  position: relative;
  z-index: 1;
  background: inherit;
}
.band-platform { font-size: 22px; font-weight: 700; }
.band-pref { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: 2px 6px; align-self: flex-start; }
.band-action { font-size: 12px; opacity: .7; }
.band-track { flex: 1; display: flex; align-items: center; overflow: hidden; }
.band-run { display: flex; white-space: nowrap; will-change: transform; }
.band-run span { transition: color .3s, -webkit-text-stroke-color .3s; }
.band .band-run span.focus { color: currentColor; -webkit-text-stroke-color: transparent; }
.band-run span { font-size: 72px; font-weight: 800; letter-spacing: -.02em; padding-right: .6em; line-height: 1; }
.band-run span:nth-child(even) { -webkit-text-stroke: 2px currentColor; color: transparent; }
.band.preferred { min-height: 190px; }
.band.preferred .band-run span { font-size: 96px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.link-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.link-row select, .link-row input:not([type]) { border: 1px solid #bbb; padding: 8px 10px; background: #fff; }
.link-row input:not([type]) { flex: 1; min-width: 160px; }
.pref { font-size: 13px; display: flex; align-items: center; gap: 4px; }
#pform > .btn { margin-right: 8px; }

.band-bg {
  position: absolute;
  inset: 0;
  background-size: 140% auto;
  background-position: 0% 0%;
  opacity: .22;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: luminosity;
  animation: band-pan 30s ease-in-out infinite alternate;
  transition: opacity .25s, filter .25s;
  pointer-events: none;
}
.band.has-image .band-track, .band.has-image .band-label { position: relative; z-index: 1; }
@keyframes band-pan { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .band-bg { animation: none; } }

.rules { max-width: 760px; }
.rules > p { margin-bottom: 18px; }
.rules h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-weight: 400; margin: 28px 0 10px; }
.rules ol, .rules ul { padding-left: 22px; }
.rules li { margin-bottom: 10px; }
.aside-note { display: block; color: var(--dim); font-size: 14px; margin-top: 2px; }

.steps { padding-left: 22px; margin-bottom: 18px; }
.steps li { margin-bottom: 8px; }

.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.site-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); padding: 14px 16px; transition: border-color .15s, box-shadow .15s; }
.site-card:hover { border-color: var(--fg); }
.site-card-main { min-width: 0; }
.site-url { font-weight: 700; font-size: 16px; word-break: break-all; }

.create-site { margin-top: 8px; }
.name-input { display: flex; max-width: 520px; margin-bottom: 12px; }
.name-input input { flex: 1; min-width: 0; border: 1px solid #999; border-right: 0; padding: 10px 12px; font-size: 16px; background: #fff; }
.name-input input:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.name-input span { border: 1px solid #999; background: var(--soft); padding: 10px 12px; color: var(--dim); font-size: 16px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 10px 0 14px; }
.check input { margin-top: 4px; }

.manage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.box-section { border: 1px solid var(--line); padding: 18px; margin-bottom: 18px; }
.drop { border: 2px dashed #bbb; padding: 28px 16px; text-align: center; background: var(--soft); transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--link); background: #eef0ff; }
.drop-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.drop-btns .btn { cursor: pointer; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.radio input { margin-top: 5px; }
#guest-box { margin: 12px 0; }
#guest-q { width: 100%; border: 1px solid #bbb; padding: 8px 10px; margin-top: 8px; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 3px 4px 3px 3px; font-size: 13px; }
.chip button { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; color: var(--dim); }
.chip button:hover { color: var(--bad); }
.guest-results { border: 1px solid var(--line); border-top: 0; }
.guest-results:empty { display: none; }
.guest-results p { padding: 8px 10px; }
.guest-pick { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 6px 10px; text-align: left; cursor: pointer; }
.guest-pick:hover { background: var(--soft); }
#access-form .btn { margin-top: 12px; }

@media (max-width: 760px) {
  .manage { grid-template-columns: 1fr; gap: 0; }
}

.band:hover .band-bg, .band:focus-visible .band-bg { opacity: .12; }

.btn-danger, .btn-danger.btn-ghost { background: var(--bad); border-color: var(--bad); color: #fff; }

.add-card { display: flex; align-items: center; gap: 14px; justify-content: flex-start; color: var(--fg); border-style: dashed; border-width: 2px; min-height: 74px; }
.add-card:hover { text-decoration: none; }
.add-plus { font-size: 30px; line-height: 1; font-weight: 300; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid currentColor; flex: none; }
.add-card.disabled { background: var(--soft); color: var(--dim); cursor: not-allowed; }
.add-card.disabled:hover { border-color: var(--line); box-shadow: none; }
.explore-note { margin: -6px 0 14px; font-size: 14px; }

.wizard { list-style: none; max-width: 820px; border-top: 1px solid var(--line); }
.step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.step-num { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fg); font-weight: 700; }
.step.done .step-num { background: var(--fg); color: #fff; }
.step.locked { color: #b5b5b5; }
.step.locked .step-num { border-color: #d0d0d0; }
.step-main { flex: 1; min-width: 0; }
.step-title { font-size: 17px; font-weight: 700; padding-top: 4px; }
.step.done .step-title { font-weight: 400; color: var(--dim); }
.step-body { margin-top: 14px; }
.step-body > p { margin-bottom: 10px; }
.rules-box { border: 1px solid var(--line); background: var(--soft); padding: 18px 20px; max-height: 360px; overflow: auto; margin-bottom: 16px; }
.wizard + .state { margin-top: 24px; }

.rules { max-width: 760px; }
.rules-lead { font-size: 18px; font-weight: 700; }
.rules h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-weight: 400; margin: 22px 0 8px; }

.slots { display: inline-flex; align-items: center; border: 1px solid var(--line); font-size: 12px; }
.slots span { padding: 0 8px; white-space: nowrap; }
.slots button { border: 0; background: var(--soft); width: 26px; height: 26px; cursor: pointer; font-size: 15px; }
.slots button:hover { background: var(--fg); color: #fff; }

@font-face { font-family: "Cat Paw"; src: url(/assets/fonts/catpaw.ttf) format("truetype"); font-display: swap; }
.tile-title { font-family: "Cat Paw", var(--font); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; text-align: center; padding: 0 16px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.tile:hover .tile-title { transform: scale(1.06) rotate(-2deg); }

.btn { --paw-size: 18px; padding-left: 18px; transition: padding .2s, background .15s; }
.btn::before { left: 10px; top: 50%; transform: translateY(-50%) rotate(20deg) scale(0); z-index: 0; }
.btn:hover, .btn:focus-visible { padding-left: 34px; color: #fff; }
.btn.btn-ghost:hover, .btn.btn-ghost:focus-visible { background: var(--fg); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(-50%) rotate(20deg) scale(1); }
.btn-sm { --paw-size: 14px; padding-left: 10px; }
.btn-sm::before { left: 7px; }
.btn-sm:hover, .btn-sm:focus-visible { padding-left: 25px; }

.examples { margin-top: 8px; border: 1px solid var(--line); background: #fff; }
.examples summary { cursor: pointer; padding: 6px 10px; font-size: 13px; font-weight: 700; list-style: none; }
.examples summary::before { content: "+ "; }
.examples[open] summary::before { content: "\2212  "; }
.examples summary::-webkit-details-marker { display: none; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.ex-grid > div { background: #fff; padding: 10px 14px; }
.ex-grid h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.ex-ok h4 { color: var(--ok); }
.ex-no h4 { color: var(--bad); }
.ex-grid ul { padding-left: 18px; font-size: 13px; }
.ex-grid li { margin-bottom: 4px; }
.ex-note { font-size: 13px; padding: 8px 14px; border-top: 1px solid var(--line); margin: 0; }
@media (max-width: 760px) { .ex-grid { grid-template-columns: 1fr; } }

.btn { position: relative; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: var(--paw-size);
  height: var(--paw-size);
  background: var(--paw, var(--link));
  -webkit-mask: url(/assets/paw.svg) center / contain no-repeat;
  mask: url(/assets/paw.svg) center / contain no-repeat;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.btn:disabled::before { display: none; }

.arch-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chips-filter { display: flex; flex-wrap: wrap; border: 1px solid var(--fg); }
.filter { background: #fff; border: 0; border-right: 1px solid var(--fg); padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.filter:last-child { border-right: 0; }
.filter:hover { background: var(--soft); }
.filter.on { background: var(--fg); color: #fff; }
.arch-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.arch-thumb { height: 170px; }
.arch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.arch-card:hover .arch-thumb img { transform: scale(1.04); }
.arch-ph { font-size: 38px; }
.arch-card .tile-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.arch-more { margin-top: 24px; font-size: 14px; }
.arch-item { max-width: 860px; }
.arch-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.arch-desc { margin-bottom: 18px; font-size: 17px; }
.arch-hero { max-width: 100%; max-height: 460px; border: 1px solid var(--line); margin-bottom: 20px; }
.arch-body { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.arch-body p { margin-bottom: 14px; }
.arch-media { display: grid; gap: 12px; margin-bottom: 20px; }
.arch-media img, .arch-media video { max-width: 100%; max-height: 640px; border: 1px solid var(--line); display: block; }
.arch-media audio { width: 100%; }
.arch-back { margin-top: 24px; }
.arch-admin { max-width: 860px; margin-top: 40px; border-top: 4px solid var(--fg); padding-top: 4px; }
.arch-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field select { width: 100%; border: 1px solid #bbb; padding: 9px 10px; background: #fff; }
.arch-thumb-preview { max-width: 260px; max-height: 160px; border: 1px solid var(--line); margin-bottom: 10px; }

.link-row { display: block; border: 1px solid var(--line); padding: 10px; margin-bottom: 10px; }
.link-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-main select, .link-main input:not([type]) { border: 1px solid #bbb; padding: 8px 10px; background: #fff; }
.link-main input:not([type]) { flex: 1; min-width: 160px; }
.link-image { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.link-thumb { width: 72px; height: 32px; background: var(--soft) center / cover no-repeat; border: 1px solid var(--line); }
.link-msg { margin: 0; min-height: 0; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .arch-form-row { grid-template-columns: 1fr; } }

.tile, .site-card { transition: border-color .15s, transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.tile:hover, .site-card:hover { box-shadow: none; transform: scale(1.015); }
.tile:active, .site-card:active { transform: scale(.985); }
.add-card.disabled:hover, .add-card.disabled:active { transform: none; }
.btn { transition: padding .2s, background .15s, transform .15s cubic-bezier(.34, 1.56, .64, 1); }
.btn:active:not(:disabled) { transform: scale(.96); }

.arch-desc { margin-top: 6px; }
.arch-actions { display: flex; gap: 8px; }
.prof-edit { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.prof-edit .msg { margin: 0; min-height: 0; font-weight: 700; }
.save-row { display: flex; align-items: center; gap: 12px; }
.save-row .msg { margin: 0; font-weight: 700; }
.prof-archive { padding-top: 8px; }
.prof-archive .arch-bar { margin-bottom: 14px; }

.rich h2 { font-size: 24px; margin: 22px 0 10px; line-height: 1.2; }
.rich h3 { font-size: 19px; margin: 18px 0 8px; }
.rich blockquote { border-left: 4px solid var(--fg); background: var(--soft); padding: 12px 18px; margin: 14px 0; }
.rich ul, .rich ol { padding-left: 24px; margin: 0 0 14px; }
.rich img, .rich video { max-width: 100%; height: auto; border: 1px solid var(--line); display: inline-block; }
.rich audio { width: 100%; }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.rich table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
.rich td, .rich th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; min-width: 40px; }
.rich th { background: var(--soft); text-align: left; }
.rich a.dl-btn { display: inline-block; background: var(--fg); color: #fff; padding: 10px 18px; font-weight: 700; text-decoration: none; }
.rich a.dl-btn:hover { background: var(--link); }
.rich a.dl-btn::before { content: "\2193  "; }

.rte { border: 1px solid #bbb; background: #fff; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); background: var(--soft); position: sticky; top: 56px; z-index: 5; }
.rte-bar button, .rte-bar select, .rte-file, .rte-link button, .rte-table button { border: 1px solid transparent; background: none; padding: 5px 9px; font-size: 13px; cursor: pointer; min-width: 30px; }
.rte-bar button:hover, .rte-file:hover, .rte-link button:hover, .rte-table button:hover { border-color: var(--fg); background: #fff; }
.rte-bar select { border-color: #bbb; background: #fff; }
.rte-sep { width: 1px; height: 20px; background: #ccc; margin: 0 4px; }
.rte-file { font-weight: 700; }
.rte-link, .rte-table { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rte-link input { flex: 1; min-width: 200px; border: 1px solid #bbb; padding: 5px 8px; }
.rte-table { background: #eef0ff; }
.rte-area { min-height: 260px; padding: 16px 18px; outline: none; }
.rte-area:focus { box-shadow: inset 0 0 0 2px var(--link); }
.rte-msg { padding: 0 10px 8px; margin: 0; font-weight: 700; }

.comments { margin-top: 32px; }
.comment-list { border-top: 1px solid var(--line); }
.comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.comment img { width: 36px; height: 36px; flex: none; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.comment-head a { font-weight: 700; color: var(--fg); }
.comment-body { margin-top: 2px; font-size: 15px; word-wrap: break-word; }
.comment-del { margin-left: auto; border: 0; background: none; color: var(--dim); font-size: 12px; cursor: pointer; }
.comment-del:hover, .comment-del.btn-danger { color: var(--bad); background: none; }
.comment-form { margin-top: 16px; border: 1px solid #bbb; background: #fff; }
.comment-tools { display: flex; gap: 2px; align-items: center; padding: 4px; border-bottom: 1px solid var(--line); background: var(--soft); }
.comment-tools button { border: 1px solid transparent; background: none; width: 30px; height: 26px; cursor: pointer; }
.comment-tools button:hover { border-color: var(--fg); background: #fff; }
.comment-tools .row-sub { margin-left: 8px; }
.comment-form textarea { width: 100%; border: 0; padding: 10px 12px; resize: vertical; font: inherit; outline: none; display: block; }
.comment-form .save-row { padding: 8px; border-top: 1px solid var(--line); }
.arch-form-row { grid-template-columns: 1fr 1fr 1fr; }