:root {
  color-scheme: dark;
  --background: oklch(0.16 0.008 285);
  --foreground: oklch(0.97 0.004 285);
  --card: oklch(0.205 0.009 285);
  --primary: #8237d7;
  --primary-foreground: oklch(0.18 0.024 300);
  --secondary: oklch(0.24 0.013 285);
  --accent: oklch(0.29 0.02 285);
  --muted-foreground: oklch(0.68 0.013 285);
  --border: #323239;
  --highlight: oklch(0.78 0.13 300);
  --lilac: oklch(0.86 0.064 296);
  --hero-ground: #110514;
  --coral: #be30c1;
  --ember: oklch(0.38 0.13 303);
  --stripe-gradient: linear-gradient(
    180deg,
    oklch(37.017% 0.10322 294.174),
    oklch(27.713% 0.10446 301.222)
  );
  --hero-shade: linear-gradient(90deg, var(--hero-ground) 1%, color-mix(in oklch, var(--hero-ground) 95%, transparent) 20%, color-mix(in oklch, var(--hero-ground) 60%, transparent) 43%, transparent 70%);
  --shadow-art: 0 8px 24px color-mix(in oklch, var(--background) 18%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;
  --background: #faf8fc;
  --foreground: #241a2b;
  --card: #ffffff;
  --primary: #67389c;
  --primary-foreground: #ffffff;
  --secondary: #f1edf5;
  --accent: #e8e0ef;
  --muted-foreground: #675c70;
  --border: #e1d8e8;
  --highlight: #7640ad;
  --lilac: #493152;
  --hero-ground: #9a69d3;
  --coral: #a52b9e;
  --ember: #763bb5;
  --stripe-gradient: linear-gradient(
    180deg,
    #632ba0,
    #501f83
  );
  --shadow-art: 0 8px 24px color-mix(in oklch, var(--foreground) 8%, transparent);
}

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;
  --primary-hover: var(--highlight);
}

