body.s3x-page {
  --s3x-panel: linear-gradient(180deg, rgba(24, 28, 37, .72), rgba(20, 23, 31, .72));
  --s3x-solid: #161920;
  --s3x-faint: rgba(255, 255, 255, .025);
  --s3x-faint-2: rgba(255, 255, 255, .045);
  --s3x-float: rgba(24, 28, 37, .82);
  --s3x-zero: rgba(255, 255, 255, .34);
}
html:not([data-theme="dark"]) body.s3x-page {
  --s3x-panel: linear-gradient(180deg, #ffffff, #fbfaf9);
  --s3x-solid: #ffffff;
  --s3x-faint: rgba(0, 0, 0, .02);
  --s3x-faint-2: rgba(0, 0, 0, .04);
  --s3x-float: rgba(255, 255, 255, .9);
  --s3x-zero: rgba(0, 0, 0, .38);
}
html body.s3x-page.v2-page {
  max-width: none !important; margin: 0 !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(1200px 700px at 8% -6%, rgba(255, 46, 108, .11), transparent 62%),
    radial-gradient(1000px 800px at 104% 18%, rgba(30, 144, 255, .055), transparent 60%),
    var(--s3-bg) !important;
  color: var(--s3-text) !important;
}
html:not([data-theme="dark"]) body.s3x-page.v2-page {
  background:
    radial-gradient(1200px 700px at 8% -6%, rgba(255, 46, 108, .08), transparent 62%),
    radial-gradient(1000px 800px at 104% 18%, rgba(30, 144, 255, .05), transparent 60%),
    var(--s3-bg) !important;
}
main.s3x-main {
  display: block; position: relative; padding: var(--s3-top-h, 68px) 0 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.55;
  color: var(--s3-text); text-align: left; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] main.s3x-main, main.s3x-main { background: transparent !important; background-color: transparent !important; color: var(--s3-text) !important; }

[data-theme="dark"] .s3x-main section, [data-theme="dark"] .s3x-main aside, .s3x-main section, .s3x-main aside { background-color: transparent !important; color: inherit !important; }
.s3x-main *, .s3x-main *::before, .s3x-main *::after { box-sizing: border-box; }
:where(.s3x-main) :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dt, dd) { margin: 0; padding: 0; font-family: inherit; }
:where(.s3x-main) :where(ul, ol) { list-style: none; }
:where(.s3x-main) a { color: inherit; text-decoration: none; }
:where(.s3x-main) a:hover { text-decoration: none; }
:where(.s3x-main) button { font: inherit; color: inherit; cursor: pointer; margin: 0; padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none; }
:where(.s3x-main) img { display: block; max-width: 100%; border: 0; }
:where(.s3x-main) input { font: inherit; color: inherit; }
.s3x-main li i { position: static; }
.s3x-main [hidden] { display: none !important; }
.s3x-main :focus-visible { outline: 2px solid var(--s3-pink); outline-offset: 2px; }
.s3x-main ::selection { background: rgba(255, 46, 108, .35); }

.s3x-wrap { max-width: var(--s3-wrap, 1320px); margin: 0 auto; padding: 0 var(--s3-gut, 32px) 24px; }
.s3x-grad { background: var(--s3-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; font-style: normal; }

.s3x-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--s3-soft); }
.s3x-crumbs a { color: var(--s3-soft) !important; transition: color .15s; }
.s3x-crumbs a:hover { color: var(--s3-text) !important; }
.s3x-crumbs i { font-size: 9px; }
.s3x-crumbs b { color: var(--s3-muted); font-weight: 500; }

.s3x-main h1.seo-h1 { font-size: 56px; line-height: 1.04; font-weight: 700; letter-spacing: -.04em; color: var(--s3-text); text-align: left; margin: 22px 0 0; }

@keyframes s3x-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
.s3x-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--s3-green); animation: s3x-pulse 2.4s ease-in-out infinite; flex: 0 0 auto; }


