html { color-scheme:dark; background-color:#0a0805; }
@font-face { font-family:Inter;src:url('/inter.ttf') format('truetype');font-weight:100 900;font-display:swap;unicode-range:U+0000-024F; }
@font-face { font-family:Syne;src:url('/syne.ttf') format('truetype');font-weight:400 800;font-display:swap; }
@font-face {
  font-family: Thmanyah;
  src: url('/thmanyah-arabic.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; color: #fefdfb; font-family: Thmanyah, Inter, Tajawal, system-ui, sans-serif;
  background: radial-gradient(ellipse at 95% 0%, #b7a07b50, transparent 45%),
    radial-gradient(ellipse at 0% 60%, #decdb426, transparent 50%),
    radial-gradient(ellipse at 50% 0%, #2a2013, #0a0805 75%);
  background-attachment: fixed; min-height: 100vh; padding: 16px clamp(14px, 4vw, 48px);
}
a { color: inherit; text-decoration: none }
main, nav, footer { max-width: 1120px; margin-inline: auto }
.glass {
  background: linear-gradient(135deg, #ffffff24, #ffffff09);
  border: 1px solid #ffffff2b; border-radius: 28px;
  box-shadow: inset 0 1px #ffffff26, 0 12px 32px #0004;
}
.nav, .nav div, .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.nav { justify-content: space-between; padding: 10px 16px }
.brand { font-family: Syne, sans-serif; font-weight: 800; color: #eee4d6 }
.btn {
  display: inline-block; border-radius: 999px; padding: 10px 20px; font-weight: 800;
  background: linear-gradient(135deg, #f8f2ec, #b7a07b); color: #24190e;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 0 6px 20px #b7a07b44 }
.btn:active { transform: scale(.97) }
.ghost { background: #ffffff10; border: 1px solid #ffffff33; color: #fefdfb }
.hero {
  min-height: 0; display: grid; place-items: center; text-align: center;
  margin-top: 16px; padding: clamp(30px, 5vw, 56px) 16px;
  background: radial-gradient(ellipse at 50% 10%, #b7a07b39, transparent 75%), linear-gradient(145deg, #ffffff14, #0a080588);
}
.hero-content { animation: enter .65s ease both }
.badge, .eyebrow { color: #decdb4; font-size: .8rem; font-weight: 800; letter-spacing: .04em }
.badge { display: inline-block; border: 1px solid #ffffff30; border-radius: 999px; padding: 7px 14px }
h1 {
  font: 800 clamp(1.65rem, 6vw, 4rem)/1 Syne, sans-serif; margin: 20px 0;
  background: linear-gradient(90deg, #fefdfb, #decdb4, #b7a07b);
  background-clip: text; color: transparent;
}
.hero p { max-width: 40ch; margin: 0 auto 24px; font-size: 1.15rem; color: #eee4d6 }
.actions { justify-content: center }
section { margin-block: 64px; scroll-margin-top: 24px }
h2 { font-size: clamp(1.65rem, 5vw, 2.65rem); margin: 6px 0 }
.muted, article p, footer p { color: #decdb4 }
.features, #members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px }
article, details { padding: 18px 22px }
article h3, article p { margin: 8px 0 }
.icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff1a; font-size: 1.3rem }
details { overflow-wrap: anywhere; align-self: start; transition: border-color .2s }
details:hover { border-color: #b7a07b }
summary { cursor: pointer; font-weight: 800 }
small { display: block; margin: 8px 0; color: #decdb4 }
details p { white-space: pre-wrap; line-height: 1.65; margin-bottom: 0 }
footer { text-align: center; border-top: 1px solid #ffffff24; padding: 24px }
:focus-visible { outline: 2px solid #decdb4; outline-offset: 4px }
#loader:not([hidden]) {
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: #100d09;
}
#loader strong { font: 800 2rem Syne, sans-serif; color: #decdb4 }
#loader.done { animation: fade .24s ease forwards; pointer-events: none }
.spinner { width: 48px; height: 48px; border: 3px solid #ffffff26; border-top-color: #decdb4; border-radius: 50%; animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes enter { from { opacity: 0; transform: translateY(14px) } }
@keyframes fade { to { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

.hero { position: relative; overflow: hidden; isolation: isolate }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(120deg, transparent 0 48px, #f8f2ec0c 49px 50px);
  mask-image: linear-gradient(#000, transparent 85%);
}
.directory-hero { margin-top: 16px; padding: 36px clamp(20px, 5vw, 60px) }
.directory-hero h1 { font-family: Thmanyah, Inter, Tajawal, sans-serif; font-size: clamp(1.9rem, 5vw, 3.5rem); line-height: 1.35; margin-block: 14px; overflow-wrap: anywhere }
.directory-hero p { color: #decdb4; margin: 0 }
#directory { margin-top: 32px }
#banner { width: 100%; max-height: 300px; object-fit: cover; border-radius: 24px; margin-bottom: 18px }
.pager:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px }
button.btn { font-family: inherit; cursor: pointer }
button:disabled { opacity: .42; cursor: default; transform: none }
details { background: linear-gradient(145deg, #decdb421, #ffffff08) !important }
summary img { vertical-align: middle; margin-inline: 8px; border-radius: 50%; border: 1px solid #decdb460 }


.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px }
.member-card { display: block; min-width: 0; padding: 18px; transition: transform .2s, border-color .2s }
.member-card:hover { transform: translateY(-3px); border-color: #b7a07b }
.member-card div { display: flex; align-items: center; gap: 12px }
.member-card h3 { margin: 0; overflow-wrap: anywhere }
.member-card img, #profile-avatar { border-radius: 50%; background: #ffffff16; object-fit: cover }
.member-card p { color: #decdb4; margin: 10px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.profile { margin-top: 20px; padding: clamp(18px, 5vw, 48px); overflow-wrap: anywhere }
#profile { margin-top: 24px }
#profile-information { white-space: pre-wrap; line-height: 1.8 }
#copy-status { margin-inline-start: 10px }




.nav {
  position: sticky; top: 10px; z-index: 4; scrollbar-gutter: auto; border-radius: 999px;
  padding: 8px 14px; background: #221a1266; backdrop-filter: none;
}
.nav .tabs { gap: 4px }
.tabs a {
  position: relative; isolation: isolate; padding: 8px 14px; border-radius: 999px;
  color: #decdb4; white-space: nowrap; font-size: .875rem;
  transition: color .2s, background-color .2s, transform .2s;
}
.tabs a:hover { background: #ffffff15; color: #fff }
.tabs a:active { transform: scale(.95) }

.tabs a[aria-current] { color: #21170d }
.tabs .tab-active {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #decdb4;
}


.nav .brand, .nav .tabs { font-family: Thmanyah, Inter, Tajawal, system-ui, sans-serif }
.nav .brand { font-weight: 800 }
.nav .tabs { position: relative; gap: 4px; flex-wrap: nowrap }
.tabs a { display: grid; place-items: center; min-inline-size: 78px; min-block-size: 36px; padding: 0 12px; font-size: 14px; font-weight: 700; line-height: 1; z-index: 1 }


.glass {
  backdrop-filter: none;
  border-color: #f8f2ec55;
  box-shadow: inset 0 1px 0 #fff5, inset 0 -1px 0 #fff1, 0 14px 32px #0004;
}
.member-card, .directory-hero, .profile {
  background: radial-gradient(ellipse at top right, #decdb439, transparent 72%),
    linear-gradient(140deg, #fff2, #ffffff05 80%);
}
.member-card { transition: transform .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out }
.member-card:hover { box-shadow: inset 0 1px #fff6, 0 10px 24px #0006 }
.tabs a:active, .member-card:active { transform: scale(.97); transition-duration: .06s }


@media (prefers-reduced-motion: no-preference) {
  .directory-hero, .profile, .member-card { animation: enter .24s ease-out both }
  .member-card:nth-child(3n + 2) { animation-delay: .025s }
  .member-card:nth-child(3n + 3) { animation-delay: .05s }
}


html { scrollbar-gutter: stable both-edges }
@view-transition { navigation: auto }

.tabs a[aria-current] { color: #24190e }
.nav .tabs { isolation: isolate; gap: 10px }
.tabs a { isolation: auto; z-index: 1; background: transparent }
.tabs a:active { transform: none }
.tabs .tab-active {
  position: absolute; inset: auto; z-index: 0; pointer-events: none;
  border-radius: 999px; border: 1px solid #f6e8cd;
  background: linear-gradient(145deg, #e9dcc3, #cebb98);
  box-shadow: 0 0 0 4px #221a12, 0 0 0 6px #decdb4;
}
.nav { backdrop-filter: blur(10px); background: #211a12c9 }
.category-filters { gap: 12px; padding: 6px }
.category-filters .btn {
  border: 1px solid #decdb455; background: #ffffff08; box-shadow: inset 0 1px #ffffff12;
}
.category-filters .btn[aria-pressed="true"] {
  background: linear-gradient(145deg, #e9dcc3, #cebb98); color: #24190e;
  border-color: #f6e8cd; box-shadow: 0 0 0 4px #221a12, 0 0 0 6px #decdb4;
}
.tabs .tab-label { position: relative }

@media (prefers-reduced-motion: no-preference) {
  main { view-transition-name: page-content }
  .hero-content, .directory-hero, .profile { animation: none }
  ::view-transition-group(page-content), ::view-transition-group(page-footer) {
    animation: none;
  }
  body > footer { view-transition-name: page-footer }
  ::view-transition-old(page-content), ::view-transition-old(page-footer) {
    animation: page-fade-out .24s ease-out both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(page-content), ::view-transition-new(page-footer) {
    animation: page-fade-in .24s ease-out both;
    mix-blend-mode: normal;
  }
  .tabs .tab-active { view-transition-name: active-tab }
  .tabs a[href="/"] .tab-label { view-transition-name: nav-home }
  .tabs a[href="/members"] .tab-label { view-transition-name: nav-members }
  .tabs a[href="/servers"] .tab-label { view-transition-name: nav-servers }
  .tabs a[href="/role-logs"] .tab-label { view-transition-name: nav-roles }
  ::view-transition-group(active-tab) {
    animation-duration: .24s;
    animation-timing-function: cubic-bezier(.22,.75,.24,1);
  }
  ::view-transition-new(active-tab) { animation: none; mix-blend-mode: normal }
  ::view-transition-old(active-tab), ::view-transition-old(root),
  ::view-transition-old(nav-home), ::view-transition-old(nav-members),
  ::view-transition-old(nav-servers), ::view-transition-old(nav-roles) { display: none }
  ::view-transition-new(root), ::view-transition-new(nav-home), ::view-transition-new(nav-members),
  ::view-transition-new(nav-servers), ::view-transition-new(nav-roles) { animation: none }
  ::view-transition-group(nav-home), ::view-transition-group(nav-members),
  ::view-transition-group(nav-servers), ::view-transition-group(nav-roles) {
    z-index: 2;
    animation-duration: .24s;
  }
}

@keyframes page-fade-out { to { opacity: 0 } }
@keyframes page-fade-in { from { opacity: 0 } }

@keyframes glass-settle {
  45% { transform: scale(1.035, .97); filter: brightness(1.15) }
}

.directory-controls { justify-content: flex-start; margin-block: 14px }
.directory-controls select { margin-inline: 6px; font: inherit; color: #f8f2ec; background: #251b11; padding: 8px; border: 1px solid #decdb455; border-radius: 10px }
#members.compact-list { grid-template-columns: 1fr }
#profile-neighbors:not([hidden]) { margin-block: 18px; justify-content: space-between }
#profile-link[hidden] { display: none }

@media (max-width: 560px) {
  .tabs a { min-block-size: 44px }
  .btn { min-block-size: 44px; align-content: center }
  .directory-controls { gap: 10px; align-items: stretch }
  .directory-controls select { min-block-size: 44px }
  .member-grid, #members { grid-template-columns: minmax(0, 1fr) }
}
#profile-qr { display: block; max-width: 100%; height: auto; margin-top: 12px }
.category-filters { display: flex; flex-wrap: wrap }
.category-filters .btn[aria-pressed="true"] { background: #decdb4; color: #24190e }
#profile-link:not(:empty) { justify-content: flex-start; margin-block: 16px }
#profile-link a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; max-inline-size: 100% }

.profile-qr-panel { width: fit-content; max-width: 100%; margin-top: 12px; padding: 10px 14px; border: 1px solid #decdb455; border-radius: 16px; background: #ffffff0d !important }
.profile-qr-panel canvas { border-radius: 8px }


.server-banner { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px }
.server-icon { border-radius: 50%; vertical-align: middle; margin-inline-end: 10px }
.server-card { min-width: 0; overflow-wrap: anywhere }
#server-list { margin-bottom: 20px }
.nav { flex-wrap: wrap }
.nav .tabs { flex-wrap: wrap }

#loader:not([hidden]) {
  display: grid; place-items: center; z-index: 100;
  background: #0a0805aa; backdrop-filter: blur(30px) saturate(150%);
}
#loader.done { animation: fade .6s ease forwards }
.intro-stage { text-align: center; width: min(88vw, 600px) }
.intro-stage svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 15px #decdb46b) }
.intro-stage text {
  font: 800 64px Syne, sans-serif; fill: #f8f2ec; fill-opacity: 0;
  stroke: #decdb4; stroke-width: 1; stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: intro-draw 3.1s ease forwards;
}
.intro-count { margin-top: 22px; color: #decdb4; font: 500 13px system-ui, sans-serif; letter-spacing: .32em }
.intro-count b { display: inline-block; min-width: 3ch; text-align: end; color: #fff; font-variant-numeric: tabular-nums }
.intro-skip {
  position: absolute; right: 18px; bottom: max(24px, env(safe-area-inset-bottom)); isolation: isolate;
  color: #fff; background: #ffffff19; border: 1px solid #ffffff40; border-radius: 999px;
  padding: 11px 23px; font: 700 15px Thmanyah, Inter, Tajawal, sans-serif; cursor: pointer; overflow: hidden;
}
.intro-skip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #decdb435;
  transform-origin: right; animation: intro-progress 4s linear both;
}
@keyframes intro-draw { 70% { fill-opacity: 0 } to { stroke-dashoffset: 0; fill-opacity: 1 } }
@keyframes intro-progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }



.role-log-page { font-family: Thmanyah, Inter, Tajawal, system-ui, sans-serif }
.role-log-page main { max-width: 1120px }
.role-log-back { display: inline-block; padding: 8px 0; color: #decdb4; font-weight: 700 }
.role-log-hero { padding: clamp(24px, 5vw, 48px) }
.role-log-page .role-log-access { margin: 20px 0; padding: clamp(20px, 4vw, 32px) }
.role-log-access h2 { margin: 0 0 14px; font-size: 1.4rem }
.role-log-access label { display: block; margin-bottom: 8px; color: #eee4d6; font-weight: 700 }
.role-log-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch }
.role-log-controls input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 15px; border-radius: 14px;
  border: 1px solid #decdb455; background: #0a080577; color: #f8f2ec; font: inherit;
}
.role-log-controls input::placeholder { color: #decdb4b8 }
.role-log-controls button { border: 0; font: 800 1rem Thmanyah, Inter, Tajawal, system-ui, sans-serif }
#log-status { color: #decdb4; margin-bottom: 0 }
#log-status:empty { display: none }
#log-list article { border-inline-start: 3px solid #b7a07b }
#log-list article[data-action="added"] { border-inline-start-color: #73bd9b }
#log-list article[data-action="removed"] { border-inline-start-color: #df9988 }
@media (max-width: 480px) { .role-log-controls { grid-template-columns: 1fr } }
.role-log-access { padding: clamp(18px, 4vw, 32px) }
#log-list:not(:empty) { margin-block-start: 16px }

.role-log-server { display: flex; align-items: center; gap: 8px }
.role-log-server img { border-radius: 50%; object-fit: cover }

.section-hero { min-height: 0; padding: clamp(28px, 6vw, 64px) 16px }
.section-hero h1 { line-height: 1.18 }


.role-log-member, .role-log-server { display: flex; align-items: center; gap: 8px }
.role-log-avatar {
  position: relative; display: grid; place-items: center; flex: 0 0 36px; height: 36px;
  border-radius: 50%; overflow: hidden; background: #514432; color: #eee4d6;
}
.role-log-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.role-log-details {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px;
  border-block-start: 1px solid #decdb433; padding-block-start: 12px; font-size: .9rem;
}
.role-log-details dt { color: #decdb4 }
.role-log-details dd { margin: 0; overflow-wrap: anywhere }

#log-list article, .features article, .server-card {
  transition: transform .18s ease-out, border-color .18s ease-out;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #log-list article:hover, .features article:hover, .server-card:hover {
    transform: translateY(-3px);

  }
}

.role-log-pagination {
  margin-block: 28px 16px; padding: 8px; gap: 18px;
}
.role-log-pagination[hidden] { display: none }
.role-log-pagination bdi { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums }
.role-log-pagination .btn { min-width: 90px }

@media (prefers-reduced-motion: no-preference) { .tabs a[href="/voice"] .tab-label { view-transition-name: nav-voice } ::view-transition-group(nav-voice) { z-index: 2 } ::view-transition-old(nav-voice) { display: none } ::view-transition-new(nav-voice) { animation: none } }

.safeguard-notice {
  position:fixed; inset-block-end:24px; inset-inline:24px; width:fit-content; max-width:calc(100% - 48px);
  margin-inline:auto; z-index:20; padding:12px 20px; border:1px solid #decdb477;
  border-radius:16px; background:#211a12; color:#eee4d6; box-shadow:0 8px 24px #0005;
}
.safeguard-notice[hidden] { display:none }

main, nav, footer { max-width:1360px }
.role-log-page main { max-width:1360px }
.nav-account { font-size:13px; padding:8px 14px; white-space:nowrap }
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10vw - 1px),#decdb408 10vw),
    radial-gradient(ellipse at 0 30%,#b7a07b15,transparent 30%),
    radial-gradient(ellipse at 100% 70%,#b7a07b12,transparent 30%);
}

::view-transition { pointer-events:none }

main, nav, footer, .role-log-page main { max-width:none; width:100% }
body { padding-inline:clamp(14px,2.5vw,40px) }
@media (min-width:2200px) {
  main, nav, footer, .role-log-page main { max-width:2080px }
}

.nav .brand { display:inline-flex;align-items:center;gap:10px;font-family:Syne,sans-serif;font-weight:800; }
.nav .brand img { border-radius:50%;border:1px solid #decdb440;object-fit:cover; }
.rank-card, .member-card, .role-log-card { border-color:#decdb435; }
.rank-card h3, .section-heading h2 { color:#f8f2ec; }

body { background-image:linear-gradient(#0a080530,#0a080560),url('/brand-background.webp');background-size:cover;background-position:center;background-attachment:fixed; }

/* Animate only the viewport, rather than taking a full-height main snapshot. */
body { background-attachment:scroll; }
.btn { transition:transform .15s ease-out,background-color .15s ease-out; }
.btn:hover { transform:translateY(-1px);filter:none;box-shadow:inset 0 1px #ffffff26; }
.nav { backdrop-filter:none;background:#211a12ed; }
#log-list article, .rank-card, .member-card, .server-card { contain:layout style; }
@media (prefers-reduced-motion:no-preference) {
 main, body > footer { view-transition-name:none; }
 ::view-transition-group(root) { animation:none; }
 ::view-transition-old(root) { display:block;animation:page-fade-out .16s ease-out both;mix-blend-mode:normal; }
 ::view-transition-new(root) { animation:page-fade-in .16s ease-out both;mix-blend-mode:normal; }
 ::view-transition-group(active-tab) { animation-duration:.18s; }
}

body { background-color:#0a0805; }
::view-transition { background:#0a0805; }
@media (prefers-reduced-motion:no-preference) {
 ::view-transition-old(root) { display:block;animation:none;opacity:1; }
 ::view-transition-new(root) { animation:page-fade-in .16s ease-out both;mix-blend-mode:normal; }
}

/* ===== One Voice "Gilded Deco" redesign (2026-11-07) — new shape language, gold identity ===== */
:root { --g1:#ddd0ba; --g2:#decdb4; --g3:#b7a07b; --g4:#7a6642; --edge:#decdb440; --tab:linear-gradient(90deg,#ddd0ba,#b7a07b 70%,transparent); }
body {
  background-color:#0a0805;
  background-image:
    radial-gradient(900px 520px at 88% -4%, #a9876a30, transparent 70%),
    radial-gradient(700px 420px at 4% 100%, #a9876a1c, transparent 70%),
    repeating-linear-gradient(45deg, #decdb40b 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-45deg, #decdb408 0 1px, transparent 1px 56px);
  background-attachment:fixed;
}
/* shared card shape: opposite corners cut, gold tab on top */
.glass {
  border-radius:6px 34px 6px 34px; border:1px solid var(--edge);
  background:
    var(--tab) top right / 120px 3px no-repeat,
    linear-gradient(160deg, #ffffff12, #ffffff04 55%, #decdb40a);
  box-shadow:0 18px 40px #00000066, inset 0 0 0 1px #ffffff05;
}
/* top bar */
.nav { position:sticky; top:0; z-index:20; border-radius:0 0 30px 30px; border-top:0; margin-top:0; background:linear-gradient(180deg,#17110aef,#0f0b07ef); backdrop-filter:blur(12px); }
.nav::after { content:""; position:absolute; inset-inline:12% ; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--g1),transparent); }
.nav .tabs a[aria-current="page"] .tab-label { color:#1a130b; font-weight:800; }
/* hero */
.hero { padding:clamp(52px,9vw,110px) 20px; border-radius:6px 56px 6px 56px; }
.hero::after { content:""; position:absolute; inset:14px; border:1px solid #decdb430; border-radius:4px 44px 4px 44px; pointer-events:none; }
.hero h1 { font-size:clamp(3.2rem,11vw,7.5rem); letter-spacing:-.03em; line-height:1; background:linear-gradient(180deg,var(--g1),var(--g3) 70%,var(--g4)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:none; }
.hero p { color:var(--g2); font-size:clamp(1.05rem,2.4vw,1.35rem); }
/* headings with ornament */
h2 { position:relative; padding-inline-start:.9em; }
h2::before { content:""; position:absolute; inset-inline-start:0; top:.5em; width:.42em; height:.42em; background:linear-gradient(135deg,var(--g1),var(--g3)); transform:rotate(45deg); }
.eyebrow { display:flex; align-items:center; gap:12px; letter-spacing:.14em; }
.eyebrow::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--g3),transparent); opacity:.6; }
/* buttons */
.btn { border-radius:4px 16px 4px 16px; letter-spacing:.01em; }
.btn:not(.ghost) { background:linear-gradient(135deg,var(--g1),var(--g3)); color:#1a130b; border:0; box-shadow:0 8px 22px #b7a07b33; }
.ghost { border-color:#decdb455; background:#decdb40d; color:var(--g2); }
.ghost:hover { background:#decdb41c; }
/* features: bento */
.icon { width:44px; height:44px; border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(135deg,var(--g1),var(--g4)); color:#1a130b; }
@media (min-width:1000px) {
  .features { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .features > article { grid-column:span 2; }
  .features > article:nth-child(1) { grid-column:span 4; }
  .features > article:nth-child(6) { grid-column:span 6; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 22px; }
  .features > article:nth-child(6) h3, .features > article:nth-child(6) p { margin:0; }
}
.features article { transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .features article:hover, .member-card:hover { transform:translateY(-4px); border-color:#decdb480; box-shadow:0 22px 46px #00000080, 0 0 0 1px #decdb426; } }
.member-card { border-radius:6px 24px 6px 24px; }
.member-card img, #profile-avatar { border:2px solid #decdb466; }
footer { border-top:1px solid #decdb430; margin-top:64px; padding-top:28px; position:relative; }
footer::before { content:""; position:absolute; top:-1px; inset-inline:30%; height:2px; background:linear-gradient(90deg,transparent,var(--g1),transparent); }
@media (max-width:640px) { .hero { border-radius:6px 34px 6px 34px; } .nav { border-radius:0 0 22px 22px; } h2 { padding-inline-start:.8em; } }

/* ===== Scroll motion: progress bar, wheel hint, guided tour, view-switch animation ===== */
.scroll-progress { position:fixed; inset:0 0 auto 0; height:3px; z-index:60; transform-origin:right center; transform:scaleX(0); background:linear-gradient(90deg,#ddd0ba,#b7a07b); pointer-events:none; }
/* mouse-wheel hint */
.scroll-hint { position:absolute; inset-inline:0; bottom:26px; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff6e8; font-size:.9rem; letter-spacing:0; line-height:1.6; text-shadow:0 1px 3px #000; transition:opacity .3s, transform .3s; z-index:2; }
.scroll-hint > span:last-child { padding:5px 14px; border-radius:999px; background:#17100de8; border:1px solid #f1d5ad66; box-shadow:0 3px 12px #0003; }
.scroll-hint:focus-visible { outline:2px solid #fff6e8; outline-offset:5px; border-radius:16px; }
.scroll-hint.gone { opacity:0; transform:translateY(8px); pointer-events:none; }
.mouse { width:26px; height:42px; border:2px solid #fff0da; background:#17100db3; border-radius:14px; position:relative; box-shadow:0 2px 10px #0005; }
.mouse i { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff6e8; animation:wheel 1.7s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes wheel { 0% { opacity:0; transform:translateY(0) } 25% { opacity:1 } 70% { opacity:1; transform:translateY(14px) } 100% { opacity:0; transform:translateY(18px) } }
.hero { padding-bottom:clamp(90px,12vw,140px); }
/* reveal on scroll */
.rise { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.75,.24,1); }
.rise.in { opacity:1; transform:none; }
/* guided tour */
.tour-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:start; margin-top:26px; }
.tour-steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.tour-steps li { min-height:46vh; display:flex; flex-direction:column; justify-content:center; padding:18px 4px; opacity:.32; transition:opacity .35s, transform .35s; cursor:pointer; border-inline-start:2px solid #decdb41f; padding-inline-start:22px; }
.tour-steps li.on { opacity:1; border-inline-start-color:var(--g2); }
.tour-steps b { color:var(--g3); font-size:.95rem; letter-spacing:.1em; }
.tour-steps h3 { font-size:clamp(1.4rem,3.4vw,2.1rem); margin:6px 0; background:linear-gradient(180deg,var(--g1),var(--g3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour-steps p { max-width:34ch; margin:6px 0 0; color:var(--g2); line-height:1.8; }
.tour-stage { position:sticky; top:110px; height:min(440px,62vh); padding:26px; overflow:hidden; }
.tour-stage::before { content:""; position:absolute; width:340px; height:340px; inset-inline-end:-80px; top:calc(-120px + var(--p,0) * 240px); background:radial-gradient(circle,#a9876a33,transparent 70%); transition:top .2s linear; pointer-events:none; }
.tour-bar { position:absolute; inset-inline:26px; top:16px; height:3px; background:#decdb41c; border-radius:3px; overflow:hidden; }
.tour-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--g1),var(--g3)); transform-origin:right center; transform:scaleX(0); }
.scene { position:absolute; inset:46px 26px 26px; display:flex; flex-direction:column; gap:16px; justify-content:center; opacity:0; transform:translateY(26px) scale(.96); transition:opacity .45s ease, transform .55s cubic-bezier(.22,.75,.24,1); pointer-events:none; }
.scene.on { opacity:1; transform:none; }
.scene s { display:block; height:14px; border-radius:7px; background:linear-gradient(90deg,#decdb455,#decdb41a); text-decoration:none; transform-origin:right center; }
.scene.on s { animation:grow .7s cubic-bezier(.22,.75,.24,1) both; }
.scene.on > *:nth-child(2) s, .scene.on > *:nth-child(2) { animation-delay:.08s; }
.scene.on > *:nth-child(3) s, .scene.on > *:nth-child(3) { animation-delay:.16s; }
.scene.on > *:nth-child(4) s, .scene.on > *:nth-child(4) { animation-delay:.24s; }
@keyframes grow { from { transform:scaleX(0); opacity:0 } to { transform:scaleX(1); opacity:1 } }
.w35 { width:35% } .w40 { width:40% } .w50 { width:50% } .w55 { width:55% } .w60 { width:60% } .w65 { width:65% } .w70 { width:70% } .w75 { width:75% } .w80 { width:80% } .w90 { width:90% }
.m-card { display:flex; align-items:center; gap:16px; } .m-card > div { flex:1; display:grid; gap:10px; }
.m-av { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g4)); border:2px solid #decdb480; }
.m-chips { display:flex; gap:10px; } .m-chips u { width:70px; height:28px; border-radius:4px 12px 4px 12px; border:1px solid #decdb455; background:#decdb40f; }
.m-row, .m-top, .m-log, .m-set { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:4px 16px 4px 16px; border:1px solid #decdb430; background:#ffffff08; }
.m-row s, .m-top s, .m-log s, .m-set s { flex:none; }
.m-row em, .m-top em { font-style:normal; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid #decdb470; color:var(--g1); font-size:.9rem; flex:none; }
.m-top b { margin-inline-start:auto; font-size:1.1rem; } .m-top .up { color:#8fdbb2; } .m-top .down { color:#f2a393; }
.scene.on .m-top b { animation:bob 1.4s ease-in-out infinite; } .scene.on .m-top .down { animation-name:bobd; }
@keyframes bob { 50% { transform:translateY(-4px) } } @keyframes bobd { 50% { transform:translateY(4px) } }
.m-log i { width:12px; height:12px; border-radius:50%; flex:none; } .m-log.up i { background:#8fdbb2; box-shadow:0 0 12px #8fdbb280; } .m-log.down i { background:#f2a393; box-shadow:0 0 12px #f2a39380; }
.m-line { height:1px; background:linear-gradient(90deg,transparent,#decdb470,transparent); }
.m-set { justify-content:space-between; }
.sw { width:46px; height:26px; border-radius:13px; background:#decdb422; border:1px solid #decdb455; position:relative; transition:background .3s; flex:none; }
.sw::after { content:""; position:absolute; top:3px; inset-inline-end:3px; width:18px; height:18px; border-radius:50%; background:var(--g3); transition:inset .3s, background .3s; }
.sw.on { background:#decdb455; } .sw.on::after { inset-inline-end:23px; background:var(--g1); }
.scene.on .sw::after { animation:flip 1.8s ease-in-out .5s infinite alternate; } @keyframes flip { to { background:var(--g1) } }
@media (max-width:820px) {
  .tour-grid { grid-template-columns:1fr; }
  .tour-stage { order:-1; top:76px; height:260px; z-index:3; padding:18px; }
  .scene { inset:36px 18px 14px; gap:10px; }
  .tour-steps li { min-height:38vh; }
  .m-av { width:48px; height:48px; }
}
@media (prefers-reduced-motion:reduce) { .rise { opacity:1; transform:none; transition:none; } .mouse i, .scene.on s, .scene.on .m-top b { animation:none; } .scene, .tour-steps li { transition:none; } }
/* grid ⇄ list switch */
#layout { position:relative; overflow:hidden; }
#layout .lbl { display:inline-block; }
#layout.swap .lbl { animation:lblswap .38s cubic-bezier(.22,.75,.24,1); }
@keyframes lblswap { 0% { opacity:0; transform:translateY(60%) } 100% { opacity:1; transform:none } }

/* tour scenes with real data */
.scene strong { color:var(--g1); font-size:1rem; font-weight:800; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene small { color:var(--g3); font-size:.85rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-card > div, .m-row > div, .m-log > div, .m-set > div { min-width:0; }
.m-card > div { display:block; flex:1; }
.m-card small { margin-top:6px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.m-av, .m-ic { background:linear-gradient(135deg,var(--g1),var(--g4)) center/cover no-repeat; flex:none; border-radius:50%; border:2px solid #decdb480; }
.m-ic { width:36px; height:36px; border-width:1px; }
.m-row > div, .m-top > strong { flex:1; }
.m-note { margin:4px 0 0; color:var(--g3); font-size:.9rem; text-align:center; }
.bar { display:block; height:6px; border-radius:3px; background:#decdb41c; overflow:hidden; margin-top:7px; }
.bar b { display:block; height:100%; width:var(--w,60%); background:linear-gradient(90deg,var(--g1),var(--g3)); transform-origin:right center; }
.scene.on .bar b { animation:grow .9s cubic-bezier(.22,.75,.24,1) .2s both; }
.m-log > div { flex:1; }
.m-top small, .m-row > small { flex:none; }

/* sliding filter marker */
.category-filters.has-marker { position:relative; isolation:isolate; }
.cf-marker { position:absolute; left:0; top:0; z-index:0; border-radius:4px 16px 4px 16px; background:linear-gradient(135deg,#ddd0ba,#decdb4 55%,#b7a07b); box-shadow:0 8px 22px #b7a07b40; transition:transform .38s cubic-bezier(.22,.75,.24,1), width .38s cubic-bezier(.22,.75,.24,1), height .3s ease, opacity .2s; pointer-events:none; }
.category-filters.has-marker .btn { position:relative; z-index:1; transition:color .25s ease, transform .15s ease; }
.category-filters.has-marker .btn[aria-pressed="true"] { background:transparent !important; border-color:transparent !important; color:#24190e !important; box-shadow:none !important; }
.category-filters.has-marker .btn:active { transform:scale(.96); }
@media (prefers-reduced-motion:reduce) { .cf-marker { transition:none; } }
/* voice dashboard without access shows only the notice */
#dashboard.no-access > :not(.section-heading):not(#auth-status) { display:none !important; }

/* tour: member card chips */
.m-chips { flex-wrap:wrap; gap:8px; }
.m-chips u { width:auto; height:auto; text-decoration:none; padding:6px 14px; font-size:.82rem; line-height:1.4; color:var(--g2); white-space:nowrap; display:inline-block; }
@media (max-width:820px) { .m-chips u { padding:5px 11px; font-size:.78rem; } .scene .m-note { font-size:.8rem; } }

/* top page: side rail layout */
.top-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(16px,3vw,28px); align-items:start; }
.top-rail { position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; padding:14px; border:1px solid var(--edge); border-radius:6px 24px 6px 24px; background:linear-gradient(160deg,#ffffff0c,#ffffff03); }
.rail-filters { display:flex; flex-direction:column; flex-wrap:nowrap; gap:6px; }
.rail-filters .btn { width:100%; justify-content:flex-start; text-align:start; border-radius:3px 14px 3px 14px; }
.rail-period { display:grid; gap:8px; color:var(--g2); font-size:.9rem; }
.rail-period select { width:100%; }
.top-main { min-width:0; display:grid; gap:14px; align-content:start; }
.top-main .category-filters { display:flex; flex-wrap:wrap; gap:8px; }
.top-main .grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.top-main > p[role=status]:empty { display:none; }
@media (max-width:860px) {
  .top-layout { grid-template-columns:1fr; }
  .top-rail { position:static; padding:10px; border-radius:6px 18px 6px 18px; }
  .rail-filters { flex-direction:row; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .rail-filters::-webkit-scrollbar { display:none; }
  .rail-filters .btn { width:auto; white-space:nowrap; flex:none; }
  .rail-period { grid-template-columns:auto 1fr; align-items:center; }
}
.top-rail, .rail-filters, .top-layout > * { min-width:0; }
@media (max-width:860px) { .top-layout { grid-template-columns:minmax(0,1fr); } .rail-filters { max-width:100%; } }

.rail-period[hidden] { display:none !important; }
/* ===== Bento design (applied site-wide) ===== */

:root { --edge:#c7a47d33; --g1:#ddd0ba; --g2:#cbb08a; --g3:#ab8a62; --g4:#5a4028; }
body { background:#0c0a07 !important; background-image:radial-gradient(800px 500px at 100% 0,#a9876a22,transparent 60%) !important; }
.glass, .member-card, #log-list article, .server-card, .top-rail, .profile { border-radius:38px !important; background:#1b1610 !important; border:1px solid #c7a47d2e !important; box-shadow:0 18px 0 -8px #00000077, 0 26px 50px #0008 !important; backdrop-filter:none !important; }
.features article { border-radius:38px !important; background:#1b1610 !important; border:1px solid #c7a47d2e !important; box-shadow:0 18px 0 -8px #00000077 !important; }
.features article:nth-child(1), .features article:nth-child(4) { background:linear-gradient(135deg,#ddd0ba,#a9876a 70%,#6b4f36) !important; border-color:#ffffff66 !important; }
.features article:nth-child(1) *, .features article:nth-child(4) * { color:#1a130b !important; }
.features article:nth-child(1) .btn, .features article:nth-child(4) .btn { background:#1a130b !important; color:#ddd0ba !important; border-color:#1a130b !important; }
.features article:nth-child(1) .icon, .features article:nth-child(4) .icon { background:#1a130b !important; color:#ddd0ba !important; }
.nav { border-radius:30px !important; margin:14px auto 0 !important; top:10px !important; background:#17120c !important; border:1px solid #c7a47d40 !important; box-shadow:0 14px 0 -6px #0008 !important; }
.nav::after, footer::before { display:none !important; }
.tab-active { border-radius:20px !important; background:#cbb08a !important; box-shadow:none !important; }
.btn, .ghost, .category-filters .btn, .cf-marker { border-radius:18px !important; }
.btn:not(.ghost), .cf-marker { background:#cbb08a !important; color:#1a130b !important; border:0 !important; box-shadow:0 6px 0 #5a4028 !important; }
.ghost { background:#251d13 !important; border:1px solid #c7a47d40 !important; color:#ddd0ba !important; }
.hero { border-radius:56px !important; background:linear-gradient(135deg,#d8c4a0,#a9876a 55%,#6b4f36) !important; border:2px solid #ffffff66 !important; box-shadow:0 26px 0 -10px #00000088 !important; }
.hero::before, .hero::after { display:none !important; }
.hero h1 { -webkit-text-fill-color:#1a130b !important; color:#1a130b !important; background:none !important; letter-spacing:-.04em; }
.hero p { color:#3a2a0e !important; } .hero .btn:not(.ghost) { background:#1a130b !important; color:#ddd0ba !important; box-shadow:0 6px 0 #00000066 !important; } .hero .ghost { background:#ffffff55 !important; color:#1a130b !important; border-color:#1a130b55 !important; }
.eyebrow { display:inline-flex !important; background:#f4ecdc; color:#0c0907 !important; padding:6px 16px; border-radius:999px; transform:rotate(-2deg); letter-spacing:.04em !important; }
.eyebrow::after, h2::before { display:none !important; } h2 { padding-inline-start:0 !important; }
.icon { clip-path:none !important; border-radius:50% !important; background:#cbb08a !important; color:#1a130b !important; }


/* Bento: compact hero on inner pages so the content stays near the top */
body:not(:has(#tour)) .hero { padding:34px clamp(18px,4vw,48px) !important; border-radius:44px !important; }
body:not(:has(#tour)) .hero h1 { font-size:clamp(2.6rem,7.5vw,5rem) !important; line-height:1 !important; }
body:not(:has(#tour)) .hero p { margin-bottom:0 !important; }
@media (max-width:640px) { .hero { border-radius:38px !important; } }
@media (max-width:640px) { body:not(:has(#tour)) .hero h1 { font-size:clamp(1.9rem,9.5vw,2.6rem) !important; overflow-wrap:anywhere; } }

/* ===== Consistency layer (one spacing / radius / type scale for every page) ===== */
:root { --sec:76px; --gap:20px; --r:32px; }
main > section, main > .role-log-access { margin-block:var(--sec) !important; }
h2 { font-size:clamp(1.9rem,4.2vw,2.6rem) !important; line-height:1.15 !important; margin:8px 0 6px !important; }
h3 { font-size:1.15rem; }
.section-heading { margin-bottom:24px !important; align-items:flex-end !important; }
section > .muted, section > p:not([role]) { margin:6px 0 24px; }
.eyebrow { margin-bottom:10px; }
.glass, .member-card, #log-list article, .server-card, .rank-card, .features article, .top-rail, .profile { border-radius:var(--r) !important; }
.member-card, #log-list article, .rank-card, .server-card { padding:22px !important; }
.features { gap:var(--gap) !important; }
#home-groups, #home-servers, #latest, #log-list, #featured { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:var(--gap) !important; align-items:stretch; }
#home-tops h3 { margin:26px 0 14px; color:#decdb4; font-size:1.05rem; }
.role-log-access { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.role-log-access::before, .role-log-access::after { display:none !important; }
.btn, .ghost { min-height:44px; display:inline-flex; align-items:center; }
body:has(#tour) .hero { padding-block:clamp(48px,7vw,84px) clamp(96px,10vw,120px) !important; }
body:has(#tour) .hero h1 { font-size:clamp(3rem,9vw,6.6rem) !important; }
.tour-steps li { min-height:36vh !important; }
@media (max-width:1000px) { #home-groups, #home-servers, #latest, #log-list, #featured { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:660px) { :root { --sec:56px; --r:26px; } #home-groups, #home-servers, #latest, #log-list, #featured { grid-template-columns:minmax(0,1fr) !important; } h2 { font-size:1.75rem !important; } }

/* fewer than three cards: use the space instead of leaving an empty column */
#home-groups:has(> :only-child), #home-servers:has(> :only-child), #latest:has(> :only-child), #log-list:has(> :only-child) { grid-template-columns:minmax(0,1fr) !important; }
#home-groups:has(> :nth-child(2):last-child), #home-servers:has(> :nth-child(2):last-child), #latest:has(> :nth-child(2):last-child), #log-list:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

/* temporary-block page */
.block-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.block-card{max-width:620px;width:100%;text-align:center;padding:clamp(28px,6vw,56px)!important}
.block-mark{width:92px;height:92px;margin:0 auto 22px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(135deg,#ddd0ba,#a9876a 60%,#6b4f36);transform:rotate(-8deg);box-shadow:0 10px 0 -2px #00000066;font:800 38px Syne,sans-serif;color:#1a130b;letter-spacing:-2px}
.block-card h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:0 0 10px;background:none;-webkit-text-fill-color:#1a130b;color:#1a130b}
.block-card p{color:#3a2a0e;margin:8px 0}
.block-count{display:inline-block;margin-top:14px;padding:8px 22px;border-radius:999px;background:#1a130b;color:#ddd0ba!important;font-weight:800}
.block-count:empty{display:none}


.block-card { max-width:620px !important; margin-inline:auto; } .block-card::before,.block-card::after { display:none !important; }

.block-card .block-count { color:#ddd0ba !important; -webkit-text-fill-color:#ddd0ba !important; }

/* ===== temporary-block page v2 ===== */
.block-body { background:#0a0806; }
.block-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; max-width:none !important; }
.block-panel { width:min(560px,100%); text-align:center; padding:clamp(32px,7vw,54px) clamp(24px,6vw,48px); border-radius:40px; background:#1b1610; border:1px solid #c7a47d33; box-shadow:0 18px 0 -8px #000a, 0 40px 80px #000c; position:relative; overflow:hidden; }
.block-panel::before { content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,#6b4f36,#e8dcc8,#a9876a); }
.block-lock { width:92px; height:92px; margin:6px auto 22px; display:grid; place-items:center; border-radius:30px; transform:rotate(-8deg); color:#1a130b; background:linear-gradient(135deg,#ddd0ba,#a9876a 60%,#6b4f36); box-shadow:0 10px 0 -2px #0009; }
.block-panel h1 { font-size:clamp(1.7rem,6vw,2.3rem) !important; margin:0 0 10px; color:#f4ecdc !important; -webkit-text-fill-color:#f4ecdc !important; background:none !important; white-space:nowrap; line-height:1.3; }
.block-text { color:#cdbfa6; margin:0 0 20px; }
.block-count { display:inline-block; margin:0 0 18px; padding:9px 24px; border-radius:999px; background:#cbb08a; color:#1a130b !important; -webkit-text-fill-color:#1a130b !important; font-weight:800; box-shadow:0 5px 0 #5a4028; }
.block-count:empty { display:none; }
.block-bar { height:8px; border-radius:4px; background:#ffffff14; overflow:hidden; margin:2px 0 6px; }
.block-bar i { display:block; height:100%; width:100%; transform-origin:right center; background:linear-gradient(90deg,#a9876a,#e8dcc8); animation:blockbar 60s linear forwards; }
@keyframes blockbar { to { transform:scaleX(0); } }
.block-brand { margin-top:26px; font:800 .95rem Syne,sans-serif; color:#a89570; letter-spacing:.04em; }
.block-panel .btn[hidden] { display:none !important; }
@media (max-width:400px) { .block-panel h1 { white-space:normal; } }

/* Unified lightweight motion: one transition per surface, no repeated card entrances. */
.nav { backdrop-filter:none !important; }
.btn { transition:background-color 140ms ease-out,color 140ms ease-out,border-color 140ms ease-out,transform 140ms ease-out !important; }
.btn:hover { transform:translateY(-1px) !important;filter:none !important; }
.btn:active { transform:translateY(0) scale(.985) !important; }
.features article,.member-card,.server-card,.rank-card,#log-list article { transition:border-color 160ms ease-out,transform 160ms ease-out !important; }
.features article:hover,.member-card:hover,.server-card:hover,#log-list article:hover { transform:translateY(-2px) !important;box-shadow:0 10px 22px #0004 !important; }
.cf-marker { transition:transform 200ms cubic-bezier(.2,.7,.2,1),width 200ms cubic-bezier(.2,.7,.2,1),height 200ms ease-out !important;box-shadow:none !important; }
.rise { opacity:1;transform:none;transition:none; }
.scene { transform:translateY(6px);transition:opacity 180ms ease-out,transform 180ms ease-out; }
.scene.on { transform:none; }
.scene.on s,.scene.on .m-top b,.scene.on .sw::after,.scene.on .bar b { animation:none; }
.tour-stage::before { top:0;transition:none; }
.tour-steps li { transition:opacity 180ms ease-out; }
#loader.done { transition:opacity 180ms ease-out; }
@media(prefers-reduced-motion:no-preference) {
 .nav .tab-label { view-transition-name:none !important; }
 ::view-transition-group(root) { animation:none; }
 ::view-transition-old(root) { display:block;opacity:1;animation:none; }
 ::view-transition-new(root) { animation:page-fade-in 180ms ease-out both;mix-blend-mode:normal; }
 ::view-transition-group(active-tab) { animation-duration:200ms;animation-timing-function:cubic-bezier(.2,.7,.2,1); }
}
@media(prefers-reduced-motion:reduce) { .btn,.cf-marker,.scene,.tour-steps li { transition:none !important; } }

/* The navbar stays opaque while only page content cross-fades. */
@media(prefers-reduced-motion:no-preference){
 .nav { view-transition-name:site-nav; }
 ::view-transition-group(site-nav){animation:none;z-index:10;}
 ::view-transition-old(site-nav){display:none;}
 ::view-transition-new(site-nav){animation:none;opacity:1;mix-blend-mode:normal;}
 ::view-transition-group(active-tab){z-index:11;animation-duration:220ms;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
 ::view-transition-old(active-tab){display:none;}
 ::view-transition-new(active-tab){animation:none;opacity:1;}
}

/* Keep every nav label above the independently moving highlight snapshot. */
@media(prefers-reduced-motion:no-preference){
.nav .tabs a[href="/"] .tab-label{view-transition-name:nav-home !important;}
.nav .tabs a[href="/voice"] .tab-label{view-transition-name:nav-voice !important;}
.nav .tabs a[href="/servers"] .tab-label{view-transition-name:nav-servers !important;}
.nav .tabs a[href="/role-logs"] .tab-label{view-transition-name:nav-roles !important;}
.nav .tabs a[href="/members"] .tab-label{view-transition-name:nav-members !important;}
::view-transition-group(nav-home),::view-transition-group(nav-voice),::view-transition-group(nav-servers),::view-transition-group(nav-roles),::view-transition-group(nav-members){z-index:12;animation:none;}
::view-transition-old(nav-home),::view-transition-old(nav-voice),::view-transition-old(nav-servers),::view-transition-old(nav-roles),::view-transition-old(nav-members){display:none;}
::view-transition-new(nav-home),::view-transition-new(nav-voice),::view-transition-new(nav-servers),::view-transition-new(nav-roles),::view-transition-new(nav-members){animation:none;opacity:1;mix-blend-mode:normal;}
}

.server-category-picker{display:flex;align-items:center;gap:14px;margin-block:20px;font-size:1.05rem}.server-category-picker select{font:inherit;color:#f8f0e3;background:#211a12;border:1px solid #c7a47d80;border-radius:14px;padding:10px 16px;min-width:190px;}

/* Server identity is readable before its counters. */
.server-icon{width:88px !important;height:88px !important;flex:none;object-fit:cover;border-radius:22px !important;}
.rank-heading img,.voice-page .rank-heading img{width:92px !important;height:92px !important;flex:none;object-fit:cover;}
.nav .brand img{width:40px;height:40px;border-radius:12px;object-fit:cover;}
.server-card h3,.rank-heading h3{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.35;}
@media(max-width:760px){
 html{scrollbar-gutter:auto;}
 body{padding:10px !important;padding-bottom:max(16px,env(safe-area-inset-bottom)) !important;overflow-x:clip;}
 main,nav,footer{width:100%;min-width:0;}
 .nav{display:grid !important;grid-template-columns:minmax(0,1fr) auto;gap:12px !important;padding:12px !important;top:6px !important;margin-top:0 !important;border-radius:22px !important;box-shadow:0 5px 16px #0005 !important;}
 .nav .brand{font-size:1rem !important;min-width:0;gap:8px;}
 .nav .brand img{width:34px;height:34px;}
 .nav .nav-account{font-size:.75rem !important;padding:9px 11px !important;max-width:155px;overflow:hidden;text-overflow:ellipsis;}
 .nav .tabs{grid-column:1 / -1;grid-row:2;display:flex !important;flex-wrap:nowrap !important;gap:3px !important;overflow-x:auto;scrollbar-width:none;width:100%;padding:3px 0;}
 .nav .tabs::-webkit-scrollbar{display:none;}
 .nav .tabs a{flex:1 0 auto;min-height:42px;padding:10px 9px !important;font-size:.8rem !important;text-align:center;white-space:nowrap;}
 .hero{padding:32px 18px 100px !important;margin-top:18px !important;min-height:0 !important;border-radius:26px !important;}
 .hero h1{font-size:clamp(2.15rem,10vw,4rem) !important;line-height:1.15 !important;letter-spacing:-.04em;}
 .hero p{font-size:1rem !important;line-height:1.8 !important;margin:18px auto !important;max-width:100%;}
 .hero .actions{justify-content:center;gap:10px;}
 .hero .btn{padding:11px 14px !important;font-size:.85rem;min-height:44px;}
 .glass,.features article,.top-rail,.profile{border-radius:24px !important;box-shadow:0 5px 16px #0003 !important;}
 main>section{margin-top:36px !important;}
 .section-heading{align-items:flex-start;gap:12px;flex-wrap:wrap;}
 .section-heading .btn{min-height:42px;padding:10px 12px !important;}
 .features{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:14px !important;}
 .features>article{grid-column:auto !important;display:block !important;padding:22px !important;}
 .tour-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
 .tour-stage{position:relative !important;top:auto !important;min-height:310px !important;order:0;}
 .tour-steps{order:1;}
 .tour-steps li{min-height:190px;padding-block:22px;opacity:.7;}
 #home-groups,#home-servers,#latest,#log-list,#featured,#server-list,.voice-page .grid,.top-main .grid{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;}
 .top-layout{grid-template-columns:minmax(0,1fr) !important;gap:18px;}
 .top-rail{position:static !important;padding:12px !important;gap:12px;}
 .rail-filters{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;overflow-x:auto;padding:3px 0 9px !important;gap:8px !important;}
 .rail-filters .btn{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 14px !important;}
 .category-filters:not(.rail-filters){display:flex;flex-wrap:wrap;gap:8px !important;}
 .category-filters .btn{min-height:44px;padding:10px 14px !important;font-size:.85rem;}
 .voice-page .toolbar{gap:12px;margin-bottom:18px;}
 .rank-card,.server-card,#log-list article,.member-card{padding:20px !important;min-width:0;}
 .rank-heading,.voice-page .rank-heading{gap:12px;align-items:center;}
 .rank-heading img,.voice-page .rank-heading img{width:80px !important;height:80px !important;}
 .rank-heading h3{font-size:1.25rem !important;overflow-wrap:anywhere;}
 .server-icon{width:76px !important;height:76px !important;}
 .server-banner{width:100%;height:auto !important;max-height:260px;aspect-ratio:16/9;object-fit:cover;border-radius:18px;}
 .voice-page .metrics,.metrics{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
 .voice-page .metric{padding:12px 8px;}
 .voice-page .metric bdi{font-size:1.5rem;}
 .role-log-details{grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.85rem;}
 .role-log-details dd{min-width:0;word-break:break-word;}
 .voice-settings,.voice-page .voice-settings{padding:18px !important;}
 .settings-grid{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:14px;}
 .settings-grid label{display:grid;gap:8px;}
 select,input,textarea{font-size:16px !important;max-width:100%;min-height:44px;}
 .voice-page select,.settings-grid select,.settings-grid input{width:100%;margin-inline:0;max-width:100% !important;}
 .server-category-picker{display:grid;gap:9px;}
 .server-category-picker select{width:100%;}
 .actions{gap:10px;flex-wrap:wrap;}
 .actions button,.actions .btn{min-height:44px;}
 .role-log-pagination{justify-content:center;padding-inline:0;}
 footer{margin-top:40px !important;padding:22px 10px !important;text-align:center;}
}
@media(max-width:380px){.nav .tabs a{padding-inline:7px !important;font-size:.72rem !important;}.nav .brand{font-size:.9rem !important;}.hero h1{font-size:2rem !important;}}

@media(max-width:760px){.hero:not(:has(.scroll-hint)){padding-bottom:32px !important;}}

@media(max-width:760px){
 .nav .tabs{gap:0 !important;overflow-x:hidden;}
 .nav .tabs a{flex:1 1 0 !important;min-width:0 !important;padding:10px 3px !important;font-size:.73rem !important;}
 body:has(#tour) .hero h1,body:not(:has(#tour)) .hero h1{font-size:clamp(1.35rem,7.2vw,3.1rem) !important;line-height:1.2 !important;max-width:none !important;width:100%;white-space:nowrap;}
 #home-groups:has(> :nth-child(2):last-child),#home-servers:has(> :nth-child(2):last-child),#latest:has(> :nth-child(2):last-child),#log-list:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,1fr) !important;}
}
@media(max-width:380px){.nav .tabs a{font-size:.66rem !important;padding-inline:2px !important;}}