/* defaults */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html { min-height: 100%; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--background); color: var(--foreground); font-family: var(--font-sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing: 0; margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; margin: 0; }
button { background: transparent; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--primary); color: var(--primary-foreground); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
main { display: block; flex: 1 0 auto; }
.site-width { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 92px; border-bottom: 1px solid var(--border); display: flex; align-items: center; position: relative; z-index: 20; background: var(--background); }
.site-announcement { border-bottom:1px solid color-mix(in oklch,var(--primary) 35%,var(--border)); background:color-mix(in oklch,var(--primary) 10%,var(--background)); }
.site-announcement .site-width { padding-block:12px; }
.site-announcement p { border-left:3px solid var(--primary); padding-left:12px; color:var(--foreground); font-size:13px; line-height:1.5; }
.brand-image { width: 155px; max-height: 54px; object-fit: contain; filter: brightness(0) invert(1); }
html[data-theme="light"] .brand-image,html[data-theme="light"] .footer img { filter: brightness(0); }
.theme-toggle { width:36px; height:40px; display:grid; place-items:center; flex:none; border-radius:6px; color:var(--muted-foreground); transition:background-color .2s,color .2s; }
.theme-toggle:hover { background:var(--accent); color:var(--foreground); }
.theme-toggle svg { width:19px; height:19px; }
.theme-toggle [data-theme-icon="moon"] { display:none; }
html[data-theme="light"] .theme-toggle [data-theme-icon="sun"] { display:none; }
html[data-theme="light"] .theme-toggle [data-theme-icon="moon"] { display:block; }
.nav-link { color: var(--muted-foreground); font-size: 14px; font-weight: 600; padding-block: 34px; transition: color .2s; }
.nav-link:hover,.nav-link.active { color: var(--foreground); }
.nav-link.active { position: relative; }
.nav-link.active::after { content:''; position: absolute; bottom: 0; height: 3px; left: 0; right: 0; background: var(--primary); }
.nav-link.nav-link-blue,.mobile-menu .nav-link-blue { color:#75baff; }
.nav-link.nav-link-blue:hover,.mobile-menu .nav-link-blue:hover { color:#add6ff; }
html[data-theme="light"] .nav-link.nav-link-blue,html[data-theme="light"] .mobile-menu .nav-link-blue { color:#3d5f9f; }
html[data-theme="light"] .nav-link.nav-link-blue:hover,html[data-theme="light"] .mobile-menu .nav-link-blue:hover { color:#29477f; }
.nav-link-blue.active::after { background:currentColor; }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 610px; background: var(--hero-ground); }
.hero-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: -3; }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--hero-shade); z-index: -2; }
.hero-content { padding-top: 62px; padding-bottom: 78px; position: relative; z-index: 2; }
.hero-copy { max-width: 560px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display:flex; align-items:center; gap:10px; }
.eyebrow-dot { width:6px; height:6px; background:var(--primary); }
.dalek-logo { width: 405px; height: 135px; object-fit: contain; object-position: left center; margin-top: 22px; margin-bottom: 10px; }
.hero h1 { font-size: 46px; line-height: 1.12; font-weight: 700; max-width: 560px; }
.hero-description { color: var(--lilac); font-size: 15px; line-height: 1.75; max-width: 405px; margin-top: 17px; }
.hero-stripe { position:absolute; width:64px; top:-20%; bottom:-20%; right:-7px; transform: rotate(21deg); background: var(--stripe-gradient); z-index:1; box-shadow: -19px 0 0 var(--ember); }
.hero-stripe.second { right:103px; width:13px; opacity:.85; box-shadow:none; }
.hero-bottom { position:absolute; bottom:0; left:0; right:0; height:6px; background:var(--stripe-gradient); }
.hex-decoration { position:absolute; right:50px; top:31px; width:64px; color:var(--highlight); transform:rotate(12deg); z-index:2; }
.hero-note { font-size:11px; color:var(--lilac); margin-top:17px; display:flex; align-items:center; gap:8px; }
.mod-status { position:absolute; bottom:37px; right:160px; z-index:3; font-size:11px; font-weight:600; display:flex; gap:10px; align-items:center; background:color-mix(in oklch,var(--background) 70%,transparent); border:1px solid color-mix(in oklch,var(--foreground) 20%,transparent); padding:10px 15px; backdrop-filter:blur(12px); }
.quick-links { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--border); }
.quick-link { display:flex; gap:18px; align-items:center; padding:16px 27px; border-right:1px solid var(--border); transition:background .2s; }
.quick-link:first-child { padding-left:0; } .quick-link:last-child { border:0; }
.quick-link:hover { background:var(--card); }
.quick-icon { width:42px; height:42px; display:grid; place-items:center; background:var(--secondary); color:var(--primary); border-radius:6px; flex-shrink:0; }
.quick-link:nth-child(2) .quick-icon { color:var(--lilac); }
.quick-link:nth-child(3) .quick-icon { color:var(--highlight); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:27px; }
.section-heading h2 { font-size:30px; font-weight:600; line-height:1.3; }
.content-section { padding-top:55px; padding-bottom:52px; }
.content-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:24px; }
.feature-card { overflow:hidden; border-radius:6px; background:var(--card); border:1px solid var(--border); transition:transform .2s,border-color .2s; }
.feature-card:hover { transform:translateY(-4px); border-color:var(--primary); }
.video-art { position:relative; aspect-ratio: 16 / 8.5; overflow:hidden; }
.video-art img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.video-art.fit-contain { background:var(--hero-ground); }
.video-art.fit-contain img { object-fit:contain; padding:20px; }
.feature-card:hover .video-art img { transform:scale(1.025); }
.play-control { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:55px; width:55px; background:var(--foreground); color:var(--background); display:grid; place-items:center; border-radius:50%; box-shadow:var(--shadow-art); }
.site-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.site-tags-overlay { position:absolute; z-index:1; right:16px; bottom:15px; left:16px; max-width:calc(100% - 32px); margin:0; }
.site-tag { display:inline-flex; align-items:center; min-height:24px; max-width:100%; overflow:hidden; padding:6px 10px; border:1px solid color-mix(in oklch,var(--foreground) 18%,transparent); border-radius:4px; background:color-mix(in oklch,var(--background) 88%,transparent); color:var(--foreground); backdrop-filter:blur(10px); font-size:10px; font-weight:700; letter-spacing:.6px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.site-tag-primary { border-color:var(--primary); background:var(--primary); color:var(--primary-foreground); }
.site-tag-success { border-color:color-mix(in oklch, #54d68b 55%, var(--border)); background:color-mix(in oklch, #54d68b 16%, var(--card)); color:#8af0b1; }
html[data-theme="light"] .site-tag-success { color:#176b3b; }
.site-tag-warning { border-color:color-mix(in oklch, var(--highlight) 55%, var(--border)); background:color-mix(in oklch, var(--highlight) 15%, var(--card)); color:var(--highlight); }
.site-tag-info { border-color:color-mix(in oklch, var(--lilac) 55%, var(--border)); background:color-mix(in oklch, var(--lilac) 15%, var(--card)); color:var(--lilac); }
.site-tag-sale { border-color:var(--coral); background:var(--coral); color:var(--primary-foreground); }
.community-art { position:relative; overflow:hidden; min-height:100%; padding:31px; background:linear-gradient(155deg,#4b0088 0%,#5c117f 55%,#782477 100%); color:#f4eafa; display:flex; flex-direction:column; justify-content:flex-end; }
.community-art::before { content:''; position:absolute; inset:-50% -10%; background:repeating-linear-gradient(90deg, transparent 0 75px,#32004f 75px 149px); transform:rotate(20deg); opacity:.28; }
.community-art > :not(.community-symbol) { position:relative; }
.community-art h3 { font-size:30px; line-height:1.2; font-weight:700; max-width:280px; }
.community-art p { max-width:285px; font-size:14px; line-height:1.6; margin-top:12px; color:#ddc6e8; }
.community-symbol { position:absolute; width:108px; right:22px; top:18px; color:var(--highlight); opacity:.42; }
.community-kicker { font-size:10px; letter-spacing:2px; font-weight:800; margin-bottom:17px; }
.mods-section { border-top:1px solid var(--border); padding:46px 0 60px; }
.mods-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mod-art { aspect-ratio:16/8; width:100%; object-fit:cover; background:var(--secondary); }
.footer { flex-shrink:0; margin-top:auto; border-top:1px solid var(--border); padding:28px 0; }
.mobile-menu { position:absolute; left:0; right:0; top:76px; background:var(--background); padding:20px 24px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:20px; }
.mobile-menu form { margin:0; }
.mobile-menu-action { width:100%; display:flex; align-items:center; justify-content:space-between; color:var(--foreground); text-align:left; font-size:14px; line-height:20px; }
@media(min-width:1500px) { .hero { min-height:550px; } }
@media(max-width:900px) { .site-width { width:calc(100% - 48px); } .desktop-nav { display:none; } .site-header { height:76px; } .hero-world { object-position:65% center; } .hero-copy { max-width:450px; } .hero-stripe { right:-22px; } .hero-stripe.second { display:none; } .quick-link { padding:24px 15px; gap:12px; } .quick-link p { font-size:11px; } .content-grid { grid-template-columns:1.3fr 1fr; } .community-art { padding:24px; } .community-art h3 { font-size:26px; } }
@media(max-width:600px) { .site-width { width:calc(100% - 40px); } .brand-image { width:127px; } .hero { min-height:660px; } .hero-content { padding-bottom:145px; } .hero-world { object-position:67% center; opacity:.48; } .hero::after { background:linear-gradient(90deg,var(--hero-ground),color-mix(in oklch,var(--hero-ground) 48%,transparent)); } .hero h1 { font-size:36px; max-width:330px; } .dalek-logo { width:290px; height:104px; } .hero-copy { max-width:100%; } .hero-description { max-width:290px; font-size:14px; } .hero-stripe { width:35px; right:-55px; } .hex-decoration { right:15px; width:44px; top:22px; } .mod-status { bottom:33px; left:20px; right:auto; } .quick-links { grid-template-columns:1fr; } .quick-link,.quick-link:first-child { padding:19px 0; border-right:0; border-bottom:1px solid var(--border); } .quick-link p { font-size:13px; } .quick-link > svg { margin-left:auto; } .content-section { padding-top:36px; padding-bottom:35px; } .section-heading h2 { font-size:25px; } .content-grid,.mods-grid { grid-template-columns:1fr; } .community-art { min-height:310px; } .community-symbol { width:88px; right:16px; top:12px; } .footer-inner { flex-wrap:wrap; gap:20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
.hero-graphic { position:absolute; top:0; right:0; bottom:0; width:72%; background:repeating-linear-gradient(111deg, transparent 0 130px,color-mix(in oklch,var(--lilac) 8%,transparent) 130px 235px); -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 58%); mask-image:linear-gradient(to right,transparent 0%,#000 58%); z-index:-2; }
.hero-characters { position:absolute; width: min(54%, 750px); height:83%; right:2.5%; bottom:20px; object-fit:contain; object-position:bottom; z-index:0; }
.mod-tardim-art { position:relative; }
.tardim-wordmark { position:absolute; width:75%; height:75%; object-fit:contain; left:12.5%; top:12.5%; }
.footer img { filter: brightness(0) invert(1); }
.legal-page { max-width: 920px; color: var(--muted-foreground); font-size: 14px; line-height: 1.8; }
.legal-page > p:first-child { margin-top: 0; }
.legal-page p + p { margin-top: 14px; }
.legal-page a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklch,var(--primary) 45%,transparent); text-underline-offset: 3px; }
.legal-page a:hover { text-decoration-color: currentColor; }
.legal-page strong { color: var(--foreground); font-weight: 600; }
.legal-updated { margin-bottom: 20px; color: var(--muted-foreground); font-size: 12px; }
.legal-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.legal-section h2 { margin-bottom: 12px; color: var(--foreground); font-size: 22px; font-weight: 600; line-height: 1.35; }
.legal-section ul { display: grid; gap: 10px; margin-top: 12px; padding-left: 23px; list-style: disc; }
.legal-section li { padding-left: 3px; }
.legal-page code { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }
.legal-related { margin-top: 35px; padding: 16px 18px; border-left: 3px solid var(--primary); background: var(--card); }
@media(max-width:600px) { .legal-page { font-size: 13px; } .legal-section { margin-top: 28px; padding-top: 22px; } .legal-section h2 { font-size: 19px; } }
@media(max-width:900px) { .hero-characters { width:57%; right:-12%; opacity:.75; } }
@media(max-width:600px) { .hero-characters { width:78%; height:45%; right:-20%; bottom:10px; opacity:.3; z-index:-1; } .hero-graphic { width:100%; } }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.storefront-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.storefront-card-content { padding:26px; }
.storefront-card-content h3 { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:24px; font-weight:600; }
.storefront-detail > .back-link { margin-bottom:34px; }
.store-section + .store-section { margin-top:54px; padding-top:42px; border-top:1px solid var(--border); }
.product-card { display:flex; flex-direction:column; }
.product-card-image,.product-card-placeholder { aspect-ratio:16/9; overflow:hidden; background:var(--secondary); }
.product-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.product-card:hover .product-card-image img { transform:scale(1.025); }
.product-card-placeholder,.product-detail-placeholder { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--muted-foreground); }
.product-card-content { flex:1; padding:20px; }
.product-card-content h3 { font-size:21px; font-weight:600; }
.product-card-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; color:var(--primary); font-size:14px; font-weight:700; }
.empty-state { padding:30px 20px; margin-top:24px; text-align:center; border:1px dashed var(--border); color:var(--muted-foreground); }
.product-detail { max-width:1100px; }
.product-detail-header { padding-top:55px; }
.product-detail-content { padding-top:0; }
.product-detail .back-link { display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; color:var(--muted-foreground); }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; }
.product-detail-grid-no-art { grid-template-columns:1fr; }
.product-detail-copy h1 { font-size:42px; font-weight:700; line-height:1.15; }
.product-summary { color:var(--muted-foreground); line-height:1.75; margin-top:18px; }
.product-price { font-size:20px; font-weight:700; color:var(--primary); margin-top:20px; }
.product-purchase-row { display:flex; align-items:center; justify-content:flex-start; gap:24px; margin-top:22px; }
.product-purchase-row .product-price { margin:0; }
.product-purchase-row > p:last-child { margin:0; }
.product-detail-image,.product-detail-placeholder { width:100%; min-height:280px; aspect-ratio:4/3; object-fit:contain; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:20px; }
.product-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.product-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:42px; padding:20px; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); }
.product-gallery img { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:12px; }
.product-markdown { margin-top:46px; }
@media(max-width:900px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-detail-grid { gap:28px; } }
@media(max-width:600px) { .product-grid,.storefront-grid,.product-detail-grid,.product-gallery { grid-template-columns:1fr; } .product-detail-copy h1 { font-size:34px; } .product-purchase-row { align-items:flex-start; flex-direction:column; gap:14px; } .product-detail-image,.product-detail-placeholder { min-height:220px; } }
@media(max-width:600px) { .hero { min-height:610px; } .hero-content { padding-bottom:100px; } .hero h1 { font-size:32px; max-width:350px; } .hero .eyebrow { max-width:280px; font-size:9px; line-height:1.7; letter-spacing:1.5px; } .hex-decoration { top:24px; width:35px; } .dalek-logo { margin-top:15px; } }
.page-intro { position:relative; overflow:hidden; background:var(--hero-ground); border-bottom:4px solid var(--primary); padding:48px 0 54px; }
.page-intro h1 { font-size:48px; font-weight:700; line-height:1.15; max-width:780px; position:relative; z-index:1; }
.page-intro p { color:var(--lilac); font-size:16px; line-height:1.7; margin-top:18px; max-width:640px; position:relative; z-index:1; }
.page-stripes { position:absolute; inset:0 0 0 auto; width:36%; background:linear-gradient(to right,var(--hero-ground) 0%,var(--hero-ground) 20%,transparent 100%),repeating-linear-gradient(112deg,transparent 0 50px,color-mix(in oklch,var(--primary) 25%,transparent) 50px 100px); }
.page-intro.has-image { isolation:isolate; display:flex; align-items:center; min-height:390px; padding:44px 0 62px; }
.page-intro.has-image > .site-width { position:relative; z-index:3; }
.page-intro-copy { min-width:0; }
.page-intro.has-image .page-intro-copy { max-width:min(42%,620px); }
.page-intro.has-image h1 { max-width:100%; }
.page-intro.has-image .page-intro-image { position:absolute; right:4%; bottom:0; z-index:2; width:min(54vw,750px); height:92%; object-fit:contain; object-position:right bottom; }
.page-intro.has-image .page-stripes { inset:0 0 0 auto; width:82%; z-index:1; background:linear-gradient(to right,var(--hero-ground) 0%,var(--hero-ground) 20%,transparent 100%),repeating-linear-gradient(111deg,transparent 0 130px,color-mix(in oklch,var(--lilac) 8%,transparent) 130px 235px); }
.page-intro.has-image::before { content:''; position:absolute; top:-20%; bottom:-20%; right:-7px; z-index:3; width:64px; transform:rotate(21deg); background:var(--stripe-gradient); box-shadow:-19px 0 0 var(--ember); }
.page-intro-hex { position:absolute; top:25px; right:50px; z-index:3; width:44px; color:var(--highlight); transform:rotate(12deg); }
@media(min-width:901px) { .page-intro.has-image .page-intro-image { opacity:.75; } }
.catalog-feature { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:65px; background:var(--hero-ground); padding:40px 55px; border-left:4px solid var(--primary); }
.catalog-feature > img { width:100%; height:285px; object-fit:contain; }
.catalog-feature h2,.community-feature h2,.support-band h2 { font-size:34px; font-weight:600; line-height:1.2; }
.catalog-feature p,.community-feature p { font-size:15px; line-height:1.8; color:var(--lilac); margin-top:18px; max-width:480px; }
.filter-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:30px 0; }
.search-box { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:6px; padding:10px 13px; color:var(--muted-foreground); background:var(--card); }
.search-box input { outline:none; background:transparent; width:160px; font-size:13px; color:var(--foreground); }
.search-box:focus-within { border-color:var(--primary); }
.catalog-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--secondary); }
.catalog-image img { width:100%; height:100%; object-fit:cover; }
.catalog-image.fit-contain { background:var(--hero-ground); }
.catalog-image.fit-contain img { object-fit:contain; padding:20px; }
.mod-image-placeholder { height:100%; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted-foreground); }
.empty-state { padding:60px 0; text-align:center; color:var(--muted-foreground); }
.detail-band { padding:32px 0 65px; background:var(--hero-ground); border-bottom:4px solid var(--primary); }
.back-link { display:inline-flex; gap:9px; align-items:center; color:var(--muted-foreground); font-size:13px; margin-bottom:30px; }
.back-link:hover { color:var(--primary); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; }
.detail-grid-no-art { grid-template-columns:1fr; }
.detail-band-banner { position:relative; isolation:isolate; overflow:hidden; }
.mod-detail-banner,.product-detail-banner { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.detail-band-banner::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,var(--hero-ground),transparent 65%),linear-gradient(90deg,color-mix(in oklch,var(--hero-ground) 98%,transparent),color-mix(in oklch,var(--hero-ground) 88%,transparent) 35%,color-mix(in oklch,var(--hero-ground) 30%,transparent)); }
.detail-band-banner > .site-width { position:relative; z-index:1; }
.detail-band-banner .detail-grid,.detail-band-banner .product-detail-grid { min-height:300px; }
.detail-band-banner .detail-grid > div,.detail-band-banner .product-detail-copy { max-width:620px; }
.detail-band-banner .detail-description,.detail-band-banner .product-summary,.detail-band-banner .back-link { color:var(--lilac); }
.detail-band-banner .back-link:hover { color:var(--primary); }
.detail-grid h1 { font-size:46px; font-weight:700; line-height:1.2; }
.detail-logo { width:min(100%,480px); }
.detail-description { font-size:16px; line-height:1.8; color:var(--muted-foreground); margin-top:24px; }
.detail-art { width:100%; height:340px; object-fit:cover; border-radius:6px; }
.detail-art.fit-contain { object-fit:contain; background:var(--hero-ground); padding:20px; }
.detail-daleks { height:auto; object-fit:contain; }
.mod-content-section { padding-top:32px; }
.mod-content-section > .feature-list + .mod-content-layout { margin-top:32px; }
.mod-content-layout { display:grid; gap:32px; align-items:start; }
.mod-content-layout-with-links { grid-template-columns:minmax(0,1fr) 260px; }
.mod-content-layout > .markdown-content { grid-column:1; grid-row:1; min-width:0; overflow-wrap:anywhere; }
.mod-content-layout > .markdown-content > :first-child { margin-top:0; }
.mod-official-links { display:grid; gap:20px; min-width:0; }
.mod-content-layout-with-links > .mod-official-links { grid-column:2; grid-row:1; }
.mod-links-box { padding:20px; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); }
.mod-links-box h2 { margin-bottom:14px; font-size:18px; font-weight:600; }
.mod-links-box ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mod-links-box a { display:flex; align-items:center; gap:10px; padding:12px; border-radius:5px; background:var(--secondary); font-size:14px; }
.mod-links-box a:hover { color:var(--primary); background:var(--accent); }
.mod-links-box a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.mod-links-box a > svg { flex-shrink:0; }
.mod-links-box a > span { flex:1; min-width:0; overflow-wrap:anywhere; }
@media(max-width:900px) { .mod-content-layout-with-links { grid-template-columns:1fr; } .mod-content-layout-with-links > .mod-official-links,.mod-content-layout > .markdown-content { grid-column:auto; grid-row:auto; } }
.mod-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; margin-top:42px; padding:20px; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); }
.mod-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--card); border:1px solid var(--border); border-radius:6px; }
.mod-gallery img.fit-contain { object-fit:contain; padding:12px; }
.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.feature-list > div { padding:25px 0; border-top:1px solid var(--border); }
.article-section { padding:38px 0 70px; }
.article-body { max-width:850px; margin-inline:auto; }
.article-body h1 { font-size:46px; font-weight:700; line-height:1.2; }
.article-lead { color:var(--muted-foreground); font-size:18px; line-height:1.7; margin-top:20px; margin-bottom:30px; }
.article-cover-wrap { position:relative; overflow:hidden; border-radius:6px; }
.article-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-cover.fit-contain { object-fit:contain; background:var(--hero-ground); padding:20px; }
.markdown-content { color:var(--muted-foreground); font-size:16px; line-height:1.8; }
.markdown-content .markdown-subtext { margin:0 0 18px; color:var(--muted-foreground); font-size:.82em; line-height:1.5; }
.markdown-content span.markdown-subtext { font-size:.82em; line-height:1.5; }
.markdown-content h2,.markdown-content h3,.markdown-content h4 { color:var(--foreground); font-weight:600; line-height:1.3; margin:28px 0 10px; }
.markdown-content h2 { font-size:28px; }.markdown-content h3 { font-size:22px; }.markdown-content h4 { font-size:18px; }
.markdown-content p { margin:0 0 18px; }.markdown-content ul,.markdown-content ol { margin:0 0 18px 24px; }.markdown-content li { padding-left:5px; }
.markdown-content blockquote { border-left:3px solid var(--primary); margin:20px 0; padding-left:18px; }.markdown-content hr { border:0; border-top:1px solid var(--border); margin:28px 0; }
.markdown-content p.markdown-continued-before-blockquote { margin-bottom:0; }.markdown-content blockquote.markdown-continued-after-paragraph { margin-top:0; }
.markdown-content a { color:var(--primary); text-decoration:underline; }.markdown-content code { color:var(--foreground); background:var(--secondary); padding:2px 5px; border-radius:4px; }.markdown-content img { max-width:100%; height:auto; border-radius:6px; margin:18px 0; }
.markdown-content a > img { display:inline-block; margin:0; vertical-align:middle; }
.markdown-content details { margin:18px 0; padding:16px 20px; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.markdown-content summary { color:var(--foreground); font-weight:600; cursor:pointer; }.markdown-content details[open] > summary { margin-bottom:16px; }.markdown-content details > :last-child { margin-bottom:0; }
.community-feature { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:45px; background:var(--stripe-gradient); color:var(--primary-foreground); }
.community-feature p { color:var(--primary-foreground); max-width:530px; }
.community-feature > svg { color:var(--highlight); flex-shrink:0; }
.support-band { display:flex; align-items:center; gap:30px; border-block:1px solid var(--border); padding:40px 0; }
.support-band > div { flex:1; }
.dmu-server-section { margin-top:58px; }
.dmu-server-page { padding-top:32px; }
.dmu-server-page > .online-wrapper + .online-wrapper { margin-top:12px; }
.dmu-server-page > .dmu-server-description { margin-top:28px; }
.dmu-server-section-lead { max-width:680px; margin-top:10px; color:var(--muted-foreground); font-size:15px; line-height:1.7; }
.dmu-server-description > :first-child { margin-top:0; }
.dmu-server-beta { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:56px; padding:30px 34px; border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:6px; background:var(--card); }
.dmu-server-beta > div { max-width:760px; }
.dmu-server-beta h2 { font-size:24px; font-weight:600; }
.dmu-server-beta p { margin-top:10px; color:var(--muted-foreground); font-size:14px; line-height:1.75; }
@media(max-width:900px) { .catalog-feature { gap:30px; padding:30px; } .detail-grid { gap:30px; } .support-band { flex-wrap:wrap; } .community-feature > svg { width:100px; } }
@media(max-width:900px) { .dmu-server-beta { align-items:flex-start; flex-direction:column; } }
@media(max-width:600px) { .page-intro { padding:28px 0; } .page-intro h1 { font-size:34px; } .page-intro p { font-size:14px; } .catalog-feature,.detail-grid { grid-template-columns:1fr; gap:26px; } .catalog-feature { padding:25px; } .catalog-feature > img { height:200px; } .catalog-feature h2,.community-feature h2,.support-band h2 { font-size:28px; } .filter-row { flex-wrap:wrap; } .search-box { width:100%; } .search-box input { width:100%; } .feature-list { grid-template-columns:1fr; gap:0; } .detail-art { height:250px; } .detail-grid h1,.article-body h1 { font-size:34px; } .community-feature { padding:28px; } .community-feature > svg { display:none; } .support-band { gap:20px; } .support-band > div { flex-basis:calc(100% - 70px); } .dmu-server-section { margin-top:42px; } .dmu-server-beta { margin-top:42px; padding:24px; } }
@media(max-width:900px) { .page-intro.has-image { min-height:340px; } .page-intro.has-image .page-intro-copy { max-width:42%; } .page-intro.has-image h1 { font-size:40px; } .page-intro.has-image .page-intro-image { right:2.5%; width:min(50vw,480px); } }
@media(max-width:760px) { .page-intro.has-image { display:flex; min-height:0; padding:28px 0; } .page-intro.has-image .page-intro-copy { max-width:none; } .page-intro.has-image .page-intro-image { position:absolute; inset:0 clamp(12px,3vw,22px) 0 auto; width:min(78%,380px); height:100%; object-fit:contain; object-position:right bottom; opacity:.38; mask-image:linear-gradient(90deg,transparent,#000 32%); pointer-events:none; } .page-intro.has-image .page-intro-hex { display:none; } .page-intro.has-image .page-stripes { width:100%; } }
@media(max-width:600px) { .detail-band-banner { padding:0 0 38px; } .detail-band-banner .mod-detail-banner,.detail-band-banner .product-detail-banner { position:relative; inset:auto; display:block; height:190px; } .detail-band-banner::after { height:190px; bottom:auto; background:linear-gradient(180deg,transparent 45%,var(--hero-ground)); } .detail-band-banner .back-link { margin-top:20px; } .detail-band-banner .detail-grid,.detail-band-banner .product-detail-grid { min-height:0; } }

/* utilities */
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-8 { gap: 32px; } .gap-9 { gap: 36px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-7 { margin-top: 28px; } .mt-14 { margin-top: 56px; } .mt-16 { margin-top: 64px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.my-5 { margin-block: 20px; } .my-8 { margin-block: 32px; } .mx-1 { margin-inline: 4px; }
.p-5 { padding: 20px; } .p-6 { padding: 24px; } .p-7 { padding: 28px; }
.px-5 { padding-inline: 20px; } .px-6 { padding-inline: 24px; }
.h-10 { height: 40px; } .h-11 { height: 44px; } .h-12 { height: 48px; } .w-24 { width: 96px; }
.text-xs { font-size: 12px; line-height: 16px; } .text-sm { font-size: 14px; line-height: 20px; } .text-lg { font-size: 18px; line-height: 28px; }
.text-xl { font-size: 20px; line-height: 28px; } .text-3xl { font-size: 30px; line-height: 36px; }
.font-normal { font-weight: 400; } .font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.625; }
.text-primary { color: var(--primary); } .text-lilac { color: var(--lilac); } .text-highlight { color: var(--highlight); } .text-muted-foreground { color: var(--muted-foreground); }
.hover-primary:hover { color: var(--primary); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; white-space: nowrap; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; transition: background-color .15s, color .15s; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn-hero { background: var(--primary); color: var(--primary-foreground); font-weight: 700; }
.btn-hero:hover { background: var(--highlight); }
.btn-glass { border: 1px solid var(--border); background: color-mix(in oklch, var(--background) 25%, transparent); color: var(--foreground); }
.btn-glass:hover { background: var(--secondary); }
.login-menu { position:relative; }
.login-chevron { width:7px; height:7px; margin:-3px 1px 0 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; font-size:0; flex:none; transform:rotate(45deg); transform-origin:center; transition:transform .2s; }
.login-menu:has([aria-expanded="true"]) .login-chevron { transform:rotate(225deg); }
.login-panel { position:absolute; z-index:30; top:calc(100% + 12px); right:0; width:310px; padding:18px; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); box-shadow:var(--shadow-art); }
.login-panel form { display:grid; gap:7px; }
.login-panel label { color:var(--muted-foreground); font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.login-error { margin:0 0 4px; color:var(--primary); font-size:12px; line-height:1.4; }
.login-panel input { width:100%; height:40px; border:1px solid var(--border); border-radius:5px; background:var(--secondary); padding:0 11px; outline:0; font-size:13px; }
.login-panel input:focus { border-color:var(--primary); }
.login-submit { width:100%; margin-top:7px; }
.login-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; color:var(--muted-foreground); font-size:12px; }
.login-links a { color:var(--primary); font-weight:600; }.login-links a:hover { color:var(--highlight); }
.account-controls { display:flex; align-items:center; gap:10px; }.notification-button,.profile-trigger { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--secondary); color:var(--foreground); }.notification-button:hover,.profile-trigger:hover { border-color:var(--primary); background:var(--accent); }.profile-trigger { overflow:hidden; padding:0; }.profile-trigger img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }.account-menu { position:relative; }.account-panel { position:absolute; z-index:30; top:calc(100% + 12px); right:0; width:250px; overflow:hidden; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); box-shadow:var(--shadow-art); }.account-summary { display:grid; gap:2px; padding:15px 16px; border-bottom:1px solid var(--border); }.account-summary strong { font-size:13px; }.account-summary span { color:var(--muted-foreground); font-size:11px; }.account-menu-link { width:100%; display:block; border-bottom:1px solid var(--border); padding:12px 16px; background:transparent; color:var(--foreground); text-align:left; font-size:13px; font-weight:600; }.account-menu-link:last-child { border-bottom:0; }.account-menu-link:not(:disabled):hover { background:var(--secondary); color:var(--primary); }.account-menu-link:disabled { cursor:default; color:var(--muted-foreground); }
.notifications-menu { position:relative; }
.notification-button { position:relative; cursor:pointer; }
.notification-count { position:absolute; top:-5px; right:-6px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--background); border-radius:999px; background:var(--primary); color:var(--primary-foreground); font-size:9px; font-weight:700; line-height:1; }
.notification-count[hidden] { display:none; }
.notifications-panel { position:absolute; z-index:40; top:calc(100% + 12px); right:-52px; width:min(380px,calc(100vw - 24px)); overflow:hidden; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:7px; background:var(--card); box-shadow:var(--shadow-art); }
.notifications-panel[hidden] { display:none !important; }
.notifications-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px 13px; border-bottom:1px solid var(--border); }
.notifications-header h2 { font-size:15px; font-weight:700; }
.notifications-header p { margin-top:2px; color:var(--muted-foreground); font-size:11px; }
.notifications-mark-all { flex:0 0 auto; padding:6px 8px; border:1px solid var(--border); border-radius:4px; background:var(--secondary); color:var(--foreground); cursor:pointer; font-size:10px; font-weight:600; }
.notifications-mark-all:hover { border-color:var(--primary); color:var(--primary); }
.notifications-list { max-height:min(440px,65vh); overflow-y:auto; }
.notifications-empty { padding:24px 18px; color:var(--muted-foreground); font-size:12px; text-align:center; }
.notifications-item { position:relative; display:grid; gap:5px; padding:14px 16px 14px 35px; border-bottom:1px solid var(--border); color:var(--foreground); }
.notifications-item:where(button) { width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; font:inherit; text-align:left; cursor:pointer; }
.notifications-item:last-child { border-bottom:0; }
.notifications-item:hover { background:var(--secondary); }
.notifications-item::before { content:''; position:absolute; top:20px; left:16px; width:7px; height:7px; border-radius:50%; background:transparent; }
.notifications-item.is-unread { background:color-mix(in oklch,var(--primary) 5%,var(--card)); }
.notifications-item.is-unread::before { background:var(--primary); }
.notifications-item strong { font-size:12px; font-weight:700; }
.notifications-item span { color:var(--muted-foreground); font-size:11px; line-height:1.45; }
.notifications-item.notification-no-title > span:first-of-type { color:var(--foreground); font-size:13px; line-height:1.5; }
.notifications-item time { color:var(--muted-foreground); font-size:10px; }
.notification-toasts { position:fixed; z-index:100; right:22px; bottom:22px; display:grid; gap:10px; width:min(360px,calc(100vw - 32px)); pointer-events:none; }
.notification-toast { position:relative; padding:14px 42px 14px 16px; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:6px; background:var(--card); box-shadow:var(--shadow-art); pointer-events:auto; animation:notification-toast-in .2s ease-out; }
.notification-toast.notification-popup { border-left-width:5px; box-shadow:0 10px 36px color-mix(in oklch,var(--foreground) 18%,transparent),var(--shadow-art); }
.notification-toast-link { display:grid; gap:4px; color:var(--foreground); }
.notification-toast-link strong { font-size:12px; }.notification-toast-link span { color:var(--muted-foreground); font-size:11px; line-height:1.4; }
.notification-toast-close { position:absolute; top:8px; right:8px; display:grid; width:26px; height:26px; place-items:center; border-radius:4px; background:transparent; color:var(--muted-foreground); cursor:pointer; }
.notification-toast-close:hover { background:var(--secondary); color:var(--foreground); }
@keyframes notification-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.btn-community { background: var(--background); color: var(--foreground); font-weight: 600; }
.btn-community:hover { background: var(--secondary); }
.btn-ghost:hover { background: var(--accent); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon svg { width: 20px; height: 20px; }
.menu-toggle { display: none; }

/* not found */
.not-found { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; text-align: center; }
.not-found > div { max-width: 448px; }
.not-found h1 { font-size: 72px; line-height: 1; font-weight: 700; }
.not-found h2 { margin-top: 16px; font-size: 20px; font-weight: 600; }
.not-found p { margin-top: 8px; font-size: 14px; color: var(--muted-foreground); }

/* search */
.search-box input[type="search"] { appearance: none; border: 0; }
.search-box input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-box { margin: 0; }
.catalog-feature > img { display: block; }
.btn[aria-pressed="false"] { color: var(--foreground); }

/* online */
.online-section { margin: 68px 0 8px; }
.online-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.online-wrapper { padding: 24px 28px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.online-wrapper h3 { font-size: 18px; font-weight: 600; }
.online-status { margin-top: 12px; font-size: 14px; color: var(--muted-foreground); }
.online-players { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.userWrap { width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: var(--secondary); image-rendering: pixelated; }
@media(max-width:900px) { .menu-toggle { display: inline-flex; } }
@media(max-width:900px) { .desktop-nav { display: none; } }
@media(max-width:900px) { .notifications-panel { right:-88px; } }
@media(max-width:600px) { .notifications-panel { right:-100px; } }
.public-profile-banner { position: relative; isolation: isolate; min-height: 300px; overflow: hidden; border-bottom:1px solid var(--border); background: var(--hero-ground); }
.public-profile-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 94% 8%, color-mix(in oklch,var(--primary) 12%,transparent), transparent 42%), repeating-linear-gradient(112deg, transparent 0 115px, color-mix(in oklch,var(--lilac) 5%,transparent) 115px 205px), linear-gradient(105deg,var(--hero-ground),var(--background)); }
.public-profile-banner-image { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
.public-profile-banner.has-profile-banner::before { inset:100%; z-index:0; background:linear-gradient(105deg,rgb(0 0 0 / 58%),rgb(0 0 0 / 38%)),repeating-linear-gradient(112deg,transparent 0 115px,rgb(255 255 255 / 5%) 115px 205px); }
.public-profile-banner-inner { position:relative; z-index:1; min-height:300px; display:flex; align-items:flex-end; gap:28px; padding-top:80px; padding-bottom:30px; }
.public-profile-banner.has-profile-banner,.public-profile-banner.has-profile-banner .public-profile-banner-inner { min-height:350px; }
.public-profile-avatar { width: 144px; height: 144px; flex: 0 0 auto; border: 4px solid var(--background); border-radius: 8px; object-fit: cover; image-rendering: pixelated; background: var(--secondary); box-shadow: var(--shadow-art); }
.public-profile-heading { min-width: 0; padding-bottom: 5px; }
.public-profile-heading h1 { font-size: 38px; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; text-shadow: 0 2px 12px var(--background); }
.public-profile-heading p { display: inline-block; margin-top: 10px; padding: 4px 10px; border: 1px solid color-mix(in oklch,var(--primary) 40%,transparent); border-radius: 4px; background: color-mix(in oklch,var(--background) 72%,transparent); color: var(--primary); font-size: 13px; font-weight: 600; }
.public-profile-tabs { border-top: 4px solid var(--primary); border-bottom: 1px solid var(--border); background: var(--card); }
.public-profile-tabs-inner { display:flex; overflow-x:auto; }
.public-profile-tab { flex:0 0 auto; padding:12px 18px; border-right:1px solid var(--border); color:var(--muted-foreground); font-size:13px; font-weight:600; white-space:nowrap; }
.public-profile-tab:hover,.public-profile-tab.is-active { background:var(--secondary); color:var(--foreground); }
.public-profile-tab.is-active { box-shadow:inset 0 -2px 0 var(--primary); }
[data-profile-panel][hidden] { display:none !important; }
.public-profile-content { min-height: 180px; display:flex; justify-content:flex-end; padding-top: 32px; padding-bottom: 72px; }
.public-profile-sidebar { width:min(100%,330px); align-self:flex-start; padding:22px 24px; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:6px; background:var(--card); }
.public-profile-sidebar-stack { display:grid; gap:16px; }
.public-profile-moderation { padding:16px; border:1px solid var(--border); border-radius:5px; background:var(--background); }
.public-profile-moderation h2 { margin:0 0 12px; font-size:17px; font-weight:600; }
.public-profile-moderation-facts { display:grid; gap:7px; margin:0; color:var(--muted-foreground); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.public-profile-moderation-facts > div { display:grid; gap:2px; }
.public-profile-moderation-facts dt { color:var(--foreground); font-weight:600; }
.public-profile-moderation-facts dd { margin:0; }
.public-profile-moderation-facts a { color:var(--primary); }
.public-profile-moderation-alts { display:grid; gap:3px; margin:4px 0; padding-left:16px; }
.public-profile-moderation-alts + small { color:var(--muted-foreground); font-size:10px; }
.public-profile-moderation-tools { display:grid; gap:6px; margin-top:16px; }
.public-profile-moderation-tools h3 { margin-bottom:2px; font-size:16px; font-weight:600; }
.public-profile-moderation-tools form { margin:0; }
.public-profile-moderation-ban { overflow:hidden; border:1px solid color-mix(in oklch,var(--destructive, #d55) 40%,var(--border)); border-radius:5px; background:color-mix(in oklch,var(--destructive, #d55) 6%,var(--background)); }
.public-profile-moderation-ban .public-profile-moderation-action.is-danger { border:0; border-radius:0; background:transparent; }
.public-profile-moderation-ban .public-profile-moderation-action.is-danger:hover:not(:disabled) { border-color:transparent; background:color-mix(in oklch,var(--destructive, #d55) 10%,var(--background)); }
.public-profile-moderation-action { width:100%; min-height:36px; padding:8px 10px; border:1px solid var(--border); border-radius:5px; background:color-mix(in oklch,var(--secondary) 55%,var(--background)); color:var(--foreground); text-align:left; font:inherit; font-size:12px; line-height:1.35; cursor:pointer; transition:border-color .15s,background-color .15s,color .15s; }
.public-profile-moderation-action:hover:not(:disabled) { border-color:var(--primary); background:var(--secondary); }
.public-profile-moderation-action:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.public-profile-moderation-action.is-danger { border-color:color-mix(in oklch,var(--destructive, #d55) 40%,var(--border)); background:color-mix(in oklch,var(--destructive, #d55) 8%,var(--background)); color:var(--destructive, #d55); }
.public-profile-moderation-action.is-danger:hover:not(:disabled) { border-color:var(--destructive, #d55); background:color-mix(in oklch,var(--destructive, #d55) 14%,var(--background)); }
.public-profile-moderation-action:disabled { background:color-mix(in oklch,var(--secondary) 30%,var(--background)); color:var(--muted-foreground); cursor:not-allowed; }
.public-profile-moderation-confirm { display:flex; align-items:center; gap:7px; margin:0 10px 9px; padding-top:7px; border-top:1px solid color-mix(in oklch,var(--destructive, #d55) 18%,var(--border)); color:var(--muted-foreground); font-size:11px; line-height:1.4; }
.public-profile-moderation-confirm input { margin-top:2px; accent-color:var(--destructive, #d55); }
.public-profile-moderation-notice { margin:0 0 12px; color:var(--muted-foreground); font-size:12px; line-height:1.45; }
.public-profile-moderation-notice.is-error { color:var(--destructive, #d55); }
.public-profile-facts { display: grid; gap: 14px; margin: 0; }
.public-profile-facts > div { padding-bottom:14px; border-bottom:1px solid var(--border); }
.public-profile-facts > div:last-child { padding-bottom:0; border-bottom:0; }
.public-profile-facts dt { color: var(--foreground); font-size: 16px; font-weight: 600; }
.public-profile-facts dd { margin: 6px 0 0; font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
@media(max-width:600px) { .public-profile-banner,.public-profile-banner-inner { min-height: 300px; } .public-profile-banner-inner { gap: 17px; padding-top: 64px; padding-bottom: 25px; } .public-profile-avatar { width: 88px; height: 88px; border-width: 3px; } .public-profile-heading h1 { font-size: 26px; } .public-profile-heading p { margin-top: 7px; font-size: 12px; } .public-profile-content { min-height: 150px; padding-top: 24px; padding-bottom: 48px; } .public-profile-sidebar { width:100%; padding:18px 20px; } }
.public-profile-inventory { padding-top:32px; padding-bottom:72px; }
.public-profile-inventory-heading { margin-bottom:16px; }
.public-profile-inventory-kicker { color:var(--muted-foreground); font-size:10px; font-weight:700; letter-spacing:1.4px; }
.public-profile-inventory-heading h2 { margin-top:4px; font-size:24px; font-weight:600; }
.public-profile-inventory-browser { display:grid; gap:12px; }
.public-profile-inventory-detail { display:flex; align-items:center; gap:14px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:7px; background:color-mix(in oklch,var(--lilac) 10%,var(--card)); }
.public-profile-inventory-detail-image { display:grid; width:128px; height:82px; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:5px; background:var(--secondary); color:var(--muted-foreground); }
.public-profile-inventory-detail-image.public-profile-badge-detail-image { width:128px; height:96px; }
.public-profile-inventory-detail-image img { width:100%; height:100%; object-fit:cover; }
.public-profile-inventory-detail-image img[data-image-fit="contain"] { object-fit:contain; }
.public-profile-inventory-detail-copy { min-width:0; }
.public-profile-inventory-detail-copy h3 { margin-top:3px; font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.public-profile-inventory-detail-copy > p { margin-top:4px; color:var(--muted-foreground); font-size:12px; }
.public-profile-inventory-detail-copy time { color:var(--foreground); }
.public-profile-inventory-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.public-profile-inventory-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 11px; border:1px solid var(--border); border-radius:5px; background:var(--secondary); color:var(--foreground); cursor:pointer; font-size:12px; font-weight:600; line-height:1.3; transition:border-color .15s,background-color .15s; }
.public-profile-inventory-action:hover:not(:disabled) { border-color:var(--primary); background:var(--accent); }
.public-profile-inventory-action.is-primary { border-color:var(--primary); background:var(--primary); color:var(--primary-foreground); }
.public-profile-inventory-action.is-primary:hover:not(:disabled) { background:var(--primary-hover); }
.public-profile-inventory-action:disabled { color:var(--muted-foreground); cursor:not-allowed; }
.public-profile-rank-form { margin:0; }
.public-profile-rank-notice { margin-bottom:16px; padding:11px 13px; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:4px; background:var(--card); font-size:13px; }
.public-profile-rank-notice.is-success { border-left-color:var(--success, #2a6); }
.public-profile-rank-notice.is-error { border-left-color:var(--destructive, #c44); }
.public-profile-inventory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; }
.public-profile-inventory-tile { display:grid; min-width:0; aspect-ratio:16/10; padding:0; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--card); cursor:pointer; transition:border-color .15s,transform .15s; }
.public-profile-inventory-tile:hover { transform:translateY(-2px); border-color:var(--primary); }
.public-profile-inventory-tile[aria-pressed="true"] { border:2px solid var(--primary); box-shadow:0 0 0 2px color-mix(in oklch,var(--primary) 17%,transparent); }
.public-profile-inventory-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.public-profile-inventory-tile[data-item-image-fit="contain"] img { object-fit:contain; }
.public-profile-inventory-tile-placeholder,.public-profile-badge-placeholder { display:grid; width:100%; height:100%; place-items:center; color:var(--muted-foreground); }
.public-profile-badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; }
.public-profile-badges { display:grid; gap:12px; }
.public-profile-badge { display:grid; aspect-ratio:4/3; min-width:0; padding:0; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:5px; background:var(--card); color:inherit; cursor:pointer; transition:border-color .15s,transform .15s; }
.public-profile-badge:hover { transform:translateY(-2px); border-color:var(--primary); }
.public-profile-badge:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.public-profile-badge[aria-pressed="true"] { border:2px solid var(--primary); box-shadow:0 0 0 2px color-mix(in oklch,var(--primary) 17%,transparent); }
.public-profile-badge img { display:block; width:100%; height:100%; object-fit:contain; }
.public-profile-badge-detail-image img { object-fit:contain; }
.public-profile-badge-placeholder { color:var(--primary); }
.public-profile-inventory-empty { padding:20px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--muted-foreground); font-size:14px; }
@media(max-width:600px) { .public-profile-inventory { padding-top:24px; padding-bottom:48px; } .public-profile-inventory-heading h2 { font-size:21px; } .public-profile-inventory-detail { align-items:flex-start; gap:10px; padding:10px; } .public-profile-inventory-detail-image { width:92px; height:68px; } .public-profile-inventory-detail-image.public-profile-badge-detail-image { width:92px; height:69px; } .public-profile-inventory-detail-copy h3 { font-size:15px; } .public-profile-inventory-grid { grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:7px; } .public-profile-badge-grid { grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:7px; } }

.home-feed-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(285px,.8fr); gap:24px; align-items:start; }
.home-main-column { min-width:0; }
.home-feed-layout .content-section { min-width:0; padding-top:42px; padding-bottom:30px; }
.home-sidebar { display:grid; gap:14px; min-width:0; padding-top:36px; }
.home-sidebar-card { min-width:0; padding:18px; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.home-sidebar-heading { margin-bottom:12px; }
.home-sidebar-heading h2 { margin-top:5px; font-size:20px; line-height:1.3; font-weight:600; }
.home-sidebar-card .twitter-tweet { max-width:100%; margin:0; }
.home-sidebar-card iframe.twitter-tweet-rendered { display:block; width:100% !important; max-width:100% !important; }
.home-x-empty { min-height:72px; color:var(--muted-foreground); font-size:13px; }
.home-sidebar-link { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); color:var(--muted-foreground); font-size:12px; font-weight:600; }
.home-sidebar-link:hover { color:var(--primary); }
.home-video-list { display:grid; gap:10px; }
.home-video-item { display:grid; grid-template-columns:minmax(88px,.85fr) minmax(0,1.15fr); align-items:center; gap:12px; min-width:0; }
.home-video-thumb { display:block; overflow:hidden; aspect-ratio:16/9; border-radius:4px; background:var(--secondary); }
.home-video-thumb img { width:100%; height:100%; object-fit:cover; }
.home-video-title { min-width:0; font-size:13px; line-height:1.4; font-weight:600; overflow-wrap:anywhere; }
.home-video-item:hover .home-video-title { color:var(--primary); }
.home-video-empty { color:var(--muted-foreground); font-size:13px; }
.beta-hub-banner { display:block; margin:16px 0 0; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--card); transition:border-color .15s; }
.beta-hub-banner:hover { border-color:var(--primary); }
.beta-hub-copy { display:grid; gap:4px; padding:13px 15px; }
.beta-hub-copy h3 { font-size:16px; font-weight:600; }
.beta-hub-copy p { color:var(--muted-foreground); font-size:12px; line-height:1.5; }
.beta-hub-banner img { display:block; width:100%; height:auto; }
@media(min-width:901px) { .home-feed-layout .content-section { padding-bottom:0; } }
.home-team-link { display:flex; align-items:center; gap:14px; margin:22px 0 36px; padding:12px 14px; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.home-team-link:hover { border-color:var(--primary); }
.home-team-avatars { display:flex; flex:0 0 auto; align-items:center; padding-left:8px; }
.home-team-avatars img { width:38px; height:38px; border:2px solid var(--card); border-radius:50%; background:var(--secondary); image-rendering:pixelated; }
.home-team-avatars img + img { margin-left:-10px; }
.home-team-copy { display:grid; min-width:0; gap:3px; }
.home-team-copy strong { font-size:13px; font-weight:600; }
.home-team-copy span { color:var(--muted-foreground); font-size:11px; }
.home-team-arrow { flex:0 0 auto; margin-left:auto; color:var(--muted-foreground); }
.home-team-link:hover .home-team-arrow { color:var(--primary); }
.home-presence-section { margin:0 0 36px; padding:18px; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.home-presence-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.home-presence-heading h2 { margin-top:4px; font-size:20px; font-weight:600; }
.home-presence-heading p { margin-top:4px; color:var(--muted-foreground); font-size:12px; line-height:1.5; }
.home-presence-window { flex:none; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted-foreground); font-size:10px; font-weight:600; white-space:nowrap; }
.home-presence-list { display:flex; flex-wrap:wrap; gap:14px; }
.home-presence-member { position:relative; display:block; width:48px; height:48px; flex:0 0 auto; border:2px solid var(--border); border-radius:50%; background:var(--secondary); image-rendering:pixelated; }
.home-presence-member:hover,.home-presence-member:focus-visible { border-color:var(--primary); }
.home-presence-member img { display:block; width:100%; height:100%; border-radius:inherit; image-rendering:pixelated; }
.home-presence-name { position:absolute; z-index:2; bottom:calc(100% + 8px); left:50%; visibility:hidden; padding:5px 8px; transform:translate(-50%,3px); border:1px solid var(--border); border-radius:4px; background:var(--foreground); color:var(--background); font-size:11px; font-weight:600; line-height:1.2; opacity:0; pointer-events:none; white-space:nowrap; transition:opacity .12s ease,transform .12s ease,visibility .12s ease; }
.home-presence-member:hover .home-presence-name,.home-presence-member:focus-visible .home-presence-name { visibility:visible; transform:translate(-50%,0); opacity:1; }
.home-presence-message { padding:12px; border:1px dashed var(--border); border-radius:5px; color:var(--muted-foreground); font-size:12px; }
.site-team-section { margin:16px auto 40px; }
.site-team-content { min-width:0; }
.site-team-section .section-heading { margin-bottom:16px; }
.site-team-section .section-heading h2 { font-size:24px; }
.site-team-group + .site-team-group { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.site-team-group-heading { margin-bottom:12px; font-size:16px; font-weight:600; }
.site-team-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.site-team-member { display:flex; align-items:center; gap:10px; min-width:0; padding:10px; border:1px solid var(--border); border-radius:6px; background:var(--card); }
.site-team-member:hover { border-color:var(--primary); }
.site-team-member > img { width:40px; height:40px; flex:0 0 auto; border-radius:4px; background:var(--secondary); image-rendering:pixelated; }
.site-team-member-copy { display:grid; min-width:0; gap:2px; }
.site-team-member-copy strong,.site-team-member-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-team-member-copy strong { font-size:13px; }
.site-team-member-copy span,.site-team-empty { color:var(--muted-foreground); font-size:11px; }
.site-team-member-arrow { flex:0 0 auto; margin-left:auto; color:var(--muted-foreground); }
.site-team-member:hover .site-team-member-arrow { color:var(--primary); }
.home-page .mods-section { margin-top:24px; }
@media(max-width:900px) { .home-feed-layout { grid-template-columns:1fr; } .home-main-column { display:contents; } .home-feed-layout .content-section { order:0; } .home-sidebar { order:1; grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:0; } .home-team-link { order:2; } .home-presence-section { order:3; } .site-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .home-sidebar,.site-team-grid { grid-template-columns:1fr; } .home-team-link { gap:8px; padding:10px; } .home-team-avatars { padding-left:6px; } .home-team-avatars img { width:24px; height:24px; } .home-team-avatars img + img { margin-left:-10px; } .home-team-copy span,.home-team-arrow { display:none; } .home-presence-section { padding:14px; } .home-presence-heading { gap:8px; } .home-presence-window { padding:3px 6px; font-size:9px; } }