/* Interactive demo, scoped to #demo. Site tokens (--ink, --accent, --font-geist-*) come from the page stylesheet.
   Layout: a single centered stage. The rail and coach line sit on top; below them the three panes (desk,
   conversation, ops view) stack, and at any moment one is in focus (full size) while the others are either a
   one-line strip or hidden. Class names the page already uses (.msg, .thread, .who, .them, .us, .brand, .accent,
   .done, .convo-head) are prefixed dm- to avoid collisions. */
#demo{
  --accent-bright:#f2703c; --bg:#1c1f26; --on-dark:#c9ccd3; --on-dark-strong:#ffffff; --glass:rgba(255,255,255,.08); --pane:#eeece7; --line:#d6d1c7; --line-strong:#b5afa4; --soft:#e4e1da; --peach:#fbe9df; --peach-line:#efc3aa;
  --label:#5f656c; --muted:#454a52; --them:#e2dfd8; --ok:#1f7a4d; --warn:#b4650e; --brand:var(--accent);
  --font-sans:var(--font-geist-sans,'Geist'),Arial,sans-serif; --font-mono:var(--font-geist-sans,'Geist'),Arial,sans-serif;
  font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink);padding-block:calc(64px + 56px) 88px;position:relative
}
#demo > .shell{position:relative}
#demo *,#demo *::before,#demo *::after{box-sizing:border-box}
#demo button,#demo input{font:inherit;color:inherit}
#demo button{cursor:pointer}
#demo button:focus-visible,#demo input:focus-visible,#demo a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
#demo h2,#demo h3,#demo h4,#demo p,#demo ul{font-family:var(--font-sans)}
#demo .mono{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
#demo{font-variant-numeric:tabular-nums}
#demo .dm-who,#demo .state,#demo .slots li .k,#demo .cap-row .k,#demo .rail div span,#demo .dm-coach .n,#demo .decision dt,#demo .ops-block h4,#demo .tl .axis div,#demo .tl .busy{font-weight:600}

/* head */
#demo .demo-head{text-align:center;max-width:720px;margin:0 auto 36px}
#demo .demo-head h2{color:var(--on-dark-strong);margin:8px 0 10px;font-size:clamp(30px,3.6vw,44px);font-weight:630;letter-spacing:-.05em;line-height:1.02;text-wrap:balance}
#demo .demo-head p{margin:0;color:var(--on-dark);font-size:17px;line-height:1.5}
#demo .demo-head p strong{color:#fff;font-weight:600}
#demo .eyebrow{color:#9aa0aa;letter-spacing:.04em;text-transform:none;font-size:13px}
#demo .demo-head h2 em{font-style:normal;color:var(--accent-bright)}

/* stage */
#demo .stage{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
#demo .rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#demo .rail div{border-top:3px solid rgba(255,255,255,.18);padding-top:8px;font-size:13px;color:#9aa0aa;display:flex;gap:8px;align-items:baseline;min-width:0}
#demo .rail div span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
#demo .rail div.dm-done{border-color:var(--on-dark-strong);color:var(--on-dark)}
#demo .rail div.now{border-color:var(--accent-bright);color:var(--on-dark-strong);font-weight:600}
#demo .rail div.now span{color:var(--accent-bright)}

/* coach: the one line that says what is happening and what to do */
#demo .dm-coach{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;background:#fff;color:var(--ink);padding:18px 20px 20px;margin-bottom:4px;border-radius:6px;overflow:hidden}
#demo .dm-coach .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--soft)}
#demo .dm-coach .bar i{display:block;height:100%;background:var(--accent);width:20%;transition:width .5s cubic-bezier(.2,.7,.2,1)}
#demo .dm-coach .cta{color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1.5px solid rgba(20,22,26,.3);white-space:nowrap}
#demo .dm-coach .cta:hover{border-color:var(--ink)}
@keyframes dmnudge{0%,100%{transform:none;box-shadow:none}40%{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 6px rgba(242,112,60,.25)}}
#demo .dm-coach .go.nudge{animation:dmnudge 1.1s ease 2}
#demo .dm-coach .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
#demo .dm-coach p{margin:0;font-size:18px;line-height:1.35}
#demo .dm-coach p b{font-weight:650}
#demo .dm-coach .go{background:var(--accent);border:1px solid var(--accent);color:#fff;white-space:nowrap;padding:12px 18px;font-weight:650;font-size:15px;border-radius:6px;transition:transform .15s,background .15s}
#demo .dm-coach .go:hover{background:var(--accent-bright);transform:translateY(-1px)}
#demo .dm-coach .skip{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font-size:14px;white-space:nowrap}

