/* Only the presentation around supplied reference stages. Shared device and layout remain canonical. */
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#10151c;color:#e7edf3}
*{box-sizing:border-box}body{margin:0;min-width:0;background:radial-gradient(ellipse at 67% -12%,#23475988,transparent 43%),#10151c}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #68b9ed;outline-offset:3px}
.motion-shell{padding:clamp(18px,3.5vh,35px) clamp(16px,3vw,42px)}
.motion-layout{margin:auto;align-items:start}
.motion-sidebar{background:#1b232c;color:#eaf0f3;padding:clamp(18px,2.2vw,30px);border:1px solid #3a4550;box-shadow:0 20px 60px #0005}
.detail-panel-nav,.control-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.detail-panel-nav{margin-bottom:22px;font-size:12px;color:#92a8b6}.back-link{color:#afe8dd;text-decoration:none;font-weight:700}.back-link:hover{text-decoration:underline}
.sidebar-kicker{color:#87dccb;font-weight:800;letter-spacing:2px;font-size:10px}.sidebar-kicker span{color:#6c7b8b}.motion-sidebar h1{font-size:clamp(27px,3vw,39px);line-height:1.1;margin:10px 0;color:#f4f7fa;letter-spacing:-1.2px}.sidebar-intro{font-size:12px;color:#a3b3bc;line-height:1.8;margin:0 0 16px}
.category-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.category-chips button{background:#263340;color:#b9c9d1;border:1px solid #44515d;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700}.category-chips button[aria-pressed=true]{background:#1d6bf3;border-color:#1d6bf3;color:white}
.case-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:20px}.case-tabs a{min-width:0;color:#b4c3cd;text-decoration:none;background:#232e3a;border:1px solid #394754;border-radius:11px;padding:9px 10px;display:flex;gap:9px;align-items:center;font-size:11px;line-height:1.35;transition:background .2s,border-color .2s}.case-tabs a:hover{background:#2e4150}.case-tabs a.active{color:white;background:#184b84;border-color:#4b9dee}.case-tabs a span{color:#94aab9;font:800 11px ui-monospace,SFMono-Regular,monospace}.case-tabs a.active span{color:#cae7ff}.case-tabs a[hidden]{display:none}
.control-card{background:#202d37;border:1px solid #40515b;border-radius:16px;padding:17px;margin:0 0 13px}.control-head{font-size:11px;color:#97aebf;font-weight:800;margin-bottom:9px}.control-head span:last-child{font-size:10px;color:#7ebae9}.control-card h2{font-size:18px;margin:8px 0;color:#f0f6fb}.control-card p{color:#c0cdd4;font-size:12px;line-height:1.85;margin:6px 0 13px}.control-card .prompt-text{white-space:pre-wrap;color:#d4e0e7}.action-row,.copy-row{display:flex;gap:9px;flex-wrap:wrap}.control-card button{border:1px solid #566675;background:#344352;color:#f0f7fa;border-radius:10px;font-size:12px;font-weight:700;padding:10px 13px}.control-card button:hover{border-color:#7bbff7}.control-card .primary-action{background:#2169df;border-color:#2169df}.control-card #copyPrompt{background:#1d6bf3;border-color:#1d6bf3}.control-card #sidebarReduced[aria-pressed=true]{background:#096b77;border-color:#10acb4}.control-card .play-status{font-size:11px;margin:10px 0 0;color:#9bc5e6}.control-label{display:block;font-size:12px;color:#aec9d5;font-weight:700;margin-bottom:10px}.demo-skill-source{border:1px solid #425868;border-radius:10px;background:#12212c;color:#d3e5ea;font:12px/1.6 ui-monospace,SFMono-Regular,"JetBrains Mono",monospace;width:100%;padding:12px;outline:0;white-space:pre-wrap;overflow:hidden}.control-card .accuracy-note{font-size:11px;color:#91a4ad;margin:12px 0 0}
/* Device inner only; reference stage CSS is contained within .motion-stage. */
.motion-screen{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:#f4f6fb;background-image:radial-gradient(#cbd5e1 1.15px, transparent 1.15px);background-size:20px 20px;color:#0f172a;scrollbar-width:none;display:flex;flex-direction:column;padding:0 13px 18px}
.motion-screen::-webkit-scrollbar{display:none}.phone-top{height:60px;padding:39px 15px 0;display:flex;justify-content:space-between;align-items:flex-end;flex:0 0 auto;font-size:10px;font-weight:800;color:#1b2e44}.phone-brand{display:flex;align-items:center;gap:7px;letter-spacing:1.2px}.phone-brand-mark{display:inline-grid;place-items:center;background:#1d6bf3;color:#fff;border-radius:7px;width:22px;height:22px;font-size:17px}.phone-heading{padding:16px 10px 14px;flex:0 0 auto}.phone-eyebrow{font-size:10px;color:#556476;letter-spacing:.6px}.phone-titles{display:flex;align-items:center;gap:8px;margin-top:8px}.phone-titles h2{font-size:29px;letter-spacing:-1px;font-weight:900;margin:0;line-height:1.2}.phone-english{font-size:12px;font-weight:750;color:#1d6bf3;margin-top:3px}
.motion-stage{width:100%;flex:0 0 auto;min-height:258px;display:flex;align-items:center;justify-content:center;contain:layout style}.motion-stage>.stage-light,.motion-stage>.stage-dark{width:100%;min-width:0;max-width:100%}
/* Simulate source interaction without relying on an infinite animation after page enter. */
.motion-stage .pro-beam-wrapper::before{animation-play-state:paused}.motion-stage[data-playing=beam] .pro-beam-wrapper::before{animation-play-state:running}
.motion-stage .marquee-row-left,.motion-stage .marquee-row-right{animation-play-state:paused}.motion-stage[data-playing=marquee] .marquee-row-left,.motion-stage[data-playing=marquee] .marquee-row-right{animation-play-state:running}.motion-stage[data-playing=marquee] .marquee-stage:hover .marquee-row-left,.motion-stage[data-playing=marquee] .marquee-stage:hover .marquee-row-right{animation-play-state:paused}
.motion-stage .shimmer-surface::after{animation-play-state:paused}.motion-stage[data-playing=shimmer] .shimmer-surface::after{animation-play-state:running}
.motion-stage #reveal-box{scrollbar-width:none}.motion-stage #reveal-box::-webkit-scrollbar{display:none}
.phone-description{background:#fff;border:1px solid #e5eaf1;border-radius:14px;padding:13px;margin-top:14px;flex:0 0 auto;box-shadow:0 8px 22px #24334b0b}.phone-description-head{display:flex;justify-content:space-between;color:#2c3e50;font-size:11px;font-weight:800}.phone-description-head span:last-child{color:#1d6bf3}.phone-description p{color:#667386;line-height:1.65;font-size:11px;margin:7px 0 0}.phone-switch{display:flex;align-items:center;justify-content:space-between;margin:16px 12px 0;color:#445569;font-size:12px;font-weight:800}.phone-switch button{border:1px solid #d2dbe8;border-radius:50%;width:34px;height:34px;background:#fff;color:#1d6bf3;font-size:25px;display:grid;place-items:center}.phone-replay{background:#1d6bf3;color:white;font-weight:800;border:0;border-radius:11px;padding:11px;margin:10px 12px 0;box-shadow:0 6px 15px #1d6bf330}.phone-home{height:4px;width:110px;border-radius:99px;background:#26374b;margin:auto auto 0;flex:0 0 auto;transform:translateY(13px)}.preview-hint{color:#8da9b6;font-size:11px;text-align:center;margin:16px 0 0}
@media(min-width:961px){html,body{height:100%;overflow:hidden}.motion-shell{height:100%;overflow:hidden}.motion-layout{height:100%;align-items:start}.motion-sidebar{height:844px;max-height:calc(100vh - 40px)}}
@media(max-width:960px){.motion-layout{justify-items:center}.motion-sidebar{height:auto;max-height:none}.motion-shell{padding:22px 14px}.demo-preview{width:100%}}
@media(max-width:390px){.motion-screen{padding-inline:9px}.phone-heading{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.motion-stage *, .motion-stage *::before,.motion-stage *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.motion-stage .pro-beam-wrapper::before,.motion-stage .marquee-row-left,.motion-stage .marquee-row-right,.motion-stage .shimmer-surface::after{animation-play-state:paused!important}}
/* Scoped reference Preflight; preserve original utility styles and borders. */
:where(.motion-stage,.motion-stage *,.motion-stage *::before,.motion-stage *::after){border-width:0;border-style:solid;border-color:#e5e7eb}
:where(.motion-stage button,.motion-stage input,.motion-stage select,.motion-stage textarea){font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:0}
:where(.motion-stage button){appearance:none;background-color:transparent;background-image:none;cursor:pointer}
:where(.motion-stage h1,.motion-stage h2,.motion-stage h3,.motion-stage p,.motion-stage ul,.motion-stage ol){margin:0}
:where(.motion-stage ul,.motion-stage ol){list-style:none;padding:0}
:where(.motion-stage svg){display:block}
/* Short desktop viewport: scale only the *preview*, not the canonical shared 390×844 device geometry. */
@media(min-width:961px) and (max-height:920px){
  .demo-preview{position:relative;height:calc(100vh - 45px)}
  .demo-preview>.demo-device{transform:scale(var(--motion-preview-scale,1));transform-origin:top center}
  .preview-hint{position:absolute;bottom:0;margin:0;text-align:center;white-space:normal}
}

.motion-stage [role="button"]:focus-visible{outline:2px solid #1d6bf3;outline-offset:2px}