:root{--color-bg: #ffffff;--color-bg-secondary: #f5f7fa;--color-bg-tertiary: #eef1f6;--color-text: #1a1a2e;--color-text-secondary: #4a4a6a;--color-text-muted: #7a7a9a;--color-border: #dde1e8;--color-primary: #3b5bdb;--color-primary-hover: #364fc7;--color-primary-light: #edf2ff;--color-accent: #1098ad;--color-success: #2b8a3e;--color-warning: #e67700;--color-danger: #c92a2a;--color-code-bg: #f5f7fa;--color-grid: #f4f5f7;--color-shadow: rgba(0, 0, 0, .08);--color-overlay: rgba(0, 0, 0, .4);--entropy-low: #c92a2a;--entropy-medium: #e67700;--entropy-high: #2b8a3e;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--line-height: 1.6;--line-height-tight: 1.3;--max-width: 1200px;--max-width-narrow: 800px;--header-height: 3.5rem;--border-radius: .5rem;--border-radius-sm: .25rem;--border-radius-lg: 1rem;--transition-fast: .15s ease;--transition-normal: .25s ease}[data-theme=dark]{--color-bg: #1a1a2e;--color-bg-secondary: #222240;--color-bg-tertiary: #2a2a4a;--color-text: #e0e0f0;--color-text-secondary: #b0b0d0;--color-text-muted: #8080a0;--color-border: #3a3a5a;--color-primary: #5b7bf5;--color-primary-hover: #7b9bff;--color-primary-light: #1a1a3e;--color-accent: #22b8cf;--color-success: #51cf66;--color-warning: #fcc419;--color-danger: #ff6b6b;--color-code-bg: #222240;--color-grid: #22223f;--color-shadow: rgba(0, 0, 0, .3);--color-overlay: rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}::-webkit-scrollbar-corner{background:var(--color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--color-border) var(--color-bg-secondary)}html{font-size:16px;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-bg);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.grid-wrapper{min-height:100vh;width:100%;position:relative;background-color:var(--color-bg);display:flex;flex-direction:column}.grid-background{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,var(--color-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--color-grid) 1px,transparent 1px);background-size:20px 30px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 60%,transparent 100%)}.header,main,.footer,.toast-container{position:relative;z-index:1}.theme-transitioning,.theme-transitioning *,.theme-transitioning *:before,.theme-transitioning *:after{transition-duration:0ms!important}main{flex:1}img,svg{display:block;max-width:100%}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm)}h1,h2,h3,h4,h5,h6{line-height:var(--line-height-tight);color:var(--color-text)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}ul,ol{list-style:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.container--narrow{max-width:var(--max-width-narrow)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.header{height:var(--header-height);border-bottom:1px solid var(--color-border);background:var(--color-bg);position:sticky;top:0;z-index:100}.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.header__logo{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;font-size:var(--font-size-lg);color:var(--color-text);text-decoration:none}.header__logo:hover{text-decoration:none}.header__logo svg{width:28px;height:28px}.header__nav{display:flex;align-items:center;gap:var(--space-lg)}.header__nav a{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500;text-decoration:none;transition:color var(--transition-fast)}.header__nav a:hover{color:var(--color-primary);text-decoration:none}.header__controls{display:flex;align-items:center;gap:var(--space-sm)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--border-radius);color:var(--color-text-secondary);transition:background var(--transition-fast),color var(--transition-fast)}.icon-btn:hover{background:var(--color-bg-secondary);color:var(--color-text)}.icon-btn svg{width:20px;height:20px}.lang-btn{font-size:var(--font-size-xs);font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--border-radius);color:var(--color-text-secondary);border:1px solid var(--color-border);text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast)}.lang-btn:hover{background:var(--color-bg-secondary);color:var(--color-text);text-decoration:none}.header__menu-btn{display:none}@media(max-width:768px){.header__nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);flex-direction:column;padding:var(--space-lg);gap:var(--space-md)}.header__nav.is-open,.header__menu-btn{display:flex}}.footer{border-top:1px solid var(--color-border);padding:var(--space-2xl) 0;margin-top:var(--space-3xl);background:var(--color-bg-secondary)}.footer__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-xl)}.footer__section h4{font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.footer__section a{display:block;color:var(--color-text-secondary);font-size:var(--font-size-sm);padding:var(--space-xs) 0;text-decoration:none}.footer__section a:hover{color:var(--color-primary)}.footer__copyright{max-width:var(--max-width);margin:var(--space-xl) auto 0;padding:var(--space-lg) var(--space-lg) 0;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--font-size-sm)}.breadcrumbs{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-lg);flex-wrap:wrap}.breadcrumbs a{color:var(--color-text-secondary);text-decoration:none}.breadcrumbs a:hover{color:var(--color-primary)}.breadcrumbs__separator{color:var(--color-text-muted)}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}.tool-card{display:block;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-bg);color:var(--color-text);text-decoration:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.tool-card:hover{border-color:var(--color-primary);box-shadow:0 2px 12px var(--color-shadow);text-decoration:none}.tool-card__icon{width:32px;height:32px;margin-bottom:var(--space-sm);color:var(--color-accent)}.tool-card__icon svg{width:32px;height:32px}.tool-card__title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-xs)}.tool-card__desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height)}.guide-card{display:block;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-bg);color:var(--color-text);text-decoration:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.guide-card:hover{border-color:var(--color-accent);box-shadow:0 2px 12px var(--color-shadow);text-decoration:none}.guide-card__title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-xs)}.guide-card__desc{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.generator{max-width:var(--max-width-narrow);margin:0 auto}.generator__header{margin-bottom:var(--space-xl)}.generator__header h1{margin-bottom:var(--space-sm)}.generator__header p{color:var(--color-text-secondary)}.generator__notice{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-primary-light);border-radius:var(--border-radius);font-size:var(--font-size-sm);color:var(--color-primary);margin-bottom:var(--space-lg)}.generator__notice svg{width:18px;height:18px;flex-shrink:0}.settings{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md);padding:var(--space-lg);background:var(--color-bg-secondary);border-radius:var(--border-radius-lg);margin-bottom:var(--space-lg)}.settings__group{display:flex;flex-direction:column;gap:var(--space-xs)}.settings__group label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.settings__group input[type=number],.settings__group input[type=text],.settings__group select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-bg);font-size:var(--font-size-sm);transition:border-color var(--transition-fast)}.settings__group input:focus,.settings__group select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-light)}.settings__group input[type=checkbox],.settings__check input[type=checkbox],input[type=checkbox].custom-checkbox{appearance:none;width:20px;height:20px;border:2px solid var(--color-accent);border-radius:5px;background-color:transparent;display:inline-block;position:relative;cursor:pointer;flex-shrink:0;vertical-align:middle}.settings__group input[type=checkbox]:before,.settings__check input[type=checkbox]:before,input[type=checkbox].custom-checkbox:before{content:"";background-color:var(--color-accent);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;border-radius:3px;transition:all .3s ease-in-out}.settings__group input[type=checkbox]:checked:before,.settings__check input[type=checkbox]:checked:before,input[type=checkbox].custom-checkbox:checked:before{transform:translate(-50%,-50%) scale(1)}.settings__check{display:flex;align-items:center;gap:var(--space-sm);padding-top:calc(var(--font-size-sm) + var(--space-xs))}.settings__check label{cursor:pointer;user-select:none;line-height:20px}.generator__actions{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:500;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover{background:var(--color-primary-hover)}.btn--secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{background:var(--color-bg-tertiary)}.btn--success{background:var(--color-success);color:#fff}.btn--success:hover{opacity:.9}.btn--danger{background:transparent;color:var(--color-danger);border:1px solid var(--color-danger)}.btn--danger:hover{background:var(--color-danger);color:#fff}.btn svg{width:16px;height:16px}.output{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden}.output__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted)}.output__list{max-height:400px;overflow-y:auto}.output__item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--font-size-sm);word-break:break-all}.output__item:last-child{border-bottom:none}.output__item-index{color:var(--color-text-muted);font-size:var(--font-size-xs);min-width:2rem}.output__item-value{flex:1;padding:0 var(--space-sm);user-select:all}.output__item-copy{flex-shrink:0}.entropy{margin-bottom:var(--space-lg)}.entropy__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-xs);display:flex;justify-content:space-between}.entropy__bar{height:8px;background:var(--color-bg-tertiary);border-radius:4px;overflow:hidden}.entropy__fill{height:100%;border-radius:4px;transition:width var(--transition-normal),background var(--transition-normal)}.entropy__fill--low{background:var(--entropy-low)}.entropy__fill--medium{background:var(--entropy-medium)}.entropy__fill--high{background:var(--entropy-high)}.weak-warning{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#fff3e0;border:1px solid var(--color-warning);border-radius:var(--border-radius);font-size:var(--font-size-sm);color:var(--color-warning);margin-bottom:var(--space-lg)}[data-theme=dark] .weak-warning{background:#3d2800}.weak-warning svg{width:18px;height:18px;flex-shrink:0}.toast-container{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:1000;display:flex;flex-direction:column;gap:var(--space-sm)}.toast{padding:var(--space-sm) var(--space-lg);background:var(--color-text);color:var(--color-bg);border-radius:var(--border-radius);font-size:var(--font-size-sm);box-shadow:0 4px 12px var(--color-shadow);animation:toast-in .3s ease}.toast--success{background:var(--color-success);color:#fff}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero{text-align:center;padding:var(--space-3xl) 0}.hero h1{margin-bottom:var(--space-md)}.hero__sub{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--space-xl)}.hero__badges{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}.hero__badge{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-secondary);border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.hero__badge svg{width:18px;height:18px}.section{padding:var(--space-2xl) 0}.section__title{margin-bottom:var(--space-lg)}.guide-content{max-width:var(--max-width-narrow);margin:0 auto;line-height:var(--line-height)}.guide-content h2{margin-top:var(--space-2xl);margin-bottom:var(--space-md)}.guide-content h3{margin-top:var(--space-xl);margin-bottom:var(--space-sm)}.guide-content p{margin-bottom:var(--space-md)}.guide-content ul,.guide-content ol{margin-bottom:var(--space-md);padding-left:var(--space-xl)}.guide-content ul{list-style:disc}.guide-content ol{list-style:decimal}.guide-content li{margin-bottom:var(--space-xs)}.guide-content code{font-family:var(--font-mono);font-size:var(--font-size-sm);background:var(--color-code-bg);padding:.15em .4em;border-radius:var(--border-radius-sm)}.guide-content pre{background:var(--color-code-bg);padding:var(--space-lg);border-radius:var(--border-radius);overflow-x:auto;margin-bottom:var(--space-md)}.guide-content pre code{background:none;padding:0}.info-page{max-width:var(--max-width-narrow);margin:0 auto}.info-page h1{margin-bottom:var(--space-lg)}.info-page p{margin-bottom:var(--space-md);color:var(--color-text-secondary)}.info-page h2{margin-top:var(--space-xl);margin-bottom:var(--space-sm)}.error-page{text-align:center;padding:var(--space-3xl) 0}.error-page__code{font-size:var(--font-size-4xl);font-weight:700;color:var(--color-text-muted);margin-bottom:var(--space-md)}.error-page__title{margin-bottom:var(--space-md)}.error-page__desc{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.error-page__suggest{color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.changelog-list{max-width:var(--max-width-narrow);margin:0 auto}.changelog-entry{padding:var(--space-lg) 0;border-bottom:1px solid var(--color-border)}.changelog-entry:last-child{border-bottom:none}.changelog-entry__date{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-xs)}.changelog-entry__title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-xs)}.changelog-entry__desc{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.faq-list{max-width:var(--max-width-narrow);margin:0 auto}.faq-item{border-bottom:1px solid var(--color-border)}.faq-item__question{font-weight:600;padding:var(--space-md) 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-item__answer{padding-bottom:var(--space-md);color:var(--color-text-secondary)}.status-page{max-width:var(--max-width-narrow);margin:0 auto}.status-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg);background:#e6fcf0;border-radius:var(--border-radius-lg);margin-bottom:var(--space-xl);font-weight:500}[data-theme=dark] .status-indicator{background:#0b3d20}.status-indicator__dot{width:12px;height:12px;border-radius:50%;background:var(--color-success)}.color-swatch{display:inline-block;width:40px;height:40px;border-radius:var(--border-radius);border:2px solid var(--color-border);vertical-align:middle}.color-preview{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm)}.color-preview__item{width:48px;height:48px;border-radius:var(--border-radius);border:2px solid var(--color-border);cursor:pointer;position:relative}.color-preview__item:hover{transform:scale(1.1)}.color-preview__item .color-preview__label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap}.custom-select{width:100%;cursor:pointer;position:relative;color:var(--color-text);overflow:hidden}.custom-select__selected{background-color:var(--color-bg-secondary);padding:var(--space-sm) var(--space-md);margin-bottom:2px;border-radius:var(--border-radius);position:relative;z-index:10;font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-border)}.custom-select__arrow{position:relative;height:10px;transform:rotate(-90deg);width:20px;fill:var(--color-text-secondary);z-index:10;transition:transform .3s}.custom-select__options{display:flex;flex-direction:column;border-radius:var(--border-radius);padding:var(--space-xs);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none;transition:opacity .3s,top .3s;z-index:100;max-height:200px;overflow-y:auto}.custom-select.is-open .custom-select__options{opacity:1;pointer-events:auto;top:100%}.custom-select.is-open .custom-select__arrow{transform:rotate(0)}.custom-select__option{border-radius:var(--border-radius-sm);padding:var(--space-sm) var(--space-md);transition:background .3s;background-color:var(--color-bg-secondary);font-size:var(--font-size-sm);cursor:pointer}.custom-select__option:hover{background-color:var(--color-bg-tertiary)}.custom-select__option.is-selected{background-color:var(--color-primary-light);color:var(--color-primary)}.custom-select__options input[type=radio]{display:none}@media(max-width:768px){h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}.hero{padding:var(--space-2xl) 0}.settings,.tool-grid{grid-template-columns:1fr}.footer__inner{grid-template-columns:1fr 1fr}}@media(max-width:480px){.container{padding:0 var(--space-md)}.hero__badges{flex-direction:column;align-items:center}.footer__inner{grid-template-columns:1fr}}