/* panes and their modes */
#demo .pane{background:var(--pane);border:1.5px solid transparent;min-width:0;border-radius:6px;overflow:hidden}
#demo .pane[data-mode="hidden"]{display:none}
#demo .pane[data-mode="focus"] .strip{display:none}
#demo .pane[data-mode="strip"] .full{display:none}
#demo .pane[data-mode="focus"]{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 40px 80px -20px rgba(0,0,0,.6)}
#demo .pane[data-mode="strip"]{background:var(--glass);color:var(--on-dark)}
#demo .pane-head{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
#demo .pane-body{padding:22px 20px}
#demo .strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 20px;font-size:14px;color:var(--on-dark)}
#demo .strip b{color:var(--on-dark-strong);font-weight:600}
#demo .strip .mono{color:#9aa0aa}
#demo .strip .mono{margin-right:-6px}
#demo .strip .peek{background:transparent;border:1.5px solid rgba(255,255,255,.6);border-radius:6px;padding:6px 12px;color:#fff;font-size:14px;font-weight:600;margin-left:auto}
#demo .strip .peek:hover{background:#fff;color:var(--ink)}
#demo .strip .chip{font-size:14px;padding:6px 10px}
#demo .strip .chip.on{border-color:var(--ok);color:var(--ink)}
#demo .strip .chip.on::before{content:'✓ ';color:var(--ok);font-family:var(--font-mono)}
#demo .strip .rate-inline{display:flex;align-items:center;gap:12px;flex:1 1 280px}
#demo .strip .rate-inline input[type=range]{flex:1}
#demo .strip .rate-inline output{font-family:var(--font-mono);font-weight:600;font-size:16px;color:#fff;min-width:80px;text-align:right}

/* desk (setup) */
#demo .fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
#demo .field{display:flex;flex-direction:column;gap:10px;min-width:0}
#demo .field.wide{grid-column:1 / -1}
#demo .field label,#demo .field .lbl{font-size:16px;font-weight:600}
#demo .chips{display:flex;flex-wrap:wrap;gap:8px}
#demo .chip{border:1.5px solid var(--line-strong);background:transparent;padding:10px 16px;font-size:15px;line-height:1.2;color:var(--ink);border-radius:999px;transition:background .15s,border-color .15s}
#demo .chip:hover{border-color:var(--ink)}
#demo .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#demo input[type=range]{accent-color:var(--accent)}
#demo .chip.ghost{border-style:dashed}
#demo input[type=text]{width:100%;border:1.5px solid var(--line-strong);background:transparent;padding:11px 13px;font-size:16px}
#demo .rate{display:flex;justify-content:space-between;align-items:baseline}
#demo .rate output{font-family:var(--font-mono);font-weight:600;font-size:16px}
#demo input[type=range]{width:100%;accent-color:var(--accent)}
#demo .hint{font-size:14px;color:var(--muted);margin:0}
#demo .desk-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;grid-column:1 / -1}
#demo .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;font-weight:650;font-size:16px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;border-radius:6px;transition:transform .15s,box-shadow .15s,background .15s}
#demo .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,22,26,.18)}
#demo .btn.secondary{background:#fff;color:var(--ink)}
#demo .btn.secondary:hover{background:var(--soft)}
#demo .btn.dm-accent{background:var(--accent);border-color:var(--accent);color:#fff}
#demo .btn.dm-accent:hover{background:#b5391a}
#demo .btn.sm{padding:10px 14px;font-size:15px}
#demo .btn[disabled]{opacity:.45;cursor:default}

