@font-face{font-family:"Geist";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The live demo, version 2.1 (Ty's rendering, approved 2026-10-13): the drawing's own styles, scoped to the page. Generated by .s195/demo-css.mjs from the rendering; the drawing wins. */
.pg-demo.pg-demo h1,.pg-demo.pg-demo h2,.pg-demo.pg-demo h3,.pg-demo.pg-demo p{font-family:inherit;line-height:inherit;text-wrap:wrap;letter-spacing:normal}
.pg-demo.pg-demo .nav{position:relative;top:auto;left:auto;right:auto;height:auto;justify-content:flex-start;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none;transition:none;z-index:5;padding:0}
.pg-demo.pg-demo .mono{font-family:inherit}
.pg-demo.pg-demo input{padding:1px 2px}
.pg-demo.pg-demo{
 --bg:#080c0f;--bg2:#0c1216;--s1:#10171c;--s2:#151e25;--s3:#1c2730;--ln:#1b252d;--ln2:#283540;
 --tx:#f4f2ec;--mu:#aeb5bb;--dim:#7f8991;--gold:#f5bf23;--gold2:#ffd970;--gs:rgba(245,191,35,.12);--gb:rgba(245,191,35,.4);
 --room:#4fc1b0;--rooms:rgba(79,193,176,.13);--roomb:rgba(79,193,176,.42);
 --vio:#a48bf0;--vios:rgba(164,139,240,.15);--viob:rgba(164,139,240,.45);
 --grn:#6cc76c;--grs:rgba(108,199,108,.13);--red:#f06b64;--rs:rgba(240,107,100,.13);--amb:#e9a23b;--ams:rgba(233,162,59,.14);--blue:#62abe0;--bs:rgba(98,171,224,.14);--blueb:rgba(98,171,224,.45);
 --disp:"Geist",ui-sans-serif,system-ui,sans-serif;--body:"Geist",ui-sans-serif,system-ui,sans-serif;--fig:"Geist Mono",ui-monospace,Menlo,monospace;
 color-scheme:dark}
.pg-demo.pg-demo *{box-sizing:border-box}
.pg-demo.pg-demo, .pg-demo.pg-demo{background:var(--bg);color:var(--tx)}
.pg-demo.pg-demo{font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.pg-demo.pg-demo button{font:inherit;color:inherit;background:none;border:0;padding:0}
.pg-demo.pg-demo :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pg-demo.pg-demo .stage{display:flex;justify-content:center}
.pg-demo.pg-demo .dev{width:100%;max-width:1360px;background:var(--bg);border:1px solid var(--ln);border-radius:18px;overflow:clip;position:relative}
.pg-demo.pg-demo .site{container:site/inline-size;position:relative;background:var(--bg)}
.pg-demo.pg-demo .page{display:flex;flex-direction:column;position:relative;isolation:isolate;min-height:760px}
.pg-demo.pg-demo .page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 12% 40%,rgba(245,191,35,.05),transparent 70%),radial-gradient(50% 50% at 80% 60%,rgba(164,139,240,.04),transparent 70%)}
.pg-demo.pg-demo .nav{display:flex;align-items:center;gap:26px;padding:18px 28px 8px;position:relative;z-index:5}
.pg-demo.pg-demo .brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;cursor:pointer}
.pg-demo.pg-demo .brand svg{width:24px;height:24px}
.pg-demo.pg-demo .nl{display:flex;gap:24px;margin-left:12px}.pg-demo.pg-demo .nl span{font-size:14px;color:var(--mu);cursor:pointer;font-weight:500}.pg-demo.pg-demo .nl span:hover{color:var(--tx)}
.pg-demo.pg-demo .nsp{flex:1}.pg-demo.pg-demo .nsi{font-size:14px;color:var(--mu);cursor:pointer;font-weight:500}.pg-demo.pg-demo .nsi:hover{color:var(--tx)}
.pg-demo.pg-demo .burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--ln2);place-items:center;cursor:pointer}
.pg-demo.pg-demo .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:600;border-radius:12px;padding:10px 16px;cursor:pointer;border:1px solid var(--ln2);color:var(--tx);white-space:nowrap;line-height:1.1}
.pg-demo.pg-demo .btn:hover{border-color:var(--gb);color:var(--gold)}
.pg-demo.pg-demo .btn.g{background:linear-gradient(150deg,var(--gold2),var(--gold));color:#141006;border-color:transparent}.pg-demo.pg-demo .btn.g:hover{filter:brightness(1.06);color:#141006}
.pg-demo.pg-demo .btn.sm{font-size:12.5px;padding:7px 12px;border-radius:10px}
.pg-demo.pg-demo .btn.xs{font-size:12px;padding:5px 10px;border-radius:9px}
.pg-demo.pg-demo .btn.rm{border-color:var(--roomb);color:var(--room)}.pg-demo.pg-demo .btn.rm:hover{background:var(--rooms)}
.pg-demo.pg-demo .btn.done{border-color:transparent;background:var(--grs);color:var(--grn)}
.pg-demo.pg-demo .lk{color:var(--gold);cursor:pointer;font-weight:600}.pg-demo.pg-demo .lk:hover{text-decoration:underline}
.pg-demo.pg-demo .aib{font-family:var(--fig);font-size:9.5px;font-weight:700;color:var(--gold);border:1px solid var(--gb);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.pg-demo.pg-demo .pill{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pg-demo.pg-demo .pg{background:var(--grs);color:var(--grn)}.pg-demo.pg-demo .pgo{background:var(--gs);color:var(--gold)}.pg-demo.pg-demo .pr{background:var(--rs);color:var(--red)}.pg-demo.pg-demo .pa{background:var(--ams);color:var(--amb)}.pg-demo.pg-demo .pm{background:var(--rooms);color:var(--room)}.pg-demo.pg-demo .pv{background:var(--vios);color:var(--vio)}.pg-demo.pg-demo .pb{background:var(--bs);color:var(--blue)}.pg-demo.pg-demo .pd{background:var(--s3);color:var(--dim)}
.pg-demo.pg-demo .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;border:1.5px solid var(--ln2);background:var(--s2);color:var(--mu);position:relative}
.pg-demo.pg-demo .av.you{background:var(--rooms);color:var(--room);border-color:var(--roomb);font-size:9.5px}.pg-demo.pg-demo .av.sm.you{font-size:7.5px}
.pg-demo.pg-demo .av.do{background:var(--vios);color:var(--vio);border-color:var(--viob)}
.pg-demo.pg-demo .av.sp{background:var(--bs);color:var(--blue);border-color:var(--blueb)}
.pg-demo.pg-demo .av.eo{background:var(--gs);color:var(--gold);border-color:var(--gb)}
.pg-demo.pg-demo .av.live::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--grn);border:2px solid var(--s1)}
.pg-demo.pg-demo .av.sm{width:22px;height:22px;font-size:9px}
.pg-demo.pg-demo{--disp:"Geist",ui-sans-serif,system-ui,sans-serif;--body:"Geist",ui-sans-serif,system-ui,sans-serif;--fig:"Geist Mono",ui-monospace,monospace;--bg:#060809;--bg2:#0a0e11;--s1:#0f1519;--s2:#151c21;--s3:#1d262c;--ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.13);--soft:#9aa1a7}
.pg-demo.pg-demo{font-feature-settings:"tnum" 1,"ss01" 1}
.pg-demo.pg-demo .page::before{background:none!important}
.pg-demo.pg-demo .dbar{display:flex;align-items:center;gap:18px;padding:12px 22px;border-bottom:1px solid var(--ln);background:#080b0d;position:relative;z-index:30}
.pg-demo.pg-demo .dbar .brand{font-size:16px;gap:8px}.pg-demo.pg-demo .dbar .brand svg{width:20px;height:20px}
.pg-demo.pg-demo .dtl{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:18px;border-left:1px solid var(--ln2)}
.pg-demo.pg-demo .dtl b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pg-demo.pg-demo .demo-tag{font-size:11.5px;color:var(--room);cursor:default;white-space:nowrap}
.pg-demo.pg-demo .scrub{flex:1;display:flex;gap:6px;min-width:0;max-width:620px;margin-left:auto}
.pg-demo.pg-demo .seg{flex:1;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0;padding:4px 2px}
.pg-demo.pg-demo .seg b{font-size:12px;font-weight:500;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-demo.pg-demo .seg.on b{color:var(--tx)}
.pg-demo.pg-demo .seg:hover b{color:var(--gold)}
.pg-demo.pg-demo .seg .sf{display:none}
.pg-demo.pg-demo .seg i{display:block;height:4px;border-radius:2px;background:var(--s3);position:relative;overflow:hidden}
.pg-demo.pg-demo .seg i u{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .5s}
.pg-demo.pg-demo .seg i s{position:absolute;top:0;bottom:0;width:2px;background:#080b0d}
.pg-demo.pg-demo .dbar .btn{border-radius:999px;font-family:var(--body)}
.pg-demo.pg-demo .dbar .ex{font-size:13px;color:var(--soft);cursor:pointer;white-space:nowrap}.pg-demo.pg-demo .dbar .ex:hover{color:var(--tx)}
.pg-demo.pg-demo .app{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);position:relative;background:var(--bg2)}
.pg-demo.pg-demo .side{border-right:1px solid var(--ln);padding:16px 12px;display:flex;flex-direction:column;gap:3px;background:#080b0d}
.pg-demo.pg-demo .side .lg{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;margin:0 6px 12px;color:var(--soft)}.pg-demo.pg-demo .side .lg svg{width:16px;height:16px}
.pg-demo.pg-demo .ni{font-size:13.5px;color:var(--soft);padding:8px 10px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:9px}
.pg-demo.pg-demo .ni:hover{background:var(--s2);color:var(--tx)}.pg-demo.pg-demo .ni.on{background:var(--s2);color:var(--tx);box-shadow:inset 2px 0 0 var(--gold)}
.pg-demo.pg-demo .ni i{width:6px;height:6px;border-radius:2px;background:var(--ln2)}.pg-demo.pg-demo .ni.on i{background:var(--gold)}
.pg-demo.pg-demo .role{margin-top:auto;font-size:12px;color:var(--dim);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;cursor:pointer}.pg-demo.pg-demo .role b{display:block;color:var(--tx);font-size:13px;font-weight:500}
.pg-demo.pg-demo .role:hover{border-color:var(--ln2)}
.pg-demo.pg-demo .ac{display:flex;flex-direction:column;min-width:0;min-height:0}
.pg-demo.pg-demo .abar{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--ln)}
.pg-demo.pg-demo .abar .srch{flex:1;max-width:320px;font-size:13px;color:var(--dim);background:var(--s1);border:1px solid var(--ln);border-radius:999px;padding:6px 12px;cursor:pointer}
.pg-demo.pg-demo .abar .create{margin-left:auto;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--gold);color:#141006;cursor:pointer}
.pg-demo.pg-demo .abar .me{width:30px;height:30px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--soft);cursor:default}
.pg-demo.pg-demo .view{flex:1;min-height:0;padding:18px 20px;display:flex;flex-direction:column;gap:14px;overflow:hidden;animation:vin .45s ease both}
@keyframes vin{from{opacity:0;transform:translateY(6px)}}
.pg-demo.pg-demo .vh{display:flex;align-items:baseline;gap:12px}.pg-demo.pg-demo .vh h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em}.pg-demo.pg-demo .vh span{font-size:13px;color:var(--dim)}
.pg-demo.pg-demo .fcg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;flex:1;min-height:0}
.pg-demo.pg-demo .fcl{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.pg-demo.pg-demo .num{display:flex;align-items:flex-end;gap:20px;padding:4px 2px;cursor:pointer;border-radius:12px}
.pg-demo.pg-demo .num:hover .v{color:var(--gold2)}
.pg-demo.pg-demo .num .k{font-size:12.5px;color:var(--dim)}.pg-demo.pg-demo .num .v{font-size:56px;font-weight:600;letter-spacing:-.045em;line-height:1;transition:color .4s}
.pg-demo.pg-demo .num .v.dn{color:var(--amb)}
.pg-demo.pg-demo .num .d{font-size:13px;color:var(--soft);padding-bottom:6px}
.pg-demo.pg-demo .cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.pg-demo.pg-demo .cat{padding:10px 12px;cursor:pointer;border-left:1px solid var(--ln)}.pg-demo.pg-demo .cat:first-child{border-left:0}
.pg-demo.pg-demo .cat:hover{background:var(--s1)}.pg-demo.pg-demo .cat.on{background:rgba(245,191,35,.08);box-shadow:inset 0 -2px 0 var(--gold)}
.pg-demo.pg-demo .cat span{display:block;font-size:12px;color:var(--dim)}.pg-demo.pg-demo .cat b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pg-demo.pg-demo .tbl{flex:1;min-height:0}
.pg-demo.pg-demo .tr{display:grid;grid-template-columns:minmax(0,1.7fr) 80px minmax(0,1fr) 120px;gap:12px;align-items:center;padding:9px 10px;border-top:1px solid var(--ln);font-size:13px;cursor:pointer}
.pg-demo.pg-demo .tr.hd{font-size:11.5px;color:var(--dim);cursor:default;border-top:0}
.pg-demo.pg-demo .tr:not(.hd):hover{background:var(--s1)}
.pg-demo.pg-demo .tr.on{background:var(--s1);box-shadow:inset 3px 0 0 var(--gold)}
.pg-demo.pg-demo .tr b{font-weight:500;display:block}.pg-demo.pg-demo .tr b small{display:block;font-weight:400;font-size:11.5px;color:var(--dim)}.pg-demo.pg-demo .tr .m{text-align:right}
.pg-demo.pg-demo .tr .rp{color:var(--soft)}
.pg-demo.pg-demo .sig{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;white-space:nowrap}.pg-demo.pg-demo .sig i{width:7px;height:7px;border-radius:50%}
.pg-demo.pg-demo .sig.r{color:var(--red)}.pg-demo.pg-demo .sig.r i{background:var(--red);box-shadow:0 0 0 3px var(--rs)}.pg-demo.pg-demo .sig.a{color:var(--amb)}.pg-demo.pg-demo .sig.a i{background:var(--amb)}.pg-demo.pg-demo .sig.g{color:var(--grn)}.pg-demo.pg-demo .sig.g i{background:var(--grn)}.pg-demo.pg-demo .sig.n{color:var(--dim)}.pg-demo.pg-demo .sig.n i{background:var(--dim)}
.pg-demo.pg-demo .dp{border-left:1px solid var(--ln);padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:10px;min-height:0}
.pg-demo.pg-demo .dp h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}.pg-demo.pg-demo .dp .sub{font-size:12.5px;color:var(--dim)}
.pg-demo.pg-demo .dp .empty{color:var(--dim);font-size:13.5px;margin:auto 0;text-align:center}
.pg-demo.pg-demo .evb{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px;border:1px solid var(--ln2);cursor:pointer}
.pg-demo.pg-demo .evb:hover{border-color:var(--gold)}
.pg-demo.pg-demo .evl{display:flex;flex-direction:column;gap:8px}
.pg-demo.pg-demo .evi{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;font-size:13px;color:var(--soft);line-height:1.4}.pg-demo.pg-demo .evi i{width:7px;height:7px;border-radius:50%;margin-top:6px}.pg-demo.pg-demo .evi.r i{background:var(--red)}.pg-demo.pg-demo .evi.a i{background:var(--amb)}
.pg-demo.pg-demo .evi span{color:var(--tx)}.pg-demo.pg-demo .evi em{display:block;font-style:normal;font-size:11.5px;color:var(--dim)}
.pg-demo.pg-demo .dp .btn{border-radius:999px;align-self:flex-start}
.pg-demo.pg-demo .opg{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;flex:1;min-height:0}
.pg-demo.pg-demo .ol{display:flex;flex-direction:column;gap:0;border-right:1px solid var(--ln);padding-right:14px}
.pg-demo.pg-demo .oc{padding:11px 10px;border-top:1px solid var(--ln);cursor:pointer;font-size:12.5px}
.pg-demo.pg-demo .oc:first-child{border-top:0}
.pg-demo.pg-demo .oc:hover{background:var(--s1)}.pg-demo.pg-demo .oc.on{background:rgba(245,191,35,.08);box-shadow:inset 3px 0 0 var(--gold)}
.pg-demo.pg-demo .oc b{display:block;font-size:13.5px;font-weight:500}.pg-demo.pg-demo .oc span{color:var(--dim);font-size:12px}
.pg-demo.pg-demo .oc .live{display:flex;align-items:center;gap:6px;color:var(--room);font-weight:500;font-size:12px;margin-top:4px}.pg-demo.pg-demo .oc .live i{width:7px;height:7px;border-radius:50%;background:var(--room)}
.pg-demo.pg-demo .rec{display:flex;flex-direction:column;gap:14px;min-height:0}
.pg-demo.pg-demo .rcard{display:flex;flex-direction:column;gap:6px}
.pg-demo.pg-demo .rcard .rh2{display:flex;align-items:center;gap:8px;padding-bottom:4px}.pg-demo.pg-demo .rcard .rh2 h3{margin:0;font-size:16px;font-weight:600}.pg-demo.pg-demo .rcard .rh2 .x{margin-left:auto}
.pg-demo.pg-demo .rf{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:baseline;font-size:13px;padding:6px 8px;border-radius:8px;cursor:pointer;position:relative;border-top:1px solid var(--ln)}
.pg-demo.pg-demo .rf:hover{background:var(--s1)}
.pg-demo.pg-demo .rf span{color:var(--dim)}.pg-demo.pg-demo .rf b{font-weight:500}.pg-demo.pg-demo .rf.wait b{color:#3d4953;font-weight:400}.pg-demo.pg-demo .rf.wait{cursor:default}.pg-demo.pg-demo .rf.wait:hover{background:none}
.pg-demo.pg-demo .rf em{font-style:normal;font-family:var(--fig);font-size:11px;color:var(--gold)}
.pg-demo.pg-demo .rf.ok b::after{content:"\2713";color:var(--grn);margin-left:6px;font-size:11px}
.pg-demo.pg-demo .rf.fresh b{animation:typ .5s steps(12)}
@keyframes typ{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pg-demo.pg-demo .qb2{margin:2px 8px 4px 150px;font-size:12.5px;color:var(--tx);background:var(--rooms);border-left:2px solid var(--room);border-radius:0 9px 9px 0;padding:6px 10px}
.pg-demo.pg-demo .qb2 em{display:block;font-style:normal;font-family:var(--fig);font-size:10.5px;color:var(--room)}
.pg-demo.pg-demo .rcard .btn{border-radius:999px}
.pg-demo.pg-demo .mail{font-size:13px;color:var(--soft);line-height:1.55;border-left:2px solid var(--ln2);padding:4px 0 4px 12px}
.pg-demo.pg-demo .mail b{color:var(--tx);font-weight:500}
.pg-demo.pg-demo .vpg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;flex:1;min-height:0}
.pg-demo.pg-demo .roll{display:flex;flex-direction:column;gap:6px;min-height:0}
.pg-demo.pg-demo .rollh{display:flex;align-items:flex-end;gap:16px;cursor:pointer;border-radius:10px;padding:4px 2px 10px}
.pg-demo.pg-demo .rollh:hover .v{color:var(--gold2)}
.pg-demo.pg-demo .rollh .v{font-size:48px;font-weight:600;letter-spacing:-.045em;line-height:1}.pg-demo.pg-demo .rollh span{font-size:12.5px;color:var(--dim)}
.pg-demo.pg-demo .rr{display:grid;grid-template-columns:120px minmax(0,1fr) 80px 70px;gap:12px;align-items:center;font-size:13px;padding:9px 6px;border-top:1px solid var(--ln);cursor:pointer}
.pg-demo.pg-demo .rr:hover{background:var(--s1)}.pg-demo.pg-demo .rr.on{background:var(--s1);box-shadow:inset 3px 0 0 var(--gold)}
.pg-demo.pg-demo .rr .bar{height:10px;border-radius:5px;background:var(--s3);position:relative;overflow:hidden}.pg-demo.pg-demo .rr .bar u{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:5px}.pg-demo.pg-demo .rr .bar s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tx);opacity:.6}
.pg-demo.pg-demo .rr .m{text-align:right}.pg-demo.pg-demo .rr .acc{font-size:12px;text-align:right;color:var(--soft)}
.pg-demo.pg-demo .rr.hd{font-size:11.5px;color:var(--dim);cursor:default;border-top:0}.pg-demo.pg-demo .rr.hd:hover{background:none}
.pg-demo.pg-demo .ovr{border:1px solid var(--gb);background:rgba(245,191,35,.07);border-radius:12px;padding:10px 12px;font-size:12.5px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:6px}
.pg-demo.pg-demo .ovr b{font-size:17px;font-weight:600;display:block}.pg-demo.pg-demo .ovr span{color:var(--soft);font-size:12px}
.pg-demo.pg-demo .ovr p{grid-column:1/-1;margin:0;color:var(--soft);font-size:12.5px}
.pg-demo.pg-demo .need{display:flex;flex-direction:column;gap:0}
.pg-demo.pg-demo .nd{border-top:1px solid var(--ln);padding:10px 2px;font-size:13px;display:flex;flex-direction:column;gap:4px;cursor:default}
.pg-demo.pg-demo .nd b{font-weight:500}.pg-demo.pg-demo .nd span{color:var(--dim);font-size:12px}
.pg-demo.pg-demo .nd .btn{border-radius:999px}
.pg-demo.pg-demo .spot{position:absolute;z-index:20;border-radius:12px;pointer-events:none;box-shadow:0 0 0 2px rgba(245,191,35,.7),0 0 0 9999px rgba(3,5,7,.58);transition:left .8s cubic-bezier(.45,0,.25,1),top .8s cubic-bezier(.45,0,.25,1),width .8s cubic-bezier(.45,0,.25,1),height .8s cubic-bezier(.45,0,.25,1),opacity .4s;opacity:0}
.pg-demo.pg-demo .spot.on{opacity:1}
.pg-demo.pg-demo .gcur{position:absolute;left:55%;top:45%;z-index:25;pointer-events:none;transition:left .9s cubic-bezier(.45,0,.25,1),top .9s cubic-bezier(.45,0,.25,1),opacity .3s;opacity:0}
.pg-demo.pg-demo .gcur.on{opacity:1}
.pg-demo.pg-demo .gcur svg{display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.pg-demo.pg-demo .gcur span{position:absolute;left:18px;top:18px;background:var(--gold);color:#141006;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:7px;white-space:nowrap}
.pg-demo.pg-demo .rip{position:absolute;z-index:24;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;animation:rp .6s ease-out forwards}
@keyframes rp{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.pg-demo.pg-demo .hint{position:absolute;z-index:26;max-width:260px;background:var(--room);color:#06201c;font-size:13px;font-weight:600;padding:8px 12px;border-radius:10px;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:left .6s,top .6s}
.pg-demo.pg-demo .hint::before{content:"";position:absolute;left:14px;top:-5px;width:10px;height:10px;background:var(--room);transform:rotate(45deg)}
.pg-demo.pg-demo .endov{position:absolute;inset:0;z-index:30;background:rgba(5,8,10,.86);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;animation:vin .5s ease both}
.pg-demo.pg-demo .endov h2{margin:0;font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1}
.pg-demo.pg-demo .endov p{margin:0;color:var(--soft);max-width:540px;font-size:15px;line-height:1.5}
.pg-demo.pg-demo .endov .go{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.pg-demo.pg-demo .endov .btn{border-radius:999px;padding:11px 20px}
.pg-demo.pg-demo .cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 22px;border-top:1px solid var(--ln);background:#080b0d;position:relative;z-index:30}
.pg-demo.pg-demo .orb{width:48px;height:48px;border-radius:50%;flex:none;cursor:default;background:radial-gradient(circle at 34% 30%,#fff3c4 0,#f7c843 24%,#9a6f0e 55%,#241a06 82%);box-shadow:0 0 0 1px rgba(245,191,35,.35),0 0 26px rgba(245,191,35,.25)}
.pg-demo.pg-demo .orb.talk{animation:pul 1.1s ease-in-out infinite}
@keyframes pul{50%{transform:scale(1.06);box-shadow:0 0 0 1px rgba(245,191,35,.5),0 0 34px rgba(245,191,35,.4)}}
.pg-demo.pg-demo .ctx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pg-demo.pg-demo .ctx .who{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
.pg-demo.pg-demo .ctx .who b{color:var(--gold);font-weight:600}
.pg-demo.pg-demo .ctx .why{cursor:default}.pg-demo.pg-demo .ctx .why em{font-style:normal;color:var(--room)}
.pg-demo.pg-demo .say{font-size:21px;line-height:1.35;letter-spacing:-.015em;font-weight:500;min-height:56px}
.pg-demo.pg-demo .say .sp2{color:var(--tx)}.pg-demo.pg-demo .say .un{color:#2f383f}
.pg-demo.pg-demo .beats{display:flex;gap:6px;align-items:center}
.pg-demo.pg-demo .bt{width:26px;height:26px;border-radius:50%;border:1px solid var(--ln2);display:grid;place-items:center;font-size:11px;color:var(--dim);cursor:pointer}
.pg-demo.pg-demo .bt:hover{border-color:var(--gold);color:var(--gold)}
.pg-demo.pg-demo .bt.dn{background:var(--room);border-color:var(--room);color:#06201c}.pg-demo.pg-demo .bt.now{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 3px rgba(245,191,35,.15)}
.pg-demo.pg-demo .ctl{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pg-demo.pg-demo .ctl .row{display:flex;gap:8px;align-items:center}
.pg-demo.pg-demo .ctl .btn{border-radius:999px;padding:8px 14px;font-size:13px}
.pg-demo.pg-demo .btn.drive.on{background:var(--rooms);border-color:var(--roomb);color:var(--room)}
.pg-demo.pg-demo .btn.askb.on{border-color:var(--gold);color:var(--gold)}
.pg-demo.pg-demo .askp{position:absolute;right:22px;bottom:calc(100% + 10px);width:400px;max-height:420px;overflow:auto;background:#0d1214;border:1px solid var(--ln2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 30px 60px rgba(0,0,0,.6);animation:vin .25s ease both}
.pg-demo.pg-demo .askp .lbl{font-size:12px;color:var(--dim)}
.pg-demo.pg-demo .sq{font-size:13px;color:var(--soft);border:1px solid var(--ln2);border-radius:999px;padding:6px 12px;cursor:pointer;align-self:flex-start;text-align:left}
.pg-demo.pg-demo .sq:hover{border-color:var(--gold);color:var(--gold)}
.pg-demo.pg-demo .qq{font-size:13px;font-weight:600;color:var(--room)}
.pg-demo.pg-demo .qan{font-size:13px;color:var(--soft);line-height:1.5;border-left:2px solid var(--ln2);padding-left:10px}
.pg-demo.pg-demo .inp{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--ln2);border-radius:999px;padding:3px 3px 3px 14px}
.pg-demo.pg-demo .inp:focus-within{border-color:var(--gold)}
.pg-demo.pg-demo .inp input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:13.5px;padding:7px 0}
.pg-demo.pg-demo .inp input::placeholder{color:var(--dim)}
.pg-demo.pg-demo .send{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;background:var(--gold);color:#141006}
.pg-demo.pg-demo .burger{display:none}
@container site (min-width:1350px){.pg-demo.pg-demo .page{height:860px}}
@container site (max-width:1349px){.pg-demo.pg-demo .app{min-height:660px}.pg-demo.pg-demo .scrub{max-width:460px}.pg-demo.pg-demo .dtl .demo-tag{display:none}}
@container site (max-width:1099px){
 .pg-demo.pg-demo .dbar{flex-wrap:wrap}.pg-demo.pg-demo .scrub{order:5;max-width:none;width:100%;margin-left:0;flex:none}
 .pg-demo.pg-demo .fcg, .pg-demo.pg-demo .vpg{grid-template-columns:minmax(0,1fr)}.pg-demo.pg-demo .opg{grid-template-columns:minmax(0,1fr)}.pg-demo.pg-demo .ol{border-right:0;padding-right:0}.pg-demo.pg-demo .dp{border-left:0;padding-left:0;border-top:1px solid var(--ln);padding-top:14px}
 .pg-demo.pg-demo .app{min-height:0}.pg-demo.pg-demo .view{overflow:visible}.pg-demo.pg-demo .tbl{flex:none}
 .pg-demo.pg-demo .cap{grid-template-columns:auto minmax(0,1fr)}.pg-demo.pg-demo .ctl{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
 .pg-demo.pg-demo .askp{left:22px;right:22px;width:auto}}
@container site (max-width:760px){
 .pg-demo.pg-demo .page{min-height:100%}
 .pg-demo.pg-demo .dbar{padding:46px 14px 10px;gap:10px}.pg-demo.pg-demo .dtl{display:none}.pg-demo.pg-demo .dbar .ex{display:none}.pg-demo.pg-demo .burger{display:grid;margin-left:auto}
 .pg-demo.pg-demo .seg b{font-size:11.5px}.pg-demo.pg-demo .seg .lf{display:none}.pg-demo.pg-demo .seg .sf{display:inline}
 .pg-demo.pg-demo .app{grid-template-columns:minmax(0,1fr)}.pg-demo.pg-demo .side{display:none}.pg-demo.pg-demo .abar .srch{display:none}
 .pg-demo.pg-demo .view{padding:14px}.pg-demo.pg-demo .num .v{font-size:40px}.pg-demo.pg-demo .cats{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-demo.pg-demo .cat:nth-child(3){border-left:0}
 .pg-demo.pg-demo .tr{grid-template-columns:minmax(0,1.5fr) 64px 100px}.pg-demo.pg-demo .tr .ct{display:none}
 .pg-demo.pg-demo .rf{grid-template-columns:96px minmax(0,1fr) auto}.pg-demo.pg-demo .qb2{margin-left:8px}
 .pg-demo.pg-demo .rr{grid-template-columns:90px minmax(0,1fr) 66px}.pg-demo.pg-demo .rr .acc{display:none}
 .pg-demo.pg-demo .endov h2{font-size:32px}
 .pg-demo.pg-demo .cap{position:sticky;bottom:0;padding:12px 14px;gap:12px}.pg-demo.pg-demo .orb{width:36px;height:36px}.pg-demo.pg-demo .say{font-size:16px;min-height:0}.pg-demo.pg-demo .ctx .who .why{display:none}
 .pg-demo.pg-demo .beats{display:none}.pg-demo.pg-demo .ctl .btn{padding:7px 12px}
 .pg-demo.pg-demo .askp{left:10px;right:10px}}
.pg-demo.pg-demo .qv{position:fixed;inset:0;z-index:100;display:none;background:rgba(3,6,8,.72);backdrop-filter:blur(4px);overflow:auto;padding:7vh 16px}
.pg-demo.pg-demo .qv.on{display:block}
.pg-demo.pg-demo .qb{max-width:620px;margin:0 auto;background:var(--s1);border:1px solid var(--ln2);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.6);overflow:hidden;animation:rise .22s ease both}
@keyframes rise{from{transform:translateY(8px);opacity:.3}}
.pg-demo.pg-demo .qcr{font-size:12px;color:var(--dim);padding:12px 22px 0}.pg-demo.pg-demo .qcr span{cursor:pointer}.pg-demo.pg-demo .qcr span:hover{color:var(--gold)}
.pg-demo.pg-demo .qh{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 6px}.pg-demo.pg-demo .qh h2{margin:0;font-family:var(--disp);font-size:23px;letter-spacing:-.015em;line-height:1.2}.pg-demo.pg-demo .qh p{margin:6px 0 0;color:var(--mu);font-size:14px}
.pg-demo.pg-demo .qx{margin-left:auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--dim);flex:none;border:1px solid var(--ln2)}.pg-demo.pg-demo .qx:hover{color:var(--gold);border-color:var(--gb)}
.pg-demo.pg-demo .qc{padding:12px 22px 4px;display:flex;flex-direction:column;gap:10px}
.pg-demo.pg-demo .qf{display:flex;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--ln);margin-top:12px;background:var(--bg2);flex-wrap:wrap}.pg-demo.pg-demo .qf .push{flex:1}.pg-demo.pg-demo .qf .hint{font-size:12px;color:var(--dim)}
.pg-demo.pg-demo .fld{display:flex;flex-direction:column;gap:6px}.pg-demo.pg-demo .fld label{font-size:12.5px;color:var(--dim);font-weight:600}
.pg-demo.pg-demo .fld input, .pg-demo.pg-demo .fld textarea{background:var(--bg2);border:1px solid var(--ln2);border-radius:10px;color:var(--tx);font:inherit;font-size:14px;padding:10px 12px;outline:0;resize:vertical}
.pg-demo.pg-demo .fld input:focus, .pg-demo.pg-demo .fld textarea:focus{border-color:var(--gb)}
.pg-demo.pg-demo .li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mu);padding:8px 0;border-top:1px solid var(--ln)}.pg-demo.pg-demo .li:first-child{border-top:0}.pg-demo.pg-demo .li i{color:var(--grn);font-style:normal;flex:none}.pg-demo.pg-demo .li i.n{font-family:var(--fig);font-size:12px;color:var(--gold);padding-top:2px}.pg-demo.pg-demo .li i.x{color:var(--dim)}
.pg-demo.pg-demo .msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px}
.pg-demo.pg-demo .msg b{font-size:13px}.pg-demo.pg-demo .msg b em{font-style:normal;font-weight:500;color:var(--dim);font-size:12px;margin-left:6px}
.pg-demo.pg-demo .msg p{margin:2px 0 0;font-size:14px;color:var(--mu);line-height:1.5}
.pg-demo.pg-demo .menu{display:flex;flex-direction:column}.pg-demo.pg-demo .menu div{font-size:14px;padding:10px 0;border-top:1px solid var(--ln);color:var(--mu);cursor:pointer}.pg-demo.pg-demo .menu div:first-child{border-top:0}.pg-demo.pg-demo .menu div:hover{color:var(--gold)}
.pg-demo.pg-demo .tip{position:fixed;z-index:200;pointer-events:none;max-width:300px;background:#0c1216;border:1px solid var(--ln2);border-radius:12px;padding:11px 13px;box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;transition:opacity .1s;font-size:12.5px}
.pg-demo.pg-demo .tip.on{opacity:1}.pg-demo.pg-demo .tip b.t{display:block;font-size:13.5px;margin-bottom:4px}.pg-demo.pg-demo .tip .bg{display:block;font-family:var(--fig);font-size:20px;font-weight:700;margin-bottom:6px;color:var(--gold)}
.pg-demo.pg-demo .tip .r{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;padding:5px 0;border-top:1px solid var(--ln);color:var(--mu)}.pg-demo.pg-demo .tip .r i{font-style:normal;font-size:11px;color:var(--dim);padding-top:1px}
.pg-demo.pg-demo .tip .gl{display:block;color:var(--gold);font-weight:600;margin-top:6px;padding-top:6px;border-top:1px solid var(--ln)}
.pg-demo.pg-demo .toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:220;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:calc(100vw - 32px)}
.pg-demo.pg-demo .toast{display:flex;align-items:center;gap:12px;background:#0c1216;border:1px solid var(--ln2);border-radius:12px;padding:10px 12px 10px 14px;font-size:13.5px;box-shadow:0 14px 40px rgba(0,0,0,.5);animation:rise .2s ease both}
.pg-demo.pg-demo .toast .u{color:var(--gold);font-weight:700;cursor:pointer}.pg-demo.pg-demo .toast .x{color:var(--dim);cursor:pointer;font-style:normal}
.pg-demo.pg-demo .spark{position:fixed;z-index:150;width:14px;height:14px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#e9fffb 0,var(--room) 40%,rgba(79,193,176,0) 72%);box-shadow:0 0 18px 6px rgba(79,193,176,.45)}
.pg-demo.pg-demo .t6s{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.pg-demo.pg-demo .t6{padding:11px 14px 12px;border-left:1px solid var(--ln);cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}.pg-demo.pg-demo .t6:first-child{border-left:0}
.pg-demo.pg-demo .t6:hover{background:var(--s1)}.pg-demo.pg-demo .t6.on{background:rgba(245,191,35,.08);box-shadow:inset 0 -2px 0 var(--gold)}
.pg-demo.pg-demo .t6 span{font-size:12px;color:var(--dim);white-space:nowrap}.pg-demo.pg-demo .t6 b{font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.1;transition:color .4s}.pg-demo.pg-demo .t6 b.dn{color:var(--amb)}
.pg-demo.pg-demo .t6.key b{font-size:30px}.pg-demo.pg-demo .t6 em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-demo.pg-demo .t6 em.r{color:var(--red)}.pg-demo.pg-demo .t6 em.g{color:var(--grn)}.pg-demo.pg-demo .t6 em.a{color:var(--amb)}
.pg-demo.pg-demo .rd{display:flex;flex-direction:column;gap:9px}
.pg-demo.pg-demo .rdh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.pg-demo.pg-demo .rpct{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1}.pg-demo.pg-demo .rpct.r{color:var(--red)}.pg-demo.pg-demo .rpct.g{color:var(--grn)}.pg-demo.pg-demo .rpct.n{color:var(--gold)}
.pg-demo.pg-demo .rd h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}.pg-demo.pg-demo .rd .sub{font-size:12.5px;color:var(--soft);line-height:1.45}
.pg-demo.pg-demo .rbar{position:relative;height:56px;margin:4px 0 0;cursor:pointer}
.pg-demo.pg-demo .rbar::before{content:"";position:absolute;left:0;right:0;top:22px;height:10px;border-radius:5px;background:var(--s3)}
.pg-demo.pg-demo .rbar i{position:absolute;top:22px;height:10px;border-radius:5px;background:rgba(108,199,108,.45)}
.pg-demo.pg-demo .rbar s{position:absolute;top:17px;width:2px;height:20px;background:var(--tx);margin-left:-1px}
.pg-demo.pg-demo .rbar u{position:absolute;top:14px;width:3px;height:26px;background:var(--gold);margin-left:-1.5px;text-decoration:none;transition:left .6s}
.pg-demo.pg-demo .rbar u b{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--gold);white-space:nowrap}
.pg-demo.pg-demo .rbar em{position:absolute;top:38px;font-style:normal;font-size:11px;color:var(--dim);transform:translateX(-50%);font-family:var(--fig)}
.pg-demo.pg-demo .rleg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}.pg-demo.pg-demo .rleg i{display:inline-block;width:10px;height:6px;border-radius:3px;margin-right:5px;vertical-align:1px}.pg-demo.pg-demo .rleg i.b{background:rgba(108,199,108,.45)}.pg-demo.pg-demo .rleg i.e{width:2px;height:10px;background:var(--tx);vertical-align:-1px}
.pg-demo.pg-demo .rdk{font-size:12px;color:var(--dim);font-weight:500;margin-top:4px}
.pg-demo.pg-demo .dec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px;border-top:1px solid var(--ln);cursor:pointer;border-radius:8px;font-size:13px}.pg-demo.pg-demo .dec:hover{background:var(--s1)}
.pg-demo.pg-demo .dec b{font-weight:500}.pg-demo.pg-demo .dec b small{display:block;font-weight:400;font-size:11.5px;color:var(--dim)}
.pg-demo.pg-demo .mv{font-size:12.5px;color:var(--soft);line-height:1.45;border-left:2px solid var(--gb);padding:2px 0 2px 10px}.pg-demo.pg-demo .mv.done{border-color:var(--grn);color:var(--grn)}
.pg-demo.pg-demo .vpg .t6s{margin-bottom:6px}
.pg-demo.pg-demo .fcg .dp{overflow:auto}
@container site (max-width:1349px){.pg-demo.pg-demo .t6{padding:10px 10px}.pg-demo.pg-demo .t6 b{font-size:22px}.pg-demo.pg-demo .t6.key b{font-size:25px}}
@container site (max-width:1099px){.pg-demo.pg-demo .t6s{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-demo.pg-demo .t6:nth-child(4){border-left:0}.pg-demo.pg-demo .t6:nth-child(n+4){border-top:1px solid var(--ln)}}
@container site (max-width:760px){.pg-demo.pg-demo .t6s{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-demo.pg-demo .t6:nth-child(odd){border-left:0}.pg-demo.pg-demo .t6:nth-child(n+3){border-top:1px solid var(--ln)}.pg-demo.pg-demo .t6:nth-child(4){border-left:1px solid var(--ln)}.pg-demo.pg-demo .rpct{font-size:32px}}
@media (prefers-reduced-motion:reduce){.pg-demo.pg-demo *{animation:none!important;transition:none!important}}
.pg-demo.pg-demo{position:relative;padding:14px 16px 40px;background:var(--bg)}
.pg-demo.pg-demo .stage{min-height:0;display:flex;align-content:normal;padding:0;margin:0}
.pg-demo.pg-demo .hint{margin-top:0}
.pg-demo.pg-demo a.btn{text-decoration:none;text-align:center}
.pg-demo.pg-demo a.btn.g:hover{color:#141006}
.pg-demo.pg-demo .site{isolation:isolate}
@media (max-width:760px){.pg-demo.pg-demo{padding:0}.pg-demo.pg-demo .dev{border:0;border-radius:0}}