:root{--color-text-primary: #333;--color-text-secondary: #555;--color-text-tertiary: #777;--color-border: #eee;--color-background: #fff;--color-shadow: rgba(0, 0, 0, .1);--color-primary: #007aff;--color-input-border: #ccc;--spacing-xs: 5px;--spacing-sm: 10px;--spacing-md: 15px;--spacing-lg: 20px;--spacing-xl: 40px;--font-size-sm: .9em;--font-size-md: 1em;--font-size-lg: 1.3em;--font-size-xl: 1.8em;--font-size-xxl: 2.5em;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px}@media(prefers-color-scheme:dark){:root{--color-text-primary: #fff;--color-text-secondary: #ccc;--color-text-tertiary: #999;--color-border: #444;--color-background: #1a1a1a;--color-shadow: rgba(0, 0, 0, .3);--color-input-border: #555}}.wrapper{padding:var(--spacing-lg);max-width:100vw}header{display:flex;align-items:center;padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-lg);gap:var(--spacing-lg)}.header-content{text-align:left;flex-basis:calc(50% - var(--spacing-sm))}.header-side{flex-basis:calc(50% - var(--spacing-sm));overflow:hidden;max-height:141px}.header-content h1{margin-bottom:.2em;color:var(--color-text-primary);font-size:var(--font-size-xxl)}.header-content p{margin-top:0;color:var(--color-text-secondary);font-size:var(--font-size-md)}.container{display:flex;flex-wrap:wrap;padding:var(--spacing-lg) 0;gap:var(--spacing-lg)}.container>section{flex:1 1 400px;padding:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:0 2px 4px var(--color-shadow);min-width:0;background-color:var(--color-background)}.form-row{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);margin-bottom:var(--spacing-md)}.form-group{display:flex;flex-direction:column;flex:1;min-width:200px}.form-group>label{font-weight:700;margin-bottom:var(--spacing-xs);display:block;text-align:left;color:var(--color-text-primary)}.form-group input[type=text]{display:block;width:100%;padding:var(--spacing-sm);border:1px solid var(--color-input-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary)}.form-group input[type=text]:focus{border-color:var(--color-primary);outline:none}.form-group-checkbox{flex-direction:row;align-items:center}input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none;appearance:none}.checkbox-label{position:relative;padding-left:28px;cursor:pointer;display:inline-flex;align-items:center;min-height:20px;line-height:20px;text-align:left;color:var(--color-text-primary)}.checkbox-label:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:18px;border:1px solid var(--color-input-border);background-color:var(--color-background);border-radius:var(--border-radius-sm);transition:all .15s ease-in-out}.checkbox-label:after{content:"";position:absolute;left:6px;top:50%;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg) scale(0);transition:transform .15s ease-in-out}input[type=checkbox]:checked+.checkbox-label:before{background-color:var(--color-primary);border-color:var(--color-primary)}input[type=checkbox]:checked+.checkbox-label:after{transform:translateY(-60%) rotate(45deg) scale(1)}input[type=checkbox]:focus+.checkbox-label:before{box-shadow:0 0 0 .2rem #007aff40}.form-group-theme-selector .theme-options{display:flex;gap:var(--spacing-md);align-items:center;margin-top:var(--spacing-xs)}.form-group-theme-selector .theme-option{display:flex;align-items:center}.code-ui-container{position:relative;margin-top:var(--spacing-sm)}.code-ui pre{max-width:100%;overflow-x:auto;border-radius:var(--border-radius-sm)}.copy-code-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);z-index:10;padding:6px 12px;background-color:#555;color:#fff;border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-size-sm);transition:background-color .2s ease}.copy-code-button:hover{background-color:#666}.copy-code-button:active{background-color:#444}h1,h2,h3{color:var(--color-text-primary)}h2{font-size:var(--font-size-xl);margin-top:1em;margin-bottom:.5em;border-bottom:1px solid var(--color-border);padding-bottom:.3em}h3{font-size:var(--font-size-lg);margin-top:1em;margin-bottom:.5em;color:var(--color-text-secondary)}.extra-props-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding-top:var(--spacing-sm)}.extra-props-list span{background-color:var(--color-background);color:var(--color-text-secondary);padding:8px 12px;border-radius:var(--border-radius-lg);font-size:var(--font-size-sm);font-family:monospace;border:1px solid var(--color-border)}footer{margin-top:var(--spacing-xl);padding:var(--spacing-lg);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center}@media(max-width:768px){header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.header-content{margin-bottom:0;flex-basis:auto;width:100%}}.ui-buttons-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.ad-container{text-align:center}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}