/* conversation */
#demo .dm-convo-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line)}
#demo .dm-convo-head h3{margin:0 0 4px;font-size:20px;letter-spacing:-.03em}
#demo .dm-convo-head em{font-style:normal;color:var(--muted);font-size:15px}
#demo .dm-brand{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
#demo .dm-brand i{width:10px;height:10px;background:var(--brand);display:inline-block}
#demo .state{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--soft);padding:7px 10px;white-space:nowrap}
#demo .convo-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px}
#demo .convo-grid.solo{grid-template-columns:1fr}
#demo .convo-grid.solo .captured{display:none}
#demo .dm-thread{display:flex;flex-direction:column;gap:16px;padding:22px 20px;height:380px;overflow-y:auto;overscroll-behavior:contain;min-width:0;scroll-behavior:smooth}
#demo .captured{border-left:1px solid var(--line);padding:20px 20px;background:#e7e4dd}
#demo .captured h5{margin:0 0 12px;font-size:15px;font-weight:650;display:flex;justify-content:space-between;align-items:baseline}
#demo .captured h5 span{font-size:12px;color:var(--label);font-weight:600}
#demo .cap-row{display:grid;grid-template-columns:22px 1fr;gap:0 8px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;color:var(--label)}
#demo .cap-row .tick{font-family:var(--font-mono);color:var(--line-strong);grid-row:span 2;padding-top:2px}
#demo .cap-row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#demo .cap-row .v{color:var(--ink);font-weight:500}
#demo .cap-row.on{color:var(--label)}
#demo .cap-row.on .tick{color:var(--ok)}
#demo .cap-row.new .tick,#demo .cap-row.new .v{animation:dmpop .45s cubic-bezier(.2,.7,.2,1)}
#demo .cap-row:not(.on) .v{color:var(--line-strong);font-weight:400}
#demo .dm-msg{display:flex;flex-direction:column;gap:5px;max-width:84%}
#demo .dm-msg .dm-who{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--label)}
#demo .dm-msg p{margin:0;padding:12px 15px;line-height:1.45;font-size:16px}
#demo .dm-msg.dm-them{align-self:flex-start}
#demo .dm-msg.dm-them p{background:var(--them)}
#demo .dm-msg.dm-us{align-self:flex-end;align-items:flex-end}
#demo .dm-msg.dm-us p{background:var(--ink);color:#fff;border-left:3px solid var(--brand)}
#demo .dm-msg.sys{align-self:center;max-width:100%}
#demo .dm-msg.sys p{padding:6px 12px;font-size:14px;color:var(--muted);background:transparent;border:1px dashed var(--line-strong)}
#demo .typing p{display:inline-flex;gap:4px;padding:14px 16px}
#demo .typing b{width:7px;height:7px;background:var(--muted);display:inline-block;animation:dmblink 1s infinite}
#demo .typing b:nth-child(2){animation-delay:.2s}#demo .typing b:nth-child(3){animation-delay:.4s}
@keyframes dmblink{0%,80%,100%{opacity:.25}40%{opacity:1}}
#demo .quote{background:#fff;border-left:8px solid var(--peach-line);padding:18px 18px 18px 20px;align-self:stretch;box-shadow:0 1px 2px rgba(20,22,26,.06),0 16px 32px -20px rgba(20,22,26,.35)}
#demo .quote .q-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
#demo .quote b{display:block;font-size:17px}
#demo .quote em{font-style:normal;color:var(--muted);font-size:15px}
#demo .quote .price{font-size:40px;font-weight:700;letter-spacing:-.04em;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
#demo .quote table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
#demo .quote td{padding:5px 0;border-top:1px solid var(--peach-line)}
#demo .quote td:last-child{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#demo .quote tr.sum td{font-weight:600}
#demo .quote .q-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
#demo .whatif{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 20px 20px}
#demo .convo-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
#demo .empty{padding:44px 28px;text-align:center;color:var(--muted)}
#demo .empty h4{margin:0 0 10px;color:var(--ink);font-size:22px;letter-spacing:-.03em}
#demo .empty p{font-size:16px}

