/* Keep the original room, case frame and pool camera. Only JianShan gets this hero. */
.room .jn-case { --jn-gutter: 104px; position: relative; padding: 4px 0 40px var(--jn-gutter); }
.jn-case, .jn-case * { box-sizing: border-box; }
.jn-case .jn-hero-frame { margin: 0; }
/* The reference composition contains only the brand lockup and the two devices. */
.jn-hero { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; container-type: inline-size; background: #e3cba9 url("assets/youze/optimized/products-v1/images/demos/projects/guyang/hero-courtyard-v1.webp") center / cover no-repeat; color: #35261d; isolation: isolate; }
.jn-hero-copy { position: absolute; z-index: 3; left: 16.9%; top: 37.1%; width: 30.8%; }
.jn-brand { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; user-select: none; -webkit-user-select: none; }
.jn-brand canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.jn-phone { position: absolute; aspect-ratio: 511 / 968; margin: 0; line-height: 0; z-index: 2; transform-origin: center; backface-visibility: hidden; animation: jn-hover 7s ease-in-out infinite alternate; animation-play-state: paused; filter: drop-shadow(3px 5px 1px #30261e85) drop-shadow(8px 16px 13px #211a1455); }
.jn-phone-home { width: 25.5%; top: 9%; left: 49.5%; transform: perspective(1400px) rotateY(-9deg) rotateZ(-7deg); animation-delay: -2s; }
.jn-phone-detail { width: 22%; top: 21%; left: 73.4%; transform: perspective(1400px) rotateY(-12deg) rotateZ(8deg); animation-delay: -5s; }
/* The supplied iPhone bezel owns the hardware, camera and Dynamic Island. */
.jn-phone .jn-phone-bezel { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.jn-phone-screen { position: absolute; left: 11.5459883%; top: 5.9917355%; width: 76.9080235%; height: 88.0165289%; overflow: hidden; border-radius: 10.69% / 4.93%; background: #fff; }
.jn-phone-status { position: absolute; inset: 0 0 auto; height: 6.34%; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5%; color: #111; background: #fff; font: 600 .82cqw/1 system-ui, sans-serif; }
.jn-phone-status img { display: block; width: 22%; height: auto; }
.jn-phone-content { position: absolute; inset: 6.34% 0 0; background: #fff; }
.jn-phone-content > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.jn-phone-home-indicator { position: absolute; bottom: 1.25%; left: 33%; width: 34%; height: .55%; border-radius: 999px; background: #111; }
.jn-detail-crop { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
/* Source is untouched. Display only x=10,y=88,w=686,h=1350 of the 704x1498 simulator capture. */
.jn-detail-crop > img { position: absolute; width: 102.6239067%; height: 110.962963%; max-width: none; left: -1.45772595%; top: -6.51851852%; display: block; }
.jn-case[data-motion="running"] .jn-phone { animation-play-state: running; }
@keyframes jn-hover { from { translate: 0 0; } to { translate: 0 -9px; } }
.jn-motion-toggle { position: absolute; z-index: 5; right: 15px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 9px; border: 1px solid #fff8e84d; border-radius: 50%; background: #382b22a6; color: #fff; cursor: pointer; }
.jn-motion-toggle img { display: block; width: 16px; height: 16px; }
.jn-motion-toggle:hover { background: #382b22de; }
.jn-motion-toggle:focus-visible, .jn-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.jn-motion-toggle:disabled { opacity: .4; cursor: default; }
.jn-nav { position: absolute; left: 0; top: 165px; display: grid; gap: 18px; width: 90px; }
.jn-nav-line { position: absolute; width: 2px; top: 14px; bottom: 13px; left: 11px; background: color-mix(in srgb, var(--bg) 12%, transparent); }
.jn-nav button { position: relative; display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 28px; padding: 0 0 0 31px; border: 0; background: none; color: var(--ink-muted); font: 400 12px/1.5 var(--sans); cursor: pointer; }
.jn-nav-marker { position: absolute; z-index: 1; left: 0; top: var(--jn-nav-marker-y, 2px); 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) { .jn-nav-marker { transition: none; } }
.jn-nav button.is-current { color: var(--bg); font-weight: 600; }
.jn-brand:focus-visible { outline: 2px solid #a5352c; outline-offset: 8px; border-radius: 8px; }
.jn-qr-card { position: fixed; inset: auto; width: min(300px, calc(100vw - 24px)); margin: 0; padding: 16px 16px 18px; box-sizing: border-box; border: 1px solid #e4ded4; border-radius: 20px; background: #fffefa; color: #35261d; box-shadow: 0 16px 50px #3124192e, 0 2px 8px #3124190d; font-family: var(--sans); }
.jn-qr-card:popover-open { animation: jn-qr-reveal .18s ease-out; }
.jn-qr-card[hidden] { display: none; }
.jn-qr-close { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 50%; background: #fffefa; cursor: pointer; }
.jn-qr-close:hover { background: #eee8df; }
.jn-qr-close:focus-visible { outline: 2px solid #a5352c; outline-offset: 3px; }
.jn-qr-close .jn-ui-icon { display: block; width: 16px; height: 16px; }
.jn-qr-code { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; }
@keyframes jn-qr-reveal { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .jn-phone, .jn-qr-card:popover-open { animation: none; } }
.jn-case, .jn-role-dialog, .jn-image-dialog { --jn-card: #fcfcfa; --jn-text: #161b24; --jn-muted: #74777c; --jn-border: #e4e3df; --jn-blue: #0087ff; --jn-shadow: 0 12px 28px #24201c0c, 0 2px 6px #24201c03; }
:root[data-theme="night"] .jn-case, :root[data-theme="night"] .jn-role-dialog, :root[data-theme="night"] .jn-image-dialog { --jn-card: #22262c; --jn-text: #f1f2f3; --jn-muted: #adb2ba; --jn-border: #3a4048; --jn-blue: #65b5ff; --jn-shadow: 0 12px 28px #0003; }
.jn-study { container-type: inline-size; margin-top: 32px; color: var(--jn-text); }
.jn-surface { background: var(--jn-card); border: 1px solid color-mix(in srgb, var(--jn-border) 25%, transparent); border-radius: 24px; box-shadow: var(--jn-shadow); }
.jn-meta { display: grid; grid-template-columns: 1.2fr .84fr 1fr; padding: 28px 0 32px; margin-bottom: 20px; }
.jn-meta-field { min-width: 0; padding: 0 28px; }
.jn-meta-field + .jn-meta-field { border-left: 1px solid var(--jn-border); }
.jn-meta-label { display: flex; align-items: center; gap: 11px; min-height: 36px; margin-bottom: 17px; color: var(--jn-muted); font: 500 14px/1.4 var(--sans); }
.jn-icon-well { display: grid; place-items: center; flex: none; width: 32px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--jn-text) 2.5%, var(--jn-card)); box-shadow: inset 1px 2px 5px color-mix(in srgb, var(--jn-text) 7%, transparent); }
.jn-ui-icon { display: block; width: 21px; height: 21px; }
.jn-role-trigger { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 5px 0 5px 5px; border: 0; background: transparent; color: var(--jn-muted); font: 400 clamp(12px, 1.4cqw, 14px)/1.4 var(--sans); white-space: nowrap; cursor: pointer; }
.jn-role-trigger .jn-ui-icon { width: 14px; height: 14px; filter: grayscale(1); opacity: .7; }
.jn-role-trigger:hover { color: var(--jn-blue); }
.room .jn-meta-value { margin: 0; color: var(--jn-text); font: 500 clamp(18px, 2.55cqw, 27px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .jn-meta-note { margin: 9px 0 0; max-width: none; color: var(--jn-muted); font: 400 clamp(11px, 1.5cqw, 15px)/1.6 var(--sans); }
.jn-platform { display: flex; align-items: center; gap: 10px; }
.jn-platform-trigger { max-width: 100%; padding: 0; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.room .jn-platform-trigger:hover, .room .jn-platform-trigger[aria-expanded="true"] { color: var(--jn-blue); }
.jn-platform-trigger:focus-visible { outline: 2px solid var(--jn-blue); outline-offset: 5px; }
.jn-wechat-mark { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 50%; background: #28ba53; }
.jn-wechat-mark img { display: block; width: 21px; height: 21px; }
.room .jn-status { display: flex; align-items: center; gap: 8px; padding-left: 5px; }
.jn-status > span { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #12bd87; box-shadow: 0 0 0 4px #12bd8720; }
.jn-pain-layout { display: grid; grid-template-columns: minmax(164px, 18%) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.jn-pain-card { padding: 28px 16px 30px 22px; }
.room .jn-pain-card h2 { margin: 0; color: var(--jn-muted); font: 500 14px/1.5 var(--sans); }
.jn-pain-list { display: grid; gap: clamp(12px, 2.3cqw, 26px); }
.jn-pain-option { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 76px; padding: 9px 0; border: 0; background: transparent; color: var(--jn-text); text-align: left; font-family: var(--sans); cursor: pointer; }
.jn-pain-option::before { content: ""; position: absolute; top: 50%; left: -12px; width: 3px; height: 38px; border-radius: 2px; background: transparent; transform: translateY(-50%); }
.jn-pain-number { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--jn-muted); font: 400 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.jn-pain-text { display: grid; gap: 5px; min-width: 0; }
.jn-pain-text strong { font: 500 clamp(14px, 1.7cqw, 18px)/1.5 var(--sans); }
.jn-pain-text small { color: var(--jn-muted); font: 400 clamp(12px, 1.45cqw, 15px)/1.5 var(--sans); }
.jn-pain-phrase { display: inline-block; white-space: nowrap; }
.jn-pain-option:hover, .jn-pain-option.is-selected { color: var(--jn-blue); }
.jn-pain-option:hover .jn-pain-number, .jn-pain-option.is-selected .jn-pain-number { color: var(--jn-blue); }
.jn-pain-option.is-selected strong { font-weight: 600; }
.jn-pain-option.is-selected small { color: var(--jn-blue); }
.jn-pain-option.is-selected::before { background: var(--jn-blue); }
.jn-detail-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; padding: 26px; overflow: hidden; }
.jn-solution-copy { min-width: 0; padding: 0 5px; }
.room .jn-solution-label { margin: 0 0 11px; color: var(--jn-blue); font: 400 14px/1.5 var(--sans); }
.room .jn-solution-copy h3 { margin: 0 0 12px; color: var(--jn-text); font: 600 clamp(20px, 2.45cqw, 28px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .jn-solution-description { margin: 0; max-width: none; color: var(--jn-muted); font: 400 clamp(14px, 1.7cqw, 18px)/1.8 var(--sans); }
.jn-demo { align-self: start; min-width: 0; width: 100%; max-width: none; justify-self: stretch; }
.jn-demo-empty { min-height: 120px; }
.jn-detail-card[data-jn-format="empty"] .jn-demo { display: none; }
.jn-brand-pages { display: flex; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.jn-brand-pages button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--jn-border); background: transparent; color: var(--jn-blue); text-align: left; font: 400 13px/1.5 var(--sans); cursor: zoom-in; }
.jn-brand-pages button .jn-ui-icon { width: 16px; height: 16px; }
.jn-brand-pages button:focus-visible { outline: 2px solid var(--jn-blue); outline-offset: 4px; border-radius: 4px; }
.jn-demo-stage { position: relative; width: 100%; padding: 0; border-radius: 14px; background: #f5f4f1; }
:root[data-theme="night"] .jn-demo-stage { background: #1b1e23; }
.jn-demo-device { position: relative; display: block; width: 44%; max-width: 360px; aspect-ratio: 511 / 968; margin: -1.8% auto; padding: 0; border: 0; background: transparent; line-height: 0; cursor: pointer; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 10px 12px #24201c18); }
.jn-demo-device .jn-phone-bezel { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.jn-demo-device .jn-phone-screen { display: block; }
.jn-demo-device .jn-phone-status { font-size: clamp(8px, 1.2cqw, 13px); }
.jn-demo-device .jn-phone-content { display: block; bottom: 1.9%; }
.jn-demo-video { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: #fff; object-fit: contain; pointer-events: none; }
.jn-demo-device .jn-phone-home-indicator { z-index: 1; }
.jn-demo-device:focus-visible { outline: 2px solid var(--jn-blue); outline-offset: 0; border-radius: 14%; }
.jn-demo-callout { position: absolute; z-index: 3; width: 27%; color: var(--jn-text); font: 400 clamp(11px, 1.4cqw, 16px)/1.65 var(--sans); pointer-events: none; }
.jn-demo-callout[hidden] { display: none; }
.jn-demo-callout-left { left: 1%; text-align: right; }
.jn-demo-callout-right { right: 1%; text-align: left; }
.jn-callout-line { position: absolute; height: 1px; background: #aaa; transform-origin: 0 50%; }
.jn-callout-line::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border: 1px solid var(--jn-card); border-radius: 50%; background: #a7a8a6; }
.room .jn-recording-error { margin: 12px 0 0; color: var(--jn-muted); font: 400 12px/1.6 var(--sans); }
.jn-recording-error a { color: var(--jn-blue); }
.jn-role-trigger:focus-visible, .jn-pain-option:focus-visible, .jn-dialog-head button:focus-visible { outline: 2px solid var(--jn-blue); outline-offset: 4px; border-radius: 3px; }
.jn-role-dialog { position: fixed; inset: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 0; padding: 25px 26px 27px; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; border: 1px solid var(--jn-border); border-radius: 18px; background: var(--jn-card); color: var(--jn-text); box-shadow: 0 14px 55px #151c2630, 0 2px 8px #151c2610; font-family: var(--sans); }
.jn-role-dialog[hidden] { display: none; }
.jn-role-dialog:popover-open { animation: jn-qr-reveal .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .jn-role-dialog:popover-open { animation: none; } }
.jn-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.jn-dialog-head h2 { margin: 0; font: 500 19px/1.4 var(--sans); }
.jn-dialog-head button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -5px -7px -5px 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.jn-dialog-head button:hover { background: color-mix(in srgb, var(--jn-muted) 8%, transparent); }
.jn-role-dialog dl { display: grid; gap: 19px; margin: 0; }
.jn-role-dialog dl > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 16px; }
.jn-role-dialog dt { color: var(--jn-text); font: 500 14px/1.8 var(--sans); }
.jn-role-dialog dd { margin: 0; color: var(--jn-muted); font: 400 14px/1.8 var(--sans); }
.jn-pain-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 25px; }
.room .jn-pain-heading h2 { margin-bottom: 0; }
.jn-pain-toggle { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; min-height: 32px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--jn-muted); font: 400 12px/1.4 var(--sans); cursor: pointer; }
.jn-pain-toggle:hover { background: color-mix(in srgb, var(--jn-muted) 8%, transparent); }
.jn-pain-toggle .jn-ui-icon { width: 20px; height: 20px; transform: rotate(180deg); }
.jn-toggle-caption { display: none; }
.jn-pain-list[hidden] { display: none; }
.jn-pain-layout[data-pain-collapsed="true"] { grid-template-columns: 44px minmax(0, 1fr); }
.jn-pain-layout[data-pain-collapsed="true"] .jn-pain-card { align-self: start; padding: 5px; border-radius: 14px; }
.jn-pain-layout[data-pain-collapsed="true"] .jn-pain-heading { display: block; margin: 0; }
.jn-pain-layout[data-pain-collapsed="true"] .jn-pain-heading h2 { display: none; }
.jn-pain-layout[data-pain-collapsed="true"] .jn-pain-toggle { flex-direction: column; gap: 6px; width: 32px; min-height: 68px; }
.jn-pain-layout[data-pain-collapsed="true"] .jn-pain-toggle .jn-ui-icon { transform: none; }
.jn-pain-layout[data-pain-collapsed="true"] .jn-toggle-caption { display: inline; }
.jn-detail-card[data-jn-format="wide"] { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding: 26px; }
.jn-detail-card[data-jn-format="wide"] .jn-solution-copy { padding: 0; }
.room .jn-detail-card[data-jn-format="wide"] .jn-solution-label { margin-bottom: 11px; }
.room .jn-detail-card[data-jn-format="wide"] h3 { margin-bottom: 12px; }
.room .jn-detail-card[data-jn-format="wide"] .jn-solution-description { max-width: 49em; font-size: clamp(14px, 1.65cqw, 16px); line-height: 1.8; }
.jn-detail-card[data-jn-format="wide"] .jn-demo { justify-self: stretch; max-width: none; }
.jn-image-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--jn-muted); text-align: left; cursor: zoom-in; }
.jn-image-preview > img { display: block; width: 100%; height: auto; max-width: none; max-height: none; border: 1px solid var(--jn-border); border-radius: 10px; }
.jn-image-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; font: 400 12px/1.5 var(--sans); }
.jn-image-open-label { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--jn-blue); }
.jn-image-open-label .jn-ui-icon { width: 16px; height: 16px; }
.jn-detail-card[data-jn-topic="performance"][data-jn-format="wide"] { gap: 0; padding: 0; align-content: start; }
.jn-detail-card[data-jn-topic="performance"] .jn-image-preview > img { border: 0; border-radius: 0; }
.jn-detail-card[data-jn-topic="performance"] .jn-image-caption { padding: 12px 20px 18px; }
.jn-pain-toggle:focus-visible, .jn-image-preview:focus-visible, .jn-image-toolbar button:focus-visible, .jn-image-scroll:focus-visible { outline: 2px solid var(--jn-blue); outline-offset: 4px; border-radius: 6px; }
.jn-image-dialog { width: calc(100vw - 32px); max-width: 1600px; height: calc(100dvh - 32px); max-height: 1100px; padding: 0; box-sizing: border-box; border: 1px solid var(--jn-border); border-radius: 16px; background: var(--jn-card); color: var(--jn-text); overflow: hidden; }
.jn-image-dialog[open] { display: flex; flex-direction: column; }
.jn-image-dialog::backdrop { background: #10151c9e; }
.jn-image-toolbar { display: flex; align-items: center; flex: none; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--jn-border); }
.jn-image-toolbar h2 { min-width: 0; margin: 0 auto 0 0; font: 500 17px/1.5 var(--sans); }
.jn-image-toolbar button { flex: none; min-height: 34px; border: 1px solid var(--jn-border); border-radius: 7px; background: transparent; color: var(--jn-text); cursor: pointer; }
.jn-image-zoom { padding: 5px 11px; font: 400 13px/1.5 var(--sans); }
.jn-image-close { display: grid; place-items: center; width: 34px; padding: 5px; }
.jn-image-scroll { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.jn-image-scroll img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.jn-image-dialog.is-zoomed .jn-image-scroll { display: block; }
.jn-image-dialog.is-zoomed .jn-image-scroll img { width: var(--jn-image-width, 1448px); height: auto; max-width: none; margin: 0 auto; }
@container (max-width: 700px) {
  .jn-meta { grid-template-columns: 1fr 1fr; padding: 22px 0 25px; }
  .jn-meta-field { padding: 0 22px; }
  .jn-role-field { grid-column: 1 / -1; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--jn-border); }
  .jn-role-field + .jn-meta-field { border-left: 0; }
  .jn-meta-label { margin-bottom: 11px; font-size: 13px; }
  .room .jn-meta-value { font-size: 21px; }
  .room .jn-meta-note { font-size: 13px; }
  .jn-role-trigger { font-size: 12px; }
  .jn-pain-layout { grid-template-columns: 156px minmax(0, 1fr); gap: 14px; }
  .jn-pain-card { padding: 24px 14px 25px 18px; }
  .jn-pain-heading { gap: 4px; }
  .jn-pain-option { font-size: 13px; }
  .jn-detail-card { padding: 22px; gap: 20px; }
  .jn-solution-copy { padding-top: 0; }
  .room .jn-solution-label { margin-bottom: 10px; }
  .room .jn-solution-copy h3 { font-size: 23px; margin-bottom: 15px; }
  .room .jn-solution-description { font-size: 15px; }
  .jn-demo { justify-self: stretch; max-width: none; }
  .jn-demo-empty { min-height: 100px; }
}
@container (max-width: 480px) {
  .jn-meta, .jn-pain-card, .jn-detail-card { border-radius: 18px; }
  .jn-meta-field { padding-left: 18px; padding-right: 18px; }
  .jn-meta-label { gap: 8px; font-size: 12px; }
  .jn-icon-well { width: 28px; height: 30px; border-radius: 8px; }
  .jn-ui-icon { width: 18px; height: 18px; }
  .room .jn-meta-value { font-size: 18px; }
  .room .jn-meta-note { font-size: 12px; }
  .jn-platform { gap: 7px; }
  .jn-wechat-mark { width: 23px; height: 23px; }
  .jn-wechat-mark img { width: 18px; height: 18px; }
  .jn-pain-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jn-pain-card { padding: 18px 20px 13px; }
  .room .jn-pain-card h2 { margin-bottom: 7px; font-size: 13px; }
  .jn-pain-list { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .jn-pain-option { padding: 8px 0; min-height: 64px; gap: 10px; }
  .jn-pain-text { gap: 2px; }
  .jn-pain-text strong { font-size: 15px; }
  .jn-pain-text small { font-size: 12px; }
  .jn-pain-option::before { left: -9px; height: 19px; }
  .jn-detail-card { padding: 22px 16px 16px; gap: 18px; }
  .jn-demo-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 40px; gap: 4px 12px; padding: 0 12px 14px; }
  .jn-demo-device { grid-column: 1 / -1; grid-row: 1; width: 85%; max-width: 270px; margin: -2% auto; }
  .jn-demo-device .jn-phone-status { font-size: 8px; }
  .jn-demo-callout { position: static; width: auto; font-size: 12px; text-align: center; grid-row: 2; }
  .jn-demo-callout-left { grid-column: 1; }
  .jn-demo-callout-right { grid-column: 2; }
  .jn-callout-line { display: none; }
  .room .jn-solution-copy h3 { font-size: 21px; }
  .jn-pain-heading { margin-bottom: 7px; }
  .jn-pain-layout[data-pain-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
  .jn-pain-layout[data-pain-collapsed="true"] .jn-pain-card { width: fit-content; padding: 3px 7px; border-radius: 10px; }
  .jn-pain-layout[data-pain-collapsed="true"] .jn-pain-toggle { flex-direction: row; gap: 5px; width: auto; min-height: 32px; }
  .jn-detail-card[data-jn-format="wide"] { padding: 20px 16px; gap: 18px; }
  .jn-image-caption { font-size: 11px; }
}
@media(max-width:540px) { .jn-image-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; } .jn-image-toolbar { padding: 12px; gap: 10px; } .jn-image-toolbar h2 { font-size: 14px; } .jn-image-zoom { padding: 5px 8px; font-size: 12px; } .jn-image-scroll { padding: 10px; } }
@container (max-width: 800px) { .room .jn-case { --jn-gutter: 76px; } .jn-nav { width: 66px; } .jn-nav button { font-size: 11px; } }
@media(max-width:859px) { .room .jn-case { --jn-gutter: 0px; } .jn-nav { display: none; } .jn-study { margin-top: 24px; } }
@container (max-width: 530px) {
  .jn-hero { aspect-ratio: 4 / 5; background-size: auto 135%; background-position: 20% bottom; }
  .jn-hero-copy { top: 21%; left: 12%; width: 68%; }
  .jn-phone-home { width: 39%; left: 9%; top: 42%; }
  .jn-phone-detail { width: 35%; left: 53%; top: 48%; }
  .jn-phone-status { font-size: 1.25cqw; }
  .jn-motion-toggle { right: 10px; bottom: 10px; width: 30px; height: 30px; padding: 8px; }
}

/* Reference-led hero: real device screens over a separate photographic background. */
.jn-hero { aspect-ratio: 1691 / 930; background: #eee4d4 url("assets/youze/optimized/products-v1/images/demos/projects/jianshan/hero-sunlit-v1.webp") center / cover no-repeat; color: #294632; }
.jn-hero-copy { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.room .jn-hero-kicker { position: absolute; left: 13.84%; top: 25.5%; margin: 0; color: #294632; font: 400 clamp(12px, 1.54cqw, 26px)/1.3 var(--sans); white-space: nowrap; }
.room .jn-hero-title { position: absolute; left: 13.48%; top: 32.26%; width: 23.30%; margin: 0; line-height: 0; }
.jn-hero-title canvas { display: none; width: 100%; height: auto; }
.jn-hero-title.has-art canvas { display: block; }
.jn-title-fallback { display: block; padding-top: 8%; color: #294632; font: italic 900 clamp(40px, 8.4cqw, 112px)/1.2 var(--sans); letter-spacing: -.06em; }
.jn-hero-title.has-art .jn-title-fallback { display: none; }
.room .jn-hero-note { position: absolute; left: 13.90%; top: 56.3%; margin: 0; color: #365144; font: 400 clamp(14px, 2.13cqw, 36px)/1.4 var(--sans); white-space: nowrap; }
.jn-hero .jn-phone-home { --jn-native-top: #f8fcf8; }
.jn-hero .jn-phone-detail { --jn-native-top: #d3e6fa; }
/* The original full-resolution app viewport fills the glass, including its safe areas.
   Keep its aspect ratio; the same real image supplies the sub-pixel edge bleed.
   Only the original Android system strip is covered by the template-owned status bar. */
.jn-hero .jn-phone-screen { background: var(--jn-native-top); }
.jn-hero .jn-phone-content { inset: 0; background: var(--jn-native-top) var(--jn-native-screen) center / 100% 100% no-repeat; }
.jn-hero .jn-phone-content > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.jn-hero .jn-phone-status { z-index: 1; height: 6.34%; background: var(--jn-native-top); }
.jn-hero .jn-phone-home-indicator { z-index: 2; }
.jn-hero .jn-phone-screen::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(118deg, #fff1 0%, #fff0 42%, #fff0 73%, #fff08 100%); }
.jn-phone { filter: drop-shadow(1px 3px 1px #30261e60) drop-shadow(5px 10px 7px #211a1438); }
@keyframes jn-hover { from { translate: 0 0; } to { translate: 0 -2px; } }
.jn-phone-home { z-index: 3; width: 22.5%; left: 51.8%; top: 12.3%; transform: perspective(1400px) rotateY(-4deg) rotateZ(-9deg); }
.jn-phone-detail { z-index: 2; width: 20.5%; left: 71.8%; top: 18.6%; transform: perspective(1400px) rotateY(-4deg) rotateZ(6deg); }
.jn-motion-toggle { background: #315a46a6; }
.jn-motion-toggle:hover { background: #315a46de; }
.jn-timeline-note { display: block; margin-top: 4px; color: var(--jn-muted); font-size: .58em; letter-spacing: 0; }
.jn-other-projects { margin: 60px 0 0; padding: 32px 0; border-top: 1px solid var(--jn-border); }
.jn-other-projects .yg-title { font-size: 32px; }
.jn-other-projects .yg-stage { height: min(40vh, 360px); min-height: 180px; }
@container (max-width: 530px) {
  .jn-hero { aspect-ratio: 4 / 5; background-size: auto 100%; background-position: 36% bottom; }
  .jn-hero-copy { inset: 0; width: 100%; }
  .room .jn-hero-kicker { left: 12%; top: 8%; margin: 0; font-size: clamp(12px, 3.2cqw, 18px); }
  .room .jn-hero-title { left: 11%; top: 15.5%; width: 51%; }
  .room .jn-hero-note { left: 12%; top: 36%; margin: 0; font-size: clamp(14px, 3.8cqw, 20px); }
  .jn-phone-home { width: 38%; left: 8%; top: 42%; }
  .jn-phone-detail { width: 35%; left: 53%; top: 48%; }
}