@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #101c1d;
  --ink: #f0ebdf;
  --muted: #859792;
  --gold: #d8bc8d;
  --line: rgb(203 218 201 / 12%);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); overflow-x: clip; background: radial-gradient(ellipse at 75% 35%, #203a3638, transparent 56%), var(--bg); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E"); }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .3; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
a { color: inherit; text-decoration: none; }
button svg, .play-mode svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ambient { position: fixed; pointer-events: none; border-radius: 50%; filter: blur(100px); z-index: -1; }
.ambient-one { width: 45vw; height: 45vw; right: 0; top: 5%; background: #50716414; }
.ambient-two { width: 400px; height: 400px; left: -240px; bottom: -180px; background: #bb945713; }
.site-shell { position: relative; max-width: 1440px; height: 100svh; height: 100dvh; min-height: 640px; margin: auto; padding: 0 clamp(30px, 7vw, 104px); display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 104px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 23px; font-weight: 500; letter-spacing: 3px; }
.brand small { display: block; margin-top: 6px; font: 8px system-ui, sans-serif; letter-spacing: 1.9px; color: var(--muted); }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #a0b2a77a; border-radius: 50%; background: repeating-radial-gradient(circle, #84998b25 0 1px, transparent 1px 4px); }
.brand-mark i { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 4px solid #273b35; }
.header-note { display: flex; align-items: center; gap: 9px; color: #bdc6b9; font-size: 11px; letter-spacing: 2px; }
.live-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px #d8bc8d38; }
.header-index { padding-left: 28px; margin-left: 18px; border-left: 1px solid var(--line); font: 9px system-ui, sans-serif; letter-spacing: 2px; color: #72877d; }
.listening-room { display: grid; grid-template-columns: .92fr 1.08fr; grid-template-areas: "intro record" "player record"; align-content: center; align-items: center; gap: clamp(24px, 4.2vh, 46px) clamp(32px, 5vw, 76px); flex: 1; min-height: 0; padding: 34px 0; }
.intro { grid-area: intro; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--gold); font: 9px system-ui, sans-serif; letter-spacing: 2.5px; }
.eyebrow > span { width: 24px; height: 1px; background: currentColor; opacity: .7; }
h1 { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; font-weight: 400; font-size: clamp(46px, 4.65vw, 68px); line-height: 1.35; letter-spacing: 3px; margin: 20px 0 21px; }
h1 > span, h1 em { display: block; white-space: nowrap; }
h1 em { font-style: normal; color: var(--gold); }
.tagline { font-size: 13px; letter-spacing: 1.7px; color: #b6c3b9; margin: 0; line-height: 1.9; }
.intro-note { color: #7e938a; font-size: 11px; line-height: 2; letter-spacing: .9px; margin: 15px 0 0; }
.player { grid-area: player; width: min(100%, 375px); align-self: start; }
.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: 1px; }
.play-mode { display: inline-flex; align-items: center; gap: 7px; color: #9bac9e; white-space: nowrap; }
.play-mode svg { width: 13px; height: 13px; stroke-width: 1.3; }
#play-state { color: #cfceb9; text-align: right; line-height: 1.5; }
.controls { display: flex; align-items: center; justify-content: center; gap: 33px; margin: 17px 0 0; }
.control-button { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: #a3b3a7; transition: color .2s, transform .2s; }
.control-button:hover:enabled { color: var(--gold); transform: scale(1.08); }
.skip svg { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.2; }
.play-button { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 50%; border: 1px solid #ead0a0; color: #203329; background: linear-gradient(145deg, #ead3aa, #c7a876); box-shadow: 0 5px 26px #0003, 0 0 0 6px #d8bc8d05; transition: transform .2s, box-shadow .2s; }
.play-button:hover:enabled { transform: scale(1.05); box-shadow: 0 5px 34px #d8bc8d20, 0 0 0 6px #d8bc8d08; }
.play-button svg { width: 25px; height: 25px; fill: currentColor; stroke: none; transform: translateX(1px); }
.play-button #pause-icon { stroke: currentColor; stroke-width: 3; fill: none; transform: none; }
.play-hint { text-align: center; font-size: 10px; letter-spacing: .6px; line-height: 1.5; color: #7f9588; margin: 11px 0 16px; min-height: 15px; }
.timeline { display: flex; align-items: center; gap: 13px; color: #8a9a8e; font: 9px system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .7px; }
.timeline > span { min-width: 31px; }
.timeline > span:last-child { text-align: right; }
.playback-progress { height: 2px; flex: 1; background: #bfd1bf16; overflow: hidden; border-radius: 2px; }
.playback-progress span { display: block; width: 0; height: 100%; background: var(--gold); transition: width .25s linear; }
.volume-control { display: flex; align-items: center; gap: 10px; width: 74%; margin: 10px auto -8px; }
.volume-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; flex-shrink: 0; color: #adbcab; border: 0; background: transparent; }
.volume-button:hover { color: var(--gold); }
.volume-button svg { width: 18px; height: 18px; stroke-width: 1.4; }
#volume { --volume: 70%; appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
#volume::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, #b8af8b var(--volume), #b5c3a91c var(--volume)); }
#volume::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, #b8af8b var(--volume), #b5c3a91c var(--volume)); }
#volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #e0c89e; border: 2px solid #273b2e; box-shadow: 0 0 0 1px #e0c89e3b; margin-top: -4px; transition: box-shadow .2s; }
#volume::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid #273b2e; border-radius: 50%; background: #e0c89e; }
#volume:hover::-webkit-slider-thumb, #volume:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px #d8bc8d15; }
#volume-value { min-width: 34px; text-align: right; color: #b1b9a6; font: 10px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#volume-value span { font-size: 8px; margin-left: 2px; color: #768c7d; }
.volume-note { margin: 6px 0 0; text-align: center; color: var(--gold); font-size: 10px; }
.record-stage { grid-area: record; display: grid; place-items: center; min-width: 0; min-height: 0; }
.record-scene { width: min(100%, 58svh, 550px); aspect-ratio: 1; position: relative; isolation: isolate; }
.record-scene::before { content: "+"; position: absolute; right: 4%; top: 0; color: #bbbf9a85; font: 20px Georgia, serif; font-weight: 300; }
.orbit { position: absolute; border: 1px solid #aabc9b13; border-radius: 50%; inset: 0; }
.orbit-two { inset: 5%; border-style: dashed; border-color: #aabc9b10; }
.orbit-one::before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 14%; left: 14%; background: #c9b68a91; box-shadow: 0 0 18px #d8bc8d33; }
.scene-caption { position: absolute; top: -5%; left: 9%; display: flex; align-items: center; gap: 15px; color: #7e9583; font: 7px system-ui, sans-serif; letter-spacing: 2px; white-space: nowrap; }
.scene-caption i { width: 35px; height: 1px; background: #8fa18647; }
.record-shadow { position: absolute; width: 80%; height: 18%; left: 12%; bottom: 3%; border-radius: 50%; background: #0008; filter: blur(18px); transform: rotate(-15deg); z-index: -1; }
.vinyl { position: absolute; inset: 8%; border-radius: 50%; background: #090e0e; overflow: hidden; box-shadow: inset 0 0 0 1px #a3b49555, inset 0 0 0 4px #0a1110, inset 0 0 0 5px #99a28d25, 12px 25px 40px #0005, -8px -10px 30px #8bad8c0b; animation: spin 26s linear infinite; animation-play-state: paused; }
.record-surface { position: absolute; inset: 2%; border-radius: 50%; background: repeating-radial-gradient(circle, #090e0e 0 1px, #3c49402e 1.5px, #141e18 2px, #111a15 3px, #0a100d 4px); box-shadow: inset 0 0 26px #000a; }
.record-sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -35deg, transparent 0deg, #b9cbae0a 20deg, #b9cbae30 44deg, transparent 66deg, transparent 180deg, #b9cbae0a 200deg, #b9cbae25 224deg, transparent 245deg); mix-blend-mode: screen; }
.record-label { position: absolute; inset: 34%; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #3d4c3a; background: radial-gradient(circle at 25% 20%, #e6d0a5, #c6aa7c); box-shadow: 0 0 0 8px #0a110e, 0 0 0 9px #7c8f6b28; }
.record-label::before { content: ""; position: absolute; inset: 10%; border: 1px solid #40503825; border-radius: 50%; }
.label-top { position: absolute; top: 19%; font: 5px system-ui, sans-serif; letter-spacing: 1px; }
.label-title { position: absolute; top: 27%; font: 25px "Songti SC", "SimSun", serif; letter-spacing: 4px; white-space: nowrap; padding-left: 4px; }
.label-line { position: absolute; bottom: 30%; width: 38%; height: 1px; background: #3d4c3a47; }
.label-bottom { position: absolute; bottom: 19%; font: 5px system-ui, sans-serif; letter-spacing: .8px; }
.spindle { position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #14211a; border: 1px solid #92a17e; }
.tonearm { position: absolute; top: 12%; right: 1%; width: 21%; height: 72%; transform: rotate(-15deg); transform-origin: 75% 10%; transition: transform 1.8s ease; filter: drop-shadow(4px 6px 4px #0008); }
.arm-pivot { position: absolute; top: 0; right: 5%; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #c7cbb0 0 3px, #2e3e31 4px 8px, #8c9b7d 9px 10px, #354a38 11px 14px, #15251b 15px); box-shadow: 0 0 0 1px #91a28244; }
.arm-shaft { position: absolute; top: 20px; right: 18%; width: 8px; height: 69%; border-radius: 6px; transform: rotate(7deg); transform-origin: top; background: linear-gradient(90deg, #263b2b, #b1bba1 45%, #5e7559 75%, #1d3021); }
.arm-head { position: absolute; bottom: 18%; right: 21%; width: 21px; height: 44px; border-radius: 3px 3px 6px 6px; transform: rotate(7deg); background: linear-gradient(90deg, #3a513b, #8e9d79 60%, #314632); border: 1px solid #a6af8144; }
.arm-head::after { content: ""; position: absolute; width: 2px; height: 11px; left: 8px; bottom: -9px; background: #d5bd8c; }
.record-bottom { position: absolute; left: 9%; right: 9%; bottom: -7%; display: flex; align-items: center; gap: 14px; color: #91a087; font-size: 9px; letter-spacing: 1.4px; white-space: nowrap; }
.side-label { font: 8px system-ui, sans-serif; color: #cfba8d; letter-spacing: 2px; }
.caption-line { width: 26px; height: 1px; background: #98a3844a; }
.equalizer { display: flex; align-items: center; gap: 3px; height: 18px; margin-left: auto; }
.equalizer i { width: 2px; height: 3px; border-radius: 2px; background: var(--gold); animation: wave 1.2s ease-in-out infinite; animation-play-state: paused; }
.equalizer i:nth-child(2n) { animation-duration: .83s; animation-delay: -.4s; }
.equalizer i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.8s; }
.is-playing .vinyl, .is-playing .equalizer i { animation-play-state: running; }
.is-playing .tonearm { transform: rotate(3deg); }
.is-playing .live-dot { animation: pulse 3s ease infinite; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 84px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: 1.2px; color: #8e9c8c; }
.footer-note { display: flex; align-items: center; gap: 11px; }
.tiny-star { font-size: 22px; color: #b1a27f; }
.message-link { display: flex; align-items: center; gap: 17px; min-height: 40px; padding: 8px 17px; border: 1px solid #b8bb952a; border-radius: 30px; background: #bdc3a104; color: #cfbc97; font-size: 11px; letter-spacing: 1px; transition: border-color .2s, background .2s; white-space: nowrap; }
.message-link svg { width: 15px; height: 15px; transition: transform .2s; }
.message-link:hover { border-color: #d8bc8d70; background: #d8bc8d08; }
.message-link:hover svg { transform: translate(2px, -2px); }
dialog { border: 1px solid #c7d6c51c; background: #172725; color: var(--ink); border-radius: 14px; width: min(480px, calc(100% - 32px)); padding: 36px; box-shadow: 0 25px 100px #0009; max-height: calc(100svh - 32px); overflow: auto; }
dialog::backdrop { background: #080f14c9; backdrop-filter: blur(10px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-close { position: absolute; right: 15px; top: 10px; font-size: 28px; font-weight: 300; color: #a8b1a2; border: 0; background: none; width: 44px; height: 44px; }
dialog .eyebrow { font-size: 8px; letter-spacing: 1.8px; }
dialog h2 { font-family: "Songti SC", "SimSun", serif; font-size: 30px; font-weight: 400; letter-spacing: 2px; margin: 20px 0 12px; }
.dialog-description { font-size: 12px; line-height: 1.9; color: #a2afa1; margin: 0 0 24px; }
dialog label { display: block; font-size: 11px; color: #ccd1c2; margin-top: 17px; }
dialog label > span { float: right; font-size: 9px; color: #91a28e; }
dialog input, dialog textarea { display: block; width: 100%; background: #0e1b18; border: 1px solid #9aae8625; border-radius: 6px; padding: 12px 13px; color: var(--ink); margin-top: 9px; font-size: 16px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #75876e; }
textarea { resize: vertical; min-height: 100px; }
.submit-message { width: 100%; background: var(--gold); border: 0; border-radius: 6px; padding: 14px 16px; display: flex; justify-content: space-between; font-size: 12px; color: #172725; letter-spacing: 1px; margin-top: 12px; min-height: 44px; }
.privacy-note { text-align: center; color: #8d9d86; font-size: 9px; letter-spacing: .5px; margin-top: 15px; }
.form-status { font-size: 11px; line-height: 1.7; color: var(--gold); margin: 12px 0 0; }
.form-status:empty { display: none; }
.form-status.error { color: #f0a99e; }
.honey { position: absolute; left: -10000px; opacity: 0; height: 0; overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave { 0%, 100% { height: 3px; } 50% { height: 16px; } }
@keyframes pulse { 50% { opacity: .5; box-shadow: 0 0 16px #d8bc8d55; } }
@media (max-width: 1100px) and (min-width: 861px) {
  .site-shell { padding: 0 5.5%; }
  .listening-room { gap: 26px 32px; }
  h1 { font-size: 48px; }
  .label-title { font-size: 20px; }
  .label-top, .label-bottom { font-size: 4px; letter-spacing: .5px; }
  .record-bottom { gap: 9px; font-size: 8px; }
  .caption-line { width: 18px; }
}
@media (max-width: 860px) {
  .site-shell { height: 100svh; height: 100dvh; min-height: 0; padding: max(0px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .site-header { min-height: 68px; }
  .brand { gap: 10px; font-size: 20px; letter-spacing: 2px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand small { font-size: 6px; letter-spacing: 1.3px; margin-top: 5px; }
  .header-note { font-size: 9px; letter-spacing: 1px; gap: 7px; }
  .header-index { display: none; }
  .listening-room { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "intro" "record" "player"; gap: 12px; padding: 18px 0 14px; }
  .intro { text-align: center; }
  .intro .eyebrow { justify-content: center; font-size: 7px; letter-spacing: 2px; gap: 9px; }
  .intro .eyebrow > span { width: 15px; }
  h1 { font-size: clamp(24px, 6.8vw, 34px); line-height: 1.45; letter-spacing: 1px; margin: 10px -5px 7px; }
  h1 > span, h1 em { display: inline; }
  .tagline { font-size: 11px; letter-spacing: 1px; line-height: 1.7; }
  .intro-note { display: none; }
  .record-stage { align-self: stretch; padding-bottom: 13px; }
  .record-scene { width: min(77vw, calc(100svh - 440px), 360px); width: min(77vw, calc(100dvh - 440px), 360px); }
  .scene-caption { display: none; }
  .record-scene::before { font-size: 16px; top: 1%; right: 3%; }
  .label-title { font-size: clamp(14px, 4.5vw, 22px); letter-spacing: 2px; padding-left: 2px; }
  .label-top, .label-bottom { font-size: 4px; letter-spacing: .6px; }
  .record-label { box-shadow: 0 0 0 5px #0a110e, 0 0 0 6px #7c8f6b28; }
  .arm-pivot { width: 25px; height: 25px; background: radial-gradient(circle, #c7cbb0 0 2px, #2e3e31 3px 6px, #8c9b7d 7px 8px, #354a38 9px 11px, #15251b 12px); }
  .arm-shaft { top: 16px; width: 6px; }
  .arm-head { width: 16px; height: 32px; }
  .arm-head::after { height: 9px; bottom: -7px; left: 5px; }
  .record-bottom { left: 8%; right: 8%; bottom: -7%; gap: 9px; font-size: 7px; letter-spacing: .8px; }
  .side-label { font-size: 6px; letter-spacing: 1.4px; }
  .caption-line { width: 17px; }
  .equalizer { height: 12px; gap: 2px; }
  .player { align-self: end; justify-self: center; width: min(100%, 340px); }
  .player-heading { padding-top: 10px; font-size: 9px; letter-spacing: .6px; }
  .controls { gap: 36px; margin-top: 13px; }
  .play-button { width: 58px; height: 58px; }
  .play-hint { font-size: 9px; margin: 8px 0 12px; line-height: 1.5; min-height: 14px; }
  .volume-control { width: 78%; margin-top: 5px; margin-bottom: -7px; gap: 8px; }
  .site-footer { min-height: 60px; font-size: 9px; letter-spacing: .6px; gap: 10px; }
  .footer-note { gap: 8px; }
  .tiny-star { font-size: 19px; }
  .message-link { font-size: 10px; padding: 8px 13px; gap: 10px; min-height: 40px; }
  .message-link svg { width: 13px; height: 13px; }
  dialog { padding: 31px 25px; }
  .dialog-description { font-size: 11px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .site-header { min-height: 65px; }
  .listening-room { padding: 15px 0 12px; gap: 8px; }
  .intro .eyebrow { font-size: 6px; }
  h1 { margin-top: 7px; margin-bottom: 5px; }
  .record-scene { width: min(72vw, calc(100svh - 382px), 280px); width: min(72vw, calc(100dvh - 382px), 280px); }
  .record-stage { padding-bottom: 12px; }
  .site-footer { min-height: 57px; }
  .player-heading { padding-top: 10px; }
  .controls { margin-top: 10px; }
  .play-button { width: 52px; height: 52px; }
  .play-hint { margin: 6px 0 10px; }
}
@media (max-width: 370px) {
  .site-shell { padding-left: 20px; padding-right: 20px; }
  .brand { font-size: 18px; }
  .brand small { font-size: 5px; }
  .header-note { font-size: 8px; }
  .footer-note { font-size: 8px; gap: 6px; }
  h1 { letter-spacing: .5px; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .site-shell { min-height: 590px; }
  .site-header { min-height: 86px; }
  .site-footer { min-height: 68px; }
  .listening-room { padding: 25px 0; gap: 24px 40px; }
  h1 { font-size: 50px; margin: 14px 0; }
  .intro-note { display: none; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .site-shell { min-height: 350px; padding-left: max(26px, env(safe-area-inset-left)); padding-right: max(26px, env(safe-area-inset-right)); }
  .site-header { min-height: 52px; }
  .site-footer { min-height: 49px; }
  .listening-room { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "intro record" "player record"; gap: 8px 28px; padding: 10px 0; }
  .intro { text-align: left; }
  .intro .eyebrow { display: none; }
  h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: .5px; }
  .tagline { font-size: 9px; }
  .record-scene { width: min(33vw, calc(100dvh - 145px), 250px); }
  .player { width: 100%; }
  .player-heading { padding-top: 7px; font-size: 8px; }
  .controls { gap: 25px; margin-top: 7px; }
  .play-button { width: 44px; height: 44px; }
  .play-hint { display: none; }
  .timeline { margin-top: 7px; }
  .volume-control { margin-top: 0; margin-bottom: -9px; }
  .record-stage { padding-bottom: 14px; }
}
@media (max-height: 480px) and (orientation: portrait) {
  .site-shell { min-height: 480px; }
}
/* Size the record from the space left after the real header and controls. */
@supports (width: 1cqh) {
  .record-stage { container-type: size; align-self: stretch; }
  .record-scene { width: min(100cqw, 88cqh, 550px); }
  @media (max-width: 860px) {
    .record-scene { width: min(84cqw, 88cqh, 360px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}