.demo-scene{--dm-loop: 14s;--dm-ink: #ffffff;--dm-muted: #999999;--dm-head: #00bc8c;--dm-bg: #222222;--dm-panel: #303030;--dm-panel-2: #3d3d3d;--dm-line: #464545;--dm-input-bg: #ffffff;--dm-input-ink: #464545;--dm-black: #1a1a1a;--dm-blue: #375a7f;--dm-green: #00bc8c;--dm-amber: #f39c12;--dm-info: #3498db;--dm-danger: #e74c3c;font-family:Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;line-height:1.4}.demo-frame{overflow:hidden;border-radius:.6rem;border:1px solid var(--color-border);background:var(--dm-bg);color:var(--dm-ink);box-shadow:0 1px 2px #00000014}.demo-top{display:flex;align-items:center;gap:.6rem;padding:.45rem .7rem;background:var(--dm-black);border-bottom:1px solid #000}.demo-logo{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-style:italic;letter-spacing:.01em;color:#fff;white-space:nowrap}.demo-logo:before{content:"";width:.85rem;height:.85rem;border-radius:.2rem;background:linear-gradient(135deg,#0278d0,#17b4d9)}.demo-crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;color:var(--dm-muted)}.demo-sim{margin-inline-start:auto;flex-shrink:0;border:1px solid var(--dm-line);border-radius:9999px;padding:.05rem .5rem;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dm-muted)}.demo-body{position:relative;display:flex;min-height:17rem}.demo-side{display:none;flex-direction:column;width:8.75rem;flex-shrink:0;background:var(--dm-black);padding:.4rem 0;font-size:.6875rem}@media(min-width:480px){.demo-side{display:flex}}.demo-mgroup{display:flex;align-items:center;justify-content:space-between;padding:.32rem .6rem;color:#cbd5e1;font-weight:700}.demo-mgroup:after{content:"›";color:var(--dm-muted)}.demo-mgroup.open:after{content:"⌄"}.demo-menu{padding:.28rem .6rem .28rem 1.4rem;color:var(--dm-muted)}.demo-menu.on{background:#2a2f36;color:#fff;box-shadow:inset 3px 0 0 var(--dm-blue)}.demo-main{display:flex;min-width:0;flex:1;flex-direction:column;gap:.55rem;padding:.65rem}.demo-pagetitle{font-weight:700;color:#fff}.demo-panel{display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--dm-line);border-radius:4px;background:var(--dm-panel);padding:10px}.demo-panel-h{margin:-10px -10px 0;padding:7px 10px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dm-head);background:#2b2b2b;border-bottom:1px solid var(--dm-line);border-radius:4px 4px 0 0}.demo-h{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.demo-grid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}.demo-field{display:flex;flex-direction:column;gap:.22rem;min-width:0}.demo-label{font-size:.625rem;letter-spacing:.03em;text-transform:uppercase;color:var(--dm-muted)}.demo-input{display:flex;align-items:center;min-height:2rem;border:1px solid #f1f1f1;border-radius:3px;background:var(--dm-input-bg);color:var(--dm-input-ink);padding:6px;white-space:nowrap;overflow:hidden;box-shadow:inset 0 1px 1px #00000013}.demo-input.area{min-height:3.2rem;align-items:flex-start}.demo-cell{display:flex;align-items:center;min-height:1.7rem;padding:3px 6px;color:var(--dm-ink)}.demo-type{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom}.demo-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--dm-line);border-radius:3px;background:#434343;color:#fff;padding:6px 12px;font-weight:400;white-space:nowrap}.demo-btn.primary{border-color:#375a7f;background:var(--dm-blue);color:#fff}.demo-btn.wa{border-color:transparent;background:var(--dm-green);color:#fff}.demo-check{display:flex;align-items:center;gap:.45rem}.demo-box{display:inline-flex;align-items:center;justify-content:center;width:.95rem;height:.95rem;flex-shrink:0;border:1px solid var(--dm-muted);border-radius:.2rem;background:var(--dm-input);font-size:.65rem;font-style:normal;color:#4ade80}.demo-badge{display:inline-flex;align-items:center;border-radius:.25em;padding:.2em .6em;font-size:.6563rem;font-weight:700;background:var(--dm-line);color:#fff}.demo-badge.blue{background:var(--dm-blue);color:#fff}.demo-badge.green{background:var(--dm-green);color:#fff}.demo-badge.amber{background:var(--dm-amber);color:#fff}.demo-badge.info{background:var(--dm-info);color:#fff}.demo-badge.danger{background:var(--dm-danger);color:#fff}.demo-toggle{display:inline-flex;align-items:center;gap:.3rem;border-radius:9999px;background:var(--dm-green);color:#fff;padding:.1rem .5rem .1rem .2rem;font-weight:700;font-size:.625rem}.demo-toggle:before{content:"";width:.85rem;height:.85rem;border-radius:9999px;background:#fff}.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border-top:1px solid var(--dm-line);background:transparent;padding:5px 6px}.demo-row:nth-of-type(odd){background:var(--dm-panel-2)}.demo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--dm-line)}.demo-tab{padding:5px 12px;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;color:var(--dm-ink)}.demo-tab.on{color:var(--dm-green);background:var(--dm-bg);border-color:var(--dm-line)}.demo-popup{position:absolute;inset-inline:10%;top:14%;z-index:2;border:1px solid var(--dm-line);border-radius:.4rem;background:var(--dm-panel);padding:.7rem;box-shadow:0 18px 40px #0000008c;display:flex;flex-direction:column;gap:.5rem}.demo-toast{position:absolute;right:.7rem;bottom:.7rem;z-index:3;display:inline-flex;align-items:center;gap:.4rem;border-radius:.3rem;background:var(--dm-green);color:#fff;padding:.35rem .65rem;font-weight:700}.demo-note{font-size:.6563rem;color:var(--dm-muted)}.demo-thumb{width:3.2rem;height:3.2rem;flex-shrink:0;border-radius:.3rem;border:1px solid var(--dm-line);background:linear-gradient(135deg,#0278d08c,#17b4d94d)}.demo-qr{width:4rem;height:4rem;flex-shrink:0;border-radius:.25rem;background:conic-gradient(#14171b 25%,#f1f5f9 0 50%,#14171b 0 75%,#f1f5f9 0) 0 0 / 1rem 1rem,#f1f5f9;border:4px solid #f1f5f9}.demo-paper{border-radius:.35rem;background:#fff;color:#1f2937;padding:.7rem;display:flex;flex-direction:column;gap:.32rem}.demo-paper .demo-note{color:#6b7280}.demo-paper .demo-hr{border-top:1px dashed #d1d5db;margin-block:.22rem}.demo-caption{padding-top:.5rem;text-align:center;font-size:.875rem;color:var(--color-text-secondary);font-family:var(--font-body, inherit)}.dm-s1,.dm-s2,.dm-s3,.dm-s4,.dm-s5,.dm-s6,.dm-s7,.dm-s8{animation-duration:var(--dm-loop);animation-timing-function:ease-out;animation-iteration-count:infinite}.dm-s1{animation-name:dm-in1}.dm-s2{animation-name:dm-in2}.dm-s3{animation-name:dm-in3}.dm-s4{animation-name:dm-in4}.dm-s5{animation-name:dm-in5}.dm-s6{animation-name:dm-in6}.dm-s7{animation-name:dm-in7}.dm-s8{animation-name:dm-in8}.dm-t1,.dm-t2,.dm-t3,.dm-t4,.dm-t5,.dm-t6,.dm-t7,.dm-t8{animation-duration:var(--dm-loop);animation-timing-function:steps(18,end);animation-iteration-count:infinite}.dm-t1{animation-name:dm-ty1}.dm-t2{animation-name:dm-ty2}.dm-t3{animation-name:dm-ty3}.dm-t4{animation-name:dm-ty4}.dm-t5{animation-name:dm-ty5}.dm-t6{animation-name:dm-ty6}.dm-t7{animation-name:dm-ty7}.dm-t8{animation-name:dm-ty8}.dm-p1,.dm-p2,.dm-p3,.dm-p4,.dm-p5,.dm-p6,.dm-p7,.dm-p8{animation-duration:var(--dm-loop);animation-timing-function:ease-out;animation-iteration-count:infinite}.dm-p1{animation-name:dm-pr1}.dm-p2{animation-name:dm-pr2}.dm-p3{animation-name:dm-pr3}.dm-p4{animation-name:dm-pr4}.dm-p5{animation-name:dm-pr5}.dm-p6{animation-name:dm-pr6}.dm-p7{animation-name:dm-pr7}.dm-p8{animation-name:dm-pr8}@keyframes dm-in1{0%,3%{opacity:0;transform:translateY(5px)}5%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in2{0%,14%{opacity:0;transform:translateY(5px)}16%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in3{0%,25%{opacity:0;transform:translateY(5px)}27%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in4{0%,36%{opacity:0;transform:translateY(5px)}38%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in5{0%,47%{opacity:0;transform:translateY(5px)}49%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in6{0%,58%{opacity:0;transform:translateY(5px)}60%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in7{0%,69%{opacity:0;transform:translateY(5px)}71%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-in8{0%,80%{opacity:0;transform:translateY(5px)}82%,96%{opacity:1;transform:none}to{opacity:0}}@keyframes dm-ty1{0%,4%{width:0}10%,to{width:100%}}@keyframes dm-ty2{0%,15%{width:0}21%,to{width:100%}}@keyframes dm-ty3{0%,26%{width:0}32%,to{width:100%}}@keyframes dm-ty4{0%,37%{width:0}43%,to{width:100%}}@keyframes dm-ty5{0%,48%{width:0}54%,to{width:100%}}@keyframes dm-ty6{0%,59%{width:0}65%,to{width:100%}}@keyframes dm-ty7{0%,70%{width:0}76%,to{width:100%}}@keyframes dm-ty8{0%,81%{width:0}87%,to{width:100%}}@keyframes dm-pr1{0%,4%{box-shadow:0 0 #0278d000}6%{box-shadow:0 0 0 7px #0278d080}9%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr2{0%,15%{box-shadow:0 0 #0278d000}17%{box-shadow:0 0 0 7px #0278d080}20%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr3{0%,26%{box-shadow:0 0 #0278d000}28%{box-shadow:0 0 0 7px #0278d080}31%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr4{0%,37%{box-shadow:0 0 #0278d000}39%{box-shadow:0 0 0 7px #0278d080}42%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr5{0%,48%{box-shadow:0 0 #0278d000}50%{box-shadow:0 0 0 7px #0278d080}53%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr6{0%,59%{box-shadow:0 0 #0278d000}61%{box-shadow:0 0 0 7px #0278d080}64%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr7{0%,70%{box-shadow:0 0 #0278d000}72%{box-shadow:0 0 0 7px #0278d080}75%,to{box-shadow:0 0 #0278d000}}@keyframes dm-pr8{0%,81%{box-shadow:0 0 #0278d000}83%{box-shadow:0 0 0 7px #0278d080}86%,to{box-shadow:0 0 #0278d000}}@media(prefers-reduced-motion:reduce){.demo-scene [class*=dm-s],.demo-scene [class*=dm-t],.demo-scene [class*=dm-p]{animation:none!important}}