/* Premium editorial layer: loaded after the functional base stylesheet. */
:root {
  --paper: #f5f4f1;
  --surface: #fffefd;
  --ink: #161718;
  --muted: #6f716f;
  --line: #deddd8;
  --line-soft: #e9e8e3;
  --moss: #31433d;
  --moss-soft: #dde7df;
  --clay: #a8644c;
  --clay-soft: #f1dfd7;
  --charcoal: #181a1a;
}

body { font-size: 13px; letter-spacing: -.008em; }
.site-header { min-height: 74px; }
.brand { font-size: 18px; letter-spacing: -.065em; }
.brand-dot { width: 7px; height: 7px; margin-right: 7px; box-shadow: none; }
.site-header nav { gap: clamp(18px, 2.7vw, 38px); font-size: 11px; }
.site-header > .button { min-height: 35px; padding-inline: 14px; font-size: 11px; }
.button { min-height: 41px; padding-inline: 17px; font-size: 12px; }

.hero-luxe { grid-template-columns: minmax(300px, .9fr) minmax(410px, 1.1fr); gap: clamp(30px, 6.2vw, 96px); min-height: 690px; padding-block: 52px 72px; }
.hero-luxe .hero-copy { max-width: 565px; }
.hero-luxe h1 { max-width: 540px; font-size: clamp(36px, 3.65vw, 54px); font-weight: 690; line-height: 1.08; letter-spacing: -.07em; }
.hero-luxe h1 em { color: #5e7469; }
.hero-luxe .hero-lead { max-width: 448px; margin-top: 21px; color: #555956; font-size: 14px; line-height: 1.76; }
.hero-luxe .hero-actions { gap: 18px; margin-top: 29px; }
.hero-facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 42px; padding-top: 16px; border-top: 1px solid var(--line); }
.hero-facts span { display: grid; gap: 2px; color: #74756f; font-size: 10px; letter-spacing: .02em; }
.hero-facts strong { color: var(--ink); font-size: 15px; font-weight: 660; letter-spacing: -.05em; }
.hero-luxe .microcopy { max-width: 455px; margin-top: 16px; font-size: 10px; line-height: 1.6; }

.hero-stage-luxe { min-height: 560px; isolation: isolate; }
.hero-gridline { position: absolute; z-index: -1; inset: 8% 0 6% 6%; border: 1px solid #d8d8d3; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(214,214,210,.65) calc(50% - .5px), rgba(214,214,210,.65) calc(50% + .5px), transparent calc(50% + .5px)); }
.hero-editorial-card { position: relative; z-index: 2; width: min(100%, 356px); height: 566px; margin: 0 5.2vw 0 auto; overflow: hidden; border: 1px solid #d8d8d4; background: #e9e7e1; box-shadow: 16px 28px 55px rgba(25,29,28,.13); }
.hero-editorial-card::after { content: none; }
.hero-editorial-card img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.91) contrast(1.025); }
.hero-editorial-card figcaption { position: absolute; z-index: 2; top: 17px; left: 17px; display: grid; gap: 2px; color: #202321; }
.hero-editorial-card figcaption span { font-size: 9px; font-weight: 650; letter-spacing: .13em; opacity: .7; }
.hero-editorial-card figcaption strong { font-size: 12px; font-weight: 600; }
.hero-truth-card { position: absolute; z-index: 3; top: 42px; left: 0; width: 168px; padding: 12px 13px; border-top: 1px solid #626f68; background: var(--paper); }
.hero-truth-card span { display: block; color: #41564b; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.hero-truth-card p { margin: 5px 0 0; color: #71746f; font-size: 10px; line-height: 1.5; }

.section-intro h2, .flow-head h2, .family h2 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -.062em; }
.principle { padding-block: 92px; }
.principle-item { min-height: 92px; padding: 20px 0; }
.principle-item h3 { font-size: 17px; }
.flow { padding-block: 90px; background: #161918; }
.flow-head { align-items: center; }
.flow-grid-luxe { gap: clamp(25px, 4vw, 62px); margin-top: 54px; }
.flow-step { min-height: 296px; padding-top: 46px; }
.flow-graphic { height: 122px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; background: transparent; }
.flow-ledger, .flow-weather, .flow-choice { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; padding: 14px 15px; overflow: hidden; }
.flow-graphic small { align-self: start; color: #b3bbb5; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.flow-graphic strong { align-self: end; color: #fbfaf6; font-size: 48px; line-height: .8; font-weight: 560; letter-spacing: -.075em; }
.flow-graphic p { align-self: end; justify-self: end; margin: 0; color: #b6c1ba; font-size: 10px; }
.flow-graphic i { position: absolute; top: 37px; right: 16px; bottom: 30px; width: 54px; border: 1px solid rgba(184,205,192,.35); border-left: 0; border-bottom: 0; transform: skewX(-22deg); }
.flow-weather { background: #31423a; }.flow-weather i { border-color: rgba(250,236,189,.65); border-radius: 60% 40% 0 0; }
.flow-choice { background: #554139; }.flow-choice i { border-color: rgba(254,219,197,.55); }
.flow-step h3 { font-size: 18px; }

.style-library { padding-block: 96px; }
.style-library-head { display: flex; justify-content: space-between; align-items: end; gap: 42px; margin-bottom: 42px; }
.style-library-head h2 { margin: 0; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -.064em; }
.style-library-head > p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.style-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.style-card { position: relative; display: flex; flex-direction: column; min-width: 0; aspect-ratio: 2 / 3; overflow: hidden; background: #e3e2dd; }
.style-card-feature, .style-card-wide, .style-card-baby { grid-column: auto; grid-row: auto; }
.style-card::after { content: none; }
.style-card img, .style-card video { width: 100%; min-height: 0; flex: 1 1 auto; object-fit: contain; object-position: center bottom; display: block; filter: saturate(.9) contrast(1.025); transition: filter 400ms var(--easing); }
.style-card:hover img, .style-card:hover video { filter: saturate(1) contrast(1.04); }
.style-card-copy { z-index: 2; flex: 0 0 auto; padding: 11px 13px 12px; color: var(--ink); background: #fffefd; }
.style-card-copy span { display: block; color: #788078; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.style-card-copy h3 { margin: 3px 0 0; font-size: 16px; font-weight: 620; letter-spacing: -.045em; }.style-card-copy p { margin: 1px 0 0; color: #747872; font-size: 10px; }

.family { padding-block: 98px; }
.family-lookbook { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border: 1px solid #d8d8d3; background: #e8e6df; box-shadow: 16px 22px 45px rgba(25,29,28,.09); }
.family-lookbook::after { content: none; }
.family-lookbook img { display: block; width: 100%; height: 500px; object-fit: contain; object-position: center bottom; filter: saturate(.88) contrast(1.02); }
.family-lookbook figcaption { z-index: 1; padding: 16px 19px 17px; color: var(--ink); background: #fffefd; }
.family-lookbook span { display: block; color: #788078; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.family-lookbook strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 620; letter-spacing: -.05em; }
.family-lookbook p { margin: 3px 0 0; color: #747872; font-size: 10px; }

/* Authenticated workbench */
.app-shell { background: #f5f5f2; }
.app-header { height: 70px; background: rgba(255,255,254,.92); }
.app-layout { min-height: calc(100dvh - 70px); }
.app-sidebar { width: 238px; padding: 22px 14px; background: #eeefeb; }
.nav-item { padding: 11px 12px; border-radius: 6px; }
.nav-item:hover, .nav-item.is-active { background: #fffefd; box-shadow: 0 1px 0 rgba(12,14,13,.04); }
.app-main { padding: clamp(24px, 3.5vw, 50px); }
.app-view { max-width: 1360px; }
.view-heading { margin-bottom: 24px; }
.view-heading h1 { font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -.065em; }
.view-heading p { max-width: 465px; margin-top: 9px; font-size: 13px; line-height: 1.65; }
.composer-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -3px 0 18px; }
.composer-mode { display: grid; grid-template-columns: 34px 1fr; gap: 1px 10px; min-height: 76px; padding: 13px 16px; border: 1px solid #d9dad5; border-radius: 10px; color: #30332f; background: #fffefd; text-align: left; transition: border-color 160ms var(--easing), background 160ms var(--easing), transform 160ms var(--easing); }
.composer-mode > span { grid-row: 1 / 3; align-self: center; color: #9b978f; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.composer-mode strong { align-self: end; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.composer-mode small { color: #7d7e79; font-size: 10px; }
.composer-mode:hover { border-color: #aeb4ae; transform: translateY(-1px); }
.composer-mode.is-primary { color: #f8f7f2; border-color: #25352c; background: #26372e; }
.composer-mode.is-primary > span, .composer-mode.is-primary small { color: #cdd8d1; }
.composer-mode.is-active:not(.is-primary) { border-color: #6d8175; background: #eef3ef; }
.composer-mode:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.today-layout { grid-template-columns: minmax(360px, .91fr) minmax(390px, 1.09fr); gap: 18px; }
.person-panel, .recommendation-panel, .closet-panel, .identity-panel, .settings-panel, .family-panel { border-color: #dfdfda; border-radius: 12px; box-shadow: 0 8px 20px rgba(20,25,23,.025); }
.person-panel { min-height: 626px; background: linear-gradient(135deg, #dce3de, #eae8e1 58%, #dedbd4); }
.person-panel::after { inset: 14px; border-color: rgba(26,31,29,.13); border-radius: 5px; }
.person-panel .panel-meta { top: 28px; right: 28px; left: 28px; color: #4a5b52; }
.person-display { inset: 65px 20px 48px; overflow: hidden; }
.profile-stage { position: relative; display: grid; width: min(76%, 310px); height: min(100%, 492px); place-items: end center; overflow: hidden; border: 1px solid rgba(21,26,23,.16); background: linear-gradient(160deg, rgba(255,255,253,.76), rgba(205,210,203,.62)); box-shadow: 0 22px 38px rgba(24,30,26,.13); }
.profile-stage::after { position: absolute; right: 9px; bottom: 9px; left: 9px; height: 34px; content: ""; background: linear-gradient(180deg, transparent, rgba(18,24,21,.24)); pointer-events: none; }
.profile-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: none; }
.profile-stage span { position: absolute; z-index: 2; right: 13px; bottom: 12px; left: 13px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 1px 7px rgba(0,0,0,.34); }
.profile-stage.has-user-reference { background: rgba(247,246,241,.78); }
.stage-carousel-button { position: absolute; z-index: 5; top: 50%; display: grid; width: 38px; height: 48px; padding: 0; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(25,31,28,.58); color: #fff; box-shadow: 0 8px 20px rgba(15,20,17,.18); font: 300 28px/1 Georgia, serif; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.stage-carousel-button:hover, .stage-carousel-button:focus-visible { background: rgba(25,31,28,.82); outline: 2px solid rgba(255,255,255,.82); outline-offset: 2px; }
.stage-carousel-button.is-previous { left: 12px; }
.stage-carousel-button.is-next { right: 12px; }
.profile-stage .stage-carousel-count { position: absolute; z-index: 5; right: 12px; bottom: 42px; left: auto; width: auto; padding: 4px 8px; border-radius: 999px; background: rgba(25,31,28,.58); color: #fff; font-size: 9px; line-height: 1; letter-spacing: .08em; text-shadow: none; }
.person-panel:has(.stage-choice) .person-display { bottom: 100px; }
.person-panel:has(.stage-choice) .stage-demo-notice,
.person-panel:has(.stage-choice) .lock-pill { display: none; }
.stage-choice { position: absolute; z-index: 6; right: 28px; bottom: 25px; left: 28px; display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 12px; }
.stage-like-button { display: inline-flex; min-width: 112px; min-height: 44px; padding: 0 18px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #26372e; border-radius: 999px; color: #fff; background: #26372e; font-size: 12px; font-weight: 700; cursor: pointer; }
.stage-like-button span { font-size: 18px; line-height: 1; }
.stage-like-button.is-selected { border-color: #a85f46; background: #a85f46; }
.stage-like-button:disabled { cursor: default; opacity: .8; }
.stage-choice small { min-width: 0; color: #536159; font-size: 10px; line-height: 1.45; }
.stage-video-link { min-height: 40px; padding: 0 4px; border: 0; color: #405449; background: transparent; font-size: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wearing-stack { position: absolute; z-index: 4; top: 72px; left: 26px; display: grid; gap: 6px; max-width: 152px; }
.wearing-stack small { color: #6b706b; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.wearing-chip { display: inline-flex; max-width: 100%; padding: 5px 7px; overflow: hidden; color: #3a443f; border: 1px solid rgba(65,82,72,.17); background: rgba(255,255,253,.78); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(8px); }
.wearing-chip.is-recommended { border-style: dashed; color: #6b5943; background: rgba(248,242,231,.86); }
.stage-demo-notice { position: absolute; z-index: 4; right: 24px; bottom: 52px; max-width: 166px; padding-top: 8px; border-top: 1px solid rgba(43,62,52,.4); color: #4b5d54; font-size: 10px; line-height: 1.5; }
.stage-demo-notice strong { display: block; color: #2c4236; font-size: 10px; letter-spacing: .04em; }
.lock-pill { right: auto; bottom: 28px; left: 28px; font-size: 10px; }
.recommendation-panel { min-height: 626px; padding: 27px; }
.panel-heading h2 { font-size: 23px; }.look-row { min-height: 74px; border-radius: 8px; }.look-index { height: 48px; border-radius: 4px; }.render-actions { display: flex; align-items: center; gap: 9px; }.render-actions .button { flex: 1; }.render-actions .button-dark { order: 0; }.render-actions .button:disabled { cursor: not-allowed; box-shadow: none; opacity: .42; }
.quiet-action { min-height: 40px; padding: 0 8px; border: 0; color: #716f69; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.free-look-summary { display: grid; gap: 13px; min-height: 210px; padding: 18px; border: 1px solid #d9dad5; border-radius: 9px; background: #fbfaf6; }
.free-look-summary > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.free-look-summary > div:first-child strong { font-size: 15px; }.free-look-summary > div:first-child span { color: #7a7974; font-size: 10px; }
.free-look-items { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; }
.free-look-items span { padding: 7px 9px; border: 1px solid #d8d9d4; border-radius: 999px; color: #3d413d; background: #fff; font-size: 10px; }
.free-look-items span.is-recommended { border-style: dashed; color: #745c3f; background: #f8f2e8; }
.free-look-summary p { align-self: end; margin: 0; color: #70716d; font-size: 11px; line-height: 1.6; }
.free-empty-state { min-height: 210px; }.free-closet-heading > div { display: grid; gap: 2px; }
.look-rationale { display: grid; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.look-rationale p { margin: 0; }.look-rationale details { padding-top: 5px; border-top: 1px solid var(--line-soft); }.look-rationale summary { width: fit-content; cursor: pointer; color: #43544b; font-size: 10px; font-weight: 700; }.look-rationale details p { margin-top: 7px; }
.truth-note { font-size: 10px; line-height: 1.65; }
.garment-card { min-height: 224px; border-radius: 9px; }.garment-card img { height: 167px; }.card-copy { display: grid; gap: 1px; }.garment-card .card-copy { padding: 10px 11px; }
.wear-toggle { min-width: 44px; min-height: 32px; padding: 0 8px; border: 1px solid rgba(255,255,255,.62); color: #fff; background: rgba(23,29,26,.65); font-size: 10px; backdrop-filter: blur(7px); }
.wear-toggle.is-worn { color: #273d31; border-color: #d4e2d8; background: #e3eee6; }
.closet-grid { gap: 11px; }.upload-drop { min-height: 142px; border-radius: 8px; }.closet-panel, .identity-panel, .settings-panel, .family-panel { padding: clamp(18px, 2.6vw, 30px); }
.appearance-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }.appearance-panel h3 { margin: 0; font-size: 14px; }.appearance-panel > p { margin: 5px 0 12px; color: var(--muted); font-size: 11px; }.appearance-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.appearance-group { display: grid; gap: 7px; }.appearance-group > span { color: #777b76; font-size: 9px; font-weight: 700; letter-spacing: .09em; }.appearance-options { display: flex; flex-wrap: wrap; gap: 5px; }.appearance-chip { min-height: 28px; padding: 0 8px; border: 1px solid #dddcd6; border-radius: 999px; color: #5e625d; background: #fffefa; font-size: 10px; }.appearance-chip.is-selected { color: #2f4b3c; border-color: #96aa9d; background: #e7efe9; }
.identity-rules h2 { font-size: 24px; }.identity-rules p { font-size: 12px; }.rule-check { gap: 8px; }.rule-check li { font-size: 12px; }
.family-note { border-radius: 8px; }.settings-action { min-height: 145px; border-radius: 8px; }

@media (max-width: 960px) {
  .hero-luxe { grid-template-columns: 1fr; min-height: auto; padding-block: 50px 68px; }.hero-luxe .hero-copy { max-width: 640px; }.hero-stage-luxe { min-height: 570px; max-width: 640px; margin-inline: auto; }.hero-editorial-card { margin-right: 6%; }.hero-truth-card { left: 2%; }
  .app-sidebar { width: auto; }.today-layout { grid-template-columns: 1fr; }.person-panel, .recommendation-panel { min-height: 560px; }
  .style-library-head { display: grid; gap: 14px; }.style-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
  .site-header { min-height: 64px; }.hero-luxe { padding-top: 34px; }.hero-luxe h1 { font-size: clamp(32px, 10vw, 44px); }.hero-luxe .hero-lead { font-size: 13px; }.hero-facts { gap: 14px; margin-top: 28px; }.hero-stage-luxe { min-height: 482px; }.hero-gridline { inset: 4% 0 3% 4%; }.hero-editorial-card { width: min(78%, 286px); height: 456px; margin-right: 2%; }.hero-rotation-card { display: none; }.hero-truth-card { top: 18px; width: 145px; padding: 9px 10px; }.hero-truth-card p { font-size: 9px; }.principle { padding-block: 62px; }.flow, .family { padding-block: 62px; }.flow-grid-luxe { margin-top: 36px; }.flow-step { min-height: 258px; }.family-lookbook { min-height: 0; }.family-lookbook img { height: 380px; }
  .composer-modes { grid-template-columns: 1fr; gap: 8px; }.composer-mode { min-height: 66px; padding: 11px 13px; }.scenario-form .style-custom { grid-column: auto; }
  .today-layout { grid-template-columns: minmax(0, 1fr); }.person-panel, .recommendation-panel { min-width: 0; }.recommendation-panel { order: 1; min-height: auto; }.person-panel { order: 2; min-height: 510px; }.person-display { inset: 60px 15px 44px; }.person-panel:has(.stage-choice) .person-display { bottom: 92px; }.profile-stage { width: min(78%, 258px); height: min(100%, 408px); }.stage-carousel-button { width: 36px; height: 44px; }.stage-carousel-button.is-previous { left: 8px; }.stage-carousel-button.is-next { right: 8px; }.stage-choice { right: 18px; bottom: 18px; left: 18px; gap: 9px; }.stage-like-button { min-width: 100px; min-height: 44px; padding-inline: 14px; }.stage-choice small { font-size: 9px; }.wearing-stack { top: 65px; left: 21px; }.stage-demo-notice { right: 20px; bottom: 48px; max-width: 132px; }.appearance-controls { grid-template-columns: 1fr; }.render-actions { flex-direction: column; align-items: stretch; }.render-actions .button, .render-actions .quiet-action { width: 100%; }
  .style-library { padding-block: 62px; }.style-library-head { margin-bottom: 25px; }.style-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.style-card, .style-card-feature, .style-card-wide, .style-card-baby { grid-column: auto; grid-row: auto; }.style-card-copy { padding: 9px 10px 10px; }.style-card-copy h3 { font-size: 15px; }
}

/* Keep public navigation available on narrow screens without adding a second menu. */
@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; row-gap: 0; }
  .site-header nav { display: flex; grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 18px; padding: 1px 0 10px; overflow-x: auto; color: #5e625d; font-size: 10px; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; }
}
@media (max-width: 690px) {
  .site-header { min-height: 86px; }
  .site-header nav { display: flex; gap: 15px; padding-bottom: 8px; font-size: 9px; }
}

/* Handset-safe sizing: accommodate compact browser bars and notched displays. */
@media (max-width: 690px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-x: clip; }
  .site-header { width: min(calc(100% - 32px), 720px); min-height: calc(86px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .motion-intro, .motion-stage, .edit-strip, .style-library, .family-reframe, .experience-band .shell, .site-footer { width: min(calc(100% - 32px), 720px); }
}

@media (max-width: 360px) {
  .site-header nav { gap: 10px; }
}

/* Editorial full-body character grid. */
.stage-hero { padding: 56px 0 88px; overflow: hidden; color: #1b201d; background: linear-gradient(180deg, #f4f2ed 0%, #e9e9e3 100%); }
.stage-hero-copy { display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(310px, .65fr); gap: clamp(46px, 10vw, 172px); align-items: end; margin-bottom: 46px; }
.stage-hero-copy .eyebrow { color: #63766b; }.stage-hero-copy h1 { max-width: 690px; margin: 0; font-size: clamp(40px, 4.3vw, 64px); font-weight: 670; line-height: 1.03; letter-spacing: -.077em; }.stage-hero-copy h1 em { color: #637e70; font-style: normal; }
.stage-hero-side { display: grid; gap: 20px; max-width: 365px; }.stage-hero-side > p { margin: 0; color: #606662; font-size: 13px; line-height: 1.78; }.stage-hero-side .hero-actions { margin: 0; gap: 15px; }.stage-hero-side .text-action { font-size: 11px; }
.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stage-card { position: relative; min-width: 0; min-height: 495px; overflow: hidden; border: 1px solid rgba(29,37,32,.12); background: radial-gradient(circle at 52% 29%, rgba(255,255,255,.26), transparent 27%), #283630; box-shadow: 0 16px 32px rgba(20,28,24,.08); isolation: isolate; outline: none; }
.stage-card:focus-visible { outline: 2px solid #667f71; outline-offset: 4px; }
.stage-card::before { position: absolute; z-index: 0; inset: 12px; content: ""; border: 1px solid rgba(250,248,239,.18); pointer-events: none; }.stage-card::after { position: absolute; z-index: 2; top: 24%; bottom: 14%; left: 50%; width: 1px; content: ""; background: linear-gradient(transparent, rgba(255,255,255,.22), transparent); pointer-events: none; }
.stage-card-top { position: absolute; z-index: 3; top: 20px; right: 20px; left: 20px; display: flex; justify-content: space-between; gap: 10px; color: rgba(255,254,247,.76); font-size: 9px; font-weight: 700; letter-spacing: .115em; pointer-events: none; }.stage-card-top span:last-child { color: rgba(231,237,223,.57); }
.stage-card-copy { position: absolute; z-index: 3; right: 20px; bottom: 18px; left: 20px; color: #fffdf6; pointer-events: none; }.stage-card-copy h2 { margin: 0; font-size: 19px; font-weight: 630; letter-spacing: -.055em; }.stage-card-copy p { margin: 2px 0 0; color: rgba(255,253,245,.67); font-size: 10px; }
.stage-disclosure { margin-top: 16px; color: #71766f; font-size: 10px; line-height: 1.55; }

@media (max-width: 960px) {
  .stage-hero-copy { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }.stage-hero-side { max-width: 520px; }.stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stage-card { min-height: 520px; }
}
@media (max-width: 690px) {
  .stage-hero { padding-block: 38px 58px; }.stage-hero-copy { width: calc(100vw - 32px); gap: 16px; margin-bottom: 25px; }.stage-hero-copy h1 { font-size: clamp(33px, 10.2vw, 44px); }.stage-hero-side > p { font-size: 12px; }.stage-grid { width: calc(100vw - 32px); gap: 8px; }.stage-card { min-height: 318px; }.stage-card::before { inset: 8px; }.stage-card-top { top: 14px; right: 13px; left: 13px; font-size: 9px; letter-spacing: .06em; }.stage-card-copy { right: 13px; bottom: 12px; left: 13px; }.stage-card-copy h2 { font-size: 14px; }.stage-card-copy p { display: block; margin-top: 2px; font-size: 9px; line-height: 1.35; }.stage-disclosure { width: calc(100vw - 32px); margin-top: 12px; font-size: 9px; }
}

/* Editorial character stage: rich full-body photography, never a simulated mesh. */
.stage-hero { padding: 56px 0 88px; background: linear-gradient(180deg, #f5f3ee 0%, #eaebe5 100%); }
.stage-hero-copy { margin-bottom: 42px; }.stage-hero-copy .eyebrow { color: #63766b; }
.stage-hero-copy h1 { font-size: clamp(36px, 4vw, 58px); }.stage-hero-side > p { font-size: 12px; }
.stage-grid { gap: 13px; }
.stage-card { display: grid; grid-template-rows: 510px auto; min-height: 0; margin: 0; overflow: hidden; border-color: rgba(29,37,32,.12); background: #e6e3dc; box-shadow: 0 16px 32px rgba(20,28,24,.08); cursor: default; }
.stage-card:focus-visible { outline: 2px solid #667f71; outline-offset: 4px; }
.stage-card::before { z-index: 2; inset: 10px; border-color: rgba(255,255,252,.55); }.stage-card::after { content: none; }
.stage-card > img { position: relative; z-index: 1; display: block; width: 100%; height: 510px; min-height: 0; background: #e6e3dc; object-fit: contain; object-position: center bottom; filter: saturate(.88) contrast(1.02); transition: transform 700ms var(--easing), filter 500ms var(--easing); }
.stage-card:hover > img { filter: saturate(.97) contrast(1.035); transform: scale(1.012); }
.stage-card-top { z-index: 3; top: 18px; right: 18px; left: 18px; color: rgba(28,34,31,.72); font-size: 10px; letter-spacing: .1em; text-shadow: 0 1px 10px rgba(255,255,255,.5); }.stage-card-top span:last-child { color: rgba(45,58,50,.56); }
.stage-card-copy { position: relative; z-index: 3; right: auto; bottom: auto; left: auto; min-height: 76px; padding: 13px 16px 15px; color: #1f2521; background: #fffefd; pointer-events: auto; }.stage-card-copy h2 { font-size: 17px; }.stage-card-copy p { color: #72766f; font-size: 11px; }
.stage-card-forest { background: #ebe9df; }.stage-card-study { background: #d9d8d2; }.stage-card-city { background: #ded9cf; }.stage-card-courtyard { background: #e1e5df; }.stage-card-boy { background: #dce9e7; }.stage-card-girl { background: #e8e0d3; }
.stage-disclosure { margin-top: 15px; color: #747972; font-size: 10px; }

@media (max-width: 960px) { .stage-card { grid-template-rows: 470px auto; }.stage-card > img { height: 470px; } }
@media (max-width: 690px) { .stage-hero { padding-block: 38px 58px; }.stage-grid { gap: 8px; }.stage-card { grid-template-rows: 318px auto; }.stage-card > img { height: 318px; }.stage-card-top { top: 13px; right: 12px; left: 12px; font-size: 10px; letter-spacing: .05em; }.stage-card-copy { min-height: 69px; padding: 10px 11px 11px; }.stage-card-copy h2 { font-size: 14px; }.stage-card-copy p { font-size: 11px; line-height: 1.4; }.stage-disclosure { margin-top: 12px; } }

/* Public launch navigation. */
.site-header { position: relative; z-index: 20; width: min(1480px, calc(100vw - 72px)); min-height: 76px; }
.site-header nav { color: #5e625d; }
.site-header nav a { position: relative; padding-block: 4px; }
.site-header nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--easing); }
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.motion-showcase { padding: 90px 0 96px; color: #f7f4ed; background: #151c19; }
.motion-intro { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(380px, 1.45fr); gap: 38px; align-items: start; margin-bottom: 41px; }
.motion-intro .eyebrow { margin-top: 7px; color: #b8c4bb; }
.motion-intro > div { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.motion-intro h2 { max-width: 455px; margin: 0; color: #fffdf7; font-size: clamp(31px, 3.55vw, 52px); font-weight: 630; line-height: 1.06; letter-spacing: -.07em; }
.motion-intro p { max-width: 290px; margin: 0 0 4px; color: #b9c1bb; font-size: 12px; line-height: 1.72; }
.motion-intro p small { display: block; margin-top: 9px; color: #819086; font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.motion-stage { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(260px, .72fr); gap: 13px; align-items: stretch; }
.motion-feature, .motion-mini, .motion-note { position: relative; overflow: hidden; border: 1px solid rgba(243,239,228,.17); background: #202925; }
.motion-feature { height: 580px; min-height: 0; }
.motion-feature video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0e1412; }
.motion-caption { position: absolute; right: 23px; bottom: 21px; left: 23px; display: flex; align-items: end; gap: 9px; }
.motion-caption span, .motion-mini span { color: rgba(249,246,238,.68); font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.motion-caption strong { margin-right: auto; color: #fffef9; font-size: 19px; font-weight: 620; letter-spacing: -.055em; }
.motion-caption button, .motion-mini button { padding: 5px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.7); color: #fff; background: transparent; font-size: 10px; }
.motion-rail { display: grid; grid-template-rows: minmax(0, 1.12fr) minmax(0, .88fr); gap: 13px; height: 580px; min-height: 0; }
.motion-mini { min-height: 0; }
.motion-mini video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #111716; }
.motion-mini > div { position: absolute; right: 18px; bottom: 17px; left: 18px; display: grid; gap: 2px; }
.motion-mini strong { color: #fffdf8; font-size: 17px; font-weight: 620; letter-spacing: -.055em; }
.motion-mini button { width: fit-content; margin-top: 4px; }
.motion-note { display: flex; flex-direction: column; justify-content: end; min-height: 178px; padding: 23px; background: #536d5f; }
.motion-note span { color: #e4e9d6; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.motion-note p { max-width: 270px; margin: 12px 0 18px; color: #fbfbf4; font-size: 16px; font-weight: 560; line-height: 1.32; letter-spacing: -.04em; }
.motion-note a { width: fit-content; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.7); color: #f5f1e9; font-size: 11px; }
.motion-note b { margin-left: 5px; font-size: 15px; }

.edit-strip { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(440px, 1.12fr); gap: clamp(60px, 11vw, 175px); padding-block: 112px; }
.edit-strip-head h2 { margin: 0; color: #20211f; font-size: clamp(30px, 3.35vw, 48px); font-weight: 650; line-height: 1.1; letter-spacing: -.068em; }
.edit-points { border-top: 1px solid #d2d2cc; }
.edit-points article { display: grid; grid-template-columns: 39px 1fr minmax(150px, .7fr); gap: 16px; align-items: baseline; min-height: 94px; padding: 20px 0; border-bottom: 1px solid #d2d2cc; }
.edit-points span { color: #5b7668; font-size: 10px; font-weight: 700; }
.edit-points h3 { margin: 0; color: #242623; font-size: 16px; font-weight: 650; letter-spacing: -.045em; }
.edit-points p { margin: 0; color: #73766f; font-size: 11px; line-height: 1.65; }

.style-library { padding-block: 96px 110px; border-top: 1px solid #dcdcd5; }
.style-library-head { margin-bottom: 45px; }
.style-library-head h2 { color: #1e201e; font-size: clamp(31px, 3.45vw, 49px); font-weight: 650; }
.style-library-head > p { max-width: 310px; color: #666a65; font-size: 12px; }
.look-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 13px; }
.look-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #d8d7d1; background: #e5e3dd; box-shadow: 0 11px 28px rgba(29,33,30,.05); }
.look-tile img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: contain; object-position: center bottom; background: #e4e2dc; filter: saturate(.92) contrast(1.025); transition: transform 500ms var(--easing), filter 400ms var(--easing); }
.look-tile:hover img { filter: saturate(1) contrast(1.04); transform: scale(1.018); }
.look-tile > div { position: relative; z-index: 2; flex: 0 0 auto; min-height: 96px; padding: 14px 15px 15px; color: #222420; background: #fffefa; }
.look-tile span { display: block; color: #718078; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.look-tile h3 { margin: 3px 0 0; font-size: 17px; font-weight: 630; letter-spacing: -.05em; }
.look-tile p { margin: 2px 0 0; color: #777a74; font-size: 10px; }
.look-tile-cool { grid-column: span 5; }.look-tile-art { grid-column: span 3; }.look-tile-evening { grid-column: span 4; }.look-tile-mature { grid-column: span 4; }.look-tile-fresh { grid-column: span 5; }.look-tile-soft { grid-column: span 3; }
.look-tile-cool img, .look-tile-fresh img { min-height: 535px; }.look-tile-art img, .look-tile-soft img { min-height: 408px; }.look-tile-evening img, .look-tile-mature img { min-height: 468px; }

.family-reframe { grid-template-columns: minmax(320px, .84fr) minmax(370px, .86fr); gap: clamp(50px, 12vw, 184px); padding-block: 92px 112px; border-top: 1px solid #dcdcd5; }
.family-reframe h2 { color: #20221f; font-size: clamp(30px, 3.3vw, 47px); font-weight: 650; }
.family-reframe .family-copy > p:not(.eyebrow) { max-width: 388px; margin: 20px 0 24px; color: #6c706a; font-size: 13px; line-height: 1.72; }
.family-reframe .family-lookbook { box-shadow: 14px 19px 38px rgba(28,32,29,.1); }
.family-reframe .family-lookbook img { height: 485px; }
.experience-band { color: #f7f4ec; background: #1c2823; }
.experience-band .shell { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; min-height: 108px; }
.experience-band span { color: #b8c5ba; font-size: 9px; font-weight: 700; letter-spacing: .14em; }.experience-band p { margin: 0; font-size: 15px; letter-spacing: -.025em; }.experience-band button { padding: 0 0 4px; border: 0; border-bottom: 1px solid rgba(255,255,255,.75); color: #fffdf7; background: transparent; font-size: 12px; }.experience-band b { margin-left: 5px; font-size: 15px; }

@media (max-width: 960px) {
  .site-header { width: min(100% - 42px, 720px); }
  .motion-intro { grid-template-columns: 1fr; gap: 12px; }
  .motion-intro > div { align-items: start; }
  .motion-stage { grid-template-columns: 1.25fr .75fr; }
  .edit-strip { grid-template-columns: 1fr; gap: 43px; }
  .look-tile-cool { grid-column: span 7; }
  .look-tile-art { grid-column: span 5; }
  .look-tile-evening { grid-column: span 5; }
  .look-tile-mature { grid-column: span 7; }
  .look-tile-fresh { grid-column: span 7; }
  .look-tile-soft { grid-column: span 5; }
  .family-reframe { grid-template-columns: 1fr 1fr; gap: 42px; }
}

@media (max-width: 690px) {
  .site-header { width: calc(100vw - 32px); min-height: 86px; grid-template-columns: 1fr auto; }
  .site-header nav { display: flex; grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 15px; padding: 1px 0 8px; overflow-x: auto; color: #5e625d; font-size: 10px; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; }
  .site-header > .button { min-height: 44px; padding-inline: 12px; font-size: 10px; }
  .brand { font-size: 17px; }
  .motion-showcase { padding-block: 62px; }
  .motion-intro { width: calc(100vw - 32px); margin-bottom: 27px; }
  .motion-intro > div { display: grid; gap: 16px; }
  .motion-intro h2 { font-size: clamp(29px, 9.4vw, 40px); }
  .motion-intro p { font-size: 11px; }
  .motion-stage { grid-template-columns: 1fr; width: calc(100vw - 32px); }
  .motion-feature, .motion-feature video { min-height: 405px; height: 405px; }
  .motion-rail { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .motion-mini, .motion-mini video { height: 276px; min-height: 276px; }
  .motion-mini > div { right: 12px; bottom: 12px; left: 12px; }
  .motion-mini strong { font-size: 14px; }
  .motion-note { min-height: 276px; padding: 17px; }
  .motion-note p { font-size: 14px; }
  .edit-strip { width: calc(100vw - 32px); padding-block: 66px; }
  .edit-strip-head h2 { font-size: clamp(28px, 8.7vw, 38px); }
  .edit-points article { grid-template-columns: 29px 1fr; gap: 11px; min-height: 0; padding: 17px 0; }
  .edit-points p { grid-column: 2; }
  .style-library { width: calc(100vw - 32px); padding-block: 66px; }
  .style-library-head { margin-bottom: 26px; }
  .style-library-head h2 { font-size: clamp(29px, 9vw, 39px); }
  .look-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .look-tile, .look-tile-cool, .look-tile-art, .look-tile-evening, .look-tile-mature, .look-tile-fresh, .look-tile-soft { grid-column: auto; }
  .look-tile img, .look-tile-cool img, .look-tile-art img, .look-tile-evening img, .look-tile-mature img, .look-tile-fresh img, .look-tile-soft img { min-height: 292px; }
  .look-tile > div { min-height: 83px; padding: 10px; }
  .look-tile h3 { font-size: 14px; }
  .look-tile p { font-size: 9px; }
  .family-reframe { width: calc(100vw - 32px); grid-template-columns: 1fr; gap: 27px; padding-block: 66px; }
  .family-reframe h2 { font-size: clamp(28px, 8.8vw, 38px); }
  .family-reframe .family-lookbook img { height: 390px; }
  .experience-band .shell { width: calc(100vw - 32px); grid-template-columns: 1fr auto; gap: 7px 16px; min-height: 112px; padding-block: 20px; }
  .motion-caption button, .motion-mini button, .experience-band button { min-height: 44px; }
  .experience-band span { grid-column: 1 / -1; }
  .experience-band p { font-size: 13px; }
  .site-footer { width: calc(100vw - 32px); padding-block: 23px; font-size: 10px; }
}

/* Final handset hit areas and cold-start rendering budget. */
.motion-showcase, .edit-strip, .style-library, .family-reframe, .experience-band, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

@media (max-width: 690px) {
  .button,
  .site-header > .button,
  .brand,
  .text-action,
  .text-button,
  .site-footer a,
  .privacy-strip button,
  .back-link,
  .nav-item,
  .weather-pill,
  .select-field,
  .text-field,
  .scenario-form .select-field,
  .scenario-form .text-field,
  .appearance-chip,
  .scenario-form .button,
  .render-actions .button,
  .empty-state .button,
  .result-add-button,
  .garment-actions .wear-toggle,
  .garment-actions .garment-edit { min-height: 44px; }
  .site-header nav a,
  .motion-caption button,
  .motion-mini button,
  .experience-band button,
  .dialog-close,
  .avatar-button { min-width: 44px; min-height: 44px; }
  .brand,
  .text-action,
  .text-button,
  .site-footer a,
  .privacy-strip button,
  .back-link { display: inline-flex; align-items: center; }
  .app-sidebar .back-link { display: none; }
  .site-footer a { min-width: 44px; justify-content: center; }
  .dialog-close { width: 44px; height: 44px; }
  .avatar-button { width: 44px; height: 44px; }
  .motion-caption button,
  .motion-mini button,
  .experience-band button { padding-inline: 10px; }
}

/* ChuanDa workbench: a compact dashboard-and-closet rhythm inspired by
   established wardrobe tools, while retaining ChuanDa's own editorial tone. */
.app-shell { background: #f7f7f4; }
.app-header { position: sticky; z-index: 20; top: 0; height: 64px; padding-inline: clamp(18px, 3vw, 42px); border-color: #e4e4df; background: rgba(255,254,252,.94); }
.app-status { padding: 5px 9px; border: 1px solid #e5e5df; border-radius: 999px; color: #697069; background: #fbfbf8; font-size: 10px; }
.app-layout { grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100dvh - 64px); }
.app-sidebar { position: sticky; top: 64px; align-self: start; height: calc(100dvh - 64px); padding: 25px 14px 18px; border-color: #e4e4df; background: #fffefd; }
.nav-group { display: grid; gap: 3px; }
.nav-group-secondary { margin-top: 27px; }
.nav-section-label { margin: 0 9px 7px; color: #8a8f89; font-size: 9px; font-weight: 760; letter-spacing: .12em; }
.nav-item { min-height: 42px; padding: 10px 11px; border-radius: 8px; color: #667068; }
.nav-item:hover, .nav-item.is-active { color: #fffefa; background: #24352c; box-shadow: none; }
.nav-item span { font-size: 12px; font-weight: 680; }.nav-item small { font-size: 9px; color: #a4aaa4; }.nav-item.is-active small { color: #c5d1c7; }
.back-link { padding: 12px 10px; color: #7a817a; font-size: 11px; }
.app-main { padding: clamp(22px, 3.2vw, 46px); }
.app-view { max-width: 1320px; }
.view-heading { margin-bottom: 20px; }.view-heading h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.06em; }.view-heading p { max-width: 510px; color: #747872; font-size: 12px; line-height: 1.65; }
.today-summary { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; margin: 0 0 17px; }
.today-summary-card { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 94px; padding: 15px 16px; border: 1px solid #e1e1dc; border-radius: 10px; background: #fffefd; box-shadow: 0 5px 13px rgba(20,26,23,.018); }
.today-summary-card > span { color: #848983; font-size: 10px; font-weight: 700; letter-spacing: .04em; }.today-summary-card > strong { align-self: start; margin-top: 5px; color: #222824; font-size: 22px; font-weight: 650; letter-spacing: -.055em; }.today-summary-card > button { align-self: end; min-height: 29px; padding: 0; border: 0; color: #41594a; background: transparent; font-size: 10px; font-weight: 700; text-decoration: underline; text-decoration-color: #b9cabe; text-underline-offset: 4px; }
.today-summary-card.is-weather { border-color: #d3dfd5; background: #f2f6f1; }.today-summary-card.is-weather > strong { font-size: 17px; }
.composer-modes { gap: 10px; margin: 0 0 13px; }.composer-mode { min-height: 70px; padding: 12px 15px; border-radius: 10px; }.composer-mode strong { font-size: 13px; }.composer-mode small { font-size: 10px; }.composer-mode.is-primary { background: #26392e; }
.scenario-form { padding: 9px 10px 9px 14px; border: 1px solid #e0e1db; border-radius: 11px; background: #fffefd; }.scenario-form > label { color: #303a33; font-size: 12px; }.scenario-form > label small { color: #858a84; font-size: 10px; }.scenario-form .text-field, .scenario-form .select-field { border-color: #e3e4df; background: #fbfbf9; }.scenario-form .button { border-color: #bdcabe; color: #294536; background: #f6faf5; }
.today-layout { grid-template-columns: minmax(325px, .88fr) minmax(390px, 1.12fr); gap: 14px; }.person-panel, .recommendation-panel { min-height: 598px; border-color: #dfe0db; border-radius: 11px; }.person-panel { background: linear-gradient(135deg, #e2e8e0 0%, #f0eee8 58%, #e1ded6 100%); }.recommendation-panel { padding: 24px; }.panel-heading h2 { font-size: 22px; }.panel-heading p { font-size: 11px; }
.look-list { margin-top: 18px; gap: 8px; }.look-row { grid-template-columns: 38px minmax(0, 1fr); min-height: 70px; padding: 9px; border-radius: 8px; }.look-row:hover, .look-row.is-selected { border-color: #aab7ad; background: #f9fbf8; transform: none; }.look-index { width: 31px; height: 48px; border-radius: 5px; }.look-copy strong { font-size: 13px; }.look-copy span { white-space: normal; font-size: 10px; }.look-copy small { display: none; }
.look-rationale { margin-top: 10px; padding: 9px 11px; font-size: 10px; }.look-rationale summary { font-size: 10px; }
.generation-progress { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 14px; padding: 11px 12px; border: 1px solid #d7e1d8; border-radius: 8px; background: #f3f7f2; }.generation-progress > div { display: grid; gap: 1px; }.generation-progress > div span { color: #768178; font-size: 9px; font-weight: 700; letter-spacing: .08em; }.generation-progress > div strong { color: #3b5140; font-size: 11px; font-weight: 650; }.generation-progress-track { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #dce5dc; }.generation-progress-track i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #42604b; animation: chuanda-generation-sweep 1.5s ease-in-out infinite; }.generation-cancel { align-self: center; min-height: 30px; padding: 0; border: 0; color: #5a675c; background: transparent; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
@keyframes chuanda-generation-sweep { 0% { transform: translateX(-115%); } 52% { transform: translateX(165%); } 100% { transform: translateX(165%); } }
.stage-choice { flex-wrap: wrap; gap: 8px 11px; }.stage-like-button { min-width: 96px; background: #26392e; }.stage-preview-link, .stage-regenerate-link { min-height: 32px; padding: 0; border: 0; color: #3d5948; background: transparent; font-size: 10px; font-weight: 700; text-decoration: underline; text-decoration-color: #b5c5b8; text-underline-offset: 4px; }.stage-choice small { flex: 1 1 160px; }.stage-regenerate-link { margin-left: auto; }.stage-video-link { min-height: 32px; }
.render-actions { margin-top: 14px; }.render-actions .button { min-height: 39px; border-radius: 8px; }
.closet-panel, .identity-panel, .settings-panel, .family-panel { border-color: #dfe0db; border-radius: 11px; }.closet-panel .section-label, .family-panel .section-label { margin-top: 26px; }.section-label h2 { font-size: 17px; }.closet-grid { gap: 10px; }.garment-card { border-color: #e0e0dc; border-radius: 8px; }.garment-card:hover { border-color: #adb9b0; box-shadow: 0 8px 18px rgba(27,35,30,.07); }
.closet-filter { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 9px; margin-top: 16px; }.closet-filter .text-field, .closet-filter .select-field { min-height: 40px; border-color: #e1e2dc; background: #fbfbf9; font-size: 11px; }
.view-heading .view-toolbar .button { min-height: 38px; }

@media (max-width: 960px) {
  .app-layout { grid-template-columns: 180px minmax(0, 1fr); }.app-sidebar { padding-inline: 10px; }.nav-item { padding-inline: 9px; }.today-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.today-summary-card { min-height: 88px; padding: 12px; }.today-summary-card > strong { font-size: 18px; }.today-summary-card.is-weather > strong { font-size: 14px; }
}
@media (max-width: 690px) {
  .app-header { height: 58px; padding-inline: 16px; }.app-status { display: none; }.app-layout { display: block; min-height: auto; }.app-sidebar { position: static; display: flex; width: 100%; height: auto; padding: 8px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e4e4df; background: #fffefd; scrollbar-width: none; }.app-sidebar::-webkit-scrollbar { display: none; }.nav-group { display: contents; }.nav-group-secondary { margin: 0; }.nav-section-label { display: none; }.app-sidebar .nav-item { width: auto; min-width: max-content; min-height: 40px; padding: 9px 11px; }.nav-item small { display: none; }.app-main { padding: 18px 14px 32px; }.view-heading { display: grid; gap: 12px; margin-bottom: 17px; }.view-heading h1 { font-size: 28px; }.view-heading p { margin-top: 6px; font-size: 11px; }.weather-actions { margin: 0; }.weather-pill { min-height: 40px; padding: 7px 10px; font-size: 10px; }.weather-edit { min-height: 40px; }.today-summary { grid-template-columns: 1fr 1fr; gap: 8px; }.today-summary-card { min-height: 80px; padding: 11px; }.today-summary-card:last-child { grid-column: 1 / -1; min-height: 68px; }.today-summary-card > span { font-size: 9px; }.today-summary-card > strong { margin-top: 2px; font-size: 17px; }.today-summary-card.is-weather > strong { font-size: 13px; }.composer-modes { margin-bottom: 10px; }.scenario-form { padding: 12px; }.today-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }.person-panel { min-height: 485px; }.recommendation-panel { min-height: auto; padding: 18px; }.generation-progress { padding: 10px; }.generation-progress > div strong { font-size: 10px; }.stage-choice { right: 16px; bottom: 15px; left: 16px; }.stage-choice small { order: 4; flex-basis: 100%; }.stage-regenerate-link { margin-left: 0; }.render-actions { flex-flow: row wrap; }.render-actions .button { min-width: min(132px, 100%); flex: 1 1 132px; }.render-actions [data-delete-generated] { color: #7c463b; border-color: #d8bdb5; background: #fffaf8; }.closet-filter { grid-template-columns: 1fr; }.closet-filter .text-field, .closet-filter .select-field { min-height: 44px; }
}