.s3x-sec { padding-top: 56px; }
.s3x-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.s3x-sec__title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.s3x-main .s3x-sec__title h2 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.022em; color: var(--s3-text); margin: 0; }
.s3x-sec__title p { font-size: 14px; color: var(--s3-muted); margin-top: 2px; line-height: 1.4; }
.s3x-sec__title p b { color: var(--s3-text); font-weight: 600; }
.s3x-sec__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.s3x-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.s3x-ico--pink { background: rgba(255, 46, 108, .14); color: var(--s3-pink); }
.s3x-ico--gold { background: rgba(252, 200, 78, .14); color: var(--s3-gold); }
.s3x-ico--blue { background: rgba(30, 144, 255, .14); color: #4aa8ff; }
.s3x-ico--green { background: rgba(34, 197, 94, .13); color: #4ade80; }
.s3x-ico--purple { background: rgba(167, 139, 250, .15); color: var(--s3-purple); }
.s3x-ico--orange { background: rgba(255, 170, 61, .14); color: var(--s3-orange); }
.s3x-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--s3-muted) !important; transition: color .15s, gap .2s var(--s3-ease); white-space: nowrap; }
.s3x-more:hover { color: var(--s3-text) !important; gap: 11px; }
.s3x-more i { font-size: 12px; }


