/* feature-demos.css - the four looping product demos in index.html's feature cards.
   Pairs with feature-demos.js, which runs each loop as a small timeline of class changes; every
   movement here is a CSS transition between those states.

   They are ANIMATIONS BUILT FROM REAL SCREENSHOTS, not video files: nothing to buffer, sharp at any
   screen density, and they pause when off screen. Demo 1 and 2 animate over Alex's own screenshots
   (shot-globe-clean.png, shot-globe.png, shot-circuit-base.png); demo 3 is a DOM rebuild of the
   tracker board; demo 4 is the real public press-kit page in a scaled, scrolling frame.

   Sizes inside a demo are in cqw (1% of the demo's own width), so a demo looks the same at any
   card width. */

.mockup.demo{height:auto;aspect-ratio:16/9;padding:0;display:block;container-type:inline-size;
  background:#070b1a;user-select:none;-webkit-user-select:none}
/* The top row uses the map screenshot's own shape (1862x905) so the WHOLE page shows, filter menu
   included - a 16:9 box cropped its left side off. The circuit demo beside it matches so the two
   cards stay level; feature-demos.js reads the same ratio (TOPAR). */
.mockup.demo.demo-globe,.mockup.demo.demo-filters,.demo-circuit .cmapbox{aspect-ratio:1862/905}
.mockup.demo.demo-circuit{aspect-ratio:auto}
.demo-circuit .cmapbox{position:relative;overflow:hidden}
.featcard:hover .mockup.demo img{transform:none;filter:none}   /* the demo owns its own motion */
.demo .dl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo svg.dl{overflow:visible}

/* A "scene" is the demo drawn slightly smaller inside its box (zoomed out a touch, with a margin
   round it). It is its own size container, so every cqw inside it - text, pointer, chip - shrinks
   with it, and its inset is the same share of width and height, so it keeps the box's shape. */
.demo .dscene{position:absolute;inset:6.5%;container-type:inline-size;overflow:hidden;border-radius:1.4cqw}
.demo-circuit .dscene{border:1px solid rgba(140,150,220,.2);box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.8)}
.demo-tracker .dscene{overflow:visible}
.demo-globe .dscene{inset:0;border-radius:0}

/* the pointer */
.demo .dcur{position:absolute;left:80%;top:86%;width:3.2cqw;height:3.2cqw;z-index:9;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9.5-6.6 1.4L16 20l-2.9 1.3-3.5-7L5 18.5z' fill='%23fff' stroke='%23111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transition:opacity .25s}   /* position is animated by feature-demos.js along a curved path */
.demo .dcur.show{opacity:1}
.demo .dcur.down{transform:scale(.86)}
/* click ripple: positioned by JS at the pointer's tip */
.demo .dring{position:absolute;width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw;border-radius:50%;z-index:8;pointer-events:none;
  border:.35cqw solid rgba(255,255,255,.85);opacity:0;transform:scale(.2)}
.demo .dring.go{animation:dring .55s ease-out}
@keyframes dring{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}

/* ---------- 1. globe: one map, click the pin, its card opens over it ---------- */
/* ONE background image for the whole loop - the map never changes or cross-fades. The card is its
   own image (shot-wakaan-card.png, cut out of the real screenshot) and grows out of the pin, the
   way the real card opens. */
.demo-globe .ga{object-position:50% 50%;opacity:0;transition:opacity .6s ease}
.demo-globe .ga.in{opacity:1}
.demo-globe .gcard{position:absolute;left:53%;top:13%;height:74%;width:auto;aspect-ratio:392/765;z-index:4;
  opacity:0;transform:translateX(-50%) scale(.5);transform-origin:50% 60%;   /* 60% down the card = the pin */
  filter:drop-shadow(0 1.6cqw 3cqw rgba(0,0,0,.65));
  transition:opacity .22s ease,transform .38s cubic-bezier(.2,.9,.3,1.1)}
.demo-globe .gcard.in{opacity:1;transform:translateX(-50%) scale(1)}
/* End of the loop: the open card simply fades with the scene. It must NOT shrink back into the
   pin - that reads as "the click closed the card", and the pointer never clicks the button. */
.demo-globe .gcard.out{opacity:0;transform:translateX(-50%) scale(1);transition:opacity .35s ease}
.demo-globe .gcard img{display:block;width:100%;height:100%}
/* The "All applications" button's hover state, laid over the card image where the button sits
   (20-372 x 645-693 of the 392x765 cut-out). Green, like the real button under a pointer. */
.demo-globe .gbtn{position:absolute;left:5.1%;right:5.1%;top:84.3%;height:6.3%;border-radius:99px;opacity:0;
  background:rgba(79,209,165,.3);border:.3cqw solid #4FD1A5;box-shadow:0 0 2.4cqw -.3cqw #4FD1A5;
  transition:opacity .18s ease}
.demo-globe .gbtn.on{opacity:1}
/* The screenshot was taken with the event already tracked ("Tracking", green). This paints the
   button back to its untracked state, "+ Track", styled like the "+ Add to circuit" button beside
   it; .on is its hover. It sits at 20-192 x 703-745 of the 392x765 card. */
.demo-globe .gtrk{position:absolute;left:5.1%;width:43.9%;top:91.9%;height:5.5%;display:flex;align-items:center;justify-content:center;
  border-radius:.5cqw;background:#1b2250;border:1px solid rgba(140,150,220,.3);color:#ece9f4;
  font:700 .72cqw/1 var(--font-body,sans-serif);white-space:nowrap;
  transition:border-color .18s,box-shadow .18s,background .18s,color .18s}
