@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";*{box-sizing:border-box}:root{--brand: #0ea5e9;--brand-600: #0284c7;--text: #f3f6ff;--muted: #6b7280;--panel-bg: rgba(255,255,255,.72);--panel-border: rgba(0,0,0,.08);--surface: #f8fafc;--code-bg: #0b1220;--code-fg: #e5eeff;--sb-size: 10px;--sb-radius: 10px;--sb-track: rgba(255,255,255,.06);--sb-thumb: rgba(255,255,255,.35);--sb-thumb-hover: rgba(255,255,255,.55);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text);background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;color:var(--text)}html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}::-webkit-scrollbar-track{background:transparent;border-radius:var(--sb-radius)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff9,#ffffff40);border:2px solid rgba(255,255,255,.2);border-radius:var(--sb-radius);box-shadow:0 2px 10px #0ea5e938}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--sb-thumb-hover) 0%,rgba(255,255,255,.35) 100%);border-color:#ffffff4d;box-shadow:0 4px 16px #0ea5e947}.settingsPanel::-webkit-scrollbar{width:8px}.settingsPanel{scrollbar-width:thin}h1{font-size:3.2em;line-height:1.1}button{border-radius:10px;border:1px solid #e5e7eb;padding:10px 14px;font-size:.95rem;font-weight:600;font-family:inherit;background-color:#fff;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;color:var(--text)}button:hover{transform:translateY(-1px);box-shadow:0 8px 24px #00000014}button:active{transform:translateY(0);box-shadow:0 4px 12px #00000014}button:focus,button:focus-visible{outline:3px solid rgba(14,165,233,.35);outline-offset:2px}pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}pre{background:var(--code-bg);color:var(--code-fg);border-radius:12px;padding:16px;overflow:auto;border:1px solid rgba(255,255,255,.08)}code{background:#02081780;padding:2px 6px;border-radius:6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0}label{font-size:13px;color:var(--muted)}.settingsPanel label{color:#cbd5e1}.settingsPanel input[type=text],.settingsPanel input[type=number],.settingsPanel input[type=color],.settingsPanel select{background:#ffffff0f;color:#fff;border-color:#ffffff29}.settingsPanel input::placeholder{color:#94a3b8}select,input[type=color],input[type=text],input[type=number]{border-radius:10px;border:1px solid var(--panel-border);padding:10px 12px;background:#fff;color:var(--text)}input[type=range]{width:100%;height:32px;background:transparent;appearance:none}input[type=range]::-webkit-slider-runnable-track{height:6px;background:#e5e7eb;border-radius:999px}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:var(--brand);border-radius:50%;margin-top:-6px;box-shadow:0 2px 6px #0284c766}input[type=range]::-moz-range-track{height:6px;background:#e5e7eb;border-radius:999px}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--brand);border:none;border-radius:50%;box-shadow:0 2px 6px #0284c766}a{color:var(--brand-600);text-underline-offset:3px}a:hover{color:var(--brand)}:root{color:var(--text);--panel-width: 340px;--panel-gap: 24px;--page-padding-x: 24px;--page-padding-y: 32px}.container{max-width:1200px;margin:0 auto;padding:0 var(--page-padding-x)}.layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}.preview{display:grid;place-items:center}.glassFix{isolation:isolate;-webkit-transform:translateZ(0);transform:translateZ(0)}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}.heroSettings{margin-top:16px}.nav{position:sticky;top:16px;max-width:1200px;margin:0 auto;z-index:10;padding:0 var(--page-padding-x)}.navInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:14px;margin:0}.mainBg{width:100%;border-radius:20px;border:1px solid rgba(0,0,0,.06);box-shadow:0 20px 60px #00000014;overflow:hidden}.brand{font-weight:800;letter-spacing:-.02em;font-size:18px;display:inline-flex;align-items:center;gap:10px}.brandLogo{width:28px;height:28px;border-radius:6px;display:inline-block}.brandText{display:inline-block}.navLinks{display:flex;gap:10px;margin-right:auto;margin-left:16px}.navLinks a{text-decoration:none;color:#e5e7eb;border-radius:8px;padding:8px 12px;border:1px solid transparent}.navLinks a:hover{background:#ffffff0f;color:#fff;border-color:#ffffff1f}.starLink{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,#0ea5e959,#0ea5e92e);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 6px 18px #0ea5e940;text-decoration:none}.starLink .ico{transition:color .15s ease,fill .15s ease,stroke .15s ease}.starLink:hover{background:linear-gradient(180deg,#0ea5e980,#0ea5e947);border-color:#ffffffbf;box-shadow:0 10px 24px #0ea5e959;transform:translateY(-1px)}.starLink:hover .ico{color:#facc15}.starLink:hover .ico path,.starLink:hover .ico polygon,.starLink:hover .ico circle,.starLink:hover .ico line{fill:currentColor;stroke:currentColor}.starLink:active{transform:translateY(0);box-shadow:0 6px 18px #0ea5e940}.gh{width:16px;height:16px;fill:currentColor;opacity:.9}.hamburger{display:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:6px 8px}.mobileMenu{display:none;position:absolute;right:var(--page-padding-x);top:64px;z-index:15}.mobileMenuInner{display:grid;gap:8px;padding:10px}.mobileMenuInner a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.16);padding:8px 10px;border-radius:10px}@media (max-width: 800px){.navLinks,.starLink{display:none}.hamburger{display:inline-flex;align-items:center}.mobileMenu{display:block}}.footerInner{display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;align-items:center;padding:16px;color:#fff}.footerTitle{font-weight:700;letter-spacing:-.01em;color:#fff}.footerSubtitle{opacity:.95;font-size:14px;color:#fff}.footerMeta{opacity:.9;font-size:12px;margin-top:4px;color:#fff}.footerLinks{display:flex;gap:12px;flex-wrap:wrap}.footerLinks a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);padding:8px 10px;border-radius:10px}.footerLinks a:hover{background:#ffffff14}.ico{width:16px;height:16px}@media (max-width: 900px){.footerInner{grid-template-columns:1fr}}.heroLeft{padding:0 24px}.heroTitle{font-size:48px;line-height:1.1;margin:0 0 8px;letter-spacing:-.02em;color:#f9fbff;text-shadow:0 2px 16px rgba(0,0,0,.45)}.heroSubtitle{font-size:18px;color:#c7d2fe;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.35)}.section{margin-top:48px}.heroCard{border-radius:20px;padding:24px;box-shadow:0 20px 60px #00000040}.buttons{display:flex;gap:12px;margin-top:16px}.btnPrimary{background:var(--brand);color:#fff;border:none}.btnPrimary:hover{box-shadow:0 10px 30px #0ea5e959}.btnGhost{background:transparent;border:1px solid #e5e7eb}.btnGhost:hover{background:#f3f4f6;color:#111}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}.feature{background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px}.panel{background:#ffffffb3;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px;box-shadow:0 10px 30px #0000000f;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@media (max-width: 1024px){.hero{grid-template-columns:1fr}.heroTitle{font-size:36px}}.heroSection{position:relative;min-height:100vh;padding:var(--page-padding-y) 0}.heroContainer{max-width:1200px;margin:0 auto;padding:0 var(--page-padding-x)}.hero{min-height:calc(100vh - 96px)}.heroBgFixed{position:fixed;top:0;left:0;width:100%;height:100vh;background:url(/base.png) center / cover no-repeat;pointer-events:none;z-index:0}.page{position:relative;z-index:1}.settingsDock{position:absolute;top:96px;right:0;width:var(--panel-width);padding:0 0 16px}.settingsPanel{height:min(72vh,calc(100vh - 140px));display:flex;flex-direction:column;overflow:hidden;background:#0c0e14eb;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);box-shadow:0 10px 40px #00000059;padding:16px}.settingsScroll{flex:1 1 auto;overflow:auto;padding-right:8px;padding-bottom:80px}.presetHint{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:10px;border:1px dashed rgba(255,255,255,.3);border-radius:10px;background:#ffffff0f;color:#e5e7eb}.control{display:grid;gap:8px;margin-bottom:12px;color:#e5e7eb}.radio-group{display:flex;gap:12px}.grid2{display:grid;grid-template-columns:1fr;gap:10px}.grid2 label{display:grid;gap:6px;font-size:14px}.reset{margin-top:8px}.group{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;background:#ffffff0f;margin-bottom:10px;overflow:hidden}.group>summary{cursor:pointer;font-weight:600;color:#e5e7eb;list-style:none;display:flex;align-items:center;gap:8px}.group>summary::-webkit-details-marker{display:none}.group>summary:after{content:"▾";transition:transform .2s ease;margin-left:auto;opacity:.8}details[open]>summary:after{transform:rotate(180deg)}.groupBody{margin-top:8px;display:grid;gap:8px;max-height:0;opacity:0;color:#e5e7eb;transition:max-height .25s cubic-bezier(.2,0,0,1),opacity .25s ease}details[open] .groupBody{max-height:1200px;opacity:1}.formGrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.codeBlock{position:relative;margin:8px 0 16px}.codeBlock pre{margin:0;width:100%;background:#ffffff0f;color:#e5e7eb;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 40px 12px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.5;overflow:auto}.codeBlock code{background:transparent!important;display:block;width:100%}.copyButton{position:absolute;top:6px;right:6px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-size:12px;cursor:pointer}.copyButton:hover{background:#ffffff24}.copyButton:active{transform:translateY(.5px)}.codeBlock--manual code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;display:block;white-space:pre-wrap}.tok-key{color:#89b4fa}.tok-ident{color:#cba6f7}.tok-fn{color:#94e2d5}.tok-comp{color:#fab387}.tok-prop{color:#f9e2af}.tok-str{color:#a6e3a1}.tok-num{color:#f38ba8}