.demo-root{--font-head:var(--font-plus-jakarta), system-ui, sans-serif;--font-body:var(--font-inter), system-ui, sans-serif;--stage-bg:#101113;--stage-panel:#ffffff0a;--stage-line:#ffffff1a;--stage-text:#f4f5f6;--stage-muted:#9ca0a6;--preview-gold:#d8b879;--preview-gold-soft:#d8b87924;--o-bg:var(--background);--o-surface-2:var(--card);--o-line:var(--border);--o-line-strong:var(--border);--o-text:var(--foreground);--o-muted:var(--muted-foreground);--o-faint:color-mix(in srgb, var(--muted-foreground) 65%, transparent);--st-paid:var(--status-paid);--st-paid-bg:var(--status-paid-bg);--st-deposit:var(--status-deposit);--st-deposit-bg:var(--status-deposit-bg);--st-pending:var(--status-pending);--st-pending-bg:var(--status-pending-bg);--st-debt:var(--status-debt);--st-cancel:#6b7280;--now-line:var(--status-debt);--accent:var(--primary);background:var(--background);flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.demo-chrome{background:var(--card);border-bottom:1px solid var(--border);z-index:30;flex:none;align-items:center;gap:10px;padding:10px 12px;display:flex;position:sticky;top:0}.demo-ticket{white-space:nowrap;font-family:var(--font-head);letter-spacing:.5px;color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, transparent);border:1px dashed color-mix(in srgb, var(--primary) 45%, transparent);border-radius:8px;align-items:center;gap:7px;padding:5px 11px;font-size:11px;font-weight:700;display:inline-flex}.demo-ticket svg{width:13px;height:13px}.demo-spacer{flex:1}.demo-btn{border:1px solid var(--border);background:color-mix(in srgb, var(--foreground) 4%, transparent);height:32px;color:var(--muted-foreground);white-space:nowrap;font-family:var(--font-head);cursor:pointer;border-radius:9px;align-items:center;gap:6px;padding:0 11px;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex}.demo-btn:hover{color:var(--foreground);border-color:color-mix(in srgb, var(--foreground) 25%, transparent)}.demo-btn svg{width:14px;height:14px}.demo-btn.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);font-weight:800}.demo-btn.primary:hover{color:var(--primary-foreground);filter:brightness(1.05)}.demo-narrator{background:color-mix(in srgb, var(--primary) 9%, var(--card));border-bottom:1px solid var(--border);flex:none;align-items:center;gap:9px;min-height:40px;padding:7px 14px;display:flex;overflow:hidden}.demo-narrator-ico{color:var(--primary);flex:none;display:inline-flex}.demo-narrator-ico svg{width:16px;height:16px}.demo-narrator-text{font-family:var(--font-body);color:var(--foreground);-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:13px;line-height:1.3;animation:.32s demoNarratorIn;display:-webkit-box;overflow:hidden}.demo-narrator[data-beat=confirmed]{background:color-mix(in srgb, var(--st-paid) 12%, transparent)}.demo-narrator[data-beat=confirmed] .demo-narrator-ico{color:var(--st-paid)}@keyframes demoNarratorIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.demo-seg{background:var(--card);border-bottom:1px solid var(--border);z-index:25;flex:none;gap:4px;padding:4px;display:flex;position:sticky;top:52px}.demo-seg-btn{cursor:pointer;white-space:nowrap;height:42px;color:var(--muted-foreground);font-family:var(--font-head);background:0 0;border:none;border-radius:11px;flex:1;justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:700;transition:all .18s;display:flex;position:relative}.demo-seg-btn svg{width:16px;height:16px}.demo-seg-btn.active{background:color-mix(in srgb, var(--foreground) 6%, transparent);color:var(--foreground);box-shadow:inset 0 0 0 1px var(--border)}.demo-seg-badge{background:var(--accent);min-width:16px;height:16px;color:var(--primary-foreground);font-size:10px;font-weight:800;font-family:var(--font-head);border-radius:99px;justify-content:center;align-items:center;padding:0 4px;animation:.35s cubic-bezier(.18,1.4,.4,1) both demo-pop;display:flex;position:absolute;top:7px;right:14px}.demo-stage{flex:1;min-height:0;position:relative}.demo-pane{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}.demo-pane-head{background:var(--background);border-bottom:1px solid var(--border);font-family:var(--font-head);flex-direction:column;flex:none;gap:3px;padding:9px 14px;display:flex}.demo-pane-head-top{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;align-items:center;gap:8px;font-size:10.5px;font-weight:700;display:flex}.demo-pane-head i{background:var(--accent);border-radius:50%;flex:none;width:7px;height:7px}.demo-pane-head-note{font-family:var(--font-body);color:color-mix(in srgb, var(--foreground) 78%, transparent);font-size:11.5px;font-weight:500;line-height:1.25}.demo-pane-body{flex:1;min-height:0;overflow-y:auto}.demo-pane.right{background:var(--o-bg);color:var(--o-text)}.demo-claimbar{padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:linear-gradient(180deg, transparent, var(--background) 40%);z-index:28;flex:none;position:sticky;bottom:0}.demo-claim-btn{cursor:pointer;color:#111;width:100%;height:50px;font-family:var(--font-head);background:linear-gradient(#fff,#ececec);border:none;border-radius:14px;justify-content:center;align-items:center;gap:9px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .12s;display:flex;box-shadow:0 10px 30px #0006,inset 0 1px #ffffffe6}.demo-claim-btn:active{transform:scale(.985)}.demo-claim-btn svg{width:17px;height:17px}.demo-claim-sub{text-align:center;color:var(--muted-foreground);margin-top:8px;font-size:11px}.demo-claim-sub b{color:var(--foreground)}.demo-scroll-hint{z-index:40;border:1px solid var(--stage-line);background:var(--stage-bg);color:var(--stage-text);font-family:var(--font-head);cursor:pointer;border-radius:99px;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;animation:2.2s ease-in-out infinite demo-hint-bounce;display:none;position:absolute;bottom:14px;left:50%;box-shadow:0 8px 24px #0006}.demo-scroll-hint svg{width:14px;height:14px}@keyframes demo-hint-bounce{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(4px)}}.demo-toast-wrap{z-index:60;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:12px}.demo-toast{pointer-events:auto;background:var(--o-surface-2);border:1px solid var(--o-line-strong);border-left:3px solid var(--st-paid);width:290px;max-width:80vw;color:var(--o-text);font-family:var(--font-body);border-radius:13px;align-items:flex-start;gap:11px;padding:12px 14px;animation:.4s cubic-bezier(.2,1,.3,1) both demo-toast-in;display:flex;box-shadow:0 18px 40px #00000073}.demo-toast.out{animation:.3s forwards demo-toast-out}.demo-toast-ico{background:var(--st-paid-bg);width:32px;height:32px;color:var(--st-paid);border-radius:9px;flex:none;justify-content:center;align-items:center;display:flex}.demo-toast-ico svg{width:17px;height:17px}.demo-toast b{font-family:var(--font-head);font-size:12.5px;font-weight:700;display:block}.demo-toast small{color:var(--o-muted);margin-top:2px;font-size:11.5px;line-height:1.4;display:block}.op{background:var(--o-bg);color:var(--o-text);font-family:var(--font-body);flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.op-head{border-bottom:1px solid var(--o-line);padding:14px 16px 12px}.op-head-top{justify-content:space-between;align-items:center;display:flex}.op-title{font-family:var(--font-head);letter-spacing:-.4px;font-size:20px;font-weight:800}.op-date{color:var(--o-muted);text-transform:capitalize;align-items:center;gap:8px;margin-top:2px;font-size:12.5px;display:flex}.op-today{color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, transparent);text-transform:none;border-radius:99px;padding:2px 8px;font-size:10.5px;font-weight:700}.op-live{color:var(--o-muted);white-space:nowrap;align-items:center;gap:6px;font-size:11px;font-weight:600;display:flex}.op-live-dot{background:var(--accent);border-radius:50%;width:7px;height:7px;animation:2s infinite demo-pulse}.op-legend{flex-wrap:wrap;gap:6px 14px;margin-top:11px;display:flex}.op-leg{color:var(--o-muted);align-items:center;gap:6px;font-size:11px;display:flex}.op-leg i{border-radius:50%;width:8px;height:8px}.op-gridwrap{flex:1;position:relative;overflow:auto}.op-grid{min-width:max-content;display:grid;position:relative}.op-colhead{z-index:6;background:var(--o-bg);grid-template-columns:var(--cols);border-bottom:1px solid var(--o-line);display:grid;position:sticky;top:0}.op-colhead .gutter{width:46px}.op-col-title{border-left:1px solid var(--o-line);font-family:var(--font-head);white-space:nowrap;text-overflow:ellipsis;text-transform:capitalize;padding:9px 10px;font-size:12.5px;font-weight:700;overflow:hidden}.op-col-title small{color:var(--o-faint);font-size:10.5px;font-weight:500;font-family:var(--font-body);display:block}.op-body{grid-template-columns:var(--cols);display:grid;position:relative}.op-gutter{width:46px;position:relative}.op-hour{color:var(--o-faint);font-variant-numeric:tabular-nums;font-size:10.5px;position:absolute;right:7px;transform:translateY(-50%)}.op-lane{border-left:1px solid var(--o-line);position:relative}.op-hline{background:var(--o-line);height:1px;position:absolute;left:0;right:0}.op-hline.half{background:repeating-linear-gradient(90deg, var(--o-line) 0 4px, transparent 4px 9px);opacity:.5}.bk{cursor:default;border:1px solid;border-radius:9px;padding:7px 8px;font-size:11px;position:absolute;left:4px;right:4px;overflow:hidden}.bk-name{white-space:nowrap;text-overflow:ellipsis;color:var(--o-text);font-size:12px;font-weight:700;overflow:hidden}.bk-wa{opacity:.5;width:14px;height:14px;position:absolute;top:6px;right:6px}.bk-buffer{opacity:.18;background-image:repeating-linear-gradient(45deg,currentColor 0 1px,#0000 1px 6px);position:absolute;bottom:0;left:0;right:0}.bk.paid{background:var(--st-paid-bg);border-color:color-mix(in srgb, var(--st-paid) 45%, transparent);color:var(--st-paid)}.bk.deposit{background:var(--st-deposit-bg);border-color:color-mix(in srgb, var(--st-deposit) 45%, transparent);color:var(--st-deposit)}.bk.pending{background:var(--st-pending-bg);border-color:color-mix(in srgb, var(--st-pending) 45%, transparent);color:var(--st-pending)}.bk.debt{background:var(--st-debt-bg);border-color:color-mix(in srgb, var(--st-debt) 45%, transparent);color:var(--st-debt)}.bk-time{color:var(--o-muted);margin-top:2px;font-size:10px}.bk.fresh{box-shadow:0 0 0 1.5px var(--accent), 0 8px 22px #0006}@media (prefers-reduced-motion:no-preference){.bk.fresh{animation:.5s cubic-bezier(.2,1.3,.4,1) demo-bk-in}}.op-now{z-index:5;pointer-events:none;height:0;position:absolute;left:46px;right:0}.op-now:before{content:"";background:var(--now-line);border-radius:50%;width:7px;height:7px;position:absolute;top:-3.5px;left:-3px}.op-now-line{background:var(--now-line);height:1.5px;position:absolute;top:0;left:4px;right:0}.op-empty{z-index:7;text-align:center;background:linear-gradient(180deg, color-mix(in srgb, var(--o-bg) 88%, transparent), var(--o-bg) 60%);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:30px;display:flex;position:absolute;inset:0}.op-empty-ico{border:1.5px dashed var(--o-line-strong);width:56px;height:56px;color:var(--accent);border-radius:16px;justify-content:center;align-items:center;margin-bottom:10px;display:flex}.op-empty-ico svg{width:26px;height:26px}.op-empty h4{font-family:var(--font-head);color:var(--o-text);margin:0;font-size:15px;font-weight:700}.op-empty p{color:var(--o-muted);max-width:230px;margin:0;font-size:12.5px;line-height:1.5}.op-empty .arrow{color:var(--accent);align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700;display:flex}.demo-seg{display:flex}.demo-stage{display:block}.demo-pane{height:100%;display:none}.demo-pane.is-active{display:flex}.demo-pane-head{display:none}@media (max-width:1023px){.demo-root.demo-tour-active .demo-seg{display:none}.demo-root.demo-tour-active .demo-stage{flex-direction:column;display:flex;overflow-y:auto}.demo-root.demo-tour-active .demo-pane{flex:none;display:flex}.demo-root.demo-tour-active .demo-pane.right{min-height:80vh}.demo-root.demo-tour-active .demo-pane-head{display:flex}}.demo-btn.primary{display:none}@media (min-width:1024px){.demo-scroll-hint{display:inline-flex}.demo-seg,.demo-claimbar{display:none}.demo-stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);display:grid}.demo-pane{display:flex!important}.demo-pane.left{border-right:1px solid var(--border)}.demo-pane-head{display:flex}.demo-btn.primary{display:inline-flex}.demo-btn .demo-btn-label{display:inline}.demo-toast-wrap{align-items:flex-end;top:54px;left:auto;right:14px}}.demo-btn .demo-btn-label{display:none}@keyframes demo-pop{0%{opacity:0;transform:scale(.6)}}@keyframes demo-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}70%{box-shadow:0 0 0 7px #0000}to{box-shadow:0 0 #0000}}@keyframes demo-toast-in{0%{opacity:0;transform:translateY(-14px)}}@keyframes demo-toast-out{to{opacity:0;transform:translate(110%)}}@keyframes demo-bk-in{0%{transform:scale(.9)}60%{transform:scale(1.02)}to{transform:none}}