.guide-demo{display:block;margin:32px 0 40px;padding:0;border:1px solid #dfe5dc;border-radius:24px;overflow:hidden;background:#edf0ec}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #dde3db;background:#f1f3ef}
.demo-client-tabs{display:flex;gap:4px;padding:4px;background:#e3e8e2;border-radius:12px}
.demo-client-tabs button{min-height:38px;padding:8px 14px;border:0;border-radius:9px;background:transparent;color:#627369;font-size:12px}
.demo-client-tabs button[aria-pressed=true]{background:#fff;color:#344e40;box-shadow:0 1px 4px #23351f0a}
#demoEnlarge{min-height:40px;padding:8px 0;border:0;background:none;color:#5b7467;font-size:11px;white-space:nowrap}
.demo-workspace{display:grid;grid-template-columns:minmax(250px,.95fr) minmax(0,1fr);gap:30px;align-items:start;padding:30px 24px}
.demo-picture{display:flex;flex-direction:column;align-items:center;width:100%;max-width:none;gap:14px}
.guide-device{overflow:hidden;width:min(100%,320px);padding:7px;border:1px solid #5b625d;border-radius:43px;background:#1b201d;box-shadow:0 22px 38px -25px #243b2a66,inset 0 0 0 2px #333c36}
.guide-device-screen{--device-screen-radius:35px;position:relative;width:100%;aspect-ratio:375/812;overflow:hidden;border-radius:var(--device-screen-radius);clip-path:inset(0 round var(--device-screen-radius));isolation:isolate;background:#121614}
.client-demo-host{position:absolute;left:0;top:0;width:375px;height:812px;transform-origin:0 0;border-radius:38px;overflow:hidden;clip-path:inset(0 round 38px)}
.demo-platform-caption{margin:0!important;font-size:10px!important;text-align:center;line-height:1.8;color:#748177!important}
.demo-explanation{padding-top:8px;min-width:0}
.demo-label{font-size:10px;color:#728176;letter-spacing:.06em}
.demo-explanation h3{font-size:24px;line-height:1.5;margin:12px 0 16px}
.demo-explanation>p{font-size:13px;line-height:1.9;margin:0 0 16px}
.demo-explanation .demo-route-path{padding:10px 12px;border-left:2px solid #9baa96;background:#e5ebe2;color:#627567;font-size:11px;line-height:1.9}
.demo-route-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:22px 0}
.demo-route-list button{min-width:0;min-height:39px;padding:8px 10px;border:1px solid #dce3d8;border-radius:9px;background:#f6f8f3;color:#65756a;text-align:left;font-size:11px;line-height:1.5}
.demo-route-list button:hover{border-color:#b0c1b4;background:#fff}
.demo-route-list button[aria-current=page]{border-color:#5c7a66;background:#dfe9df;color:#365540;font-weight:600}
.demo-navigation{display:flex;flex-direction:row;gap:8px;margin:12px 0}
.demo-navigation button{min-height:42px;width:auto;padding:9px 16px;border:1px solid #ccd9c0;border-radius:10px;background:#fff;color:#4b6657;font-size:12px}
.demo-navigation #demoNext{margin-left:0;background:#3d5949;color:#fff;border-color:#3d5949}
#demoPlay{display:inline-flex;align-items:center;min-height:42px;padding:0;border:0;background:none;color:#5a7564;font-size:12px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b4c3b8}
.demo-explanation .demo-help{display:block;margin:8px 0 0;font-size:10px;color:#7c887f;line-height:1.9}
.demo-runtime-status{font-size:11px!important;color:#6b754f!important}
.demo-runtime-status:empty{display:none}
#demoDialog{width:min(100% - 24px,470px);max-height:calc(100svh - 24px);padding:16px 18px;border:1px solid #d4dfcb;border-radius:24px;overflow:auto;background:#f0f4ee;color:#445b4d;box-shadow:0 30px 100px #14220d66}
#demoDialog::backdrop{background:#1c271bbf;backdrop-filter:blur(6px)}
#demoCloseEnlarged{display:block;margin:0 0 12px auto;min-height:42px;padding:8px 14px;border:1px solid #cfdbc3;border-radius:12px;background:#fff;color:#4b6657;font-size:12px}
#demoDialogPhone .guide-device{margin:auto;width:min(100%,375px)}
#demoDialog>p{text-align:center;font-size:11px;color:#7a8b6e;margin:16px 0 0}
@media(max-width:1100px){.demo-workspace{grid-template-columns:minmax(230px,.9fr) minmax(0,1fr);gap:22px;padding:24px 18px}.demo-explanation h3{font-size:22px}.demo-route-list{gap:5px}.demo-route-list button{font-size:10px}}
@media(max-width:900px){.demo-workspace{grid-template-columns:minmax(260px,.85fr) minmax(0,1fr);padding:30px;gap:32px}}
@media(max-width:680px){.guide-demo{padding:0}.demo-toolbar{padding:12px 14px;gap:8px}.demo-client-tabs button{font-size:11px;padding:7px 10px}.demo-client-tabs{padding:3px}.demo-workspace{grid-template-columns:1fr;padding:24px 18px;gap:20px}.guide-device{overflow:hidden;width:min(100%,300px)}.demo-picture{max-width:none;gap:12px}.demo-explanation{padding-top:0}.demo-explanation h3{font-size:23px}.demo-explanation>p{font-size:13px}.demo-label{font-size:10px}.demo-route-list{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0;gap:6px}.demo-route-list button{font-size:11px;min-height:42px}.demo-navigation{flex-direction:row}.demo-navigation button{width:auto;min-height:44px;font-size:12px}.demo-explanation .demo-help{display:block;font-size:11px}#demoPlay{font-size:12px}#demoEnlarge{font-size:10px}}
@media(max-width:360px){.demo-workspace{padding:22px 12px}.demo-toolbar{padding:10px}.demo-route-list{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-client-tabs button{font-size:10px;padding-inline:8px}.guide-device{padding:5px;border-radius:36px}.guide-device-screen{--device-screen-radius:30px}}
@media(prefers-reduced-motion:no-preference){.guide-demo[data-route] .demo-explanation h3{animation:guide-copy-in .16s ease-out}@keyframes guide-copy-in{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}}
@media print{.demo-toolbar,.demo-route-list,.demo-navigation,#demoPlay{display:none}.demo-workspace{grid-template-columns:280px 1fr}#demoDialog{display:none}}

@font-face{font-family:GuideIonicons;src:url("assets/guide-ui/Ionicons.ttf?v=fa2ab7d25578") format("truetype");font-display:block}