/* The KRYPHS app, drawn in HTML and CSS as an example (Yacine, 2026-10-04: animated platform banners).
Used by the "Your whole production on one screen" section on / and the "Inside the app" tour on /product/. No image or video file: every screen is markup.
Every size is calc(var(--u) * N): --u is one pixel of the screen's design width, scaled to the width of the stage (container query
units), so each screen shrinks as one picture. Wide: a 1280 px screen with its side bar. Under 900 px the side bar is dropped (960 px).
Under 680 px the screen is redrawn for a phone: a 420 px (560 px from 480 px up) wide compact layout that keeps what matters
and drops the rest, so the text stays readable. Colours come from tokens.css (--app-*).
Motion: everything is final by default. app.js adds .armed (start state) and .run (plays once); each element reads its own
start time from --d (data-d, milliseconds) and --p (data-p, a second time or a duration). html.motion-ok gates all of it.
One authored sequence per banner: the window settles in (3D tilt), a camera push and a soft spotlight follow the action,
short annotations name what happened. Only transform and opacity move, apart from small paint changes (a glow, a focus ring). */
@layer tokens, base, components, sections, utilities;
@layer sections{
/* ---------- the banner: a board housing around the app window ---------- */
.demo{margin:0;scroll-margin-top:88px}
.demo-stage{container-type:inline-size;margin-top:2px;overflow:hidden;border-radius:10px;perspective:1800px;content-visibility:auto;contain-intrinsic-block-size:auto min(calc(100svh - 190px), 900px)}
@media (max-width:679px){.demo-stage{contain-intrinsic-block-size:auto 1300px}}
.demo-replay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--board-rim);background:transparent;color:var(--blade-dim);font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:color .2s var(--ease-out), border-color .2s var(--ease-out), transform .16s var(--ease-out)}
.demo-replay .ico{width:15px;height:15px}
.demo-replay:active{transform:scale(.97)}
html:not(.js) .demo-replay,html:not(.motion-ok) .demo-replay{display:none}
@media (hover:hover) and (pointer:fine){.demo-replay:hover{color:var(--blade-ink);border-color:var(--blade-dim)}}
@media (max-width:560px){
.demo-replay{width:44px;padding:0;gap:0;font-size:0}
.demo-replay .ico{width:17px;height:17px}
.demo .rail-id .dim{display:none}
}
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.demo-tab{min-height:48px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--control-line);background:transparent;color:var(--text);font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .16s var(--ease-out)}
.demo-tab:active{transform:scale(.97)}
.demo-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.demo-tab[aria-selected="false"]:hover{border-color:var(--text)}}
.demo-note{max-width:64ch;margin-bottom:22px;color:var(--muted)}
.demo-after{margin-top:26px}
/* ---------- the window ---------- */
.app-tilt{transform-origin:50% 0}
.app{--u:calc(100cqw / 1280);position:relative;display:flex;overflow:hidden;border-radius:10px;background:var(--app-page);color:var(--app-ink);font-family:var(--body);font-size:calc(var(--u) * 15);line-height:1.4;font-weight:400;letter-spacing:0;text-align:start;transform-origin:0 0}
.app *{box-sizing:border-box}
.app :where(p,ul){margin:0;padding:0}
.app ul{list-style:none}
.app .ico{width:1em;height:1em;flex:none}
/* side bar */
.a-side{flex:0 0 calc(var(--u) * 240);display:flex;flex-direction:column;padding:calc(var(--u) * 20) calc(var(--u) * 14) calc(var(--u) * 16);background:var(--app-side);color:var(--app-side-text)}
.a-brand{display:flex;align-items:center;gap:calc(var(--u) * 11);padding:0 calc(var(--u) * 6)}
.a-k{display:grid;place-items:center;flex:none;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:calc(var(--u) * 9);background:var(--accent);color:var(--on-accent);font-family:var(--display);font-size:calc(var(--u) * 19);font-weight:700;line-height:1}
.a-bn{display:block;font-family:var(--display);font-size:calc(var(--u) * 17);font-weight:800;letter-spacing:.08em;line-height:1.1;color:var(--white)}
.a-bs{display:block;margin-top:calc(var(--u) * 4);font-family:var(--mono);font-size:calc(var(--u) * 8.5);letter-spacing:.22em;line-height:1;color:var(--app-side-dim)}
.a-ws{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 46);margin-top:calc(var(--u) * 22);padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 14);border:1px solid var(--app-side-line);background:var(--app-side-raise);color:var(--white);font-size:calc(var(--u) * 14.5);font-weight:600}
.a-ws .a-ini{display:grid;place-items:center;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:var(--app-side-line);color:var(--accent-soft);font-size:calc(var(--u) * 12);font-weight:700}
.a-ws .a-wsn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-ws .ico{width:calc(var(--u) * 16);height:calc(var(--u) * 16);color:var(--app-side-text)}
.a-sec{margin:calc(var(--u) * 22) 0 calc(var(--u) * 8) calc(var(--u) * 12);font-family:var(--mono);font-size:calc(var(--u) * 10.5);letter-spacing:.2em;line-height:1;color:var(--app-side-dim)}
.a-nav{display:flex;flex-direction:column;gap:calc(var(--u) * 2)}
.a-nav li{position:relative;display:flex;align-items:center;gap:calc(var(--u) * 12);height:calc(var(--u) * 38);padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 12);font-size:calc(var(--u) * 14.5);font-weight:500;color:var(--app-side-text)}
.a-nav li .ico{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.a-nav li.on{background:var(--app-side-raise);color:var(--white)}
.a-nav li.on::before{content:"";position:absolute;inset-inline-start:calc(var(--u) * -8);top:calc(var(--u) * 10);bottom:calc(var(--u) * 10);width:calc(var(--u) * 3);border-radius:calc(var(--u) * 3);background:var(--accent-bright)}
.a-user{display:flex;align-items:center;gap:calc(var(--u) * 11);margin-top:auto;padding:calc(var(--u) * 14) calc(var(--u) * 8) 0}
.a-user .a-nm{flex:1;min-width:0}
.a-user .a-nm b{display:block;font-size:calc(var(--u) * 13.5);font-weight:700;color:var(--white)}
.a-user .a-nm span{display:block;font-size:calc(var(--u) * 12);color:var(--app-side-dim)}
.a-user>.ico{width:calc(var(--u) * 18);height:calc(var(--u) * 18);color:var(--app-side-text)}
.a-av{display:grid;place-items:center;flex:none;width:calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;background:var(--app-side-raise);box-shadow:0 0 0 1px var(--app-side-line) inset;color:var(--white);font-size:calc(var(--u) * 12);font-weight:700;line-height:1}
/* top bar */
.a-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.a-top{display:flex;align-items:center;gap:calc(var(--u) * 12);height:calc(var(--u) * 54);padding:0 calc(var(--u) * 28);border-bottom:1px solid var(--app-line)}
.a-top .a-tk{display:none;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:calc(var(--u) * 8);font-size:calc(var(--u) * 15)}
.a-crumb{display:flex;align-items:baseline;gap:calc(var(--u) * 9);min-width:0}
.a-crumb b{font-size:calc(var(--u) * 14);font-weight:700}
.a-crumb i{font-style:normal;color:var(--app-muted)}
.a-crumb em{font-style:normal;font-family:var(--mono);font-size:calc(var(--u) * 11);letter-spacing:.14em;color:var(--app-muted)}
.a-sp{flex:1}
.a-search,.a-lang{display:flex;align-items:center;gap:calc(var(--u) * 9);height:calc(var(--u) * 38);padding:0 calc(var(--u) * 14);border-radius:var(--r-pill);border:1px solid var(--app-line-strong);background:var(--app-card);color:var(--app-muted);font-size:calc(var(--u) * 14)}
.a-search{width:calc(var(--u) * 220)}
.a-search .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
.a-lang{width:calc(var(--u) * 104);justify-content:space-between;color:var(--app-ink);font-weight:500}
.a-lang .ico{width:calc(var(--u) * 15);height:calc(var(--u) * 15)}
.a-bell{display:grid;place-items:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);color:var(--app-muted)}
.a-bell .ico{width:calc(var(--u) * 19);height:calc(var(--u) * 19)}
/* page */
.a-page{padding:0 calc(var(--u) * 28) calc(var(--u) * 22)}
.a-head{display:flex;justify-content:space-between;align-items:stretch;gap:calc(var(--u) * 20);padding-top:calc(var(--u) * 20)}
.a-hl{min-width:0}
.a-hr{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:none;gap:calc(var(--u) * 14)}
.a-eye{font-family:var(--mono);font-size:calc(var(--u) * 12);letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:var(--app-blue-text)}
.a-title{margin-top:calc(var(--u) * 8);font-family:var(--head);font-size:calc(var(--u) * 40);font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--app-ink)}
.a-sub{margin-top:calc(var(--u) * 8);font-size:calc(var(--u) * 15.5);color:var(--app-muted)}
.a-date{font-family:var(--mono);font-size:calc(var(--u) * 12.5);letter-spacing:.04em;color:var(--app-muted)}
.a-btn{position:relative;display:inline-flex;align-items:center;gap:calc(var(--u) * 9);height:calc(var(--u) * 42);padding:0 calc(var(--u) * 22);border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:calc(var(--u) * 15);font-weight:600;white-space:nowrap}
.a-btn .ico{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.a-h3{font-family:var(--head);font-size:calc(var(--u) * 19);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.a-all{display:inline-flex;align-items:center;gap:calc(var(--u) * 5);font-size:calc(var(--u) * 13.5);font-weight:600;color:var(--app-blue-text);white-space:nowrap}
.a-all .ico{width:calc(var(--u) * 12);height:calc(var(--u) * 12)}
.a-ch{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 12)}
.a-ch>.ico{width:calc(var(--u) * 18);height:calc(var(--u) * 18);color:var(--app-ink)}
/* overview */
.a-stats{display:flex;flex-wrap:wrap;margin-top:calc(var(--u) * 16);border-radius:calc(var(--u) * 20);border:1px solid var(--app-line);background:var(--app-card)}
.a-stat{flex:1 1 0;min-width:0;padding:calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 14);border-inline-start:1px solid var(--app-line)}
.a-stat:first-child{border-inline-start:0}
.a-lab{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);font-family:var(--mono);font-size:calc(var(--u) * 11.5);letter-spacing:.16em;line-height:1.2;color:var(--app-muted)}
.a-lab .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
.a-num{margin-top:calc(var(--u) * 8);font-family:var(--head);font-size:calc(var(--u) * 40);font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.a-stat .a-all{margin-top:calc(var(--u) * 6)}
.a-row2{display:flex;gap:calc(var(--u) * 20);margin-top:calc(var(--u) * 16)}
.a-hero{position:relative;flex:1.6 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--u) * 22) calc(var(--u) * 28);border-radius:calc(var(--u) * 20);background:radial-gradient(70% 90% at 92% 12%, var(--app-hero-b), transparent 70%) var(--app-hero-a);color:var(--white)}
.a-heye{font-family:var(--mono);font-size:calc(var(--u) * 11);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.a-ht{margin-top:calc(var(--u) * 14);max-width:15em;font-family:var(--head);font-size:calc(var(--u) * 29);font-weight:700;line-height:1.14;letter-spacing:-.02em;color:var(--white)}
.a-hs{margin-top:calc(var(--u) * 10);font-size:calc(var(--u) * 14.5);color:var(--app-side-text)}
.a-hbtn{display:inline-flex;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 38);margin-top:auto;padding:0 calc(var(--u) * 18);border-radius:var(--r-pill);background:var(--app-cream);color:var(--app-ink);font-size:calc(var(--u) * 14);font-weight:600}
.a-hbtn .ico{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
.a-tiles{display:flex;gap:calc(var(--u) * 12);margin-top:calc(var(--u) * 14);margin-bottom:calc(var(--u) * 14)}
.a-tl{flex:0 0 calc(var(--u) * 76);min-width:0}
.a-tf{position:relative;aspect-ratio:9 / 16;overflow:hidden;border-radius:calc(var(--u) * 10);box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -8) color-mix(in srgb, var(--app-hero-a) 70%, transparent)}
.a-tf::before{content:"";position:absolute;inset:0}
.a-tf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--app-hero-a) 62%, transparent))}
.tl1{background:linear-gradient(165deg, var(--app-tile-1a), var(--app-tile-1b))}
.tl1::before{background:radial-gradient(circle at 68% 30%, color-mix(in srgb, var(--white) 70%, transparent) 0 13%, transparent 14%), linear-gradient(0deg, color-mix(in srgb, var(--app-tile-1b) 80%, transparent) 0 22%, transparent 23%)}
.tl2{background:linear-gradient(165deg, var(--app-tile-2a), var(--app-tile-2b))}
.tl2::before{background:radial-gradient(ellipse 60% 22% at 50% 66%, color-mix(in srgb, var(--white) 38%, transparent), transparent 70%), radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--white) 55%, transparent) 0 8%, transparent 9%)}
.tl3{background:linear-gradient(165deg, var(--app-tile-3a), var(--app-tile-3b))}
.tl3::before{background:linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--white) 30%, transparent) 38% 52%, transparent 52%), radial-gradient(circle at 36% 62%, color-mix(in srgb, var(--white) 50%, transparent) 0 10%, transparent 11%)}
.tl4{background:linear-gradient(165deg, var(--app-tile-4a), var(--app-tile-4b))}
.tl4::before{background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--white) 62%, transparent) 0 17%, transparent 18%), linear-gradient(0deg, color-mix(in srgb, var(--white) 22%, transparent) 0 14%, transparent 15%)}
.tl5{background:linear-gradient(165deg, var(--app-tile-5a), var(--app-tile-5b))}
.tl5::before{background:radial-gradient(ellipse 70% 30% at 50% 78%, color-mix(in srgb, var(--white) 34%, transparent), transparent 70%), radial-gradient(circle at 62% 26%, color-mix(in srgb, var(--white) 66%, transparent) 0 9%, transparent 10%)}
.a-tt{position:absolute;inset-inline-end:calc(var(--u) * 5);bottom:calc(var(--u) * 5);z-index:1;padding:calc(var(--u) * 2) calc(var(--u) * 5);border-radius:calc(var(--u) * 5);background:color-mix(in srgb, var(--app-hero-a) 72%, transparent);color:var(--white);font-family:var(--mono);font-size:calc(var(--u) * 8.5);line-height:1.3}
.a-tn{display:block;margin-top:calc(var(--u) * 6);font-size:calc(var(--u) * 11);font-weight:600;line-height:1.25;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-tm{display:block;font-family:var(--mono);font-size:calc(var(--u) * 9);line-height:1.3;color:var(--app-side-text);white-space:nowrap}
.a-need{position:relative;flex:1 1 0;min-width:0;padding:calc(var(--u) * 22) calc(var(--u) * 26) calc(var(--u) * 14);border-radius:calc(var(--u) * 20);border:1px solid var(--app-line);background:var(--app-card)}
.a-nl{margin-top:calc(var(--u) * 8)}
.a-nr{display:flex;align-items:center;gap:calc(var(--u) * 14);height:calc(var(--u) * 58)}
.a-tile{display:grid;place-items:center;flex:none;width:calc(var(--u) * 38);height:calc(var(--u) * 38);border-radius:calc(var(--u) * 12)}
.a-tile .ico{width:calc(var(--u) * 19);height:calc(var(--u) * 19)}
.t-red{background:var(--app-red-bg);color:var(--app-red-text)}
.t-amber{background:var(--app-amber-bg);color:var(--app-amber-text)}
.t-orange{background:var(--app-orange-bg);color:var(--app-orange-text)}
.t-green{background:var(--app-green-bg);color:var(--app-green-text)}
.a-nt{flex:1;min-width:0}
.a-n1{display:block;font-size:calc(var(--u) * 14.5);font-weight:600;line-height:1.25}
.a-n2{display:block;margin-top:calc(var(--u) * 1);font-size:calc(var(--u) * 12);color:var(--app-muted)}
.a-nc{font-family:var(--head);font-size:calc(var(--u) * 20);font-weight:700;font-variant-numeric:tabular-nums}
.a-feed{position:relative;margin-top:calc(var(--u) * 16);padding:calc(var(--u) * 18) calc(var(--u) * 26) calc(var(--u) * 6);border-radius:calc(var(--u) * 20);border:1px solid var(--app-line);background:var(--app-card)}
.a-feed .a-ch{margin-bottom:calc(var(--u) * 10)}
.a-fr{position:relative;display:flex;align-items:center;gap:calc(var(--u) * 14);height:calc(var(--u) * 54);margin-inline:calc(var(--u) * -12);padding:0 calc(var(--u) * 12);border-top:1px solid var(--app-line);border-radius:calc(var(--u) * 10)}
.a-fi{display:grid;place-items:center;flex:none;width:calc(var(--u) * 32);height:calc(var(--u) * 32);border-radius:50%;border:1px solid var(--app-line);color:var(--app-muted)}
.a-fi .ico{width:calc(var(--u) * 15);height:calc(var(--u) * 15)}
.a-ft{flex:1;min-width:0}
.a-fn{display:block;font-size:calc(var(--u) * 14.5);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-fa{display:block;margin-top:calc(var(--u) * 1);font-size:calc(var(--u) * 12.5);color:var(--app-muted)}
.a-fd{font-family:var(--mono);font-size:calc(var(--u) * 12);letter-spacing:.02em;color:var(--app-muted);white-space:nowrap}
.a-fshift{position:relative}
.a-gw{display:none}
/* production board */
.a-status{display:flex;align-items:center;gap:calc(var(--u) * 9);margin-top:calc(var(--u) * 10);font-size:calc(var(--u) * 13.5);color:var(--app-muted)}
.a-status i{width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:var(--app-green-text)}
.a-cols{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 14);margin-top:calc(var(--u) * 14)}
.a-col{position:relative;flex:0 0 calc((100% - calc(var(--u) * 32)) / 3);min-width:0;height:calc(var(--u) * 366);padding:calc(var(--u) * 14) calc(var(--u) * 16);border-radius:calc(var(--u) * 20);border:1px solid var(--app-line);background:var(--app-col)}
.a-colh{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 28);margin-bottom:calc(var(--u) * 10)}
.a-pill{display:inline-flex;align-items:center;gap:calc(var(--u) * 7);height:calc(var(--u) * 26);padding:0 calc(var(--u) * 11);border-radius:var(--r-pill);font-family:var(--mono);font-size:calc(var(--u) * 12);font-weight:500;letter-spacing:.02em;line-height:1;white-space:nowrap}
.a-pill i{width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:currentColor}
.s-grey{background:var(--app-grey-bg);color:var(--app-grey-text)}
.s-blue{background:var(--app-blue-wash);color:var(--app-blue-text)}
.s-amber{background:var(--app-amber-bg);color:var(--app-amber-text)}
.s-orange{background:var(--app-orange-bg);color:var(--app-orange-text)}
.s-green{background:var(--app-green-bg);color:var(--app-green-text)}
.a-cn{display:grid;place-items:center;min-width:calc(var(--u) * 28);height:calc(var(--u) * 26);padding:0 calc(var(--u) * 6);border-radius:calc(var(--u) * 9);border:1px solid var(--app-line);background:var(--app-card);font-family:var(--mono);font-size:calc(var(--u) * 12);line-height:1;font-variant-numeric:tabular-nums}
.a-cards{position:relative}
.a-slot{position:relative;margin-bottom:calc(var(--u) * 6)}
.a-slot.gone{display:none}
.a-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:calc(var(--u) * 64);padding:calc(var(--u) * 9) calc(var(--u) * 12);border-radius:calc(var(--u) * 14);border:1px solid var(--app-line);background:var(--app-card);box-shadow:0 1px 2px color-mix(in srgb, var(--app-ink) 6%, transparent)}
.a-come .a-card{z-index:6}
.a-more{position:absolute;inset-inline:calc(var(--u) * 16);bottom:calc(var(--u) * 12);display:flex;align-items:center;justify-content:center;height:calc(var(--u) * 22);font-family:var(--mono);font-size:calc(var(--u) * 11);letter-spacing:.04em;color:var(--app-muted);font-variant-numeric:tabular-nums}
.a-ct{display:flex;align-items:center;gap:calc(var(--u) * 8);font-size:calc(var(--u) * 13.5);font-weight:600;line-height:1.3}
.a-ct>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-lamp{flex:none;width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:50%;background:var(--lamp-off)}
.l-off{background:var(--app-line-strong)}
.l-new{background:var(--lamp-new)}
.l-warn{background:var(--lamp-warn)}
.l-go{background:var(--lamp-go)}
.l-stop{background:var(--lamp-stop)}
.a-cm{display:flex;align-items:center;gap:calc(var(--u) * 6)}
.a-tag{display:inline-flex;align-items:center;height:calc(var(--u) * 22);padding:0 calc(var(--u) * 8);border-radius:calc(var(--u) * 7);background:var(--app-grey-bg);color:var(--app-grey-text);font-family:var(--mono);font-size:calc(var(--u) * 10.5);letter-spacing:.02em;line-height:1;white-space:nowrap}
.a-tag.v{background:var(--app-blue-wash);color:var(--app-blue-text)}
.a-tag.pr{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:calc(var(--u) * 22)}
.a-tag.v,.a-av2{flex:none}
.a-due{margin-inline-start:auto;font-family:var(--mono);font-size:calc(var(--u) * 10.5);letter-spacing:.02em;color:var(--app-muted);white-space:nowrap}
.a-av2{display:grid;place-items:center;flex:none;width:calc(var(--u) * 22);height:calc(var(--u) * 22);border-radius:50%;font-size:calc(var(--u) * 9);font-weight:700;line-height:1}
.a-av2.t1{background:var(--app-blue-wash);color:var(--app-blue-text)}
.a-av2.t2{background:var(--app-amber-bg);color:var(--app-amber-text)}
.a-av2.t3{background:var(--app-green-bg);color:var(--app-green-text)}
.a-av2.t4{background:var(--app-red-bg);color:var(--app-red-text)}
.a-av2.none{border:1px solid var(--app-line-strong);background:var(--app-grey-bg);color:var(--app-muted)}
.a-av2.none .ico{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
.a-tick{display:grid;place-items:center;flex:none;width:calc(var(--u) * 16);height:calc(var(--u) * 16);border-radius:50%;background:var(--app-green-bg);color:var(--app-green-text)}
.a-tick .ico{width:calc(var(--u) * 10);height:calc(var(--u) * 10)}
/* requests, clips */
.a-box{position:relative;margin-top:calc(var(--u) * 18);padding:calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 8);border-radius:calc(var(--u) * 20);border:1px solid var(--app-line);background:var(--app-card)}
.a-cnt{margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 13);color:var(--app-muted);font-variant-numeric:tabular-nums}
.a-find{display:flex;align-items:center;gap:calc(var(--u) * 10);width:calc(var(--u) * 340);max-width:100%;height:calc(var(--u) * 42);margin:calc(var(--u) * 16) 0 calc(var(--u) * 10);padding:0 calc(var(--u) * 14);border-radius:calc(var(--u) * 12);border:1px solid var(--app-line-strong);color:var(--app-muted);font-size:calc(var(--u) * 14)}
.a-find .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
.a-rh,.a-rr{display:flex;align-items:center;gap:calc(var(--u) * 16)}
.a-rh{margin-inline:calc(var(--u) * -12);padding:calc(var(--u) * 10) calc(var(--u) * 12);font-family:var(--mono);font-size:calc(var(--u) * 11);letter-spacing:.14em;text-transform:uppercase;color:var(--app-muted)}
.a-rr{position:relative;height:calc(var(--u) * 56);margin-inline:calc(var(--u) * -12);padding:0 calc(var(--u) * 12);border-top:1px solid var(--app-line);border-radius:calc(var(--u) * 10)}
.a-rshift{position:relative}
.rc1{flex:2.4 1 0;min-width:0}
.rc2{flex:1.4 1 0;min-width:0}
.rc3{flex:1.5 1 0;min-width:0}
.rc4{flex:.7 1 0;min-width:0}
.rc5{flex:.8 1 0;min-width:0;white-space:nowrap}
.a-rn{display:block;font-size:calc(var(--u) * 14.5);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-rs{display:block;margin-top:calc(var(--u) * 1);font-size:calc(var(--u) * 12);color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-rv{font-size:calc(var(--u) * 14);color:var(--app-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-rd{font-family:var(--mono);font-size:calc(var(--u) * 12.5);color:var(--app-muted)}
.a-rr .a-av2{width:calc(var(--u) * 28);height:calc(var(--u) * 28);font-size:calc(var(--u) * 10.5)}
.a-pg{display:flex;align-items:center;justify-content:space-between;margin-inline:calc(var(--u) * -12);padding:calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 8);border-top:1px solid var(--app-line);font-size:calc(var(--u) * 13);color:var(--app-muted);font-variant-numeric:tabular-nums}
.a-pgb{display:flex;gap:calc(var(--u) * 8)}
.a-pgb span{display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:calc(var(--u) * 9);border:1px solid var(--app-line-strong);color:var(--app-ink)}
.a-pgb .ico{width:calc(var(--u) * 14);height:calc(var(--u) * 14)}
.a-th{display:grid;place-items:center;flex:none;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 12);color:var(--white)}
.a-th .ico{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
.a-clip{display:flex;align-items:center;gap:calc(var(--u) * 14)}
.a-clip>span:last-child{min-width:0;flex:1}
.a-form{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 16) calc(var(--u) * 18);margin-top:calc(var(--u) * 14);padding-bottom:calc(var(--u) * 20)}
.a-fc{flex:1 1 calc(50% - calc(var(--u) * 9));min-width:0;display:flex;flex-direction:column;gap:calc(var(--u) * 14)}
.a-fl{margin-bottom:calc(var(--u) * 6);font-size:calc(var(--u) * 13);font-weight:500;color:var(--app-ink)}
.a-in{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 10);min-height:calc(var(--u) * 42);padding:0 calc(var(--u) * 14);border-radius:calc(var(--u) * 12);border:1px solid var(--app-line-strong);background:var(--app-card);font-size:calc(var(--u) * 14.5);color:var(--app-ink)}
.a-in .ico{width:calc(var(--u) * 16);height:calc(var(--u) * 16);color:var(--app-muted)}
.a-in.tall{align-items:flex-start;padding-top:calc(var(--u) * 11);min-height:calc(var(--u) * 96)}
.a-in.file{justify-content:flex-start;gap:calc(var(--u) * 12);border-style:dashed;background:var(--app-page);min-height:calc(var(--u) * 62)}
.a-in.file b{padding:calc(var(--u) * 8) calc(var(--u) * 14);border-radius:calc(var(--u) * 10);border:1px solid var(--app-line);background:var(--app-card);font-size:calc(var(--u) * 13.5);font-weight:600}
.a-in span.v,.a-in .swap{min-width:0}
.a-upl{position:relative;display:grid;place-items:center;height:calc(var(--u) * 52);margin-top:auto;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:calc(var(--u) * 15);font-weight:600}
.a-upl::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent-deep);transform-origin:left;transform:scaleX(0);opacity:0}
.a-upl>span:first-child{position:relative}
.a-ph{color:var(--app-muted)}
/* the Create / Request dialog */
.a-over{position:absolute;inset:0;z-index:20;display:flex;justify-content:center;align-items:flex-start;padding-top:calc(var(--u) * 36);visibility:hidden}
.a-scrim{position:absolute;inset:0;background:color-mix(in srgb, var(--app-ink) 46%, transparent)}
.a-modal{position:relative;width:min(calc(var(--u) * 700), 92%);padding:calc(var(--u) * 22) calc(var(--u) * 28) calc(var(--u) * 24);border-radius:calc(var(--u) * 18);background:var(--app-card);box-shadow:0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -20) color-mix(in srgb, var(--app-ink) 55%, transparent);transform-origin:100% 0}
.a-mh{display:flex;align-items:center;justify-content:space-between;padding-bottom:calc(var(--u) * 14);margin-bottom:calc(var(--u) * 14);border-bottom:1px solid var(--app-line)}
.a-mt{font-family:var(--head);font-size:calc(var(--u) * 21);font-weight:700;letter-spacing:-.015em}
.a-mh .ico{width:calc(var(--u) * 19);height:calc(var(--u) * 19);color:var(--app-ink)}
.a-mf{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 14) calc(var(--u) * 18)}
.a-mf>.a-fld{flex:1 1 calc(50% - calc(var(--u) * 9));min-width:0}
.a-mf>.a-fld.w{flex-basis:100%}
.a-mf .a-in.tall{min-height:calc(var(--u) * 78)}
.a-mb{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--u) * 12);margin-top:calc(var(--u) * 20)}
.a-gb,.a-sb{position:relative;display:inline-flex;align-items:center;height:calc(var(--u) * 40);padding:0 calc(var(--u) * 20);border-radius:var(--r-pill);font-size:calc(var(--u) * 14.5);font-weight:600}
.a-gb{border:1px solid var(--app-line);background:var(--app-card);color:var(--app-ink)}
.a-sb{background:var(--accent);color:var(--on-accent)}
/* swap: a value that changes (a count, a selected option); both sit in one cell */
.swap{display:inline-grid;align-items:center}
.swap>*{grid-area:1 / 1;white-space:nowrap}
.swap .was{display:none}
/* the pointer, the spotlight, the annotations (all invisible at rest) */
.a-cur{position:absolute;inset-inline-start:58%;top:56%;z-index:30;width:calc(var(--u) * 26);height:calc(var(--u) * 26);color:var(--app-ink);opacity:0;pointer-events:none;filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) color-mix(in srgb, var(--ink) 35%, transparent))}
.a-cur .ico{width:100%;height:100%}
.a-cur-p{fill:var(--white);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.a-ring{position:absolute;inset:0;border-radius:var(--r-pill);border:2px solid var(--app-ring);opacity:0;pointer-events:none}
.a-spot{position:absolute;inset:0;z-index:15;opacity:0;visibility:hidden;pointer-events:none}
.a-note{position:absolute;z-index:25;display:inline-flex;align-items:center;gap:calc(var(--u) * 8);padding:calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * 6) calc(var(--u) * 7);border-radius:var(--r-pill);background:var(--app-ink);color:var(--white);font-size:calc(var(--u) * 13);font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * -10) color-mix(in srgb, var(--app-ink) 60%, transparent);visibility:hidden;pointer-events:none;transform-origin:0 100%}
.a-note .ni{display:grid;place-items:center;flex:none;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:var(--lamp-go);color:var(--app-ink)}
.a-note .ni .ico{width:calc(var(--u) * 12);height:calc(var(--u) * 12)}
.typing::after{content:"";display:inline-block;width:calc(var(--u) * 1.5);height:1.05em;margin-inline-start:calc(var(--u) * 1);vertical-align:text-bottom;background:var(--accent)}
/* ---------- phones and small windows ---------- */
@container (max-width:899px){
.app{--u:calc(100cqw / 960)}
.a-side{display:none}
.a-top{padding:0 calc(var(--u) * 22)}
.a-top .a-tk{display:grid}
.a-page{padding:0 calc(var(--u) * 22) calc(var(--u) * 26)}
}
@container (max-width:679px){
.app{--u:calc(100cqw / 500)}
.a-search,.a-lang,.a-date,.xs{display:none}
.a-top{height:calc(var(--u) * 50)}
.a-head{flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 16);padding-top:calc(var(--u) * 24)}
.a-hr{align-items:flex-start}
.a-title{font-size:calc(var(--u) * 34)}
.a-stat{flex:1 1 50%;border-inline-start:0;border-top:1px solid var(--app-line)}
.a-stat:nth-child(even){border-inline-start:1px solid var(--app-line)}
.a-stat:nth-child(-n+2){border-top:0}
.a-row2{flex-direction:column}
.a-col{flex-basis:calc((100% - calc(var(--u) * 16)) / 2);padding:calc(var(--u) * 12) calc(var(--u) * 12)}
.a-card{padding:calc(var(--u) * 8) calc(var(--u) * 9)}
.a-ct{font-size:calc(var(--u) * 12)}
.a-due,.a-tag.pr,.sfx{display:none}
.a-fd{display:none}
.a-lab{letter-spacing:.08em;font-size:calc(var(--u) * 10.5)}
.a-av2{font-size:calc(var(--u) * 10)}
.a-ct .a-lamp,.a-ct .a-tick{display:none}
.a-more{inset-inline:calc(var(--u) * 12)}
.rc2,.rc4,.due,.dur{display:none}
.rc1{flex:1 1 0}
.rc3{flex:none}
.a-fc{flex-basis:100%}
.a-mf>.a-fld{flex-basis:100%}
.a-mf .a-in.tall{min-height:calc(var(--u) * 64)}
.a-modal{padding:calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 20)}
.a-find{width:100%}
}
@container (max-width:479px){
.app{--u:calc(100cqw / 340)}
}
/* ---------- motion: plays once when the banner scrolls into view; app.js adds .armed, then .run ---------- */
@keyframes a-settle{from{opacity:0;transform:rotateX(9deg) rotateY(-7deg) translateY(calc(var(--u) * 34)) scale(.93)}}
@keyframes a-rise{from{opacity:0;transform:translateY(calc(var(--u) * 16))}}
@keyframes a-pop{from{opacity:0;transform:translateY(calc(var(--u) * 10)) scale(.96)}}
@keyframes a-slide{from{opacity:0;transform:translateX(calc(var(--u) * -22))}}
@keyframes a-fade{from{opacity:0}}
@keyframes a-dropin{from{opacity:0;transform:translateY(calc(var(--u) * -16))}}
@keyframes a-glow{from{background:var(--app-blue-wash)}}
@keyframes a-out{to{opacity:0;transform:translateY(-45%)}}
@keyframes a-in{from{opacity:0;transform:translateY(45%)}}
@keyframes a-bump{0%{transform:none}35%{transform:scale(1.16)}100%{transform:none}}
@keyframes a-morph{from{background:var(--lamp-warn)}}
@keyframes a-morph-b{from{background:var(--lamp-off)}}
@keyframes a-up{from{transform:translateY(calc(var(--u) * 70))}}
@keyframes a-up-in{from{opacity:0;transform:translateY(calc(var(--u) * 70))}}
@keyframes a-down{from{transform:translateY(calc(var(--u) * -70))}}
@keyframes a-down-out{to{opacity:0;transform:translateY(calc(var(--u) * 70))}}
@keyframes a-shf{from{transform:translateY(calc(var(--u) * -54))}}
@keyframes a-shr{from{transform:translateY(calc(var(--u) * -56))}}
@keyframes a-snkf{to{opacity:0;transform:translateY(calc(var(--u) * 54))}}
@keyframes a-snkr{to{opacity:0;transform:translateY(calc(var(--u) * 56))}}
@keyframes a-vanish{to{opacity:0;transform:translateY(calc(var(--u) * -8)) scale(.97)}}
@keyframes a-fly1{
0%{opacity:0;transform:translate(calc(-100% - calc(var(--u) * 48)), 0)}
1%{opacity:1;transform:translate(calc(-100% - calc(var(--u) * 48)), 0)}
16%{transform:translate(calc(-100% - calc(var(--u) * 48)), calc(var(--u) * -5)) scale(1.03);box-shadow:0 calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * -12) color-mix(in srgb, var(--app-ink) 40%, transparent)}
84%{transform:translate(0, calc(var(--u) * -5)) scale(1.03);box-shadow:0 calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * -12) color-mix(in srgb, var(--app-ink) 40%, transparent)}
100%{transform:none}
}
@keyframes a-fly2{
0%{opacity:0;transform:translate(calc(-200% - calc(var(--u) * 96)), 0)}
1%{opacity:1;transform:translate(calc(-200% - calc(var(--u) * 96)), 0)}
14%{transform:translate(calc(-200% - calc(var(--u) * 96)), calc(var(--u) * -5)) scale(1.03);box-shadow:0 calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * -12) color-mix(in srgb, var(--app-ink) 40%, transparent)}
86%{transform:translate(0, calc(var(--u) * -5)) scale(1.03);box-shadow:0 calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * -12) color-mix(in srgb, var(--app-ink) 40%, transparent)}
100%{transform:none}
}
@keyframes a-cur-in{0%{opacity:0;transform:translate(calc(var(--u) * 260), calc(var(--u) * 320))}14%{opacity:1}100%{opacity:1;transform:translate(0, 0)}}
@keyframes a-cur-left{0%{opacity:0;transform:translate(calc(var(--u) * -240), calc(var(--u) * -140))}14%{opacity:1}100%{opacity:1;transform:translate(0, 0)}}
@keyframes a-cur-out{to{opacity:0}}
@keyframes a-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.4)}}
@keyframes a-press{0%,100%{transform:none}35%{transform:scale(.95)}}
@keyframes a-focus{0%,100%{border-color:var(--app-line-strong);box-shadow:none}12%,88%{border-color:var(--accent);box-shadow:0 0 0 calc(var(--u) * 3) var(--app-ring)}}
@keyframes a-open{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes a-close{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes a-modalin{from{opacity:0;transform:translateY(calc(var(--u) * 12)) scale(.97)}}
@keyframes a-fill{0%{opacity:1;transform:scaleX(0)}90%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes a-enable{from{opacity:.5}}
@keyframes a-spot-in{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes a-spot-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes a-note-in{from{opacity:0;visibility:visible;transform:translateY(calc(var(--u) * 8)) scale(.94)}to{opacity:1;visibility:visible;transform:none}}
@keyframes a-note-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden;transform:translateY(calc(var(--u) * -4))}}
.motion-ok .demo.run [data-a]{animation-duration:.8s;animation-timing-function:var(--ease-out);animation-fill-mode:both;animation-delay:calc(var(--d, 0) * 1ms)}
.motion-ok .demo.run [data-a="rise"]{animation-name:a-rise}
.motion-ok .demo.run [data-a="pop"]{animation-name:a-pop}
.motion-ok .demo.run [data-a="slide"]{animation-name:a-slide;animation-duration:.7s}
.motion-ok .demo.run [data-a="fade"]{animation-name:a-fade;animation-duration:.6s}
.motion-ok .demo.run [data-a="settle"]{animation-name:a-settle;animation-duration:1.2s}
.motion-ok .demo.run [data-a="dropin"]{animation-name:a-dropin;animation-duration:.9s}
.motion-ok .demo.run [data-a="shiftf"]{animation-name:a-shf;animation-duration:.9s;animation-timing-function:var(--ease-in-out)}
.motion-ok .demo.run [data-a="shiftr"]{animation-name:a-shr;animation-duration:.9s;animation-timing-function:var(--ease-in-out)}
.motion-ok .demo.armed:not(.run) [data-a]{opacity:0}
.motion-ok .demo.run .a-fnew .a-fr,.motion-ok .demo.run .a-rnew .a-rr{animation:a-glow 2.6s ease-out calc(var(--d, 0) * 1ms + 500ms) both}
/* a value that changes */
.motion-ok .demo.armed .swap .was,.motion-ok .demo.run .swap .was{display:block}
.motion-ok .demo.armed:not(.run) .swap .now{opacity:0}
.motion-ok .demo.run .swap .was{animation:a-out .35s var(--ease-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .swap .now{animation:a-in .5s var(--ease-out) calc(var(--d, 0) * 1ms + 140ms) both}
.motion-ok .demo.run .a-cn.bump{animation:a-bump .4s var(--ease-out) calc(var(--p, 0) * 1ms) backwards}
/* lists that gain a row: the rows below move down one slot (transform only) and the last one leaves */
.motion-ok .demo.armed .a-gw,.motion-ok .demo.run .a-gw{display:block;position:absolute;inset-inline:0}
.a-fshift .a-gw{top:calc(var(--u) * 108)}
.a-rshift .a-gw{top:calc(var(--u) * 336)}
.motion-ok .demo.run .a-fshift .a-gw{animation:a-snkf .9s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-rshift .a-gw{animation:a-snkr .9s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
/* board: a card leaves one column and lands in the next; the cards around it make room (transform only) */
.motion-ok .demo.armed .a-slot.gone,.motion-ok .demo.run .a-slot.gone{display:block;position:absolute;inset-inline:0;top:0}
.motion-ok .demo.armed .a-slot.gone.s3,.motion-ok .demo.run .a-slot.gone.s3{top:calc(var(--u) * 210)}
.motion-ok .demo.run .a-slot.gone.out{animation:a-vanish .45s var(--ease-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-slot.gone.sink{animation:a-down-out .9s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-slot.rises{animation:a-up .9s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-slot.rises.fresh{animation-name:a-up-in}
.motion-ok .demo.run .a-slot.drops{animation:a-down .9s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.armed:not(.run) .a-come .a-card{opacity:0}
.motion-ok .demo.run .a-come .a-card{animation:a-fly1 1.05s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-come.fly2 .a-card{animation-name:a-fly2;animation-duration:1.25s}
.motion-ok .demo.run .a-come .a-lamp.morph{animation:a-morph .6s linear calc(var(--d, 0) * 1ms + 900ms) both}
.motion-ok .demo.run .a-come .a-lamp.morph.b{animation-name:a-morph-b}
@container (max-width:679px){
.motion-ok .demo.run .a-come.fly2 .a-card{animation-name:a-fly1;animation-duration:1.05s}
.a-spot{display:none}
}
/* pointer, clicks, fields, dialog */
.motion-ok .demo.run .a-cur{animation:a-cur-in 1.3s var(--ease-in-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-cur.left{animation-name:a-cur-left}
.motion-ok .demo.run .a-cur.out{animation:a-cur-in 1.3s var(--ease-in-out) calc(var(--d, 0) * 1ms) both, a-cur-out .3s var(--ease-out) calc(var(--p, 0) * 1ms) forwards}
.motion-ok .demo.run .a-cur.left.out{animation-name:a-cur-left, a-cur-out}
.motion-ok .demo.run .a-ring{animation:a-ring .7s var(--ease-out) calc(var(--d, 0) * 1ms) forwards}
.motion-ok .demo.run .press{animation:a-press .16s var(--ease-out) calc(var(--p, 0) * 1ms) backwards}
.motion-ok .demo.run .a-btn.press{animation:a-pop .8s var(--ease-out) calc(var(--d, 0) * 1ms) both, a-press .16s var(--ease-out) calc(var(--p, 0) * 1ms) backwards}
.motion-ok .demo.run .a-in.foc{animation:a-focus calc(var(--p, 800) * 1ms) linear calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.run .a-over{animation:a-open .4s var(--ease-out) calc(var(--d, 0) * 1ms) both, a-close .35s var(--ease-out) calc(var(--p, 0) * 1ms) forwards}
.motion-ok .demo.run .a-modal{animation:a-modalin .5s var(--ease-out) calc(var(--d, 0) * 1ms) both}
.motion-ok .demo.armed:not(.run) .a-upl{opacity:.5}
.motion-ok .demo.run .a-upl{animation:a-enable .5s var(--ease-out) calc(var(--d, 0) * 1ms) both, a-press .16s var(--ease-out) calc(var(--p, 0) * 1ms) backwards}
.motion-ok .demo.run .a-upl::before{animation:a-fill 1.7s linear calc(var(--p, 0) * 1ms) both}
/* spotlight and annotations: in at --d, out at --p */
.motion-ok .demo.run .a-spot{animation:a-spot-in .6s var(--ease-out) calc(var(--d, 0) * 1ms) both, a-spot-out .5s var(--ease-out) calc(var(--p, 0) * 1ms) forwards}
.motion-ok .demo.run .a-note{animation:a-note-in .45s var(--ease-out) calc(var(--d, 0) * 1ms) both, a-note-out .35s var(--ease-out) calc(var(--p, 0) * 1ms) forwards}
@container (min-width:900px){.app.cam-ov{--u:max(min(calc(100cqw / 1280), calc((100svh - 190px) / 989)), calc(100cqw / 2133));width:calc(var(--u) * 1280);margin-inline:auto}}
@container (min-width:680px) and (max-width:899px){.app.cam-ov{--u:max(min(calc(100cqw / 960), calc((100svh - 190px) / 994)), calc(100cqw / 1600));width:calc(var(--u) * 960);margin-inline:auto}}
@keyframes a-cam-ov{0.000%{transform:none}27.907%{transform:none}37.209%{transform:translate(-12.00%, -12.00%) scale(1.12)}53.488%{transform:translate(-12.00%, -12.00%) scale(1.12)}63.953%{transform:translate(-6.00%, -12.00%) scale(1.12)}89.535%{transform:translate(-6.00%, -12.00%) scale(1.12)}100.000%{transform:none}}
@container (min-width:680px){.motion-ok .demo.run .app.cam-ov{animation:a-cam-ov 8600ms var(--ease-in-out) 0ms both}}
.sp-ov1{background:radial-gradient(ellipse 30% 34% at 80% 56%, transparent 58%, color-mix(in srgb, var(--app-ink) 34%, transparent) 100%)}
.sp-ov2{background:radial-gradient(ellipse 44% 18% at 50% 85%, transparent 58%, color-mix(in srgb, var(--app-ink) 34%, transparent) 100%)}
.nt-ov1{top:calc(var(--u) * -16);inset-inline-start:calc(var(--u) * 26)}
.nt-ov2{top:calc(var(--u) * -16);inset-inline-end:calc(var(--u) * 96)}
@container (min-width:900px){.app.cam-bd{--u:max(min(calc(100cqw / 1280), calc((100svh - 190px) / 980)), calc(100cqw / 2133));width:calc(var(--u) * 1280);margin-inline:auto}}
@container (min-width:680px) and (max-width:899px){.app.cam-bd{--u:max(min(calc(100cqw / 960), calc((100svh - 190px) / 984)), calc(100cqw / 1600));width:calc(var(--u) * 960);margin-inline:auto}}
@keyframes a-cam-bd{0.000%{transform:none}25.510%{transform:none}33.673%{transform:translate(0.00%, 0.00%) scale(1.1)}52.041%{transform:translate(0.00%, 0.00%) scale(1.1)}61.224%{transform:translate(-10.00%, -10.00%) scale(1.1)}90.816%{transform:translate(-10.00%, -10.00%) scale(1.1)}100.000%{transform:none}}
@container (min-width:680px){.motion-ok .demo.run .app.cam-bd{animation:a-cam-bd 9800ms var(--ease-in-out) 0ms both}}
.sp-bd1{background:radial-gradient(ellipse 40% 26% at 34% 38%, transparent 58%, color-mix(in srgb, var(--app-ink) 34%, transparent) 100%)}
.sp-bd2{background:radial-gradient(ellipse 50% 26% at 66% 74%, transparent 58%, color-mix(in srgb, var(--app-ink) 34%, transparent) 100%)}
.nt-bd1{top:calc(var(--u) * -22);inset-inline-start:34%}
.nt-bd2{top:calc(var(--u) * -22);inset-inline-start:34%}
@container (min-width:900px){.app.cam-rq{--u:max(min(calc(100cqw / 1280), calc((100svh - 190px) / 829)), calc(100cqw / 2133));width:calc(var(--u) * 1280);margin-inline:auto}}
@container (min-width:680px) and (max-width:899px){.app.cam-rq{--u:max(min(calc(100cqw / 960), calc((100svh - 190px) / 833)), calc(100cqw / 1600));width:calc(var(--u) * 960);margin-inline:auto}}
@keyframes a-cam-rq{0.000%{transform:none}28.283%{transform:none}37.374%{transform:translate(-4.00%, 0.00%) scale(1.08)}90.909%{transform:translate(-4.00%, 0.00%) scale(1.08)}100.000%{transform:none}}
@container (min-width:680px){.motion-ok .demo.run .app.cam-rq{animation:a-cam-rq 9900ms var(--ease-in-out) 0ms both}}
.nt-rq1{top:calc(var(--u) * -16);inset-inline-end:calc(var(--u) * 26)}
@container (min-width:900px){.app.cam-cl{--u:max(min(calc(100cqw / 1280), calc((100svh - 190px) / 1108)), calc(100cqw / 2133));width:calc(var(--u) * 1280);margin-inline:auto}}
@container (min-width:680px) and (max-width:899px){.app.cam-cl{--u:max(min(calc(100cqw / 960), calc((100svh - 190px) / 1135)), calc(100cqw / 1600));width:calc(var(--u) * 960);margin-inline:auto}}
@keyframes a-cam-cl{0.000%{transform:none}15.833%{transform:none}22.500%{transform:translate(-8.00%, 0.00%) scale(1.08)}72.500%{transform:translate(-8.00%, 0.00%) scale(1.08)}79.167%{transform:translate(-4.00%, -8.00%) scale(1.08)}92.500%{transform:translate(-4.00%, -8.00%) scale(1.08)}100.000%{transform:none}}
@container (min-width:680px){.motion-ok .demo.run .app.cam-cl{animation:a-cam-cl 12000ms var(--ease-in-out) 0ms both}}
.nt-cl1{top:calc(var(--u) * -16);inset-inline-end:calc(var(--u) * 26)}
@container (max-width:679px){.nt-bd1,.nt-bd2{top:auto;bottom:calc(var(--u) * 34);inset-inline-start:auto;inset-inline-end:calc(var(--u) * 8)}.nt-ov2{inset-inline-end:calc(var(--u) * 20)}}
}