/* Reading Fashion Show: a warm, editorial dressing room with practical game controls. */
:root {
  color-scheme: light;
  --paper: #fcf8f3;
  --surface: #fffdfa;
  --cream: #f4ece2;
  --rose-wash: #f7e9ee;
  --rose: #965674;
  --rose-deep: #79415f;
  --lilac: #ece6f5;
  --ink: #3e303d;
  --muted: #796775;
  --line: #e7dce0;
  --success: #376c58;
  --success-wash: #edf5ef;
  --danger: #9b4257;
  --shadow: 0 12px 40px #6342530b, 0 2px 8px #63425304;
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: var(--rose-deep); text-underline-offset: 4px; }
img, svg { max-width: 100%; }
img { display: block; }
svg { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
h1 { margin-bottom: 22px; font-size: clamp(42px, 5.2vw, 78px); }
h2 { margin-bottom: 18px; font-size: clamp(30px, 3.2vw, 48px); }
h3 { margin-bottom: 10px; font-size: 18px; line-height: 1.3; }
p { margin-bottom: 18px; }
small { font-size: 14px; }
button, a, input, select, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #875da8; outline-offset: 4px; }
[hidden] { display: none !important; }

.shell { width: min(1500px, 100%); margin-inline: auto; padding: 0 36px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--rose); font-size: 30px; }
.wordmark { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 35px; line-height: 1; letter-spacing: -.06em; }
.brand small, .brand-subtitle { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; letter-spacing: .19em; line-height: 1.3; text-transform: uppercase; }
.topnav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 14px; }
.topnav a { color: inherit; text-decoration: none; }
.topnav .active { color: var(--rose-deep); }
.screen { padding: 40px 0 46px; animation: appear .22s ease-out both; }
.eyebrow { margin-bottom: 14px; color: var(--rose-deep); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.screen-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.screen-header h1, .screen-header h2 { margin-bottom: 10px; }
.screen-header p { margin-bottom: 0; color: var(--muted); }
.screen-header > :first-child { max-width: 760px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 22px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; text-align: center; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.btn.primary { color: #fff; background: var(--rose); box-shadow: 0 5px 14px #96567420; }
.btn.primary:hover:not(:disabled) { background: var(--rose-deep); transform: translateY(-1px); }
.btn.secondary { color: var(--rose-deep); background: var(--surface); border-color: #d9c3cd; }
.btn.secondary:hover:not(:disabled) { background: var(--rose-wash); border-color: var(--rose); }
.btn.ghost { color: var(--muted); background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { color: var(--rose-deep); background: var(--rose-wash); }
.btn.small { min-height: 40px; padding: 9px 14px; font-size: 14px; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.icon-button, .close-button { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); font-size: 18px; flex-shrink: 0; }
.icon-button:hover, .close-button:hover { border-color: #c9a8ba; background: var(--rose-wash); }

/* Opening spread. */
.start-layout { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: clamp(36px, 6vw, 100px); }
.hero-copy { max-width: 590px; padding: 20px 0; }
.hero-copy h1 em { color: var(--rose); font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 490px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-copy .btn.primary { min-width: 180px; }
.hero-art { position: relative; padding: 16px; border: 1px solid #e5d5dd; border-radius: 130px 130px 24px 24px; background: linear-gradient(150deg, #eee5f2, #f6e9e4 65%, #f1e8d9); }
.hero-illustration { width: 100%; max-height: 630px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: 115px 115px 16px 16px; }
.hero-art .avatar-render { max-height: 620px; width: 100%; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 25px 0; }
.hero-tags > * { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fffaf580; font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; padding-top: 25px; border-top: 1px solid var(--line); }
.step { min-width: 0; color: var(--muted); font-size: 14px; }
.step strong { display: block; margin: 7px 0 3px; color: var(--ink); font-size: 14px; }
.step > span:first-child { color: var(--rose); font-family: Georgia, serif; font-size: 23px; }
.step p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Skill choice and questions. */
.centered { max-width: 940px; margin-inline: auto; }
.centered > .screen-header, .centered > .eyebrow, .centered > h1, .centered > h2, .centered > p { text-align: center; }
.centered > .screen-header { display: block; }
.centered > .screen-header > :first-child { margin-inline: auto; }
.panel { padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-wide { max-width: 1100px; margin-inline: auto; }
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.skill-card { position: relative; min-width: 0; padding: 23px 20px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--surface); text-align: left; transition: border-color .16s ease, background .16s ease; }
.skill-card:hover { border-color: #c9a8ba; background: #fdf5f8; }
.skill-card.selected { border-color: var(--rose); background: var(--rose-wash); box-shadow: inset 0 0 0 1px var(--rose); }
.skill-card strong { display: block; margin-bottom: 6px; font-size: 17px; }
.skill-card p, .skill-card small { display: block; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.skill-card .eyebrow { margin-bottom: 11px; font-size: 14px; }
.progress-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 28px; }
.dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 14px; font-weight: 600; }
.dot.active { color: #fff; border-color: var(--rose); background: var(--rose); }
.dot.done { color: var(--success); border-color: #afcbbc; background: var(--success-wash); }
.question-card { max-width: 760px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.question-card h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.question-card h3 { font-size: 21px; line-height: 1.5; }
.passage { margin: 22px 0; padding: 22px 24px; border-left: 3px solid #c4afca; border-radius: 0 12px 12px 0; color: #544956; background: #f4eff7; font-family: Georgia, serif; font-size: 19px; line-height: 1.8; white-space: pre-line; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.answer { min-height: 62px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.45; text-align: left; }
.answer:hover:not(:disabled) { border-color: #bf9aac; background: var(--rose-wash); }
.answer.selected { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.answer.correct { color: #27553f; border-color: #87b399; background: var(--success-wash); opacity: 1; }
.answer.wrong { color: #84394b; border-color: #cd9eaa; background: #fbecf0; opacity: 1; }
.feedback { margin: 18px 0; padding: 17px 20px; border-radius: 12px; background: var(--cream); font-size: 15px; line-height: 1.6; }
.feedback.correct { color: #27553f; background: var(--success-wash); }
.feedback.wrong { color: #84394b; background: #fbecf0; }
.feedback p:last-child { margin-bottom: 0; }

/* Theme brief and three looks made from the playable wardrobe. */
.theme-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.theme-copy { max-width: 540px; }
.theme-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.7; }
.theme-art { display: grid; place-items: center; min-height: 470px; overflow: hidden; border: 1px solid #e1d2dc; border-radius: 160px 160px 24px 24px; background: radial-gradient(ellipse at 50% 30%, #fff9f5, #eee4ef 75%); }
.theme-art .avatar-render { width: 100%; height: 510px; }
.palette { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 25px 0; }
.swatch { display: block; width: 31px; height: 31px; border: 1px solid #00000013; border-radius: 50%; box-shadow: 0 0 0 4px #fff9f6; }
.inspo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inspo-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.inspo-image { display: grid; place-items: center; min-height: 220px; padding: 10px 8px 0; overflow: hidden; background: linear-gradient(150deg, #f1e8ef, #f4ece2); }
.inspo-image .avatar-render, .inspo-image > svg { width: 100%; height: 290px; }
.inspo-image > img { width: 100%; height: 290px; object-fit: cover; }
.caption { padding: 18px; }
.caption h3 { margin-bottom: 7px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.caption p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Three-column studio. Each panel can shrink without squeezing its neighbors. */
.dressing-layout { display: grid; grid-template-columns: minmax(260px, 34fr) minmax(190px, 20fr) minmax(320px, 46fr); align-items: start; gap: 16px; }
.stage-card, .custom-panel, .wardrobe-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.stage-card { position: relative; }
.stage-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.stage-header h2, .stage-header h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.stage-header p { margin: 0; color: var(--muted); font-size: 14px; }
.stage-header .eyebrow { margin-bottom: 4px; font-size: 14px; }
.timer { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-width: 82px; min-height: 42px; padding: 8px 12px; border: 1px solid #e4d5df; border-radius: 999px; color: var(--rose-deep); background: #f7eff4; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.warning { border-color: #d8abb6; color: #963b50; background: #ffeef0; }
.mobile-studio-timer { display: none; }
.avatar-stage { position: relative; display: grid; place-items: center; min-height: 500px; padding: 10px 12px 0; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, #fff9f5 0, #f1e5ec 57%, #e9dee8 100%); }
.avatar-stage::after { position: absolute; inset: auto 19% 23px; height: 22px; border-radius: 50%; background: #8b68751a; filter: blur(9px); content: ''; pointer-events: none; }
.avatar-stage .avatar-render, .avatar-stage > svg { z-index: 1; width: 100%; height: 525px; max-height: 65vh; min-height: 380px; object-fit: contain; }
.studio-toolbar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fffcf8; }
.studio-toolbar .btn { flex: 1; min-width: 130px; }
.studio-toolbar .icon-button { width: 36px; height: 36px; font-size: 16px; }
.custom-panel { padding-bottom: 8px; }
.custom-panel > h3, .custom-panel > .eyebrow { margin: 0; padding: 18px 15px 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: #fcf8fb; }
.tab { flex: 1; min-height: 38px; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: 14px; white-space: nowrap; }
.tab.active { color: var(--rose-deep); border-color: #e7d5df; background: var(--surface); box-shadow: 0 2px 6px #6a485c09; }
.custom-sections { display: grid; align-content: start; gap: 20px; max-height: 600px; padding: 18px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9c7d2 transparent; }
.custom-sections > section { min-width: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: #6a5364; font-size: 14px; font-weight: 600; line-height: 1.4; }
.field-label small { color: var(--muted); font-size: 14px; font-weight: 400; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.option-button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; min-width: 0; min-height: 40px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); font-size: 14px; line-height: 1.25; }
.option-button:hover { border-color: #c1a3b3; background: #fcf5f9; }
.option-button.selected { border-color: var(--rose); color: var(--rose-deep); background: var(--rose-wash); box-shadow: inset 0 0 0 1px var(--rose); }
.option-button svg { width: 100%; height: 48px; }
.color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.color-swatch { position: relative; display: block; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 1px solid #0000001c; border-radius: 50%; background: var(--swatch-color, #d9b4bd); }
.color-swatch::before { position: absolute; inset: -5px; border: 1px solid transparent; border-radius: 50%; content: ''; }
.color-swatch.selected::before { border: 2px solid var(--rose); }
.color-swatch:hover::before { border-color: #c3a4b5; }
.color-swatch.selected:hover::before { border-color: var(--rose); }
.custom-sections input[type='range'] { width: 100%; accent-color: var(--rose); }
.custom-sections select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.wardrobe-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 18px 15px; }
.wardrobe-header h2, .wardrobe-header h3 { margin: 0; font-family: Georgia, serif; font-size: 25px; font-weight: 400; letter-spacing: -.025em; }
.wardrobe-header p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.wardrobe-header > span, .wardrobe-header > small { color: var(--muted); font-size: 14px; }
.category-tabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { position: relative; flex: 1 0 auto; min-height: 44px; padding: 11px 10px 13px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 14px; }
.category-tabs button.active, .category-tabs button[aria-selected='true'] { border-bottom-color: var(--rose); color: var(--rose-deep); font-weight: 600; }
.filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; color: var(--muted); font-size: 14px; }
.filters label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.filters input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--rose); }
.filters input[type='search'], .filters select { min-width: 0; min-height: 36px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); font-size: 14px; }
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; max-height: 452px; padding: 3px 14px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9c7d2 transparent; }
.item-card { position: relative; display: block; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #e9dfe4; border-radius: 11px; color: var(--ink); background: #fffaf7; text-align: left; transition: border-color .15s ease, background .15s ease; }
.item-card:hover { border-color: #c29bac; background: #fdf0f5; }
.item-card.selected { border-color: var(--rose); background: var(--rose-wash); box-shadow: inset 0 0 0 1px var(--rose); }
.item-card.selected::after { position: absolute; z-index: 2; top: 7px; right: 7px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid #fff9f7; border-radius: 50%; color: #fff; background: var(--rose); font-size: 14px; line-height: 1; content: '✓'; }
.item-preview { display: grid; place-items: center; height: 120px; padding: 6px; overflow: hidden; background: linear-gradient(145deg, #f4ecee, #efe7df); }
.item-preview > svg, .item-preview > img, .item-preview .avatar-render { width: 100%; height: 100%; object-fit: contain; }
.item-name { display: block; min-height: 43px; padding: 9px 8px; font-size: 14px; line-height: 1.4; }
.item-name small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.color-picker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 15px 17px; border-top: 1px solid var(--line); background: #fcf8fb; }
.color-picker .field-label { margin: 0; }
.color-picker input[type='color'] { width: 42px; height: 34px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.color-picker .color-row { gap: 10px; }
.color-picker .color-swatch { width: 23px; height: 23px; }
.equipped-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 17px; border-top: 1px solid var(--line); }
.equipped-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 9px; border: 1px solid #e2d5df; border-radius: 999px; color: var(--muted); background: #f9f1f5; font-size: 14px; line-height: 1.35; }
.equipped-chip button { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px -3px -2px 0; padding: 0; border: 0; border-radius: 50%; color: var(--rose); background: transparent; font-size: 15px; }
.equipped-chip button:hover { background: #ecd6e1; }

/* Runway and the three-round keepsake. */
.runway-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 26px 0; }
.runway-card { position: relative; min-width: 0; padding: 12px 12px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 80px 80px 17px 17px; background: var(--surface); text-align: center; }
.runway-card.player { border-color: #be91a7; background: #fff8fa; }
.runway-card.winner { border-color: #bfa161; box-shadow: 0 0 0 2px #e7d8b3, var(--shadow); background: #fffbf0; }
.runway-card .avatar-render, .runway-card > svg { width: 100%; height: 355px; margin-bottom: 16px; border-radius: 68px 68px 10px 10px; background: radial-gradient(ellipse at 50% 35%, #fffbf8, #eee4ed); }
.runway-card.winner .avatar-render { background: radial-gradient(ellipse at 50% 35%, #fffdf5, #efe4cd); }
.runway-card h3 { margin-bottom: 5px; font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.runway-card p { margin-bottom: 4px; color: var(--muted); font-size: 14px; }
.rank-badge { position: absolute; z-index: 2; top: 22px; left: 20px; display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #e2d1d9; border-radius: 50%; color: var(--rose-deep); background: #fffaf5eb; font-family: Georgia, serif; font-size: 22px; box-shadow: 0 4px 10px #6042500c; }
.winner .rank-badge { border-color: #bc9a54; color: #725321; background: #faeabe; }
.score-table { width: 100%; margin: 22px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; border-collapse: separate; border-spacing: 0; background: var(--surface); text-align: left; font-size: 14px; }
.score-table th { color: var(--muted); background: #f6eef3; font-size: 14px; font-weight: 600; }
.score-table th, .score-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.score-table tr:last-child td { border-bottom: 0; }
.score-table tr.player td { color: var(--rose-deep); background: #fff5f9; font-weight: 600; }
.score-table th:not(:first-child), .score-table td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.summary-grid > * { min-width: 0; padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.summary-grid strong { display: block; margin-bottom: 7px; color: var(--rose-deep); font-family: Georgia, serif; font-size: 36px; font-weight: 400; }
.summary-grid p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.summary-grid .avatar-render { height: 290px; margin: -10px auto 14px; }

/* Dialogs and small status elements. */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; overflow-y: auto; background: #33233780; backdrop-filter: blur(5px); }
.modal { width: min(1040px, 100%); max-height: calc(100dvh - 56px); padding: 28px; overflow-y: auto; border: 1px solid #e4d4df; border-radius: 23px; background: var(--paper); box-shadow: 0 24px 100px #28162842; animation: appear .18s ease-out both; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.modal-header h2 { margin-bottom: 8px; font-size: 36px; }
.modal-header p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.close-button { width: 38px; height: 38px; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 23px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; letter-spacing: .03em; }
.footer p { margin-bottom: 0; }
.toast { position: fixed; z-index: 150; right: 24px; bottom: 24px; max-width: min(380px, calc(100vw - 32px)); padding: 14px 20px; border: 1px solid #d4b5c6; border-radius: 13px; color: var(--rose-deep); background: #fff8fc; box-shadow: 0 12px 35px #4d284125; font-size: 14px; line-height: 1.5; }
.empty { grid-column: 1 / -1; padding: 32px 18px; color: var(--muted); font-size: 14px; text-align: center; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1450px) {
  .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  .shell { padding-inline: 24px; }
  .dressing-layout { grid-template-columns: minmax(245px, 1fr) minmax(180px, .72fr) minmax(285px, 1.25fr); gap: 12px; }
  .stage-header { padding: 14px 12px; }
  .timer { min-width: 72px; padding-inline: 9px; font-size: 16px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tabs { padding-inline: 7px; }
  .category-tabs button { padding-inline: 8px; }
  .wardrobe-header { padding-inline: 14px; }
  .custom-sections { padding-inline: 12px; }
  .runway-card .avatar-render, .runway-card > svg { height: 310px; }
}

@media (max-width: 940px) {
  .topbar { min-height: 86px; }
  .screen { padding-top: 30px; }
  .start-layout { gap: 30px; }
  .hero-copy h1 { font-size: 52px; }
  .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .hero-art { padding: 12px; border-radius: 100px 100px 20px 20px; }
  .hero-illustration { border-radius: 90px 90px 13px 13px; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dressing-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stage-card { grid-row: span 2; }
  .custom-panel { grid-column: 2; }
  .custom-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-height: 290px; }
  .custom-sections .color-row { gap: 9px; }
  .wardrobe-panel { grid-column: 2; }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 335px; }
  .item-preview { height: 95px; }
  .item-name { font-size: 14px; }
  .avatar-stage { min-height: 575px; }
  .avatar-stage .avatar-render, .avatar-stage > svg { height: 600px; max-height: none; }
  .theme-layout { gap: 26px; }
  .theme-art { min-height: 390px; }
  .theme-art .avatar-render { height: 430px; }
  .runway-grid { gap: 12px; }
  .runway-card { padding: 8px 8px 16px; border-radius: 55px 55px 14px 14px; }
  .runway-card .avatar-render, .runway-card > svg { height: 260px; border-radius: 47px 47px 8px 8px; }
  .runway-card h3 { font-size: 21px; }
  .rank-badge { top: 16px; left: 12px; width: 31px; height: 31px; font-size: 18px; }
}

@media (max-width: 680px) {
  .shell { padding-inline: 18px; }
  .topbar { min-height: 80px; gap: 12px; }
  .brand { gap: 6px; }
  .brand-mark { width: 28px; height: 32px; font-size: 25px; }
  .wordmark { font-size: 30px; }
  .brand small, .brand-subtitle { display: none; }
  .topnav { gap: 7px; max-width: 50%; font-size: 14px; }
  .topnav .btn { min-height: 38px; padding: 8px 10px; font-size: 14px; }
  .screen { padding: 27px 0 32px; }
  .screen-header { align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
  .screen-header h1 { font-size: 38px; }
  .screen-header h2 { font-size: 31px; }
  .screen-header p { font-size: 14px; }
  .screen-header > .timer { position: sticky; top: 10px; z-index: 20; }
  .eyebrow { font-size: 14px; margin-bottom: 11px; }
  .btn { min-height: 46px; padding: 12px 18px; }
  .btn.small { min-height: 40px; }
  .start-layout { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { padding: 5px 0 0; max-width: 100%; }
  .hero-copy h1 { max-width: 440px; margin-bottom: 16px; font-size: clamp(42px, 10vw, 60px); }
  .hero-copy > p:not(.eyebrow) { max-width: 460px; font-size: 16px; line-height: 1.65; }
  .hero-art { width: min(460px, 100%); margin-inline: auto; }
  .hero-illustration { max-height: 540px; }
  .hero-tags { margin: 20px 0; }
  .steps { gap: 14px; margin-top: 26px; padding-top: 20px; }
  .step p { font-size: 14px; }
  .step strong { font-size: 14px; }
  .panel { padding: 24px 18px; border-radius: 17px; }
  .skill-grid { gap: 10px; margin-block: 22px; }
  .skill-card { padding: 18px 15px; border-radius: 12px; }
  .skill-card strong { font-size: 16px; }
  .skill-card p, .skill-card small { font-size: 14px; }
  .question-card { padding: 23px 18px; border-radius: 17px; }
  .question-card h2 { font-size: 29px; }
  .question-card h3 { font-size: 19px; }
  .passage { padding: 16px 18px; font-size: 18px; }
  .answers { gap: 10px; }
  .answer { min-height: 58px; padding: 13px 15px; font-size: 16px; }
  .theme-layout { grid-template-columns: 1fr; gap: 28px; }
  .theme-copy { max-width: 100%; }
  .theme-copy h1 { font-size: 45px; }
  .theme-art { width: min(420px, 100%); min-height: 370px; margin-inline: auto; border-radius: 130px 130px 20px 20px; }
  .theme-art .avatar-render { height: 420px; }
  .inspo-grid { grid-template-columns: 1fr; gap: 15px; }
  .inspo-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .inspo-image { min-height: 220px; padding: 5px 0 0; }
  .inspo-image .avatar-render, .inspo-image > svg, .inspo-image > img { height: 250px; }
  .caption { display: flex; flex-direction: column; justify-content: center; padding: 16px; }
  .caption h3 { font-size: 22px; }
  .caption p { font-size: 14px; }
  .dressing-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stage-card { grid-row: auto; grid-column: 1; overflow: visible; }
  .stage-header { position: relative; min-height: 72px; padding: 13px 16px; border-radius: 17px 17px 0 0; }
  .stage-header .timer { position: sticky; top: 10px; z-index: 25; box-shadow: 0 3px 12px #6042500c; }
  .mobile-studio-timer { position: fixed; z-index: 60; top: 12px; right: 18px; display: flex; min-width: 82px; min-height: 42px; box-shadow: 0 5px 18px #60425022; pointer-events: none; }
  .avatar-stage { min-height: 420px; padding: 0 16px; }
  .avatar-stage .avatar-render, .avatar-stage > svg { height: 460px; min-height: 0; max-height: none; }
  .studio-toolbar { border-radius: 0 0 17px 17px; }
  .custom-panel, .wardrobe-panel { grid-column: 1; }
  .custom-panel > h3, .custom-panel > .eyebrow { padding-inline: 17px; }
  .custom-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 300px; padding: 17px; gap: 22px 18px; }
  .custom-sections .field-label { font-size: 14px; }
  .option-button { min-height: 42px; font-size: 14px; }
  .color-swatch { width: 30px; height: 30px; }
  .color-row { gap: 12px; }
  .tabs { padding: 10px 12px; }
  .tab { min-height: 42px; }
  .wardrobe-header { padding: 18px 17px 14px; }
  .wardrobe-header h2, .wardrobe-header h3 { font-size: 27px; }
  .category-tabs { padding-inline: 12px; }
  .category-tabs button { min-height: 46px; font-size: 14px; }
  .filters { padding-inline: 17px; font-size: 14px; }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 300px; padding: 3px 14px 14px; gap: 10px; }
  .item-preview { height: 116px; }
  .item-name { min-height: 54px; padding: 8px; font-size: 14px; line-height: 1.3; }
  .item-name small { font-size: 14px; }
  .equipped-chip { min-height: 35px; font-size: 14px; }
  .color-picker { padding: 16px 17px; }
  .color-picker .field-label { font-size: 14px; }
  .color-picker .color-swatch { width: 27px; height: 27px; }
  .runway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .runway-card { padding: 9px 9px 18px; border-radius: 65px 65px 15px 15px; }
  .runway-card .avatar-render, .runway-card > svg { height: 300px; border-radius: 57px 57px 10px 10px; }
  .runway-card h3 { font-size: 23px; }
  .runway-card p { font-size: 14px; }
  .score-table { font-size: 14px; }
  .score-table th, .score-table td { padding: 12px 9px; }
  .score-table th { font-size: 14px; }
  .summary-grid { gap: 10px; }
  .summary-grid > * { padding: 19px 10px; }
  .summary-grid strong { font-size: 31px; }
  .summary-grid p { font-size: 14px; }
  .summary-grid .avatar-render { height: 180px; }
  .modal-backdrop { padding: 14px; }
  .modal { max-height: calc(100dvh - 28px); padding: 20px 16px; border-radius: 18px; }
  .modal-header { margin-bottom: 20px; gap: 14px; }
  .modal-header h2 { font-size: 31px; }
  .footer { padding-block: 20px; font-size: 14px; }
  .toast { right: 16px; bottom: 16px; }
}

@media (max-width: 390px) {
  .shell { padding-inline: 12px; }
  .topnav { gap: 5px; font-size: 14px; }
  .brand-mark { display: none; }
  .hero-copy h1 { font-size: 41px; }
  .steps { gap: 10px; }
  .skill-grid { grid-template-columns: 1fr; }
  .answers { grid-template-columns: 1fr; }
  .custom-sections { padding: 16px 13px; gap: 20px 12px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-preview { height: 130px; }
  .inspo-card { grid-template-columns: 44% 56%; }
  .inspo-image .avatar-render, .inspo-image > svg, .inspo-image > img { height: 230px; }
  .caption { padding: 13px; }
  .caption h3 { font-size: 20px; }
  .runway-card .avatar-render, .runway-card > svg { height: 250px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid > * { padding: 18px; }
  .summary-grid .avatar-render { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Consistent framing keeps every look and its caption in separate space. */
.avatar-render { position:relative; min-width:0; overflow:hidden; }
.avatar-render > svg { display:block; width:100%; height:100%; overflow:hidden !important; }
.item-preview > svg { display:block; width:100%; height:100%; overflow:hidden !important; }
.runway-card { display:flex; flex-direction:column; align-items:stretch; }
.runway-card .avatar-render { flex:none; }
.runway-card h2 { font-size:28px; margin:14px 0 8px; }
.runway-card .eyebrow { min-height:24px; margin:9px 0; letter-spacing:.1em; }
.runway-card.active { border-color:#ab718e; box-shadow:0 0 0 2px #c49ab343; }
.inspo-image { min-width:0; }
.screen-header { display:block; }
.screen-header .eyebrow { display:block; }
.screen-header > h1 { max-width:900px; }
.color-swatch { background:var(--swatch,var(--swatch-color,#fff)); }
.brand > span:last-child { font-family:Georgia,serif; font-size:31px; line-height:1; }
.brand small { font-family:system-ui,sans-serif; }
.step { display:flex; align-items:flex-start; gap:9px; }
.step b { color:var(--rose); font-family:Georgia,serif; font-size:22px; font-weight:400; }
.step span { padding-top:4px; }
.art-caption { display:block; padding:14px 10px 6px; text-align:center; color:var(--muted); font-size:11px; letter-spacing:.12em; }
.hero-illustration { object-fit:contain; aspect-ratio:3/2; height:auto; border-radius:16px; }
.hero-art { border-radius:24px; }
.quiet { font-size:14px; color:var(--muted); line-height:1.6; margin-top:16px; }
.dressing-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.dressing-top h1 { margin:4px 0 0; font-size:40px; }
.dressing-top .button-row { margin-top:0; }
.custom-panel > h2 { padding:0 18px; margin:10px 0 16px; font-size:29px; }
.custom-section { min-width:0; }
.custom-color { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; font-size:14px; }
.custom-color label { display:flex; align-items:center; gap:10px; }
.custom-color input { width:36px; height:32px; border:0; padding:0; }
.item-card { position:relative; }
.equipped-check { position:absolute; top:8px; right:8px; display:grid; place-items:center; border-radius:50%; width:22px; height:22px; color:white; background:var(--rose); font-size:13px; }
.wardrobe-tip { padding:4px 20px 16px; }
.center-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:28px 0; }
.question-heading { display:flex; align-items:flex-start; gap:14px; }
.question-heading h2 { flex:1; }
.answer > span { display:inline-grid; place-items:center; margin-right:12px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); font-size:13px; }
.final-stats { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; align-items:center; }
.final-stats h2 { font-size:54px; margin:14px 0; }
.help-list { padding-left:23px; }
.help-list li { margin-bottom:20px; line-height:1.7; }
.modal { position:relative; padding-top:55px; }
.modal > .close-button { position:absolute; top:14px; right:14px; }
.toast { display:none; }.toast.show { display:block; }
.skill-card h2 { font-size:26px; margin-top:14px; }.skill-icon { display:block; margin-bottom:14px; font-family:Georgia,serif; font-size:28px; }
.heading-star { display:inline-block; color:var(--rose); margin-left:14px; }
@media(max-width:680px){.dressing-top{display:block}.dressing-top .button-row{margin-top:17px}.final-stats{grid-template-columns:1fr}.runway-card .avatar-render{height:290px}.runway-card h2{font-size:24px}.runway-card p{min-height:42px}.hero-art{border-radius:22px}.hero-illustration{border-radius:14px}.question-heading{display:block}.custom-panel>h2{font-size:28px}.stage-header .timer{position:static}.mobile-studio-timer{top:auto;bottom:16px;right:16px}.screen-header h1{font-size:38px}}
#app:focus { outline:none; }

/* Sixty-second challenges and individual runway performances. */
.countdown-screen { text-align:center; min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.countdown-screen h1 { font-size:clamp(34px,5vw,58px); margin:10px 0; }
.countdown-number { width:180px; height:180px; display:grid; place-items:center; margin:20px auto; border-radius:50%; color:var(--rose-deep); background:radial-gradient(circle,#fff 40%,#f0d9e7); border:1px solid #dcb8cc; font:110px/1 Georgia,serif; box-shadow:0 20px 65px #9c638d22; }
.countdown-number.pop { animation:countPop .6s ease-out; }
@keyframes countPop{from{transform:scale(.78);opacity:.2}to{transform:scale(1);opacity:1}}
.lock-note { margin:9px 0 0; color:var(--muted); font-size:14px; }
.item-card.locked { filter:saturate(.45); opacity:.62; }
.locked-badge { position:absolute; left:4px; right:4px; bottom:58px; padding:4px; color:#6a485b; background:#fff6f8ed; border-radius:6px; font-size:11px; }
.accessory-hint { padding:0 16px; margin:0 0 12px; color:var(--muted); font-size:13px; }
.show-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.75fr); gap:30px; align-items:center; max-width:1120px; margin:auto; }
.solo-show>.screen-header { text-align:center; }.solo-show>.screen-header h1 { margin-inline:auto; font-size:clamp(32px,4vw,52px); }
.catwalk-scene { height:570px; overflow:hidden; position:relative; isolation:isolate; border:1px solid #e3cfdc; border-radius:160px 160px 22px 22px; background:radial-gradient(ellipse at 50% 28%,#fffdf7 10%,#eee0ef 70%); }
.curtain { position:absolute; top:0; bottom:0; width:17%; z-index:4; background:repeating-linear-gradient(90deg,#966482,#ad82a0 15px,#cba5bc 26px,#976b89 35px); opacity:.45; }.curtain.left{left:0;clip-path:polygon(0 0,100% 0,68% 40%,32% 100%,0 100%)}.curtain.right{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,68% 40%,32% 100%,0 100%)}
.spotlight { position:absolute; width:65%; height:110%; top:-9%; left:18%; background:linear-gradient(#fffaf299,#fff8f377,transparent); clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); }
.runway-floor { position:absolute; bottom:0; left:0; right:0; height:20%; background:repeating-linear-gradient(90deg,#e2cddd,#f3e5ed 2px,#f3e5ed 62px,#dfc9d8 64px); clip-path:polygon(37% 0,63% 0,100% 100%,0 100%); opacity:.75; }
.catwalk-actor { position:absolute; inset:8px 8% 32px; z-index:2; animation:walkOn 10s linear both; animation-delay:var(--elapsed,0s); }
.catwalk-actor .avatar-render { height:100%; width:100%; }
.show-model { height:100%; transform-origin:50% 93%; }
.show-caption { position:absolute; bottom:12px; left:10%; right:10%; z-index:5; text-align:center; border-radius:12px; background:#fff9f1d9; padding:7px 12px; display:flex; justify-content:center; align-items:center; gap:12px; }.show-caption strong{font-family:Georgia,serif;font-size:23px;font-weight:400}.show-caption span{font-size:13px;color:var(--rose-deep)}
.stage-sparkles { position:absolute; inset:20% 14% auto; z-index:1; display:flex; justify-content:space-between; color:#b39a62; font-size:24px; }.stage-sparkles span{margin-top:70px;font-size:32px}
.voting-panel { padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.voting-panel h2 { font-size:32px; margin:9px 0 14px; }.voting-panel p{color:var(--muted);font-size:14px}
.show-progress { display:flex; gap:10px; margin:12px 0 20px; }.show-dot{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;border:1px solid var(--line);font-size:13px}.show-dot.active{background:var(--rose);color:#fff;border-color:var(--rose)}.show-dot.done{background:var(--success-wash);color:var(--success)}
.show-clock { display:flex; align-items:baseline; gap:9px; margin-bottom:28px; }.show-clock>span{font-family:Georgia,serif;font-size:44px;color:var(--rose)}.show-clock small{color:var(--muted)}
.star-votes { display:flex; gap:6px; margin:15px 0; }.star-vote{border:0;background:transparent;padding:0;min-width:42px;height:48px;color:#a991a2;font-size:40px;line-height:1}.star-vote.filled{color:#bc8a35}.star-vote:hover{color:#cb9340;transform:scale(1.1)}
.vote-status { min-height:40px; }.judge-note{display:flex;gap:10px;margin-top:23px;padding-top:20px;border-top:1px solid var(--line)}.judge-note>span{font-size:27px;color:var(--rose)}.judge-note p{margin:0;font-size:13px}
.emote-twirl { animation:showTwirl 10s linear both; animation-delay:var(--elapsed,0s); }
.emote-wave { animation:showWave 10s linear both; animation-delay:var(--elapsed,0s); }
.emote-pose { animation:showPose 10s linear both; animation-delay:var(--elapsed,0s); }
.emote-hearts:not(.show-model) { position:absolute; left:12%; right:12%; top:28%; color:#c779a2; font-size:38px; word-spacing:40px; text-align:center; opacity:0; animation:heartsFloat 10s linear both; animation-delay:var(--elapsed,0s); pointer-events:none; }
.show-model.emote-hearts { animation:showWave 10s linear both; animation-delay:var(--elapsed,0s); }
.emote-wave .avatar-hands { transform-origin:50% 58%; animation:tinyWave 1s ease-in-out 2.5s 4; }
@keyframes walkOn{0%{transform:translateX(-110%) scale(.85);opacity:0}5%{opacity:1}10%{transform:translateX(-55%) translateY(-4px) scale(.91)}18%,80%{transform:translateX(0) scale(1);opacity:1}88%{transform:translateX(15%) translateY(-4px);opacity:1}100%{transform:translateX(115%) scale(.9);opacity:0}}
@keyframes showTwirl{0%,30%,75%,100%{transform:scaleX(1)}42%{transform:scaleX(.1) rotate(-2deg)}51%{transform:scaleX(-1)}60%{transform:scaleX(.1) rotate(2deg)}}
@keyframes showWave{0%,24%,74%,100%{transform:rotate(0)}34%,54%{transform:rotate(-3deg) translateY(-4px)}44%,64%{transform:rotate(3deg)}}
@keyframes showPose{0%,22%,75%,100%{transform:rotate(0)}30%,43%{transform:rotate(-4deg) translateX(-7px)}53%,65%{transform:rotate(4deg) translateX(7px)}}
@keyframes tinyWave{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes heartsFloat{0%,32%,80%,100%{opacity:0;transform:translateY(10px) scale(.8)}42%,56%{opacity:.8;transform:translateY(-14px) scale(1.05)}70%{opacity:0;transform:translateY(-50px)}}
.star-total { color:#a4712d; font-size:23px; }.vote-breakdown{margin:22px 0;padding:16px;border:1px solid var(--line);border-radius:12px;text-align:left}.vote-breakdown summary{cursor:pointer;color:var(--rose-deep)}.table-scroll{overflow:auto}.vote-breakdown .score-table{min-width:540px}.score-table caption{font-size:13px;color:var(--muted);padding:10px}
@media(max-width:940px){.show-layout{gap:18px;grid-template-columns:minmax(0,1fr) 255px}.catwalk-scene{height:480px}.voting-panel{padding:18px}.star-votes{gap:0}.star-vote{min-width:40px}.dressing-top h1{font-size:31px}}
@media(max-width:680px){
 .dressing-layout{grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr);gap:10px}.stage-card{grid-column:1;grid-row:1;overflow:hidden;align-self:start}.stage-header{min-height:46px;padding:8px;display:flex;justify-content:center}.stage-header>span:first-child{display:none}.stage-header .timer{font-size:13px;padding:6px;min-width:70px}.avatar-stage{min-height:0;padding:0}.avatar-stage .avatar-render{height:275px}.studio-toolbar{padding:6px;display:flex;flex-wrap:wrap;justify-content:center;gap:3px}.studio-toolbar .btn{font-size:12px;min-height:32px;padding:6px}.studio-toolbar .icon-button{width:29px;height:29px;font-size:15px;padding:3px}.equipped-list{max-height:56px;overflow:auto;padding:5px}.equipped-chip{font-size:11px;min-height:25px;padding:4px 6px}.custom-panel{grid-column:2;grid-row:1;min-width:0}.custom-panel>.eyebrow{display:none}.custom-panel>h2{font-size:25px;padding:0 12px;margin:12px 0}.custom-panel .tabs{padding:4px;gap:1px}.custom-panel .tab{padding:6px;font-size:13px;min-height:36px;flex:1}.custom-sections{display:block;max-height:295px;overflow:auto;padding:12px}.custom-section{margin-bottom:15px}.custom-section .field-label{font-size:13px;margin-bottom:7px}.option-button{min-height:34px;font-size:12px;padding:5px}.color-row{gap:8px}.color-swatch{height:26px;width:26px}.wardrobe-panel{grid-column:1/-1;grid-row:2}.wardrobe-header{padding:13px}.wardrobe-header h2{font-size:26px}.item-grid{max-height:255px}.item-preview{height:106px}.item-name{font-size:12px;min-height:44px}.locked-badge{bottom:44px;font-size:10px}.dressing-top{margin-bottom:16px}.dressing-top h1{font-size:31px}.dressing-top .eyebrow{font-size:12px}.lock-note{font-size:12px}.accessory-hint{font-size:12px}.mobile-studio-timer{bottom:10px;min-height:35px;min-width:65px;font-size:16px;padding:5px 9px}
 .solo-show{padding-top:18px}.solo-show>.progress-dots{margin:0 0 12px}.solo-show .screen-header{margin-bottom:14px}.solo-show .screen-header h1{font-size:31px}.solo-show .screen-header .eyebrow{margin-bottom:6px;font-size:12px}.solo-show .screen-header p{font-size:13px}.show-layout{display:flex;flex-direction:column;gap:10px}.catwalk-scene{height:330px;width:100%;border-radius:100px 100px 16px 16px}.catwalk-actor{inset:0 12% 20px}.show-caption{bottom:8px;padding:4px 8px}.show-caption strong{font-size:20px}.show-caption span{font-size:12px}.voting-panel{width:100%;position:relative;padding:14px 18px}.voting-panel>.eyebrow,.show-progress,.judge-note,.voting-panel>.quiet{display:none}.show-clock{position:absolute;right:16px;top:12px;margin:0;gap:5px}.show-clock>span{font-size:26px}.show-clock small{font-size:11px;max-width:45px;line-height:1.15}.voting-panel h2{font-size:25px;margin:4px 0 8px}.voting-panel #vote-controls>.eyebrow{font-size:11px;letter-spacing:.1em}.star-votes{margin:9px 0 5px;gap:7px}.star-vote{font-size:36px;min-width:40px;height:40px}.vote-status{font-size:12px!important;min-height:0;margin:5px 0}.voting-panel .btn.small{min-height:28px;padding:3px 0;font-size:12px}.stage-sparkles{font-size:20px}.countdown-number{height:145px;width:145px;font-size:85px}.countdown-screen{min-height:70vh}
}
@media(prefers-reduced-motion:reduce){.catwalk-actor,.show-model,.avatar-hands,.emote-hearts,.countdown-number.pop{animation:none!important}.catwalk-actor{opacity:1!important;transform:none!important}.emote-hearts:not(.show-model){display:none}}

/* Keep the whole look and voting stars visible in a laptop-height window. */
@media (min-width:681px) and (max-height:850px) {
 body[data-screen="runway"] .topbar, body[data-screen="dress"] .topbar {min-height:68px}
 body[data-screen="runway"] .brand-subtitle,body[data-screen="dress"] .brand-subtitle {display:none}
 .solo-show {padding:14px 0 20px}
 .solo-show>.progress-dots {margin:0 0 8px}
 .solo-show>.screen-header {margin-bottom:14px}
 .solo-show>.screen-header .eyebrow {margin-bottom:4px;font-size:12px}
 .solo-show>.screen-header h1 {font-size:36px;margin-bottom:6px}
 .solo-show>.screen-header p {font-size:13px}
 .catwalk-scene {height:clamp(340px,calc(100dvh - 244px),590px);border-radius:100px 100px 20px 20px}
 .voting-panel {padding:18px 22px}
 .show-progress {margin:8px 0 10px}
 .show-clock {margin-bottom:10px}
 .show-clock>span {font-size:34px}
 .voting-panel h2 {font-size:28px;margin:6px 0 9px}
 .voting-panel .eyebrow {font-size:12px}
 .judge-note {margin-top:12px;padding-top:12px}
 .voting-panel>.quiet {margin:10px 0 0;font-size:12px}
 .star-votes {margin:10px 0}
 .vote-status {min-height:36px;margin-bottom:8px}
 .dressing-screen {padding-top:18px}
 .dressing-top {margin-bottom:14px}
 .dressing-top h1 {font-size:32px;margin:4px 0 6px}
 .dressing-top .eyebrow {font-size:12px}
 .lock-note {margin-bottom:0;font-size:13px}
 .stage-header {padding:8px 14px}
 .stage-header .timer {padding:5px 12px;min-height:36px}
 .avatar-stage {min-height:0;padding:0}
 .avatar-stage .avatar-render {height:clamp(270px,calc(100dvh - 345px),450px);min-height:0;max-height:none}
 .equipped-list {max-height:70px;overflow:auto}
 .custom-sections {max-height:calc(100dvh - 350px);overflow:auto}
 .item-grid {max-height:calc(100dvh - 475px);min-height:150px;overflow:auto}
 .wardrobe-header {padding:12px 16px}
 .wardrobe-header h2 {font-size:28px}
 .item-preview {height:108px}
 .color-picker {max-height:160px;overflow:auto}
}

/* Website edition: a compact canvas, a browsable closet, and a real podium. */
:root {--paper:#fbf7f4;--rose:#916080;--rose-deep:#71475f;--surface:#fffdfb}
.shell {max-width:1400px;padding:0 24px}.topbar {min-height:58px}.brand {font-family:Georgia,serif;font-size:27px}.brand small {display:none}.brand-mark {font-size:25px}.topnav {gap:3px}.topnav .btn {min-height:44px;padding:8px 12px}.screen {padding:22px 0}.footer {display:none}.btn {min-height:48px}.screen-header h1 {font-size:clamp(32px,4vw,48px)}.screen-header .eyebrow {font-size:11px;letter-spacing:.16em;margin-bottom:7px}.screen-header p {font-size:14px}.eyebrow {font-size:11px}.progress-dots {margin:0 0 12px}.dot {height:25px;width:25px;font-size:12px}
.welcome-screen {display:flex;flex-direction:column;align-items:center;text-align:center;min-height:calc(100dvh - 60px);justify-content:center;padding:20px;position:relative;background:radial-gradient(ellipse at 50% 45%,#efe3ee80,transparent 60%)}.welcome-symbol {color:#bf9b67;font-size:27px;line-height:1;margin:4px 0 14px}.welcome-screen>.eyebrow {margin-bottom:7px}.welcome-screen h1 {font-size:76px;margin:0 0 6px}.welcome-tagline {font-size:16px;color:var(--muted);margin:0 0 12px}.welcome-model {width:180px;height:210px;border-radius:90px 90px 20px 20px;background:linear-gradient(#f0e3ed,#e6dce9);margin:6px 0 18px;padding-top:8px;box-shadow:0 18px 38px #76586a13}.welcome-model .avatar-render {height:100%;width:100%}.welcome-facts {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-bottom:20px}.welcome-facts span+span:before {content:'·';margin-right:12px;color:var(--rose)}.welcome-actions {display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.play-button {min-width:235px;border-radius:100px;font-size:18px;gap:55px;box-shadow:0 6px 18px #915c7a24}.welcome-secondary {display:flex;gap:10px;margin-top:5px}.welcome-secondary .btn {font-size:12px}
.skill-screen {max-width:950px;margin:auto}.setup-utility {display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em;color:var(--muted)}.skill-search {display:flex;gap:12px;align-items:center;max-width:580px;margin:0 auto 20px}.skill-search input {flex:1;min-width:0;border:1px solid var(--line);background:white;border-radius:12px;padding:12px;font:inherit}.skill-search>span {white-space:nowrap;font-size:12px;color:var(--muted)}.skill-group {margin:22px 0;text-align:left}.skill-group-title {display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}.skill-group-title h2 {font-size:24px;margin:0}.skill-group-title span {font-size:12px;color:var(--muted)}.skill-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skill-card {min-height:115px;display:flex;align-items:center;gap:14px;padding:16px;position:relative;text-align:left;transition:transform .15s,box-shadow .15s}.skill-card:hover {transform:translateY(-2px);box-shadow:0 8px 20px #79516915}.skill-card h3 {font-family:Georgia,serif;font-size:23px;font-weight:400;margin:0 0 5px}.skill-card p {font-size:13px;line-height:1.4;margin:0 0 4px}.skill-card small {font-size:11px}.skill-icon {height:44px;width:44px;min-width:44px;margin:0;font-size:20px;display:grid;place-items:center}.skill-arrow {font-size:22px;margin-left:auto;color:var(--rose)}
.question-card {max-width:720px;margin:auto}.answers {gap:10px}.answer {min-height:58px;transition:transform .18s,box-shadow .18s}.answer.correct {box-shadow:0 0 0 4px #5b9f7c22;animation:answerGlow .65s ease}.success-feedback {position:relative;min-height:116px;padding-left:84px!important;text-align:left;background:linear-gradient(120deg,#eef8ef,#f6fbf5)!important}.correct-seal {position:absolute;left:18px;top:20px;height:48px;width:48px;display:grid;place-items:center;border-radius:50%;background:#4f9372;color:white;font-size:28px;box-shadow:0 0 0 7px #59987915;animation:sealPop .4s cubic-bezier(.2,1.6,.5,1)}.success-feedback strong {font-family:Georgia,serif;font-size:26px}.success-feedback p {font-size:14px;margin:6px 0}.success-feedback .btn {padding:5px 12px;min-height:38px;font-size:12px}
.dressing-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}.dressing-top h1 {font-size:34px;margin:1px 0 0}.dressing-top .eyebrow {font-size:11px}.lock-note {font-size:12px;margin:0;max-width:320px}.dressing-layout {display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.6fr);gap:18px;align-items:start}.stage-card {grid-column:auto;grid-row:auto;position:sticky;top:10px}.stage-header {padding:8px 13px;min-height:54px;font-size:11px;letter-spacing:.08em}.stage-header .timer {padding:7px 12px;min-width:74px;font-size:18px;min-height:38px}.avatar-stage {min-height:0;padding:0}.avatar-stage .avatar-render {height:clamp(280px,calc(100dvh - 330px),480px);min-height:0;max-height:none}.studio-toolbar {padding:6px 10px;gap:6px}.studio-toolbar .btn {font-size:12px;min-height:44px;padding:7px}.icon-button {height:44px;width:44px}.wearing-details {padding:0 12px 8px}.wearing-details summary {cursor:pointer;min-height:38px;padding-top:9px;font-size:12px;color:var(--muted)}.equipped-list {max-height:90px;overflow:auto;padding:5px 0}.equipped-chip {font-size:11px;min-height:32px;padding:6px 9px}.closet-panel {border:1px solid var(--line);border-radius:18px;background:var(--surface);min-width:0;overflow:hidden}.closet-modes {display:flex;border-bottom:1px solid var(--line);padding:7px;gap:8px;background:#f6eff4}.closet-modes button {flex:1;min-height:48px;border:0;background:transparent;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted)}.closet-modes button[aria-selected=true] {background:white;color:var(--rose-deep);box-shadow:0 2px 8px #60445214}.wardrobe-panel,.custom-panel {border:0;border-radius:0;box-shadow:none;padding:0;grid-column:auto;grid-row:auto}.wardrobe-header {display:none}.category-tabs {display:flex;padding:6px 10px;gap:3px;overflow-x:auto}.category-tabs .tab {flex:1;min-height:48px;padding:8px;font-size:13px}.subgroups {display:flex;overflow:auto;gap:6px;padding:8px 12px;border-top:1px solid #f4edf1;scrollbar-width:thin}.subgroups button {min-height:40px;white-space:nowrap;border:1px solid var(--line);border-radius:30px;background:white;font-size:12px;padding:8px 14px}.subgroups button[aria-pressed=true] {background:#e8d9e6;border-color:#c4a9bf;color:#67465e}.filters {padding:6px 14px 10px;gap:10px}.filters input[type=search] {flex:1;width:auto;min-width:0;height:42px}.filters label {font-size:12px;white-space:nowrap}.item-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 13px 12px;min-height:150px;max-height:clamp(235px,calc(100dvh - 445px),410px);overflow-y:auto;scrollbar-gutter:stable}.item-card {border-radius:12px;min-width:0}.item-preview {height:115px;background:#f5ede8}.item-name {font-size:11px;min-height:40px;padding:7px;line-height:1.3}.locked-badge {font-size:9px;bottom:40px}.wardrobe-tip {padding:12px 16px;font-size:12px}.accessory-hint {font-size:11px;padding:0 14px;margin:0 0 8px}.color-picker {position:relative;padding:10px 14px;max-height:160px;overflow:auto;background:#faf5f8;border-top:1px solid var(--line)}.color-picker .field-label {font-size:12px;margin-bottom:8px}.color-picker .field-label span {font-weight:400;color:var(--muted)}.color-picker>.color-row {gap:7px;display:flex;flex-wrap:wrap}.color-picker .color-swatch {width:27px;height:27px;min-height:27px;min-width:27px}.more-colors summary {font-size:11px;cursor:pointer;margin:8px 0}.more-colors .color-row {gap:7px}.custom-color {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:7px}.custom-color label {font-size:12px}.custom-color input {width:36px;height:28px}.custom-color .btn {min-height:32px;font-size:11px;padding:4px 8px}.custom-panel .tabs {padding:9px 14px}.custom-panel .tab {min-height:48px;flex:1}.custom-sections {padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-height:calc(100dvh - 280px);overflow:auto;scrollbar-gutter:stable}.custom-section {min-width:0;margin:0}.custom-section .field-label {font-size:13px;margin-bottom:10px}.custom-section:has(.color-row) {grid-column:1/-1}.custom-section:has([data-key=hair]),.custom-section:has([data-key=eyes]) {grid-column:1/-1}.option-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.custom-section:has([data-key=hair]) .option-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.option-button {display:flex;flex-direction:column;align-items:center;padding:0;overflow:hidden;min-height:80px;border-radius:12px;font-size:11px}.option-button>span:last-child {padding:5px;min-height:28px}.feature-preview {height:65px;width:100%;background:#f3e9e7;overflow:hidden}.feature-preview svg {width:100%;height:100%}.custom-section .color-swatch {height:36px;width:36px}.custom-section .color-row {gap:10px}
.rush-message {display:none}.time-urgent .rush-message {display:block;text-align:center;padding:8px;background:#fff0dc;color:#9c4c29;font-size:13px;font-weight:600}.time-urgent .timer {background:#b95838;color:white;animation:timePulse 1s ease-in-out infinite}.time-urgent .stage-card {box-shadow:0 0 0 3px #d68c4b66,0 0 24px #d68c4b20}.time-urgent .avatar-stage:before {content:'';position:absolute;inset:0;border:5px solid #d9995860;border-radius:0;pointer-events:none;z-index:5}
.catwalk-actor {animation-duration:5s;inset:0 8% 34px}.show-model {animation-duration:5s}.show-model .avatar-hands {transform-box:fill-box;transform-origin:center}.emote-wave .avatar-hands {animation:tinyWave .4s ease-in-out 1s 6}.emote-hearts:not(.show-model) {animation-duration:5s}.emote-curtsy {animation:royalCurtsy 5s both;animation-delay:var(--elapsed,0s)}.emote-disco {animation:discoStep 5s both;animation-delay:var(--elapsed,0s)}.emote-sashay {animation:sashayStep 5s both;animation-delay:var(--elapsed,0s)}.emote-hop {animation:joyHop 5s both;animation-delay:var(--elapsed,0s)}.emote-disco .avatar-hands {animation:tinyWave .28s 1s 9}.emote-hearts .avatar-hands {animation:tinyWave .55s 1s 4}.catwalk-scene {border-radius:90px 90px 20px 20px;height:clamp(300px,calc(100dvh - 215px),550px)}.solo-show {padding-top:12px}.solo-show .screen-header {margin-bottom:12px}.solo-show .screen-header h1 {font-size:36px}.show-layout {grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:20px}.voting-panel {padding:20px}.show-clock {margin:8px 0 15px}.show-progress {margin:8px 0}.voting-panel h2 {font-size:28px}.judge-note {margin-top:12px;padding-top:12px}.voting-panel>.quiet {margin:10px 0 0}.star-vote {min-width:44px}.show-caption {bottom:10px}
.podium {display:grid;grid-template-columns:1fr 1.15fr 1fr .86fr;gap:8px;align-items:end;max-width:930px;margin:16px auto 20px;isolation:isolate}.podium-contestant {min-width:0;display:flex;flex-direction:column;justify-content:flex-end;animation:podiumRise .7s both}.podium-model {height:220px;position:relative;margin-bottom:-3px}.podium-model .avatar-render {width:100%;height:100%}.place-1 .podium-model {height:255px}.place-4 .podium-model {height:195px}.podium-step {height:85px;background:linear-gradient(130deg,#e5dfe9,#cec4d8);border-radius:10px 10px 4px 4px;text-align:center;box-shadow:inset -9px 0 0 #4e3d6310;padding:10px}.place-1 .podium-step {height:118px;background:linear-gradient(130deg,#f0ddb0,#d3b577)}.place-3 .podium-step {height:65px;background:linear-gradient(130deg,#ebd3c3,#cea88f)}.place-4 .podium-step {height:52px;background:#eae4e5;padding:6px}.place-number {font-family:Georgia,serif;font-size:28px;float:left;padding:0 4px;opacity:.6}.podium-step h2 {font-size:23px;margin:0 0 2px}.podium-step>span:last-child {font-size:13px}.podium-step small {font-size:11px}.place-1 .podium-step h2 {font-size:28px}.winner-crown {position:absolute;top:-27px;left:calc(50% - 18px);font-size:35px;color:#b4862d;text-shadow:0 2px 0 #fff}.is-you .podium-step {outline:2px solid #8e608088;outline-offset:3px}.results-screen {text-align:center}.results-screen .screen-header {text-align:center;margin-bottom:10px}.results-screen .screen-header h1 {margin-inline:auto}.result-actions {display:flex;align-items:center;justify-content:center;gap:18px}.result-actions>span {font-size:12px;color:var(--muted);max-width:200px;text-align:left}.vote-breakdown {max-width:850px;margin:20px auto 0;padding:12px}.vote-breakdown .score-table {width:100%;font-size:12px}.vote-breakdown summary {font-size:12px}
.final-screen {max-width:970px;margin:auto;text-align:center}.final-medal {width:56px;height:56px;display:grid;place-items:center;margin:0 auto 12px;border:1px solid #dec797;border-radius:50%;font-size:35px;color:#ae802c;background:#f6ead1}.final-screen .screen-header {margin-bottom:16px}.final-screen h1 {margin-inline:auto}.learning-recap {display:flex;justify-content:center;gap:0;margin:18px auto 8px;max-width:620px}.learning-recap>div {flex:1;padding:2px 16px;display:flex;flex-direction:column;border-right:1px solid var(--line)}.learning-recap>div:last-child {border:0}.learning-recap strong {font-family:Georgia,serif;font-size:34px;font-weight:400;color:var(--rose-deep)}.learning-recap span,.practice-label {font-size:12px;color:var(--muted)}.practice-label {margin-bottom:20px}.look-story {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:800px;margin:auto}.story-look {background:white;border:1px solid var(--line);border-radius:14px;padding:7px;transform:rotate(-1.5deg);box-shadow:0 8px 15px #7850670b}.story-look:nth-child(2){transform:rotate(1.5deg)}.story-photo {height:220px;position:relative;background:linear-gradient(#f1e7ec,#e3d5e4);border-radius:9px;overflow:hidden}.story-photo .avatar-render {width:100%;height:100%}.story-photo>span {position:absolute;top:10px;left:12px;font-family:Georgia,serif;font-size:26px;color:#86657c80}.story-caption {display:flex;align-items:center;justify-content:space-between;text-align:left;padding:8px 4px 1px;gap:5px}.story-caption strong {display:block;font-family:Georgia,serif;font-size:19px;font-weight:400}.story-caption small {font-size:11px;color:var(--muted)}.story-caption .btn {min-height:44px;padding:4px;font-size:11px}.final-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px 0 16px}.final-standings {max-width:620px;margin:auto;text-align:left;font-size:13px;padding:12px;border:1px solid var(--line);border-radius:12px}.final-standings summary {cursor:pointer}.final-standings .score-table {width:100%}
#effects {position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.effect-burst {position:absolute;inset:0}.effect-burst span {position:absolute;left:var(--x);top:55%;font-size:24px;animation:sparkleFly 1.6s var(--delay) both}.effect-burst.confetti span {top:-30px;animation:confettiFall 2.2s var(--delay) both}
@keyframes answerGlow {50%{transform:scale(1.025)}}@keyframes sealPop {from{transform:scale(.2) rotate(-30deg)}to{transform:scale(1)}}@keyframes timePulse {50%{transform:scale(1.07);box-shadow:0 0 0 5px #d08b4730}}@keyframes sparkleFly {from{opacity:0;transform:translate(0,50px) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(var(--drift),-210px) rotate(var(--spin)) scale(1.15)}}@keyframes confettiFall {0%{opacity:0}10%{opacity:1}100%{opacity:0;transform:translate(var(--drift),95vh) rotate(var(--spin))}}@keyframes podiumRise {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes walkOn{0%{transform:translateX(-100%) scale(.8);opacity:0}5%{opacity:1}14%,84%{transform:translateX(0);opacity:1}92%{transform:translateX(42%) translateY(-3px)}100%{transform:translateX(110%) scale(.9);opacity:0}}
@keyframes royalCurtsy{0%,17%,82%,100%{transform:none}32%,45%{transform:translateY(16px) scaleY(.92) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}70%{transform:none}}
@keyframes discoStep{0%,16%,84%,100%{transform:none}25%,45%,65%{transform:translateX(-15px) rotate(-7deg) translateY(-8px)}35%,55%,75%{transform:translateX(15px) rotate(7deg)}}
@keyframes sashayStep{0%,14%,84%,100%{transform:none}25%{transform:translateX(-28px) rotate(-5deg)}43%{transform:translateX(28px) rotate(5deg)}62%{transform:translateX(-12px) rotate(-4deg)}75%{transform:translateX(8px) rotate(3deg)}}
@keyframes joyHop{0%,17%,38%,59%,82%,100%{transform:none}24%,46%,67%{transform:translateY(-28px) rotate(-3deg)}32%,53%,74%{transform:translateY(4px) scaleY(.97)}}
@media(max-width:940px){.shell{padding:0 16px}.dressing-layout{grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr)}.item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.custom-section:has([data-key=hair]) .option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.podium-model{height:190px}.place-1 .podium-model{height:225px}.place-4 .podium-model{height:165px}}
@media(max-width:680px){.shell{padding:0 10px}.topbar{min-height:54px;gap:5px}.topnav .btn{font-size:11px;padding:6px}.brand{font-size:24px;gap:3px}.brand-mark{width:24px}.screen{padding-top:16px}.welcome-screen{padding:16px 5px;min-height:calc(100dvh - 55px)}.welcome-screen h1{font-size:65px}.welcome-tagline{font-size:14px}.welcome-facts{gap:7px;font-size:11px}.welcome-facts span+span:before{margin-right:7px}.skill-grid{grid-template-columns:1fr}.skill-group-title h2{font-size:21px}.skill-group-title span{font-size:10px}.skill-card{min-height:106px}.skill-search{gap:5px}.skill-search>span{display:none}.skill-screen .screen-header h1{font-size:34px}.skill-screen .screen-header p{font-size:13px}.dressing-top{display:flex;align-items:center;gap:7px}.dressing-top h1{font-size:28px}.lock-note{max-width:145px;font-size:10px}.dressing-top>.btn{font-size:11px;padding:7px}.dressing-layout{grid-template-columns:minmax(112px,.52fr) minmax(0,1fr);gap:8px}.stage-card{grid-column:1;grid-row:1;position:sticky;top:6px}.stage-header{min-height:47px;padding:5px;justify-content:center}.stage-header>span:first-child{display:none}.avatar-stage .avatar-render{height:300px}.stage-header .timer{font-size:17px}.closet-panel{grid-column:2;grid-row:1;border-radius:13px}.closet-modes{flex-direction:column;gap:2px;padding:4px}.closet-modes button{font-size:11px;min-height:42px}.category-tabs{flex-wrap:wrap;padding:5px;gap:2px}.category-tabs .tab{font-size:10px;min-height:40px;padding:6px;flex:1 1 29%}.subgroups{padding:6px;gap:4px}.subgroups button{font-size:10px;min-height:36px;padding:6px 10px}.filters{padding:5px 7px;flex-wrap:wrap}.filters input[type=search]{width:100%;font-size:11px;height:38px}.filters label{font-size:10px}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:5px;gap:5px;max-height:330px;min-height:160px}.item-preview{height:93px}.item-name{font-size:10px;min-height:40px;padding:5px}.accessory-hint{font-size:10px;padding:0 8px}.color-picker{padding:8px;max-height:160px}.color-picker .field-label{font-size:10px}.color-picker>.color-row{gap:6px}.color-picker .color-swatch{height:25px;width:25px;min-width:25px}.custom-color{flex-wrap:wrap;gap:4px}.custom-color label{font-size:10px}.studio-toolbar{flex-wrap:wrap;padding:4px;gap:4px}.studio-toolbar .btn{font-size:10px;min-height:36px;padding:5px}.studio-toolbar .icon-button{height:36px;width:36px}.wearing-details{padding:0 5px 5px}.wearing-details summary{font-size:10px}.rush-message{font-size:10px!important;padding:6px!important}.custom-panel .tabs{flex-wrap:wrap;padding:4px}.custom-panel .tab{font-size:11px;padding:5px;min-height:40px}.custom-sections{display:block;padding:8px;max-height:510px}.custom-section{margin:0 0 14px}.custom-section .field-label{font-size:11px}.custom-section .color-row{gap:8px}.custom-section .color-swatch{height:30px;width:30px}.option-grid,.custom-section:has([data-key=hair]) .option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.option-button{font-size:10px;min-height:75px}.feature-preview{height:55px}.show-layout{display:flex;flex-direction:column;gap:10px}.catwalk-scene{height:310px;width:100%}.solo-show .screen-header h1{font-size:29px}.solo-show .screen-header p{font-size:12px}.voting-panel{padding:12px 16px;width:100%}.show-clock{margin:0}.voting-panel h2{font-size:25px}.star-votes{gap:9px}.star-vote{min-width:44px}.podium{gap:5px;grid-template-columns:1fr 1.12fr 1fr .82fr;margin-top:32px}.podium-model{height:155px}.place-1 .podium-model{height:180px}.place-4 .podium-model{height:140px}.podium-step{padding:8px 3px;height:79px}.place-1 .podium-step{height:105px}.place-3 .podium-step{height:65px}.place-4 .podium-step{height:55px;padding:6px 2px}.place-number{float:none;font-size:20px;display:block;line-height:1}.podium-step h2,.place-1 .podium-step h2{font-size:18px;margin:4px 0 1px}.podium-step>span:last-child{font-size:10px}.podium-step small{display:none}.result-actions{flex-direction:column;gap:8px}.result-actions>span{text-align:center;max-width:none}.results-screen .screen-header h1{font-size:32px}.results-screen .screen-header p{font-size:12px}.winner-crown{top:-25px;font-size:29px}.final-screen h1{font-size:34px}.learning-recap>div{padding:2px 7px}.learning-recap strong{font-size:29px}.learning-recap span{font-size:10px}.look-story{gap:6px}.story-look{padding:4px}.story-photo{height:165px}.story-photo>span{font-size:20px;top:5px;left:5px}.story-caption{display:block;text-align:center;padding:7px 0 0}.story-caption strong{font-size:17px}.story-caption small{font-size:10px}.story-caption .btn{width:100%;min-height:36px}.final-actions{gap:7px}.final-actions .btn{font-size:12px;padding:10px 14px}.success-feedback{padding-left:65px!important}.correct-seal{left:12px;height:38px;width:38px}.success-feedback strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.effect-burst,.screen,.podium-contestant,.answer.correct,.correct-seal,.time-urgent .timer,.show-model,.avatar-hands{animation:none!important}.effect-burst{display:none}}
@media(max-width:680px){.topbar{flex-wrap:nowrap}.topnav{width:auto;flex-wrap:nowrap;gap:0}.topnav .btn{padding:6px;font-size:10px}.brand>span:last-child{font-size:23px}.brand-mark{font-size:20px;width:20px}.welcome-screen{justify-content:center}.welcome-model{height:190px;width:165px}.welcome-screen h1{font-size:59px}.welcome-tagline{font-size:13px}.welcome-facts{margin-bottom:14px}.welcome-symbol{margin-bottom:10px}}

@media(max-width:680px){.topnav .btn{white-space:nowrap;min-width:0}.topnav{flex-shrink:0}.topbar{gap:6px}}

/* Reading Fashion Show: visible tools, themed rounds and a clear judging moment. */
.shell{padding-top:0}.game-settings{position:fixed;z-index:18;right:10px;top:8px;width:38px;height:38px;border:1px solid #cbbac4;background:#fffcf8e8;color:#70546a;border-radius:50%;font-size:22px;cursor:pointer;box-shadow:0 2px 9px #775c6410}.screen{padding-top:36px}.welcome-screen{min-height:calc(100dvh - 18px);padding:35px 20px 20px;gap:0}.welcome-screen h1{font-size:clamp(40px,5vw,65px);line-height:1.04;margin:9px 0 12px}.welcome-screen h1 em{font-weight:400;color:#8b5d7d}.welcome-model{height:210px;margin:12px 0}.welcome-symbol{font-size:27px;margin-bottom:8px}.welcome-facts{margin:6px 0 19px}.welcome-secondary{margin:10px 0}.dressing-screen{padding-top:28px}.dressing-top{padding-right:40px;margin-bottom:10px;gap:10px}.dressing-top h1{font-size:29px}.dress-theme-note{display:flex;gap:5px;flex-direction:column;align-items:flex-end}.dress-theme-note .btn{min-height:30px;padding:4px 8px}.dress-theme-note .lock-note{font-size:11px;max-width:300px}.style-toolbox{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;padding:8px;border-radius:17px;background:#eee6ef;margin:0 0 12px;border:1px solid #e3d7e3}.style-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;border:1px solid transparent;border-radius:11px;color:#6e5869;background:#fcf8fc;cursor:pointer}.style-tool>span{font-size:24px;line-height:1.1}.style-tool strong{font-size:12px;font-weight:600}.style-tool.active{background:#895d80;color:white;border-color:#895d80;box-shadow:0 3px 8px #70556e22}.style-tool:hover{border-color:#ac84a7}.style-tool:focus-visible{outline:3px solid #c89955;outline-offset:2px}.dressing-layout{grid-template-columns:minmax(230px,.65fr) minmax(0,1.5fr);gap:14px}.closet-panel .custom-panel,.closet-panel .wardrobe-panel{border:0}.custom-sections{max-height:calc(100dvh - 210px)}.closet-panel .item-grid{max-height:calc(100dvh - 295px)}.avatar-stage{overflow:hidden}.avatar-stage .avatar-render{height:clamp(280px,calc(100dvh - 295px),540px);width:100%;padding:8px}.avatar-stage svg{height:100%;width:100%;overflow:hidden!important}.avatar-render[data-camera=shoes],.avatar-render[data-camera=eyes],.avatar-render[data-camera=upper],.avatar-render[data-camera=face],.avatar-render[data-camera=hair],.avatar-render[data-camera=lower]{animation:cameraSettle .24s ease-out}.wardrobe-header{display:none}.custom-panel .custom-section{padding:13px}.custom-panel .field-label{font-size:14px}.color-swatch>span{display:none}.custom-panel:has([data-key=skin]) .color-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.custom-panel:has([data-key=skin]) .color-swatch{width:auto;height:70px;min-width:0;border-radius:12px;position:relative;margin-bottom:20px}.custom-panel:has([data-key=skin]) .color-swatch>span{display:block;position:absolute;top:75px;left:50%;transform:translateX(-50%);font-size:11px;color:#5e4b58}.feature-preview{height:104px}.option-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.option-button{min-height:138px}.custom-panel .color-row:has([data-key=hairColor]){margin-top:6px}.studio-toolbar .btn{white-space:normal}.theme-roll-screen{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:calc(100dvh - 12px)}.theme-roll-screen h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,52px);margin:15px 0 28px}.theme-slot{height:100px;overflow:hidden;border:2px solid #c79bbc;border-radius:25px;background:#fffafc;width:min(560px,94%);box-shadow:0 0 0 10px #eddfeb,0 16px 34px #a57a992b;position:relative}.roller-strip{animation:themeRoll 2s cubic-bezier(.13,.65,.17,1) forwards}.roller-ticket{height:100px;display:flex;align-items:center;justify-content:center;gap:20px;padding:8px;font-family:Georgia,serif;font-size:32px}.roller-ticket>span{font-size:45px}.roller-ticket strong{font-weight:400}.roller-status{font-size:18px;font-weight:600;color:#895d80;margin:32px 0 5px}.inspiration-screen{max-width:1060px;margin:auto;text-align:center;padding-top:20px}.inspiration-screen .progress-dots{margin-bottom:8px}.theme-reveal-icon{font-size:36px;margin:8px}.inspiration-screen h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(35px,5vw,52px);margin:7px 0}.theme-description{font-size:17px;margin:10px 0}.theme-hint{font-size:14px;color:#78616f;margin:0 0 17px}.theme-inspiration{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:820px;margin:auto}.inspiration-card{padding:7px;background:white;border:1px solid #e3d6df;border-radius:17px;box-shadow:0 5px 18px #916b7e12;overflow:hidden;margin:0}.reference-frame{position:relative;height:clamp(175px,34dvh,300px);background:#f5f0ef;border-radius:10px;overflow:hidden}.reference-fallback{height:100%;width:100%;position:absolute;inset:0}.reference-fallback .avatar-render,.reference-fallback svg{height:100%;width:100%}.theme-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block}.theme-photo[hidden]{display:none}.inspiration-card figcaption{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 5px 5px}.inspiration-card figcaption span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#a87894}.inspiration-card figcaption strong{font-size:13px;font-weight:500}.photo-credits{margin:9px auto;font-size:11px;color:#88717c}.photo-credits summary{cursor:pointer}.photo-credits a{display:inline-block;color:inherit;margin:8px}.ready-theme{margin:15px auto 0}.ready-theme p{font-size:13px;line-height:1.7;margin:0 0 12px}.ready-theme .btn{min-width:min(340px,100%);min-height:53px;font-size:16px}.ready-theme .btn span{margin-left:16px}.free-reveal{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 10px)}.anything-card{max-width:610px;border:1px solid #e2ccdc;border-radius:24px;background:linear-gradient(130deg,#ffe8ee,#efe8ff 45%,#e4f7ef);padding:28px 35px;margin:16px 0;box-shadow:0 10px 30px #8b618014}.anything-card>span{font-size:35px;letter-spacing:13px}.anything-card h2{font-family:Georgia,serif;font-size:32px;font-weight:400;margin:16px 0 12px}.anything-card p{font-size:16px;line-height:1.6}.anything-card .free-lock-note{font-size:12px;color:#715a69;border-top:1px solid #ffffffb0;padding-top:12px}.modal .theme-inspiration{width:100%}.modal .reference-frame{height:175px}.modal .btn{margin:5px}.modal:has(.theme-inspiration){max-width:820px}.voting-panel{background:linear-gradient(155deg,#fff5d9,#fff9ee);border:2px solid #d8b56d;box-shadow:0 7px 24px #b98a3920}.vote-invitation{font-size:15px;font-weight:800;color:#9b601c;letter-spacing:.04em}.voting-panel h2{font-size:clamp(28px,3vw,38px);margin:10px 0 6px}.vote-instruction{font-size:15px;line-height:1.5;margin:0 0 12px}.star-votes{gap:8px;margin:12px 0}.star-vote{display:flex;flex-direction:column;align-items:center;min-width:48px;min-height:75px;flex:1;border:1px solid #dab66e;border-radius:12px;background:#fffefa;box-shadow:0 4px 0 #e8d4a5;padding:4px;color:#9f7534}.star-vote>span{font-size:43px;line-height:1.1}.star-vote small{font-size:14px;font-weight:700}.star-vote.filled{color:#b67c16;background:#ffecaa;border-color:#bc8a26}.star-vote:hover{transform:translateY(-3px);background:#fff2c4}.rate-callout:not(.has-vote) .star-votes{animation:inviteVote .9s ease-in-out infinite alternate}.rate-callout.has-vote .vote-invitation{color:#457458}.vote-status{font-size:13px}.show-clock{font-size:14px}.show-progress,.judge-note{display:none}.your-walk{background:#f5eff7;border-color:#d7c4d9}.your-walk-note>span{font-size:13px;letter-spacing:.12em;color:#93617e}.your-walk-note p{font-size:15px;line-height:1.6}.final-screen .story-caption small{font-size:11px;line-height:1.5;display:block}
@keyframes themeRoll{from{transform:translateY(0)}to{transform:translateY(-2000px)}}@keyframes cameraSettle{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes inviteVote{from{filter:drop-shadow(0 0 0 #d8b35c00)}to{filter:drop-shadow(0 0 7px #d8b35c55)}}
@media(max-width:850px){.style-toolbox{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:6px}.style-tool{min-height:50px;flex-direction:row;gap:5px}.style-tool>span{font-size:22px}.style-tool strong{font-size:12px}.dressing-top h1{font-size:25px}.dressing-layout{grid-template-columns:minmax(125px,.66fr) minmax(0,1.5fr)}.closet-panel .item-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:calc(100dvh - 360px)}.custom-sections{max-height:calc(100dvh - 270px)}.option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-preview{height:90px}.custom-panel:has([data-key=skin]) .color-row{grid-template-columns:repeat(4,minmax(0,1fr))}.custom-panel:has([data-key=skin]) .color-swatch{height:55px}.custom-panel:has([data-key=skin]) .color-swatch>span{top:60px}.avatar-stage .avatar-render{height:clamp(260px,calc(100dvh - 350px),450px)}}
@media(max-width:540px){.game-settings{height:33px;width:33px;font-size:19px;top:6px;right:6px}.screen{padding-top:31px}.welcome-screen{padding-top:36px}.welcome-screen h1{font-size:41px}.welcome-model{height:210px}.welcome-facts{font-size:10px;gap:10px}.welcome-tagline{font-size:13px}.dressing-top{padding-right:23px;align-items:flex-start;gap:8px}.dressing-top h1{font-size:24px}.dressing-top .eyebrow{font-size:9px}.dress-theme-note .lock-note{font-size:10px;max-width:120px;line-height:1.3}.dress-theme-note .btn{font-size:10px}.style-tool{flex-direction:column;gap:1px;min-height:49px}.style-tool>span{font-size:21px}.style-tool strong{font-size:10px}.dressing-layout{grid-template-columns:108px minmax(0,1fr);gap:8px}.style-toolbox{margin-bottom:9px}.stage-header{justify-content:center;padding:5px}.stage-header>span:first-child{display:none}.stage-header .timer{min-width:62px;font-size:16px}.avatar-stage .avatar-render{height:285px;padding:2px}.studio-toolbar{flex-wrap:wrap;padding:5px}.studio-toolbar .btn{flex-basis:100%;min-height:34px;font-size:10px;padding:4px}.studio-toolbar .icon-button{width:36px;height:36px}.wearing-details{padding:2px 5px}.wearing-details summary{font-size:10px}.closet-panel .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100dvh - 325px);min-height:170px}.item-preview{height:110px}.item-name{font-size:10px}.custom-section{padding:7px!important}.custom-sections{padding:0;max-height:calc(100dvh - 255px)}.option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.option-button{min-height:92px;font-size:10px}.feature-preview{height:67px}.custom-panel .field-label{font-size:12px}.custom-panel:has([data-key=skin]) .color-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.custom-panel:has([data-key=skin]) .color-swatch{height:50px}.custom-panel:has([data-key=skin]) .color-swatch>span{top:54px;font-size:10px}.filters{padding:6px}.filters input[type=search]{font-size:11px}.subgroups{padding:6px;gap:5px}.subgroups button{min-height:35px;padding:5px 9px;font-size:10px}.color-picker{padding:7px}.color-picker .field-label{font-size:11px}.inspiration-screen h1{font-size:33px}.theme-reveal-icon{font-size:31px;margin:4px}.theme-description{font-size:14px;margin:8px 0}.theme-hint{font-size:12px;line-height:1.4;margin-bottom:12px}.theme-inspiration{gap:6px}.inspiration-card{padding:4px;border-radius:12px}.reference-frame{height:170px;border-radius:8px}.inspiration-card figcaption{padding:7px 2px}.inspiration-card figcaption strong{font-size:10px;line-height:1.4}.inspiration-card figcaption span{font-size:9px}.ready-theme p{font-size:12px}.ready-theme .btn{font-size:14px}.anything-card{padding:20px 16px}.anything-card h2{font-size:27px}.anything-card p{font-size:14px}.roller-ticket{font-size:25px;gap:12px}.roller-ticket>span{font-size:36px}.roller-status{font-size:16px}.catwalk-scene{height:280px}.voting-panel{padding:12px}.star-votes{gap:6px}.star-vote{min-width:44px;min-height:66px}.star-vote>span{font-size:35px}.star-vote small{font-size:12px}.voting-panel h2{font-size:28px}.vote-invitation{font-size:12px}.vote-instruction{font-size:12px}.vote-status{font-size:11px}.show-layout{gap:8px}.solo-show .screen-header p{margin-bottom:9px}.solo-show .screen-header h1{font-size:26px}.your-walk-note p{font-size:13px}.modal .reference-frame{height:135px}}
@media(prefers-reduced-motion:reduce){.roller-strip{animation:none;transform:translateY(-2000px)}.rate-callout:not(.has-vote) .star-votes,.avatar-render{animation:none!important}}
.filters{flex-wrap:wrap}.filters .theme-picks-label{white-space:nowrap;order:2;color:#8b5d7c;font-weight:600;min-height:30px}.filters input[type=search]{flex:1;min-width:100px}.filters label input{accent-color:#895d80}.ready-theme{position:sticky;bottom:0;padding:12px 10px;background:linear-gradient(#fbf7f4e6,#fbf7f4 25%);border-radius:16px;z-index:2}

.google-inspiration{display:inline-block;font-size:12px;color:var(--rose);margin:9px 0 2px;text-underline-offset:3px}.google-inspiration:focus-visible{outline:2px solid var(--rose);outline-offset:4px}

/* Clickable wardrobe browsing, with controls outside the scrolling cards. */
.piece-browser{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:7px;min-width:0;padding-right:8px}
.piece-browser .item-grid{min-width:0;grid-auto-rows:max-content;align-self:start;overscroll-behavior:contain}
.piece-scroll-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;align-self:stretch}
.piece-scroll-buttons>span{font-size:10px;color:var(--muted);font-weight:700}
.piece-scroll-button{width:46px;height:48px;min-height:44px;border:1px solid #b78ba9;border-radius:15px;background:#8d6084;color:white;font-size:29px;font-weight:700;line-height:1;box-shadow:0 3px 0 #67435f;cursor:pointer;transition:background .15s,transform .15s}
.piece-scroll-button:hover:not(:disabled){background:#73486a;transform:translateY(-1px)}
.piece-scroll-button:focus-visible{outline:3px solid #c29b55;outline-offset:3px}
.piece-scroll-button:disabled{background:#eee6ec;color:#b8a6b3;border-color:#e0d3dd;box-shadow:none;cursor:default}
@media(max-width:540px){.piece-browser{grid-template-columns:minmax(0,1fr);gap:4px;padding-right:0}.piece-scroll-buttons{grid-row:1;flex-direction:row;justify-content:flex-end;padding:2px 8px 6px;gap:8px}.piece-scroll-buttons>span{margin-right:auto}.piece-scroll-button{width:47px;height:44px;border-radius:12px;font-size:26px}.piece-browser .item-grid{grid-row:2;max-height:calc(100dvh - 379px)}}