@media (max-width: 780px) {
  body.b-mobile-home {
    --home-paper:#fffaf7;
    --home-surface:#fff;
    --home-ink:#352734;
    --home-muted:#6a5263;
    --home-accent:#893556;
    --home-rule:#eadce4;
    --home-tint:#f4e5ed;
    --home-serif:"Noto Serif SC", "Songti SC", SimSun, serif;
    --home-sans:"Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    --home-ease:cubic-bezier(.22,1,.36,1);
    background:var(--home-paper);
  }
  body.b-mobile-home .app-shell, body.b-mobile-home #mobile-nav.tabs {
    color:var(--home-ink);
    font:medium var(--home-sans);
    -webkit-font-smoothing:auto;
  }
  body.b-mobile-home .app-shell { width:min(100%,460px); margin-inline:auto; }
  body.b-mobile-home #main { max-width:none; margin:0; padding:0; min-height:0; outline:none; }
  body.b-mobile-home :is(#review,#rooms,#challenge,#looks) { scroll-margin-top:68px; }

  body.b-mobile-home :where(.site-header,#main,.page-end,.tabs) button {
    appearance:none;
    border:0;
    background:none;
    color:inherit;
    padding:0;
    font:inherit;
  }
  body.b-mobile-home :where(.site-header,#main,.tabs) svg { display:block; stroke-width:1.55; }
  body.b-mobile-home :where(.site-header,#main,.page-end,.tabs) :is(button,a,.room-track):focus-visible {
    outline:2px solid var(--home-accent);
    outline-offset:2px;
  }

  body.b-mobile-home #main .pad { margin-inline:16px; }
  body.b-mobile-home #main .eyebrow { display:block; color:var(--home-accent); font-size:10px; font-weight:700; letter-spacing:.09em; }
  body.b-mobile-home #main .eyebrow::before { content:none; }
  body.b-mobile-home .topbar.site-header {
    position:sticky;
    height:auto;
    top:0;
    z-index:10;
    min-height:54px;
    padding:env(safe-area-inset-top,0px) 16px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0;
    border-bottom:1px solid var(--home-rule);
    background:var(--home-paper);
  }
  body.b-mobile-home .site-header .brand {
    display:flex;
    align-items:baseline;
    gap:5px;
    margin:0;
    color:var(--home-ink);
    font:700 24px/1 var(--home-serif);
    letter-spacing:-.035em;
    text-decoration:none;
  }
  body.b-mobile-home .site-header .brand span { width:6px; height:6px; border-radius:50%; background:var(--home-accent); }
  body.b-mobile-home .profile-button { display:grid; place-items:center; width:40px; height:42px; }
  body.b-mobile-home .profile-button svg { width:20px; height:20px; }

  body.b-mobile-home .service { margin-top:15px; }
  body.b-mobile-home .service .cta {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:66px;
    padding:10px 14px;
    border-radius:12px;
    background:#71364d;
    color:#fff8f4;
    text-align:left;
    transition:transform 170ms var(--home-ease), background-color 170ms ease;
  }
  body.b-mobile-home .service .cta:active { transform:scale(.985); background:#5f2b40; }
  body.b-mobile-home .service-icon {
    flex:none;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#ffffff1b;
  }
  body.b-mobile-home .service-copy { flex:1; min-width:0; display:grid; gap:3px; }
  body.b-mobile-home .service-label { font-size:16px; font-weight:700; line-height:1.25; }
  body.b-mobile-home .service-caption { color:#f6dfe9; font-size:11px; line-height:1.35; }
  body.b-mobile-home .section-head button svg, body.b-mobile-home .room-copy button svg, body.b-mobile-home .cover-copy button svg { flex:none; width:16px; height:16px; }
  body.b-mobile-home .service-icon svg { width:21px; height:21px; }
  body.b-mobile-home .service .cta > svg { flex:none; width:18px; height:18px; }
  body.b-mobile-home .service .cta:focus-visible { outline:2px solid #71364d; outline-offset:3px; }

  body.b-mobile-home .section { margin-top:28px; }
  body.b-mobile-home .rooms-section { margin-top:17px; }
  body.b-mobile-home .rooms-section .section-head { align-items:center; margin-bottom:6px; }
  body.b-mobile-home .rooms-section .text-action { min-height:44px; }
  body.b-mobile-home .section-head { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:10px; }
  body.b-mobile-home .section-head h2 { margin-top:4px; font:700 26px/1.18 var(--home-serif); letter-spacing:-.025em; }
  body.b-mobile-home .text-action { display:flex; align-items:center; gap:4px; min-height:42px; color:var(--home-accent); font-size:12px; font-weight:700; }

  body.b-mobile-home .room-track {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(74vw,286px);
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    scrollbar-width:none;
    padding-inline:16px;
    padding-bottom:3px;
  }
  body.b-mobile-home .room-track::-webkit-scrollbar { display:none; }
  body.b-mobile-home .room-card {
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid var(--home-rule);
    border-radius:13px;
    background:var(--home-surface);
  }
  body.b-mobile-home .room-photo {
    height:114px;
    position:relative;
    overflow:hidden;
    background:#eed1d8;
  }
  body.b-mobile-home .room-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#3c26368c,transparent 62%); }
  body.b-mobile-home .room-card.cool .room-photo { background:#ced8f2; }
  body.b-mobile-home .room-card.sand .room-photo { background:#decac1; }
  body.b-mobile-home .room-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 41%; }
  body.b-mobile-home .room-card.cool img { object-position:50% 31%; }
  body.b-mobile-home .room-card.sand img { object-position:50% 34%; }
  body.b-mobile-home .room-photo span {
    position:absolute;
    z-index:1;
    left:10px;
    bottom:10px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
  }
  body.b-mobile-home .room-copy { padding:10px 10px 8px; }
  body.b-mobile-home .room-copy h3 { font:700 16px/1.25 var(--home-serif); overflow-wrap:anywhere; }
  body.b-mobile-home .room-copy p { margin-top:5px; color:var(--home-muted); font-size:10px; }
  body.b-mobile-home .room-copy button { display:flex; align-items:center; gap:4px; color:var(--home-accent); margin-top:3px; min-height:30px; font-size:11px; font-weight:700; }
  body.b-mobile-home .room-copy button svg { width:13px; }

  body.b-mobile-home .cover-motion {
    --scroll-progress:1;
    height:258px;
    isolation:isolate;
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:#1b1f35;
    color:#fff;
  }
  body.b-mobile-home .cover-motion img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 34%;
    transform:translateY(calc((1 - var(--scroll-progress)) * 12px)) scale(calc(1.06 + var(--scroll-progress) * .14));
  }
  body.b-mobile-home .cover-motion::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#171728ed 0%,#17172889 48%,#17172813 100%);
    opacity:calc(.73 + var(--scroll-progress) * .27);
  }
  body.b-mobile-home .cover-copy {
    position:absolute;
    z-index:1;
    inset:auto 13px 15px;
    transform:translateY(calc((1 - var(--scroll-progress)) * 16px));
  }
  body.b-mobile-home .cover-copy span { font-size:10px; letter-spacing:.12em; color:#f6ddea; }
  body.b-mobile-home .cover-copy h3 { margin-top:8px; font:700 34px/1.1 var(--home-serif); letter-spacing:-.035em; }
  body.b-mobile-home .cover-copy button {
    display:flex;
    align-items:center;
    gap:6px;
    min-height:33px;
    margin-top:12px;
    padding:0 9px;
    border:1px solid #fff9;
    border-radius:5px;
    color:#fff;
    font-size:11px;
  }
  body.b-mobile-home .cover-copy button svg { width:12px; }
  body.b-mobile-home .look-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body.b-mobile-home .look-card { overflow:hidden; border:1px solid var(--home-rule); background:var(--home-surface); border-radius:9px; }
  body.b-mobile-home .look-image { width:100%; display:block; overflow:hidden; background:var(--home-tint); }
  body.b-mobile-home .look-image :is(img,video) { display:block; width:100%; height:auto; aspect-ratio:1 / 1.12; object-fit:cover; object-position:50% 32%; }
  body.b-mobile-home .look-copy { padding:8px 8px 5px; }
  body.b-mobile-home .look-copy>p { color:var(--home-accent); font-size:9px; }
  body.b-mobile-home .look-copy h3 { margin-top:4px; min-height:35px; font-size:12px; line-height:1.45; font-weight:700; overflow-wrap:anywhere; }
  body.b-mobile-home .like { display:flex; align-items:center; gap:4px; min-height:33px; color:var(--home-muted); font-size:10px; }
  body.b-mobile-home .like svg { width:14px; height:14px; }
  body.b-mobile-home .like[aria-pressed="true"] { color:var(--home-accent); }
  body.b-mobile-home .like[aria-pressed="true"] svg { fill:var(--home-tint); }

  body.b-mobile-home .page-footer.page-end {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:28px 16px 0;
    padding:16px 0 86px;
    border-top:1px solid var(--home-rule);
    color:var(--home-muted);
    font-size:11px;
    letter-spacing:normal;
  }
  body.b-mobile-home .page-end > span:nth-child(2) { display:block; }
  body.b-mobile-home .page-end b { color:var(--home-ink); font:700 20px/1 var(--home-serif); }
  body.b-mobile-home #mobile-nav.tabs {
    position:fixed;
    z-index:12;
    bottom:0;
    left:50%;
    right:auto;
    height:auto;
    width:min(100%,460px);
    min-height:56px;
    transform:translateX(-50%);
    display:grid;
    align-items:stretch;
    justify-content:normal;
    backdrop-filter:none;
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:3px 3px env(safe-area-inset-bottom,0px);
    background:var(--home-paper);
    border-top:1px solid var(--home-rule);
  }
  body.b-mobile-home #mobile-nav.tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:48px; min-width:auto; color:var(--home-muted); font-size:10px; }
  body.b-mobile-home #mobile-nav.tabs button[aria-current] { color:var(--home-accent); font-weight:700; }
  body.b-mobile-home #mobile-nav.tabs button svg { width:19px; height:19px; }
  body.b-mobile-home .will-enter :is(.section-head,.room-track,.cover-motion,.look-grid) {
    transition:opacity 430ms var(--home-ease), transform 430ms var(--home-ease);
  }
  body.b-mobile-home .will-enter:not(.entered):not(:focus-within) :is(.section-head,.room-track,.cover-motion,.look-grid) {
    opacity:0;
    transform:translateY(11px);
  }
  body.b-mobile-home .will-enter :is(.room-track,.cover-motion,.look-grid) { transition-delay:75ms; }
  @media(max-width:345px) {
  }
  @media(prefers-reduced-motion:reduce) {
    body.b-mobile-home .will-enter :is(.section-head,.room-track,.cover-motion,.look-grid) { opacity:1 !important; transform:none !important; transition:none; }
    body.b-mobile-home .cover-motion img, body.b-mobile-home .cover-copy { transform:none; }
    body.b-mobile-home .service .cta { transition:none; }
  }

  body.b-mobile-home .hero-b {
    --b-plum: #432a43;
    --b-berry: #8d3e67;
    --b-muted: #6e4562;
    box-sizing: border-box;
    container-type: inline-size;
    isolation: isolate;
    position: relative;
    width: 100%;
    height: 321px;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 6% 52%, #ffebe0 0%, #ffebe000 52%),
      linear-gradient(128deg, #f7e4ee 4%, #ead9f2 72%, #e2cced 100%);
    color: var(--b-plum);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  body.b-mobile-home .hero-b *, body.b-mobile-home .hero-b *::before, body.b-mobile-home .hero-b *::after {
    box-sizing: border-box;
  }

  body.b-mobile-home .hero-b h2, body.b-mobile-home .hero-b p {
    margin: 0;
  }

  body.b-mobile-home .hero-b__orbit {
    position: absolute;
    z-index: -1;
    inset: 116px -30% -115px 22%;
    border: 1px solid #fff7fbbe;
    border-radius: 50%;
    background: #f9f2ff38;
    transform: rotate(-26deg);
  }

  body.b-mobile-home .hero-b__orbit::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid #fff7fb87;
    border-radius: inherit;
  }

  body.b-mobile-home .hero-b__sparkle {
    position: absolute;
    top: 14px;
    right: 18px;
    width: clamp(44px, 16cqi, 67px);
    height: auto;
    pointer-events: none;
    stroke: none;
    stroke-linecap: butt;
    stroke-linejoin: miter;
  }

  body.b-mobile-home .hero-b__intro {
    position: absolute;
    top: 18px;
    left: clamp(14px, 5.4cqi, 24px);
  }

  body.b-mobile-home .hero-b .hero-b__kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--b-berry);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
  }

  body.b-mobile-home .hero-b__kicker span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a94d7c;
    box-shadow: 0 0 0 3px #a94d7c1e;
  }

  body.b-mobile-home .hero-b .hero-b__intro h2 {
    margin-top: 8px;
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    font-size: clamp(25px, 8.9cqi, 39px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.065em;
    white-space: nowrap;
  }

  body.b-mobile-home .hero-b__intro h2 em {
    color: var(--b-berry);
    font-style: normal;
  }

  body.b-mobile-home .hero-b .hero-b__chat {
    position: absolute;
    top: 88px;
    left: clamp(15px, 5.6cqi, 24px);
    padding: 7px 12px;
    border: 1px solid #f4dbe7;
    border-radius: 11px 11px 11px 3px;
    background: #fffbf7;
    box-shadow: 0 3px 9px #7142680b;
    color: var(--b-muted);
    font-size: 12px;
    font-weight: 650;
    transform-origin: 0 100%;
  }

  body.b-mobile-home .hero-b__looks {
    position: absolute;
    inset: 137px clamp(17px, 8.1cqi, 38px) auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(13px, 5cqi, 24px);
  }

  body.b-mobile-home .hero-b__sleeve--warm {
    --b-tilt: -6deg;
    --b-start-tilt: -14deg;
    --b-start-x: -24px;
    --b-delay: 190ms;
    --b-chip: #f6e0d9;
    --b-chip-ink: #734739;
    margin-top: 8px;
  }

  body.b-mobile-home .hero-b__sleeve--bold {
    --b-tilt: 7deg;
    --b-start-tilt: 16deg;
    --b-start-x: 24px;
    --b-delay: 320ms;
    --b-chip: #eddff3;
    --b-chip-ink: #704181;
  }

  body.b-mobile-home .hero-b__card {
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    padding: 5px 5px 6px;
    border: 1px solid #edd9e5;
    border-radius: 4px;
    background: #fffaf6;
    box-shadow: 0 8px 20px #6034552c, 0 1px 2px #6034551f;
    color: var(--b-plum);
    cursor: pointer;
    font: inherit;
    text-align: left;
    touch-action: manipulation;
    transform: rotate(var(--b-tilt));
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms, border-color 180ms;
  }

  body.b-mobile-home .hero-b__card img {
    display: block;
    width: 100%;
    height: 105px;
    border-radius: 1px;
    background: var(--b-chip);
    object-fit: cover;
  }

  body.b-mobile-home .hero-b__sleeve--warm img { object-position: 50% 26%; }
  body.b-mobile-home .hero-b__sleeve--bold img { object-position: 50% 37%; }

  body.b-mobile-home .hero-b__caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 3px 0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  body.b-mobile-home .hero-b__caption b {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--b-chip);
    color: var(--b-chip-ink);
    font: 700 10px/1 system-ui, sans-serif;
  }

  body.b-mobile-home .hero-b__check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid #fff9f7;
    border-radius: 50%;
    background: var(--b-berry);
    color: white;
    font: 700 13px/1 system-ui, sans-serif;
    opacity: 0;
    transform: scale(.5);
  }

  @media (hover: hover) {
    body.b-mobile-home .hero-b__card:hover {
      transform: translateY(-4px) rotate(var(--b-tilt));
    }
  }

  body.b-mobile-home .hero-b__card:active {
    transform: scale(.96) rotate(var(--b-tilt));
  }

  body.b-mobile-home .hero-b__card:focus-visible {
    outline: 2px solid var(--b-berry);
    outline-offset: 4px;
  }

  body.b-mobile-home .hero-b__card[aria-pressed="true"] {
    z-index: 1;
    border-color: var(--b-berry);
    box-shadow: 0 0 0 2px #af6f9790, 0 11px 20px #60345537;
    transform: translateY(-5px) rotate(0);
  }

  body.b-mobile-home .hero-b__card[aria-pressed="true"] .hero-b__check {
    opacity: 1;
    transform: scale(1);
    animation: yidian-b-select 440ms cubic-bezier(.2, .75, .35, 1);
  }

  body.b-mobile-home .hero-b.look-restored .hero-b__card[aria-pressed="true"] .hero-b__check {
    animation: none;
  }

  body.b-mobile-home .hero-b__foot {
    position: absolute;
    inset: auto clamp(14px, 5cqi, 24px) 9px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  body.b-mobile-home .hero-b__rule {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, #b98bac 0 2px, transparent 2px 5px);
  }

  body.b-mobile-home .hero-b .hero-b__result {
    min-height: 23px;
    padding: 4px 9px;
    border: 1px solid #fff8f1;
    border-radius: 20px;
    background: #fff1e6;
    color: var(--b-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
  }

  body.b-mobile-home .hero-b.hero-playing .hero-b__intro {
    animation: yidian-b-rise 410ms cubic-bezier(.22, 1, .36, 1) backwards;
  }

  body.b-mobile-home .hero-b.hero-playing .hero-b__chat {
    animation: yidian-b-chat 440ms 120ms cubic-bezier(.2, .78, .3, 1.16) backwards;
  }

  body.b-mobile-home .hero-b.hero-playing .hero-b__sleeve {
    animation: yidian-b-card-in 640ms var(--b-delay) cubic-bezier(.18, 1, .32, 1) backwards;
  }

  body.b-mobile-home .hero-b.hero-playing .hero-b__sparkle {
    animation: yidian-b-twinkle 610ms 250ms ease-out backwards;
  }

  body.b-mobile-home .hero-b.hero-playing .hero-b__foot {
    animation: yidian-b-rise 360ms 470ms ease-out backwards;
  }

  @keyframes yidian-b-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes yidian-b-chat {
    from { opacity: 0; transform: translateY(6px) scale(.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes yidian-b-card-in {
    from { opacity: 0; transform: translate(var(--b-start-x), 20px) rotate(var(--b-start-tilt)); }
    to { opacity: 1; transform: translate(0, 0) rotate(0); }
  }

  @keyframes yidian-b-twinkle {
    0% { opacity: 0; transform: scale(.62) rotate(-14deg); }
    55% { opacity: 1; transform: scale(1.12) rotate(5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  @keyframes yidian-b-select {
    0% { opacity: 0; transform: scale(.5); box-shadow: 0 0 0 0 #ab507dcc; }
    56% { opacity: 1; transform: scale(1.16); box-shadow: 0 0 0 5px #ab507d40; }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 9px #ab507d00; }
  }

  @media (prefers-reduced-motion: reduce) {
    body.b-mobile-home .hero-b.hero-playing .hero-b__intro,
    body.b-mobile-home .hero-b.hero-playing .hero-b__chat,
    body.b-mobile-home .hero-b.hero-playing .hero-b__sleeve,
    body.b-mobile-home .hero-b.hero-playing .hero-b__sparkle,
    body.b-mobile-home .hero-b.hero-playing .hero-b__foot,
    body.b-mobile-home .hero-b__card[aria-pressed="true"] .hero-b__check {
      animation: none;
    }

    body.b-mobile-home .hero-b__card { transition: none; }
  }
}