/* NotToBla.me public product system */
:root {
  --p-bg: #070a0f;
  --p-panel: #0d131c;
  --p-panel-2: #111a25;
  --p-line: rgba(173, 194, 220, .14);
  --p-line-strong: rgba(173, 194, 220, .27);
  --p-ink: #f3f6fb;
  --p-copy: #a5b2c4;
  --p-dim: #6e7d92;
  --p-cyan: #6fe1ff;
  --p-blue: #4ea6ff;
  --p-lilac: #a99bff;
  --p-green: #68e1ab;
  --p-wrap: 1240px;
}

html { background: var(--p-bg); }
body { min-height: 100vh; margin: 0; padding: 0 0 3rem; color: var(--p-ink); background: radial-gradient(900px 480px at 8% -10%, rgba(78,166,255,.15), transparent 70%), radial-gradient(760px 480px at 95% 4%, rgba(169,155,255,.10), transparent 68%), var(--p-bg); }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 80%); }

.topbar { position: sticky; top: .75rem; z-index: 50; width: min(var(--p-wrap), calc(100% - 2rem)); min-height: 62px; margin: .75rem auto 0; padding: .5rem .65rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; border: 1px solid var(--p-line); border-radius: 15px; background: rgba(13,19,28,.82); box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.topbar-left, .topbar-center, .topbar-right { min-width: 0; }
.topbar-left { gap: .65rem; }
.profile-image { width: 36px; height: 36px; border: 1px solid var(--p-line-strong); }
.name { color: var(--p-ink); font-size: .92rem; letter-spacing: -.02em; }
.topbar-socials { gap: .25rem; }
.social-link { width: 28px; height: 28px; color: var(--p-dim); border: 1px solid transparent; background: transparent; }
.social-link:hover { color: var(--p-ink); border-color: var(--p-line); background: var(--p-panel-2); }
.nav-links { gap: .2rem; }
.nav-links a { padding: .55rem .72rem; color: var(--p-copy); border: 1px solid transparent; border-radius: 9px; font-size: .84rem; font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: var(--p-ink); border-color: rgba(111,225,255,.18); background: rgba(111,225,255,.08); }

.public-main { width: min(var(--p-wrap), calc(100% - 2rem)); margin: 0 auto; }
.public-hero { position: relative; min-height: 450px; margin-top: 1.25rem; padding: clamp(2.5rem, 7vw, 6.5rem) clamp(1.25rem, 7vw, 7rem); display: flex; align-items: center; overflow: hidden; border: 1px solid var(--p-line); border-radius: 28px; background: linear-gradient(135deg, rgba(17,26,37,.98), rgba(9,14,22,.94)); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.public-hero::after { position: absolute; right: -11rem; bottom: -14rem; width: 35rem; height: 35rem; border: 1px solid rgba(111,225,255,.14); border-radius: 50%; box-shadow: 0 0 0 42px rgba(111,225,255,.025), 0 0 0 84px rgba(111,225,255,.02); content: ""; }
.hero-copy { position: relative; z-index: 1; max-width: 720px; }
.public-hero .page-banner-inner { position: relative; z-index: 1; max-width: 760px; margin: 0; text-align: left; }
.hero-kicker, .eyebrow { margin: 0 0 .8rem; color: var(--p-cyan); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-heading { max-width: 800px; margin: 0; color: var(--p-ink); font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: .94; letter-spacing: -.07em; }
.hero-heading em { color: var(--p-cyan); font-style: normal; }
.hero-lede { max-width: 58ch; margin: 1.35rem 0 0; color: var(--p-copy); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.8rem; }
.public-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1rem; color: var(--p-ink); border: 1px solid var(--p-line-strong); border-radius: 10px; background: rgba(255,255,255,.035); font-weight: 800; text-decoration: none; }
.public-btn:hover { color: var(--p-ink); border-color: var(--p-cyan); background: rgba(111,225,255,.1); transform: translateY(-1px); }
.public-btn.primary { color: #04131b; border-color: var(--p-cyan); background: var(--p-cyan); }
.public-btn.primary:hover { color: #04131b; background: #b5f3ff; }
.hero-proof { position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: 2rem; z-index: 1; display: grid; gap: .55rem; width: 190px; }
.proof-line { display: flex; align-items: center; gap: .6rem; padding: .65rem .7rem; color: var(--p-copy); border: 1px solid var(--p-line); border-radius: 10px; background: rgba(7,10,15,.55); font-size: .75rem; }
.proof-line i { color: var(--p-green); }

.public-section { margin-top: 1.1rem; padding: clamp(1.4rem, 3.5vw, 2.4rem); border: 1px solid var(--p-line); border-radius: 20px; background: rgba(13,19,28,.74); }
.section-lead { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-lead h2 { margin: 0; color: var(--p-ink); font-size: clamp(1.45rem, 3vw, 2.2rem); letter-spacing: -.045em; }
.section-lead p { max-width: 58ch; margin: .45rem 0 0; color: var(--p-copy); }
.section-link { color: var(--p-cyan); font-size: .86rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.tool-card { min-height: 180px; padding: 1.2rem; border: 1px solid var(--p-line); border-radius: 15px; background: linear-gradient(145deg, rgba(17,26,37,.95), rgba(13,19,28,.75)); }
.tool-card:hover { border-color: rgba(111,225,255,.42); }
.tool-icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: var(--p-cyan); border: 1px solid rgba(111,225,255,.18); border-radius: 10px; background: rgba(111,225,255,.08); }
.tool-card h3 { margin: 1rem 0 .4rem; color: var(--p-ink); font-size: 1rem; }
.tool-card p { margin: 0; color: var(--p-copy); font-size: .88rem; line-height: 1.65; }
.split-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; }
.process-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--p-line); color: var(--p-copy); }
.process-list li:last-child { border-bottom: 0; }
.process-number { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--p-cyan); border: 1px solid rgba(111,225,255,.24); border-radius: 50%; font-size: .78rem; font-weight: 800; }
.process-list strong { display: block; color: var(--p-ink); font-size: .9rem; }
.process-list span { font-size: .84rem; }

.site-footer { width: min(var(--p-wrap), calc(100% - 2rem)); margin: 2.4rem auto 0; padding: 1.6rem 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--p-line); color: var(--p-dim); font-size: .8rem; }
.site-footer strong { color: var(--p-ink); }
.site-footer a { color: var(--p-copy); text-decoration: none; }
.site-footer a:hover { color: var(--p-cyan); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer .footer-inner { width: 100%; max-width: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Store */
.store-hero { min-height: 0; padding-block: 3rem; }
.store-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.store-search { display: flex; align-items: center; gap: .6rem; width: min(320px, 100%); padding: .7rem .8rem; color: var(--p-dim); border: 1px solid var(--p-line); border-radius: 10px; background: var(--p-panel); }
.store-search input { width: 100%; color: var(--p-ink); border: 0; outline: 0; background: transparent; font: inherit; }
.store-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.store-tab { padding: .48rem .75rem; color: var(--p-copy); border: 1px solid var(--p-line); border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 800; }
.store-tab.active, .store-tab:hover { color: var(--p-ink); border-color: var(--p-cyan); background: rgba(111,225,255,.09); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.catalog-card { overflow: hidden; border: 1px solid var(--p-line); border-radius: 15px; background: var(--p-panel); }
.catalog-card:hover { border-color: rgba(111,225,255,.4); }
.catalog-card .widget-media { min-height: 145px; background: linear-gradient(135deg, rgba(78,166,255,.12), rgba(169,155,255,.1)); }
.catalog-card .widget-body { padding: 1rem 1rem .2rem; }
.catalog-card .widget-actions { display: flex; align-items: stretch; gap: .55rem; padding: 1rem; }
.catalog-card .widget-actions .btn { min-width: 0; white-space: nowrap; }
.catalog-card .widget-name { color: var(--p-ink); }
.catalog-card .widget-desc, .catalog-card .updated { color: var(--p-copy); }
.catalog-card .price-pill { position: absolute; inset: auto .75rem .75rem auto; display: inline-flex; width: max-content; max-width: calc(100% - 1.5rem); height: auto; min-height: 0; align-items: center; justify-content: center; padding: .3rem .55rem; border-radius: 999px; color: var(--p-ink); background: rgba(7,10,15,.88); font-size: .75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; writing-mode: horizontal-tb; transform: none; }

@media (max-width: 900px) { .hero-proof { position: static; width: auto; margin-top: 2rem; grid-template-columns: repeat(3, 1fr); } .public-hero { display: block; } .split-section { grid-template-columns: 1fr; } .tool-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .topbar { position: relative; top: 0; grid-template-columns: 1fr auto; width: calc(100% - 1rem); } .topbar-center { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; justify-self: stretch; } .nav-links { justify-content: center; } .public-main, .site-footer { width: calc(100% - 1rem); } .public-hero { min-height: 0; padding: 2.3rem 1.2rem; border-radius: 20px; } .hero-heading { font-size: clamp(2.7rem, 12vw, 4.5rem); } .hero-proof { grid-template-columns: 1fr; } .section-lead, .store-controls, .site-footer, .site-footer .footer-inner { align-items: flex-start; flex-direction: column; } .tool-grid, .catalog-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* --------------------------------------------------------------------------
   Studio console direction
---------------------------------------------------------------------------- */
:root { --v-ink: #111311; --v-paper: #f2f0e9; --v-paper-dim: #b8b8ac; --v-line: rgba(242,240,233,.16); --v-orange: #ff7048; --v-orange-deep: #db4e2d; --v-mint: #b9d9c9; --v-black: #0a0b0a; }
html { background: var(--v-ink); }
body { color: var(--v-paper); background: var(--v-ink); font-family: "Space Grotesk", Inter, sans-serif; }
body::before { display: none; }
.topbar { position: relative; top: 0; width: 100%; min-height: 72px; margin: 0; padding: .75rem max(1rem, calc((100vw - 1280px) / 2)); border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: rgba(17,19,17,.96); box-shadow: none; backdrop-filter: none; }
.profile-image { width: 32px; height: 32px; border: 2px solid var(--v-orange); }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; color: var(--v-ink); background: var(--v-orange); font-size: .78rem; font-weight: 700; }
.name { color: var(--v-paper); font-family: "Space Grotesk", sans-serif; font-size: .9rem; font-weight: 700; }
.topbar-socials { display: none; }
.nav-links { padding: .2rem; border: 1px solid var(--v-line); border-radius: 999px; background: rgba(242,240,233,.035); }
.nav-links a { padding: .4rem .8rem; color: var(--v-paper-dim); border-radius: 999px; font-size: .78rem; font-weight: 600; }
.nav-links a i { display: none; }
.nav-links a.active, .nav-links a:hover { color: var(--v-ink); background: var(--v-paper); box-shadow: none; }
.site-account__button { color: var(--v-paper) !important; border-color: var(--v-line) !important; border-radius: 999px !important; background: transparent !important; font-family: "Space Grotesk", sans-serif !important; }
.site-account__button:hover { border-color: var(--v-orange) !important; background: rgba(255,112,72,.12) !important; }
.site-account__avatar { color: var(--v-ink); background: var(--v-paper); }
.site-account__panel { border-color: var(--v-line) !important; border-radius: 14px !important; background: #1a1d1a !important; }
.site-account__providers button:hover, .site-account__action:hover { border-color: var(--v-orange) !important; background: rgba(255,112,72,.13) !important; }

.home-layout, .public-main { width: min(1280px, calc(100% - 2rem)); }
.home-intro { min-height: 590px; margin: 0; padding: clamp(2rem, 7vw, 6rem) 0 4rem; display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); border-bottom: 1px solid var(--v-line); }
.intro-copy { max-width: 560px; }
.hero-kicker, .eyebrow { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .1em; }
.hero-heading { max-width: 600px; margin: 1rem 0 0; color: var(--v-paper); font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .93; letter-spacing: -.075em; font-weight: 600; }
.hero-heading em { color: var(--v-orange); }
.hero-lede { max-width: 46ch; margin-top: 1.35rem; color: var(--v-paper-dim); font-size: 1rem; line-height: 1.65; }
.hero-actions { margin-top: 1.7rem; }
.public-btn { min-height: 42px; padding: 0 .95rem; color: var(--v-paper); border: 1px solid var(--v-line); border-radius: 4px; background: transparent; font-size: .8rem; font-weight: 600; }
.public-btn.primary { color: var(--v-ink); border-color: var(--v-orange); background: var(--v-orange); }
.public-btn.primary:hover { color: var(--v-ink); background: #ff8e6d; }
.intro-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3.4rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .65rem; text-transform: uppercase; }
.intro-meta i { color: var(--v-orange); font-size: .4rem; vertical-align: middle; }
.hero-stage { padding: .55rem; border: 1px solid var(--v-line); background: #101a2b; box-shadow: 18px 18px 0 rgba(139,124,255,.18); transform: rotate(1.2deg); }
.stage-bar { min-height: 28px; display: flex; align-items: center; gap: .35rem; padding: 0 .55rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .04em; }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; background: #667065; }
.stage-dot:first-child { background: var(--v-orange); }
.stage-label { margin-left: .45rem; }
.stage-scene { min-height: 330px; position: relative; padding: 1.25rem; overflow: hidden; background: linear-gradient(145deg, #23352c, #111c18 58%, #2f201b); }
.scene-title { color: rgba(242,240,233,.32); font-size: clamp(1.4rem, 4vw, 3.1rem); font-weight: 600; letter-spacing: -.08em; }
.scene-chat { position: absolute; right: 1.2rem; bottom: 1.2rem; width: min(280px, 78%); display: grid; gap: .35rem; }
.scene-chat > div { display: grid; grid-template-columns: 18px auto 1fr; gap: .45rem; align-items: center; padding: .5rem .55rem; color: #d8ded7; border-left: 2px solid var(--v-orange); background: rgba(7,11,8,.72); font-size: .68rem; }
.scene-chat strong { color: var(--v-paper); font-size: .67rem; }.scene-chat span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.scene-chat b { font-size: .6rem; }.twitch-mark { color: #bbadff; }.youtube-mark { color: #ff8378; }.kick-mark { color: var(--v-mint); }
.scene-now { position: absolute; left: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem .5rem .5rem; color: var(--v-paper); background: rgba(7,11,8,.8); font-size: .72rem; }.scene-now small { display: block; color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .48rem; }.scene-now strong { display: block; font-size: .76rem; }.scene-art { width: 27px; height: 27px; display: grid; place-items: center; color: var(--v-ink); background: var(--v-orange); }.scene-now > i { margin-left: .7rem; color: var(--v-orange); }
.stage-caption { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem .2rem .1rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .6rem; }.stage-caption a { color: var(--v-orange); text-decoration: none; }
.editorial-row { display: grid; grid-template-columns: .55fr 1.2fr .75fr; gap: 2rem; padding: 5.5rem 0; border-bottom: 1px solid var(--v-line); }.editorial-index { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .65rem; }.editorial-index span { display: inline-block; width: 34px; margin: 0 .5rem; border-top: 1px solid var(--v-orange); vertical-align: middle; }.editorial-copy h2 { max-width: 600px; margin: 0; color: var(--v-paper); font-size: clamp(1.8rem, 3.5vw, 3.4rem); line-height: 1; letter-spacing: -.065em; font-weight: 500; }.editorial-copy p { max-width: 48ch; margin: 1rem 0 0; color: var(--v-paper-dim); line-height: 1.65; }.editorial-facts { display: grid; align-content: start; gap: .85rem; }.editorial-facts div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--v-line); color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .65rem; }.editorial-facts strong { color: var(--v-orange); font-weight: 400; }
.home-showcase { padding: 5.5rem 0; border-bottom: 1px solid var(--v-line); }.showcase-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.6rem; }.showcase-heading h2 { max-width: 600px; margin: .7rem 0 0; color: var(--v-paper); font-size: clamp(1.8rem, 3.8vw, 3.4rem); line-height: 1; letter-spacing: -.065em; font-weight: 500; }.section-link { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .68rem; text-decoration: none; }.showcase-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 1px; background: var(--v-line); }.showcase-tile { position: relative; min-height: 270px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: end; color: var(--v-paper); background: var(--v-ink); text-decoration: none; }.showcase-tile:hover { color: var(--v-paper); background: #191c19; }.showcase-tile-wide { min-height: 360px; background: linear-gradient(140deg, #23352c, #111311 58%); }.tile-number { position: absolute; top: 1.2rem; left: 1.2rem; color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .6rem; }.tile-glyph { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--v-orange); font-size: 1.4rem; }.showcase-tile h3 { margin: 0; font-size: 1.25rem; font-weight: 500; }.showcase-tile p { max-width: 30ch; margin: .5rem 0 0; color: var(--v-paper-dim); font-size: .8rem; line-height: 1.5; }.tile-arrow { position: absolute; right: 1.2rem; bottom: 1.25rem; color: var(--v-orange); }
.compatibility-band { padding: 1.2rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--v-line); color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .65rem; text-transform: uppercase; }.compatibility-band div { display: flex; flex-wrap: wrap; justify-content: end; gap: 1.2rem; }.compatibility-band span { color: var(--v-paper); }.compatibility-band i { margin-right: .35rem; color: var(--v-orange); }
.about-strip { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 2.2rem 0; display: grid; grid-template-columns: .8fr 1.3fr auto; align-items: center; gap: 2rem; border-bottom: 1px solid var(--v-line); }.about-identity { display: flex; align-items: center; gap: .85rem; }.about-identity .bio-avatar { width: 44px; height: 44px; }.about-identity h2 { margin: 0; color: var(--v-paper); font-size: 1.1rem; font-weight: 500; }.about-strip > p { max-width: 52ch; margin: 0; color: var(--v-paper-dim); font-size: .85rem; line-height: 1.6; }.home-projects { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0 1rem; }.home-projects #project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--v-line); }.home-projects .project-card { min-height: 180px; padding: 1rem; border: 0; border-radius: 0; background: var(--v-ink); }.home-projects .project-card:hover { background: #191c19; transform: none; }.home-projects .project-card img { border-radius: 0; }.project-rail-footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .65rem; }.project-rail-footer strong { color: var(--v-orange); font-weight: 400; }.project-rail-footer a { color: var(--v-orange); text-decoration: none; }
.site-footer { width: min(1280px, calc(100% - 2rem)); margin-top: 4rem; padding: 1.25rem 0; border-top: 1px solid var(--v-line); color: var(--v-paper-dim); font-family: "DM Mono", monospace; }.site-footer .footer-inner { font-size: .65rem; }.site-footer a { color: var(--v-paper-dim); }.site-footer a:hover { color: var(--v-orange); }
.store-feature { margin-top: 3.5rem; display: grid; grid-template-columns: 1.35fr .65fr; min-height: 440px; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); }.feature-preview { padding: .6rem; align-self: center; background: #20241f; }.feature-scene { min-height: 390px; position: relative; overflow: hidden; background: radial-gradient(circle at 70% 15%, rgba(255,112,72,.22), transparent 25%), linear-gradient(145deg, #263a30, #101510 65%); }.feature-scene-copy { position: absolute; left: clamp(1rem, 5vw, 4rem); top: clamp(1.3rem, 5vw, 4rem); }.feature-scene-copy small { display: block; color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .6rem; }.feature-scene-copy strong { display: block; margin: 1rem 0; color: var(--v-paper); font-size: clamp(2rem, 5vw, 4.8rem); line-height: .86; letter-spacing: -.08em; font-weight: 500; }.feature-scene-copy span { color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .62rem; }.feature-chat-lines { position: absolute; right: 4%; bottom: 7%; width: min(330px, 78%); display: grid; gap: .4rem; }.feature-chat-lines span { padding: .6rem .7rem; color: var(--v-paper); background: rgba(8,10,8,.78); font-size: .72rem; }.feature-chat-lines b { display: inline-grid; width: 18px; height: 18px; margin-right: .35rem; place-items: center; color: var(--v-ink); background: var(--v-orange); font-size: .6rem; }.feature-chat-lines em { display: block; margin: .25rem 0 0 1.45rem; color: var(--v-paper-dim); font-size: .67rem; font-style: normal; }.feature-info { align-self: center; padding: clamp(1.4rem, 4vw, 3.5rem); border-left: 1px solid var(--v-line); }.feature-info h2 { margin: .4rem 0 1rem; color: var(--v-paper); font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: .95; letter-spacing: -.07em; font-weight: 500; }.feature-info > p:not(.eyebrow) { color: var(--v-paper-dim); font-size: .85rem; line-height: 1.65; }.feature-facts { display: grid; gap: .65rem; margin: 1.6rem 0; }.feature-facts span { display: flex; flex-direction: column; gap: .2rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .62rem; }.feature-facts b { color: var(--v-paper); font-family: "Space Grotesk", sans-serif; font-size: .72rem; font-weight: 600; }
.widget-store { margin-top: 5rem; padding: 0 0 2rem; border: 0; border-radius: 0; background: transparent; }.widget-store .store-heading { align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--v-line); }.widget-store .section-title { color: var(--v-paper); font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 500; }.widget-store .section-subtitle { color: var(--v-paper-dim); }.store-search { border-color: var(--v-line); border-radius: 3px; background: transparent; }.store-search input { color: var(--v-paper); font-family: "DM Mono", monospace; font-size: .7rem; }.store-tabs { margin: 1rem 0 1.2rem; }.store-tab { border-radius: 3px; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .65rem; font-weight: 400; text-transform: uppercase; }.store-tab.active, .store-tab:hover { color: var(--v-ink); border-color: var(--v-paper); background: var(--v-paper); }.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--v-line); }.catalog-card { border: 0; border-radius: 0; background: var(--v-ink); }.catalog-card:hover { border: 0; background: #1a1d1a; }.catalog-card .widget-media { min-height: 170px; background: #20251f; }.catalog-card .widget-media img { height: 170px; mix-blend-mode: screen; opacity: .72; }.catalog-card .widget-body { padding: 1.1rem 1.1rem .35rem; }.catalog-card .widget-name { color: var(--v-paper); font-size: 1rem; font-weight: 500; }.catalog-card .widget-desc, .catalog-card .updated { color: var(--v-paper-dim); font-size: .78rem; }.catalog-card .meta { color: var(--v-paper-dim); }.catalog-card .widget-actions { padding: .9rem 1.1rem 1.1rem; }.catalog-card .widget-actions .btn { border-radius: 3px; font-size: .72rem; }.catalog-card .btn.primary { color: var(--v-ink); border-color: var(--v-orange); background: var(--v-orange); }.catalog-card .btn.ghost { color: var(--v-paper); border-color: var(--v-line); background: transparent; }.catalog-card .ribbon, .catalog-card .price-pill { border-radius: 2px; font-family: "DM Mono", monospace; font-size: .58rem; text-transform: uppercase; }.catalog-card .price-pill { color: var(--v-paper); background: rgba(10,11,10,.86); }
@media (max-width: 900px) { .store-feature { grid-template-columns: 1fr; }.feature-info { border-left: 0; border-top: 1px solid var(--v-line); }.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .store-feature { margin-top: 2rem; }.feature-scene { min-height: 300px; }.feature-scene-copy strong { font-size: 2.7rem; }.widget-store { margin-top: 3.5rem; }.widget-store .store-heading { align-items: stretch; }.catalog-grid { grid-template-columns: 1fr; } }
.page-content.public-main { margin-top: 4rem; }.page-content .featured-section, .page-content .modrinth-section { padding: 0 0 4rem; border: 0; border-radius: 0; border-bottom: 1px solid var(--v-line); background: transparent; }.page-content .section-heading { max-width: 630px; margin-bottom: 1.4rem; }.page-content .section-title { color: var(--v-paper); font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 500; }.page-content .section-subtitle { color: var(--v-paper-dim); }.featured-grid { grid-template-columns: 1.3fr .7fr; gap: 1px; background: var(--v-line); }.page-content .project-card.highlight { min-height: 360px; padding: 1.4rem; display: flex; flex-direction: column; border: 0; border-radius: 0; background: var(--v-ink); }.page-content .project-card.highlight:first-child { background: linear-gradient(135deg, #263a30, #111311 70%); }.page-content .project-card.highlight:hover { transform: none; background-color: #191c19; }.project-header h3 { color: var(--v-paper); font-size: 1.25rem; font-weight: 500; }.project-tag { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .62rem; text-transform: uppercase; }.project-summary, .project-points { color: var(--v-paper-dim); }.project-points li i { color: var(--v-orange); }.page-content .project-actions { margin-top: auto; }.page-content .project-actions .btn { border-radius: 3px; font-size: .7rem; }.page-content .btn.primary { color: var(--v-ink); border-color: var(--v-orange); background: var(--v-orange); }.page-content .btn.ghost, .page-content .btn.link { color: var(--v-paper); border-color: var(--v-line); background: transparent; }.portfolio-meta { margin: 1rem 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); background: transparent; }.portfolio-meta .stat span { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: 1.4rem; font-weight: 400; }.portfolio-meta .stat label { color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .62rem; }.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--v-line); }.portfolio-grid .project-card { border: 0; border-radius: 0; background: var(--v-ink); }.portfolio-grid .project-card:hover { transform: none; background: #191c19; }.portfolio-grid .project-card h3 { color: var(--v-paper); font-weight: 500; }.portfolio-grid .project-summary { color: var(--v-paper-dim); }.portfolio-grid .icon-btn { border-radius: 3px; }
@media (max-width: 700px) { .page-content.public-main { margin-top: 3rem; }.featured-grid, .portfolio-grid { grid-template-columns: 1fr; }.page-content .project-card.highlight { min-height: 300px; }.portfolio-grid { gap: 1px; } }

/* Palette and navigation refinement */
:root { --v-ink: #070b14; --v-paper: #eef2fb; --v-paper-dim: #9ba9be; --v-line: rgba(157,177,205,.17); --v-orange: #8b7cff; --v-orange-deep: #6e5ee8; --v-mint: #5fdbff; --v-black: #04060b; }
.brand-mark { display: none; }
.nav-links a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.nav-links a i { display: inline-block; margin-right: .42rem; color: currentColor; font-size: .72rem; transition: transform .2s ease, color .2s ease; }
.nav-links a:hover { color: var(--v-paper); background: rgba(139,124,255,.12); transform: translateY(-1px); }.nav-links a:hover i { color: var(--v-orange); transform: translateY(-1px); }.nav-links a.active { color: var(--v-paper); background: rgba(139,124,255,.16); box-shadow: inset 0 -2px 0 var(--v-orange); }.nav-links a.active i { color: var(--v-orange); }
.topbar-center .nav-links li a i { display: inline-block; }
.stage-scene { background: radial-gradient(circle at 70% 15%, rgba(139,124,255,.22), transparent 25%), linear-gradient(145deg, #182943, #080d17 65%); }.feature-scene { background: radial-gradient(circle at 70% 15%, rgba(139,124,255,.25), transparent 25%), linear-gradient(145deg, #1a2a44, #080d17 65%); }.showcase-tile-wide { background: linear-gradient(140deg, #1a2a44, #070b14 58%); }.hero-stage, .feature-preview { background: #101a2b; }.scene-chat > div { border-left-color: var(--v-orange); background: rgba(4,7,13,.78); }.scene-now, .feature-chat-lines span { background: rgba(4,7,13,.86); }
.about-lead { display: grid; grid-template-columns: 150px 1.2fr .7fr; align-items: center; gap: clamp(1.2rem, 4vw, 4rem); padding: 5rem 0; border-bottom: 1px solid var(--v-line); }.about-lead-portrait { width: 150px; height: 190px; overflow: hidden; background: #111b2c; }.about-lead-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }.about-lead-copy h2 { margin: .55rem 0 1rem; color: var(--v-paper); font-size: clamp(2rem, 4vw, 3.8rem); line-height: .95; letter-spacing: -.07em; font-weight: 500; }.about-lead-copy > p:not(.eyebrow) { max-width: 56ch; margin: 0 0 .8rem; color: var(--v-paper-dim); font-size: .9rem; line-height: 1.7; }.about-lead-copy .section-link { display: inline-block; margin-top: .6rem; }.about-lead-details { display: grid; gap: .8rem; margin: 0; }.about-lead-details div { padding-bottom: .65rem; border-bottom: 1px solid var(--v-line); }.about-lead-details dt { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .6rem; text-transform: uppercase; }.about-lead-details dd { margin: .25rem 0 0; color: var(--v-paper); font-size: .82rem; }
@media (max-width: 760px) { .about-lead { grid-template-columns: 82px 1fr; gap: 1rem; padding: 3.5rem 0; }.about-lead-portrait { width: 82px; height: 106px; }.about-lead-details { grid-column: 2; grid-template-columns: repeat(3, 1fr); gap: .65rem; }.about-lead-details div { border-bottom: 0; }.about-lead-details dd { font-size: .7rem; } }
@media (max-width: 520px) { .about-lead { grid-template-columns: 1fr; }.about-lead-portrait { width: 82px; height: 82px; }.about-lead-details { grid-column: auto; }.about-lead-details dd { font-size: .78rem; } }
.showcase-tile:hover, .home-projects .project-card:hover, .page-content .project-card.highlight:hover { background: #101a2d; }.page-content .project-card.highlight:first-child { background: linear-gradient(135deg, #182a45, #070b14 70%); }.catalog-card:hover { background: #101a2d; }.public-btn.primary { color: var(--v-ink); background: var(--v-orange); }.site-account__avatar { color: var(--v-orange); background: rgba(139,124,255,.14); }.site-account__avatar[data-platform="twitch"] { color: #a99cff; }.site-account__avatar[data-platform="youtube"] { color: #ff7182; }.site-account__avatar[data-platform="kick"] { color: #6ee6a6; }

@media (max-width: 900px) { .home-intro { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }.hero-stage { max-width: 700px; width: calc(100% - 1rem); margin-left: auto; }.editorial-row { grid-template-columns: .5fr 1.5fr; }.editorial-facts { grid-column: 2; grid-template-columns: repeat(3, 1fr); }.showcase-grid { grid-template-columns: repeat(2, 1fr); }.showcase-tile-wide { grid-column: 1 / -1; }.compatibility-band { align-items: flex-start; flex-direction: column; }.compatibility-band div { justify-content: start; } }
@media (max-width: 640px) { .topbar { grid-template-columns: 1fr auto; padding-inline: .75rem; }.topbar-center { grid-column: 1 / -1; grid-row: 2; margin-top: .5rem; overflow-x: auto; }.nav-links { justify-content: center; }.home-layout, .about-strip, .home-projects, .site-footer { width: calc(100% - 1.5rem); }.home-intro { min-height: 0; padding: 3.2rem 0 2.8rem; }.hero-heading { font-size: clamp(2.8rem, 13vw, 4.2rem); }.hero-stage { width: calc(100% - .4rem); transform: none; }.stage-scene { min-height: 280px; }.scene-chat { right: .7rem; width: 75%; }.scene-now { left: .7rem; }.editorial-row { grid-template-columns: 1fr; gap: 1rem; padding: 3.5rem 0; }.editorial-facts { grid-column: auto; grid-template-columns: repeat(3, 1fr); }.showcase-heading, .about-strip, .project-rail-footer { align-items: start; flex-direction: column; }.showcase-grid { grid-template-columns: 1fr; }.showcase-tile-wide { grid-column: auto; min-height: 270px; }.compatibility-band div { gap: .7rem; }.about-strip { gap: 1rem; }.home-projects #project-list { grid-template-columns: 1fr; } }

body { position: relative; isolation: isolate; }
body::before { display: block; position: fixed; inset: -12%; z-index: -1; pointer-events: none; content: ""; opacity: .34; background-image: radial-gradient(circle at 12% 22%, rgba(139,124,255,.62) 0 1px, transparent 2px), radial-gradient(circle at 78% 18%, rgba(95,219,255,.5) 0 1px, transparent 2px), radial-gradient(circle at 66% 76%, rgba(139,124,255,.45) 0 1px, transparent 2px), linear-gradient(122deg, transparent 0 29%, rgba(139,124,255,.12) 29.1% 29.25%, transparent 29.35% 100%), linear-gradient(26deg, transparent 0 63%, rgba(95,219,255,.1) 63.1% 63.22%, transparent 63.32% 100%), linear-gradient(156deg, transparent 0 46%, rgba(139,124,255,.09) 46.1% 46.22%, transparent 46.32% 100%); background-size: 420px 420px, 560px 560px, 680px 680px, 100% 100%, 100% 100%, 100% 100%; animation: network-drift 32s linear infinite; }
body::after { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .16; background: linear-gradient(180deg, transparent 0 49.8%, rgba(95,219,255,.16) 50%, transparent 50.2%); background-size: 100% 9px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); }
@keyframes network-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(2%, -1.5%, 0) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
.network-canvas { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: .78; }
body::before, body::after { display: none; }
body > :not(.network-canvas) { position: relative; z-index: 1; }

/* Portfolio-first home and compact floating navigation. */
.topbar { position: fixed; top: 14px; left: 50%; z-index: 100; width: min(1080px, calc(100% - 2rem)); min-height: 56px; padding: .45rem .7rem; overflow: visible; border: 1px solid rgba(157,177,205,.22); border-radius: 999px; background: rgba(7,11,20,.78); box-shadow: 0 14px 34px rgba(0,0,0,.26); transform: translateX(-50%); }
.topbar-socials { display: flex; align-items: center; gap: .3rem; margin-left: .15rem; }.topbar-socials .social-link { width: 28px; height: 28px; display: grid; place-items: center; color: var(--v-paper-dim); border: 1px solid rgba(157,177,205,.18); border-radius: 7px; background: rgba(157,177,205,.06); font-size: .7rem; }.topbar-socials .social-link i { font-size: .72rem; }.topbar-socials .social-link:hover { color: var(--v-paper); border-color: rgba(139,124,255,.46); background: rgba(139,124,255,.15); transform: translateY(-1px); }
body > .topbar { z-index: 100; }
.home-layout { padding-top: 88px; }.portfolio-intro { min-height: 470px; display: grid; grid-template-columns: 1.1fr .55fr; align-items: end; gap: 3rem; padding: 5rem 0 4rem; border-bottom: 1px solid var(--v-line); }.portfolio-intro-copy { max-width: 720px; }.portfolio-intro-copy .hero-heading { max-width: 680px; }.portfolio-intro-note { max-width: 270px; padding-left: 1rem; border-left: 1px solid var(--v-orange); }.note-index { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .6rem; }.portfolio-intro-note p { margin: 1rem 0 1.3rem; color: var(--v-paper-dim); font-size: .82rem; line-height: 1.65; }.portfolio-pillars { display: grid; grid-template-columns: .6fr repeat(3, 1fr); gap: 1rem; padding: 3rem 0; border-bottom: 1px solid var(--v-line); }.portfolio-pillars .editorial-index { color: var(--v-orange); font-family: "DM Mono", monospace; font-size: .62rem; }.portfolio-pillars .editorial-index span { display: inline-block; width: 26px; margin: 0 .35rem; border-top: 1px solid var(--v-orange); vertical-align: middle; }.pillar { padding-left: 1rem; border-left: 1px solid var(--v-line); }.pillar strong { display: block; color: var(--v-paper); font-size: .95rem; font-weight: 500; }.pillar span { display: block; margin-top: .35rem; color: var(--v-paper-dim); font-size: .75rem; line-height: 1.5; }.about-lead-portrait { width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(139,124,255,.35); background: #101a2b; }.about-lead-portrait img { border-radius: 50%; }.about-lead { scroll-margin-top: 100px; }.hero-stage { position: relative; z-index: 2; box-shadow: 18px 22px 30px rgba(139,124,255,.1); }
@media (max-width: 900px) { .portfolio-intro { grid-template-columns: 1fr; align-items: start; gap: 2rem; }.portfolio-intro-note { max-width: 420px; }.portfolio-pillars { grid-template-columns: .6fr repeat(3, 1fr); } }
@media (max-width: 640px) { .topbar { top: 8px; width: calc(100% - 1rem); min-height: 52px; padding: .35rem .5rem; }.topbar-left { gap: .4rem; }.topbar-socials { margin-left: 0; }.topbar-socials .social-link { width: 22px; height: 22px; font-size: .7rem; }.home-layout { padding-top: 70px; }.portfolio-intro { min-height: 0; padding: 3.8rem 0 3rem; }.portfolio-pillars { grid-template-columns: 1fr; gap: 1rem; }.pillar { padding: .7rem 0 0; border-left: 0; border-top: 1px solid var(--v-line); }.about-lead-portrait { width: 82px; height: 82px; } }
.public-main.public-hero { padding-top: 150px; }
@media (max-width: 640px) { .public-main.public-hero { padding-top: 112px; } }
.home-projects #project-list { align-items: stretch; }.home-projects .project-card { min-height: 0; display: flex; flex-direction: column; gap: .55rem; }.home-projects .project-info { flex: 1; }.home-projects .project-actions { margin-top: auto; }

/* Project shelf: a quiet, even rail that keeps every item anchored to the same rhythm. */
.home-projects { padding-top: 3.5rem; }
.portfolio-intro { grid-template-columns: 1fr; }
.home-projects #project-list { grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: .7rem; overflow-x: auto; background: transparent; }
.home-projects .project-card { min-height: 182px; padding: .85rem; gap: .6rem; border: 1px solid rgba(157,177,205,.13); border-radius: 10px; background: rgba(12,20,34,.68); }
.home-projects .project-card:hover { background: rgba(16,26,45,.88); border-color: rgba(139,124,255,.35); }
.home-projects .project-card img { width: 46px; height: 46px; object-fit: cover; border: 1px solid rgba(157,177,205,.2); border-radius: 10px; }
.home-projects .project-info { display: grid; align-content: start; gap: .3rem; }
.home-projects .project-title { color: var(--v-paper); font-size: .95rem; line-height: 1.3; }
.home-projects .project-type, .home-projects .project-downloads { color: var(--v-paper-dim); font-size: .7rem; line-height: 1.4; }
.home-projects .project-actions { display: flex; justify-content: flex-end; }
.home-projects .action-btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--v-paper); border: 1px solid var(--v-line); border-radius: 50%; background: rgba(139,124,255,.08); }
.home-projects .action-btn:hover { color: var(--v-paper); border-color: rgba(139,124,255,.55); background: rgba(139,124,255,.2); }

@media (max-width: 640px) { .topbar-socials .social-link { width: 25px; height: 25px; font-size: .65rem; }.topbar-socials .social-link i { font-size: .66rem; } }

/* Mobile shell: keep the identity controls together and give navigation its own row. */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .topbar { width: calc(100% - 1rem); min-height: 50px; padding: .35rem .5rem; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; }
  .topbar-left { min-width: 0; gap: .42rem; overflow: hidden; }
  .topbar-left .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
  .topbar-socials { flex: 0 0 auto; gap: .22rem; }
  .topbar-socials .social-link { width: 24px; height: 24px; border-radius: 6px; }
  .topbar-center { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-top: .2rem; overflow-x: auto; scrollbar-width: none; }
  .topbar-center::-webkit-scrollbar { display: none; }
  .nav-links { width: max-content; min-width: 100%; justify-content: center; gap: .15rem; }
  .nav-links a { padding: .42rem .55rem; font-size: .72rem; white-space: nowrap; }
  .nav-links a i { margin-right: .28rem; font-size: .65rem; }
  .site-account__button { padding: .38rem .5rem; gap: .35rem; font-size: .75rem; }
  .site-account__avatar { width: 23px; height: 23px; }
  .site-account__panel { right: -.35rem; }
  .home-layout { padding-top: 108px; }
  .public-main.public-hero { padding-top: 132px; }
  .portfolio-intro { padding-top: 3.2rem; }
  .project-rail-footer { gap: .65rem; }
}

@media (max-width: 430px) {
  .topbar-left .name { display: none; }
  .topbar-socials .social-link { width: 23px; height: 23px; }
  .site-account__button span[data-account-label] { display: none; }
  .site-account__button { padding: .35rem; border-radius: 8px; }
  .site-account__avatar { width: 24px; height: 24px; }
  .nav-links { justify-content: space-between; }
  .nav-links a { padding-inline: .45rem; }
  .home-layout { padding-top: 104px; }
}

/* Widget storefront: compact title, product-led preview, and one coherent filter rail. */
.store-page-heading { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding-top: 108px; padding-bottom: 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--v-line); }
.store-page-heading h1 { max-width: 680px; margin: 0; color: var(--v-paper); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: -.06em; font-weight: 500; }
.store-page-heading > p { max-width: 34ch; margin: 0; color: var(--v-paper-dim); font-size: .8rem; line-height: 1.6; }
.project-page-heading { padding-bottom: 1.15rem; }
.store-feature { margin-top: 1.5rem; grid-template-columns: 1.15fr .85fr; min-height: 0; border: 1px solid var(--v-line); background: rgba(8,14,25,.48); }
.feature-preview { padding: .7rem; background: transparent; }
.multichat-scene { min-height: 330px; display: flex; flex-direction: column; padding: 1rem; background: linear-gradient(145deg, #14233d, #080d17 78%); }
.multichat-toolbar, .multichat-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--v-paper-dim); font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .04em; }
.multichat-toolbar { padding-bottom: .75rem; border-bottom: 1px solid rgba(157,177,205,.15); }
.multichat-toolbar > span:first-child { color: var(--v-paper); }
.multichat-status { color: #6ee6a6; }
.multichat-status i { margin-right: .25rem; font-size: .42rem; }
.multichat-messages { display: grid; align-content: center; gap: .65rem; flex: 1; padding: 1rem 0; }
.multichat-message { display: grid; grid-template-columns: 28px 1fr; gap: .6rem; align-items: start; }
.chat-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #08101e; font-size: .65rem; font-weight: 700; }
.avatar-purple { background: #b7a8ff; }.avatar-red { background: #ff7b92; }.avatar-green { background: #71e5aa; }
.chat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; line-height: 1.2; }.chat-meta strong { color: var(--v-paper); font-size: .74rem; }.chat-meta time { margin-left: auto; color: #70819a; font-family: "DM Mono", monospace; font-size: .52rem; }
.chat-source { display: inline-flex; align-items: center; gap: .2rem; font-family: "DM Mono", monospace; font-size: .5rem; text-transform: uppercase; }.source-twitch { color: #b7a8ff; }.source-youtube { color: #ff7b92; }.source-kick { color: #71e5aa; }
.multichat-message p { margin: .22rem 0 0; color: #c6d1e1; font-size: .72rem; }
.multichat-footer { padding-top: .7rem; border-top: 1px solid rgba(157,177,205,.15); }.multichat-footer i, .multichat-footer b { margin-left: .35rem; }.multichat-footer i:first-child { color: #b7a8ff; }.multichat-footer i:nth-child(2) { color: #ff7b92; }.multichat-footer b { color: #71e5aa; font-size: .62rem; }
.widget-filter-row { display: grid; grid-template-columns: minmax(220px, .7fr) 1fr; gap: .65rem 1rem; align-items: center; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--v-line); }
.widget-store .store-heading { display: block; text-align: center; }
.widget-store .store-heading .section-title { margin-bottom: .55rem; }
.widget-store .store-heading .section-subtitle { max-width: 620px; margin: 0 auto; }
.widget-filter-row .store-search { width: auto; min-width: 0; border-radius: 8px; background: rgba(12,20,34,.68); }
.widget-filter-row .store-tabs { margin: 0; }
.widget-filter-row .platform-tabs { grid-column: 1 / -1; padding-top: .35rem; border-top: 1px solid rgba(157,177,205,.1); }
.platform-tabs .store-tab { display: inline-flex; align-items: center; gap: .34rem; }.platform-tabs .store-tab i { font-size: .72rem; }.platform-tabs .store-tab[data-widget-filter="platform:twitch"] i { color: #b7a8ff; }.platform-tabs .store-tab[data-widget-filter="platform:youtube"] i { color: #ff7b92; }.platform-tabs .store-tab[data-widget-filter="platform:spotify"] i { color: #6ee6a6; }.platform-tabs .store-tab[data-widget-filter="platform:youtube-music"] i { color: #ff8c9e; }.platform-tabs .store-tab[data-widget-filter="platform:songify"] i { color: #f6c978; }.kick-icon { color: #71e5aa; font-size: .67rem; }
.widget-filter-row .store-tab.active, .widget-filter-row .store-tab:hover { color: var(--v-paper); border-color: rgba(139,124,255,.5); background: rgba(139,124,255,.14); }
.platform-kick-glyph { display: inline-grid; width: .8rem; height: .8rem; place-items: center; color: #71e5aa; font-family: "Space Grotesk", sans-serif; font-size: .58rem; font-style: normal; font-weight: 700; }
.platform-kick-glyph::before { content: "K"; }
.catalog-grid { gap: .75rem; background: transparent; }.catalog-card { border: 1px solid rgba(157,177,205,.13); border-radius: 10px; background: rgba(12,20,34,.68); }.catalog-card:hover { border-color: rgba(139,124,255,.4); background: rgba(16,26,45,.88); }.catalog-card .widget-media { min-height: 155px; background: #101a2b; }.catalog-card .widget-body { padding: .9rem .9rem .2rem; }.catalog-card .widget-actions { padding: .8rem .9rem .9rem; }.catalog-card .compat { display: inline-flex; align-items: center; gap: .4rem; }.catalog-card .compat i { font-size: .7rem; }.catalog-card .platform-twitch { color: #b7a8ff; }.catalog-card .platform-youtube { color: #ff7b92; }.catalog-card .platform-kick, .catalog-card .platform-kick-glyph { color: #71e5aa; }.catalog-card .platform-spotify { color: #6ee6a6; }.catalog-card .platform-youtube-music { color: #ff8c9e; }.catalog-card .platform-songify { color: #f6c978; }
@media (max-width: 900px) { .store-page-heading { align-items: start; flex-direction: column; gap: .8rem; }.store-feature { grid-template-columns: 1fr; }.feature-info { border-left: 0; border-top: 1px solid var(--v-line); }.widget-filter-row { grid-template-columns: 1fr; }.widget-filter-row .platform-tabs { grid-column: auto; } }
@media (max-width: 640px) { .store-page-heading { width: calc(100% - 1.5rem); padding-top: 104px; }.store-page-heading h1 { font-size: 1.85rem; }.store-feature { width: calc(100% - 1.5rem); margin-top: 1rem; }.multichat-scene { min-height: 290px; padding: .75rem; }.widget-store { width: calc(100% - 1.5rem); }.widget-filter-row { gap: .55rem; }.widget-filter-row .store-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }.widget-filter-row .store-tabs::-webkit-scrollbar { display: none; }.widget-filter-row .store-tab { flex: 0 0 auto; }.catalog-grid { grid-template-columns: 1fr; } }

/* Keep the featured tool inside the catalogue rather than creating a second storefront area. */
.widget-store { margin-top: 1.5rem; }
.catalog-featured { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 0; margin-bottom: 3rem; border: 1px solid var(--v-line); background: rgba(8,14,25,.48); }
.catalog-featured .feature-preview { padding: .7rem; background: transparent; }
.catalog-featured .feature-info { align-self: center; padding: clamp(1.4rem, 4vw, 3.5rem); border-left: 1px solid var(--v-line); }
.catalog-grid { padding: .45rem .25rem .25rem; overflow: visible; }
.catalog-card { position: relative; transform: none; }
.catalog-card:hover { transform: none; }
@media (max-width: 900px) { .catalog-featured { grid-template-columns: 1fr; }.catalog-featured .feature-info { border-top: 1px solid var(--v-line); border-left: 0; } }
@media (max-width: 640px) { .catalog-featured { margin-bottom: 2.2rem; }.catalog-featured .multichat-scene { min-height: 290px; padding: .75rem; }.widget-store { width: calc(100% - 1.5rem); } }