.s3x-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; padding: 26px 0 0; }
.s3x-hero__copy { min-width: 0; }
.s3x-lead { margin-top: 18px; font-size: 17px; line-height: 1.62; color: var(--s3-text); opacity: .9; text-wrap: pretty; }
.s3x-sub { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--s3-muted); }
.s3x-kpis { display: flex; gap: 0; margin-top: 26px; border-radius: 16px; border: 1px solid var(--s3-line); background: var(--s3x-panel); width: max-content; max-width: 100%; overflow: hidden; }
.s3x-kpis > div { padding: 12px 22px 11px; border-right: 1px solid var(--s3-line-soft); }
.s3x-kpis > div:last-child { border-right: 0; }
.s3x-kpis b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.s3x-kpis span { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s3-soft); }
.s3x-kpis .is-on b { color: #4ade80; }
.s3x-kpis .s3x-dot { width: 7px; height: 7px; }
.s3x-hero__cta { display: flex; gap: 10px; margin-top: 22px; }
.s3x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 13px; border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform .2s var(--s3-ease), box-shadow .2s, background .2s, border-color .2s; }
.s3x-btn i { font-size: 12px; }
.s3x-btn--grad { color: #fff !important; background: var(--s3-grad-btn); box-shadow: 0 10px 26px -10px rgba(255, 46, 108, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
.s3x-btn--grad:hover { transform: translateY(-1px); }
.s3x-btn--ghost { color: var(--s3-text) !important; background: var(--s3x-faint-2); border-color: var(--s3-line); }
.s3x-btn--ghost:hover { border-color: rgba(255, 46, 108, .5); }


.s3x-map { position: relative; margin: 0; border-radius: 24px; border: 1px solid var(--s3-line); background: radial-gradient(80% 70% at 50% 40%, rgba(255, 46, 108, .1), transparent 70%), var(--s3x-solid); box-shadow: var(--s3-shadow-lg); padding: 14px 16px 10px; overflow: hidden; }
.s3x-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--s3-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--s3-line-soft) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); opacity: .6; }
.s3x-map__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s3-soft); padding: 2px 4px 0; }
.s3x-map__head > span:first-child i { color: var(--s3-pink-2); margin-right: 6px; }
.s3x-map__legend { display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.s3x-map__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--s3x-zero); opacity: .6; margin-left: 8px; }
.s3x-map__legend i.is-hot { background: var(--s3-pink); opacity: 1; box-shadow: 0 0 8px rgba(255, 46, 108, .9); }
.s3x-map__svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.s3x-map__zero circle { fill: var(--s3x-zero); opacity: .55; }
.s3x-map__zero circle.is-p { opacity: .7; fill: var(--s3-text); }
.s3x-map__glow circle { fill: url(#s3xg); opacity: .32; }
.s3x-map__hot circle { fill: var(--s3-pink); stroke: rgba(255, 255, 255, .55); stroke-width: .6; transition: fill .2s, r .2s; }
.s3x-map__hot a:hover circle, .s3x-map__hot a.is-p circle { fill: #ffaa3d; stroke: #fff; stroke-width: 1.2; }
.s3x-map__lab text { font: 600 11.5px 'Poppins', sans-serif; fill: var(--s3-text); paint-order: stroke; stroke: rgba(11, 13, 18, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.s3x-map__tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 9px 12px; border-radius: 12px; background: var(--s3x-float); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--s3-line); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9); font-size: 12.5px; white-space: nowrap; }
.s3x-map__tip b { display: block; font-size: 14px; }
.s3x-map__tip span { color: var(--s3-muted); }
.s3x-map__tip em { font-style: normal; color: #4ade80; font-weight: 600; }


.s3x-bubbles { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 28px; border-radius: 24px; border: 1px solid var(--s3-line); background: radial-gradient(80% 70% at 50% 40%, rgba(255, 46, 108, .12), transparent 70%), var(--s3x-solid); box-shadow: var(--s3-shadow-lg); }
.s3x-bubbles a { --d: calc(var(--s) * 132px); width: var(--d); height: var(--d); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; background: radial-gradient(circle at 30% 25%, rgba(255, 90, 140, .55), rgba(255, 46, 108, .2) 60%, rgba(255, 170, 61, .12)); border: 1px solid rgba(255, 46, 108, .4); color: #fff !important; transition: transform .25s var(--s3-ease); }
.s3x-bubbles a:hover { transform: scale(1.06); }
.s3x-bubbles b { font-size: calc(var(--s) * 19px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.s3x-bubbles span { font-size: calc(var(--s) * 10.5px + 2px); line-height: 1.2; color: rgba(255, 255, 255, .86); }


.s3x-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 206px; gap: 14px; }
.s3x-bento__big { grid-column: span 2; grid-row: span 2; }
.s3x-bento__wide { grid-column: span 2; }
.s3x-bento__third { grid-column: span 2; }
.s3x-bento > li:nth-child(n+6) { grid-column: span 1; }
.s3x-pt { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px 15px; color: #fff; border: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 46, 108, .5), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(255, 170, 61, .32), transparent 60%), linear-gradient(160deg, #2a1d2e, #14171f);
  transition: transform .4s var(--s3-ease), box-shadow .4s, border-color .4s; }
.s3x-main .s3x-pt__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; z-index: -3; filter: saturate(.8) brightness(.78) contrast(1.05); transition: transform 1.2s var(--s3-ease); }
.s3x-pt::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(150deg, #ff2e6c 0%, #ff6a5c 48%, #ffaa3d 100%); mix-blend-mode: multiply; opacity: .6; transition: opacity .4s; }
.s3x-pt::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(14, 16, 22, .2) 0%, rgba(14, 16, 22, 0) 30%, rgba(14, 16, 22, .55) 62%, rgba(14, 16, 22, .94) 100%); }
.s3x-pt:hover { transform: translateY(-4px); border-color: rgba(255, 46, 108, .55); box-shadow: 0 30px 60px -26px rgba(255, 46, 108, .6); }
.s3x-pt:hover::before { opacity: .36; }
.s3x-pt:hover .s3x-pt__img { transform: scale(1.06); }
.s3x-pt.is-nopic { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 12px), radial-gradient(120% 90% at 0% 0%, rgba(167, 139, 250, .25), transparent 60%), linear-gradient(160deg, #1d2030, #14171f); }
.s3x-pt.is-nopic::before { opacity: 0; }
.s3x-pt__link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.s3x-pt__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.s3x-pt__reg { height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(11, 13, 18, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .16); }
.s3x-pt__go { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; background: rgba(11, 13, 18, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18); transition: background .3s, transform .3s var(--s3-ease); }
.s3x-pt:hover .s3x-pt__go { background: var(--s3-grad); border-color: transparent; transform: rotate(-45deg); }
.s3x-pt__txt { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; pointer-events: none; }
.s3x-pt__name { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3x-bento__big .s3x-pt__name { font-size: 40px; }
.s3x-pt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .84); }
.s3x-pt__meta b { font-weight: 700; color: #fff; }
.s3x-pt__on { display: inline-flex; align-items: center; gap: 6px; color: #c9fbd9; }
.s3x-pt__on b { color: inherit; }
.s3x-pt__on i { width: 7px; height: 7px; border-radius: 50%; background: var(--s3-green); animation: s3x-pulse 2.4s ease-in-out infinite; }
.s3x-pt__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; pointer-events: auto; }
.s3x-pt__chips a { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff !important; background: rgba(11, 13, 18, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, border-color .2s; }
.s3x-pt__chips a b { font-size: 11px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.s3x-pt__chips a:hover { background: var(--s3-grad-btn); border-color: transparent; }
.s3x-bento > li:nth-child(n+6) .s3x-pt__chips { display: none; }
.s3x-bento > li:nth-child(n+6) .s3x-pt__name { font-size: 18px; white-space: normal; }
.s3x-bento > li:nth-child(n+6) .s3x-pt__meta { font-size: 12px; gap: 0 8px; }
.s3x-pt.is-empty .s3x-pt__name { opacity: .75; }


.s3x-towns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.s3x-town { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 14px; color: #fff !important; border: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 46, 108, .5), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(255, 170, 61, .32), transparent 60%), linear-gradient(160deg, #2a1d2e, #14171f);
  transition: transform .4s var(--s3-ease), box-shadow .4s, border-color .4s; }
.s3x-main .s3x-town__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; z-index: -3; filter: saturate(.85) brightness(.85); transition: transform 1.2s var(--s3-ease); }
.s3x-town::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 16, 22, 0) 40%, rgba(14, 16, 22, .55) 70%, rgba(14, 16, 22, .94) 100%); }
.s3x-town:hover { transform: translateY(-4px); border-color: rgba(255, 46, 108, .55); box-shadow: 0 30px 60px -26px rgba(255, 46, 108, .6); }
.s3x-town:hover .s3x-town__img { transform: scale(1.06); }
.s3x-town__rank { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(11, 13, 18, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .16); }
.s3x-towns li:nth-child(-n+3) .s3x-town__rank { background: linear-gradient(135deg, #ffe7a3, #fcc84e 55%, #f2a93b); color: #2a1d04; border: 0; }
.s3x-town__txt { display: flex; flex-direction: column; min-width: 0; }
.s3x-town__name { font-size: 18px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.s3x-town__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .84); }
.s3x-town__meta b { color: #fff; }
.s3x-town__on { display: inline-flex; align-items: center; gap: 5px; color: #c9fbd9; font-weight: 600; }
.s3x-town__on i { width: 6px; height: 6px; border-radius: 50%; background: var(--s3-green); }
.s3x-towns.is-nopic .s3x-town { aspect-ratio: auto; height: 130px; }
.s3x-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 18px; border-radius: 18px; border: 1px solid var(--s3-line); background: var(--s3x-panel); }
.s3x-cloud a { --w: 0; display: inline-flex; align-items: center; gap: 8px; height: calc(32px + var(--w) * 8px); padding: 0 calc(12px + var(--w) * 4px); border-radius: 999px; font-size: calc(12.5px + var(--w) * 2.5px); font-weight: 500; color: var(--s3-text) !important; background: rgba(255, 46, 108, calc(.04 + var(--w) * .14)); border: 1px solid rgba(255, 46, 108, calc(.12 + var(--w) * .4)); transition: transform .2s var(--s3-ease), background .2s; }
.s3x-cloud a b { font-size: 11px; font-weight: 700; color: var(--s3-pink-2); }
.s3x-cloud a:hover { transform: translateY(-2px); background: rgba(255, 46, 108, .22); }


.s3x-explorer { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0; border-radius: 22px; border: 1px solid var(--s3-line); background: var(--s3x-panel); overflow: hidden; }
.s3x-tabs { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--s3-line-soft); background: var(--s3x-faint); }
.s3x-main .s3x-tabs button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; text-align: left; column-gap: 10px; padding: 9px 12px; border-radius: 12px; transition: background .15s; }
.s3x-tabs button span { font-size: 14px; font-weight: 600; color: var(--s3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3x-tabs button small { grid-row: 2; font-size: 11.5px; color: var(--s3-soft); }
.s3x-tabs button b { grid-row: 1 / 3; grid-column: 2; min-width: 38px; height: 26px; padding: 0 9px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--s3-muted); background: var(--s3x-faint-2); }
.s3x-tabs button:hover { background: var(--s3x-faint-2); }
.s3x-main .s3x-tabs button[aria-selected="true"] { background: linear-gradient(135deg, rgba(255, 46, 108, .2), rgba(255, 170, 61, .08)); box-shadow: inset 0 0 0 1px rgba(255, 46, 108, .35); }
.s3x-tabs button[aria-selected="true"] b { background: var(--s3-grad-btn); color: #fff; }
.s3x-tabs button.is-zero span { color: var(--s3-muted); }
.s3x-panels { min-width: 0; padding: 22px 24px 24px; }
.s3x-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.s3x-main .s3x-panel__head h3 { font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.s3x-panel__head h3 a { color: var(--s3-text) !important; }
.s3x-panel__head h3 a:hover { color: var(--s3-pink-2) !important; }
.s3x-panel__head p { margin-top: 6px; font-size: 13.5px; color: var(--s3-muted); }
.s3x-panel__head p b { color: var(--s3-text); }
.s3x-on { display: inline-flex; align-items: center; gap: 6px; color: #4ade80; }
.s3x-on b { color: #4ade80 !important; }
.s3x-on .s3x-dot { width: 6px; height: 6px; }
.s3x-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.s3x-cards:empty { display: none; }
.s3x-main .s3x-panel__sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s3-soft); }
.s3x-panel__sub small { font-size: 11px; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; background: var(--s3x-faint-2); color: var(--s3-muted); }
.s3x-panel__sub::after { content: ''; flex: 1; height: 1px; background: var(--s3-line-soft); }
.s3x-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.s3x-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; background: var(--s3x-faint-2); border: 1px solid var(--s3-line-soft); font-size: 13.5px; font-weight: 500; color: var(--s3-text) !important; transition: border-color .2s, background .2s; min-width: 0; }
.s3x-list a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3x-list a b { font-size: 12px; font-weight: 700; color: var(--s3-pink-2); flex: 0 0 auto; }
.s3x-list a:hover { border-color: rgba(255, 46, 108, .45); background: rgba(255, 46, 108, .08); }
.s3x-list--zero { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 10px; }
.s3x-list--zero a { height: 28px; padding: 0 4px; background: none; border: 0; font-size: 13px; color: var(--s3x-zero) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 28px; }
.s3x-list--zero a:hover { background: none; color: var(--s3-text) !important; }


.s3x-cats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.s3x-cats a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; height: 118px; padding: 14px; border-radius: 16px; border: 1px solid var(--s3-line); background: var(--s3x-panel); color: var(--s3-text) !important; transition: border-color .2s, transform .2s var(--s3-ease); }
.s3x-cats a:hover { border-color: rgba(255, 46, 108, .5); transform: translateY(-3px); }
.s3x-cats__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--s3-grad-btn); box-shadow: 0 10px 22px -10px rgba(255, 46, 108, .8); }
.s3x-cats__t { margin-top: auto; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.s3x-cats__go { position: absolute; right: 14px; top: 18px; font-size: 11px; color: var(--s3-soft); }



.s3x-crumbs { padding-top: 0; }
.s3x-main .s3x-panel { scroll-margin-top: calc(var(--s3-chrome-h, 120px) + 16px); }
#s3x-explore { scroll-margin-top: calc(var(--s3-chrome-h, 120px) + 8px); }
.s3x-main .s3x-panel:focus { outline: none; }
.s3x-main .s3x-panel:focus-visible { outline: 1px solid rgba(255, 46, 108, .35); outline-offset: 6px; border-radius: 12px; }
.s3x-tabs button small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3x-cards .s3-card { min-width: 0; }
.s3x-map__svg a:focus-visible circle { fill: #ffaa3d; stroke: #fff; stroke-width: 1.6; }
.s3x-map__svg a:focus { outline: none; }


html:not([data-theme="dark"]) .s3x-map__lab text { stroke: rgba(255, 255, 255, .92); }
html:not([data-theme="dark"]) .s3x-map__hot circle { stroke: rgba(255, 255, 255, .9); }
html:not([data-theme="dark"]) .s3x-map__tip { box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .35); }
html:not([data-theme="dark"]) .s3x-bubbles a { background: radial-gradient(circle at 30% 25%, #ff7aa3, #ff2e6c 62%, #ff7a4d); border-color: rgba(255, 46, 108, .55); box-shadow: 0 12px 26px -14px rgba(255, 46, 108, .8); }
html:not([data-theme="dark"]) .s3x-towns.is-nopic .s3x-town { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 46, 108, .75), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(255, 170, 61, .55), transparent 60%), linear-gradient(160deg, #3a2436, #1d1b26); }
html:not([data-theme="dark"]) .s3x-cloud a b, html:not([data-theme="dark"]) .s3x-list a b { color: #e0245e; }
html:not([data-theme="dark"]) .s3x-tabs button[aria-selected="true"] { background: linear-gradient(135deg, rgba(255, 46, 108, .14), rgba(255, 170, 61, .07)); }


@media (max-width: 1240px) {
  .s3x-hero { gap: 32px; }
  .s3x-main h1.seo-h1 { font-size: 46px; }
  .s3x-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .s3x-bento { grid-auto-rows: 188px; gap: 12px; }
  .s3x-bento__big .s3x-pt__name { font-size: 34px; }
  .s3x-bento > li:nth-child(n+6) .s3x-pt__name { font-size: 16px; }
  .s3x-towns { gap: 10px; }
  .s3x-town__name { font-size: 16px; }
  .s3x-explorer { grid-template-columns: minmax(0, 1fr); }
  .s3x-tabs { flex-direction: row; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--s3-line-soft); padding: 10px; }
  .s3x-tabs::-webkit-scrollbar { display: none; }
  .s3x-main .s3x-tabs button { flex: 0 0 auto; min-width: 150px; max-width: 220px; scroll-snap-align: start; border: 1px solid var(--s3-line-soft); }
  .s3x-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s3x-list--zero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .s3x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .s3x-bento > li { grid-column: span 1 !important; grid-row: span 1 !important; }
  .s3x-bento > li:first-child, .s3x-bento > li:last-child:nth-child(even) { grid-column: 1 / -1 !important; grid-row: span 1 !important; }
  .s3x-bento > li:nth-child(n+6) .s3x-pt__name { font-size: 18px; }
  .s3x-towns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s3x-town__name { font-size: 18px; }
}
@media (max-width: 900px) {
  .s3x-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .s3x-map, .s3x-bubbles { width: 100%; max-width: 640px; margin: 0 auto; }
  .s3x-main h1.seo-h1 { font-size: 42px; }
  .s3x-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main.s3x-main { font-size: 14.5px; }
  .s3x-hero { padding-top: 18px; gap: 22px; }
  .s3x-main h1.seo-h1 { margin-top: 16px; font-size: 36px; line-height: 1.08; letter-spacing: -.035em; }
  .s3x-lead { margin-top: 14px; font-size: 15.5px; line-height: 1.6; }
  .s3x-sub { font-size: 14px; }
  .s3x-kpis { width: 100%; margin-top: 20px; }
  .s3x-kpis > div { flex: 1 1 0; min-width: 0; padding: 10px 12px 9px; }
  .s3x-kpis b { font-size: 20px; }
  .s3x-kpis span { font-size: 9.5px; letter-spacing: .08em; line-height: 1.3; }
  .s3x-hero__cta { margin-top: 18px; flex-wrap: wrap; }
  .s3x-hero__cta .s3x-btn { flex: 1 1 auto; padding: 0 14px; height: 44px; font-size: 13.5px; }
  .s3x-map { padding: 10px 10px 6px; border-radius: 20px; }
  .s3x-map__head { font-size: 10.5px; letter-spacing: .06em; flex-wrap: wrap; gap: 4px 10px; }
  .s3x-map__lab text { font-size: 17px; stroke-width: 4px; }
  .s3x-map__lab text.is-minor { display: none; }
  .s3x-bubbles { gap: 8px; padding: 16px 12px; border-radius: 20px; }
  .s3x-bubbles a { --d: calc(var(--s) * 96px); padding: 6px; }
  .s3x-bubbles a:nth-child(n+13) { display: none; }
  .s3x-bubbles b { font-size: calc(var(--s) * 15px); }
  .s3x-bubbles span { font-size: calc(var(--s) * 8.5px + 2px); }

  .s3x-sec { padding-top: 40px; }
  .s3x-sec__head { margin-bottom: 14px; }
  .s3x-sec__title { gap: 12px; }
  .s3x-main .s3x-sec__title h2 { font-size: 20px; }
  .s3x-sec__title p { font-size: 13px; }
  .s3x-ico { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }

  .s3x-bento { gap: 10px; grid-template-rows: 214px; grid-auto-rows: 158px; }
  .s3x-pt { border-radius: 16px; padding: 10px 12px 12px; }
  .s3x-pt__reg { height: 22px; padding: 0 8px; font-size: 9.5px; }
  .s3x-pt__go { width: 30px; height: 30px; border-radius: 10px; }
  .s3x-pt__name, .s3x-bento > li:nth-child(n+6) .s3x-pt__name { font-size: 16.5px; white-space: normal; line-height: 1.15; }
  .s3x-bento__big .s3x-pt__name { font-size: 28px; }
  .s3x-pt__meta, .s3x-bento > li:nth-child(n+6) .s3x-pt__meta { font-size: 11.5px; gap: 0 8px; margin-top: 4px; }
  .s3x-bento > li:not(:first-child) .s3x-pt__chips { display: none; }
  .s3x-pt__chips a { height: 26px; font-size: 11.5px; padding: 0 9px; }

  .s3x-towns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .s3x-town { border-radius: 14px; padding: 10px 9px; }
  .s3x-town__rank { left: 7px; top: 7px; width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
  .s3x-town__name { font-size: 13.5px; }
  .s3x-town__meta { font-size: 10.5px; gap: 5px; }
  .s3x-towns.is-nopic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s3x-towns.is-nopic .s3x-town { height: 92px; }
  .s3x-cloud { gap: 6px; padding: 12px; border-radius: 16px; }
  .s3x-cloud a { height: calc(30px + var(--w) * 6px); padding: 0 calc(10px + var(--w) * 3px); font-size: calc(12px + var(--w) * 1.5px); gap: 6px; }

  .s3x-explorer { border-radius: 18px; }
  .s3x-tabs { padding: 8px; }
  .s3x-main .s3x-tabs button { min-width: 132px; padding: 7px 10px; }
  .s3x-tabs button span { font-size: 13px; }
  .s3x-panels { padding: 16px 12px 16px; }
  .s3x-panel__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .s3x-main .s3x-panel__head h3 { font-size: 23px; }
  .s3x-cards { gap: 8px; margin-top: 14px; }
  .s3x-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .s3x-list a { height: 36px; padding: 0 10px; font-size: 13px; }
  .s3x-list--zero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .s3x-list--zero a { height: 30px; line-height: 30px; font-size: 12.5px; }

  .s3x-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s3x-cats a { height: 96px; gap: 10px; padding: 12px; border-radius: 14px; }
  .s3x-cats__ico { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
  .s3x-cats__t { font-size: 13px; }
}
@media (max-width: 374px) {
  .s3x-main h1.seo-h1 { font-size: 32px; }
  .s3x-kpis > div { padding: 9px 9px 8px; }
  .s3x-kpis b { font-size: 18px; }
  .s3x-hero__cta .s3x-btn { font-size: 13px; padding: 0 10px; gap: 7px; }
  .s3x-pt__name, .s3x-bento > li:nth-child(n+6) .s3x-pt__name { font-size: 15px; }
  .s3x-town__name { font-size: 12.5px; }
  .s3x-main .s3x-tabs button { min-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3x-main *, .s3x-main *::before, .s3x-main *::after { animation: none !important; transition: none !important; }
}