/* Clicked: the overlay lifts away, revealing the screenshot's own green "Tracking" button. */
.demo-globe .gtrk.done{opacity:0;transition:opacity .15s}
.demo-globe .gtrk.on{border-color:#4FD1A5;background:#1d3a48;box-shadow:0 0 1.6cqw -.2cqw #4FD1A5;color:#dffcf0}

/* ---------- filters: the same page as the first demo, but the pointer works the filter menu ----------
   The picture is the globe screenshot with its pins removed (shot-globe-nopins.png); the pins are
   drawn over it where the real ones were, so a pin that is filtered out really disappears. A
   "window" (.fwin) shows one rectangle of that picture: the whole page on desktop, and on phones
   two stacked close-ups (the filter menu, then the map). Everything inside is placed in % of the
   full picture, so the same overlays work in every window. */
.mockup.demo.demo-filters{overflow:hidden}
.demo-filters .fwin{position:relative;overflow:hidden;width:100%}
.demo-filters .fph{display:none}
.demo-filters .fcanvas{position:absolute;container-type:inline-size}
.demo-filters .fcanvas img,.demo-filters .fcanvas svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-filters .fptr{position:absolute;inset:0;container-type:inline-size;pointer-events:none;z-index:9}
/* a filter pill's "on" look, laid over the pill in the picture (its label shows through) */
.demo-filters .fhl{position:absolute;border-radius:99px;border:.085cqw solid var(--c);opacity:0;
  background:color-mix(in srgb,var(--c) 20%,transparent);box-shadow:0 0 1cqw -.15cqw var(--c);transition:opacity .16s}
.demo-filters .fhl.on{opacity:1}
/* The filter menu and the open-calls list each scroll inside the page. Each is a box laid over
   its part of the picture (.fscroll) holding a tall strip (.fstrip) made of slices of the same
   picture plus a little drawn-in continuation; moving the strip up is the scroll. */
.demo-filters .fscroll{position:absolute;overflow:hidden;background:rgb(7,13,30)}
.demo-filters .fstrip{position:absolute;left:0;top:0;width:100%;transition:transform .75s cubic-bezier(.3,.6,.2,1)}
.demo-filters .fslice{position:relative;overflow:hidden;display:block}
.demo-filters .fslice img{position:absolute;inset:auto;width:100cqw;height:auto;max-width:none}
/* the rows of the filter menu that were below the screenshot's edge, drawn to match */
.demo-filters .fmore{position:relative;background:rgb(7,13,30);padding:.22cqw 0 0 1.05cqw}
.demo-filters .fmore .mrow{display:flex;gap:.48cqw;margin-bottom:.5cqw}
.demo-filters .fmore .mp{display:inline-flex;align-items:center;gap:.45cqw;height:1.93cqw;padding:0 .78cqw;border-radius:99px;
  background:rgb(13,21,46);border:.055cqw solid rgba(110,120,175,.16);color:#e1deea;font:600 .7cqw/1 'Hanken Grotesk',sans-serif;white-space:nowrap}
.demo-filters .fmore .mp i{width:.5cqw;height:.5cqw;border-radius:50%;background:#51D1A6}
.demo-filters .fmore .ml{margin:1.5cqw 0 .5cqw;font:800 .62cqw/1 'Hanken Grotesk',sans-serif;letter-spacing:.09em;color:#8f96b8;text-transform:uppercase}
.demo-filters .fmore .ms{width:19.6cqw;height:2.2cqw;border-radius:.6cqw;background:rgb(13,21,46);border:.055cqw solid rgba(110,120,175,.2);
  display:flex;align-items:center;padding:0 .8cqw;color:#e1deea;font:500 .72cqw/1 'Hanken Grotesk',sans-serif}
/* The open-calls list, once the real listings have loaded: the same cards the Festival Map would
   show for the filters that are on, drawn to match the screenshot's cards. Sizes are picture
   pixels / 18.62 (1cqw of the picture). */
.demo-filters .fcards{padding:.65cqw 0 0 .97cqw;background:rgb(7,13,30);min-height:40cqw}
.demo-filters .fcard{width:19.9cqw;margin-bottom:.7cqw;padding:1cqw 1.05cqw 1.1cqw;border-radius:.8cqw;
  background:linear-gradient(160deg,#151b3f,#0f1533);border:.055cqw solid rgba(110,120,175,.18);border-left:.17cqw solid #8B6CFF;
  animation:fcardin .3s ease both}
@keyframes fcardin{from{opacity:0;transform:translateY(.5cqw)}to{opacity:1;transform:none}}
.demo-filters .fcard .ftop{display:flex;gap:.8cqw;align-items:flex-start}
.demo-filters .fcanvas .fcard img.fth{position:static;inset:auto;flex:0 0 auto;width:3.45cqw;height:4.3cqw;border-radius:.45cqw;object-fit:cover;background:#1a2145}
.demo-filters .fcard .fti{flex:1;min-width:0}
.demo-filters .fcard .fti b{display:block;font:800 .92cqw/1.2 var(--font-head,sans-serif);color:#ece9f4}
.demo-filters .fcard .fti span{display:block;font-size:.72cqw;color:#c3c6da;margin-top:.3cqw}
.demo-filters .fcard .fti em{display:block;font-style:normal;font-size:.72cqw;font-weight:600;color:#51D1A6;margin-top:.3cqw}
.demo-filters .fcard .fopen{flex:0 0 auto;padding:.3cqw .65cqw;border-radius:99px;background:#51D1A6;color:#06241b;font:800 .52cqw/1 var(--font-body,sans-serif);letter-spacing:.06em}
.demo-filters .fcard .fchips{display:flex;flex-wrap:wrap;gap:.4cqw;margin-top:.85cqw}
.demo-filters .fcard .fchips span{padding:.32cqw .62cqw;border-radius:99px;font-size:.6cqw;font-weight:700;white-space:nowrap;color:var(--c,#b7bbd3);border:.055cqw solid var(--c,rgba(140,150,220,.3))}
.demo-filters .fcard .fchips span.x{color:#7d829f;border-color:rgba(140,150,220,.2);text-decoration:line-through}
.demo-filters .fcard .facts{display:flex;flex-wrap:wrap;gap:.5cqw 1.9cqw;margin-top:.95cqw;padding-left:.5cqw;font-size:.74cqw;font-weight:700;color:#a78bff}
/* the Event type menu, opened */
.demo-filters .fmore .ms{transition:border-color .15s,box-shadow .15s}
.demo-filters .fmore .ms.on{border-color:#8B6CFF;box-shadow:0 0 1cqw -.3cqw #8B6CFF}
.demo-filters .fmore .mdrop{display:none;position:absolute;left:1.05cqw;width:19.6cqw;margin-top:.25cqw;z-index:3;border-radius:.6cqw;overflow:hidden;
  background:rgb(13,21,46);border:.055cqw solid rgba(140,150,220,.35);box-shadow:0 1cqw 2cqw -.6cqw rgba(0,0,0,.8)}
.demo-filters .fmore.open .mdrop{display:block}
.demo-filters .fmore .mo{padding:.55cqw .8cqw;color:#e1deea;font:500 .72cqw/1.2 'Hanken Grotesk',sans-serif;white-space:nowrap}
.demo-filters .fmore .mo.hot{background:#3b2f8f}
.demo-filters .fpin{transition:opacity .28s,transform .28s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:50% 100%}
.demo-filters .fpin path{stroke:#fff;stroke-width:2.2;transition:fill .25s}
.demo-filters .fpin.off{opacity:0;transform:scale(.3)}
/* the list panel's own count line, repainted so it can change */
.demo-filters .fcount{position:absolute;left:77.6%;top:14.4%;width:14.6%;height:3.2%;display:flex;align-items:center;padding-left:.22cqw;
  background:rgb(7,13,30);color:#a3a8c4;font:400 .7cqw/1 var(--font-body,sans-serif);white-space:nowrap}

/* The planner's own "Your circuit" panel under the map, laid out like the real one: heading,
   total, the four action buttons, then one row per stop (number, name, place and dates, the leg
   from the previous stop, an "Apply:" chip per open role, and the up / down / remove buttons).
   A row does not exist until its stop is clicked. The rows area has a fixed height and scrolls
   itself to the newest row, as the real panel would be scrolled, so the card never changes size. */
.demo-circuit .clist{background:#070d1e;border-top:1px solid rgba(139,108,255,.55)}
.demo-circuit .chead{display:flex;align-items:center;gap:1.1cqw;padding:1.5cqw 2cqw 1.1cqw;flex-wrap:wrap}
.demo-circuit .chead b{font:800 1.75cqw/1.2 var(--font-head,sans-serif);color:#ece9f4}
.demo-circuit .chead .ctot{font-size:1.3cqw;color:#a3a8c4}
.demo-circuit .cbtns{margin-left:auto;display:flex;gap:.8cqw;flex-wrap:wrap}
.demo-circuit .cbtns span{padding:.75cqw 1.4cqw;border-radius:.9cqw;font-size:1.25cqw;font-weight:600;color:#ece9f4;white-space:nowrap;
  background:#0f1630;border:1px solid rgba(140,150,220,.22)}
.demo-circuit .cbtns span.hot{font-weight:800;background:linear-gradient(135deg,#3b2f8f,#2a2470);border-color:#8B6CFF}
.demo-circuit .cview{height:23cqw;overflow:hidden;padding:0 2cqw}
.demo-circuit .crows{transition:transform 2.4s cubic-bezier(.4,.2,.3,1)}   /* an unhurried scroll */
.demo-circuit .cptr{position:absolute;inset:0;container-type:inline-size;pointer-events:none;z-index:9}
.demo-circuit .crow{display:none;gap:1.3cqw;padding:1.25cqw 0;border-bottom:1px dashed rgba(140,150,220,.2);align-items:flex-start}
.demo-circuit .crow.on{display:flex;animation:crowin .3s ease}
@keyframes crowin{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
.demo-circuit .crow > i{flex:0 0 auto;width:2.7cqw;height:2.7cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 1.3cqw/1 var(--font-head,sans-serif);font-style:normal;color:#fff;background:#3b2f8f;border:.15cqw solid #8B6CFF}
.demo-circuit .cbody{flex:1;min-width:0}
.demo-circuit .cbody b{display:block;font:700 1.55cqw/1.25 var(--font-head,sans-serif);color:#ece9f4}
.demo-circuit .cbody .cmeta{display:block;font-size:1.25cqw;color:#a3a8c4;margin-top:.3cqw}
.demo-circuit .cbody .cleg{display:block;font-size:1.2cqw;font-weight:600;color:#a78bff;margin-top:.35cqw}
.demo-circuit .ctags{display:flex;flex-wrap:wrap;gap:.7cqw;margin-top:.8cqw}
.demo-circuit .ctags span{padding:.45cqw 1.15cqw;border-radius:99px;font-size:1.1cqw;font-weight:700;white-space:nowrap;color:var(--c);border:1px solid var(--c)}
.demo-circuit .cmv{flex:0 0 auto;display:flex;flex-direction:column;gap:.45cqw}
.demo-circuit .cmv span{width:2.8cqw;height:2cqw;border-radius:.5cqw;display:flex;align-items:center;justify-content:center;font-size:1cqw;line-height:1;color:#c9cce0;
  background:#0f1630;border:1px solid rgba(140,150,220,.22)}

.demo-circuit .cmtoggle{display:none;position:relative;z-index:3}
/* Empty circuit: the real planner shows only the map until the first stop is added. The list
   panel is slid out below the card and the map sits in the middle of the space, a little larger;
   the first stop brings the panel up and the map back to its place. The card's own height never
   changes, because the panel keeps its space while hidden. */
.mockup.demo.demo-circuit{background:#070d1e}
.demo-circuit .cmapbox{transition:transform .6s cubic-bezier(.3,.6,.2,1)}
.demo-circuit .clist{position:relative;z-index:2;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .3s}
.demo-circuit.empty .clist{transform:translateY(100%);opacity:0}
/* While the circuit is empty the map sits in the middle of the card at its normal size (an
   enlarged map just looked like a blurry screenshot); its top and bottom edges fade into the
   background so it does not read as a cut-out strip. */
.demo-circuit.empty .cmapbox{-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
/* The closing move: after the list has been scrolled, the map eases in a little on the route.
   Kept small - the map image has no detail to spare beyond this. */
.demo-circuit .dscene{transition:transform 1.1s cubic-bezier(.3,.6,.2,1);transform-origin:54% 52%}
.demo-circuit .cmapbox.zoom .dscene{transform:scale(1.14)}

/* ---------- tracker, phone build ----------
   The real tracker on a phone is not three columns: it is a row of stage tabs with one stage's
   cards under it, and a card moves stage through its own status menu. feature-demos.js builds this
   instead of the board when the page loads at phone width (.is-phone on the box). Sizes are cqw of
   the box. */
.mockup.demo.demo-tracker.is-phone{aspect-ratio:auto}
.demo-tracker .tphone{position:relative;padding:3.4cqw 3.4cqw 4cqw;container-type:inline-size}
.demo-tracker .mtabs{display:flex;gap:1.8cqw;overflow:hidden;padding-bottom:2.2cqw;border-bottom:.8cqw solid #6d57e0;margin-bottom:3.4cqw}
.demo-tracker .mtab{flex:0 0 auto;padding:2.3cqw 3.2cqw;border-radius:99px;font:700 3.5cqw/1 'Hanken Grotesk',sans-serif;color:#ece9f4;white-space:nowrap;
  background:#0f1630;border:.4cqw solid rgba(140,150,220,.2);transition:background .2s,border-color .2s}
.demo-tracker .mtab b{font-weight:600;color:#a3a8c4;margin-left:.6cqw}
.demo-tracker .mtab.on{background:linear-gradient(135deg,#3b2f8f,#2a2470);border-color:#8B6CFF}
.demo-tracker .mcol{border-radius:3.4cqw;background:rgba(255,255,255,.035);border:.3cqw solid rgba(140,150,220,.16);padding:3.2cqw 3cqw 1.4cqw;height:150cqw;overflow:hidden}   /* a window onto the list: a fourth card runs off the bottom */
.demo-tracker .mhead{display:flex;justify-content:space-between;font:800 3cqw/1 'Hanken Grotesk',sans-serif;letter-spacing:.07em;color:#ece9f4;margin-bottom:3cqw}
.demo-tracker .mhead span{font-weight:700;color:#8f95b8}
.demo-tracker .mcard{position:relative;border-radius:2.6cqw;background:linear-gradient(160deg,#171d42,#10163a);border:.3cqw solid rgba(140,150,220,.2);
  padding:3cqw 3cqw 3.2cqw;margin-bottom:2.6cqw;transition:opacity .3s,transform .3s}
.demo-tracker .mcard.gone{opacity:0;transform:translateX(6cqw)}
.demo-tracker .mcard b{display:block;font:700 3.7cqw/1.2 var(--font-head,sans-serif);color:#ece9f4;padding-right:5cqw}
.demo-tracker .mcard i{position:absolute;right:3cqw;top:2.6cqw;font-style:normal;font-size:3.4cqw;color:#8f95b8}
.demo-tracker .mcard .mcity{display:block;font-size:3.1cqw;color:#c3c6da;margin-top:.9cqw}
.demo-tracker .mcard .mdate{display:block;font-size:3.1cqw;font-weight:600;color:#a78bff;margin-top:.8cqw}
.demo-tracker .mchips{display:flex;flex-wrap:wrap;gap:1.4cqw;margin-top:1.9cqw}
.demo-tracker .mchips em{font-style:normal;padding:1cqw 2.3cqw;border-radius:99px;font-size:2.7cqw;font-weight:700;color:var(--c);border:.35cqw solid var(--c)}
.demo-tracker .mrow{display:flex;align-items:center;gap:3cqw;margin-top:2.2cqw}
.demo-tracker .mrow u{flex:0 0 auto;text-decoration:none;font-size:3.1cqw;font-weight:700;color:#a78bff}
.demo-tracker .mrow .msel{flex:1;margin-top:0}
.demo-tracker .mnote{margin-top:2.4cqw;padding:2.3cqw 2.6cqw;border-radius:1.8cqw;font-size:2.9cqw;color:#6f7598;background:#0c1230;border:.3cqw solid rgba(140,150,220,.16)}
.demo-tracker .msel{margin-top:2.2cqw;padding:2.3cqw 2.6cqw;border-radius:1.8cqw;font-size:3cqw;font-weight:600;color:#ece9f4;background:#0c1230;
  border:.3cqw solid rgba(140,150,220,.22);display:flex;justify-content:space-between;transition:border-color .2s,color .2s,box-shadow .2s}
.demo-tracker .msel.ok{color:#51D1A6;border-color:#51D1A6;box-shadow:0 0 3cqw -1cqw #51D1A6}
.demo-tracker .tphone .dcur{width:6.5cqw;height:6.5cqw}
.demo-tracker .tphone .dring{width:11cqw;height:11cqw;margin:-5.5cqw 0 0 -5.5cqw}

/* ---------- 2. circuit: four stops, one at a time ---------- */
.demo-circuit .cln{fill:none;stroke:#8B6CFF;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 4px rgba(139,108,255,.8));transition:stroke-dashoffset .55s ease-in-out}
.demo-circuit .cln.on{stroke-dashoffset:0}
/* A festival pin sits at each spot before it is clicked (same teardrop as the map's own pins);
   the click swaps it for the numbered stop. */
.demo-circuit .cpin{transition:opacity .2s,transform .25s;transform-box:fill-box;transform-origin:50% 100%}
.demo-circuit .cpin path{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px rgba(224,89,138,.55))}
.demo-circuit .cpin.gone{opacity:0;transform:scale(.4)}
.demo-circuit .cst{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.demo-circuit .cst.on{opacity:1;transform:scale(1)}
.demo-circuit .cst circle{fill:#8B6CFF;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(139,108,255,.9))}
.demo-circuit .cst text{fill:#fff;font:800 13px/1 var(--font-head,sans-serif);text-anchor:middle;dominant-baseline:central}
.demo .dchip{position:absolute;left:3cqw;bottom:3cqw;z-index:6;padding:1.1cqw 2cqw;border-radius:99px;font-size:2.5cqw;font-weight:700;
  color:#ece9f4;background:rgba(18,22,44,.86);border:1px solid rgba(139,108,255,.5);opacity:0;transform:translateY(1cqw);
  transition:opacity .3s,transform .3s}
.demo .dchip.on{opacity:1;transform:none}

/* ---------- 3. tracker: drag two cards into Accepted ---------- */
.demo-tracker{background:#0a0e20}
.demo-tracker .tcol{position:absolute;top:5%;bottom:5%;width:30.6%;border-radius:1.6cqw;background:rgba(255,255,255,.035);
  border:1px solid rgba(140,150,220,.16);transition:border-color .2s,background .2s}
.demo-tracker .tcol.c1{left:2.2%}.demo-tracker .tcol.c2{left:34.7%}.demo-tracker .tcol.c3{left:67.2%}
.demo-tracker .tcol.hot{border-color:#4FD1A5;background:rgba(79,209,165,.07)}
.demo-tracker .thead{display:flex;justify-content:space-between;align-items:center;padding:2cqw 2.2cqw 0;
  font-size:1.9cqw;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#aeb4d6}
.demo-tracker .c3 .thead{color:#4FD1A5}
.demo-tracker .tnum{font-size:1.9cqw;font-weight:700;color:#8f95b8;letter-spacing:0}
.demo-tracker .tdrop{position:absolute;left:8%;right:8%;top:22%;padding:3cqw 0;text-align:center;font-size:1.9cqw;color:#6f7598;
  border:1px dashed rgba(140,150,220,.25);border-radius:1.2cqw;transition:opacity .2s}
.mockup.demo.demo-tracker{aspect-ratio:3/2}   /* taller than 16:9: the Applied column holds four cards */
.demo-tracker .tcard{position:absolute;width:27.4%;padding:1.15cqw 1.6cqw;border-radius:1.4cqw;z-index:2;
  background:linear-gradient(180deg,#1a2147,#141a38);border:1px solid rgba(140,150,220,.22);
  transition:left .75s cubic-bezier(.45,.05,.25,1),top .75s cubic-bezier(.45,.05,.25,1),transform .2s,box-shadow .2s,opacity .3s}
.demo-tracker .tcard.drag{z-index:7;transform:rotate(2deg) scale(1.04);box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.8);border-color:#8B6CFF}
.demo-tracker .tcard b{display:block;font-size:2.15cqw;line-height:1.2;color:#ece9f4;font-family:var(--font-head,inherit)}
.demo-tracker .tcard span{display:block;font-size:1.7cqw;color:#9aa0c2;margin-top:.5cqw}
.demo-tracker .tcard em{display:inline-block;margin-top:1cqw;padding:.45cqw 1.3cqw;border-radius:99px;font-style:normal;
  font-size:1.6cqw;font-weight:700;color:#b9a6ff;border:1px solid rgba(139,108,255,.5);transition:color .25s,border-color .25s,background .25s}
.demo-tracker .tcard.ok em{color:#0a1a14;background:#4FD1A5;border-color:#4FD1A5}

/* ---------- 4. press kit: the real page, scrolling ---------- */
.demo-cpk{background:#0b0d1c}
.demo-cpk iframe{position:absolute;left:0;top:0;width:640px;border:0;transform-origin:0 0;pointer-events:none;opacity:0;
  transition:opacity .4s}
.demo-cpk iframe.ready{opacity:1}
/* scroll speed is set per move by feature-demos.js (an inline transition), not here */
.demo-cpk .dposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 0;transition:opacity .4s}
.demo-cpk.live .dposter{opacity:0}

/* ---------- phones ----------
   A phone-width card is about 300px across, so the desktop framing (a whole wide screen squeezed
   into it) was unreadable. Each demo gets a taller box and is CROPPED to the part that matters
   instead of shrunk: the scene is made larger than the box and positioned so the action sits in
   view. Every position inside a scene is a percentage of the scene, so nothing else changes. */
@media(max-width:760px){
  /* globe: square box, zoomed onto the globe's middle and the event card */
  .mockup.demo.demo-globe{aspect-ratio:1/1}
  .demo-globe .dscene{inset:auto;top:-14.5%;left:50%;height:124%;width:auto;aspect-ratio:1862/905;transform:translateX(-53%)}
  /* circuit: 4:3 box showing the continental US, coasts cropped; no inset frame */
  .demo-circuit .cmapbox{aspect-ratio:4/3}
  .demo-circuit .chead{gap:2cqw;padding:3.4cqw 3.6cqw 2.4cqw}
  .demo-circuit .chead b{font-size:4.4cqw}
  .demo-circuit .chead .ctot{font-size:3.1cqw}
  .demo-circuit .cbtns{margin-left:0;gap:1.6cqw;width:100%}
  .demo-circuit .cbtns span{font-size:3cqw;padding:1.7cqw 2.6cqw;border-radius:2cqw}
  .demo-circuit .cview{height:47cqw;padding:0 3.6cqw}
  /* the mobile planner's Map / List switch above the map, and a slight zoom onto the route once
     all four stops are in */
  .demo-circuit .cmtoggle{display:flex;gap:2.4cqw;padding:2.8cqw 3cqw;background:#070d1e}
  .demo-circuit .cmtoggle span{flex:1;text-align:center;padding:2.2cqw 0;border-radius:99px;font:700 3.5cqw/1 'Hanken Grotesk',sans-serif;color:#ece9f4;
    background:#0f1630;border:.4cqw solid rgba(140,150,220,.2)}
  .demo-circuit .cmtoggle span.on{background:linear-gradient(135deg,#3b2f8f,#2a2470);border-color:#8B6CFF}
  .demo-circuit .cmapbox.zoom .dscene{transform:translateX(-48%) scale(1.16)}
  .demo-circuit .crow{gap:2.8cqw;padding:3cqw 0}
  .demo-circuit .crow > i{width:6.4cqw;height:6.4cqw;font-size:3.2cqw;border-width:.35cqw}
  .demo-circuit .cbody b{font-size:3.9cqw}
  .demo-circuit .cbody .cmeta{font-size:3.2cqw;margin-top:.6cqw}
  .demo-circuit .cbody .cleg{font-size:3.1cqw;margin-top:.7cqw}
  .demo-circuit .ctags{gap:1.5cqw;margin-top:1.8cqw}
  .demo-circuit .ctags span{font-size:2.8cqw;padding:1cqw 2.4cqw}
  .demo-circuit .cmv{gap:1cqw}
  .demo-circuit .cmv span{width:6.6cqw;height:5cqw;border-radius:1.2cqw;font-size:2.6cqw}
  .demo-circuit .dscene{inset:auto;top:0;left:50%;height:100%;width:auto;aspect-ratio:1862/905;transform:translateX(-48%);
    border:0;border-radius:0;box-shadow:none}
  .demo .dchip{font-size:3.6cqw;padding:1.6cqw 2.8cqw}
  /* tracker: square box showing just Applied and Accepted - the two columns the drag is between */
  /* tracker: all three columns (Interested, Applied, Accepted) in a slightly tall box, with the
     type sized up for the narrow cards */
  .mockup.demo.demo-tracker{aspect-ratio:10/12.4}
  .demo-tracker .dscene{inset:0}
  .demo-tracker .tcol{border-radius:2.4cqw}
  .demo-tracker .thead{font-size:2.5cqw;padding:2.4cqw 2cqw 0;letter-spacing:.04em}
  .demo-tracker .tnum{font-size:2.5cqw}
  .demo-tracker .tdrop{font-size:2.6cqw;padding:5cqw 0}
  .demo-tracker .tcard{padding:1.9cqw 1.8cqw;border-radius:2cqw}
  .demo-tracker .tcard b{font-size:3.05cqw;line-height:1.18}
  .demo-tracker .tcard span{font-size:2.45cqw;margin-top:.7cqw}
  .demo-tracker .tcard em{font-size:2.3cqw;margin-top:1.3cqw;padding:.6cqw 1.6cqw}
  /* filters: two close-ups stacked - the filter menu, then the map */
  .mockup.demo.demo-filters{aspect-ratio:auto}
  .demo-filters .fdesk{display:none}
  .demo-filters .fph{display:block}
  .demo-filters .fph + .fph{border-top:1px solid rgba(140,150,220,.25)}
  .demo-filters .fptr .dcur{width:6.5cqw;height:6.5cqw}
  .demo-filters .fptr .dring{width:11cqw;height:11cqw;margin:-5.5cqw 0 0 -5.5cqw}
  /* press kit: a tall box; feature-demos.js also lays the kit out at phone width so it reads */
  .mockup.demo.demo-cpk{aspect-ratio:4/5}
}

/* Desktop sizes. The press kit is a narrow page, and the planner and tracker are panels, not
   full-width screens: at the full card width each was far bigger than the real thing. The
   planner's map also runs edge to edge, as it does in the real planner. */
@media(min-width:761px){
  .mockup.demo.demo-circuit,.mockup.demo.demo-tracker{max-width:760px;margin-left:auto;margin-right:auto}
  /* The tracker demo is the whole App Tracker page now (.tpage), so it is sized like the other
     full-page demos: as wide as the screen's height allows, caption included. */
  .mockup.demo.demo-tracker.tpage{max-width:calc((100svh - 250px) * 2.112);min-width:520px}
  /* The two full-page demos are capped by the SCREEN's height, so the section heading, the demo
     and its caption all fit one screen after "See how it works" (the caption was being cut off). */
  /* Demos 1 and 2 are the SAME size (Alex, 2026-10-08). The cap is what lets the section heading,
     the first demo and its caption all fit one screen: 318px = nav + heading + card chrome. */
  .mockup.demo.demo-globe,.mockup.demo.demo-filters{max-width:calc((100svh - 318px) * 2.057);min-width:520px;margin-left:auto;margin-right:auto}
  /* The filters demo is shown larger than the first one (its small type was hard to read): the
     stepper centres this card on its own, so it only has to leave room for its caption. */
  /* (the filters demo had its own larger cap of 250px here until the two were matched) */
  .demo-circuit .dscene{inset:0;border:0;border-radius:0;box-shadow:none}
  .mockup.demo.demo-cpk{max-width:810px;margin-left:auto;margin-right:auto}   /* halfway between 620 and the full card */
}

/* Phones have no mouse pointer, so no demo shows one there (Alex, 2026-10-07). The steps still run
   - taps, drags and scrolls just happen without an arrow. */
@media(max-width:760px){ .demo .dcur,.demo .dring{display:none !important} }

/* ======================================================================================
   LIVE MAPS (2026-10-07). The filters and circuit demos draw a real MapLibre globe instead of
   a screenshot (see feature-demos.js "LIVE MAPS"): sharp at any size, and it fills its box.
   ====================================================================================== */
.demo .fmap,.demo .cmap{position:absolute;inset:0;background:#070d1e}
.demo .fmap canvas,.demo .cmap canvas{outline:none}

/* ---- circuit: the map is the whole card; the "Your circuit" panel slides up over its bottom ---- */
.mockup.demo.demo-circuit.live{aspect-ratio:1.27;position:relative;overflow:hidden}
.demo-circuit.live .cmapbox{position:absolute;inset:0;aspect-ratio:auto;transform:none;transition:none}
.demo-circuit.live.empty .cmapbox{-webkit-mask-image:none;mask-image:none}
.demo-circuit.live .clist{position:absolute;left:0;right:0;bottom:0;box-shadow:0 -2cqw 4cqw -2cqw rgba(0,0,0,.7)}
.demo-circuit.live .cmtoggle{position:absolute;left:0;right:0;top:0}
.demo-circuit .cstop{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#8B6CFF;border:2px solid #fff;
  color:#fff;font:800 13px/1 var(--font-head,sans-serif);box-shadow:0 0 12px rgba(139,108,255,.9);animation:cstopin .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes cstopin{from{opacity:0;scale:.2}to{opacity:1;scale:1}}

/* ---- filters, desktop: a live map where the screenshot's globe was, and the real drop-downs ---- */
.demo-filters .fmapbox{position:absolute;overflow:hidden;background:#070d1e}
.demo-filters .fmore .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5cqw .55cqw;width:23.1cqw;margin-top:1.1cqw;align-items:end}
.demo-filters .fmore .mgrid .ml{margin:.75cqw 0 0}
.demo-filters .fmore .mgrid .ms{width:auto;justify-content:space-between;gap:.4cqw;white-space:nowrap;overflow:hidden}
.demo-filters .fmore .ms i{font-style:normal;font-size:.6cqw;color:#8f96b8}
.demo-filters .fmore .mdrop{left:1.05cqw;top:7.6cqw;margin-top:0;width:15cqw;height:20cqw}
.demo-filters .fmore .mdin{transition:transform 1.1s cubic-bezier(.4,.2,.3,1)}

/* ---- filters, phones: the real mobile Festival Map - map on top, the filter menu under it ---- */
.demo-filters .fphone{position:relative;overflow:hidden;container-type:inline-size;background:#070d1e;font-family:'Hanken Grotesk',sans-serif}
.demo-filters .fpmap{position:relative;height:60cqw;border-bottom:1px solid rgba(140,150,220,.25)}
.demo-filters .fpmenu{position:relative;height:98cqw;overflow:hidden}
.demo-filters .fpstrip{padding:3cqw 3.6cqw 5cqw;transition:transform .9s cubic-bezier(.35,.3,.25,1)}
.demo-filters .fpstamp{font-size:2.75cqw;color:#a3a8c4;line-height:1.5}
.demo-filters .fpstamp span{display:block;color:#51D1A6}
.demo-filters .fpstamp u{text-underline-offset:.5cqw}
.demo-filters .fpsearch{margin:2.6cqw 0 1cqw;padding:2.9cqw 3.2cqw;border-radius:2.6cqw;background:#0d152e;border:.3cqw solid rgba(110,120,175,.22);font-size:3.3cqw;color:#7f86a8}
.demo-filters .fpgl{display:flex;align-items:center;gap:1.6cqw;margin:3.6cqw 0 2cqw;font-size:2.6cqw;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.demo-filters .fpgl i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:currentColor}
.demo-filters .fppills{display:flex;flex-wrap:wrap;gap:1.7cqw}
.demo-filters .pp{display:inline-flex;align-items:center;gap:1.5cqw;padding:2cqw 2.9cqw;border-radius:99px;background:#0d152e;border:.35cqw solid rgba(110,120,175,.18);
  color:#e1deea;font-size:3.05cqw;font-weight:600;white-space:nowrap;transition:border-color .15s,box-shadow .15s,background .15s}
.demo-filters .pp i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:var(--c)}
.demo-filters .pp.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,#0d152e);box-shadow:0 0 3cqw -1cqw var(--c)}
.demo-filters .fpgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw 2.2cqw;margin-top:4.4cqw;align-items:end}
.demo-filters .fpl{margin-top:1.8cqw;font-size:2.4cqw;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8f96b8}
.demo-filters .psel{display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:3cqw 3cqw;border-radius:2.6cqw;background:#0d152e;border:.3cqw solid rgba(110,120,175,.22);
  color:#e1deea;font-size:3.2cqw;white-space:nowrap;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.demo-filters .psel.on{border-color:#8B6CFF;box-shadow:0 0 3cqw -1cqw #8B6CFF}
.demo-filters .psel i{flex:0 0 auto;width:1.6cqw;height:1.6cqw;border-right:.45cqw solid #8f96b8;border-bottom:.45cqw solid #8f96b8;transform:rotate(45deg) translateY(-.5cqw)}
.demo-filters .fpfoot{display:flex;align-items:center;justify-content:space-between;margin-top:4.4cqw;font-size:3.1cqw;color:#c3c6da}
.demo-filters .fpfoot span{display:flex;align-items:center;gap:1.8cqw}
.demo-filters .fpfoot b{width:3.6cqw;height:3.6cqw;border-radius:.8cqw;border:.35cqw solid #8f96b8}
.demo-filters .fpfoot u{color:#a78bff;text-decoration:none;font-weight:700}
/* the full-screen list a phone shows when "All types" is tapped */
.demo-filters .fsheet{position:absolute;inset:0;z-index:5;overflow:hidden;background:#1d1e24;transform:translateY(102%);transition:transform .32s cubic-bezier(.3,.7,.3,1)}
.demo-filters .fsheet.open{transform:none}
.demo-filters .fsin{padding:2cqw 0;transition:transform 1.1s cubic-bezier(.4,.2,.3,1)}
.demo-filters .so{display:flex;align-items:center;justify-content:space-between;height:12.6cqw;padding:0 6cqw;color:#e9e9ee;font-size:4.2cqw;transition:background .12s}
.demo-filters .so i{width:4.8cqw;height:4.8cqw;border-radius:50%;border:.5cqw solid #9a9ba6;position:relative}
.demo-filters .so.on i{border-color:#8ab4f8}
.demo-filters .so.on i::after{content:"";position:absolute;inset:.8cqw;border-radius:50%;background:#8ab4f8}
.demo-filters .so.hot,.demo-filters .so.on{background:rgba(255,255,255,.1)}   /* only the selected (or just-pressed) option is lighter */
@media(max-width:760px){
  .mockup.demo.demo-circuit.live{aspect-ratio:100/152}
  .demo-circuit .cstop{width:18px;height:18px;font-size:10px;border-width:1.5px}
}

/* circuit, desktop: the whole planner page (shot-planner.png, cut off above the host's badge) with
   the live map and the panel over its middle column. 1cqw inside .cpanel = 1% of the column. */
.demo-circuit .cpanel{position:absolute;inset:0}
.mockup.demo.demo-circuit.live.page{aspect-ratio:1911/832}
.demo-circuit.page .cpage{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.demo-circuit.page .cpanel{left:25.96%;top:9.26%;right:23.02%;bottom:0;container-type:inline-size;overflow:hidden;background:#070d1e}
.demo-circuit.page .cview{height:19cqw}
.demo-circuit.page .cstop{width:18px;height:18px;font-size:10px;border-width:1.5px}
@media(min-width:761px){
  .mockup.demo.demo-circuit.live.page{max-width:calc((100svh - 250px) * 2.297);min-width:520px}
}

/* the planner picture was taken signed in; this paints the nav's account chip over as "Log in" */
.demo-circuit .clogin{position:absolute;left:91.4%;top:0;width:7.6%;height:8.6%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#0d1225,#0b1020);container-type:normal}
.demo-circuit .clogin b{padding:.62cqw 1cqw;border-radius:99px;border:.08cqw solid #8B6CFF;background:linear-gradient(135deg,#3b2f8f,#2a2470);color:#fff;font:700 .72cqw/1 'Hanken Grotesk',sans-serif;white-space:nowrap}

/* filters demo: the drawn Long-Term Listings pill can be switched on, and the list visibly
   refreshes each time the filters change */
.demo-filters .fmore .mp{transition:border-color .15s,box-shadow .15s,background .15s}
.demo-filters .fmore .mp.on{border-color:#51D1A6;background:rgba(81,209,166,.14);box-shadow:0 0 1cqw -.3cqw #51D1A6}
.demo-filters .fcards{animation:flistin .32s ease}
@keyframes flistin{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}

/* tracker demo: the deadline-reminder pill on a card */
.demo-tracker .trem{display:inline-block;margin:1cqw 0 0 .8cqw;padding:.45cqw 1.1cqw;border-radius:99px;text-decoration:none;white-space:nowrap;
  font-size:1.45cqw;font-weight:700;color:#F2C14E;border:1px solid rgba(242,193,78,.6);background:rgba(242,193,78,.1)}
.demo-tracker .trem::before{content:"";display:inline-block;width:.9cqw;height:.9cqw;margin-right:.6cqw;border-radius:50%;background:#F2C14E;vertical-align:middle}
.demo-tracker .mcard .trem{display:inline-block;margin:1.6cqw 0 0;font-size:2.7cqw;padding:.9cqw 2.2cqw;border-width:.3cqw}
.demo-tracker .mcard .trem::before{width:1.7cqw;height:1.7cqw;margin-right:1.3cqw}
.demo-tracker .tcard .trem{position:absolute;right:1.3cqw;bottom:1.15cqw;margin:0}   /* beside the status pill, never wrapping under it */

/* filters demo, desktop: the screenshot's "Data updated" line and "Take the tour" link are painted
   over (picture px 0-460 x 206-268); they belong to the real map only */
.demo-filters .fnostamp{position:absolute;left:0;top:22.76%;width:24.7%;height:6.85%;background:rgb(7,13,30)}
/* The violet dividing line between the map and the menu / panel, as on the real pages: a 1px
   accent rule with a soft glow and a short grip in the middle. */
.demo-filters .fpmap{border-bottom:1px solid #8B6CFF;box-shadow:0 0 5cqw -1cqw rgba(139,108,255,.55);z-index:2}
.demo-filters .fpmap::after{content:"";position:absolute;left:50%;bottom:1.6cqw;width:14cqw;height:.7cqw;margin-left:-7cqw;border-radius:9px;background:rgba(139,108,255,.6)}
.demo-circuit .clist{border-top:1px solid #8B6CFF}
.demo-circuit.live .clist{box-shadow:0 -2cqw 4cqw -2cqw rgba(0,0,0,.7),0 0 4cqw -1cqw rgba(139,108,255,.6)}
.demo-circuit .clist::before{content:"";position:absolute;left:50%;top:-1.5cqw;width:10cqw;height:.5cqw;margin-left:-5cqw;border-radius:9px;background:rgba(139,108,255,.6)}
@media(max-width:760px){.demo-circuit .clist::before{top:-2.6cqw;width:14cqw;height:.7cqw;margin-left:-7cqw}}

/* ---- App Tracker demo, desktop: the whole page, from Alex's screenshot (2026-10-08) ----
   Positions are % of a 1905 x 902 page; sizes are cqw of the scene (1cqw = 19.05 page px). */
.mockup.demo.demo-tracker.tpage{aspect-ratio:1905/902;background:#070b1c}
.demo-tracker.tpage .dscene{inset:0;border-radius:0;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,rgba(140,150,220,.13) .06cqw,transparent .07cqw) 0 0/1.15cqw 1.15cqw,#070b1c}
.demo-tracker .tk-nav{position:absolute;left:0;right:0;top:0;height:8.5%;background:linear-gradient(#0d1225,#0b1020);border-bottom:.05cqw solid rgba(140,150,220,.14)}
.demo-tracker .tk-brand{position:absolute;left:1.05%;top:50%;transform:translateY(-50%);line-height:1}
.demo-tracker .tk-brand b{display:block;font:800 1.32cqw/1 var(--font-head,sans-serif);color:#fff;letter-spacing:-.01em}
.demo-tracker .tk-brand b span{color:#8B6CFF}
.demo-tracker .tk-brand small{display:block;margin-top:.32cqw;font:700 .5cqw/1 'Hanken Grotesk',sans-serif;letter-spacing:.2em;color:#b6bad2}
.demo-tracker .tk-pills{position:absolute;left:26.1%;top:50%;transform:translateY(-50%);display:flex;gap:.58cqw}
.demo-tracker .tk-pills span{padding:.86cqw 1.05cqw;border-radius:99px;font:700 .84cqw/1 'Hanken Grotesk',sans-serif;color:#ece9f4;white-space:nowrap;
  background:rgba(255,255,255,.03);border:.08cqw solid rgba(140,150,220,.16)}
.demo-tracker .tk-pills span.on{background:linear-gradient(135deg,#3b2f8f,#2a2470);border-color:#8B6CFF;box-shadow:0 0 1cqw -.3cqw #8B6CFF}
.demo-tracker .tk-acct{position:absolute;right:1.5%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.6cqw}
.demo-tracker .tk-acct .gear{width:2.2cqw;height:2.2cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05cqw;color:#b6bad2;border:.08cqw solid rgba(140,150,220,.16)}
.demo-tracker .tk-acct .login{padding:.7cqw 1.1cqw;border-radius:99px;border:.08cqw solid #8B6CFF;background:linear-gradient(135deg,#3b2f8f,#2a2470);color:#fff;font:700 .8cqw/1 'Hanken Grotesk',sans-serif}
.demo-tracker .tk-h1{position:absolute;left:14.38%;top:12.7%;font:800 1.62cqw/1.1 var(--font-head,sans-serif);color:#fff;letter-spacing:-.01em}
.demo-tracker .tk-sub{position:absolute;left:14.38%;top:18.4%;width:38.5%;font-size:.84cqw;line-height:1.55;color:#b6bad2}
.demo-tracker .tk-add{position:absolute;left:14.38%;top:26.4%;height:5.45%;width:58.7%;display:flex;align-items:center;gap:.58cqw;font-size:.82cqw;color:#b6bad2}
.demo-tracker .tk-add span{display:flex;align-items:center;height:100%;box-sizing:border-box;white-space:nowrap}
.demo-tracker .tk-add .in{flex:0 0 44.2%;padding:0 .9cqw;border-radius:.6cqw;background:#0c1230;border:.06cqw solid rgba(140,150,220,.16);color:#8f95b8}
.demo-tracker .tk-add .sel{flex:0 0 16.7%;padding:0 .7cqw;border-radius:.6cqw;background:#0c1230;border:.06cqw solid rgba(140,150,220,.16);color:#ece9f4}
.demo-tracker .tk-add .go{padding:0 1.05cqw;border-radius:99px;border:.08cqw solid #8B6CFF;background:linear-gradient(135deg,#3b2f8f,#2a2470);color:#fff;font-weight:700}
.demo-tracker .tk-add .cal{padding:0 1.05cqw;border-radius:99px;border:.08cqw solid rgba(140,150,220,.2);background:rgba(255,255,255,.03);color:#fff;font-weight:700}
.demo-tracker .tk-col{position:absolute;top:34.5%;bottom:-4%;width:17.1%;border-radius:.85cqw;background:rgba(255,255,255,.03);border:.06cqw solid rgba(140,150,220,.16);transition:border-color .2s,background .2s}
.demo-tracker .tk-col.c1{left:14.38%}.demo-tracker .tk-col.c2{left:32.33%}.demo-tracker .tk-col.c3{left:50.29%}.demo-tracker .tk-col.c4{left:68.14%}
.demo-tracker .tk-col.hot{border-color:#4FD1A5;background:rgba(79,209,165,.07)}
.demo-tracker .tk-col .hd{display:flex;justify-content:space-between;align-items:center;padding:1.05cqw 1.05cqw 0;font:800 .74cqw/1 'Hanken Grotesk',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#ece9f4}
.demo-tracker .tk-col .hd.ok{color:#4FD1A5}
.demo-tracker .tk-col .hd span{min-width:1.4cqw;padding:.28cqw 0;border-radius:99px;text-align:center;font-weight:700;letter-spacing:0;color:#b6bad2;border:.06cqw solid rgba(140,150,220,.16)}
.demo-tracker .tk-card{position:absolute;width:15.65%;box-sizing:border-box;padding:.72cqw .8cqw .78cqw;border-radius:.7cqw;z-index:2;
  background:linear-gradient(160deg,#141a3c,#0e1433);border:.06cqw solid rgba(140,150,220,.18);
  transition:left .5s cubic-bezier(.3,.7,.2,1),top .5s cubic-bezier(.3,.7,.2,1),transform .2s,box-shadow .2s}
.demo-tracker .tk-card.drag{z-index:7;transform:rotate(2deg) scale(1.04);box-shadow:0 1.2cqw 2.6cqw -.6cqw rgba(0,0,0,.85);border-color:#8B6CFF}
.demo-tracker .tk-card i{position:absolute;right:.75cqw;top:.6cqw;font-style:normal;font-size:.8cqw;color:#8f95b8}
.demo-tracker .tk-card b{display:block;font:700 .82cqw/1.2 var(--font-head,sans-serif);color:#fff;padding-right:1.2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-tracker .tk-card .pl{display:block;font-size:.69cqw;color:#c3c6da;margin-top:.3cqw}
.demo-tracker .tk-card .dt{display:block;font-size:.69cqw;font-weight:700;color:#a78bff;margin-top:.28cqw}
.demo-tracker .tk-card .ch{display:flex;flex-wrap:wrap;gap:.26cqw .3cqw;margin-top:.5cqw;min-height:2.72cqw;align-content:flex-start}
.demo-tracker .tk-card .ch em{font-style:normal;padding:.3cqw .6cqw;border-radius:99px;font-size:.55cqw;font-weight:700;color:var(--c);border:.07cqw solid var(--c)}
.demo-tracker .tk-card .nt{margin-top:.45cqw;padding:.46cqw .6cqw;border-radius:.42cqw;font-size:.66cqw;color:#8f95b8;background:#0c1230;border:.06cqw solid rgba(140,150,220,.16);white-space:nowrap;overflow:hidden}
.demo-tracker .tk-card .rw{display:flex;align-items:center;gap:.65cqw;margin-top:.5cqw}
.demo-tracker .tk-card .rw u{flex:0 0 auto;text-decoration:none;font-size:.69cqw;font-weight:700;color:#a78bff}
.demo-tracker .tk-card .st{flex:1;padding:.42cqw .55cqw;border-radius:.42cqw;font-size:.66cqw;color:#ece9f4;background:#0c1230;border:.06cqw solid rgba(140,150,220,.16);transition:color .2s,border-color .2s,box-shadow .2s}
.demo-tracker .tk-card .st.ok{color:#51D1A6;border-color:#51D1A6;box-shadow:0 0 .9cqw -.3cqw #51D1A6}
.demo-tracker .tk-card .trem{position:static;display:inline-block;margin:0 0 0 .5cqw;padding:.16cqw .5cqw;font-size:.52cqw;vertical-align:.08cqw}
.demo-tracker .tk-card .trem::before{width:.42cqw;height:.42cqw;margin-right:.3cqw}
.demo-tracker.tpage .dcur{width:1.5cqw;height:1.5cqw}
.demo-tracker.tpage .dring{width:2.6cqw;height:2.6cqw;margin:-1.3cqw 0 0 -1.3cqw}