header{gap:24px;padding-right:88px}.brand{font-size:30px;white-space:nowrap;letter-spacing:0}.site-menu{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));margin:0;z-index:40}.site-menu-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid white;border-radius:8px;background:var(--nav-glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:#25272b}.site-menu-toggle:hover,.site-menu-toggle[aria-expanded=true]{background:#f7e9e3}.site-menu-toggle img{display:block}.site-menu nav{position:absolute;right:0;top:52px;width:210px;display:grid;gap:4px;padding:8px;margin:0;border:1px solid white;border-radius:8px;background:var(--nav-glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);animation:menu-enter 0.32s ease-out}.site-menu nav[hidden]{display:none}.site-menu nav button{border:0;border-radius:5px;background:transparent;color:#25272b;text-align:left;padding:12px;font-size:14px}.site-menu nav button:hover{background:#f7e9e3;color:var(--rust)}
.season-choice{overflow:hidden;isolation:isolate}.season-choice>span{position:relative;z-index:1}.season-choice .season-symbol{position:absolute;right:12px;top:50%;width:68px;height:68px;transform:translateY(-50%) rotate(-12deg);opacity:.13;pointer-events:none;transition:opacity 0.4s,transform 0.4s}.season-choice:has(input:checked) .season-symbol{opacity:.22;transform:translateY(-50%) rotate(0)}.season-choice:hover .season-symbol{opacity:.2}
.gender-choice{min-height:92px;gap:12px;flex-direction:column}.gender-choice .gender-symbol{width:42px;height:42px;opacity:.68;transition:opacity 0.4s,transform 0.4s}.gender-choice:has(input:checked) .gender-symbol{opacity:1;transform:translateY(-2px)}.gender-choice>span{font-weight:600}
@keyframes menu-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){#steps{top:72px}header{padding-right:80px}.site-menu nav{max-width:calc(100vw - 32px);max-height:calc(100svh - 90px);overflow:auto}}
@media(max-width:1050px){header .header-label{display:none}}@media(max-width:650px){header{gap:16px}.brand{font-size:26px}.edition{display:none}.site-menu{margin-left:auto}.season-choice .season-symbol{width:60px;height:60px;right:8px}.gender-choice{min-height:82px}.gender-choice .gender-symbol{width:36px;height:36px}}@media(max-width:360px){.brand{font-size:23px}}
@media(prefers-reduced-motion:reduce){.site-menu nav{animation:none}.season-choice .season-symbol{transition:none}}@media(prefers-reduced-transparency:reduce){.site-menu-toggle,.site-menu nav{background:white;backdrop-filter:none}}
header{position:relative}.site-menu{position:absolute;top:50%;right:max(16px,env(safe-area-inset-right));transform:translateY(-50%)}
.editor-nav-shell{position:sticky;top:6px;z-index:40;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:700px;margin:0 auto 52px;padding:8px;border:1px solid transparent;border-radius:8px;transition:background 0.48s ease,box-shadow 0.48s ease,border-color 0.48s ease}
/* Keep one glass layer behind the controls in both docking states.
   A sibling backdrop avoids trapping the menu inside a filtered ancestor. */
.editor-nav-shell::before{content:"";position:absolute;z-index:-1;inset:8px max(8px,calc((100% - 620px)/2));border:1px solid #fff;border-radius:8px;background:var(--nav-glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);pointer-events:none;transition:inset 0.48s ease}
.editor-nav-shell.is-docked::before{inset:0}
.editor-nav-shell #steps{position:static;top:auto;flex:1;min-width:0;max-width:620px;width:100%;margin:0;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.editor-nav-shell.is-docked{padding:8px}
.editor-nav-shell .site-menu{position:relative;top:auto;right:auto;flex:none;margin:0;transform:none}
.editor-nav-shell .site-menu-toggle{box-shadow:none;border-color:transparent;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.editor-nav-shell .site-menu-toggle:hover,.editor-nav-shell .site-menu-toggle[aria-expanded=true]{background:transparent;opacity:.72}
.editor-nav-shell .site-menu nav{top:52px}
@keyframes editor-menu-dock{from{opacity:.35;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.editor-nav-shell.is-docked .site-menu{animation:editor-menu-dock 0.56s cubic-bezier(.2,.75,.25,1) backwards}
@media(max-width:650px){.editor-nav-shell{margin-bottom:38px;padding:5px}.editor-nav-shell:not(.is-docked)::before{inset:5px}.editor-nav-shell #steps{padding:5px}.editor-nav-shell.is-docked{gap:4px;padding:5px}}
@media(prefers-reduced-motion:reduce){.editor-nav-shell,.editor-nav-shell::before{transition:none}.editor-nav-shell.is-docked .site-menu{animation:none}}
@media(max-width:850px){.preview-column{width:calc(100% - 48px);max-width:330px}}
@media(prefers-reduced-transparency:reduce){.editor-nav-shell::before,.site-menu-toggle,.site-menu nav,#content>.categories{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

header:has(.site-menu-toggle[aria-expanded="true"]){z-index:50}
.editor-nav-shell .site-menu{z-index:30}
.site-menu nav{z-index:2}

/* Align the glass navigation with the editor's left edge. */
.editor-nav-shell{margin-left:0;margin-right:auto;justify-content:flex-start}
.editor-nav-shell::before{inset:0}
@media(max-width:650px){.editor-nav-shell:not(.is-docked)::before{inset:0}}
.editor-scroll-veil{position:fixed;top:0;left:var(--veil-left);width:var(--veil-width);height:var(--veil-height);z-index:9;pointer-events:none;background:rgba(249,250,248,.58);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.editor-scroll-veil[hidden]{display:none}
.garment .check{display:grid;place-items:center;flex:none;width:24px;height:24px;color:inherit}
.custom-garment-color{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:13px}
.custom-garment-color label{margin-right:auto}.custom-garment-color #color-code{margin:0}
@media(prefers-reduced-transparency:reduce){.editor-scroll-veil{background:#fafbf8;backdrop-filter:none;-webkit-backdrop-filter:none}}

.occasion-grid .choice:last-child{grid-column:1/-1}.occasion-choice{padding-right:64px}.occasion-choice>span{overflow-wrap:anywhere}

/* The glass expands only when the menu joins; the four steps keep their width. */
.editor-nav-shell{--dock-gap:8px;width:calc(var(--editor-width,100%) - 44px - var(--dock-gap));max-width:100%;gap:0;transition:width .56s cubic-bezier(.2,.75,.25,1),gap .56s cubic-bezier(.2,.75,.25,1),background .48s ease,box-shadow .48s ease,border-color .48s ease}
.editor-nav-shell.is-docked{width:var(--editor-width,100%);gap:var(--dock-gap)}
.editor-nav-shell #steps{max-width:none}
.nav-menu-slot{width:0;flex:0 0 0;min-width:0;align-self:center;transition:width .56s cubic-bezier(.2,.75,.25,1),flex-basis .56s cubic-bezier(.2,.75,.25,1)}
.editor-nav-shell.is-docked .nav-menu-slot{width:44px;flex-basis:44px}
.nav-menu-slot .site-menu{width:100%}
.nav-menu-slot .site-menu-toggle{width:100%;min-width:0;padding:0;overflow:hidden}
.editor-nav-shell::before{inset:6px 0;transition:inset .48s ease,background .48s ease,box-shadow .48s ease}
.editor-nav-shell.is-docked::before{inset:0}
@keyframes editor-menu-dock{from{opacity:0}to{opacity:1}}
.profile-validation-dialog{width:min(480px,calc(100% - 32px));max-height:90svh;overflow:auto;padding:24px;border:1px solid #fff;border-radius:10px;background:#f8f9fbf5;color:#25272b;box-shadow:0 24px 80px #17202f35;animation:profile-hint-in .48s ease both}
.profile-validation-dialog::backdrop{background:#333d4b38;backdrop-filter:blur(8px)}
.profile-validation-header{display:flex;align-items:start;justify-content:space-between;gap:16px}.profile-validation-header h2{font-size:20px;line-height:1.35}
.profile-validation-close{flex:none;min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:7px;background:var(--glass);font-size:24px;color:#535a65}
.profile-validation-dialog p{font-size:15px;line-height:1.65;margin:18px 0 0}
@keyframes profile-hint-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:650px){.editor-nav-shell{--dock-gap:4px}.editor-nav-shell:not(.is-docked)::before{inset:6px 0}.profile-validation-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){.profile-validation-dialog{animation:none}.editor-nav-shell::before{transition:none}}
@media(min-width:651px) and (max-width:1150px){.editor-nav-shell #steps .step{flex-direction:column;gap:5px;padding:6px 2px;font-size:12px;min-height:60px}.editor-nav-shell #steps .step b{width:24px;height:24px;font-size:11px}}

@media(max-width:850px){.editor-scroll-veil{background:rgba(249,250,248,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}}
@media(max-width:650px){header{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:3px}header .brand{grid-column:1}header .edition{display:block;grid-column:1;margin:0;font-size:11px;line-height:1.3;white-space:nowrap;color:#616771}}

.avatar-stage .stage-footer{gap:5px 8px}
.avatar-stage .stage-footer .avatar-note{position:static;inset:auto;flex:0 0 100%;width:100%;margin:0;background:transparent;line-height:1.35;font-size:10px;color:#616771;font-weight:400}
@media(max-width:650px){.avatar-stage .stage-footer .avatar-note{font-size:9px}}

/* Only the separate panes blur editor content. The navigation's own glass stays untouched. */
.editor-scroll-veil{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.editor-veil-pane{position:absolute;background:rgba(249,250,248,.58);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:none}
.editor-veil-pane[hidden]{display:none}
@media(max-width:850px){.editor-veil-pane{background:rgba(249,250,248,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}}
@media(prefers-reduced-transparency:reduce){.editor-veil-pane{background:#fafbf8;backdrop-filter:none;-webkit-backdrop-filter:none}}