/* ops view */
#demo .ops-block{padding:18px 20px;border-bottom:1px solid var(--line)}
#demo .ops-block:last-child{border-bottom:0}
#demo .ops-block h4{margin:0 0 12px;font-size:12px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label);display:flex;justify-content:space-between;align-items:center;font-weight:500}
#demo .needs{padding-left:20px}
#demo .needs h4 .dot{width:8px;height:8px;background:var(--accent);display:inline-block;margin-right:6px;vertical-align:middle;animation:dmpulse 1.4s infinite}
@keyframes dmpulse{0%,100%{opacity:1}50%{opacity:.25}}
#demo .quiet{margin:0;font-size:15px;color:var(--muted)}
#demo .slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px}
#demo .slots li{display:grid;grid-template-columns:20px 110px 1fr;gap:10px;align-items:baseline;color:var(--muted)}
#demo .slots li.on{color:var(--ink)}
#demo .slots li .tick{font-family:var(--font-mono);color:var(--line-strong)}
#demo .slots li.on .tick{color:var(--ok)}
#demo .slots li .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
#demo .cap{background:#e7e4dd;padding:12px 14px;font-size:15px;line-height:1.45;margin-top:14px}
#demo .cap .mono{display:block;margin-bottom:4px;color:var(--accent)}
#demo .decision{background:#fff;border-left:8px solid var(--accent);padding:18px 18px 18px 20px;box-shadow:0 1px 2px rgba(20,22,26,.06),0 20px 40px -20px rgba(20,22,26,.35)}
#demo .decision .mono{color:var(--accent)}
#demo .decision .action{font-weight:650;font-size:20px;margin:6px 0 12px;letter-spacing:-.02em;line-height:1.25}
#demo .decision dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px}
#demo .decision dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);padding-top:3px}
#demo .decision dd{margin:0}
#demo .decision .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
#demo .adjust{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
#demo .adjust input{width:120px;border:1.5px solid var(--line-strong);background:var(--pane);padding:9px 10px;font-family:var(--font-mono)}
#demo .policy{border-left:8px solid var(--accent);background:var(--soft);padding:16px 16px 16px 18px}
#demo .policy p{margin:4px 0 12px;font-size:16px}
#demo .policy .acts{display:flex;gap:8px;flex-wrap:wrap}
#demo .tl{display:flex;flex-direction:column;gap:6px;font-size:14px}
#demo .tl .row{display:grid;grid-template-columns:150px 1fr 76px;gap:10px;align-items:center;padding:3px 0}
#demo .tl .assign{font-size:13px;font-weight:600;padding:5px 10px;border:1.5px solid var(--ink);background:#fff;border-radius:6px;justify-self:end}
#demo .tl .assign:hover{background:var(--ink);color:#fff}
#demo .tl .busy{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--warn);justify-self:end}
#demo .tl .name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo .tl .row.on .name{color:var(--ink);font-weight:600}
#demo .tl .track{position:relative;height:18px;background:var(--soft);min-width:0}
#demo .tl .bar{position:absolute;top:0;bottom:0;background:var(--line-strong)}
#demo .tl .bar.hold{background:repeating-linear-gradient(135deg,var(--accent-bright) 0 3px,transparent 3px 6px);outline:1px solid var(--accent-bright);outline-offset:-1px}
#demo .tl .bar.booked{background:var(--accent)}
#demo .tl .axis{display:grid;grid-template-columns:150px 1fr 76px;gap:10px}
#demo .tl .axis div{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--label)}
#demo .tl .key{display:flex;gap:14px;margin-top:6px;font-size:13px;color:var(--muted);flex-wrap:wrap}
#demo .tl .key i{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:5px;background:var(--line-strong)}
#demo .tl .key i.hold{background:repeating-linear-gradient(135deg,var(--accent-bright) 0 3px,transparent 3px 6px);outline:1px solid var(--accent-bright);outline-offset:-1px}
#demo .tl .key i.booked{background:var(--accent)}
#demo .booked-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16px}
#demo .booked-list li .tick{color:var(--ok);font-family:var(--font-mono);margin-right:6px}
#demo .summary{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
#demo .summary b{color:var(--ink)}
#demo .auto{font-size:14px;color:var(--muted);margin:8px 0 0}
#demo .auto button{background:none;border:0;padding:0;text-decoration:underline;color:var(--accent);font-size:14px}

/* the end: other workflows and the call to action, shown once the booking lands */
#demo .more{max-width:840px;margin:40px auto 0;display:grid;grid-template-columns:1fr;gap:20px}
#demo .more h3{margin:0;color:var(--on-dark-strong);font-size:24px;letter-spacing:-.04em;line-height:1.1;text-wrap:balance}
#demo .more > p{color:var(--on-dark);margin:8px 0 0;max-width:52ch;font-size:16px}
#demo .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#demo .tile{border:0;background:var(--pane);padding:16px;font-size:15px;min-width:0;border-radius:6px}
#demo .tile b{display:block;margin-bottom:4px}
#demo .tile span{color:var(--muted)}
#demo .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#demo .cta .btn.dm-accent{padding:16px 22px;font-size:16px}

