/* 仅补充设备壳、展示环境及滚动行为；页面布局使用 Tailwind utilities。 */
:root { font-family: "Microsoft YaHei UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #182338; background: #f5f5f1; }
body { margin: 0; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #e6c45b; outline-offset: 3px; }
.stage-background { background-image: radial-gradient(#dedbd2 .7px, transparent .7px); background-size: 20px 20px; }
.phone-stage { width: 410px; height: 864px; flex: none; }
.iphone-frame { width: 410px; height: 864px; padding: 10px; border-radius: 54px; background: #192333; box-shadow: 0 0 0 1px #0e1726, 0 0 0 3px #cbd3de, 0 28px 55px -24px #24365470, 0 5px 8px #263a5020; position: relative; }
.iphone-frame::before { content: ""; position: absolute; width: 3px; height: 58px; top: 160px; right: -4px; background: #26354b; border-radius: 0 3px 3px 0; }
.iphone-screen { width: 390px; height: 844px; border-radius: 44px; overflow: hidden; position: relative; background: #f5f7fb; display: flex; flex-direction: column; }
.dynamic-island { position: absolute; top: 11px; left: 139px; width: 112px; height: 27px; border-radius: 18px; background: #101822; z-index: 20; }
.phone-scroll { scrollbar-width: none; overscroll-behavior: contain; }
.phone-scroll::-webkit-scrollbar, .role-scroll::-webkit-scrollbar { width: 0; }
.role-scroll { scrollbar-width: thin; scrollbar-color: #d6dfeb transparent; }
.role-button[data-active="true"] { background: #fff4d2; color: #805900; box-shadow: inset 3px 0 #e5b32b; }
.role-button[data-active="true"] .role-dot { background: #f4c342; color: #30291a; }
.stage-step[data-current="true"] .step-dot { background: #f4c342; color: #30291a; box-shadow: 0 0 0 4px #fff1c3; }
.stage-step[data-done="true"] .step-dot { background: #e5f5ed; color: #16865b; }
.modal-veil { background: #14223960; backdrop-filter: blur(3px); }
.safe-line { width: 118px; height: 4px; background: #172234; border-radius: 9px; margin: 8px auto 7px; }
.scene { animation: arrive .22s ease-out; }
@keyframes arrive { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1000px) and (max-height: 990px) { .phone-stage { width: 360px; height: 759px; } .iphone-frame { transform: scale(.878); transform-origin: top left; } }
@media (min-width: 1000px) and (max-height: 860px) { .phone-stage { width: 324px; height: 683px; } .iphone-frame { transform: scale(.79); } }
@media (max-width: 999px) { .demo-layout { grid-template-columns: 210px 410px !important; justify-content: center; gap: 28px !important; } .guide-panel { display: none; } .role-panel { height: 864px !important; max-height: none !important; } }
@media (max-width: 690px) { .demo-layout { display: flex !important; flex-direction: column; align-items: center; padding: 16px 10px 32px !important; } .role-panel { width: 100%; max-width: 410px; height: auto !important; } .role-scroll { max-height: 156px; } .role-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .desktop-heading { padding: 18px 18px 0 !important; } }
@media (max-width: 430px) { .phone-stage { width: 361px; height: 761px; } .iphone-frame { transform: scale(.88); transform-origin: top left; } }
@media (max-width: 380px) { .phone-stage { width: 324px; height: 683px; } .iphone-frame { transform: scale(.79); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }