@font-face{font-family:Pixel;src:url('/handborne/fonts/vt323.ttf')}@font-face{font-family:Display;src:url('/handborne/fonts/anton.ttf')}
:root{color-scheme:dark;--cream:#fff0ce;--gold:#d7b56c;--ink:#110d19;--pink:#cbb4e7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#3c2149,#140e1d 70%);color:var(--cream);font:15px/1.5 Georgia,serif}button,input{font:inherit}button,a,.file-button{touch-action:manipulation}button,.file-button{cursor:pointer;border:1px solid #846a43;background:#29202f;color:var(--cream);padding:10px 15px;min-height:44px}button:hover,.file-button:hover{background:#493350;border-color:var(--gold)}button:disabled{opacity:.4;cursor:default}a{color:var(--cream)}:focus-visible{outline:3px solid #efcffa;outline-offset:3px}.masthead{display:flex;align-items:center;justify-content:space-between;padding:12px 4vw;border-bottom:1px solid #725438;font:17px Pixel,monospace;letter-spacing:.08em}.masthead img{width:42px;height:42px;object-fit:contain}.masthead a{text-decoration:none}main{max-width:1530px;margin:auto;padding:22px 3vw 120px}.invitation{position:relative;padding:6px 0 24px}.eyebrow{font:14px Pixel,monospace;letter-spacing:.18em;color:var(--gold);margin:0 0 10px}h1{font:clamp(38px,4vw,64px)/1 Display,Impact;margin:0;letter-spacing:.015em}h1 br{display:none}.invitation>p:last-child{margin:12px 0 0;color:#c5b4cb}h2{font:32px Display,Impact;margin:0 0 7px}.atelier{display:grid;grid-template-columns:205px minmax(280px,1fr) 350px;gap:22px;align-items:start}.sections{padding:18px 0}.sections button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;margin:0 0 5px;border-color:transparent;background:transparent;padding:8px 10px;font:17px Pixel,monospace;color:#c6b5cd}.sections button[aria-pressed=true]{background:#e2c187;color:#271530;border-color:#fee0a5;box-shadow:4px 4px #07050b}.sections button span{font-size:13px;opacity:.65}.mirror{position:sticky;top:18px;background:#110c1b;border:8px ridge #af8d54;box-shadow:0 0 0 2px #382336,10px 15px 0 #09070d,0 25px 70px #0009}.mirror-label{display:flex;justify-content:space-between;padding:12px 12px;border-bottom:1px solid #74613f;font:12px Pixel,monospace;letter-spacing:.1em;color:#d9ba7b}.portrait{height:470px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#654763,#251f35 52%,#100d19 80%)}.portrait:before{content:'';position:absolute;inset:10px;border:1px solid #b5946344;border-radius:45% 45% 0 0;box-shadow:inset 0 0 30px #dca58e22}.portrait canvas{position:relative;z-index:2;image-rendering:pixelated;height:96%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(10px 12px 0 #06030a77)}.curtain{position:absolute;top:0;bottom:0;width:16%;background:repeating-linear-gradient(90deg,#36112f,#713150 25%,#250d25 50%);z-index:3;box-shadow:5px 0 13px #0008}.curtain.left{left:0;clip-path:polygon(0 0,100% 0,75% 50%,40% 100%,0 100%)}.curtain.right{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,75% 50%,40% 100%,0 100%)}.mirror-floor{position:absolute;bottom:0;height:20%;width:100%;background:repeating-conic-gradient(#211a2e 0 25%,#433248 0 50%) 0 / 45px 45px;transform:perspective(100px) rotateX(20deg);opacity:.5}.nameplate{background:#d3b678;color:#24132d;text-align:center;padding:14px}.nameplate label{display:block;font:12px Pixel,monospace;letter-spacing:.1em}.nameplate input{width:100%;background:transparent;border:0;border-bottom:1px solid #7e583b;text-align:center;color:#25162b;font:24px Pixel,monospace;padding:6px}.mirror-actions{display:flex;padding:10px;gap:6px}.mirror-actions button{flex:1;padding:8px 4px;font:16px Pixel,monospace}.flavour{text-align:center;font:12px Pixel,monospace;letter-spacing:.16em;color:#b6a3be;margin:3px 0 12px}.wardrobe{padding:18px;background:#211629;border:1px solid #655039}.wardrobe>p:not(.eyebrow){color:#c6b5cd;min-height:45px;margin:0 0 18px;font-size:14px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.option{padding:6px;display:flex;flex-direction:column;align-items:center;background:#130f1d;border-color:#51405b;min-width:0}.option canvas{width:64px;height:96px;image-rendering:pixelated}.option span{font:15px/1.05 Pixel,monospace;min-height:30px;display:grid;place-items:center}.option[aria-pressed=true]{border:2px solid #f1ca86;background:#493045;box-shadow:inset 0 0 0 2px #1a1121}.dyes{border:0;border-top:1px solid #634557;margin:18px 0 0;padding:14px 0 0}.dyes legend{font:16px Pixel,monospace;color:var(--gold)}#dyes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}#dyes button{min-height:35px;padding:0;background:var(--swatch);border:3px solid #17101e}#dyes button[aria-pressed=true]{border-color:#fff2cf;box-shadow:0 0 0 1px #bda483}.saved-looks{margin-top:40px;border-top:1px solid #725438;padding:26px 0}.saved-looks p{color:#c6b5cd}#looks{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}#looks button{display:flex;align-items:center;gap:10px}#looks canvas{width:40px;height:60px;image-rendering:pixelated}.save-actions{display:flex;gap:8px;flex-wrap:wrap}.file-button{display:inline-flex;align-items:center}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.file-button:focus-within{outline:3px solid #efcffa}.arrival{position:fixed;z-index:10;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#150e1ff5;border-top:2px solid #a88654;padding:12px 3vw;box-shadow:0 -12px 25px #0004}.arrival p{margin:0;font:17px Pixel,monospace;color:#cbb7d0}.arrival button{background:#ddbc7b;color:#211327;border:3px outset #f0d294;font:20px Pixel,monospace;white-space:nowrap;box-shadow:4px 4px #000}
@media(max-width:1100px){.atelier{grid-template-columns:155px minmax(250px,1fr) 300px;gap:12px}.portrait{height:400px}.wardrobe{padding:12px}.masthead span{font-size:14px}}
@media(max-width:850px){.atelier{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sections{grid-column:1/-1;padding:0;min-width:0}#sections{display:flex;overflow-x:auto;gap:5px;padding-bottom:10px}.sections>.eyebrow{display:none}.sections button{width:auto;white-space:nowrap;flex:none}.portrait{height:350px}.mirror{top:10px}.wardrobe{min-width:0}.arrival{flex-wrap:wrap}.arrival p{font-size:14px}h1 br{display:block}}
@media(max-width:540px){main{padding:18px 12px 155px}.masthead{padding:8px 12px}.masthead span{max-width:155px;text-align:center}.invitation{padding-bottom:18px}.invitation>p:last-child{font-size:13px}.atelier{grid-template-columns:1fr}.mirror{position:relative;top:auto;max-width:100%;border-width:6px}.portrait{height:310px}.mirror-label{font-size:11px}.wardrobe{margin-top:12px}.options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.option{padding:4px 1px}.option canvas{width:48px;height:72px}.option span{font-size:12px;min-height:36px;overflow-wrap:anywhere}.arrival{padding:10px 12px;gap:6px}.arrival button{width:100%;font-size:19px}.save-actions>*{flex:1;font-size:14px}.saved-looks{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(min-width:851px){.options{max-height:650px;overflow-y:auto;padding:3px;scrollbar-color:#a18252 #1b1023}.sections{position:sticky;top:12px;max-height:calc(100dvh - 110px);overflow-y:auto}}

/* Keep the avatar above two-row rails of sections and wardrobe choices. */
.atelier{display:flex;flex-direction:column;gap:12px;max-width:1120px;margin:auto}
.mirror{position:sticky;top:0;z-index:4;width:100%;max-width:none;border-width:5px;box-shadow:0 5px 14px #0008}
.mirror-label{padding:5px 12px}.portrait{height:clamp(160px,27dvh,280px)}
.nameplate{padding:5px 15px}.nameplate input{font-size:20px;padding:2px}.nameplate label{font-size:11px}
.mirror-actions{padding:4px 8px;max-width:540px;margin:auto}.mirror-actions button{min-height:36px;padding:3px 8px}.flavour{display:none}
.sections{position:static;max-height:none;overflow:visible;width:100%;padding:0}.sections>.eyebrow{display:none}
#sections{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,44px);grid-auto-columns:minmax(115px,1fr);gap:5px;overflow-x:auto;overflow-y:hidden;padding:3px 3px 8px;scrollbar-color:#b19058 #211329}
.sections button{width:100%;margin:0;padding:7px 9px;white-space:nowrap;font-size:16px;gap:5px}.sections button span{font-size:10px}
.wardrobe{width:100%;padding:12px;margin:0}.wardrobe>.eyebrow{display:none}.wardrobe h2{font-size:24px;display:inline-block;margin:0 14px 7px 0}.wardrobe>p:not(.eyebrow){display:inline;font-size:13px;min-height:0;margin:0}
.options{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,116px);grid-auto-columns:94px;gap:7px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:5px 3px 10px;scrollbar-color:#b19058 #211329}
.option{padding:3px}.option canvas{width:48px;height:72px}.option span{font-size:14px;min-height:30px}
.dyes{padding:6px 0 0;margin:6px 0 0}#dyes{grid-template-columns:repeat(10,minmax(0,1fr))}#dyes button{min-height:28px}
@media(max-width:540px){.invitation h1{font-size:30px}.invitation h1 br{display:none}.invitation>p:last-child{display:none}.invitation .eyebrow{font-size:11px}.invitation{padding:0 0 10px}main{padding-top:10px}.masthead{padding:4px 12px}.masthead img{width:30px;height:30px}.portrait{height:clamp(120px,21dvh,180px)}.mirror-label{font-size:10px}.nameplate{padding:3px 10px}.nameplate label{font-size:10px}.nameplate input{padding:0}.mirror-actions button{font-size:14px;min-height:34px}.atelier{gap:6px}#sections{grid-auto-columns:100px;gap:3px;padding-bottom:5px}.sections button{font-size:15px;padding:6px}.sections button span{display:none}.wardrobe{padding:7px}.wardrobe>p:not(.eyebrow){display:none}.wardrobe h2{font-size:20px;margin-bottom:3px}.options{grid-template-rows:repeat(2,96px);grid-auto-columns:76px;gap:4px}.option canvas{width:36px;height:54px}.option span{font-size:12px;min-height:30px}.dyes legend{font-size:13px}.dyes{margin-top:2px}.arrival p{font-size:12px}.arrival button{min-height:40px;font-size:17px}.arrival{padding:6px 12px}}

.wardrobe .saved-piece:not([hidden]){display:block;margin:6px 0;font-size:14px;color:var(--gold)}
.wardrobe .saved-piece[hidden]{display:none}

/* One menu, one submenu, and one editing surface at a time. */
.atelier [hidden],.saved-looks[hidden],.saved-looks [hidden]{display:none!important}
#sections{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto;grid-auto-columns:auto;overflow:visible;padding:0;gap:5px}
#sections button{justify-content:center;text-align:center;border:1px solid #594364;background:#211629;white-space:normal;min-height:44px}
#sections button[aria-expanded=true]{background:#e2c187;color:#271530;border-color:#fee0a5;box-shadow:0 2px 0 #07050b}
#customizer-submenus{margin-top:8px;padding:8px;background:#1b1224;border:1px solid #503a5c;border-radius:3px}
#menu-label{margin:0 0 6px;font-size:12px}
#subsections{display:flex;flex-wrap:wrap;gap:5px}
#subsections button{width:auto;flex:0 1 auto;min-height:40px;padding:6px 12px;margin:0;border:1px solid #4b3a55;background:#2b2032;white-space:normal}
#subsections button[aria-expanded=true]{background:#53384f;color:#ffeac5;border-color:#e2bb79;box-shadow:inset 0 -2px #e2bb79}
.portrait canvas{transform:scale(var(--preview-scale,1));transform-origin:var(--focus-x,50%) var(--focus-y,50%);transition:transform .28s ease,transform-origin .28s ease}
.wardrobe{border-radius:3px}
.wardrobe h2{font-size:24px}.wardrobe #category-note{display:block;margin:0 0 10px;color:#c6b5cd}
#silk-panel{margin:12px 0 0;padding:8px 0 0}#silk-panel #dyes button{min-height:44px}
#dye-name{margin:9px 0 0;color:#e4c28d;font:18px Pixel,monospace}
#saved-looks{max-width:1120px;margin:0 auto;padding:14px;background:#211629;border:1px solid #655039;border-radius:3px}
#saved-looks h2{font-size:24px}#looks-note{margin:0 0 12px;font-size:14px}#looks{margin:0}
@media(max-width:680px){#sections{grid-template-columns:repeat(3,minmax(0,1fr))}#subsections button{font-size:15px;min-height:40px;flex-grow:1}#customizer-submenus{padding:6px}#menu-label{display:none}#sections button{font-size:16px}#silk-panel #dyes{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.portrait canvas{transition:none}}