.demo{padding:96px 0 40px}
.demo .head{text-align:center;max-width:760px;margin:0 auto 34px}
.dm{--s:1;position:relative;width:min(1040px,100%);margin:0 auto}
.dm-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:#1B0B3A;isolation:isolate}
.dm-canvas svg{max-width:none}
.dm-canvas{position:absolute;left:0;top:0;width:960px;height:540px;transform:scale(var(--s));transform-origin:0 0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans CJK SC",sans-serif;color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none}
.dm-backdrop{position:absolute;inset:0;background:radial-gradient(60% 80% at 12% 20%,#FF7AB6 0,rgba(255,122,182,0) 70%),radial-gradient(55% 70% at 88% 85%,#FF4F9A 0,rgba(255,79,154,0) 70%),radial-gradient(70% 90% at 70% 10%,#B23CFF 0,rgba(178,60,255,0) 70%),linear-gradient(135deg,#F7A8CB,#C96BE0 55%,#F28AB8)}
.dm-window{position:absolute;left:40px;top:28px;width:880px;height:484px;border-radius:16px;background:linear-gradient(160deg,#3A1680 0,#2A0E63 45%,#1A0842 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(40,6,80,.55),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.dm-window::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 70% 0,rgba(255,79,154,.22),transparent 70%),radial-gradient(60% 60% at 0 100%,rgba(91,61,245,.35),transparent 70%);pointer-events:none}
.dm-titlebar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:7px;padding:0 13px;z-index:3}
.dm-titlebar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.dm-titlebar i:nth-child(2){background:#FEBC2E}
.dm-titlebar i:nth-child(3){background:#28C840}
.dm-title{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.62);pointer-events:none}
.dm-side{position:absolute;left:0;top:30px;bottom:0;width:58px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;z-index:2}
.dm-side .dm-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#5B3DF5,#B23CFF 55%,#FF4F9A);display:grid;place-items:center;margin-bottom:8px;box-shadow:0 6px 16px rgba(178,60,255,.45)}
.dm-side .dm-mark svg{width:17px;height:17px;stroke:#fff}
.dm-side span{width:34px;height:30px;border-radius:9px;display:grid;place-items:center;color:rgba(255,255,255,.55)}
.dm-side span.on{background:rgba(255,255,255,.14);color:#fff}
.dm-side span svg{width:16px;height:16px}
.dm-i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-main{position:absolute;left:66px;right:14px;top:34px;bottom:62px}
.dm-head{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap}
.dm-head b{font-weight:700;color:#fff}
.dm-head.big{font-size:19px;color:#fff;letter-spacing:-.01em}
.dm-head svg{width:18px;height:18px;stroke:#FFD166;flex-shrink:0}
.dm-grid{position:absolute;left:0;right:0;top:36px;bottom:0;display:flex;flex-direction:column;gap:10px}
.dm-row{display:flex;gap:10px;min-height:0}
.dm-tile{position:relative;min-width:0;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.dm-tile .dm-fill{position:absolute;inset:0;opacity:0}
.dm-tile .dm-label{position:absolute;left:12px;top:10px;font-size:10px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap}
.dm-tile .dm-phase{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:16px;font-weight:600;white-space:nowrap;letter-spacing:-.01em;opacity:0}
.dm-tile .dm-ticker{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:9.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 18px;opacity:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dm-art{position:absolute;width:112px;height:112px;left:50%;top:50%;will-change:transform}
.dm-art .dm-squircle{position:absolute;inset:0;border-radius:32px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -10px 24px rgba(0,0,0,.18)}
.dm-art .dm-squircle::after{content:"";position:absolute;left:10%;right:10%;top:6%;height:42%;border-radius:26px 26px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.dm-art .dm-glow{position:absolute;inset:-26px;border-radius:50%;filter:blur(22px);opacity:.55}
.dm-art svg{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.dm-result{position:absolute;left:14px;bottom:12px;right:14px}
.dm-value{font-size:20px;font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.dm-caption{font-size:10px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-status{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:9.5px;color:rgba(255,255,255,.6);white-space:nowrap}
.dm-status i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}
.dm-status.done{color:#9BF0C1}
.dm-status.done i{background:#2EBF70;box-shadow:0 0 0 3px rgba(46,191,112,.25)}
.dm-list{position:absolute;left:16px;top:44px;width:58%;display:flex;flex-direction:column;gap:7px;opacity:0}
.dm-item{display:flex;align-items:center;gap:8px;font-size:10.5px;white-space:nowrap}
.dm-item .dm-ico{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex-shrink:0}
.dm-item .dm-ico svg{width:12px;height:12px}
.dm-item .dm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dm-item .dm-warn{font-size:8.5px;font-weight:700;color:#5a3500;background:#FFD08A;border-radius:6px;padding:1px 5px;margin-left:4px}
.dm-item .dm-size{color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.dm-item .dm-tick{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;border:2px solid rgba(255,255,255,.35)}
.dm-item .dm-tick svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;opacity:0}
.dm-item.spin .dm-tick{border-color:rgba(255,255,255,.25);border-top-color:#fff}
.dm-item.ok .dm-tick{border-color:#2EBF70;background:#2EBF70}
.dm-item.ok .dm-tick svg{opacity:1}
.dm-intro{position:absolute;left:66px;right:14px;top:30px;bottom:62px;display:flex;align-items:center;gap:40px;padding:0 40px}
.dm-hero{position:relative;width:230px;height:230px;flex-shrink:0}
.dm-hero .dm-disc{position:absolute;inset:18px;border-radius:58px;background:linear-gradient(140deg,#FF6FB0 0,#D63CFF 50%,#7A3DF5 100%);box-shadow:0 30px 60px rgba(214,60,255,.45),inset 0 3px 0 rgba(255,255,255,.5),inset 0 -18px 40px rgba(60,0,120,.35)}
.dm-hero .dm-disc::after{content:"";position:absolute;left:12%;right:12%;top:6%;height:40%;border-radius:46px 46px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.dm-hero .dm-laptop{position:absolute;left:50%;top:52%;width:118px;height:118px;transform:translate(-50%,-50%);stroke:#fff;stroke-width:1.7;filter:drop-shadow(0 6px 10px rgba(60,0,120,.35))}
.dm-hero .dm-spark{position:absolute;left:0;top:0;width:22px;height:22px;fill:#fff;stroke:none;filter:drop-shadow(0 2px 6px rgba(255,255,255,.6))}
.dm-copy h3{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.dm-copy p{margin-top:10px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.75);max-width:330px}
.dm-copy ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.dm-copy li{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}
.dm-copy li span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.dm-copy li svg{width:13px;height:13px}
.dm-action{position:absolute;left:66px;right:14px;bottom:10px;height:52px;display:flex;justify-content:center;align-items:center}
.dm-orb{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FF8CC6,#C23CFF 55%,#6A2BE0);box-shadow:0 10px 26px rgba(194,60,255,.55),inset 0 2px 0 rgba(255,255,255,.45);font-size:11px;font-weight:700;color:#fff}
.dm-orb .dm-ring{position:absolute;left:-6px;top:-6px;width:64px;height:64px;max-width:none;transform:rotate(-90deg)}
.dm-orb .dm-ring circle{fill:none;stroke-width:3}
.dm-orb .dm-ring .trk{stroke:rgba(255,255,255,.18)}
.dm-orb .dm-ring .bar{stroke:#fff;stroke-linecap:round}
.dm-orb .dm-orb-check{position:absolute;width:22px;height:22px;stroke:#fff;stroke-width:3;opacity:0}
.dm-orb .dm-orb-label{position:relative;white-space:nowrap}
.dm-confetti{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:2px;opacity:0;pointer-events:none}
.dm-fade{position:absolute;inset:0;background:#1A0842;opacity:0;pointer-events:none}
.dm-fallback{display:block;width:100%;border-radius:22px;box-shadow:var(--shadow-lg)}
.dm-controls{display:flex;align-items:center;gap:12px;margin-top:14px;padding:0 4px}
.dm-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:transform .2s var(--ease),background-color .2s}
.dm-btn:hover{transform:translateY(-1px);background:var(--tint)}
.dm-btn svg{width:16px;height:16px}
.dm-btn .i-play{display:none}
.dm.paused .dm-btn .i-play{display:block}
.dm.paused .dm-btn .i-pause{display:none}
.dm-bar{position:relative;flex:1;height:28px;cursor:pointer;display:flex;align-items:center;touch-action:none}
.dm-bar .dm-track{position:relative;width:100%;height:6px;border-radius:6px;background:var(--track);overflow:hidden}
.dm-bar .dm-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad);border-radius:6px}
.dm-bar .dm-chapter{position:absolute;top:50%;width:2px;height:10px;margin-top:-5px;background:var(--line-strong);border-radius:2px}
.dm-bar:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.dm-time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.dm-record,.dm-record body{margin:0;background:#000}
.dm-record .dm-frame{border-radius:0;box-shadow:none}
.dm-record .dm-controls{display:none}
@media (max-width:640px){.demo{padding-top:64px}.dm-frame{border-radius:14px}.dm-time{min-width:64px;font-size:12px}}