body.customizing{overflow:hidden}
.appearance-tabs{display:flex;gap:3px;padding:4px;border:1px solid #d8ceb3;border-radius:12px;background:#eee6cf;margin-bottom:15px}
.appearance-tabs button{flex:1;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:#7b765a;font-size:11px;font-weight:600}
.appearance-tabs button[aria-pressed=true]{background:#fffbed;color:#415936;box-shadow:0 2px 5px #7a5d2620}
#colors-panel[hidden],#face-panel[hidden]{display:none}
#colors-panel .color-section>p{display:none}#colors-panel .swatches{margin-top:13px}
.face-section h3{font:500 19px 'Fraunces',serif;color:#3f5234;margin:0 0 6px}
.face-section>p{font-size:10px;color:#8b7f64;margin:0 0 10px}
.face-section+.face-section{margin-top:14px;padding-top:14px;border-top:1px solid #d7ccb06e}
.face-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.face-option{padding:4px 0 7px;border:1px solid #dacfaf;border-radius:11px;background:#fff9e9;color:#71664f;overflow:hidden;font-size:10px}
.face-option canvas{display:block;width:100%;height:auto;margin-bottom:5px}
.face-option[aria-pressed=true]{outline:2px solid #536942;outline-offset:2px;color:#334f2a;font-weight:700;background:#eaeacf}
.face-option:hover{border-color:#78875c}
dialog.wardrobe{position:fixed;inset:0;margin:auto;width:min(900px,calc(100vw - 32px));max-width:none;height:max-content;max-height:calc(100dvh - 32px);padding:0;border:1px solid #c8b993;border-radius:22px;background:#fbf5e5;color:#463e2c;box-shadow:0 25px 100px #0e251580;overflow:auto;scrollbar-width:thin;scrollbar-color:#b6b69a #f5efdc;z-index:20}
dialog.wardrobe::backdrop{background:#122d24bd;backdrop-filter:blur(5px)}
dialog.wardrobe[hidden]{display:none}
.wardrobe .wardrobe-heading{position:relative;padding:27px 32px 23px;border-bottom:1px solid #d6ccb058;align-items:flex-start;background:linear-gradient(120deg,#f6efd8,#fff9eb)}
.wardrobe .eyebrow{font-size:9px;letter-spacing:1.8px;color:#75804c}
.wardrobe h2{font-size:32px;letter-spacing:-.8px;color:#34452e;margin:6px 0}
.wardrobe-heading p{font-size:12px;color:#82765d;margin:7px 0 0}
.wardrobe .close{width:32px;height:32px;background:transparent;border:1px solid #d3cab0;color:#7f8065;font-size:24px}
.wardrobe .close:hover{background:#eee7d1}
.wardrobe-body{display:grid;grid-template-columns:1.12fr 1fr;min-height:412px}
.character-preview{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 13px 23px;background:#fff9e9;border-right:1px solid #dfd5b969;overflow:hidden}
.preview-stage{position:relative;width:100%;max-width:430px}
#avatar{display:block;width:100%;height:auto;aspect-ratio:576/540}
#preview-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;background:#fff9e9;color:#6c7954;font-size:12px}
#preview-loading[hidden]{display:none}
.view-switch{display:flex;gap:3px;padding:4px;border-radius:22px;border:1px solid #d8ceb3;background:#f0e8d2;margin-top:-21px;z-index:1}
.view-switch button{font-size:11px;padding:8px 17px;border:0;background:none;color:#7a765b;border-radius:19px}
.view-switch button[aria-pressed=true]{background:#fffbed;color:#465737;box-shadow:0 2px 5px #7a5d2620}
.species{font-size:11px;font-weight:600;color:#6d7054;text-align:center;margin:16px 0 0}.species span{display:block;font:italic 11px Georgia,serif;color:#969075;margin-top:4px}
.appearance-controls{padding:25px 30px 20px;align-self:center}
.color-section+.color-section{padding-top:22px;margin-top:20px;border-top:1px solid #d7ccb06e}
.color-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.color-heading strong{font:500 19px 'Fraunces',serif;color:#3f5234}
.color-heading>span{font-size:10px;color:#7a795d;border:1px solid #dacfaf;border-radius:10px;padding:3px 8px}
.color-section>p{font-size:10px;color:#8b7f64;margin:6px 0 15px}
.wardrobe .swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.wardrobe .swatch{border:2px solid #fff9e3;border-radius:11px;box-shadow:0 1px 2px #66512533,inset 0 0 0 1px #0000000a;min-width:0;transition:transform .12s}
.wardrobe .swatch:hover{transform:translateY(-2px)}
.wardrobe .swatch[aria-pressed=true]{outline:2px solid #536942;outline-offset:2px}
.wardrobe .swatch[aria-pressed=true]:after{font-size:14px;text-shadow:0 1px 3px #000b}

.reset-appearance{padding:0;margin:22px 0 0;background:none;border:0;color:#7b8060;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.reset-appearance:hover{color:#334f2a}
.wardrobe-footer{padding:19px 30px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #dfd4b6;background:#f3ecd9}
.wardrobe-footer p{font-size:10px;color:#8b8266;margin:0}.wardrobe-footer>div{display:flex;gap:16px;align-items:center}
.menu-cancel{border:0;background:none;color:#737459;font-size:11px;padding:10px 5px}
.menu-save{border:1px solid #435d31;border-bottom:3px solid #344c26;border-radius:9px;padding:11px 23px;background:#647e49;color:#fff8e3;font-weight:700;font-size:12px;box-shadow:inset 0 1px #a6b787}
.menu-save:hover{background:#718b54}.menu-save span{margin-left:10px}
.appearance-status{font-size:11px;color:#d7dfba;text-align:center;margin:12px 0 0}.appearance-status:empty{display:none}
@media(max-width:560px){dialog.wardrobe{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.wardrobe .wardrobe-heading{padding:20px 21px 17px}.wardrobe h2{font-size:26px}.wardrobe .eyebrow{font-size:7px}.wardrobe-body{grid-template-columns:1fr}.character-preview{padding-bottom:16px;border-right:0;border-bottom:1px solid #dfd5b9}.preview-stage{max-width:320px;margin-top:-30px}.view-switch{margin-top:-32px}.species{margin-top:9px}.species span{display:inline;margin-left:5px}.appearance-controls{padding:22px 25px}.wardrobe .swatches{gap:12px;grid-template-columns:repeat(6,minmax(0,1fr))}.wardrobe .swatch{max-height:44px}.color-section+.color-section{padding-top:17px;margin-top:17px}.wardrobe-footer{padding:17px 20px;position:sticky;bottom:0}.wardrobe-footer p{font-size:9px;max-width:110px}.menu-save{padding:10px 15px}.wardrobe-footer>div{gap:9px}}

@media(min-width:561px) and (max-width:800px){.wardrobe .wardrobe-heading{padding:19px 23px 18px}.wardrobe h2{font-size:27px}.wardrobe .eyebrow{font-size:7px}.wardrobe-body{grid-template-columns:1fr 1.05fr;min-height:390px}.character-preview{padding:0 7px 20px}.appearance-controls{padding:16px 20px}.wardrobe .swatches{gap:8px}.color-heading strong{font-size:17px}.color-heading>span{font-size:8px}.color-section>p{font-size:9px}.color-section+.color-section{padding-top:14px;margin-top:14px}.reset-appearance{margin-top:17px}.wardrobe-footer{padding:15px 22px}.species{font-size:10px}.species span{font-size:10px}}