:root {
  color-scheme: dark;
  --page: #101014;
  --page-raised: #151419;
  --surface: #1a191f;
  --surface-hover: #211e27;
  --text: #f2eff4;
  --muted: #aaa4af;
  --subtle: #7e7784;
  --line: rgba(245,239,250,.11);
  --line-strong: rgba(245,239,250,.19);
  --accent: #c09aeb;
  --accent-strong: #a77bd5;
  --mint: #83d8c4;
  --pink: #ed9cc7;
  --header: rgba(16,16,20,.9);
  --art: #17181d;
  --shadow: 0 16px 44px rgba(0,0,0,.18);
  --body: "DM Sans", sans-serif;
  --display: "Space Grotesk", sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f2ed;
  --page-raised: #ece8e1;
  --surface: #fffdfa;
  --surface-hover: #f2edf5;
  --text: #27232b;
  --muted: #625b68;
  --subtle: #817987;
  --line: rgba(49,39,57,.12);
  --line-strong: rgba(49,39,57,.2);
  --accent: #8153ae;
  --accent-strong: #70439d;
  --mint: #278d7c;
  --pink: #ba548d;
  --header: rgba(245,242,237,.91);
  --art: #e8e3e8;
  --shadow: 0 15px 38px rgba(68,51,75,.09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .25s,color .25s; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.section-wrap { width: min(1100px,calc(100% - 56px)); margin-inline: auto; }
.site-header { min-height: 76px; padding: 0 max(28px,calc((100% - 1200px)/2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--header); backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.logo-fallback { font: 700 21px var(--display); color: var(--text); }.logo-fallback span { color: var(--accent); }
.brand-logo { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-mark.logo-ready .brand-logo,.loader-mark.logo-ready img { display: block; }.brand-mark.logo-ready .logo-fallback,.loader-mark.logo-ready .logo-fallback { display: none; }
.brand-name { font: 700 13px var(--display); letter-spacing: -.04em; }.brand-name span { color: var(--accent); }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px,2.5vw,30px); color: var(--muted); font-size: 11px; }
.main-nav a,.footer-links a { transition: color .18s; }.main-nav a:hover,.footer-links a:hover { color: var(--accent); }.main-nav a span { margin-left: 3px; color: var(--accent); }
.discord-link { padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text); }
.discord-link:hover { background: var(--surface); }
.theme-toggle { width: 36px; height: 36px; justify-self: end; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background .2s,transform .2s,border-color .2s; }
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--accent); transform: rotate(-10deg); }.theme-toggle span { font-size: 17px; line-height: 1; }
.menu-toggle { display: none; }
.hero { min-height: 720px; padding-top: 80px; padding-bottom: 61px; display: flex; align-items: center; flex-direction: column; position: relative; text-align: center; }
.hero-copy { width: min(760px,100%); position: relative; z-index: 1; }
.eyebrow { margin: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font: 600 9px var(--display); letter-spacing: .14em; }
.pixel-dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--mint); box-shadow: 0 0 10px color-mix(in srgb,var(--mint) 35%,transparent); }
.eyebrow-divider { color: var(--subtle); margin: 0 2px; }
.hero h1 { margin: 23px 0 17px; font: 600 clamp(50px,7.4vw,78px)/1.01 var(--display); letter-spacing: -.068em; }
.accent-text { color: var(--accent); }
.hero-lead { max-width: 550px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.8; }
.hero-actions,.contact-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px; border: 1px solid transparent; border-radius: 5px; font-size: 10px; font-weight: 600; transition: transform .2s,background .2s,border-color .2s,box-shadow .2s; }
.button:hover { transform: translateY(-2px); }.button-primary { background: var(--accent); color: var(--page); }.button-primary:hover { background: var(--accent-strong); box-shadow: var(--shadow); }.button-primary span { font-size: 15px; }.button-secondary { border-color: var(--line-strong); color: var(--text); }.button-secondary:hover { background: var(--surface); }
.hero-art { width: min(760px,100%); height: 285px; position: relative; overflow: hidden; isolation: isolate; margin-top: 46px; border: 1px solid var(--line); border-radius: 7px; background: var(--art); box-shadow: var(--shadow); }
.art-sky { position: absolute; inset: 0 0 42px; background: linear-gradient(180deg,#b9b1ca 0%,#c8b9c5 55%,#d4b9b4 100%); opacity: .85; }
:root[data-theme="dark"] .art-sky { background: linear-gradient(180deg,#262632 0%,#34303c 58%,#5b414c 100%); opacity: .9; }
.cloud { position: absolute; height: 10px; display: block; background: rgba(246,237,239,.44); box-shadow: 12px -8px 0 rgba(246,237,239,.44),24px 0 0 rgba(246,237,239,.44),36px 0 0 rgba(246,237,239,.44),24px 8px 0 rgba(246,237,239,.44); animation: cloud-drift 18s ease-in-out infinite alternate; }.cloud-one { width: 24px; top: 53px; left: 19%; }.cloud-two { width: 17px; top: 93px; right: 19%; transform: scale(.72); animation-delay: -8s; }.sky-pixel { width: 5px; height: 5px; position: absolute; background: rgba(255,255,255,.6); }.sky-pixel-one { top: 37px; right: 31%; }.sky-pixel-two { top: 111px; left: 34%; }
.sun-block { width: 54px; height: 54px; position: absolute; top: 47px; left: 50%; transform: translateX(-50%); background: #e9c99f; box-shadow: 0 0 38px rgba(234,194,151,.15); animation: sun-breathe 5s ease-in-out infinite; }
:root[data-theme="dark"] .sun-block { background: #e0b99e; }
.hill { position: absolute; bottom: 36px; width: 70%; height: 145px; clip-path: polygon(0 100%,0 75%,17% 75%,17% 55%,32% 55%,32% 35%,48% 35%,48% 18%,63% 18%,63% 39%,78% 39%,78% 61%,91% 61%,91% 78%,100% 78%,100% 100%); }.hill-back { left: 8%; background: #766d83; opacity: .58; transform: translateY(-14px) scale(.92); }.hill-front { right: 4%; background: #615c71; opacity: .82; }.hill-front:after { content: ""; position: absolute; inset: 47% 0 0; background: repeating-linear-gradient(0deg,transparent 0 19px,rgba(25,24,31,.18) 19px 21px); }
.grass-block { height: 44px; position: absolute; bottom: 0; left: 0; right: 0; }.grass-top { height: 8px; background: repeating-linear-gradient(90deg,#587d68 0 22px,#6c9277 22px 42px,#52745f 42px 62px); border-top: 1px solid rgba(207,238,199,.25); }.grass-dirt { height: 36px; position: relative; background: repeating-linear-gradient(0deg,#55454c 0 17px,#5e4a4e 17px 34px); }.grass-dirt i { width: 5px; height: 5px; display: block; position: absolute; background: #8a6b5a; opacity: .62; }.grass-dirt i:nth-child(1){left:14%;top:13px}.grass-dirt i:nth-child(2){left:38%;top:24px}.grass-dirt i:nth-child(3){left:57%;top:8px}.grass-dirt i:nth-child(4){left:72%;top:20px}.grass-dirt i:nth-child(5){left:88%;top:12px}.grass-dirt i:nth-child(6){left:26%;top:28px}
.art-caption { position: absolute; z-index: 2; left: 50%; bottom: 61px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(255,255,255,.84); font: 500 8px var(--display); letter-spacing: .11em; text-shadow: 0 1px 4px rgba(0,0,0,.3); }.art-caption .pixel-dot { width: 5px; height: 5px; }
.scroll-cue { margin-top: 23px; display: inline-flex; align-items: center; gap: 9px; color: var(--subtle); font: 500 8px var(--display); letter-spacing: .13em; }.scroll-line { width: 20px; height: 1px; background: var(--accent); }
.offer-section { padding-top: 96px; padding-bottom: 110px; }.section-heading { max-width: 720px; margin: 0 auto 37px; text-align: center; }.section-heading h2,.contact-inner h2 { margin: 16px 0 12px; font: 600 clamp(35px,5vw,50px)/1.12 var(--display); letter-spacing: -.058em; }.section-intro { max-width: 510px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.8; }.service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }.service-card { min-height: 228px; padding: 20px 17px 18px; display: flex; align-items: center; flex-direction: column; text-align: center; position: relative; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transition: transform .22s,border-color .22s,background .22s; }.service-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--accent) 48%,var(--line)); background: var(--surface-hover); }.service-index { position: absolute; top: 12px; right: 13px; color: var(--subtle); font: 500 8px var(--display); }.service-icon { height: 39px; width: 39px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent); background: var(--page-raised); font: 600 12px var(--display); }.icon-config,.icon-web { color: var(--mint); }.icon-design { color: var(--pink); }.service-card h3 { margin: 0 0 8px; font: 600 15px var(--display); }.service-card p { max-width: 220px; min-height: 50px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }.card-link { margin-top: auto; padding-top: 15px; color: var(--accent); font-size: 9px; font-weight: 600; }.card-link span { margin-left: 5px; }
.process-section { padding: 91px 0 102px; border-block: 1px solid var(--line); background: var(--page-raised); }.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.step-card { min-height: 174px; padding: 22px 19px; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }.step-number { display: block; color: var(--accent); font: 600 11px var(--display); }.step-rule { width: 24px; height: 1px; display: block; margin: 13px auto; background: var(--line-strong); }.step-card h3 { margin: 0 0 8px; font: 600 13px var(--display); }.step-card p { max-width: 245px; margin: 0 auto; color: var(--muted); font-size: 10px; line-height: 1.7; }
.team-section { padding-top: 100px; padding-bottom: 106px; }.founders-grid { width: min(690px,100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 0 auto; }.founder-card { min-height: 117px; display: flex; align-items: center; gap: 16px; padding: 18px; position: relative; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transition: transform .22s,border-color .22s; }.founder-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }.founder-avatar { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 4px; background-color: var(--page-raised); background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 12px 12px; }.founder-avatar span { color: var(--accent); font: 600 32px var(--display); }.founder-avatar i { width: 9px; height: 9px; position: absolute; right: 7px; bottom: 7px; background: var(--mint); }.avatar-two span { color: var(--pink); }.avatar-two i { left: 7px; right: auto; background: var(--accent); }.founder-info { min-width: 0; }.founder-role { color: var(--subtle); font: 500 7px var(--display); letter-spacing: .12em; }.founder-info h3 { margin: 6px 0 0; font: 600 18px var(--display); }.founder-index { position: absolute; top: 12px; right: 13px; color: var(--subtle); font: 500 8px var(--display); }
.contact-section { padding: 82px 0 88px; border-top: 1px solid var(--line); background: var(--page-raised); }.contact-inner { text-align: center; }.contact-inner h2 { font-size: clamp(37px,5vw,52px); }.contact-inner>p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }.social-link { padding: 10px 12px; color: var(--muted); font-size: 10px; }.social-link:hover { color: var(--accent); }.contact-actions { margin-top: 20px; }
.site-footer { min-height: 78px; width: min(1100px,calc(100% - 56px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.footer-copy,.footer-year { color: var(--subtle); font-size: 9px; }.footer-links { display: flex; gap: 17px; color: var(--muted); font-size: 9px; }
.reveal { opacity: 1; transform: none; }.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease,transform .55s cubic-bezier(.2,.75,.25,1); }.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }.service-card:nth-child(2),.step-card:nth-child(2),.founder-card:nth-child(2) { transition-delay: .06s; }.service-card:nth-child(3),.step-card:nth-child(3) { transition-delay: .12s; }.service-card:nth-child(4) { transition-delay: .18s; }
@keyframes cloud-drift { to { translate: 23px 0; } }@keyframes sun-breathe { 50% { box-shadow: 0 0 48px rgba(234,194,151,.27); } }
.page-loader[hidden] { display: none; }.page-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--page); opacity: 0; transition: opacity .28s ease; }.page-loader.is-visible { opacity: 1; }.page-loader.is-leaving { opacity: 0; pointer-events: none; }.loader-content { width: min(240px,70vw); display: flex; align-items: center; flex-direction: column; }.loader-mark { width: 49px; height: 49px; display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }.loader-mark>.logo-fallback { font: 700 27px var(--display); }.loader-mark img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.loader-brand { margin-top: 13px; font: 700 10px var(--display); letter-spacing: .15em; }.loader-caption { margin-top: 31px; color: var(--muted); font-size: 9px; }.loader-track { width: 100%; height: 2px; margin-top: 10px; overflow: hidden; background: var(--line); }.loader-track>span { width: 100%; height: 100%; display: block; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: load-progress .62s ease forwards; }@keyframes load-progress { to { transform: scaleX(1); } }
@media (max-width:900px) { .section-wrap { width: min(100% - 44px,760px); }.site-header { padding-inline: 22px; grid-template-columns: auto 1fr auto; }.main-nav { gap: 14px; font-size: 10px; }.theme-toggle { grid-column: 3; }.hero { min-height: 680px; }.service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.service-card { min-height: 210px; }.site-footer { width: calc(100% - 44px); } }
@media (max-width:680px) { html { scroll-padding-top: 68px; }.section-wrap { width: calc(100% - 36px); }.site-header { min-height: 66px; padding-inline: 18px; grid-template-columns: 1fr auto auto; gap: 9px; }.brand-mark { width: 32px; height: 32px; }.brand-name { font-size: 12px; }.menu-toggle { width: 36px; height: 36px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }.menu-toggle span { width: 14px; height: 1px; background: var(--text); transition: transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }.theme-toggle { grid-column: auto; grid-row: 1; width: 36px; height: 36px; }.main-nav { position: absolute; top: 65px; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 8px 18px 15px; border-bottom: 1px solid var(--line); background: var(--page); }.main-nav.is-open { display: flex; }.main-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 12px; }.main-nav .discord-link { margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line-strong); }.hero { min-height: 0; padding-top: 69px; padding-bottom: 51px; }.eyebrow { font-size: 8px; }.hero h1 { margin: 21px 0 14px; font-size: clamp(45px,12vw,63px); }.hero-lead { max-width: 440px; font-size: 12px; }.hero-actions { margin-top: 21px; gap: 8px; }.button { min-height: 41px; padding-inline: 13px; font-size: 9px; }.hero-art { height: clamp(205px,58vw,285px); margin-top: 35px; }.sun-block { width: 40px; height: 40px; top: 36px; }.hill { height: 112px; width: 84%; }.hill-back { left: 0; }.hill-front { right: -4%; }.art-caption { bottom: 55px; font-size: 7px; }.scroll-cue { margin-top: 16px; }.offer-section { padding-top: 73px; padding-bottom: 77px; }.section-heading { margin-bottom: 27px; }.section-heading h2,.contact-inner h2 { font-size: clamp(32px,8.8vw,43px); }.section-intro { font-size: 11px; }.service-grid { gap: 9px; }.service-card { min-height: 218px; padding: 17px 12px 15px; }.service-icon { width: 34px; height: 34px; margin-bottom: 12px; }.service-card h3 { font-size: 13px; }.service-card p { font-size: 9px; min-height: 58px; }.card-link { font-size: 8px; }.process-section { padding: 73px 0 77px; }.steps-grid { grid-template-columns: 1fr; gap: 8px; }.step-card { min-height: 0; padding: 16px 15px; }.step-rule { margin: 9px auto; }.step-card p { max-width: 310px; }.team-section { padding-top: 75px; padding-bottom: 78px; }.founders-grid { grid-template-columns: 1fr; gap: 8px; }.founder-card { min-height: 96px; padding: 14px; }.founder-avatar { width: 52px; height: 52px; flex-basis: 52px; }.founder-avatar span { font-size: 27px; }.contact-section { padding: 69px 0 74px; }.contact-inner>p:not(.eyebrow) { max-width: 290px; margin-inline: auto; font-size: 11px; line-height: 1.7; }.contact-actions { gap: 6px; }.site-footer { width: calc(100% - 36px); min-height: 0; padding: 18px 0 22px; display: grid; grid-template-columns: 1fr auto; row-gap: 13px; }.site-footer .brand { grid-column: 1; }.footer-copy { grid-column: 1; grid-row: 2; font-size: 8px; }.footer-links { grid-column: 2; grid-row: 1; gap: 11px; font-size: 8px; }.footer-year { grid-column: 2; grid-row: 2; font-size: 8px; text-align: right; } }
@media (max-width:380px) { .section-wrap { width: calc(100% - 30px); }.site-header { padding-inline: 14px; }.brand-name { font-size: 11px; }.hero h1 { font-size: 45px; }.hero-actions { flex-direction: column; }.hero-actions .button { min-width: 190px; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 195px; padding: 17px; }.service-card p { min-height: auto; max-width: 260px; }.card-link { margin-top: 13px; }.site-footer { width: calc(100% - 30px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.has-js .reveal { opacity: 1; transform: none; } }

/* ShadowStudio visual direction inspired by the reference site. */
:root {
  --page: #08080a;
  --page-raised: #0d0d11;
  --surface: #101015;
  --surface-hover: #17151d;
  --text: #f5f3f8;
  --muted: #aaa6b2;
  --subtle: #77727f;
  --line: rgba(235,228,246,.12);
  --line-strong: rgba(235,228,246,.23);
  --accent: #a978ff;
  --accent-strong: #bd9aff;
  --mint: #a978ff;
  --pink: #c495ff;
  --header: rgba(8,8,10,.94);
  --art: #0c0b10;
  --body: "DM Sans", sans-serif;
  --display: "Space Grotesk", sans-serif;
}
:root[data-theme="light"] {
  --page: #f7f6f8;
  --page-raised: #efedf2;
  --surface: #fff;
  --surface-hover: #f3effa;
  --text: #17151b;
  --muted: #5e5965;
  --subtle: #797380;
  --line: rgba(31,24,40,.12);
  --line-strong: rgba(31,24,40,.23);
  --accent: #8750e9;
  --accent-strong: #7440d4;
  --mint: #8750e9;
  --pink: #a069eb;
  --header: rgba(247,246,248,.94);
  --art: #eeeaf4;
}
.site-header { grid-template-columns: 1fr auto auto; min-height: 72px; }
.header-inner { width: min(1200px,100%); min-height: 72px; margin-inline: auto; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 22px; position: relative; }
.brand-mark { border-radius: 3px; }
.brand-name { font-size: 15px; letter-spacing: -.035em; }
.main-nav { font-size: 12px; gap: clamp(18px,2.7vw,34px); }
.nav-discord { padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--text); }
.nav-discord:hover { background: var(--surface); border-color: var(--accent); }
.theme-toggle { border-radius: 3px; }
.hero { min-height: 650px; padding-top: 116px; padding-bottom: 92px; align-items: flex-start; text-align: left; }
.hero-copy { width: min(760px,100%); }
.eyebrow { justify-content: flex-start; font-size: 10px; letter-spacing: .16em; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb,var(--accent) 65%,transparent); }
.eyebrow-slash { color: var(--subtle); }
.hero h1 { max-width: 850px; margin: 27px 0 22px; font-size: clamp(58px,8.6vw,100px); line-height: .99; letter-spacing: -.075em; }
.hero h1 span { color: var(--accent); }
.hero-lead { max-width: 590px; margin: 0; font-size: 15px; line-height: 1.85; }
.hero-actions { justify-content: flex-start; margin-top: 31px; gap: 10px; }
.button { min-height: 48px; padding-inline: 19px; border-radius: 3px; font-size: 12px; }
.button-primary { color: #100b17; }
.button-discord { background: #5365ef; color: white; }
.button-discord:hover { background: #6676ff; }
.button-quiet { border-color: var(--line-strong); color: var(--text); }
.button-quiet:hover { background: var(--surface); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 31px 0 0; list-style: none; }
.tag-list li { padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); font: 500 10px var(--display); letter-spacing: .03em; }
.code-panel { width: min(690px,100%); min-height: 330px; align-self: center; margin-top: 57px; padding: 20px 23px; position: relative; border: 1px solid var(--line-strong); border-radius: 3px; background: #0d0c11; box-shadow: 0 26px 80px rgba(0,0,0,.3); text-align: left; }
:root[data-theme="light"] .code-panel { background: #19171d; color: #f5f3f8; }
.code-panel-head,.code-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #8b8593; font: 500 9px var(--display); letter-spacing: .12em; }
.window-dots { display: flex; gap: 5px; margin-right: auto; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #59535f; }
.window-dots i:first-child { background: #b96875; }.window-dots i:nth-child(2) { background: #d3ad69; }.window-dots i:nth-child(3) { background: #78a987; }
.panel-lang { color: var(--accent); }
.file-tabs { display: flex; gap: 22px; margin-top: 25px; border-bottom: 1px solid rgba(255,255,255,.1); color: #7e7786; font: 500 10px var(--display); }
.file-tabs span { padding: 0 0 11px; }.file-tabs .active-tab { color: #f0eaf8; border-bottom: 1px solid var(--accent); }
.code-content { padding-top: 17px; color: #d8d2df; font: 12px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-content>div { display: flex; gap: 17px; }.code-content i { width: 18px; color: #625d69; font-style: normal; text-align: right; }.code-content b { color: #c39aff; font-weight: 500; }.code-content em { color: #a5d6a7; font-style: normal; }.code-content strong { color: #e6c07b; font-weight: 500; }.code-indent { padding-left: 20px; }.code-comment { color: #77717d; }.code-gap { height: 10px; }
.code-panel-foot { position: absolute; right: 23px; bottom: 18px; left: 23px; font-size: 8px; }
.code-panel-foot>span:first-child { color: #c7c1cf; }.live-dot { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #7ecb91; }
.panel-index { position: absolute; right: 23px; top: 68px; color: #56515d; font: 9px var(--display); }
.hero-bottomline { width: 100%; position: absolute; bottom: 23px; left: 0; display: flex; justify-content: space-between; color: var(--subtle); font: 500 8px var(--display); letter-spacing: .14em; }
.hero-bottomline a { color: var(--muted); }.hero-bottomline a span { margin-left: 7px; color: var(--accent); }
.section { padding-top: 106px; padding-bottom: 110px; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-label { margin: 0; color: var(--accent); font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.section-head h2,.contact-inner h2 { margin: 17px 0 13px; font: 600 clamp(42px,6vw,67px)/1.02 var(--display); letter-spacing: -.07em; }
.section-lead { max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.service-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { min-height: 255px; align-items: flex-start; padding: 25px 23px; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.service-number { position: absolute; top: 25px; right: 22px; color: var(--subtle); font: 500 10px var(--display); }
.service-code { color: var(--accent); font: 500 9px var(--display); letter-spacing: .13em; }
.service-card h3 { margin: 42px 0 10px; font-size: 19px; letter-spacing: -.04em; }
.service-card p { max-width: 270px; min-height: 0; font-size: 12px; line-height: 1.8; }
.service-card>a { margin-top: auto; padding-top: 24px; color: var(--accent); font-size: 11px; font-weight: 600; }
.service-card>a span { margin-left: 6px; }
.service-card:hover { transform: none; background: var(--surface); }
.section-workflow { background: var(--page-raised); border-block: 1px solid var(--line); }
.workflow-list { border-top: 1px solid var(--line); }
.workflow-row { min-height: 112px; display: grid; grid-template-columns: 62px minmax(200px,1fr) minmax(200px,.9fr) 24px; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); }
.workflow-number { color: var(--accent); font: 500 11px var(--display); }
.workflow-row h3 { margin: 0; font: 500 18px var(--display); letter-spacing: -.035em; }
.workflow-row p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.workflow-arrow { color: var(--accent); font-size: 18px; text-align: right; }
.founder-grid { width: 100%; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.founder-card { min-height: 118px; gap: 18px; padding: 20px 22px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.founder-card:hover { transform: none; background: var(--surface); }
.founder-initial { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); font: 600 23px var(--display); }
.founder-initial span { color: var(--accent); }.founder-role { margin: 0; font-size: 9px; letter-spacing: .12em; }.founder-card h3 { margin: 8px 0 0; font: 600 17px var(--display); }.founder-id { position: absolute; top: 22px; right: 22px; color: var(--subtle); font: 10px var(--display); }
.contact-section { border-top: 1px solid var(--line); background: var(--page-raised); }
.contact-inner { display: flex; align-items: end; justify-content: space-between; gap: 30px; text-align: left; }
.contact-inner h2 { margin-bottom: 10px; }.contact-copy { margin: 0; color: var(--muted); font-size: 13px; }.contact-cta { flex: 0 0 auto; margin-bottom: 6px; }
.site-footer { width: 100%; min-height: 90px; padding: 0 max(28px,calc((100% - 1100px)/2)); border-top: 1px solid var(--line); }
.footer-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.footer-copy { color: var(--subtle); font-size: 10px; }.footer-links { display: flex; gap: 20px; color: var(--muted); font-size: 10px; }
@media (max-width:900px) { .hero { min-height: 0; padding-top: 90px; padding-bottom: 96px; }.hero h1 { font-size: clamp(58px,10vw,86px); }.workflow-row { grid-template-columns: 42px minmax(170px,1fr) minmax(170px,1fr) 20px; gap: 14px; }.site-footer { padding-inline: 22px; } }
@media (max-width:680px) { .site-header { min-height: 66px; }.header-inner { min-height: 66px; grid-template-columns: 1fr auto auto; gap: 9px; }.main-nav { top: 65px; background: var(--page); }.hero { padding-top: 75px; padding-bottom: 84px; }.hero h1 { font-size: clamp(48px,12vw,72px); }.hero-lead { font-size: 13px; }.hero-actions { justify-content: flex-start; }.tag-list { margin-top: 23px; }.code-panel { min-height: 300px; margin-top: 38px; padding: 17px 15px; }.code-panel-foot { right: 15px; left: 15px; }.panel-index { right: 15px; }.hero-bottomline { bottom: 20px; font-size: 7px; }.section { padding-top: 78px; padding-bottom: 82px; }.section-head { margin-bottom: 28px; }.section-head h2 { font-size: clamp(38px,10vw,55px); }.section-lead { font-size: 12px; }.service-card { min-height: 225px; padding: 19px 14px; }.service-number { top: 19px; right: 14px; }.service-card h3 { margin-top: 34px; font-size: 15px; }.service-card p { font-size: 10px; }.service-card>a { font-size: 9px; }.workflow-row { min-height: 0; grid-template-columns: 30px 1fr 22px; gap: 10px; padding: 20px 0; }.workflow-row h3 { font-size: 15px; }.workflow-row p { grid-column: 2; font-size: 11px; }.workflow-arrow { grid-column: 3; grid-row: 1 / span 2; }.founder-card { min-height: 96px; padding: 15px; }.founder-id { top: 17px; right: 15px; }.contact-inner { align-items: flex-start; flex-direction: column; gap: 22px; }.contact-copy { font-size: 12px; }.site-footer { width: 100%; padding: 20px 18px; }.footer-inner { width: 100%; flex-wrap: wrap; }.footer-links { gap: 12px; font-size: 9px; }.footer-copy { font-size: 9px; } }
@media (max-width:380px) { .hero-actions { align-items: flex-start; flex-direction: row; }.hero-actions .button { min-width: 0; }.service-card { min-height: 205px; }.footer-links { gap: 8px; } }

.founder-avatar { width: 54px; height: 54px; flex: 0 0 54px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: 2px; filter: saturate(.88); transition: filter .25s,transform .35s; }
.founder-card:hover .founder-avatar { filter: saturate(1.12); transform: scale(1.04); }
.hero-copy.reveal { transform: translateX(-24px); }
.code-panel.reveal { transform: translateX(24px); }
.has-js .reveal.is-visible { animation: rise-and-reveal .7s cubic-bezier(.2,.75,.25,1) both; }
.has-js .hero-copy.reveal.is-visible { animation-name: slide-from-left; }
.has-js .code-panel.reveal.is-visible { animation-name: slide-from-right; animation-delay: .12s; }
.has-js .service-card.reveal:nth-child(2) { animation-delay: .08s; }
.has-js .service-card.reveal:nth-child(3) { animation-delay: .16s; }
.has-js .service-card.reveal:nth-child(4) { animation-delay: .24s; }
.has-js .workflow-row.reveal:nth-child(2) { animation-delay: .1s; }
.has-js .workflow-row.reveal:nth-child(3) { animation-delay: .2s; }
.has-js .founder-card.reveal:nth-child(2) { animation-delay: .14s; }
.contact-cta { transition: transform .25s,box-shadow .25s,background .25s; }
.contact-cta:hover { transform: translateY(-4px); box-shadow: 0 10px 35px color-mix(in srgb,var(--accent) 23%,transparent); }
.brand-mark { transition: transform .35s,border-color .25s; }.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.06); border-color: var(--accent); }
@keyframes rise-and-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.skip-link { position: absolute; z-index: 50; top: -80px; left: 12px; padding: 10px 14px; background: var(--accent); color: #100b17; }
.skip-link:focus { top: 8px; }
@media (max-width:680px) {
  .header-inner>.brand { grid-column: 1; grid-row: 1; }
  .header-inner>.menu-toggle { grid-column: 2; grid-row: 1; }
  .header-inner>.theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
}
.file-tabs { gap: 22px; }
.file-tabs button { margin: 0; padding: 0 0 11px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.file-tabs button.active-tab { color: #f0eaf8; border-bottom-color: var(--accent); }
.file-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.code-viewer { max-height: 158px; margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #65547b rgba(255,255,255,.06); }
.code-viewer:focus-visible { outline: 1px solid color-mix(in srgb,var(--accent) 70%,transparent); outline-offset: 3px; }
.code-viewer::-webkit-scrollbar { width: 6px; }
.code-viewer::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.code-viewer::-webkit-scrollbar-thumb { border-radius: 4px; background: #65547b; }
.code-content { padding-top: 0; }
.code-content[hidden] { display: none; }
@media (max-width:680px) { .code-panel { width: 100%; }.code-viewer { max-height: 150px; }.code-content { font-size: 11px; }.service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:380px) { .service-grid { grid-template-columns: 1fr; } }

.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(7) { animation: generator-tab-in .48s cubic-bezier(.2,.75,.25,1) both; animation-delay: .27s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(8) { animation: generator-tab-in .48s cubic-bezier(.2,.75,.25,1) both; animation-delay: .315s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(9) { animation: generator-tab-in .48s cubic-bezier(.2,.75,.25,1) both; animation-delay: .36s; }
.code-viewer.is-transitioning .code-content:not([hidden]) { animation: code-file-enter .34s cubic-bezier(.2,.75,.25,1) both; }
@keyframes code-file-enter { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.file-generator-tool { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.file-generator-controls,.file-generator-result { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.file-generator-result { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.file-generator-result textarea { min-height: 270px; flex: 1 0 auto; white-space: pre; }
.color-rgb-output { min-width: 0; flex: 1; color: var(--muted); font: 500 8px/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.skript-tool { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.skript-builder,.skript-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.skript-result { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.skript-flow { display: flex; flex-direction: column; align-items: stretch; }
.skript-node { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb,var(--skript-accent,var(--accent)) 28%,var(--line)); border-radius: 16px; background: radial-gradient(ellipse at 10% 0,color-mix(in srgb,var(--skript-accent,var(--accent)) 10%,transparent),transparent 70%),var(--page-raised); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.skript-node-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skript-node-type { color: var(--skript-accent,var(--accent)); font: 600 9px var(--display); letter-spacing: .14em; }
.skript-event-node strong { color: var(--text); font: 600 16px var(--display); }
.skript-node code { width: fit-content; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); font: 11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.skript-node-port { position: absolute; bottom: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid var(--skript-accent,var(--accent)); border-radius: 50%; background: var(--page-raised); }
.skript-connector { height: 34px; display: flex; justify-content: center; }
.skript-connector span { width: 2px; height: 100%; position: relative; background: color-mix(in srgb,var(--skript-accent,var(--accent)) 55%,var(--line)); }
.skript-connector span::after { content: ""; position: absolute; bottom: -1px; left: -4px; width: 8px; height: 8px; border-right: 2px solid var(--skript-accent,var(--accent)); border-bottom: 2px solid var(--skript-accent,var(--accent)); transform: rotate(45deg); }
.skript-actions { display: flex; flex-direction: column; }
.skript-item-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(88px,.35fr); gap: 10px; }
.skript-remove-node { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: 500 10px var(--display); cursor: pointer; }
.skript-remove-node:hover { border-color: #ef7188; color: #ef7188; }
.skript-add-action { align-self: flex-start; }
.skript-result-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skript-valid { color: #79d49a; font: 600 9px var(--display); letter-spacing: .1em; }
.skript-valid.is-invalid { color: #f07b8b; }
.skript-output { min-height: 220px; flex: 1 0 auto; white-space: pre; }
.skript-result .gradient-output-footer { margin-top: auto; }
.skript-node input[aria-invalid="true"] { border-color: #f07b8b; }
@media (max-width:900px) { .skript-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .skript-tool { gap: 10px; padding: 11px; border-radius: 20px; }.skript-result { padding: 12px; }.skript-node { padding: 13px; }.skript-item-fields { grid-template-columns: minmax(0,1fr) 82px; gap: 8px; } }
@media (max-width:900px) { .file-generator-tool { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .page-loader,.code-viewer.is-transitioning .code-content:not([hidden]) { transition: none; animation: none; } }
.page-loader { opacity: 1; backdrop-filter: blur(0); transition: opacity .45s cubic-bezier(.2,.75,.25,1),backdrop-filter .45s ease; }
.page-loader.is-visible { backdrop-filter: blur(10px); }
.page-loader.is-leaving { opacity: 0; backdrop-filter: blur(0); }
.loader-mark { animation: loader-mark-in .55s cubic-bezier(.2,.8,.2,1) both; }
.loader-brand,.loader-caption,.loader-track,.loader-percent { animation: loader-copy-in .45s ease both; }
.loader-brand { animation-delay: .07s; }.loader-caption { animation-delay: .13s; }.loader-track { animation-delay: .18s; }.loader-percent { animation-delay: .22s; }
.loader-track>span { animation: load-progress 1s cubic-bezier(.3,.7,.2,1) both; }
@keyframes loader-mark-in { from { opacity: 0; transform: translateY(10px) scale(.86) rotate(-8deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes loader-copy-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-loader,.loader-mark,.loader-brand,.loader-caption,.loader-track,.loader-percent,.loader-track>span { transition: none; animation: none; } }
.skript-connector span { background-size: 100% 12px; background-image: linear-gradient(to bottom,color-mix(in srgb,var(--accent) 75%,var(--line)) 55%,transparent 0); animation: skript-wire-flow .85s linear infinite; }
@keyframes skript-wire-flow { to { background-position-y: 12px; } }
.skript-node { animation: skript-node-in .35s cubic-bezier(.2,.75,.25,1) both; }
@keyframes skript-node-in { from { opacity: .6; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.motd-color-control input.hex-wheel-input,.lp-hex-control input.hex-wheel-input,.color-input-wrap input.hex-wheel-input,.broadcast-style-row input[type="color"] { width: 44px; height: 44px; flex: 0 0 44px; touch-action: manipulation; }
.motd-color-control { min-height: 52px; }
.color-input-wrap,.lp-hex-control { min-height: 52px; }
.motd-hex-row .gradient-field { width: min(100%,220px); }
.skript-copy:disabled,#skript-copy:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width:400px) { .motd-color-control { gap: 7px; padding-inline: 4px; }.motd-color-control input[type="text"] { width: 64px; }.color-rgb-output { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { .skript-connector span,.skript-node { animation: none; } }
.color-picker-control { position: relative; }
.color-picker-control input.color-wheel-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; flex: 0 0 1px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%); }
.rgb-wheel-picker { position: relative; z-index: 1; width: 32px; height: 32px; flex: 0 0 32px; }
.rgb-wheel-trigger { position: relative; width: 32px; height: 32px; display: block; padding: 0; border: 2px solid var(--page-raised); border-radius: 50%; outline: 1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); background: conic-gradient(#ff4e68,#ffd166,#79df88,#42d9df,#6b83ff,#bd65ed,#ff4e68); cursor: pointer; touch-action: manipulation; transition: transform .2s,outline-color .2s,box-shadow .2s; }
.rgb-wheel-trigger::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--rgb-wheel-color,#a978ff); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.rgb-wheel-trigger:hover,.rgb-wheel-trigger[aria-expanded="true"] { transform: scale(1.08); outline-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.rgb-wheel-trigger:focus-visible,.rgb-wheel-close:focus-visible,.rgb-wheel-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rgb-wheel-popover { position: fixed; z-index: 10000; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px; border: 1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); border-radius: 16px; background: color-mix(in srgb,var(--surface) 96%,#111116); box-shadow: 0 14px 38px rgba(0,0,0,.42),0 0 22px color-mix(in srgb,var(--accent) 11%,transparent); animation: rgb-wheel-open .16s ease-out both; }
.rgb-wheel-popover[hidden] { display: none; }
.rgb-wheel-popover-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rgb-wheel-heading { color: var(--text); font: 600 10px/1.2 var(--display); }
.rgb-wheel-close { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--page-raised); color: var(--muted); font: 17px/1 var(--body); cursor: pointer; }
.rgb-wheel-canvas-wrap { position: relative; width: 132px; height: 132px; display: block; border: 1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius: 50%; background: var(--page-raised); box-shadow: 0 5px 18px rgba(0,0,0,.28); touch-action: none; }
.rgb-wheel-canvas { width: 128px; height: 128px; display: block; border-radius: 50%; cursor: crosshair; touch-action: none; user-select: none; }
.rgb-wheel-marker { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.45); pointer-events: none; transform: translate(-50%,-50%); }
.rgb-wheel-hint { color: var(--muted); font: 9px/1.35 var(--body); text-align: center; }
.rgb-wheel-value-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--page-raised) 82%,transparent); }
.rgb-wheel-swatch { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid rgba(255,255,255,.82); border-radius: 7px; background: var(--rgb-wheel-color,#a978ff); box-shadow: 0 0 12px color-mix(in srgb,var(--rgb-wheel-color,#a978ff) 38%,transparent); }
.rgb-wheel-values { min-width: 0; display: grid; gap: 2px; }
.rgb-wheel-hex { color: var(--text); font: 700 10px/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing: .04em; }
.rgb-wheel-rgb { color: var(--muted); font: 9px/1.2 ui-monospace,SFMono-Regular,monospace; }
.rgb-wheel-trigger[aria-expanded="true"] { outline-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 21%,transparent),0 0 18px color-mix(in srgb,var(--rgb-wheel-color,#a978ff) 32%,transparent); }
@keyframes rgb-wheel-open { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width:400px) { .rgb-wheel-popover { width: 164px; padding: 9px; } .color-picker-control { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .rgb-wheel-popover { animation: none; }.rgb-wheel-trigger { transition: none; } }

:root { --round-panel: 20px; --round-card: 16px; --round-control: 13px; }
.brand-mark { border-radius: 11px; }
.theme-toggle,.menu-toggle { border-radius: 12px; }
.nav-discord { border-radius: 999px; }
.button { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; transition: transform .28s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .28s; }
.button::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.24) 48%,transparent 75%); transform: translateX(-120%); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.button:hover::before { transform: translateX(120%); }
.button:active { transform: translateY(0) scale(.97); }
.button:focus-visible,.theme-toggle:focus-visible,.menu-toggle:focus-visible,.nav-discord:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.code-panel { border-radius: var(--round-panel); transition: border-color .35s,box-shadow .4s,transform .4s; }
.code-panel:hover { border-color: color-mix(in srgb,var(--accent) 42%,var(--line-strong)); box-shadow: 0 30px 85px rgba(0,0,0,.38); }
.code-viewer { border-radius: 11px; }
.file-tabs { border-bottom: 0; gap: 8px; }
.file-tabs button { padding: 8px 12px; border: 1px solid transparent; border-radius: 999px; transition: color .2s,background .2s,border-color .2s,transform .2s; }
.file-tabs button:hover { color: #f0eaf8; background: rgba(255,255,255,.055); transform: translateY(-1px); }
.file-tabs button.active-tab { border-color: color-mix(in srgb,var(--accent) 35%,transparent); border-bottom-color: color-mix(in srgb,var(--accent) 35%,transparent); background: color-mix(in srgb,var(--accent) 14%,transparent); }
.service-grid { gap: 13px; border: 0; }
.service-card { min-height: 255px; padding: 25px 23px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--round-card); background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 75%,transparent),transparent 80%); box-shadow: 0 8px 26px rgba(0,0,0,.08); transition: transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .35s; }
.service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb,var(--accent) 48%,var(--line)); background: var(--surface-hover); box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.service-card h3 { margin-top: 42px; }
.founder-grid { gap: 13px; border: 0; }
.founder-card { border: 1px solid var(--line); border-radius: var(--round-card); transition: transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .35s; }
.founder-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--accent) 42%,var(--line)); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.founder-avatar { border-radius: 13px; }
.hero-copy.reveal { transform: translateX(-38px) scale(.985); }
.code-panel.reveal { transform: translateX(38px) scale(.985); }
.has-js .reveal.is-visible { animation: soft-reveal .9s cubic-bezier(.18,.75,.2,1) both; }
.has-js .hero-copy.reveal.is-visible { animation-name: soft-slide-left; }
.has-js .code-panel.reveal.is-visible { animation-name: soft-slide-right; animation-delay: .12s; }
.has-js .service-card.reveal:nth-child(2) { animation-delay: .08s; }
.has-js .service-card.reveal:nth-child(3) { animation-delay: .16s; }
.has-js .service-card.reveal:nth-child(4) { animation-delay: .24s; }
.has-js .service-card.reveal:nth-child(5) { animation-delay: .32s; }
.has-js .service-card.reveal:nth-child(6) { animation-delay: .4s; }
.has-js .service-card.reveal:nth-child(7) { animation-delay: .48s; }
.has-js .workflow-row.reveal:nth-child(2) { animation-delay: .12s; }
.has-js .workflow-row.reveal:nth-child(3) { animation-delay: .24s; }
.has-js .founder-card.reveal:nth-child(2) { animation-delay: .16s; }
.status-dot { animation: dot-breathe 2.4s ease-in-out infinite; }
@keyframes soft-reveal { from { opacity: 0; filter: blur(6px); transform: translateY(34px) scale(.985); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes soft-slide-left { from { opacity: 0; filter: blur(6px); transform: translateX(-38px) scale(.985); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } }
@keyframes soft-slide-right { from { opacity: 0; filter: blur(6px); transform: translateX(38px) scale(.985); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } }
@keyframes dot-breathe { 50% { box-shadow: 0 0 19px color-mix(in srgb,var(--accent) 70%,transparent); transform: scale(1.12); } }
@media (max-width:680px) {
  .service-grid { gap: 9px; }
  .service-card { min-height: 225px; padding: 19px 14px; }
  .service-card h3 { margin-top: 34px; }
  .founder-grid { gap: 9px; }
  .founder-card { padding: 15px; }
  .button { border-radius: 13px; }
}
.faq-section { scroll-margin-top: 88px; }
.faq-list { width: min(850px,100%); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: var(--text); font: 500 16px/1.45 var(--display); letter-spacing: -.025em; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.faq-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--accent); transition: transform .28s,background .28s,border-color .28s; }
.faq-icon::before { content: "+"; font: 400 20px/1 var(--body); }
.faq-item[open] .faq-icon { transform: rotate(45deg); border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); background: color-mix(in srgb,var(--accent) 12%,transparent); }
.faq-answer { max-width: 710px; padding: 0 52px 22px 0; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.faq-item[open] .faq-answer { animation: faq-answer-in .28s ease-out both; }
.has-js .faq-item.reveal:nth-child(2) { animation-delay: .06s; }
.has-js .faq-item.reveal:nth-child(3) { animation-delay: .12s; }
.has-js .faq-item.reveal:nth-child(4) { animation-delay: .18s; }
.has-js .faq-item.reveal:nth-child(5) { animation-delay: .24s; }
.has-js .faq-item.reveal:nth-child(6) { animation-delay: .3s; }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); gap: 11px; }
.team-member { min-width: 0; min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 13px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 78%,transparent),color-mix(in srgb,var(--surface) 42%,transparent)); transition: transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,background .28s,box-shadow .28s; }
.team-member:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--accent) 48%,var(--line)); background: var(--surface-hover); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.team-member img { width: 46px; height: 46px; flex: 0 0 46px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.team-member h4 { overflow: hidden; margin: 0 0 4px; color: var(--text); font: 500 13px/1.3 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.team-member p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.team-member.founder-member { border-color: color-mix(in srgb,var(--accent) 32%,var(--line)); }
.has-js .reveal.is-up-replay { animation: scroll-up-reveal .48s cubic-bezier(.2,.75,.25,1) both; }
.has-js .team-member.reveal.is-visible.team-revealed { animation: none; opacity: 1; transform: none; }
.has-js .team-member.reveal.is-visible.team-revealed:hover { transform: perspective(850px) rotateX(-2deg) rotateY(2deg) translateY(-4px); }
.has-js .team-member.reveal.is-visible.team-revealed.is-leaning { animation: team-lean-in .68s cubic-bezier(.18,.8,.2,1) var(--lean-delay,0ms) both; transform-origin: 50% 100%; backface-visibility: hidden; }
@keyframes scroll-up-reveal { from { opacity: .78; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .has-js .reveal.is-up-replay { animation: none; } }
@media (max-width:680px) {
  .faq-section { padding-top: 78px; padding-bottom: 82px; }
  .faq-item summary { min-height: 70px; font-size: 14px; }
  .faq-answer { padding: 0 42px 19px 0; }
  .faq-answer p { font-size: 12px; }
}
.gradient-tool-section { scroll-margin-top: 90px; }
.gradient-tool { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.gradient-controls,.gradient-output-wrap { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gradient-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 11px; }
.gradient-field textarea,.gradient-field select,.gradient-output { width: 100%; border: 1px solid var(--line-strong); border-radius: 14px; outline: none; background: var(--page-raised); color: var(--text); font: 12px/1.65 var(--body); transition: border-color .2s,box-shadow .2s; }
.gradient-field textarea,.gradient-output { padding: 12px 14px; resize: vertical; }
.gradient-field textarea { min-height: 78px; }
.gradient-field select { min-height: 44px; padding: 0 12px; }
.gradient-field textarea:focus,.gradient-field select:focus,.gradient-output:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.gradient-colors { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); align-items: end; gap: 10px; }
.gradient-stop-manager { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.gradient-stops { width: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 9px; }
.gradient-stop { min-width: 0; display: flex; align-items: end; gap: 7px; }
.gradient-stop .gradient-field { flex: 1; }
.gradient-stop .color-input-wrap { width: 100%; }
.gradient-stop-remove { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--page-raised); color: var(--muted); font: 400 21px/1 var(--display); cursor: pointer; transition: color .2s,border-color .2s,background .2s,transform .2s; }
.gradient-stop-remove:not(:disabled):hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); background: var(--surface-hover); color: var(--accent); }
.gradient-stop-remove:disabled { opacity: .35; cursor: not-allowed; }
.gradient-add-stop { min-height: 38px; display: inline-flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--page-raised); color: var(--text); font: 500 10px/1 var(--display); cursor: pointer; transition: color .2s,border-color .2s,background .2s,transform .2s; }
.gradient-add-stop span { color: var(--accent); font-size: 16px; }
.gradient-add-stop:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); background: var(--surface-hover); }
.color-input-wrap { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--page-raised); }
.color-input-wrap input { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.color-input-wrap input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input-wrap input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.color-input-wrap output { color: var(--text); font: 500 10px/1 var(--display); letter-spacing: .04em; }
.gradient-swap { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--accent); font-size: 17px; cursor: pointer; transition: transform .22s,border-color .22s,background .22s; }
.gradient-swap:hover { transform: rotate(180deg); border-color: var(--accent); background: var(--surface-hover); }
.gradient-preview-wrap { min-height: 104px; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--page-raised); }
.gradient-label { color: var(--subtle); font: 500 9px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.gradient-preview { min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; margin: 0; overflow-wrap: anywhere; color: var(--text); font: 600 clamp(18px,3vw,27px)/1.35 var(--display); letter-spacing: -.035em; white-space: pre-wrap; }
.gradient-placeholder { color: var(--subtle); font: 400 11px/1.5 var(--body); letter-spacing: 0; }
.gradient-output-wrap { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.gradient-output { min-height: 165px; flex: 1; color: var(--accent-strong); font: 11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
.gradient-output-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gradient-copy-status { color: var(--muted); font-size: 10px; line-height: 1.5; }
.gradient-copy { min-height: 42px; flex: 0 0 auto; border-radius: 13px; }
.gradient-copy:focus-visible,.gradient-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width:900px) { .gradient-tool { grid-template-columns: 1fr; } .gradient-output { min-height: 115px; } }
@media (max-width:680px) { .gradient-tool { gap: 10px; padding: 11px; border-radius: 20px; } .gradient-controls,.gradient-output-wrap { gap: 11px; } .gradient-colors { gap: 7px; } .gradient-output-wrap { padding: 12px; } .gradient-output-footer { align-items: flex-start; flex-direction: column; } }
@media (max-width:400px) { .color-input-wrap { gap: 5px; padding-inline: 5px; } .color-input-wrap input { width: 26px; height: 26px; flex-basis: 26px; } .color-input-wrap output { font-size: 9px; } }
.motd-tool-section { scroll-margin-top: 90px; }
.motd-tool { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.motd-editor,.motd-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.motd-line { min-height: 61px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace !important; }
.motd-palette-wrap,.motd-format-row { display: flex; flex-direction: column; gap: 9px; }
.motd-palette { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; }
.motd-color { min-width: 0; aspect-ratio: 1.35; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: var(--motd-swatch); color: #fff; font-size: 0; cursor: pointer; transition: transform .18s,border-color .18s,box-shadow .18s; }
.motd-color::after { content: attr(data-code); color: #fff; font: 600 9px/1 var(--display); text-shadow: 0 1px 3px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8); }
.motd-color:hover { z-index: 1; transform: translateY(-2px) scale(1.08); border-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.motd-color:focus-visible,.motd-format-buttons button:focus-visible,.motd-hex-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.motd-format-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.motd-format-buttons button { min-width: 36px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--page-raised); color: var(--text); font: 600 12px/1 var(--display); cursor: pointer; transition: color .18s,border-color .18s,background .18s,transform .18s; }
.motd-format-buttons button:last-child { width: auto; color: var(--muted); font-size: 10px; }
.motd-format-buttons button:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); background: var(--surface-hover); color: var(--accent); }
.motd-hex-row { display: flex; align-items: end; gap: 10px; }
.motd-hex-row .gradient-field { width: 100px; }
.motd-hex-row input[type="color"] { width: 100%; height: 39px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--page-raised); cursor: pointer; }
.motd-hex-row .button { min-height: 42px; border-radius: 13px; }
.motd-result { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.motd-server-preview { min-height: 108px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 15px; background: color-mix(in srgb,var(--surface) 86%,#23232a); }
.motd-server-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); border-radius: 11px; background: radial-gradient(circle at 65% 28%,color-mix(in srgb,var(--accent) 43%,transparent),transparent 65%),var(--page-raised); color: var(--text); font: 700 25px/1 var(--display); }
.motd-server-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.motd-server-info strong { overflow: hidden; color: var(--text); font: 600 11px/1.3 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.motd-preview-lines { min-height: 31px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; font: 10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre; }
.motd-preview-lines span { min-height: 14px; overflow: hidden; text-overflow: clip; }
.motd-server-info small { color: var(--subtle); font-size: 8px; }
.motd-player-count { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; color: var(--mint); font-size: 10px; white-space: nowrap; }
.motd-player-count small { color: var(--muted); font-size: 8px; }
.motd-output { min-height: 92px; flex: 0 0 auto; white-space: pre; }
.motd-result .gradient-output-footer { margin-top: auto; }
@media (max-width:900px) { .motd-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .motd-tool { gap: 10px; padding: 11px; border-radius: 20px; } .motd-editor,.motd-result { gap: 11px; } .motd-result { padding: 12px; } .motd-server-preview { grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; padding: 10px; } .motd-server-icon { width: 42px; height: 42px; } }
.prefix-tool-section { scroll-margin-top: 90px; }
.prefix-tool { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.prefix-controls,.prefix-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.prefix-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 14px; outline: none; background: var(--page-raised); color: var(--text); font: 12px/1.6 var(--body); transition: border-color .2s,box-shadow .2s; }
textarea.prefix-input { min-height: 76px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.prefix-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.lp-hex-row { display: flex; align-items: end; gap: 10px; }
.lp-hex-row>.gradient-field { width: min(100%,240px); }
.lp-hex-control { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 5px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--page-raised); transition: border-color .2s,box-shadow .2s; }
.lp-hex-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.lp-hex-control input[type="color"] { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lp-hex-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.lp-hex-control input[type="color"]::-webkit-color-swatch { border: 2px solid var(--line-strong); border-radius: 50%; }
.lp-hex-control input[type="text"] { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.lp-hex-row>.button { min-height: 44px; border-radius: 13px; }
.lp-hex-control input[aria-invalid="true"] { color: #ff7474; }
.prefix-gradient-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--page-raised) 78%,transparent); }
.prefix-gradient-toggle { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 11px; cursor: pointer; }
.prefix-gradient-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.prefix-gradient-block .gradient-stops { padding-top: 2px; }
.prefix-options { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr); gap: 12px; }
.prefix-help,.prefix-note { margin: -4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.prefix-chat-preview { min-height: 74px; display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--page-raised); color: var(--text); font: 500 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
.prefix-player-preview { color: var(--text); }
.prefix-chat-message { color: var(--muted); }
.prefix-command { min-height: 100px; flex: 0 0 auto; color: var(--accent-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.prefix-result .gradient-output-footer { margin-top: auto; }
.prefix-note { padding-top: 2px; }
@media (max-width:900px) { .prefix-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .prefix-tool { gap: 10px; padding: 11px; border-radius: 20px; } .prefix-controls,.prefix-result { gap: 11px; } }
.generators-section { scroll-margin-top: 90px; }
.generator-tabs { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 5px; margin: 0 0 22px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--page-raised); scrollbar-width: thin; }
.generator-tab { min-height: 40px; flex: 0 0 auto; padding: 0 17px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font: 500 11px/1 var(--display); cursor: pointer; transition: color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s; }
.generator-tab:hover { color: var(--text); transform: translateY(-1px); }
.generator-tab.active,.generator-tab[aria-selected="true"] { border-color: color-mix(in srgb,var(--accent) 36%,transparent); background: color-mix(in srgb,var(--accent) 15%,var(--surface)); color: var(--text); box-shadow: 0 5px 18px color-mix(in srgb,var(--accent) 10%,transparent); }
.generator-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.has-js .generator-tabs.reveal.is-visible .generator-tab { animation: generator-tab-in .48s cubic-bezier(.2,.75,.25,1) both; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(2) { animation-delay: .045s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(3) { animation-delay: .09s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(4) { animation-delay: .135s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(5) { animation-delay: .18s; }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(6) { animation-delay: .225s; }
@keyframes generator-tab-in { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
.generator-panel[hidden] { display: none !important; }
.generator-panel[role="tabpanel"]:focus-visible { outline: 2px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset: 8px; border-radius: 16px; }
.generator-panel:not([hidden]) { animation: generator-panel-in .32s cubic-bezier(.2,.75,.25,1) both; }
@keyframes generator-panel-in { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:680px) { .generator-tabs { width: 100%; margin-bottom: 17px; } .generator-tab { min-height: 38px; padding-inline: 13px; font-size: 10px; } }
@keyframes team-lean-in { 0% { opacity: .8; transform: perspective(850px) rotateX(-9deg) rotateY(3deg) translateY(13px) translateZ(-16px) scale(.97); } 55% { opacity: 1; transform: perspective(850px) rotateX(2deg) rotateY(-1deg) translateY(-2px) translateZ(11px) scale(1.025); } 100% { opacity: 1; transform: perspective(850px) rotateX(0) rotateY(0) translateY(0) translateZ(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .has-js .team-member.reveal.is-visible.team-revealed.is-leaning,.has-js .generator-tabs.reveal.is-visible .generator-tab { animation: none; } }
.broadcast-tool { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.broadcast-controls,.broadcast-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.broadcast-style-row { display: grid; grid-template-columns: minmax(100px,150px) repeat(2,minmax(0,1fr)); align-items: end; gap: 9px; }
.broadcast-style-row input[type="color"] { width: 100%; height: 44px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--page-raised); cursor: pointer; }
.broadcast-style-toggle { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--page-raised); color: var(--muted); font-size: 10px; cursor: pointer; }
.broadcast-style-toggle input { width: 15px; height: 15px; accent-color: var(--accent); }
.broadcast-result { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.broadcast-preview { min-height: 110px; display: flex; align-items: center; padding: 18px; overflow-wrap: anywhere; border: 1px solid color-mix(in srgb,var(--accent) 27%,var(--line)); border-radius: 16px; background: radial-gradient(ellipse at 20% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--page-raised); color: var(--text); font: 500 16px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.broadcast-output { min-height: 130px; flex: 0 0 auto; }
.broadcast-result .gradient-output-footer { margin-top: auto; }
@media (max-width:900px) { .broadcast-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .broadcast-tool { gap: 10px; padding: 11px; border-radius: 20px; } .broadcast-controls,.broadcast-result { gap: 11px; } .broadcast-result { padding: 12px; } .broadcast-style-row { grid-template-columns: minmax(90px,.8fr) repeat(2,minmax(0,1fr)); gap: 6px; } .broadcast-style-toggle { gap: 5px; padding-inline: 7px; font-size: 9px; } }
.gradient-stop-hex { width: 88px; min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 10px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gradient-stop-hex[aria-invalid="true"],.motd-color-control input[aria-invalid="true"] { color: #ff7474; }
.motd-color-control { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 5px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--page-raised); transition: border-color .2s,box-shadow .2s; }
.motd-color-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.motd-hex-row .motd-color-control input.hex-wheel-input { width: 36px; height: 36px; flex: 0 0 36px; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 50%; background: conic-gradient(#ff4545,#ffd43b,#54df77,#37d9ed,#536dfe,#c254ed,#ff4545) border-box; cursor: pointer; }
.motd-hex-row .motd-color-control input.hex-wheel-input::-webkit-color-swatch-wrapper,.broadcast-style-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.motd-hex-row .motd-color-control input.hex-wheel-input::-webkit-color-swatch,.broadcast-style-row input[type="color"]::-webkit-color-swatch { border: 1px solid var(--line-strong); border-radius: 50%; }
.motd-color-control input[type="text"] { width: 72px; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 10px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.broadcast-color-control { width: 100%; }
.broadcast-color-field { grid-column: 1 / -1; }
.broadcast-style-row input[type="color"] { width: 36px; height: 36px; padding: 3px; border: 2px solid transparent; border-radius: 50%; background: conic-gradient(#ff4545,#ffd43b,#54df77,#37d9ed,#536dfe,#c254ed,#ff4545) border-box; }
.color-input-wrap input.hex-wheel-input { width: 30px; height: 30px; flex: 0 0 30px; padding: 2px; border: 2px solid transparent; border-radius: 50%; background: conic-gradient(#ff4545,#ffd43b,#54df77,#37d9ed,#536dfe,#c254ed,#ff4545) border-box; }
.color-input-wrap input.hex-wheel-input::-webkit-color-swatch-wrapper { padding: 1px; }
.color-input-wrap input.hex-wheel-input::-webkit-color-swatch { border: 1px solid var(--line-strong); border-radius: 50%; }
.lp-hex-control input.hex-wheel-input { width: 36px; height: 36px; padding: 3px; border: 2px solid transparent; background: conic-gradient(#ff4545,#ffd43b,#54df77,#37d9ed,#536dfe,#c254ed,#ff4545) border-box; }
.lp-hex-control input.hex-wheel-input::-webkit-color-swatch-wrapper { padding: 1px; }
.lp-hex-control input.hex-wheel-input::-webkit-color-swatch { border: 1px solid var(--line-strong); border-radius: 50%; }
.motd-hex-row .gradient-field { width: min(100%,145px); flex: 1; }
.tab-generator-tool { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.tab-generator-controls,.tab-generator-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tab-generator-mode { width: fit-content; max-width: 100%; display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--page-raised); }
.tab-mode-button { min-height: 36px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font: 500 10px/1 var(--display); cursor: pointer; transition: background .2s,color .2s,border-color .2s,transform .2s; }
.tab-mode-button:hover { color: var(--text); transform: translateY(-1px); }
.tab-mode-button.active { border-color: color-mix(in srgb,var(--accent) 36%,transparent); background: color-mix(in srgb,var(--accent) 15%,var(--surface)); color: var(--text); }
.tab-generator-preview { min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 18% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 66%),var(--page-raised); color: var(--text); font: 500 12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.tab-generator-preview strong { padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--accent-strong); font-size: 14px; }
.tab-generator-preview span { min-height: 1.6em; }
.tab-generator-preview .tab-preview-header,.tab-generator-preview .tab-preview-footer { white-space: pre-wrap; }
.tab-generator-output { min-height: 250px; flex: 0 0 auto; white-space: pre; }
.tab-generator-result .gradient-output-footer { margin-top: auto; }
@media (max-width:900px) { .tab-generator-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .tab-generator-tool { gap: 10px; padding: 11px; border-radius: 20px; } .tab-generator-controls,.tab-generator-result { gap: 11px; } .tab-generator-result { padding: 12px; } .tab-generator-mode { width: 100%; } .tab-mode-button { flex: 1; padding-inline: 9px; font-size: 9px; } }
.json-minify-tool { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 92%,transparent)); box-shadow: var(--shadow); }
.json-minify-controls,.json-minify-result { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.json-minify-result { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.json-minify-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.json-minify-size { color: var(--muted); font: 10px/1.5 var(--display); text-align: right; }
.json-minify-output { min-height: 180px; flex: 0 0 auto; overflow-wrap: anywhere; white-space: pre-wrap; }
#json-minify-input[aria-invalid="true"] { border-color: #f06e82; box-shadow: 0 0 0 3px color-mix(in srgb,#f06e82 12%,transparent); }
.json-minify-result .gradient-output-footer { margin-top: auto; }
#json-minify-copy:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width:900px) { .json-minify-tool { grid-template-columns: 1fr; } }
@media (max-width:680px) { .json-minify-tool { gap: 10px; padding: 11px; border-radius: 20px; } .json-minify-controls,.json-minify-result { gap: 11px; } .json-minify-result { padding: 12px; } }
.generator-panel:not([hidden]) .gradient-tool,.generator-panel:not([hidden]) .motd-tool,.generator-panel:not([hidden]) .prefix-tool,.generator-panel:not([hidden]) .broadcast-tool,.generator-panel:not([hidden]) .tab-generator-tool,.generator-panel:not([hidden]) .json-minify-tool,.generator-panel:not([hidden]) .file-generator-tool,.generator-panel:not([hidden]) .skript-tool { animation: creator-tool-arrive .52s cubic-bezier(.2,.75,.25,1) both; }
.generator-panel:not([hidden]) .gradient-controls > *,.generator-panel:not([hidden]) .motd-editor > *,.generator-panel:not([hidden]) .prefix-controls > *,.generator-panel:not([hidden]) .broadcast-controls > *,.generator-panel:not([hidden]) .tab-generator-controls > *,.generator-panel:not([hidden]) .json-minify-controls > * { animation: creator-field-arrive .42s cubic-bezier(.2,.75,.25,1) both; }
.generator-panel:not([hidden]) .gradient-controls > *:nth-child(2),.generator-panel:not([hidden]) .motd-editor > *:nth-child(2),.generator-panel:not([hidden]) .prefix-controls > *:nth-child(2),.generator-panel:not([hidden]) .broadcast-controls > *:nth-child(2),.generator-panel:not([hidden]) .tab-generator-controls > *:nth-child(2),.generator-panel:not([hidden]) .json-minify-controls > *:nth-child(2) { animation-delay: .055s; }
.generator-panel:not([hidden]) .gradient-controls > *:nth-child(3),.generator-panel:not([hidden]) .motd-editor > *:nth-child(3),.generator-panel:not([hidden]) .prefix-controls > *:nth-child(3),.generator-panel:not([hidden]) .broadcast-controls > *:nth-child(3),.generator-panel:not([hidden]) .tab-generator-controls > *:nth-child(3),.generator-panel:not([hidden]) .json-minify-controls > *:nth-child(3) { animation-delay: .1s; }
.generator-panel:not([hidden]) .gradient-controls > *:nth-child(4),.generator-panel:not([hidden]) .motd-editor > *:nth-child(4),.generator-panel:not([hidden]) .prefix-controls > *:nth-child(4),.generator-panel:not([hidden]) .broadcast-controls > *:nth-child(4),.generator-panel:not([hidden]) .tab-generator-controls > *:nth-child(4),.generator-panel:not([hidden]) .json-minify-controls > *:nth-child(4) { animation-delay: .145s; }
@keyframes creator-tool-arrive { from { opacity: .6; transform: translateY(12px) scale(.992); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes creator-field-arrive { from { opacity: .65; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .generator-panel:not([hidden]) .gradient-tool,.generator-panel:not([hidden]) .motd-tool,.generator-panel:not([hidden]) .prefix-tool,.generator-panel:not([hidden]) .broadcast-tool,.generator-panel:not([hidden]) .tab-generator-tool,.generator-panel:not([hidden]) .json-minify-tool,.generator-panel:not([hidden]) .file-generator-tool,.generator-panel:not([hidden]) .skript-tool,.generator-panel:not([hidden]) .gradient-controls > *,.generator-panel:not([hidden]) .motd-editor > *,.generator-panel:not([hidden]) .prefix-controls > *,.generator-panel:not([hidden]) .broadcast-controls > *,.generator-panel:not([hidden]) .tab-generator-controls > *,.generator-panel:not([hidden]) .json-minify-controls > *,.generator-panel:not([hidden]) .file-generator-controls > * { animation: none; } }
html body .motd-hex-row .motd-color-control input.hex-wheel-input,html body .motd-color-control input.hex-wheel-input,html body .lp-hex-control input.hex-wheel-input,html body .color-input-wrap input.hex-wheel-input,html body .broadcast-style-row input[type="color"] { width: 44px; height: 44px; flex: 0 0 44px; touch-action: manipulation; }
html body .motd-color-control,html body .lp-hex-control,html body .color-input-wrap { min-height: 52px; }

.sponsor-section { padding: 70px 0; border-block: 1px solid var(--line); background: radial-gradient(ellipse at 78% 45%,color-mix(in srgb,#0b63f3 12%,transparent),transparent 42%),var(--page-raised); }
.sponsor-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.8fr); align-items: center; gap: clamp(30px,8vw,100px); padding: clamp(25px,5vw,58px); border: 1px solid color-mix(in srgb,#0b63f3 26%,var(--line)); border-radius: 26px; background: color-mix(in srgb,var(--surface) 88%,transparent); box-shadow: var(--shadow); }
.sponsor-copy h2 { margin: 13px 0 15px; font-size: clamp(38px,5vw,58px); line-height: .98; letter-spacing: -.055em; }
.sponsor-copy h2 span { color: #4388ff; }
.sponsor-description { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.sponsor-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 23px; }
.sponsor-code-label { width: 100%; color: var(--subtle); font: 10px/1.4 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.sponsor-code { min-height: 48px; display: inline-flex; align-items: center; gap: 17px; padding: 0 15px; border: 1px dashed color-mix(in srgb,#4388ff 60%,var(--line)); border-radius: 12px; background: color-mix(in srgb,#4388ff 9%,var(--page-raised)); color: var(--text); font: 700 15px/1 var(--display); letter-spacing: .06em; cursor: pointer; transition: border-color .2s,transform .2s,background .2s; }
.sponsor-code:hover { transform: translateY(-1px); border-color: #4388ff; background: color-mix(in srgb,#4388ff 15%,var(--page-raised)); }
.sponsor-code:focus-visible { outline: 2px solid #4388ff; outline-offset: 3px; }
.sponsor-copy-icon { color: #4388ff; font-size: 18px; }
.sponsor-code-status { min-height: 1.4em; color: var(--muted); font-size: 11px; }
.sponsor-cta { margin-top: 22px; }
.sponsor-logo-link { min-height: 180px; display: grid; place-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .25s,border-color .25s; }
.sponsor-logo-link:hover { transform: translateY(-3px); border-color: color-mix(in srgb,#0b63f3 45%,var(--line)); }
.sponsor-logo { display: block; width: min(100%,360px); height: auto; }
@media (max-width:680px) { .sponsor-section { padding: 44px 0; } .sponsor-card { grid-template-columns: 1fr; gap: 25px; padding: 22px; border-radius: 21px; } .sponsor-copy h2 { font-size: clamp(38px,12vw,52px); } .sponsor-logo-link { min-height: 140px; padding: 23px; } .sponsor-logo { width: min(100%,300px); } }

.tab-scoreboard-field,.tab-tablist-field { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--page-raised) 58%,transparent); }
.tab-generator-preview { min-height: 500px; padding: 9px; overflow: hidden; background: #11131a; }
.minecraft-preview-scene { position: relative; min-height: 480px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: linear-gradient(180deg,rgba(16,21,32,.32),rgba(8,12,16,.62)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px),linear-gradient(145deg,#45614b 0%,#364d42 35%,#29313b 63%,#262430 100%); }
.minecraft-preview-scene::before { content: ""; position: absolute; inset: 57% 0 0; background: repeating-linear-gradient(90deg,rgba(20,23,28,.28) 0 31px,rgba(180,183,188,.08) 31px 32px),repeating-linear-gradient(0deg,rgba(12,15,18,.22) 0 31px,rgba(180,183,188,.08) 31px 32px); opacity: .8; }
.minecraft-tablist,.minecraft-scoreboard { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 3px; background: rgba(7,8,12,.88); color: #fff; font: 10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow: 1px 1px #111; transition: border-color .2s,box-shadow .2s,transform .2s; }
.minecraft-tablist { top: 12px; left: 5%; width: 90%; padding: 11px 12px; }
.minecraft-tablist.is-focused,.minecraft-scoreboard.is-focused { border-color: color-mix(in srgb,var(--accent) 80%,white); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent),0 10px 30px rgba(0,0,0,.35); transform: translateY(-2px); }
.minecraft-tab-header,.minecraft-tab-footer { display: grid; justify-items: center; gap: 2px; text-align: center; }
.minecraft-tab-text { min-height: 1em; overflow-wrap: anywhere; }
.minecraft-tab-text.is-empty { min-height: .6em; }
.minecraft-player-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin: 8px 0; }
.minecraft-player { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 3px 4px; background: rgba(30,32,38,.78); color: #e8e8e8; font-size: 9px; }
.minecraft-player-head { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid #c8a47a; background: linear-gradient(90deg,#5b3c2c 0 30%,#e6c6a0 30% 75%,#865d42 75%); image-rendering: pixelated; }
.player-head-1 { border-color: #dba2a6; background: linear-gradient(90deg,#8d523f 0 24%,#f0c9b4 24% 78%,#b9806a 78%); }
.player-head-2 { border-color: #a8d8c0; background: linear-gradient(90deg,#485342 0 25%,#deb58e 25% 75%,#617f68 75%); }
.minecraft-scoreboard { right: 10px; bottom: 12px; width: min(57%,230px); padding: 9px; }
.minecraft-scoreboard-title { margin: 0 0 5px; text-align: center; font-size: 11px; font-weight: 700; }
.minecraft-scoreboard-lines { display: grid; gap: 2px; }
.minecraft-score-line { min-width: 0; display: flex; justify-content: space-between; gap: 6px; overflow-wrap: anywhere; }
.minecraft-score-text,.minecraft-score-value { min-width: 0; }
.minecraft-score-value { color: #ff5555; }
.minecraft-crosshair { position: absolute; top: 52%; left: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%); opacity: .55; }
.minecraft-crosshair::before,.minecraft-crosshair::after { content: ""; position: absolute; background: rgba(255,255,255,.82); box-shadow: 0 0 2px #111; }
.minecraft-crosshair::before { top: 5px; left: 0; width: 12px; height: 2px; }
.minecraft-crosshair::after { top: 0; left: 5px; width: 2px; height: 12px; }
@media (max-width:680px) { .tab-scoreboard-field,.tab-tablist-field { padding: 10px; } .tab-generator-preview { min-height: 460px; padding: 6px; } .minecraft-preview-scene { min-height: 440px; } .minecraft-tablist { left: 3%; width: 94%; padding: 8px; font-size: 9px; } .minecraft-scoreboard { right: 7px; bottom: 9px; width: 61%; padding: 7px; font-size: 9px; } .minecraft-player-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .minecraft-player { font-size: 8px; } }

.tab-scoreboard-field[hidden],.tab-tablist-field[hidden] { display:none!important; }
.tab-scoreboard-field,.tab-tablist-field { animation: tab-field-arrive .24s ease both; }
@keyframes tab-field-arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.minecraft-player-grid { grid-template-columns:repeat(var(--player-columns,3),minmax(0,1fr)); }
.minecraft-player-head { width:24px;height:24px;flex:0 0 24px;image-rendering:pixelated;object-fit:cover;background:#302d38;border:1px solid rgba(255,255,255,.35); }
.skript-material-row { display:flex;align-items:center;gap:9px;min-width:0; }
.skript-material-row .gradient-field { flex:1;min-width:0; }
.skript-material-icon { width:32px;height:32px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
#generator-panel-smallcaps .file-generator-tool { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
#generator-panel-smallcaps .file-generator-controls,#generator-panel-smallcaps .file-generator-result { min-width:0;display:flex;flex-direction:column;gap:12px;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--surface); }
@media(max-width:680px) { #generator-panel-smallcaps .file-generator-tool { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .tab-scoreboard-field,.tab-tablist-field { animation:none; } }
.has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(10) { animation:generator-tab-in .48s cubic-bezier(.2,.75,.25,1) both;animation-delay:.405s; }
@media(prefers-reduced-motion:reduce) { .has-js .generator-tabs.reveal.is-visible .generator-tab:nth-child(10) { animation:none; } }
.generator-tabs { width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;padding:8px;border-radius:16px; }
.generator-tab { justify-content:center;min-height:42px;border-radius:10px;text-align:center;white-space:normal; }
.tab-scoreboard-field.is-leaving,.tab-tablist-field.is-leaving { display:block!important;animation:tab-field-leave .18s ease forwards;pointer-events:none; }
@keyframes tab-field-leave { to { opacity:0;transform:translateY(-6px); } }
.minecraft-preview-scene { background:linear-gradient(180deg,rgba(16,21,32,.18),rgba(8,12,16,.48)),radial-gradient(ellipse at 77% 23%,rgba(244,210,173,.32),transparent 17%),linear-gradient(180deg,#8399a1 0%,#667f80 42%,#40564a 43%,#334638 59%,#2d3036 60%,#202127 100%); }
.minecraft-preview-scene::before { inset:58% 0 0;background:repeating-linear-gradient(90deg,rgba(20,23,28,.30) 0 31px,rgba(180,183,188,.09) 31px 32px),repeating-linear-gradient(0deg,rgba(12,15,18,.26) 0 31px,rgba(180,183,188,.09) 31px 32px); }
@media(max-width:680px) { .generator-tabs { grid-template-columns:repeat(2,minmax(0,1fr));border-radius:16px; } .generator-tab { min-height:40px;padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { .tab-scoreboard-field.is-leaving,.tab-tablist-field.is-leaving { animation:none;opacity:0; } }

/* Generator workspace */
.generator-tabs { max-height: 270px; overflow-y: auto; scrollbar-width: thin; }
.generator-tab { border-radius: 3px; }
.generator-tab:focus-visible,.generator-panel button:focus-visible,.generator-panel input:focus-visible,.generator-panel select:focus-visible,.generator-panel textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skript-action-type { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position: calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.prefix-png-preview { position:relative; isolation:isolate; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--accent) 13%,var(--page-raised)),var(--page)); }
.prefix-png-preview::before,.banner-preview::before { position:absolute; z-index:-1; inset:-24px; content:""; background-image:linear-gradient(rgba(10,8,16,.38),rgba(10,8,16,.38)),var(--artwork-preview); background-position:center; background-size:cover; filter:blur(25px) saturate(1.22); opacity:.78; transform:scale(1.06); }
.prefix-png-preview canvas { position:relative; z-index:1; display:block; width:100%; max-width:640px; height:auto; filter:drop-shadow(0 18px 34px rgba(0,0,0,.34)); }
@media(max-width:700px){.file-generator-tool,.skript-tool{grid-template-columns:1fr}.generator-tabs{max-height:230px}}
.skript-picker { position:relative; }
.skript-native-select { display:none; }
.skript-picker-trigger { width:100%; text-align:left; cursor:pointer; }
.skript-picker-trigger::after { content:""; position:absolute; right:16px; top:calc(50% - 4px); width:7px; height:7px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); transform:rotate(45deg); }
.skript-picker-trigger[aria-expanded="true"]::after { transform:rotate(225deg); top:calc(50% - 1px); }
.skript-picker-options { position:absolute; z-index:8; top:calc(100% + 6px); left:0; width:100%; max-height:270px; overflow:auto; padding:5px; border:1px solid var(--line-strong); background:var(--page-raised); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.skript-picker-option { width:100%; padding:10px 12px; border:0; background:transparent; color:var(--muted); text-align:left; cursor:pointer; }
.skript-picker-option:hover,.skript-picker-option:focus-visible { background:var(--surface-hover); color:var(--text); outline:0; }

.skript-tool,.skript-builder,.skript-flow,.skript-actions,.skript-item-node { overflow: visible; }
.skript-item-node { position: relative; z-index: 1; }
.skript-item-node:has(.skript-picker-trigger[aria-expanded="true"]) { z-index: 30; }
.skript-picker-options { z-index: 40; top: auto; bottom: calc(100% + 7px); max-height: min(270px,45vh); border-radius: 12px; background: var(--page-raised); backdrop-filter: blur(14px); }
.prefix-design-controls input[type="range"] { accent-color: var(--accent); }
.prefix-gradient-toggle { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px; }
.prefix-gradient-toggle input { accent-color:var(--accent); }

.generator-categories { display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px; }
.generator-category { min-height:34px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--page-raised);color:var(--muted);font:500 10px var(--display);cursor:pointer;transition:color .2s,border-color .2s,background .2s; }
.generator-category:hover,.generator-category.active { border-color:var(--line-strong);background:var(--surface-hover);color:var(--text); }
.generator-tab[hidden] { display:none!important; }
.custom-yaml-input { min-height:110px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.yaml-block-editor { display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.yaml-block-editor>.skript-node-head { flex-wrap: wrap; }
.yaml-add-block { min-height: 32px; padding: 0 10px; }
.yaml-block-list { display: flex; flex-direction: column; gap: 10px; }
.yaml-setting-block { padding: 12px; gap: 10px; }
.yaml-setting-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(115px,.7fr); gap: 9px; }
@media (max-width:680px) { .yaml-block-editor { padding: 10px; }.yaml-setting-row { grid-template-columns: 1fr; } }
.yaml-block-editor { display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.yaml-block-editor>.skript-node-head { flex-wrap: wrap; }
.yaml-add-block { min-height: 32px; padding: 0 10px; }
.yaml-block-list { display: flex; flex-direction: column; gap: 10px; }
.yaml-setting-block { padding: 12px; gap: 10px; }
.yaml-setting-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(115px,.7fr); gap: 9px; }
@media (max-width:680px) { .yaml-block-editor { padding: 10px; }.yaml-setting-row { grid-template-columns: 1fr; } }
.yaml-block-editor { display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--page-raised) 75%,transparent); }
.yaml-block-editor>.skript-node-head { flex-wrap: wrap; }
.yaml-add-block { min-height: 32px; padding: 0 10px; }
.yaml-block-list { display: flex; flex-direction: column; gap: 10px; }
.yaml-setting-block { padding: 12px; gap: 10px; }
.yaml-setting-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(115px,.7fr); gap: 9px; }
@media (max-width:680px) { .yaml-block-editor { padding: 10px; }.yaml-setting-row { grid-template-columns: 1fr; } }

.prefix-design-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:13px; }
.prefix-design-controls > .prefix-presets,.prefix-design-controls > .prefix-design-colors,.prefix-design-controls > #png-prefix-text,.prefix-design-controls > #png-prefix-download,.prefix-design-controls > .prefix-note { grid-column:1 / -1; }
.prefix-presets { display:flex; flex-direction:column; gap:9px; }
.prefix-preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.prefix-preset { min-height:61px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:7px; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--page-raised); color:var(--muted); font:500 10px var(--display); cursor:pointer; transition:border-color .18s,background .18s,color .18s,transform .18s; }
.prefix-preset:hover { transform:translateY(-1px); border-color:var(--line-strong); color:var(--text); }
.prefix-preset.active { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--page-raised)); color:var(--text); }
.prefix-preset i { width:24px; height:8px; border:1px solid rgba(255,255,255,.18); border-radius:3px; background:linear-gradient(90deg,var(--preset-bg),var(--preset-accent)); }
.prefix-preset[data-prefix-preset="amethyst"] { --preset-bg:#17151f;--preset-accent:#b58aff; }
.prefix-preset[data-prefix-preset="royal"] { --preset-bg:#17131f;--preset-accent:#d6ac62; }
.prefix-preset[data-prefix-preset="obsidian"] { --preset-bg:#15171b;--preset-accent:#9ca7b6; }
.prefix-preset[data-prefix-preset="ocean"] { --preset-bg:#101a20;--preset-accent:#62c6e8; }
.prefix-preset[data-prefix-preset="ember"] { --preset-bg:#211512;--preset-accent:#f28b55; }
.prefix-preset[data-prefix-preset="verdant"] { --preset-bg:#111b17;--preset-accent:#67c995; }
.prefix-design-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.prefix-design-colors .gradient-field { min-width:0; }
.prefix-design-controls output { float:right; color:var(--accent-strong); font-size:10px; }
.prefix-design-controls input[type="range"] { min-height:26px; padding:0; }
.prefix-png-preview { min-height:260px; }
@media(max-width:680px) { .prefix-preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .prefix-design-controls { gap:11px; } }

.generator-categories { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:6px; border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line)); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--page-raised) 96%,transparent)); box-shadow:0 12px 34px rgba(0,0,0,.12); }
.generator-category { min-height:42px; display:inline-flex; align-items:center; gap:11px; padding:0 15px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--muted); font:500 11px var(--display); cursor:pointer; transition:color .22s,border-color .22s,background .22s,transform .22s,box-shadow .22s; }
.generator-category::before { content:""; width:6px; height:6px; border-radius:50%; background:color-mix(in srgb,var(--accent) 45%,var(--muted)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent); transition:background .22s,box-shadow .22s,transform .22s; }
.generator-category:hover { color:var(--text); border-color:var(--line); background:color-mix(in srgb,var(--surface) 70%,transparent); transform:translateY(-1px); }
.generator-category.active { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent) 6%,var(--page-raised))); color:var(--text); box-shadow:inset 0 1px rgba(255,255,255,.06),0 5px 16px color-mix(in srgb,var(--accent) 10%,transparent); }
.generator-category.active::before { background:var(--accent-strong); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 13px color-mix(in srgb,var(--accent) 60%,transparent); transform:scale(1.08); }
.generator-category:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.generator-tabs { border-radius:18px; background:color-mix(in srgb,var(--page-raised) 88%,transparent); border-color:color-mix(in srgb,var(--accent) 13%,var(--line)); }
.generator-tab.is-entering { animation:category-generator-enter .46s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--tab-order,0) * 42ms); }
@keyframes category-generator-enter { 0% { opacity:0; filter:blur(5px); transform:translateY(10px) scale(.97); } 65% { opacity:1; filter:blur(0); transform:translateY(-1px) scale(1.01); } 100% { opacity:1; transform:translateY(0) scale(1); } }
.prefix-design-controls { gap:14px; padding:18px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:22px; background:radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 45%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--page-raised) 96%,transparent)); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.prefix-design-controls .gradient-field { padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--page-raised) 82%,transparent); color:var(--muted); font-size:10px; transition:border-color .2s,background .2s,transform .2s; }
.prefix-design-controls .gradient-field:focus-within { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); background:color-mix(in srgb,var(--surface) 92%,transparent); transform:translateY(-1px); }
.prefix-design-controls .prefix-presets { padding:14px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--page-raised) 72%,transparent); }
.prefix-preset { min-height:68px; border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--page-raised) 90%,transparent)); }
.prefix-preset:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); }
.prefix-preset.active { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent),0 7px 20px color-mix(in srgb,var(--accent) 10%,transparent); }
.prefix-preset i { width:35px; height:11px; border-radius:5px; box-shadow:0 0 14px color-mix(in srgb,var(--preset-accent) 27%,transparent); }
.prefix-design-colors { grid-template-columns:repeat(4,minmax(0,1fr)); }
.prefix-design-colors .hex-wheel-input { width:100%; height:34px; margin-top:9px; border-radius:9px; }
.prefix-design-controls .prefix-input:not([type="range"]) { min-height:37px; margin-top:8px; border-radius:9px; }
.prefix-design-controls input[type="range"] { accent-color:var(--accent); }
.prefix-design-controls output { padding:3px 7px; border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line)); border-radius:7px; background:color-mix(in srgb,var(--accent) 8%,var(--page-raised)); color:var(--accent-strong); }
.prefix-png-preview { min-height:330px; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); border-radius:22px; box-shadow:0 18px 45px rgba(0,0,0,.2); }
@media(max-width:680px) { .generator-categories { gap:5px; border-radius:15px; } .generator-category { flex:1 1 calc(50% - 5px); justify-content:center; min-height:40px; padding-inline:9px; font-size:10px; } .prefix-design-controls { padding:12px; border-radius:17px; } .prefix-design-colors { grid-template-columns:repeat(2,minmax(0,1fr)); } .prefix-png-preview { min-height:230px; } }
@media(prefers-reduced-motion:reduce) { .generator-category,.generator-category::before,.prefix-design-controls .gradient-field,.prefix-preset { transition:none; } .generator-tab.is-entering { animation:none; } }

.generator-categories { border-radius:999px; padding:7px; }
.generator-category { border-radius:999px; }
.generator-category.active { border-color:color-mix(in srgb,#a978ff 72%,white); background:linear-gradient(135deg,#b889ff,#8252e8 58%,#6d45ce); color:#fff; box-shadow:0 5px 18px rgba(132,82,232,.34),inset 0 1px rgba(255,255,255,.24); }
.generator-category.active::before { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.16),0 0 14px rgba(255,255,255,.65); }
.generator-category:active { transform:scale(.97); }
.generator-tabs { border-radius:22px; }
.generator-tab { border-radius:999px; }
.generator-tab:hover { border-color:color-mix(in srgb,#a978ff 32%,var(--line)); background:color-mix(in srgb,#a978ff 9%,var(--surface)); }
.generator-tab.active,.generator-tab[aria-selected="true"] { border-color:rgba(201,169,255,.88); background:linear-gradient(135deg,#b889ff,#8955ec 58%,#7046d2); color:#fff; box-shadow:0 6px 20px rgba(132,82,232,.33),inset 0 1px rgba(255,255,255,.24); }
.generator-tab:active { transform:scale(.97); }
@media(max-width:680px) { .generator-categories { border-radius:20px; } .generator-category { border-radius:999px; } }

.studio-select { position:relative; display:block; width:100%; margin-top:8px; }
.studio-select-native { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.studio-select-trigger { position:relative; width:100%; min-height:42px; padding:10px 42px 10px 13px; border:1px solid var(--line); border-radius:11px; background:linear-gradient(145deg,var(--surface),var(--page-raised)); color:var(--text); font:500 11px var(--display); text-align:left; cursor:pointer; transition:border-color .2s,box-shadow .2s,background .2s; }
.studio-select-trigger::after { content:""; position:absolute; right:16px; top:calc(50% - 4px); width:7px; height:7px; border-right:1px solid var(--accent-strong); border-bottom:1px solid var(--accent-strong); transform:rotate(45deg); transition:transform .2s; }
.studio-select-trigger[aria-expanded="true"] { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent); }
.studio-select-trigger[aria-expanded="true"]::after { top:calc(50% - 1px); transform:rotate(225deg); }
.studio-select-options { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:100%; max-height:260px; overflow:auto; padding:5px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--page-raised) 96%,#100d18); box-shadow:0 18px 42px rgba(0,0,0,.42); backdrop-filter:blur(16px); }
.studio-select-options[hidden] { display:none; }
.studio-select-option { display:block; width:100%; padding:10px 11px; border:0; border-radius:8px; background:transparent; color:var(--muted); font:500 11px var(--display); text-align:left; cursor:pointer; transition:background .16s,color .16s; }
.studio-select-option:hover,.studio-select-option:focus-visible { outline:0; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--text); }
.studio-select-option[aria-selected="true"] { background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 25%,var(--surface)),color-mix(in srgb,var(--accent) 10%,var(--page-raised))); color:var(--text); }
.item-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.item-config-check { display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--page-raised);color:var(--muted);font-size:11px; }
.item-config-check input { accent-color:var(--accent); }
.prefix-text-preview { display:flex; flex-wrap:wrap;align-items:center;gap:6px 9px;min-height:116px;margin:3px 0 12px;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:16px;background:radial-gradient(ellipse at 12% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58%),var(--page-raised);font:500 14px ui-monospace,SFMono-Regular,Consolas,monospace; }
.prefix-text-preview small { flex-basis:100%;margin-top:7px;color:var(--muted);font:600 9px var(--display);letter-spacing:.14em; }
@media(max-width:680px) { .item-config-grid { grid-template-columns:1fr; } }

.prefix-preset[data-prefix-preset="rose"] { --preset-bg:#21131D;--preset-accent:#F17DB5; }
.prefix-preset[data-prefix-preset="ice"] { --preset-bg:#121C26;--preset-accent:#83D9FF; }
.prefix-preset[data-prefix-preset="crimson"] { --preset-bg:#251316;--preset-accent:#F36B78; }
.prefix-preset[data-prefix-preset="toxic"] { --preset-bg:#182013;--preset-accent:#A8E45C; }
.prefix-preset[data-prefix-preset="sky"] { --preset-bg:#151A2C;--preset-accent:#8D9CFF; }

/* Lżejsze przejścia paneli i czytelniejsze menu */
.main-nav a { position:relative; transition:color .2s ease, background .2s ease, transform .2s ease; }
.main-nav a:not(.nav-discord):hover { transform:translateY(-1px); }
.generator-tab { transition:color .2s ease,background .25s ease,border-color .25s ease,transform .22s cubic-bezier(.2,.75,.25,1); }
.generator-tab:hover { transform:translateY(-2px); }
.prefix-preset { animation:prefix-card-in .42s cubic-bezier(.2,.75,.25,1) both; }
.prefix-preset:nth-child(2n) { animation-delay:.035s; }
.prefix-preset:nth-child(3n) { animation-delay:.07s; }
.prefix-preset i { transition:transform .28s cubic-bezier(.2,.75,.25,1),filter .28s ease; }
.prefix-preset:hover i,.prefix-preset.active i { transform:scaleX(1.12); filter:saturate(1.25); }
.prefix-rgb-output { display:block; margin-top:5px; }
@keyframes prefix-card-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .prefix-preset { animation:none; } .prefix-preset i { transition:none; } }

.prefix-preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.prefix-design-controls > .prefix-gradient-toggle { min-height:42px; display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--page-raised) 82%,transparent); color:var(--muted); font-size:10px; }
.prefix-design-controls > .prefix-gradient-toggle input { accent-color:var(--accent); }
.prefix-preset[data-prefix-preset="sakura"]{--preset-bg:#251520;--preset-accent:#f28eb5}.prefix-preset[data-prefix-preset="sapphire"]{--preset-bg:#11182b;--preset-accent:#598cff}.prefix-preset[data-prefix-preset="copper"]{--preset-bg:#241812;--preset-accent:#d8875d}.prefix-preset[data-prefix-preset="mint"]{--preset-bg:#10211d;--preset-accent:#5bc9a6}.prefix-preset[data-prefix-preset="solar"]{--preset-bg:#291b0c;--preset-accent:#f2c14e}.prefix-preset[data-prefix-preset="nebula"]{--preset-bg:#1d1230;--preset-accent:#b17cff}.prefix-preset[data-prefix-preset="void"]{--preset-bg:#101014;--preset-accent:#777c91}.prefix-preset[data-prefix-preset="lavender"]{--preset-bg:#21172d;--preset-accent:#c6a0f6}.prefix-preset[data-prefix-preset="candy"]{--preset-bg:#281429;--preset-accent:#ec77d5}.prefix-preset[data-prefix-preset="mono"]{--preset-bg:#1d1f23;--preset-accent:#a4a7b3}
@media(max-width:680px){.prefix-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.banner-generator-tool { grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); }
.banner-generator-controls { display:grid; align-content:start; gap:12px; }
.banner-generator-controls,.prefix-design-controls { max-height:min(680px,72vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; padding-right:8px; }
.banner-generator-controls input[type=range] { accent-color:var(--accent); }
.banner-preview { position:relative; isolation:isolate; min-width:0; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--accent) 13%,var(--page-raised)),var(--page)); }
.banner-preview canvas { position:relative; z-index:1; display:block; width:100%; max-width:100%; height:auto; border-radius:8px; box-shadow:0 16px 40px rgba(0,0,0,.28); }
@media(max-width:700px){.banner-generator-tool{grid-template-columns:1fr}}


.banner-generator-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.banner-generator-controls > label,.banner-generator-controls > .gradient-output-footer { min-width:0; }
.banner-generator-controls > .gradient-output-footer { grid-column:1/-1; flex-wrap:wrap; }
@media(max-width:900px){.banner-generator-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.banner-generator-controls{grid-template-columns:minmax(0,1fr)}}

.generator-control-group { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; min-width:0; padding:14px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--page-raised) 78%,transparent); }
.generator-control-group h3 { grid-column:1/-1; margin:0 0 2px; padding-bottom:9px; border-bottom:1px solid var(--line); color:var(--text); font:600 11px var(--display); letter-spacing:.08em; text-transform:uppercase; }
.generator-control-group > .gradient-field,.generator-control-group > .prefix-presets,.generator-control-group > .prefix-design-colors,.generator-control-group > .prefix-gradient-toggle,.generator-control-group > .prefix-note,.generator-control-group > button,.generator-control-group > .gradient-output-footer { min-width:0; }
.generator-control-group > .prefix-presets,.generator-control-group > .prefix-design-colors,.generator-control-group > .prefix-note,.generator-control-group > .symbol-picker,.generator-control-group > button,.generator-control-group > .gradient-output-footer { grid-column:1/-1; }
.generator-control-group > .symbol-picker { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.symbol-picker,.symbol-grid { min-width:0; max-width:100%; box-sizing:border-box; }
.symbol-picker .gradient-field { width:100%; min-width:0; box-sizing:border-box; }
.symbol-picker .gradient-field input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.symbol-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,64px),1fr)); }
.generator-control-group > .prefix-design-colors { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:520px){.generator-control-group{grid-template-columns:minmax(0,1fr);padding:11px}.generator-control-group h3,.generator-control-group > .prefix-presets,.generator-control-group > .prefix-design-colors,.generator-control-group > .prefix-note,.generator-control-group > button,.generator-control-group > .gradient-output-footer{grid-column:1}}