:root{--md-primary: #6200ee;--md-primary-variant: #3700b3;--md-secondary: #03dac6;--md-background: #121212;--md-surface: #1e1e1e;--md-error: #cf6679;--md-on-primary: #ffffff;--md-on-secondary: #000000;--md-on-background: #ffffff;--md-on-surface: #ffffff;--md-on-error: #000000;--md-border-color: rgba(255, 255, 255, .12);--md-input-bg: rgba(255, 255, 255, .05);--md-input-text: #ffffff;--md-catalog-bg: rgba(0, 0, 0, .2);--md-catalog-hover: rgba(255, 255, 255, .1);--md-catalog-active: rgba(255, 255, 255, .2);--md-checker-color: #2c2c2c;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--pane-width-side: 320px}[data-theme=light]{--md-primary: #6200ee;--md-primary-variant: #3700b3;--md-secondary: #018786;--md-background: #f5f5f5;--md-surface: #ffffff;--md-error: #b00020;--md-on-primary: #ffffff;--md-on-secondary: #000000;--md-on-background: #000000;--md-on-surface: #000000;--md-on-error: #ffffff;--md-border-color: rgba(0, 0, 0, .12);--md-input-bg: rgba(0, 0, 0, .05);--md-input-text: #000000;--md-catalog-bg: rgba(0, 0, 0, .05);--md-catalog-hover: rgba(0, 0, 0, .05);--md-catalog-active: rgba(0, 0, 0, .1);--md-checker-color: #e0e0e0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background-color:var(--md-background);color:var(--md-on-background);height:100vh;overflow:hidden;display:flex;flex-direction:column}#app-header{background-color:var(--md-surface);padding:0 var(--spacing-md);height:56px;display:flex;align-items:center;border-bottom:1px solid var(--md-border-color);flex-shrink:0;z-index:10}#app-header h1{font-size:1.25rem;font-weight:500;letter-spacing:.15px;color:var(--md-on-surface);flex:1}.btn-icon{background:transparent;border:none;color:var(--md-on-surface);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.btn-icon:hover{background-color:var(--md-catalog-hover)}#app{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:var(--pane-width-side) 1fr var(--pane-width-side);grid-template-rows:100%}aside{background-color:var(--md-surface);padding:var(--spacing-md);border-right:1px solid var(--md-border-color);border-left:1px solid var(--md-border-color);display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto}#left-pane{border-left:none}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:4px;max-height:120px;overflow-y:auto;background:var(--md-catalog-bg);padding:4px;border-radius:4px;border:1px solid var(--md-border-color)}.catalog-item{display:flex;align-items:center;justify-content:center;height:32px;font-size:20px;cursor:pointer;border-radius:4px;transition:background-color .2s;-webkit-user-select:none;user-select:none}.catalog-item:hover{background-color:var(--md-catalog-hover)}.catalog-item:active{background-color:var(--md-catalog-active)}#right-pane{border-right:none}aside>*{flex-shrink:0}main{display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:linear-gradient(45deg,var(--md-checker-color) 25%,transparent 25%),linear-gradient(-45deg,var(--md-checker-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--md-checker-color) 75%),linear-gradient(-45deg,transparent 75%,var(--md-checker-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;position:relative}h1,h2,h3{margin-bottom:var(--spacing-sm);font-weight:500}h2{font-size:1.25rem;color:var(--md-secondary);border-bottom:2px solid var(--md-border-color);padding-bottom:var(--spacing-xs)}.control-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}label{font-size:.875rem;opacity:.87}input[type=text],select,input[type=color]{background:var(--md-input-bg);border:1px solid var(--md-border-color);color:var(--md-input-text);padding:var(--spacing-sm);border-radius:4px;font-size:1rem}select option{background-color:var(--md-surface);color:var(--md-input-text)}input[type=text]:focus,select:focus{border-color:var(--md-primary);outline:none}input[type=range]{width:100%;accent-color:var(--md-primary)}.checkbox-group{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xs)}.checkbox-item{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}input[type=text]:focus{border-color:var(--md-primary);outline:none}button.btn-primary{background-color:var(--md-primary);color:var(--md-on-primary);border:none;padding:var(--spacing-md) var(--spacing-lg);border-radius:28px;font-size:1rem;font-weight:500;cursor:pointer;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;align-items:center;gap:8px}button.btn-primary:hover{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b;transform:translateY(-2px)}button.btn-primary:active{background-color:var(--md-primary-variant)}fieldset.effect-group{border:1px solid var(--md-border-color);background:var(--md-input-bg);border-radius:8px;padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md);margin-bottom:var(--spacing-sm)}fieldset.effect-group legend{padding:0 var(--spacing-sm);color:var(--md-secondary);font-size:.9rem;font-weight:500}fieldset.effect-group .control-group{margin-bottom:var(--spacing-sm)}fieldset.effect-group .control-group:last-child{margin-bottom:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--md-background)}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.color-picker-wrapper{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--md-input-bg);border:1px solid var(--md-border-color);padding:4px;border-radius:4px}input[type=color]{appearance:none;-webkit-appearance:none;border:none;width:32px;height:32px;padding:0;background:none;cursor:pointer;border-radius:4px;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px;border:1px solid var(--md-border-color)}.color-value{font-family:monospace;font-size:.9rem;opacity:.8;flex:1}details{border:1px solid var(--md-border-color);background:var(--md-input-bg);border-radius:8px;margin-bottom:var(--spacing-sm);overflow:hidden}details[open]{background:var(--md-catalog-hover)}summary{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-weight:500;list-style:none;color:var(--md-secondary);position:relative;display:flex;justify-content:space-between;align-items:center}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-weight:700;float:right;transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}details[open] summary{border-bottom:1px solid var(--md-border-color);margin-bottom:var(--spacing-sm)}details>div,details>fieldset{padding:0 var(--spacing-md) var(--spacing-md)}.btn-small{background-color:var(--md-surface);color:var(--md-secondary);border:1px solid var(--md-secondary);padding:4px 8px;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s}.btn-small:hover{background-color:var(--md-secondary);color:var(--md-on-secondary)}