*{box-sizing:border-box}:root{--color-accent: #007bff;--color-bg: #000;--color-text: #e0e0e0;--color-text-muted: #777;--color-focused: var(--color-accent);--panel-width: 420px;--color-panel-bg: #111}html,body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;background-color:var(--color-bg);font-family:Google Sans Flex,sans-serif;font-optical-sizing:auto;font-style:normal;color:var(--color-text)}body{display:flex;align-items:center;justify-content:center;position:relative}main{height:100%;width:100%;margin:0;padding:0;overflow:hidden;background-color:var(--color-bg);flex:1;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform;&.open{transform:translate(calc(var(--panel-width) / -2))}}#panel-toggle{position:fixed;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:16px;padding:0;cursor:pointer;outline:none;border:none;background-color:var(--color-bg);opacity:0;transition:opacity .1s ease,right .7s cubic-bezier(.4,0,.2,1),border-color 2s cubic-bezier(.4,0,.2,1);&:hover{opacity:1;border:2px solid var(--color-text);transition:border .1s ease;svg{fill:var(--color-text);transition:fill .1s ease}}&.open{background-color:transparent;opacity:1;&:hover{border:none;svg{fill:var(--color-text-muted)}}}svg{height:24px;width:24px;fill:var(--color-text);transition:transform .35s ease}&.open svg{transform:rotate(180deg)}}#config-panel{position:fixed;right:calc(var(--panel-width) * -1);top:calc(50% - 512px);height:1024px;width:var(--panel-width);background-color:var(--color-panel-bg);border-left:1px solid var(--panel-border);border-radius:16px 0 0 16px;z-index:99;overflow-y:auto;overflow-x:hidden;padding:32px 48px 32px 32px;transition:right .35s cubic-bezier(.35,-.22,.27,1.22);&.open{right:0}}#config-panel-inner{section{h4{text-transform:uppercase;font-size:12px;font-weight:600;color:var(--color-text-muted);margin-top:0;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--color-text-muted)}}section{display:flex;flex-direction:column;margin-bottom:24px}section:last-child{margin-bottom:0}.parameter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;label{font-size:13px;flex-shrink:0}input{width:128px;padding:8px;border:1px solid var(--color-text-muted);border-radius:8px;font-size:14px;color:var(--color-text);background-color:var(--color-panel-bg);transition:border-color .35s ease;&:focus{outline:none;border-color:var(--color-accent)}}input[type=checkbox]{appearance:none;width:40px;height:22px;padding:0;border-radius:11px;position:relative;cursor:pointer;&:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background-color:var(--color-text-muted);transition:transform .2s ease,background-color .2s ease}&:checked{border-color:var(--color-accent);background-color:var(--color-accent)}&:checked:after{transform:translate(18px);background-color:#fff}}}.button-row{display:flex;gap:8px}.button-row button{flex:1}section button{padding:8px;border:2px solid var(--color-text-muted);border-radius:8px;font-size:14px;color:var(--color-text);background-color:var(--color-panel-bg);transition:border-color .35s ease;cursor:pointer;&:hover{border-color:var(--color-text)}&:focus{outline:none;border-color:var(--color-accent)}}section#presets{height:360px;#presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(69px,1fr));gap:8px;.preset-item{aspect-ratio:1;background-color:var(--color-panel-bg);border:1px solid var(--color-text-muted);color:var(--color-text);border-radius:8px;transition:border-color .2s ease,transform .15s ease;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;&:hover{border-color:var(--color-text)}&:focus{outline:none;border-color:var(--color-accent)}img{width:100%;height:100%;object-fit:cover;border-radius:6px}}}}}