#avatarStudio9{width:min(850px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:12px auto auto;box-sizing:border-box;padding:18px;border:1px solid #81918d;border-radius:8px;background:#f8faf9;color:#243d35;overflow:auto;letter-spacing:0}
#avatarStudio9::backdrop{background:rgba(15,25,22,.65)}
#avatarStudio9 h2{font-size:22px;margin:0 0 14px;letter-spacing:0}
#avatarStudio9 button,#avatarStudio9 select{font:inherit;letter-spacing:0;min-height:40px;border:1px solid #aab8b2;border-radius:5px;background:#fff;color:#243d35;padding:6px 10px;cursor:pointer}
#avatarStudio9 button:focus-visible,#avatarStudio9 input:focus-visible,#avatarStudio9 select:focus-visible{outline:3px solid #287a66;outline-offset:2px}
.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.studio-preview{min-width:0}.studio-preview canvas{display:block;width:100%;height:310px;border-radius:4px}
.studio-controls{min-width:0}.studio-tabs{display:flex;gap:5px;border-bottom:1px solid #c3ceca;padding-bottom:8px}
#avatarStudio9 [role=tab][aria-selected=true],#studioApply9{background:#23684f;color:#fff;border-color:#23684f}
.studio-panel{padding:12px 0;min-height:250px}.studio-range{display:grid;grid-template-columns:1fr 34px;gap:7px;margin:12px 0;font-size:14px}
.studio-range input{grid-column:1 / -1;width:100%;min-width:0;accent-color:#287a66;min-height:24px;margin:0}.studio-range output{text-align:right;font-variant-numeric:tabular-nums}
.studio-select{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:center;margin:10px 0;font-size:14px}
#avatarStudio9 select{width:100%;min-width:0}#avatarStudio9 fieldset{border:0;border-top:1px solid #dae1de;margin:14px 0 0;padding:8px 0}#avatarStudio9 legend{font-size:13px;padding-right:8px}
#avatarStudio9 .studio-swatch{width:36px;height:36px;min-height:36px;padding:0;margin:3px;border:2px solid #fff;box-shadow:0 0 0 1px #aab8b2}
#avatarStudio9 .studio-swatch[aria-pressed=true]{outline:3px solid #243d35;outline-offset:1px}
#avatarStudio9 footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;border-top:1px solid #c3ceca;padding-top:14px;margin-top:12px}
#avatarStudio9{overflow:hidden;display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
#avatarStudio9:not([open]){display:none}
.studio-layout{min-height:0;overflow:hidden}.studio-controls{overflow:auto;overscroll-behavior:contain;padding:3px 5px}.studio-tabs{position:sticky;top:-3px;background:#f8faf9;z-index:1}
.studio-preview canvas{touch-action:none;cursor:grab}.studio-preview canvas:active{cursor:grabbing}
#avatarStudio9 h2,#avatarStudio9 footer{flex-shrink:0}
#avatarStudio9 button:disabled{opacity:.45;cursor:default}
#studioUndo9,#studioRedo9{width:40px;padding:0;font-size:22px}
@media(max-width:600px){#avatarStudio9{padding:12px;height:calc(100dvh - 24px)}.studio-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;flex:1}.studio-preview{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.studio-preview canvas{grid-column:1/-1;height:clamp(140px,24dvh,220px)}.studio-preview .studio-range{margin:4px 0;font-size:12px;gap:2px}.studio-preview .studio-select{grid-template-columns:1fr;margin:4px 0;font-size:12px;gap:3px}.studio-panel{min-height:140px}.studio-tabs button{flex:1}.studio-select{grid-template-columns:80px minmax(0,1fr)}#avatarStudio9 footer{gap:6px;padding-top:8px;margin-top:6px}#avatarStudio9 footer button{font-size:12px;padding:6px 8px}}
@media(max-height:540px) and (min-width:601px){.studio-preview canvas{height:150px}.studio-preview .studio-range{margin:4px 0}.studio-preview .studio-select{margin:4px 0}#avatarStudio9{height:calc(100dvh - 16px);padding:10px}#avatarStudio9 h2{margin-bottom:6px}.studio-layout{flex:1}#avatarStudio9 footer{margin-top:6px;padding-top:6px}}