/* Landing demos (demos.js). Reuses the page's .mock parts; the fallback markup hides once a demo mounts. */
.mock { --m-bad: #ff7b72; }
@media (prefers-color-scheme: light) { .mock { --m-bad: #c4302b; } }
.dm-on { position: relative; }
.dm-on > :not(.dm, .dm-cur) { display: none !important; }
.dm { display: contents; }
.dm.out > * { opacity: 0; transition: opacity .4s ease-out; }

/* cursor: tip at the transform origin */
.dm-cur { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .3));
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .25s ease-out; }
.dm-cur.jump { transition: opacity .25s ease-out; }
.dm-cur.on { opacity: 1; }
.dm-cur svg { display: block; transform-origin: 0 0; transition: transform .1s ease-out; }
.dm-cur.down svg { transform: scale(.88); }

/* rules */
.dm-rule { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--m-border); border-radius: 9999px; background: var(--m-surface); }
.dm-in { flex: 1; min-width: 0; height: 22px; font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; }
.dm-rule .pill { flex: none; transition: transform .12s ease-out; }
.dm-rule .pill.press { transform: scale(.95); }
.dm-cap { margin: 1.25rem 0 .25rem; font-size: 12px; color: var(--m-sec); }
.dm-acts li { justify-content: flex-start; gap: 10px; margin-inline: -.5rem; padding: .5rem; border-radius: 10px; transition: background-color .2s; }
.dm-acts li + li { border-top: 0; }
.dm-acts li.scan { background: color-mix(in oklab, var(--m-text) 6%, transparent); }
.dm-a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--m-sec); }
.dm-a b { font-weight: 500; color: var(--m-text); }
.dm-v { flex: none; opacity: 0; transform: translateX(4px); transition: opacity .2s ease-out, transform .2s ease-out; }
.dm-acts li.v .dm-v { opacity: 1; transform: none; }
.mock .spill.bad { background: color-mix(in oklab, var(--m-bad) 14%, transparent); color: var(--m-bad); }
.dm-res { display: flex; align-items: center; gap: 6px; margin-top: .5rem; padding-top: .875rem; border-top: 1px solid var(--m-line); font-size: 14px; color: var(--m-sec); opacity: 0; transition: opacity .3s ease-out; }
.dm-res.in { opacity: 1; }
.dm-res b { font-weight: 500; color: var(--m-bad); }
.dm-res svg.i { width: 16px; height: 16px; }

/* compact hero (the page drops the sidebar and shortens the shell): unsent messages take no room, so the thread grows from the composer like a real chat */
@media (max-width: 47.99rem) {
  .dm .log .m:not(.in), .dm .log .mt { display: none; }
  @starting-style { .js .dm .log .m.in { opacity: 0; transform: translateY(6px); } }
}

