/* Follow the approved case layout; retain landscape proportions for the desktop app. */
.room .ms-case { --ms-gutter: 104px; position: relative; padding: 4px 0 40px var(--ms-gutter); }
.ms-case, .ms-case *, .ms-role-dialog, .ms-role-dialog * { box-sizing: border-box; }
.ms-case, .ms-role-dialog { --ms-card: #fcfcfa; --ms-text: #161b24; --ms-muted: #6d7178; --ms-border: #e4e3df; --ms-blue: #0074dc; --ms-shadow: 0 12px 28px #24201c0c, 0 2px 6px #24201c03; }
:root[data-theme="night"] .ms-case, :root[data-theme="night"] .ms-role-dialog { --ms-card: #22262c; --ms-text: #f1f2f3; --ms-muted: #adb2ba; --ms-border: #3a4048; --ms-blue: #65b5ff; --ms-shadow: 0 12px 28px #0003; }
.ms-surface { background: var(--ms-card); border: 1px solid color-mix(in srgb, var(--ms-border) 25%, transparent); border-radius: 24px; box-shadow: var(--ms-shadow); color: var(--ms-text); }
.ms-ui-icon { display: block; flex: none; width: 21px; height: 21px; }
.ms-nav { position: absolute; left: 0; top: 165px; display: grid; gap: 18px; width: 90px; }
.ms-nav-line { position: absolute; left: 11px; top: 14px; bottom: 13px; width: 2px; background: color-mix(in srgb, var(--bg) 12%, transparent); }
.ms-nav button { position: relative; display: flex; align-items: center; width: fit-content; min-height: 32px; padding: 0 0 0 31px; border: 0; background: transparent; color: var(--ink-muted); font: 400 12px/1.5 var(--sans); cursor: pointer; }
.ms-nav-marker { position: absolute; z-index: 1; left: 0; top: var(--ms-nav-marker-y, 4px); width: 24px; height: 24px; border-radius: 50%; transform: none !important; transition: top .2s ease; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .ms-nav-marker { transition: none; } }
.ms-nav button.is-current { color: var(--bg); font-weight: 600; }
.ms-hero { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 24px; background: #f2e8d5 url("assets/youze/optimized/products-v1/images/demos/projects/moshu/hero-sunlit-v1.webp") center / cover no-repeat; color: #302e26; isolation: isolate; }
.ms-hero-copy { position: absolute; z-index: 2; left: 8%; top: 19%; width: 29%; }
.ms-case .ms-release-link { display: block; color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; }
.ms-platform-link { height: 100%; }
.ms-release-link:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 4px; }
.ms-hero-mascot { display: block; width: 24%; height: auto; margin-bottom: 4%; }
.room .ms-hero h1 { margin: 0; color: #352a17; font: 600 clamp(40px, 8.7cqw, 108px)/1.2 Georgia, "Songti SC", serif; letter-spacing: .08em; }
:root[lang="en"] .ms-hero h1 { font-size: clamp(36px, 6.5cqw, 80px); letter-spacing: .015em; }
.ms-hero-screen { position: absolute; z-index: 1; width: 61%; top: 16%; left: 36%; margin: 0; overflow: hidden; border: 1px solid #99958455; border-radius: 10px; box-shadow: 0 22px 38px #433d2c22, 0 4px 8px #433d2c12; }
.ms-hero-screen img { display: block; width: 100%; height: auto; }
.ms-study { container-type: inline-size; margin-top: 32px; }
.ms-meta { display: grid; grid-template-columns: 1.3fr .9fr .8fr; padding: 28px 0; margin-bottom: 20px; }
.ms-meta > section { min-width: 0; padding: 0 26px; }
.ms-meta > section + section { border-left: 1px solid var(--ms-border); }
.ms-meta-label { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 14px; color: var(--ms-muted); font: 500 14px/1.4 var(--sans); }
.ms-meta-label > button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; margin-left: auto; padding: 4px 0 4px 4px; border: 0; background: transparent; color: var(--ms-muted); font: 400 12px/1.4 var(--sans); white-space: nowrap; cursor: pointer; }
.ms-meta-label > button .ms-ui-icon { width: 14px; height: 14px; opacity: .65; }
.ms-meta-label > button:hover { color: var(--ms-blue); }
.room .ms-meta-value { margin: 0; max-width: none; color: var(--ms-text); font: 500 clamp(18px, 2.45cqw, 27px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .ms-meta-note { margin: 9px 0 0; max-width: none; color: var(--ms-muted); font: 400 clamp(11px, 1.5cqw, 15px)/1.6 var(--sans); }
.room .ms-release-link :is(h1, .ms-meta-label, .ms-meta-value, .ms-meta-note) { transition: color .16s ease; }
.room .ms-release-link:is(:hover, :focus-visible) :is(h1, .ms-meta-label, .ms-meta-value, .ms-meta-note) { color: var(--ms-blue); }
.room .ms-hero .ms-release-link:is(:hover, :focus-visible) h1 { color: #0074dc; }
@media (prefers-reduced-motion: reduce) { .room .ms-release-link :is(h1, .ms-meta-label, .ms-meta-value, .ms-meta-note) { transition: none; } }
.ms-pain-layout { display: grid; grid-template-columns: minmax(176px, 19%) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ms-pain-card { padding: 23px 15px 23px 22px; }
.ms-pain-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.room .ms-pain-heading h2 { margin: 0; color: var(--ms-muted); font: 500 14px/1.5 var(--sans); }
.ms-pain-heading > button { display: grid; place-items: center; flex: none; width: 32px; height: 36px; padding: 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.ms-pain-heading > button:hover { background: color-mix(in srgb, var(--ms-muted) 8%, transparent); }
.ms-pain-heading .ms-ui-icon { width: 20px; height: 20px; transform: rotate(180deg); }
.ms-pain-list { display: grid; gap: 6px; }
.ms-pain-list[hidden] { display: none; }
.ms-pain-list > button { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 64px; padding: 8px 0; border: 0; background: transparent; color: var(--ms-text); text-align: left; font-family: var(--sans); cursor: pointer; }
.ms-pain-list > button::before { content: ""; position: absolute; top: 50%; left: -12px; width: 3px; height: 36px; border-radius: 2px; transform: translateY(-50%); }
.ms-number { width: 26px; flex: none; color: var(--ms-muted); font: 400 16px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ms-pain-list > button > span:last-child { display: grid; gap: 4px; min-width: 0; }
.ms-pain-list strong { font: 500 clamp(14px, 1.65cqw, 18px)/1.45 var(--sans); }
.ms-pain-list small { color: var(--ms-muted); font: 400 clamp(12px, 1.3cqw, 14px)/1.5 var(--sans); }
.ms-pain-list > button:hover, .ms-pain-list > button.is-selected, .ms-pain-list > button.is-selected small, .ms-pain-list > button.is-selected .ms-number { color: var(--ms-blue); }
.ms-pain-list > button.is-selected::before { background: var(--ms-blue); }
.ms-pain-list > button.is-selected strong { font-weight: 600; }
.ms-detail-card { align-self: start; min-width: 0; padding: 28px; overflow: hidden; }
.room .ms-eyebrow { margin: 0 0 12px; color: var(--ms-blue); font: 400 14px/1.5 var(--sans); }
.room .ms-solution-copy h3 { margin: 0 0 12px; color: var(--ms-text); font: 600 clamp(21px, 2.55cqw, 28px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .ms-solution-copy > p:last-child { margin: 0; max-width: none; color: var(--ms-muted); font: 400 clamp(14px, 1.65cqw, 18px)/1.8 var(--sans); }
.ms-detail-card .ms-demo-stage { margin-top: 24px; }
.ms-demo-stage { position: relative; min-width: 0; width: 100%; }
.ms-video-frame { width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ms-border) 80%, transparent); border-radius: 12px; background: #fff; }
.ms-video-toggle { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; background: transparent; line-height: 0; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ms-video-toggle video { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: contain; background: #fff; pointer-events: none; }
.ms-captions { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; min-height: 68px; padding: 20px 8px 0; }
.ms-captions > span { color: var(--ms-text); font: 400 clamp(12px, 1.3cqw, 14px)/1.65 var(--sans); text-align: center; }
.ms-cue-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #92958b; }
.ms-cue-lines path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .72; }
.ms-cue-lines circle { fill: currentColor; stroke: var(--ms-card); stroke-width: 1; }
.room .ms-video-error { margin: 12px 0 0; color: var(--ms-muted); font: 400 13px/1.5 var(--sans); }
.ms-video-error a { color: var(--ms-blue); }
.ms-pain-layout[data-collapsed="true"] { grid-template-columns: 54px minmax(0, 1fr); }
.ms-pain-layout[data-collapsed="true"] .ms-pain-card { align-self: start; padding: 8px; }
.ms-pain-layout[data-collapsed="true"] .ms-pain-heading { margin: 0; }
.ms-pain-layout[data-collapsed="true"] .ms-pain-heading h2 { display: none; }
.ms-pain-layout[data-collapsed="true"] .ms-pain-heading .ms-ui-icon { transform: none; }
.ms-companion-solution { display: grid; }
.ms-companion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 46px; }
.ms-companion-scene { position: relative; min-width: 0; }
.ms-companion-scene + .ms-companion-scene::before { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ms-border) 70%, transparent); }
.room .ms-companion-scene h4 { margin: 0 0 22px; color: var(--ms-muted); font: 400 clamp(14px, 1.65cqw, 18px)/1.5 var(--sans); }
.ms-companion-solution .ms-demo-stage { margin-top: 0; }
.ms-companion-scene .ms-video-frame { border: 0; background: transparent; }
.ms-companion-scene .ms-video-toggle { aspect-ratio: 4 / 5; }
.ms-companion-scene .ms-cue-lines { z-index: 1; }
.room .ms-companion-caption { position: relative; margin: 60px 0 0; min-height: 46px; max-width: none; color: var(--ms-text); font: 400 clamp(12px, 1.3cqw, 14px)/1.7 var(--sans); text-align: center; }
.ms-companion-playback { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 42px; color: var(--ms-muted); font: 400 12px/1.6 var(--sans); }
.ms-companion-playback button { display: grid; place-items: center; width: 36px; height: 36px; padding: 10px; border: 1px solid var(--ms-border); border-radius: 50%; background: transparent; cursor: pointer; }
.ms-companion-playback button:hover { background: color-mix(in srgb, var(--ms-muted) 8%, transparent); }
.ms-companion-playback .ms-ui-icon { width: 14px; height: 14px; opacity: .7; filter: brightness(.35); }
:root[data-theme="night"] .ms-companion-playback .ms-ui-icon { filter: brightness(.85); }
.ms-role-dialog { position: fixed; inset: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 0; padding: 25px 26px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ms-border); border-radius: 18px; background: var(--ms-card); color: var(--ms-text); box-shadow: 0 14px 55px #151c2630; font-family: var(--sans); }
.ms-role-dialog[hidden] { display: none; }
.ms-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.ms-dialog-head h2 { margin: 0; font: 500 19px/1.4 var(--sans); }
.ms-dialog-head button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 7px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ms-role-dialog dl { display: grid; gap: 18px; margin: 0; }
.ms-role-dialog dl > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; }
.ms-role-dialog dt { font: 500 14px/1.8 var(--sans); }
.ms-role-dialog dd { margin: 0; color: var(--ms-muted); font: 400 14px/1.8 var(--sans); }
.ms-role-basis { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ms-border); color: var(--ms-muted); font: 400 12px/1.7 var(--sans); }
.ms-case button:focus-visible, .ms-role-dialog button:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 4px; }
/* The pool's off-screen GSAP reveals must not remove controls from keyboard navigation. */
.ms-case button { visibility: visible !important; }
.ms-case button:focus-visible { opacity: 1 !important; }
:root[data-theme="night"] .ms-meta .ms-ui-icon, :root[data-theme="night"] .ms-pain-heading .ms-ui-icon, :root[data-theme="night"] .ms-role-dialog .ms-ui-icon { filter: invert(1); }
@container (max-width: 760px) {
  .ms-meta { grid-template-columns: 1fr 1fr; padding: 23px 0; }
  .ms-meta > section { padding: 0 22px; }
  .ms-meta > section:first-child { grid-column: 1 / -1; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ms-border); }
  .ms-meta > section:nth-child(2) { border-left: 0; }
  .room .ms-meta-value { font-size: 21px; }
  .room .ms-meta-note { font-size: 13px; }
  .ms-pain-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
  .ms-pain-card { padding-left: 18px; }
  .ms-pain-list > button { gap: 8px; }
  .ms-detail-card { padding: 22px; }
  .ms-cue-lines { display: none; }
  .ms-companion-grid { gap: 24px; }
  .ms-companion-scene + .ms-companion-scene::before { left: -12px; }
  .ms-companion-scene .ms-cue-lines { display: block; }
  .ms-companion-grid { margin-top: 34px; }
  .room .ms-companion-caption { margin-top: 48px; }
}
@container (max-width: 530px) {
  .ms-hero { aspect-ratio: 4 / 5; border-radius: 18px; background-position: 38% center; }
  .ms-hero-copy { top: 9%; left: 8%; width: 84%; }
  .ms-hero-mascot { width: 48px; margin: 0 0 10px; }
  .room .ms-hero h1 { font-size: 44px; }
  .ms-hero-screen { width: 90%; left: 7%; top: 40%; border-radius: 6px; }
  .ms-meta, .ms-pain-card, .ms-detail-card { border-radius: 18px; }
  .ms-meta > section { padding-left: 18px; padding-right: 18px; }
  .room .ms-meta-value { font-size: 19px; }
  .ms-pain-layout { grid-template-columns: minmax(0, 1fr); }
  .ms-pain-card { padding: 15px 20px 14px; }
  .ms-pain-heading { margin-bottom: 5px; }
  .ms-pain-list { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
  .ms-pain-list > button { min-height: 60px; gap: 8px; }
  .ms-number { width: 22px; font-size: 14px; }
  .ms-pain-list strong { font-size: 15px; }
  .ms-pain-list small { font-size: 12px; }
  .ms-detail-card { padding: 22px 16px 16px; }
  .room .ms-solution-copy h3 { font-size: 21px; }
  .room .ms-solution-copy > p:last-child { font-size: 15px; }
  .ms-detail-card .ms-demo-stage { margin-top: 18px; }
  .ms-video-frame { border-radius: 8px; }
  .ms-captions { min-height: 72px; gap: 12px; padding: 16px 0 0; }
  .ms-captions > span { font-size: 12px; }
  .ms-pain-layout[data-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
  .ms-pain-layout[data-collapsed="true"] .ms-pain-card { width: fit-content; padding: 5px 9px; }
  .ms-companion-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
  .ms-companion-scene, .ms-companion-scene:first-child, .ms-companion-scene:last-child { padding: 0; }
  .ms-companion-scene + .ms-companion-scene { padding-top: 26px; border-top: 1px solid var(--ms-border); }
  .ms-companion-scene + .ms-companion-scene::before { display: none; }
  .room .ms-companion-scene h4 { margin-bottom: 14px; font-size: 16px; }
  .ms-companion-scene .ms-video-frame { max-width: 340px; margin-inline: auto; }
  .room .ms-companion-caption { margin-top: 48px; min-height: 0; font-size: 14px; }
  .ms-companion-playback { margin-top: 28px; }
}
@media(max-width:859px) { .room .ms-case { --ms-gutter: 0px; } .ms-nav { display: none; } .ms-study { margin-top: 24px; } }