*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior: smooth}:root{--accent: #38c7cc;--gold: #8892a8;--gold-lt: #8892a8;--gold-dk: #b8860b;--crimson: #c0392b;--fire: #e74c3c;--ember: #ff6b35;--violet: #38c7cc;--indigo: #38c7cc;--jade: #2ecc71;--silk: #8892a8;--gold-glow: rgba(255,255,255,.28);--fire-glow: rgba(231,76,60,.32);--ember-glow: rgba(255,107,53,.25);--violet-glow: rgba(56,199,204,.28);--bg: #08080d;--bg1: #0c0d14;--bg2: #0f101c;--glass1: rgba(255,255,255,.04);--glass2: rgba(255,255,255,.07);--glass3: rgba(255,255,255,.12);--tx0: #eef0f4;--tx1: #a3adc2;--tx2: #7d889e;--b1: rgba(255,255,255,.08);--b2: rgba(255,255,255,.14);--bd-gold: rgba(255,255,255,.2);--bd-indigo: rgba(56,199,204,.25);--bd-fire: rgba(192,57,43,.2);--f-display: 'Rajdhani',system-ui,sans-serif;--f-body: 'DM Sans',system-ui,sans-serif;--f-mono: 'JetBrains Mono',monospace;--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;--sp10:40px;--sp12:48px;--sp16:64px;--sp20:80px;--r4:4px;--r6:6px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;--r-full:9999px;--shadow-sm: 0 2px 8px rgba(0,0,0,.55);--shadow-md: 0 4px 20px rgba(0,0,0,.65);--shadow-lg: 0 8px 40px rgba(0,0,0,.75);--shadow-xl: 0 16px 64px rgba(0,0,0,.85);--ease-out: cubic-bezier(.16,1,.3,1);--ease-spring: cubic-bezier(.34,1.56,.64,1);--t-fast:.12s;--t-mid:.22s;--t-slow:.38s;--cyan: var(--gold);--text: var(--tx0);--text-muted: var(--tx2);--bg-hover: rgba(255,255,255,.06);--c: var(--gold);--success: var(--jade);--border: var(--b1);--bg-card: var(--glass2);--cyan-glow: var(--gold-glow);--bc: var(--bd-gold);--bv: rgba(255,255,255,.3);--magenta: var(--ember);--blue: #3b82f6;--emerald: var(--jade);--orange: var(--ember);--primary: var(--indigo);--secondary: var(--violet);--accent: var(--gold);--error: var(--fire);--border-primary: var(--bd-gold);--glow-v: 0 0 32px var(--violet-glow);--glow-c: 0 0 24px var(--gold-glow)}body{font-family: var(--f-body);background: var(--bg);color: var(--tx0);min-height: 100vh;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;line-height: 1.65;overflow-x: hidden;font-size: 16px}img,svg,canvas,video,iframe{max-width: 100%;height: auto;display: block}table{min-width: 0}body::before{content: '';position: fixed;inset: 0;pointer-events: none;z-index: 0;background: rgba(255,255,255,.03)}body::after{content: '';position: fixed;inset: 0;pointer-events: none;z-index: 0;background: rgba(255,255,255,.03);opacity: .4}header,main,footer,section,.viewer-container,.hero,.tools-section,aside,nav{position: relative;z-index: 1}h1,h2,h3,h4,h5,h6{font-family: var(--f-display);font-weight: 700;line-height: 1.2;letter-spacing: 0;color: var(--tx0)}h1{font-size: clamp(1.6rem,4vw,2.4rem);font-weight: 700}h2{font-size: clamp(1.15rem,2.5vw,1.5rem)}h3{font-size: clamp(1rem,2vw,1.2rem)}h4{font-size: .95rem;font-weight: 700}h5,h6{font-size: .85rem;font-weight: 700}p{font-family: var(--f-body);font-size: .93rem;line-height: 1.75;color: var(--tx1);margin-bottom: .85rem}a{color: var(--indigo);transition: color .13s}a:hover{color: var(--violet)}.container{max-width: 1280px;margin: 0 auto;padding: 0 clamp(.85rem,4vw,1.5rem)}.page-wrap{max-width: 1280px;margin: 0 auto;padding: 2rem clamp(.85rem,4vw,1.5rem)}::-webkit-scrollbar{width: 6px;height: 6px}::-webkit-scrollbar-track{background: rgba(6,10,22,.5)}::-webkit-scrollbar-thumb{background: #38c7cc;border-radius: 3px}::-webkit-scrollbar-thumb:hover{background: var(--violet)}::selection{background: rgba(56,199,204,.35);color: var(--tx0)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline: 2px solid rgba(56,199,204,.6);outline-offset: 2px}@keyframes fadeUp{to{opacity: 1;transform: none}}@keyframes float{0%,100%{transform:translateY(0) scale(1)}33%{transform:translateY(-18px) scale(1.03)}66%{transform:translateY(9px) scale(.97)}}@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-15px) scale(1.05)}66%{transform:translate(-10px,10px) scale(.95)}}@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-25px,12px) scale(1.06)}70%{transform:translate(15px,-8px) scale(.94)}}@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(10px,20px) scale(1.04)}60%{transform:translate(-15px,-10px) scale(.96)}}@keyframes dragonShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}@keyframes pulseGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}@keyframes shimmer{to{background-position: 200% center}}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.sr-reveal{opacity: 0;transform: translateY(16px);animation: fadeUp .5s var(--ease-out) both}.sr-reveal[data-delay="1"]{animation-delay: .08s}.sr-reveal[data-delay="2"]{animation-delay: .16s}.sr-reveal[data-delay="3"]{animation-delay: .24s}.sr-reveal[data-delay="4"]{animation-delay: .32s}.grad-text{color: var(--tx0)}.hero{position: relative;padding: 5.5rem 1.5rem 4rem;text-align: center;overflow: hidden}.hero-content{max-width: 780px;margin: 0 auto;position: relative;z-index: 1}.hero-headline{font-family: var(--f-display);font-size: clamp(1.75rem,4vw,2.8rem);font-weight: 700;letter-spacing: 0;line-height: 1.15;margin-bottom: 1.25rem;color: var(--tx0)}.hero-headline .static{color: var(--tx0)}.hero-headline .dynamic,.hero-dynamic{display: inline}.hero-h1-sub{font-size: clamp(.92rem,1.8vw,1.05rem);font-weight: 400;letter-spacing: 0;color: var(--tx1);max-width: 600px;margin: 0 auto 1rem;line-height: 1.7;animation: fadeUp .55s var(--ease-out) .15s both}.hero-h1-sub a{color: var(--indigo);border-bottom: 1px solid rgba(56,199,204,.3);text-decoration: none}.hero-h1-sub a:hover{color: var(--violet)}.hero-sub{font-size: .88rem;color: var(--tx2);max-width: 540px;margin: 0 auto 2rem;line-height: 1.7;animation: fadeUp .55s var(--ease-out) .2s both}.hero-sub a{color: var(--indigo);border-bottom: 1px solid rgba(56,199,204,.25);text-decoration: none}.hero-ctas{display: flex;align-items: center;justify-content: center;gap: .75rem;flex-wrap: wrap;margin-bottom: 3rem;animation: fadeUp .55s var(--ease-out) .25s both}.hero-stats{display: flex;align-items: center;justify-content: center;gap: 2.5rem;flex-wrap: wrap;margin-top: .5rem;animation: fadeUp .55s var(--ease-out) .35s both}.stat-pill{display: flex;flex-direction: column;align-items: center;gap: .15rem}.stat-num{font-family: var(--f-display);font-size: 1.6rem;font-weight: 700;color: var(--tx0);letter-spacing: 0;line-height: 1}.stat-lbl{font-size: .68rem;font-weight: 600;letter-spacing: .02em;color: var(--tx2);margin-top: .2rem}.stat-div{width: 1px;height: 30px;background: var(--b1)}.hero-stats{position: relative;padding: 1.1rem 2.25rem}.hud-corner{position: absolute;width: 12px;height: 12px;border: 0 solid rgba(56,199,204,.4)}.hud-tl{top: 0;left: 0;border-top-width: 2px;border-left-width: 2px;border-radius: 4px 0 0 0}.hud-tr{top: 0;right: 0;border-top-width: 2px;border-right-width: 2px;border-radius: 0 4px 0 0}.hud-bl{bottom: 0;left: 0;border-bottom-width: 2px;border-left-width: 2px;border-radius: 0 0 0 4px}.hud-br{bottom: 0;right: 0;border-bottom-width: 2px;border-right-width: 2px;border-radius: 0 0 4px 0}.btn{display: inline-flex;align-items: center;justify-content: center;gap: .45rem;padding: .65rem 1.5rem;border-radius: 11px;font-family: var(--f-display);font-size: .9rem;font-weight: 700;text-decoration: none;cursor: pointer;border: none;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;letter-spacing: .01em;white-space: nowrap}.btn-primary{background: var(--accent);box-shadow: none;color: #08080d}.btn-primary:hover{box-shadow: none;filter: brightness(1.08)}.btn-secondary{background: rgba(255,255,255,.07);border: 1px solid rgba(255,255,255,.15);color: var(--tx0)}.btn-secondary:hover{background: rgba(255,255,255,.12);border-color: rgba(255,255,255,.25)}.btn-cyan{background: rgba(255,255,255,.03);border: 1px solid rgba(56,199,204,.3);color: #38c7cc}.tools-section{padding: 2rem 0 3.5rem}.section-title{font-family: var(--f-display);font-size: clamp(1.1rem,2.5vw,1.5rem);font-weight: 700;letter-spacing: 0;color: var(--tx0);margin-bottom: 1.5rem;text-align: center}.tools-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(220px,1fr));gap: 1rem;max-width: 1360px;margin: 0 auto;padding: 0 clamp(.85rem,3vw,1.5rem)}.tool-card{display: flex;flex-direction: column;padding: 1.25rem 1.25rem 1rem 1.4rem;background: rgba(10,15,32,.6);border: 1px solid rgba(255,255,255,.07);border-left: 2px solid rgba(255,255,255,.07);border-radius: 10px;text-decoration: none;color: inherit;transition: border-color .18s,background .18s;position: relative}.tool-card:hover{border-color: rgba(255,255,255,.07);border-left-color: var(--indigo);background: rgba(14,20,40,.85)}.tool-icon{font-size: 1.6rem;margin-bottom: .6rem;display: block}.tool-card h3{font-family: var(--f-display);font-size: 1.02rem;font-weight: 700;color: var(--tx0);margin: 0 0 .4rem;letter-spacing: .005em;line-height: 1.25}.tool-card p{font-size: .82rem;line-height: 1.6;color: var(--tx2);margin: 0;flex: 1}.tool-arrow{font-family: var(--f-display);font-size: .75rem;font-weight: 600;color: var(--tx1);margin-top: .75rem;display: block}.tool-card:hover .tool-arrow{color: var(--indigo)}.tool-beta{font-size: .6rem;font-weight: 700;background: rgba(56,199,204,.1);color: #38c7cc;border: 1px solid rgba(56,199,204,.25);border-radius: 20px;padding: .1em .45em;vertical-align: middle;margin-left: .25rem}.badge-new,.badge{display: inline-flex;align-items: center;font-size: .64rem;font-weight: 600;letter-spacing: .01em;padding: .18rem .55rem;border-radius: 20px;background: rgba(56,199,204,.14);color: var(--indigo);border: 1px solid rgba(56,199,204,.3)}.seo-intro{background: rgba(56,199,204,.04);border-top: 1px solid rgba(56,199,204,.1);border-bottom: 1px solid rgba(56,199,204,.1);padding: 2.5rem 1.5rem}.seo-intro-inner{max-width: 760px;margin: 0 auto}.seo-intro-inner h2{font-size: clamp(1rem,2.5vw,1.3rem);color: var(--tx0);margin-bottom: .75rem;font-weight: 700}.seo-intro-inner p{font-size: .92rem;line-height: 1.78;color: var(--tx1)}.seo-intro-inner a{color: var(--indigo);font-weight: 500;border-bottom: 1px solid rgba(56,199,204,.3);text-decoration: none}.seo-intro-inner a:hover{color: var(--violet)}.why-section{padding: 4rem 0}.why-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(240px,1fr));gap: 1.25rem;max-width: 1100px;margin: 0 auto;padding: 0 clamp(.85rem,3vw,1.5rem)}.why-card{padding: 1.5rem;border-radius: 14px;background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.07);transition: border-color .2s,transform .2s}.why-card:hover{border-color: rgba(255,255,255,.18)}.why-icon{font-size: 2rem;margin-bottom: .75rem;display: block}.why-card h3{font-family: var(--f-display);font-size: .95rem;font-weight: 700;margin-bottom: .35rem}.why-card p{font-size: .88rem;line-height: 1.7;color: var(--tx1);margin: 0}.cta-banner{padding: 4rem 1.5rem;text-align: center}.cta-inner{max-width: 600px;margin: 0 auto}.cta-inner h2{font-family: var(--f-display);font-size: clamp(1.4rem,3vw,2rem);font-weight: 700;margin-bottom: .75rem;letter-spacing: 0}.cta-inner p{color: var(--tx1);font-size: .95rem;line-height: 1.7;margin-bottom: 1.5rem}.guides-intro-section{max-width: 920px;margin: 3rem auto 1.5rem;padding: 1.5rem;background: rgba(56,199,204,.04);border: 1px solid rgba(56,199,204,.1);border-radius: 14px;box-sizing: border-box}.guides-intro-inner h2{font-size: clamp(1rem,2.5vw,1.2rem);font-weight: 700;color: var(--tx0);margin-bottom: .65rem}.guides-intro-inner p{font-size: .9rem;line-height: 1.75;color: var(--tx1);margin: 0}.guides-intro-inner a{color: var(--indigo);font-weight: 600;text-decoration: none;border-bottom: 1px solid rgba(56,199,204,.25)}.guides-intro-inner a:hover{color: var(--violet);border-bottom-color: var(--violet)}.pill{display: inline-block;padding: .2rem .6rem;background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.14);border-radius: var(--r-full);font-size: .75rem;color: var(--tx1)}.alert{border-radius: var(--r8);padding: .75rem 1rem;font-size: .85rem;line-height: 1.55}code{font-family: var(--f-mono);font-size: .85em;background: rgba(255,255,255,.08);border: 1px solid rgba(255,255,255,.15);border-radius: 4px;padding: .1em .35em;color: var(--gold)}.code-box{background: rgba(4,6,14,.97);border: 1px solid rgba(255,255,255,.15);border-radius: var(--r12);padding: .85rem 1rem 1.1rem;font-family: var(--f-mono);font-size: .78rem;color: #7ee787;word-break: break-word;white-space: pre-wrap;line-height: 1.65;position: relative}.copy-code-btn{position: absolute;top: .5rem;right: .5rem;background: rgba(255,255,255,.08);border: 1px solid rgba(255,255,255,.2);color: var(--gold);padding: .25rem .65rem;border-radius: 6px;cursor: pointer;font-size: .72rem;font-family: inherit;transition: color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),opacity var(--t-fast),transform var(--t-fast)}.copy-code-btn:hover{background: rgba(255,255,255,.16)}.ch-privacy,.bm-privacy,.ng-privacy{background: rgba(255,255,255,.04);border: 1px solid rgba(255,255,255,.1);border-radius: var(--r8);padding: .7rem 1rem;font-size: .78rem;color: var(--tx1)}.tool-workspace{max-width: 960px;margin: 0 auto;padding: 0 1.5rem 2rem;box-sizing: border-box}.faq-section{max-width: 760px;margin: 0 auto;padding: 1.5rem 1.5rem 2rem}.tool-page-content .section-title,.tool-page-content .faq-section .section-title{text-align: left;font-size: 1.05rem;margin-bottom: 1rem}@media (max-width: 640px){.hero{padding: 4.5rem 1rem 3rem}.hero-headline{font-size: clamp(1.65rem,7vw,2.4rem);letter-spacing: 0}.hero-stats{gap: 1.5rem}.stat-div{display: none}.stat-num{font-size: 1.3rem}.tools-grid{grid-template-columns: repeat(auto-fill,minmax(160px,1fr));gap: .75rem}.why-grid{grid-template-columns: 1fr}.tool-card{padding: 1rem}.tool-card h3{font-size: .9rem}.faq-section{padding-left: .75rem;padding-right: .75rem}.tool-workspace{padding: 0 .9rem 2rem}}@media (max-width: 480px){h1{font-size: clamp(1.35rem,7vw,1.7rem);letter-spacing: 0}h2{font-size: clamp(1.05rem,5vw,1.2rem)}h3{font-size: 1rem}input,select,textarea{font-size: 16px !important}}@media (min-width: 481px){input,select,textarea{font-size: inherit}}.hero{text-align: left;padding: 5rem 1.5rem 4rem}.hero-grid{max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);gap: 3rem;align-items: center}.hero-content{max-width: none;margin: 0}.hero-h1-sub,.hero-sub{margin-left: 0;margin-right: 0}.hero-ctas,.hero-stats{justify-content: flex-start}.hero-stats{padding-left: 0}.hero-preview{position: relative;padding: 1.25rem;background: var(--bg1);border: 1px solid var(--b1);border-radius: 12px}.hero-preview svg{display: block;width: 100%;height: auto;border-radius: 8px}.hero-readout{display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem;margin: 1rem 0 0}.hero-readout dt{font-size: .75rem;color: var(--tx2)}.hero-readout dd{margin: .125rem 0 0;font-family: var(--f-mono);font-size: 1.125rem;color: var(--tx0);font-variant-numeric: tabular-nums}@media (max-width: 900px){.hero-grid{grid-template-columns: 1fr;gap: 2rem}.hero{padding: 3.5rem 1rem 2.5rem}}.viewer-container{max-width: 1280px;margin: 0 auto;padding: 0 1.5rem 2rem;display: block;box-sizing: border-box}@media (max-width: 768px){.viewer-container{padding: 0 .9rem 1.5rem}}.viewer-header{grid-column: 1 / -1;text-align: center;padding: var(--sp10,2.5rem) 0 var(--sp6,1.5rem);animation: fadeUp .5s var(--ease-out,ease) both}.viewer-header h1{font-family: var(--f-display,'Outfit',sans-serif);font-size: clamp(1.75rem,4vw,2.75rem);font-weight: 700;letter-spacing: -.04em;margin-bottom: .6rem}.viewer-header p{font-size: 1rem;color: var(--tx1,#7b91b0);max-width: 560px;margin: 0 auto;line-height: 1.65}.controls-panel,.control-panel,.search-form{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.1);border-radius: 18px;padding: 1.4rem;backdrop-filter: blur(20px) saturate(1.5);-webkit-backdrop-filter: blur(20px) saturate(1.5);box-shadow: 0 4px 24px rgba(0,0,0,.55);position: relative}.controls-panel::before{content: '';position: absolute;top: 0;left: 12%;right: 12%;height: 1px;background: rgba(255,255,255,.08)}.controls-panel h3,.controls-panel .section-label,.control-panel h3{font-size: .68rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);margin: .9rem 0 .5rem;padding-bottom: .3rem;border-bottom: 1px solid rgba(255,255,255,.1)}.range-row{display: flex;align-items: center;gap: .6rem;margin-bottom: .7rem}.range-row label{min-width: 85px;color: var(--tx1,#7b91b0);font-size: .82rem}.range-row input[type=range]{flex: 1}.range-val{min-width: 32px;text-align: right;color: var(--gold,#8892a8);font-size: .82rem;font-weight: 700;font-family: var(--f-mono,'JetBrains Mono',monospace)}.color-row{display: flex;gap: .5rem;flex-wrap: wrap;margin: .5rem 0}.color-swatch{width: 28px;height: 28px;border-radius: 6px;cursor: pointer;border: 2px solid transparent;transition: border-color .14s,transform .14s}.color-swatch.active,.color-swatch:hover{border-color: var(--gold,#8892a8);box-shadow: none}.color-pickers{display: grid;grid-template-columns: 1fr 1fr;gap: .6rem;margin: .6rem 0}.color-pickers label{display: block;font-size: .68rem;font-weight: 700;letter-spacing: 0;color: var(--tx2,#3d5070);margin-bottom: .3rem}.input-group{margin-bottom: .85rem}.input-group label{display: block;font-size: .78rem;font-weight: 600;color: var(--tx1,#7b91b0);margin-bottom: .3rem}.fl{display: block;font-size: .78rem;font-weight: 600;color: var(--tx1,#7b91b0);margin-bottom: .35rem}.tab-row,.game-tabs,.shape-tabs,.preset-themes{display: flex;gap: .4rem;flex-wrap: wrap;margin-bottom: .5rem}.tab-btn,.game-tab,.shape-tab,.theme-btn,.preset-btn{padding: .35rem .8rem;border-radius: 8px;border: 1px solid rgba(255,255,255,.1);background: rgba(255,255,255,.04);color: var(--tx1,#7b91b0);cursor: pointer;font-size: .82rem;font-weight: 500;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;font-family: inherit}.tab-btn:hover,.game-tab:hover:not(.active),.shape-tab:hover:not(.active),.theme-btn:hover:not(.active),.preset-btn:hover{border-color: rgba(255,255,255,.3);color: var(--tx0,#f0f4ff);background: rgba(255,255,255,.08)}.tab-btn.active,.game-tab.active,.shape-tab.active,.theme-btn.active{background: rgba(255,255,255,.08);color: #fff;border-color: transparent;box-shadow: none}.preset-grid,.style-grid{display: grid;grid-template-columns: repeat(4,1fr);gap: .4rem;margin: .5rem 0}.preset-btn small{display: block;font-size: .85em;margin-top: .1rem;opacity: .7}.ch-checks,.check-group{display: flex;flex-wrap: wrap;gap: .5rem .85rem}.ch-checks label,.check-group label{display: flex;align-items: center;gap: .35rem;color: var(--tx1,#7b91b0);font-size: .82rem;cursor: pointer;user-select: none}.ch-actions,.btn-row,.export-row,.bm-download-row{display: grid;grid-template-columns: 1fr 1fr;gap: .6rem;margin-top: 1rem}.btn-row.single,.bm-download-row.single{grid-template-columns: 1fr}.preview-bg-select{position: absolute;top: .85rem;right: .85rem;background: rgba(6,10,22,.9);backdrop-filter: blur(8px);border: 1px solid rgba(255,255,255,.15);color: var(--tx0,#f0f4ff);padding: .28rem .6rem;border-radius: 7px;font-size: .78rem;cursor: pointer;outline: none;z-index: 5}.keyboard-wrap{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.1);border-radius: 16px;padding: 1.5rem;overflow-x: auto;box-shadow: 0 4px 24px rgba(0,0,0,.5)}.kb-row{display: flex;gap: 5px;margin-bottom: 5px}.key{min-width: 44px;height: 44px;background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: .72rem;font-family: var(--f-mono,monospace);color: var(--tx1,#7b91b0);cursor: pointer;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s;user-select: none;box-shadow: 0 2px 4px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.04) inset}.key:hover{border-color: rgba(255,255,255,.25);color: var(--gold,#8892a8);transform: translateY(-1px);box-shadow: 0 4px 10px rgba(0,0,0,.5)}.key.selected,.key.active{background: rgba(255,255,255,.08);border-color: var(--gold,#8892a8);color: var(--gold,#8892a8);box-shadow: none}.key.wide{min-width: 66px}.key.wider{min-width: 88px}.key.widest{min-width: 110px}.space-key{flex: 1}.guide-card{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: 16px;padding: 1.4rem;text-decoration: none;color: inherit;transition: border-color .2s,transform .22s,box-shadow .22s;position: relative;overflow: hidden}.guide-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: rgba(255,255,255,.08);opacity: 0;transition: opacity .2s}.guide-card:hover{border-color: rgba(255,255,255,.22);box-shadow: 0 12px 36px rgba(0,0,0,.6);opacity: 1}.guide-card:hover::before{opacity: 1}.accordion{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: 14px;overflow: hidden;margin-bottom: .6rem;transition: border-color .18s}.accordion.open{border-color: rgba(255,255,255,.2)}.accordion-header{display: flex;align-items: center;justify-content: space-between;padding: 1rem 1.25rem;cursor: pointer;font-size: .95rem;font-weight: 600;color: var(--tx0,#f0f4ff);user-select: none}.accordion-header:hover{color: var(--gold,#8892a8)}.acc-icon{transition: transform .22s;color: var(--tx2,#3d5070)}.accordion.open .acc-icon{transform: rotate(180deg);color: var(--gold,#8892a8)}.accordion-body{display: none;padding: 0 1.25rem 1.1rem;font-size: .9rem;color: var(--tx1,#7b91b0);line-height: 1.7;border-top: 1px solid rgba(255,255,255,.06)}.accordion.open .accordion-body{display: block}.platform-card{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: 14px;padding: 1.25rem;cursor: pointer;transition: border-color .18s,background .18s}.platform-card:hover,.platform-card.active{border-color: rgba(255,255,255,.28);background: rgba(255,255,255,.08)}.platform-dims{font-size: .72rem;color: var(--tx2,#3d5070);font-family: var(--f-mono,monospace);margin-top: .25rem}.name-display{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.1);border-radius: 18px;padding: 1.5rem;min-height: 280px;display: flex;flex-direction: column}.ng-card{background: rgba(255,255,255,.05);border: 1px solid rgba(255,255,255,.1);border-radius: 10px;padding: .7rem 1rem;cursor: pointer;font-size: .95rem;font-weight: 600;color: var(--tx0,#f0f4ff);transition: border-color .14s,background .14s,transform .14s}.ng-card:hover{border-color: rgba(255,255,255,.3);background: rgba(255,255,255,.1);transform: translateX(4px)}.cat-chip,.guide-cat-tag{display: inline-flex;align-items: center;gap: .3rem;padding: .22rem .65rem;background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.15);border-radius: var(--r-full,9999px);font-size: .72rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);cursor: pointer;transition: background .14s,border-color .14s}.cat-chip:hover,.cat-chip.active,.guide-cat-tag:hover,.guide-cat-tag.active{background: rgba(255,255,255,.14);border-color: rgba(255,255,255,.35)}.bind-key-chip{display: inline-flex;align-items: center;gap: .25rem;padding: .15rem .5rem;background: rgba(192,57,43,.12);border: 1px solid rgba(192,57,43,.3);border-radius: 6px;font-size: .75rem;font-family: var(--f-mono,monospace);color: var(--ember,#ff6b35)}.upload-zone{border: 2px dashed rgba(255,255,255,.2);border-radius: 12px;padding: 2rem;text-align: center;cursor: pointer;transition: border-color .18s,background .18s;color: var(--tx2,#3d5070)}.upload-zone:hover,.upload-zone.drag-over{border-color: rgba(255,255,255,.45);background: rgba(255,255,255,.04);color: var(--tx1,#7b91b0)}.size-table{width: 100%;border-collapse: collapse;font-size: .85rem}.size-table th{text-align: left;padding: .5rem .75rem;font-size: .68rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);border-bottom: 1px solid rgba(255,255,255,.14)}.size-table td{padding: .5rem .75rem;border-bottom: 1px solid rgba(255,255,255,.04);color: var(--tx1,#7b91b0)}.size-table tr:hover td{background: rgba(255,255,255,.03)}@media (max-width: 900px){.viewer-container{grid-template-columns: 1fr}.preset-grid,.style-grid{grid-template-columns: repeat(4,1fr)}.ch-actions,.btn-row,.export-row{grid-template-columns: 1fr 1fr}}@media (max-width: 640px){.viewer-container{padding: 0 1rem}.preset-grid{grid-template-columns: repeat(4,1fr)}}.crosshair-layout,.bm-layout{display: grid;grid-template-columns: 320px 1fr;gap: 1.5rem;align-items: start}.palette-layout,.kit-grid{display: grid;grid-template-columns: 280px 1fr;gap: 1.5rem;align-items: start}.ng-layout{display: grid;grid-template-columns: 1fr 360px;gap: 1.5rem;align-items: start}.tool-layout{display: grid;grid-template-columns: 340px 1fr;gap: 2rem;max-width: 1200px;margin: 2rem auto;padding: 0 1.5rem}.kb-layout{display: flex;flex-direction: column;gap: 2rem}@media (max-width: 900px){.crosshair-layout,.bm-layout,.palette-layout,.kit-grid,.ng-layout,.tool-layout{grid-template-columns: 1fr}}.bm-canvas-wrap{width: 100%;border-radius: 14px;border: 1px solid var(--bd-gold);background: #080c1a;box-shadow: var(--shadow-lg);display: block;overflow: hidden;position: relative}.bm-download-row{display: grid;grid-template-columns: 1fr 1fr;gap: .6rem;margin-top: 1rem}.bm-color-grid{display: flex;flex-wrap: wrap;gap: .4rem;margin: .4rem 0}.preview-area{display: flex;flex-direction: column;align-items: center;gap: 1rem}.pfp-preview-wrap{width: 300px;height: 300px;border-radius: 16px;overflow: hidden;background: rgba(255,255,255,.03);border: 1px solid var(--bd-gold,rgba(255,255,255,.18));box-shadow: var(--shadow-lg);display: flex;align-items: center;justify-content: center;position: relative}.pfp-preview-wrap canvas{width: 100%;height: 100%;display: block}.logo-canvas{width: 100%;max-width: 500px;margin: 2rem auto;display: block;border-radius: 12px;box-shadow: var(--shadow-xl)}.style-btn{background: rgba(255,255,255,.04);border: 1px solid rgba(255,255,255,.1);border-radius: 10px;padding: .55rem;cursor: pointer;font-size: .78rem;color: var(--tx1);text-align: center;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s;font-family: inherit}.style-btn:hover,.style-btn.active{border-color: rgba(255,255,255,.35);color: var(--gold);background: rgba(255,255,255,.1)}.name-display-btns{display: flex;gap: .5rem;flex-wrap: wrap;margin-top: auto;padding-top: 1rem}.ng-input{width: 100%;background: rgba(6,10,22,.9);border: 1px solid rgba(255,255,255,.15);border-radius: 8px;color: var(--tx0);font-family: var(--f-body);font-size: 1rem;padding: .65rem .85rem;outline: none;transition: border-color .12s,box-shadow .12s;margin-bottom: .75rem}.ng-input:focus{border-color: var(--gold);box-shadow: none}.ng-privacy{background: rgba(255,255,255,.04);border: 1px solid rgba(255,255,255,.1);border-radius: 8px;padding: .7rem 1rem;font-size: .78rem;color: var(--tx1)}.swatch-row{display: flex;gap: 0;border-radius: 12px;overflow: hidden;height: 80px;margin: 1.5rem 0;box-shadow: var(--shadow-md);cursor: pointer}.swatch{flex: 1;display: flex;align-items: flex-end;justify-content: center;padding-bottom: 6px;font-size: .6rem;font-weight: 700;letter-spacing: 0;text-shadow: 0 1px 3px rgba(0,0,0,.8);opacity: .8;transition: opacity .14s,flex .22s}.swatch:hover{opacity: 1;flex: 1.4}.mini-swatches{display: flex;gap: 2px;border-radius: 6px;overflow: hidden;height: 20px;margin-top: .5rem}.mini-swatch{flex: 1}.guide-header{margin-bottom: 2rem}.guide-header h1{font-size: clamp(1.6rem,4vw,2.4rem);font-weight: 600;letter-spacing: -.04em;margin-bottom: .5rem}.guide-category{font-size: .72rem;font-weight: 700;letter-spacing: 0;color: var(--gold);margin-bottom: .4rem}.guide-content{background: rgba(255,255,255,.03);border: 1px solid var(--bd-gold);border-radius: 18px;padding: 2rem;line-height: 1.8;color: var(--tx1);position: relative}.guide-content::before{content: '';position: absolute;top: 0;left: 8%;right: 8%;height: 1px;background: rgba(255,255,255,.08)}.guide-content h2{font-size: 1.2rem;font-weight: 700;color: var(--tx0);margin: 1.5rem 0 .6rem;padding-bottom: .4rem;border-bottom: 1px solid rgba(255,255,255,.12)}.guide-content h3{font-size: 1rem;font-weight: 700;color: var(--gold);margin: 1.2rem 0 .4rem}.guide-content p{margin-bottom: 1rem}.guide-content ul,.guide-content ol{padding-left: 1.5rem;margin-bottom: 1rem}.guide-content li{margin-bottom: .4rem}.guide-cats{display: flex;gap: .4rem;flex-wrap: wrap;margin: 1.5rem 0;justify-content: center}.guides-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap: 1.25rem;margin-top: 2rem}.privacy-container{max-width: 800px;margin: 2.5rem auto;padding: 0 1.5rem}.action-btn{display: inline-flex;align-items: center;justify-content: center;gap: .45rem;padding: .55rem 1.1rem;border-radius: 10px;background: #38c7cc;border: none;color: #fff;font-family: var(--f-display,sans-serif);font-size: .84rem;font-weight: 700;cursor: pointer;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;white-space: nowrap;box-shadow: none;letter-spacing: -.01em;color: #08080d}.action-btn:hover{box-shadow: none;filter: brightness(1.08)}.action-btn:active{transform: translateY(0);box-shadow: none}.bm-sect{font-size: .68rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);margin: 1rem 0 .55rem;padding-bottom: .3rem;border-bottom: 1px solid rgba(255,255,255,.12)}.bm-sect:first-child{margin-top: 0}.banner-canvas{width: 100%;height: auto;display: block}.bm-preview-col{display: flex;flex-direction: column;gap: 1rem}.bm-toggle-row{display: flex;align-items: center;justify-content: space-between;padding: .5rem 0;font-size: .85rem;color: var(--tx1,#7b91b0)}.template-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: .4rem;margin: .5rem 0}.template-btn{padding: .4rem .5rem;border-radius: 8px;text-align: center;border: 1px solid rgba(255,255,255,.1);background: rgba(255,255,255,.04);color: var(--tx1,#7b91b0);cursor: pointer;font-size: .78rem;font-weight: 500;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;font-family: inherit}.template-btn:hover{border-color: rgba(255,255,255,.3);color: var(--tx0,#f0f4ff);background: rgba(255,255,255,.08)}.template-btn.active{background: rgba(255,255,255,.08);color: #fff;border-color: transparent;box-shadow: none}.bm-input{width: 100%;background: rgba(6,10,22,.9);border: 1px solid rgba(255,255,255,.14);border-radius: 8px;color: var(--tx0,#f0f4ff);font-family: var(--f-body,sans-serif);font-size: .9rem;padding: .55rem .75rem;outline: none;transition: border-color .12s,box-shadow .12s}.bm-input:focus{border-color: var(--gold,#8892a8);box-shadow: none}.ch-preview-col{display: flex;flex-direction: column;gap: 1rem;align-items: center}.tab-content{display: none}.tab-content.active{display: block}.color-codes{display: flex;flex-wrap: wrap;gap: .5rem;margin: .75rem 0;padding: .75rem;background: rgba(6,10,22,.8);border: 1px solid rgba(255,255,255,.1);border-radius: var(--r8)}.color-item{display: flex;align-items: center;gap: .65rem;padding: .55rem .75rem;border-radius: 10px;background: rgba(10,15,32,.9);border: 1px solid rgba(255,255,255,.08);cursor: pointer;transition: border-color .15s,transform .15s}.color-item:hover{border-color: rgba(255,255,255,.25)}.color-preview{width: 32px;height: 32px;border-radius: 6px;flex-shrink: 0;box-shadow: 0 2px 6px rgba(0,0,0,.4)}.color-info{display: flex;flex-direction: column;gap: .15rem}.color-hex{font-family: var(--f-mono,monospace);font-size: .82rem;font-weight: 700;color: var(--gold,#8892a8)}.color-name{font-size: .72rem;color: var(--tx2,#3d5070)}.section-title-sm{font-size: .68rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);margin: .9rem 0 .45rem;padding-bottom: .3rem;border-bottom: 1px solid rgba(255,255,255,.12)}button.primary,.btn.primary,.kb-export-btn.primary{background: #38c7cc;color: #fff !important;border-color: transparent !important;box-shadow: none;color: #08080d}button.secondary,.btn.secondary{background: rgba(255,255,255,.05) !important;border-color: rgba(255,255,255,.18) !important;color: var(--tx1,#7b91b0) !important}.btn-export{display: inline-flex;align-items: center;gap: .4rem;padding: .55rem 1.1rem;border-radius: var(--r8);background: rgba(255,255,255,.03);color: #1a0800;font-weight: 700;font-size: .85rem;font-family: inherit;border: none;cursor: pointer;box-shadow: none;transition: transform .12s,box-shadow .12s}.btn-export:hover{box-shadow: none}.platform-cards-col{display: flex;flex-direction: column;gap: .5rem}.preview-canvas{width: 100%;border-radius: 14px;border: 1px solid var(--bd-gold,rgba(255,255,255,.18));background: #080c1a;box-shadow: 0 4px 24px rgba(0,0,0,.5);display: block}.export-all-btn{width: 100%;padding: .65rem;background: rgba(255,255,255,.03);color: #1a0800;font-weight: 700;border: none;border-radius: var(--r8);cursor: pointer;font-size: .9rem;font-family: inherit;box-shadow: none;transition: transform .12s,box-shadow .12s;margin-top: .5rem}.export-all-btn:hover{box-shadow: none}.small-btn{padding: .3rem .7rem;border-radius: 7px;font-size: .78rem;font-weight: 600;background: rgba(255,255,255,.07);border: 1px solid rgba(255,255,255,.18);color: var(--gold,#8892a8);cursor: pointer;font-family: inherit;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s}.small-btn:hover{background: rgba(255,255,255,.15);border-color: rgba(255,255,255,.35)}.ng-hint{font-size: .75rem;color: var(--tx2,#3d5070);margin-top: .25rem}.suggestions{display: flex;flex-wrap: wrap;gap: .4rem;margin: .75rem 0}.kb-topbar{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1rem;margin-bottom: 1rem;align-items: start}@media (max-width: 900px){.kb-topbar{grid-template-columns: 1fr}}.kb-topbar-left,.kb-topbar-mid,.kb-topbar-right{display: flex;flex-direction: column;gap: .4rem}.kb-sect-label{font-size: .65rem;font-weight: 700;letter-spacing: 0;color: var(--tx2,#3d5070);margin-bottom: .2rem}.kb-keyboard-row{overflow-x: auto;margin: .5rem 0;padding-bottom: .5rem}.kb-scroll-hint{font-size: .72rem;color: var(--tx2,#3d5070);text-align: center;margin-bottom: .4rem}.kb-bottom{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: var(--r12);padding: 1.1rem;margin-top: 1rem}.kb-bindlist-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: .75rem}.kb-count{font-size: .75rem;font-weight: 700;color: var(--gold,#8892a8);background: rgba(255,255,255,.08);border: 1px solid rgba(255,255,255,.18);border-radius: 20px;padding: .15rem .6rem}.bind-list{display: flex;flex-direction: column;gap: .35rem;min-height: 60px}.bind-item{display: flex;align-items: center;gap: .65rem;padding: .5rem .75rem;border-radius: 8px;background: rgba(8,12,26,.8);border: 1px solid rgba(255,255,255,.07);font-size: .85rem;transition: border-color .14s}.bind-item:hover{border-color: rgba(255,255,255,.2)}.bind-del{margin-left: auto;background: rgba(231,76,60,.1);border: 1px solid rgba(231,76,60,.25);color: var(--fire,#e74c3c);border-radius: 6px;padding: .15rem .5rem;cursor: pointer;font-size: .75rem;font-family: inherit;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s}.bind-del:hover{background: rgba(231,76,60,.2)}.bind-input-row{display: flex;gap: .5rem;align-items: center}.kb-assign-btn{padding: .45rem .9rem;border-radius: 8px;white-space: nowrap;background: rgba(255,255,255,.03);color: #fff;border: none;font-weight: 600;font-size: .82rem;font-family: inherit;cursor: pointer;transition: transform .12s,box-shadow .12s}.kb-assign-btn:hover{box-shadow: none}.kb-export-row{display: flex;gap: .6rem;flex-wrap: wrap;margin-top: .85rem}.kb-export-btn{padding: .5rem 1rem;border-radius: var(--r8);background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.18);color: var(--tx1,#7b91b0);font-size: .82rem;font-weight: 600;font-family: inherit;cursor: pointer;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s}.kb-export-btn:hover{background: rgba(255,255,255,.12);color: var(--tx0,#f0f4ff);border-color: rgba(255,255,255,.35)}.kb-empty-msg{color: var(--tx2,#3d5070);font-size: .85rem;padding: 1rem 0;text-align: center}.game-preset-row{display: flex;gap: .4rem;flex-wrap: wrap}.gp-btn{padding: .32rem .7rem;border-radius: 8px;font-size: .78rem;font-weight: 500;background: rgba(255,255,255,.05);border: 1px solid rgba(255,255,255,.12);color: var(--tx1,#7b91b0);cursor: pointer;font-family: inherit;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s}.gp-btn:hover{border-color: rgba(255,255,255,.3);color: var(--tx0,#f0f4ff);background: rgba(255,255,255,.1)}.cat-chips{display: flex;gap: .4rem;flex-wrap: wrap}.key-label{font-size: .62rem;color: var(--tx2,#3d5070);display: block;line-height: 1}.key-bind{font-size: .6rem;color: var(--gold,#8892a8);background: rgba(255,255,255,.1);border-radius: 3px;padding: 1px 3px;display: block;margin-top: 1px;font-weight: 700}.legend-dot{display: inline-block;width: 8px;height: 8px;border-radius: 50%;margin-right: .35rem}.faq-title{font-family: var(--f-display,'Outfit',sans-serif);font-size: clamp(1.4rem,3vw,2rem);font-weight: 700;text-align: center;margin-bottom: 1.5rem;letter-spacing: -.04em}.guide-cat-btn{display: inline-flex;align-items: center;gap: .3rem;padding: .28rem .75rem;border-radius: 9999px;background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.15);font-size: .78rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);cursor: pointer;font-family: inherit;transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s}.guide-cat-btn:hover,.guide-cat-btn.active{background: rgba(255,255,255,.15);border-color: rgba(255,255,255,.4)}.guide-steps{margin: .75rem 0;padding-left: 1.25rem;color: var(--tx1,#7b91b0);font-size: .85rem;line-height: 1.75}.guide-steps li{margin-bottom: .35rem}.guide-time{display: inline-flex;align-items: center;gap: .3rem;font-size: .72rem;color: var(--tx2,#3d5070);font-weight: 600}.back-link{display: inline-flex;align-items: center;gap: .4rem;color: var(--tx1,#7b91b0);font-size: .85rem;text-decoration: none;padding: .4rem .7rem;border-radius: 8px;border: 1px solid rgba(255,255,255,.1);background: rgba(255,255,255,.04);transition: color .14s,border-color .14s,background .14s;margin-bottom: 1.25rem;display: inline-flex}.back-link:hover{color: var(--gold,#8892a8);border-color: rgba(255,255,255,.25);background: rgba(255,255,255,.08)}.cat{font-size: .72rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);margin-bottom: .4rem}.guide-list{display: flex;flex-direction: column;gap: 1rem;margin-top: 1rem}.faq-item{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.08);border-radius: var(--r12);overflow: hidden;margin-bottom: .6rem;transition: border-color .18s}.faq-item.open{border-color: rgba(255,255,255,.2)}.faq-q{width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 1rem 1.25rem;background: none;border: none;color: var(--tx0,#f0f4ff);font-family: var(--f-body,sans-serif);font-size: .95rem;font-weight: 600;cursor: pointer;text-align: left;transition: color .14s}.faq-q:hover{color: var(--gold,#8892a8)}.faq-chevron{transition: transform .22s;color: var(--tx2,#3d5070);font-style: normal;flex-shrink: 0}.faq-item.open .faq-chevron{transform: rotate(180deg);color: var(--gold,#8892a8)}.faq-a{display: none;padding: 0 1.25rem 1.1rem;font-size: .9rem;color: var(--tx1,#7b91b0);line-height: 1.7;border-top: 1px solid rgba(255,255,255,.06)}.faq-item.open .faq-a{display: block}.viewer-header h1{}@keyframes dragonShimmer{0%{background-position: 0% 50%}50%{background-position: 100% 50%}100%{background-position: 0% 50%}}.name-display{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.14);border-radius: 20px;padding: 2rem 1.75rem 1.5rem;min-height: 200px;display: flex;flex-direction: column;position: relative;overflow: hidden}.name-display::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: rgba(255,255,255,.03)}.name-display::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 80px;background: rgba(255,255,255,.03);pointer-events: none}.name-display h2{font-family: var(--f-display,'Outfit',sans-serif);font-size: clamp(1.8rem,5vw,3rem);font-weight: 600;letter-spacing: -.04em;line-height: 1.1;margin-bottom: .5rem}.ng-card::before{content: '';position: absolute;top: 0;left: 8%;right: 8%;height: 1px;background: rgba(255,255,255,.08)}.ng-card h3{font-size: .72rem;font-weight: 700;letter-spacing: 0;color: var(--gold,#8892a8);margin-bottom: .75rem}.ng-card:hover{border-color: rgba(255,255,255,.28);box-shadow: 0 4px 20px rgba(0,0,0,.3)}.suggestions .ng-card{display: inline-flex;align-items: center;padding: .35rem .85rem;border-radius: 9999px;font-size: .82rem;font-weight: 600;color: var(--tx1,#7b91b0);cursor: pointer;margin: .2rem;border-radius: 9999px}.suggestions .ng-card:hover{color: var(--tx0,#f0f4ff);border-color: rgba(255,255,255,.35);box-shadow: none}.controls-panel,.control-panel,.ch-controls,.bm-controls,.ng-sidebar,.kit-controls-panel{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.12);border-radius: 20px;box-shadow: 0 8px 32px rgba(0,0,0,.5)}.preview-box,.bm-canvas-wrap,.pfp-preview-wrap{box-shadow: 0 8px 32px rgba(0,0,0,.6)}.card:hover,.guide-card:hover,.palette-card:hover{}.section-title{color: var(--tx0,#eef0f4)}.platform-card.active{border-color: rgba(255,255,255,.3) !important;box-shadow: none}.tab-btn.active,.game-tab.active,.shape-tab.active,.theme-btn.active{background: rgba(255,255,255,.08);box-shadow: none}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus,textarea:focus,select:focus,.ng-input:focus,.bm-input:focus{border-color: var(--gold,#8892a8) !important;box-shadow: none}.accordion.open{border-color: rgba(255,255,255,.22) !important;box-shadow: 0 4px 20px rgba(0,0,0,.4)}.viewer-header::after{content: '';display: block;margin: 1rem auto 0;width: 80px;height: 2px;background: rgba(255,255,255,.03);border-radius: 2px;box-shadow: none}.viewer-header p{color: var(--tx1,#7b91b0);font-size: 1rem;max-width: 500px;margin: .5rem auto 0}.ng-privacy{background: rgba(46,204,113,.05);border: 1px solid rgba(46,204,113,.15);border-radius: 10px;padding: .65rem .9rem;font-size: .8rem;color: var(--tx1,#7b91b0);margin-top: .75rem}body::after{content: '';position: fixed;inset: 0;pointer-events: none;z-index: 0;background: rgba(255,255,255,.03);opacity: .7}.controls-panel::-webkit-scrollbar,.control-panel::-webkit-scrollbar{width: 4px}.controls-panel::-webkit-scrollbar-thumb,.control-panel::-webkit-scrollbar-thumb{background: #38c7cc;border-radius: 2px}input[type=range]{-webkit-appearance: none;appearance: none;width: 100%;height: 4px;background: #38c7cc;border-radius: 2px;outline: none;cursor: pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 16px;height: 16px;border-radius: 50%;background: #38c7cc;box-shadow: none;cursor: pointer;transition: box-shadow .15s,transform .15s}input[type=range]::-webkit-slider-thumb:hover{box-shadow: none}select{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f0c040' opacity='.6'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right .75rem center;padding-right: 2rem;appearance: none;-webkit-appearance: none}.bm-canvas-wrap,.pfp-preview-wrap,.logo-canvas-wrap{background: #38c7cc}.btn-primary,button.primary,.kb-export-btn.primary,.btn.btn-primary{background: #38c7cc;color: #fff !important;border: none !important;box-shadow: none;position: relative;overflow: hidden;color: #08080d}.btn-primary::after,button.primary::after{content: '';position: absolute;inset: 0;background: #38c7cc;transform: translateX(-150%);transition: transform .5s ease;color: #08080d}.btn-primary:hover::after,button.primary:hover::after{transform: translateX(150%)}.btn-primary:hover,button.primary:hover{box-shadow: none}.btn-secondary,button.secondary{background: rgba(255,255,255,.06) !important;border: 1px solid rgba(255,255,255,.2) !important;color: var(--tx1,#7b91b0) !important;transition: color .14s !important,background-color .14s !important,border-color .14s !important,opacity .14s !important,transform .14s !important}.btn-secondary:hover,button.secondary:hover{border-color: rgba(255,255,255,.38) !important;color: var(--tx0,#f0f4ff) !important}.suggestions{display: flex;flex-wrap: wrap;gap: .45rem;margin: .75rem 0}.suggestions span,.ng-suggestion{display: inline-flex;align-items: center;padding: .28rem .75rem;border-radius: 9999px;background: rgba(255,255,255,.06);border: 1px solid rgba(255,255,255,.15);font-size: .82rem;font-weight: 600;color: var(--tx1,#7b91b0);cursor: pointer;font-family: inherit;transition: color .14s ease,background-color .14s ease,border-color .14s ease,opacity .14s ease,transform .14s ease;animation: fadeUp .3s ease both}.suggestions span:hover,.ng-suggestion:hover{background: rgba(255,255,255,.14);border-color: rgba(255,255,255,.35);color: var(--gold,#8892a8);transform: translateY(-1px);box-shadow: none}.tool-hero{text-align: center;padding: 2.5rem 1rem 1.5rem;position: relative}.tool-hero::before{content: '';position: absolute;inset: 0;pointer-events: none;background: rgba(255,255,255,.03)}.tool-hero h1{font-family: var(--f-display,'Outfit',sans-serif);font-size: clamp(1.6rem,4vw,2.4rem);font-weight: 600;letter-spacing: -.05em;line-height: 1.1;margin-bottom: .5rem}@keyframes shimmer{0%{background-position: 200% center}100%{background-position: -200% center}}.tool-hero p{font-size: .95rem;color: var(--tx1,#7b91b0);max-width: 520px;margin: 0 auto}.control-panel{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.12);border-radius: 20px;padding: 1.5rem;position: relative;overflow: hidden}.control-panel::before{content: '';position: absolute;top: 0;left: 8%;right: 8%;height: 1px;background: rgba(255,255,255,.08)}.control-panel::after{content: '';position: absolute;inset: 0;pointer-events: none;background: rgba(255,255,255,.03)}.preview-area{display: flex;flex-direction: column;gap: 1rem;align-items: center}.preview-area>*{position: relative;z-index: 1}.export-row{display: flex;gap: .65rem;flex-wrap: wrap;justify-content: center;margin: .5rem 0}.stat-mini{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.1);border-radius: 12px;padding: .65rem 1.1rem;display: flex;flex-direction: column;gap: .15rem;position: relative;overflow: hidden}.stat-mini::before{content: '';position: absolute;top: 0;left: 10%;right: 10%;height: 1px;background: rgba(255,255,255,.08)}.stat-mini-v{font-family: var(--f-display,'Outfit',sans-serif);font-size: 1.3rem;font-weight: 600}.stat-mini-l{font-size: .62rem;font-weight: 700;letter-spacing: 0;color: var(--tx2,#3d5070)}.silk-divider{height: 1px;margin: 1.5rem 0;background: rgba(255,255,255,.08)}.name-display h2{font-family: var(--f-display,'Outfit',sans-serif);font-size: clamp(2rem,6vw,3.5rem);font-weight: 600;letter-spacing: -.05em;line-height: 1}.ng-sidebar{display: flex;flex-direction: column;gap: .85rem}.ng-card{background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.1);border-radius: 16px;padding: 1.25rem;position: relative;overflow: hidden;transition: border-color .18s,box-shadow .18s}.ng-card: .ng-card:hover{border-color: rgba(255,255,255,.2);box-shadow: 0 8px 28px rgba(0,0,0,.5)}.ng-card h3{font-family: var(--f-display,'Outfit',sans-serif);font-size: .85rem;font-weight: 700;color: var(--gold,#8892a8);letter-spacing: 0;margin-bottom: .7rem}canvas{max-width: 100%;height: auto;display: block}.viewer-layout{display: grid;grid-template-columns: 1fr 1fr;gap: 1.5rem;align-items: start}@media (max-width: 860px){.viewer-layout{grid-template-columns: 1fr}}.toggle-row{display: flex;align-items: center;justify-content: space-between;padding: .45rem 0;border-bottom: 1px solid rgba(56,199,204,.07);font-size: .88rem;color: var(--tx1)}.toggle-row:last-child{border-bottom: none}.pfp-export-row{display: flex;gap: .65rem;flex-wrap: wrap;margin-top: 1rem}.pfp-export-row button{flex: 1;min-width: 100px}.pfp-preview-label{font-size: .75rem;color: var(--tx2);text-align: center;margin: .5rem 0;font-family: var(--f-mono)}.privacy-badge{display: flex;align-items: center;gap: .4rem;font-size: .78rem;color: var(--jade);margin-top: .75rem;padding: .4rem .75rem;background: rgba(46,204,113,.06);border-radius: 6px;border: 1px solid rgba(46,204,113,.15)}.style-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(80px,1fr));gap: .4rem}.style-btn{padding: .4rem .3rem;border-radius: 7px;border: 1px solid rgba(56,199,204,.15);background: rgba(14,20,40,.6);color: var(--tx1);font-size: .75rem;font-family: var(--f-body);cursor: pointer;text-align: center;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;line-height: 1.3}.style-btn:hover,.style-btn.active{border-color: var(--indigo);background: rgba(56,199,204,.12);color: var(--tx0)}@media (max-width: 480px){.style-grid{grid-template-columns: repeat(3,1fr)}.pfp-export-row{flex-direction: column}.pfp-export-row button{width: 100%}}.sr-btn{display: inline-flex;align-items: center;justify-content: center;gap: .45rem;padding: .55rem 1.1rem;border-radius: 10px;background: rgba(255,255,255,.03);border: none;color: #fff;font-family: var(--f-display,sans-serif);font-size: .84rem;font-weight: 700;cursor: pointer;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;width: 100%;white-space: nowrap;box-shadow: none;letter-spacing: -.01em;margin-top: .3rem}.sr-btn:hover{box-shadow: none;filter: brightness(1.08)}.sr-btn:active{transform: translateY(0)}.sr-btn-o{display: inline-flex;align-items: center;justify-content: center;gap: .45rem;padding: .5rem 1rem;border-radius: 10px;background: rgba(56,199,204,.1);border: 1px solid rgba(56,199,204,.28);color: var(--indigo,#38c7cc);font-family: var(--f-display,sans-serif);font-size: .84rem;font-weight: 700;cursor: pointer;transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;width: 100%;white-space: nowrap;margin-top: .3rem}.sr-btn-o:hover{background: rgba(56,199,204,.18);border-color: rgba(56,199,204,.45)}.sr-tab,.sr-ptab{padding: .32rem .7rem;border-radius: 8px;border: 1px solid rgba(56,199,204,.18);background: rgba(56,199,204,.05);color: var(--tx1);font-size: .78rem;font-weight: 700;cursor: pointer;font-family: var(--f-display,sans-serif);transition: color .13s,background-color .13s,border-color .13s,opacity .13s,transform .13s;white-space: nowrap;letter-spacing: -.01em}.sr-tab:hover,.sr-ptab:hover,.sr-tab.on,.sr-ptab.on,.sr-tab.active,.sr-ptab.active{border-color: rgba(56,199,204,.45);color: var(--tx0);background: rgba(56,199,204,.15)}.sr-tab.on,.sr-ptab.on,.sr-tab.active,.sr-ptab.active{background: rgba(255,255,255,.08);box-shadow: none}.sr-inp,.sr-sel{width: 100%;box-sizing: border-box;background: rgba(8,14,30,.85);border: 1px solid rgba(56,199,204,.2);border-radius: 9px;padding: .45rem .75rem;color: var(--tx0);font-family: var(--f-body,sans-serif);font-size: .87rem;outline: none;transition: border-color .13s,box-shadow .13s}.sr-inp:focus,.sr-sel:focus{border-color: rgba(56,199,204,.5);box-shadow: none}.sr-inp::placeholder{color: rgba(120,140,180,.45)}.sr-sel{cursor: pointer}.sr-lbl{font-family: var(--f-display,sans-serif);font-size: .65rem;font-weight: 600;letter-spacing: 0;color: rgba(255,255,255,.75);display: block;margin-bottom: .28rem}.sr-grp{display: flex;flex-direction: column;gap: .28rem}.sr-2{display: grid;grid-template-columns: 1fr 1fr;gap: .45rem}.sr-3{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: .4rem}.sr-hr{height: 1px;background: rgba(56,199,204,.1);margin: .3rem 0}.sr-hint{font-size: .7rem;color: var(--tx2);text-align: center;margin-top: .35rem;font-family: var(--f-body)}.sr-card{background: rgba(56,199,204,.04);border: 1px solid rgba(56,199,204,.12);border-radius: 12px;padding: 1rem}.sr-up{border: 2px dashed rgba(56,199,204,.28);border-radius: 11px;padding: .9rem;text-align: center;cursor: pointer;transition: color .13s,background-color .13s,border-color .13s,opacity .13s,transform .13s;background: rgba(56,199,204,.02)}.sr-up:hover{border-color: rgba(56,199,204,.55);background: rgba(56,199,204,.05)}.sr-ctrl{display: flex;flex-direction: column;gap: .55rem}.sr-lay{display: grid;grid-template-columns: 1fr 310px;gap: 1.5rem;padding: 1.25rem 1.5rem;align-items: start}@media (max-width: 900px){.sr-lay{grid-template-columns: 1fr}}.sr-section{font-size: .62rem;font-weight: 600;letter-spacing: 0;color: rgba(255,255,255,.65);margin: .5rem 0 .35rem;display: block;font-family: var(--f-display)}.pfp-platform-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: .35rem}.pfp-platform-btn{display: flex;flex-direction: column;align-items: center;gap: .15rem;padding: .45rem .35rem;border-radius: 9px;border: 1px solid rgba(56,199,204,.18);background: rgba(56,199,204,.05);cursor: pointer;transition: color .13s,background-color .13s,border-color .13s,opacity .13s,transform .13s;font-family: var(--f-body)}.pfp-platform-btn:hover{border-color: rgba(56,199,204,.4);background: rgba(56,199,204,.1)}.pfp-platform-btn.active{border-color: rgba(56,199,204,.6);background: rgba(255,255,255,.08);box-shadow: none}.ppb-icon{font-size: 1rem;line-height: 1}.ppb-name{font-size: .72rem;font-weight: 700;color: var(--tx1);font-family: var(--f-display)}.ppb-size{font-size: .65rem;color: var(--tx2);font-family: var(--f-mono)}.pfp-platform-btn.active .ppb-name{color: var(--tx0)}.pfp-platform-btn.active .ppb-size{color: var(--indigo)}@media (max-width: 768px){.viewer-layout,.tool-layout,.sr-lay{grid-template-columns: 1fr !important;gap: 1rem !important}.pfp-layout,.logo-layout,.banner-layout{grid-template-columns: 1fr !important}canvas{max-width: 100% !important;height: auto !important}.pfp-preview,.logo-preview,.canvas-wrap{width: 100% !important;max-width: 280px !important;margin: 0 auto !important}.pfp-panel,.logo-panel,.controls-panel{width: 100% !important;max-width: 100% !important}}@media (max-width: 480px){.tab-row,.game-tabs,.shape-tabs,.preset-themes,.sr-tab-row{gap: .25rem;flex-wrap: wrap}.tab-btn,.game-tab,.shape-tab,.theme-btn,.sr-tab,.sr-ptab{font-size: .72rem;padding: .28rem .55rem}.preset-grid,.style-grid{grid-template-columns: repeat(3,1fr) !important;gap: .25rem}.action-btn,.sr-btn{font-size: .82rem;padding: .5rem .9rem}}@media (max-width: 400px){.pfp-platform-grid{grid-template-columns: repeat(3,1fr) !important;gap: .25rem}.ppb-name{font-size: .65rem}.ppb-size{font-size: .58rem}}