#customDialog{width:min(880px,calc(100% - 24px));max-width:880px;max-height:92dvh;padding:0;background:#14192a;color:#f4f3ff;border:1px solid #655684;overflow:auto;box-shadow:0 30px 100px #0009}
.studio-header{display:flex;justify-content:space-between;align-items:center;padding:24px 26px 18px;border-bottom:1px solid #35394c}.studio-header h2{font-size:38px;margin:8px 0 0;line-height:1}.studio-header .eyebrow{font-size:9px;color:#b7a5dd}.studio-header .close{position:static;color:#dad0f5}.studio-layout{display:grid;grid-template-columns:280px 1fr;min-height:360px}.style-preview-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(ellipse,#46345c55,transparent 65%),linear-gradient(140deg,#191e34,#101423);border-right:1px solid #35394c}.style-preview-panel canvas{width:100%;height:auto;max-width:280px;aspect-ratio:9/7}.style-preview-panel b{font-size:13px;line-height:1.7;color:#e6dcfc}.style-preview-panel p{font-size:11px;color:#929bb9;margin:5px 0}.studio-controls{padding:20px;min-width:0}.style-tabs{display:flex;gap:5px;border-bottom:1px solid #34394c;padding-bottom:14px;margin-bottom:20px;flex-wrap:wrap}.style-tabs button{padding:8px 10px;font-size:11px;border-color:transparent;color:#aab2ce}.style-tabs [aria-selected=true]{background:#3b3057;border-color:#a38bd1;color:#eee6ff}.style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.style-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 5px 10px;min-width:0;background:#1e2438;border:1px solid #3a4056;color:#cfd5eb}.style-options canvas{width:90px;max-width:100%;height:auto;aspect-ratio:10/9}.style-options span{font-size:11px}.style-options [aria-pressed=true]{border-color:#c4aaff;background:#362d4e;box-shadow:inset 0 0 0 1px #c4aaff}.studio-controls h3{font-size:11px;color:#b8c1dc;margin:18px 0 12px}.studio-controls [hidden]{display:none}.color-group{border:0;padding:0;margin:0 0 20px}.color-group legend{font-size:12px;color:#d2c7ec;margin-bottom:10px}.style-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.style-swatches button{padding:0;height:30px;min-width:0;border:2px solid #fff2;background:var(--swatch);border-radius:6px}.style-swatches [aria-pressed=true]{border-color:white;box-shadow:0 0 0 2px #aa87f5}.custom-color{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px;color:#a7b0cb}.custom-color input[type=color]{width:38px;height:28px;padding:2px;border:1px solid #69718d;background:#202738;cursor:pointer}.custom-color output{font:10px monospace;color:#e3d4ff}.studio-text-button{font-size:11px;padding:7px 10px}.studio-footer{padding:16px 24px;border-top:1px solid #35394c;display:flex;align-items:center;justify-content:space-between;gap:14px}.studio-footer p{font-size:10px;color:#b4bed5;line-height:1.6;margin:0;max-width:210px}.studio-footer>div{display:flex;gap:8px}.studio-footer button{font-size:11px;padding:10px 12px}.studio-footer .primary{background:#c1afff;border-color:#c1afff;color:#211b34}.style-shortcut{border:1px solid #5f527b!important;color:#d9c7ff!important;font-size:11px!important}.style-tabs button:focus-visible,.style-options button:focus-visible,.style-swatches button:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:650px){.studio-header{padding:18px}.studio-header h2{font-size:30px}.studio-header .eyebrow{font-size:7px}.studio-layout{grid-template-columns:1fr;min-height:0}.style-preview-panel{border-right:0;border-bottom:1px solid #35394c;padding:4px 14px 12px}.style-preview-panel canvas{width:145px;height:113px}.style-preview-panel b{font-size:10px}.style-preview-panel p{font-size:9px}.studio-controls{padding:14px}.style-tabs{gap:2px;margin-bottom:12px;padding-bottom:10px}.style-tabs button{font-size:10px;padding:8px}.style-options{gap:7px}.style-options canvas{width:65px}.style-options button{padding:3px 3px 8px}.style-options span{font-size:10px}.studio-footer{padding:12px 14px;flex-direction:column;align-items:stretch;gap:10px}.studio-footer p{max-width:none;text-align:center;font-size:9px}.studio-footer>div{justify-content:center}.style-shortcut{padding:8px!important;font-size:10px!important}}
@media(max-width:600px){header{height:auto;min-height:90px;padding:12px 0;flex-wrap:wrap;gap:8px}nav{order:3;width:100%;flex-wrap:wrap;row-gap:5px;justify-content:space-between}.dimension-3d nav{flex-wrap:wrap;row-gap:5px}}