/* ---- bento (index.html .bx, demos.js scene()): the states the script steps through; the page markup is the end frame ---- */
.bx { --e: var(--ease-standard); --sp: cubic-bezier(.34, 1.56, .64, 1); }
.bx .m, .bx .nt, .bx .kv, .bx .ck, .bx .spill { transition: opacity .3s ease-out, transform .5s cubic-bezier(.25, .8, .25, 1), max-height .45s var(--e), margin .45s var(--e), padding .45s var(--e), max-width .4s var(--e), background-color .6s var(--e); }
.bx .hid { opacity: 0; transform: translateY(6px); }
.bx .s2.hid { transform: translateY(14px) scale(.98); }
.bx .nt.hid { transform: translateY(-2rem) scale(.96); }
.bx .ck, .bx .bh .spill { transition-timing-function: ease-out, var(--sp); }
.bx .ck.hid, .bx .bh .spill.hid { transform: scale(.4); }
.bx .m.x { max-height: 0; opacity: 0; transform: translateY(10px); margin-top: -0.625rem; }
.bx .m.s3 { max-height: 4rem; }
.bx .cv .dots { padding: 12px; border-radius: 17px; }
.bx .kv.hl { background: rgba(62,207,142,.16); }
.bx .kv u { transition: width 1.8s var(--e), opacity .3s; }
.bx .kv u.go { opacity: 1; }
.bx .kv > i, .bx .tg, .bx .na span, .bx .ap { transition: transform .12s ease-out, background-color .2s, border-color .2s, color .2s, opacity .25s, gap .35s, box-shadow .6s ease-out; }
.bx .press { transform: scale(.92); }
.bx .tg::after { transition: transform .3s cubic-bezier(.3, .75, .1, 1); }
.bx .bar8 i { transition: width 3s var(--e), background-color .3s; }
.bx .bar8:not(.w) i { background: var(--m-ok); }
.bx .n { display: inline-block; font-variant-numeric: tabular-nums; }
.bx .n.roll { animation: bx-roll .35s var(--e); }
@keyframes bx-roll { from { opacity: 0; transform: translateY(-45%); } }
/* screen: unread dot, phone buzz */
.bx .ud { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s var(--e); }
.bx .un .ud { opacity: 1; transform: none; }
.bx .sd .r { transition: background-color .3s var(--e); }
.bx .iph { transition: transform .5s var(--e), box-shadow .5s var(--e); }
.bx .iph.buzz { transform: translateY(-4px); box-shadow: 0 0 0 1px #9a9aa0, 0 0 0 2px #2a2a2c, 0 0 40px -6px rgb(120 160 255 / .45), 0 30px 56px -16px var(--shadow); animation: bx-buzz .45s ease-in-out .05s; }
@keyframes bx-buzz { 20%, 60% { translate: -1.5px 0; } 40%, 80% { translate: 1.5px 0; } }
/* apps: count line, connect ring */
.bx .cn { width: 100%; margin: 0 0 0.375rem 0.25rem; color: var(--m-sec); }
.bx .cn b { font-weight: 500; color: var(--m-text); }
.bx .ap.pl { animation: bx-ring .7s ease-out; }
@keyframes bx-ring { from { box-shadow: 0 0 0 0 rgba(62,207,142,.45); } to { box-shadow: 0 0 0 8px rgba(62,207,142,0); } }
.bx .ap svg.i { transition: width .35s, margin .35s, opacity .3s; }
.bx .ap:not(.on) svg.i { width: 0; margin-right: 0; opacity: 0; }
.bx .ap .spill { overflow: hidden; max-width: 6rem; }
.bx .ap:not(.on) .spill { max-width: 0; padding-inline: 0; opacity: 0; }
.bx .ap.f:not(.on) { gap: 0; border-color: var(--m-border); }
/* schedule: analog hands, 8:00 until set to 8:30 */
.bx .clk .hh, .bx .clk .mh { transform-box: view-box; transform-origin: 12px 12px; transition: transform 1.6s var(--e); }
.bx .clk.set .hh { transform: rotate(255deg); } .bx .clk.set .mh { transform: rotate(180deg); }
.bx .clk .hh { transform: rotate(240deg); }
/* replay: quiet, top right, shown once the tile has played (always on touch) */
.bx-re { position: absolute; top: .75rem; right: .75rem; z-index: 6; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--secondary-foreground); background: var(--background); box-shadow: 0 0 0 1px var(--border); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-standard), color .15s; }
.bx-re svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bx-re:hover { color: var(--foreground); }
.bx-ok:hover .bx-re, .bx-ok:focus-within .bx-re, .bx-re:focus-visible { opacity: 1; pointer-events: auto; }
.bx-re:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
@media (hover: none) { .bx-ok .bx-re { opacity: 1; pointer-events: auto; } }
.bx-rs *, .bx-rm * { transition: none !important; animation: none !important; }
.dm-cur.touch svg { display: none; }
.dm-cur.touch::after { content: ''; display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgb(255 255 255 / .55); box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .25); transition: transform .1s ease-out; }
.dm-cur.touch.down::after { transform: scale(.8); }