@media (max-width:760px){
  #demo{padding-block:56px 64px}
  #demo .rail div{font-size:0}
  #demo .rail div span{font-size:11px}
  #demo .dm-coach{grid-template-columns:auto 1fr}
  #demo .dm-coach .cta{grid-column:2;justify-self:start}
  #demo .dm-coach p{font-size:16px}
  #demo .dm-coach .go,#demo .dm-coach .skip{grid-column:2;justify-self:start}
  #demo .fields{grid-template-columns:1fr}
  #demo .tiles{grid-template-columns:1fr 1fr}
  #demo .tl .row,#demo .tl .axis{grid-template-columns:100px 1fr 70px}
  #demo .convo-grid{grid-template-columns:1fr}
  #demo .captured{border-left:0;border-top:1px solid var(--line)}
  #demo .slots li{grid-template-columns:20px 90px 1fr}
}

/* motion: things arrive, they do not just appear. Every animation is off under prefers-reduced-motion. */
@keyframes dmrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dmfade{from{opacity:0}to{opacity:1}}
@keyframes dmpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
@keyframes dmgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#demo .pane[data-mode="focus"]{animation:dmrise .5s cubic-bezier(.2,.7,.2,1)}
#demo .pane[data-mode="strip"] .strip{animation:dmfade .4s ease-out}
#demo .dm-thread > :last-child{animation:dmrise .4s cubic-bezier(.2,.7,.2,1)}
#demo .slots li.new .tick,#demo .strip .chip.new{animation:dmpop .45s cubic-bezier(.2,.7,.2,1)}
#demo .strip .chip.new{animation-name:dmrise}
#demo .decision,#demo .policy,#demo .cap{animation:dmrise .45s cubic-bezier(.2,.7,.2,1)}
#demo .tl .bar.hold,#demo .tl .bar.booked{transform-origin:left;animation:dmgrow .6s cubic-bezier(.2,.7,.2,1)}
#demo .dm-coach p.swap{animation:dmfade .35s ease-out}
#demo .rail div{transition:border-color .3s,color .3s}
#demo .more{animation:dmrise .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){ #demo *,#demo *::before,#demo *::after{animation:none !important;transition:none !important} }

/* live: after Start, the stage owns the screen. The coach stays at the top of it, strips sit under the coach,
   and the pane in focus takes the rest and scrolls inside itself, so a click never moves the page. */
#demo.dm-live .stage{height:calc(100svh - 64px - 24px);min-height:560px;display:flex;flex-direction:column;gap:10px}
#demo.dm-live .pane[data-mode="focus"]{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
#demo.dm-live .pane[data-mode="strip"]{flex:0 0 auto}
#demo.dm-live .pane.desk[data-mode="focus"]{flex:0 0 auto}
#demo.dm-live .pane.desk .chip{padding:12px 18px;font-size:16px}
#demo.dm-live .pane.desk .pane-body{padding:26px 24px}
#demo.dm-live .dm-thread{height:auto;min-height:260px;overflow:visible}
#demo.dm-live .demo-head{margin-bottom:28px}
#demo.dm-live .demo-head .enter{display:none}
#demo.dm-live .demo-head .back{display:inline-block}
#demo .demo-head .back{display:none;margin-top:20px;color:#c9ccd3;background:none;border:0;padding:0;font-size:15px;text-decoration:underline;cursor:pointer}
#demo.dm-live .stage{animation:dmrise .55s cubic-bezier(.2,.7,.2,1)}
#demo:not(.dm-live){min-height:100svh;display:grid;align-content:center}
#demo.dm-live{padding-top:calc(64px + 40px)}
#demo:not(.dm-live) .stage{display:none}
#demo .demo-head .enter{margin-top:28px;padding:16px 24px;font-size:17px;border-radius:8px}
#demo .demo-head{max-width:760px}
@media (max-width:760px){ #demo.dm-live .stage{height:auto;min-height:0} }