.demoPage{--demo-primary:#2E86AB;--demo-primary-dark:#1F6A8A;--demo-accent:#3DB2A0;--demo-bg:#f5f7fa;--demo-card:#ffffff;--demo-text:#1f2d3d;--demo-muted:#7b8794;--demo-border:#e4ebf2;--demo-radius:16px;--demo-shadow:0 8px 24px rgba(31,45,61,0.08);--demo-danger:#e0685c;--demo-warning:#e9a23b;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:clamp(40px,6vw,88px);min-height:100vh;min-height:100dvh;padding:48px max(32px,calc((100vw - 1180px) / 2));background:radial-gradient(900px 540px at 10% 12%,rgba(61,178,160,.26),transparent 62%),radial-gradient(820px 520px at 92% 86%,rgba(46,134,171,.4),transparent 64%),linear-gradient(135deg,#0b2836,#123d4f 52%,#175a5f);color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}.demoIntro{flex:0 1 440px;min-width:0;max-width:440px}.demoIntroBrand{display:flex;gap:10px;font-size:17px;font-weight:700;letter-spacing:.04em}.demoIntroBrand,.demoIntroMark{align-items:center;color:#ffffff}.demoIntroMark{display:inline-flex;justify-content:center;flex:none;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,rgba(61,178,160,.92),rgba(46,134,171,.92));box-shadow:0 8px 20px rgba(0,0,0,.25)}.demoIntroEyebrow{margin:40px 0 0;font-size:12px;font-weight:600;letter-spacing:.26em;color:rgba(255,255,255,.58)}.demoIntroTitle{margin:14px 0 0;font-size:clamp(34px,3.8vw,50px);font-weight:700;line-height:1.14;letter-spacing:-.02em;color:#ffffff}.demoIntroTitleAccent{background:linear-gradient(120deg,#8be8d6,#8fd3ef);-webkit-background-clip:text;background-clip:text;color:transparent}.demoIntroLead{margin:20px 0 0;max-width:420px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.72)}.demoIntroList{display:flex;flex-direction:column;gap:14px;margin:32px 0 0;padding:0;list-style:none}.demoIntroItem{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.9)}.demoIntroCheck{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border:1px solid rgba(61,178,160,.45);border-radius:50%;background:rgba(61,178,160,.16);color:#8be8d6}.demoIntroFooter{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:40px 0 0}.demoIntroLink{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.32);color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;transition:border-color .18s ease,color .18s ease}.demoIntroLink:hover{border-bottom-color:#ffffff;color:#c9f3ea}.demoIntroLink:focus-visible{outline:2px solid #8be8d6;outline-offset:4px;border-radius:2px}.demoIntroNote{margin:0;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.42)}.demoPhoneWrap{display:flex;align-items:center;justify-content:center;flex:none}.phoneFrame{flex:none;width:414px;height:868px;padding:12px;border-radius:56px;background:linear-gradient(155deg,#24343d,#0a141a 52%,#1c2c35);box-shadow:0 48px 90px rgba(0,0,0,.5),0 16px 36px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.16)}.phoneFrame,.phoneScreen{position:relative;box-sizing:border-box}.phoneScreen{display:flex;flex-direction:column;width:390px;height:844px;overflow:hidden;border-radius:44px;background:var(--demo-bg)}.phoneIsland{position:absolute;top:10px;left:50%;z-index:6;width:108px;height:26px;border-radius:999px;background:#04090c;transform:translateX(-50%);pointer-events:none}.phoneStatusBar{display:flex;align-items:center;justify-content:space-between;flex:none;height:46px;padding:0 26px;background:linear-gradient(180deg,#0a141a,#0d1a22);color:#ffffff}.phoneStatusTime{font-size:14px;font-weight:700;letter-spacing:.01em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.phoneStatusIcons{display:inline-flex;align-items:center;gap:6px}.phoneStatusIcon{display:block}.phoneViewport{position:relative;display:flex;flex-direction:column;flex:1 1;min-height:0;overflow:hidden}.demoScreenScroll{flex:1 1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--demo-bg);scrollbar-width:none}.demoScreenScroll::-webkit-scrollbar{width:0;height:0}.demo-loading{display:flex;flex:1 1;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--demo-bg);color:var(--demo-muted)}.demo-loading-spinner{display:block;width:30px;height:30px;border:3px solid rgba(46,134,171,.18);border-top:3px solid var(--demo-primary);border-radius:50%;animation:demoSpin .8s linear infinite}.demo-loading-text{margin:0;font-size:13.5px;letter-spacing:.02em}@keyframes demoSpin{to{transform:rotate(1turn)}}.tabBar{display:flex;flex:none;background:var(--demo-card);border-top:1px solid var(--demo-border);padding-bottom:env(safe-area-inset-bottom,0)}.tabBarItem{display:flex;flex:1 1;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;padding:0;border:0;background:transparent;color:var(--demo-muted);font-family:inherit;cursor:pointer;transition:color .15s ease;-webkit-tap-highlight-color:transparent}.tabBarItem.is-active,.tabBarItem:hover{color:var(--demo-primary)}.tabBarItem:focus-visible{outline:2px solid var(--demo-primary);outline-offset:-2px;border-radius:12px}.tabBarIcon{display:inline-flex;width:22px;height:22px}.tabBarIcon svg{display:block;width:100%;height:100%}.tabBarLabel{font-size:11px;line-height:1;letter-spacing:.02em}.miniPlayer{position:relative;flex:none;margin:8px 12px 6px;border:1px solid var(--demo-border);border-radius:16px;background:var(--demo-card);box-shadow:0 10px 26px rgba(31,45,61,.14);overflow:hidden}.miniPlayer,.miniPlayerMain{display:flex;align-items:center}.miniPlayerMain{gap:10px;flex:1 1;min-width:0;padding:9px 4px 11px 12px;border:0;background:transparent;color:var(--demo-text);font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}.miniPlayerMain:focus-visible{outline:2px solid var(--demo-primary);outline-offset:-2px;border-radius:12px}.miniPlayerThumb{display:block;flex:none;width:38px;height:38px;border-radius:10px;object-fit:cover}.miniPlayerText{display:flex;flex-direction:column;gap:2px;min-width:0}.miniPlayerTitle{font-size:13.5px;font-weight:600}.miniPlayerSub,.miniPlayerTitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.miniPlayerSub{color:var(--demo-muted);font-size:11.5px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.miniPlayerToggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;margin-right:12px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--demo-primary),var(--demo-primary-dark));color:#ffffff;cursor:pointer;box-shadow:0 6px 14px rgba(46,134,171,.3);-webkit-tap-highlight-color:transparent}.miniPlayerToggle:focus-visible{outline:2px solid var(--demo-primary);outline-offset:2px}.miniPlayerProgress{position:absolute;right:12px;bottom:5px;left:12px;height:3px;border-radius:999px;background:#e8eef4;overflow:hidden}.miniPlayerProgressFill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--demo-primary),var(--demo-accent));transition:width .25s linear}.demo-toast{position:absolute;bottom:calc(84px + env(safe-area-inset-bottom, 0px));left:50%;z-index:20;max-width:calc(100% - 48px);padding:10px 18px;border-radius:999px;background:rgba(31,45,61,.88);box-shadow:0 8px 24px rgba(0,0,0,.18);color:#ffffff;font-size:13px;line-height:1.45;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}.demo-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%)}@media (max-width:1080px){.demoPage{gap:40px;padding:40px 32px}.demoIntro{flex:0 1 360px}}@media (max-width:900px){.demoPage{gap:24px;padding:32px 24px}.demoIntro{flex:0 1 280px}.demoIntroEyebrow{margin-top:28px}.demoIntroTitle{font-size:30px}.demoIntroLead{font-size:14px}.demoIntroList{margin-top:24px;gap:10px}.demoIntroFooter{margin-top:28px}}@media (max-width:760px){.demoPage{display:block;min-height:100vh;min-height:100dvh;padding:0;background:var(--demo-bg)}.demoIntro{display:none}.demoPhoneWrap{display:block;width:100%;height:100vh;height:100dvh}.phoneFrame{padding:0;background:var(--demo-bg);box-shadow:none}.phoneFrame,.phoneScreen{width:100%;height:100%;border-radius:0}.phoneIsland,.phoneStatusBar{display:none}}@media (prefers-reduced-motion:reduce){.demo-toast,.demoIntroLink,.miniPlayerProgressFill,.tabBarItem{transition:none}.demo-loading-spinner{animation-duration:2.4s}}