.demo{--d-bg:#05070d;--d-ink:#ecf4ff;--d-mute:#ecf4ff99;--d-line:#ecf4ff24;aspect-ratio:16/9;min-height:330px;color:var(--d-ink);background:radial-gradient(#ecf4ff1a 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(180deg, #0a1322, var(--d-bg));border:1.5px solid var(--acc);box-shadow:0 24px 60px #0000008c, 0 0 44px color-mix(in srgb, var(--acc) 16%, transparent);font-family:var(--f-display,system-ui, sans-serif);border-radius:14px;flex-direction:column;display:flex;position:relative;overflow:hidden}.demo-bar{border-bottom:1px solid var(--d-line);background:#05070db3;align-items:center;gap:6px;padding:11px 14px;display:flex}.demo-bar i{background:var(--d-line);border-radius:22%;width:8px;height:8px}.demo-bar i:first-child{background:var(--acc)}.demo-title{font:500 11.5px / 1 var(--f-mono,monospace);letter-spacing:.06em;color:var(--d-mute);white-space:nowrap;text-overflow:ellipsis;margin-left:8px;overflow:hidden}.demo-what{font:500 10px / 1 var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--d-mute);border:1px solid var(--d-line);border-radius:4px;flex:none;margin-left:auto;padding:.45em .6em}.demo-body{flex-direction:column;flex:1;justify-content:center;gap:8px;padding:clamp(14px,3%,28px) clamp(14px,4%,34px);font-size:clamp(13px,1.9cqw,16px);display:flex}.demo-run{background:var(--d-line);height:3px}.demo-run b{height:100%;width:calc(var(--t,0) * 100%);background:var(--acc);display:block}.demo p{color:inherit;font-size:inherit;margin:0;line-height:1.4}.demo .d-tag{font:500 10.5px / 1 var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--d-bg);background:var(--acc);border-radius:4px;flex:none;padding:.5em .7em;font-style:normal}.demo .d-foot{font:500 11px / 1.3 var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-top:4px}.d-mail{border:1px solid var(--d-line);background:#05070dd1;border-radius:9px;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;display:flex}.d-mail.hot{border-color:var(--acc)}.d-who{flex-direction:column;gap:3px;min-width:0;display:flex}.d-who b{font:500 10.5px / 1 var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--d-mute)}.d-who span{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.demo .d-sum{border-left:3px solid var(--acc);background:color-mix(in srgb, var(--acc) 9%, transparent);border-radius:0 9px 9px 0;padding:9px 12px}.d-sum b{font:500 10.5px / 1.6 var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);display:block}.d-q{border:1.5px solid var(--acc);background:#05070dd9;border-radius:11px;align-items:center;min-height:46px;padding:10px 14px;font-weight:500;display:flex}.d-q:before{content:"›";color:var(--acc);margin-right:10px;font-weight:700}.demo .d-search{font:500 11px / 1 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--d-mute);background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 40%, transparent), transparent) 0 0 / 40% 100% no-repeat;padding:8px 2px;animation:.5s linear infinite d-sweep}@keyframes d-sweep{0%{background-position:-40% 0}to{background-position:140% 0}}.d-a{border:1px solid var(--d-line);background:#05070dd1;border-radius:11px;padding:13px 14px}.d-a b{color:var(--acc)}.d-src{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.d-src span{font:500 10.5px / 1 var(--f-mono,monospace);color:var(--acc);border:1px solid var(--acc);border-radius:4px;padding:.5em .7em}.d-doc{grid-template-columns:1fr auto;align-items:start;gap:clamp(12px,3%,28px);display:grid}.d-doc h3{font:600 clamp(15px, 2.6cqw, 21px) / 1.2 var(--f-display,sans-serif);letter-spacing:-.02em;margin:0 0 6px}.d-doc-main p{margin-top:9px}.d-doc-main p b{font:500 10.5px / 1.7 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);display:block}.d-doc-side{border-left:1px solid var(--d-line);flex-direction:column;align-items:flex-start;gap:12px;padding-left:clamp(12px,3%,24px);display:flex}.d-doc-side ul{font:500 11px / 1.2 var(--f-mono,monospace);color:var(--d-mute);gap:9px;margin:0;padding:0;list-style:none;display:grid}.d-doc-side li{white-space:nowrap;align-items:center;gap:8px;display:flex}.d-doc-side li i{background:var(--acc);border-radius:22%;width:7px;height:7px}.d-doc-side li span{color:var(--d-ink)}.d-taskbar{border:1px solid var(--d-line);font:500 clamp(12px, 2cqw, 15px) / 1 var(--f-mono,monospace);background:#05070de6;border-radius:10px;align-items:center;gap:14px;padding:12px 16px;display:flex}.d-ws{gap:5px;display:flex}.d-ws i{background:var(--d-line);border-radius:22%;width:8px;height:8px}.d-ws i:nth-child(2){background:var(--d-ink)}.d-clock{color:var(--d-mute);margin-right:auto}.d-hours{font-size:1.5em}.d-dot{background:#22e07a;border-radius:50%;width:1.5em;height:1.5em;transition:background .2s,box-shadow .2s;box-shadow:0 0 18px #22e07a}.d-checks{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.d-check{font:500 11.5px / 1 var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--d-line);background:#05070dcc;border-radius:6px;align-items:center;gap:8px;padding:.7em .8em;display:inline-flex}.d-check i{background:#22e07a;border-radius:22%;width:8px;height:8px;transition:background .2s}.demo .d-state{min-height:1.4em;font-weight:500}.demo.live .d-state,.demo:not(.live) .s-check,.demo:not(.live) .s-alarm{display:none}.demo.live[data-s=ok] .s-ok,.demo.live[data-s=check] .s-check,.demo.live[data-s=alarm] .s-alarm{display:block}.demo[data-s=check] .d-dot,.demo[data-s=check] .d-check i{animation:.5s ease-in-out infinite alternate d-pulse}.demo[data-s=alarm]{--acc:#ff6b6b}.demo[data-s=alarm] .d-dot{background:#ff6b6b;animation:.35s ease-in-out infinite alternate d-pulse;box-shadow:0 0 26px #ff6b6b}.demo[data-s=alarm] .d-check.bad i{background:#ff6b6b}.demo[data-s=alarm] .d-check.bad{border-color:#ff6b6b}.demo[data-s=alarm] .s-alarm{color:#ff6b6b}@keyframes d-pulse{to{opacity:.35}}.d-player{border:1px solid var(--d-line);font:500 11px / 1 var(--f-mono,monospace);color:var(--d-mute);background:#05070dd9;border-radius:999px;align-items:center;gap:12px;padding:10px 14px;display:flex}.d-player i{border-left:11px solid var(--acc);border-top:7px solid #0000;border-bottom:7px solid #0000;width:0;height:0}.d-track{background:var(--d-line);border-radius:4px;flex:1;height:4px;overflow:hidden}.d-track b{height:100%;width:calc(var(--t,0) * 100%);background:var(--acc);display:block}.demo .d-head{font:500 11px / 1 var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-top:4px}.d-pick{border:1px solid var(--d-line);background:#05070dd1;border-radius:9px;align-items:center;gap:12px;padding:10px 12px;font-weight:500;display:flex}.d-term{font:500 clamp(12px, 2cqw, 15px) / 1.9 var(--f-mono,monospace)}.d-term p>span:first-child{min-width:7.5em;color:var(--d-mute);display:inline-block}.d-term p b+span{min-width:0!important;color:var(--d-ink)!important}.d-term b{color:var(--acc)}.d-term u{color:#22e07a;margin-right:.8em;text-decoration:none}.d-cur{background:var(--acc);vertical-align:-.15em;width:.55em;height:1em;margin-left:2px;animation:.5s step-end infinite film-blink;display:inline-block}.demo.live [data-at]:not([data-type]){opacity:0;transition:opacity .22s linear,transform .4s cubic-bezier(.16,1,.3,1);transform:translateY(8px)}.demo.live [data-at].in{opacity:1;transform:none}.demo.live .d-tag[data-at],.demo.live u[data-at]{transition:opacity .12s linear,transform .4s cubic-bezier(.34,1.8,.5,1);transform:scale(.4)}.demo.live .d-tag[data-at].in,.demo.live u[data-at].in{transform:none}.demo.live [data-until]:not(.in),.demo:not(.live) [data-until]{display:none}.demo{container-type:inline-size}@media (width<=620px){.demo{aspect-ratio:auto}.d-doc{grid-template-columns:1fr}.d-doc-side{border-left:0;padding-left:0}.d-who span{white-space:normal}}
