/* THE SHELL EVERY DEMO PAGE SHARES: PAGE CANVAS, INTRO, THE STAGE AND ITS DEVICES, THE PHONE OF THE VISITOR'S AGENT,
   CLOSING SECTIONS, THE ROOM, THE TUTORIAL AND THE DIALOG FRAME. CONTROLS, CARDS, TABLES AND TABS COME FROM THE SHARED
   DESIGN SYSTEM; COLORS AND DISTANCES COME FROM ITS TOKENS. */

.demo-page {
    background: var(--color-palette-background);
    color: var(--color-text-dark);
}

/* OWNER REQUEST, 2026-10-02: THE DEMO PAGES USE AUTHORED SENTENCE CASING, SHARED CONTROLS INCLUDED.
   OTHER EESIER SURFACES KEEP THEIR OWN CASING. */

.demo-page,
.demo-page *,
.demo-page *::before,
.demo-page *::after {
    text-transform: none !important;
}

.demo-page main {
    display: flex;
    flex-direction: column;
}

.demo-page main > section[class^="demo-"] {
    padding-block: var(--space-large);
}

.demo-page main :is(h1, h2, h3, p, ol, ul) {
    margin: 0;
}

.demo-page main .eicon,
.demo-page .demo-dialog .btn .eicon {
    width: var(--space-small);
    height: var(--space-small);
    flex-shrink: 0;
}

.demo-page .btn {
    gap: var(--space-small);
}

.demo-page .btn > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
}

.demo-page .btn > span[hidden] {
    display: none;
}


/* INTRO — THE HEADING AND THE ONE SENTENCE THAT SAYS WHAT THE DEMO IS */

.demo-page main > section.demo-intro {
    padding-block: calc(var(--space-large) * 1.5) var(--space-medium);
}

.demo-page .demo-intro .demo-intro__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-intro .demo-intro__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-tight);
    min-height: var(--control-height);
    color: var(--color-muted);
    font-size: var(--type-size-small);
    font-weight: 600;
    text-decoration: none;
}

.demo-page .demo-intro .demo-intro__back:hover {
    color: var(--color-palette-primary);
}

.demo-page .demo-intro .demo-intro__layout h1 {
    color: var(--color-palette-primary);
    text-wrap: balance;
}

.demo-page .demo-intro .demo-intro__layout .demo-intro__lead {
    max-width: 640px;
    color: var(--color-muted);
    font-size: var(--type-size-base);
    line-height: 1.6;
    text-align: left;
    hyphens: manual;
}


/* THE STAGE — AN OUT-OF-FOCUS ROOM BEHIND A PART OF THE DEMO, WHICH RUNS ON THE SCREEN OF A DEVICE STANDING ON THE DESK.
   A VEIL OF THE SURFACE COLOR KEEPS THE HEADING LEGIBLE OVER THE PHOTO. EACH STAGE NAMES ITS ROOM WITH A MODIFIER. */

.demo-page main > section.demo-stage {
    padding-block: var(--space-large) calc(var(--space-large) * 2);
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 88%, transparent), color-mix(in srgb, var(--color-surface) 56%, transparent) 30%, transparent 60%),
        var(--demo-stage-photo) center bottom / cover no-repeat var(--color-palette-background);
}

.demo-page main > section.demo-stage.demo-stage--office {
    --demo-stage-photo: url("/img/demo/escritorio.webp");
}

.demo-page main > section.demo-stage.demo-stage--records {
    --demo-stage-photo: url("/img/demo/arquivo.webp");
}

/* THE FIRST STAGE OF A PAGE BLEEDS UNDER THE SITE HEADER */

.demo-page:has(main > section.demo-stage) {
    --demo-header-height: 4rem;
    --demo-header-wave-depth: 40px;
    --demo-header-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 104' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,104 480,44 720,76 S1200,50 1440,86 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
    --demo-section-wave-depth: 80px;
    --demo-section-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
}

.demo-page:has(main > section.demo-stage) .header {
    margin-bottom: calc(var(--demo-header-height) * -1);
}

/* THE SITE HEADER AS A FROSTED BAND WITH A WAVY BOTTOM EDGE OVER THE STAGE'S PHOTO, AS ON THE CHOICE PAGES */

.demo-page:has(main > section.demo-stage) .header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--demo-header-wave-depth) * -1);
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-palette-primary) 7%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask: var(--demo-header-wave) 0 0 / 100% 100% no-repeat;
    mask: var(--demo-header-wave) 0 0 / 100% 100% no-repeat;
}

.demo-page main > section.demo-stage:first-of-type {
    padding-top: calc(var(--demo-header-height) + var(--demo-header-wave-depth) + var(--space-small));
}

/* EVERY SECTION AFTER THE FIRST RISES OVER THE ONE BEFORE IT WITH A WAVY TOP EDGE, AS BETWEEN THE SITE'S SECTIONS */

.demo-page:has(main > section.demo-stage) main > section + section {
    position: relative;
    margin-top: calc(var(--demo-section-wave-depth) * -1);
    padding-top: calc(var(--space-large) + var(--demo-section-wave-depth));
    -webkit-mask: var(--demo-section-wave) top / 100% var(--demo-section-wave-depth) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--demo-section-wave-depth) + 1px) no-repeat;
    mask: var(--demo-section-wave) top / 100% var(--demo-section-wave-depth) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--demo-section-wave-depth) + 1px) no-repeat;
}

/* THE HEADING AND THE DEVICE SHARE THE SITE'S COLUMN, SO BOTH START WHERE THE HEADER'S LOGO DOES: THE SCREEN KEEPS ITS RATIO AND
   FITS THE WINDOW'S HEIGHT */

.demo-page .demo-stage .demo-stage__layout {
    --demo-screen-ratio: 1.6;
    --demo-screen-zoom: 0.85;
    --demo-stage-chrome: calc(var(--space-large) * 7);
    --demo-device-width: max(calc(var(--space-large) * 18), calc((100dvh - var(--demo-stage-chrome)) * var(--demo-screen-ratio)));
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-stage .demo-stage__layout > :is(.demo-laptop, .demo-monitor) {
    width: 100%;
    max-width: var(--demo-device-width);
}

.demo-page .demo-stage .demo-stage__layout:has(> .demo-monitor) {
    --demo-screen-ratio: 1.7778;
    --demo-stage-chrome: calc(var(--space-large) * 8);
}

/* ON A STAGE THE HEADING AND ITS SENTENCE SIT ON A FROSTED ACRYLIC PLATE HELD BY FOUR STANDOFFS, AS A SIGN ON THE ROOM'S WALL, INSTEAD OF
   FLOATING OVER THE PHOTO; THE WAY BACK STAYS ABOVE THE PLATE. THE SCREEN GIVES UP THE HEIGHT THE PLATE'S PADDING TAKES */

.demo-page .demo-stage .demo-stage__layout:has(> .demo-intro) {
    --demo-stage-chrome: calc(var(--space-large) * 7 + var(--space-medium) * 2);
}

.demo-page .demo-stage .demo-stage__layout > .demo-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-small);
}

.demo-page .demo-stage .demo-stage__layout > .demo-intro > .demo-intro__layout {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--space-medium) var(--space-large);
    border: 1px solid color-mix(in srgb, var(--color-surface) 85%, transparent);
    border-radius: var(--radius-standard);
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 82%, transparent), color-mix(in srgb, var(--color-surface) 58%, transparent));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 var(--color-surface),
        0 1px 2px color-mix(in srgb, var(--color-canvas-dark) 12%, transparent),
        0 var(--space-medium) var(--space-large) calc(var(--space-small) * -1) color-mix(in srgb, var(--color-canvas-dark) 35%, transparent);
}

.demo-page .demo-stage .demo-stage__layout > .demo-intro > .demo-intro__layout::before {
    --demo-plate-stud: radial-gradient(circle closest-side, var(--color-surface) 0 20%, var(--color-border) 55%, var(--color-muted) 92%, transparent 100%);
    content: "";
    position: absolute;
    inset: var(--space-small);
    pointer-events: none;
    background: var(--demo-plate-stud) top left, var(--demo-plate-stud) top right, var(--demo-plate-stud) bottom left, var(--demo-plate-stud) bottom right;
    background-size: var(--space-small) var(--space-small);
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent));
}

.demo-page .demo-stage .demo-stage__layout .demo-laptop {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* THE LID — A DARK BEZEL AROUND THE SCREEN, THE CAMERA IN ITS TOP EDGE */

.demo-page .demo-stage .demo-laptop .demo-laptop__lid {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-small);
    border-radius: var(--space-medium) var(--space-medium) var(--space-small) var(--space-small);
    background: var(--color-canvas-dark);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--color-border) 70%, var(--color-canvas-dark)),
        0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
}

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__camera {
    position: absolute;
    top: calc(var(--space-tight) / 2);
    left: 50%;
    width: var(--space-tight);
    height: var(--space-tight);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-palette-secondary) 24%, var(--color-canvas-dark));
    transform: translateX(-50%);
}

/* THE SCREEN — THE APP SCROLLS INSIDE IT, LIKE A WINDOW ON A REAL DISPLAY */

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen,
.demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen {
    aspect-ratio: var(--demo-screen-ratio);
    border-radius: var(--space-small);
    background: var(--color-palette-background);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-muted) 32%, transparent) transparent;
}

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen:focus-visible,
.demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

/* WHAT RUNS ON A SCREEN IS DRAWN A LITTLE SMALLER THAN THE SITE AROUND IT, AS A PAGE ON A DISPLAY THAT SIZE WOULD BE */

.demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen > *,
.demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen > * {
    zoom: var(--demo-screen-zoom);
}

/* THE BAR AT THE TOP OF A SCREEN — THE SYSTEM'S NAME AND THE PAGE IT IS ON; IT STAYS WHILE THE PAGE SCROLLS UNDER IT */

.demo-page .demo-stage .demo-screen-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-medium);
    padding: var(--space-small) var(--space-medium);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--type-size-small);
}

.demo-page .demo-stage .demo-screen-bar .demo-screen-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
    color: var(--color-palette-primary);
    font-weight: 700;
}

.demo-page .demo-stage .demo-screen-bar .demo-screen-bar__page {
    color: var(--color-muted);
}

/* A BUTTON OF THE SYSTEM ON A SCREEN IS THE SYSTEM'S, NOT THE SITE'S: SQUARE CORNERS, FLAT, NO LIP, SO IT IS NEVER TAKEN FOR A
   BUTTON OF THE PAGE AROUND THE DEVICE */

.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn:is(.btn-primary, .btn-accent),
.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn:is(.btn-primary, .btn-accent):hover {
    height: calc(var(--control-height) - var(--space-small));
    padding-inline: var(--space-small);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transform: none;
}

.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn.btn-primary:hover {
    background: color-mix(in srgb, var(--color-palette-primary) 85%, var(--color-canvas-dark));
}

.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-palette-primary) 25%, transparent);
}

.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn.btn-accent:hover {
    background: color-mix(in srgb, var(--color-palette-accent) 85%, var(--color-canvas-dark));
}

.demo-page .demo-stage :is(.demo-laptop__screen, .demo-monitor__screen) .btn.btn-accent:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-palette-accent) 25%, transparent);
}

/* THE GLASS — OVER EACH SCREEN AND ITS DARK RIM: THE ROOM'S LIGHT ACROSS THE TOP CORNER, A SHADE TOWARDS THE EDGES AND A FAINT
   TINT, SO THE PAGE READS AS LIT FROM BEHIND A PANEL INSTEAD OF PAINTED ON THE PHOTO. IT NEVER TAKES THE POINTER */

.demo-page .demo-stage .demo-laptop .demo-laptop__lid::after,
.demo-page .demo-stage .demo-monitor .demo-monitor__display::after,
.demo-page .demo-stage .demo-phone .demo-phone__body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--color-surface) 22%, transparent), color-mix(in srgb, var(--color-surface) 6%, transparent) 24%, transparent 24.2%),
        color-mix(in srgb, var(--color-canvas-dark) 3%, transparent);
    box-shadow: inset 0 0 var(--space-large) color-mix(in srgb, var(--color-canvas-dark) 14%, transparent);
    pointer-events: none;
}

.demo-page .demo-stage .demo-monitor .demo-monitor__display::after {
    inset: var(--space-small) var(--space-small) var(--space-large);
    border-radius: calc(var(--space-small) + var(--space-tight));
}

/* THE BASE — THE ALUMINUM FRONT EDGE, WIDER THAN THE LID, WITH THE OPENING NOTCH AND ITS SHADOW ON THE DESK */

.demo-page .demo-stage .demo-laptop .demo-laptop__base {
    position: relative;
    display: flex;
    justify-content: center;
    width: 116%;
    height: var(--space-medium);
    border-radius: var(--space-tight) var(--space-tight) var(--space-medium) var(--space-medium) / var(--space-tight) var(--space-tight) var(--space-small) var(--space-small);
    background: linear-gradient(to bottom, var(--color-surface), var(--color-border) 35%, color-mix(in srgb, var(--color-border) 64%, var(--color-canvas-dark)));
    box-shadow:
        0 var(--space-medium) var(--space-medium) calc(var(--space-small) * -1) color-mix(in srgb, var(--color-canvas-dark) 48%, transparent),
        0 var(--space-large) var(--space-large) calc(var(--space-small) * -1) color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
}

.demo-page .demo-stage .demo-laptop .demo-laptop__base::before {
    content: "";
    width: 16%;
    height: var(--space-tight);
    border-radius: 0 0 var(--space-small) var(--space-small);
    background: color-mix(in srgb, var(--color-border) 64%, var(--color-canvas-dark));
}

/* THE MONITOR — A LIGHT ALUMINUM DISPLAY WITH A CHIN, ON A NECK AND A FOOT THAT STANDS ON THE DESK */

.demo-page .demo-stage .demo-stage__layout .demo-monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-page .demo-stage .demo-monitor .demo-monitor__display {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-small) var(--space-small) var(--space-large);
    border-radius: var(--space-medium);
    background: linear-gradient(to bottom, var(--color-surface), var(--color-border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-border) 70%, var(--color-canvas-dark)),
        0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
}

/* THE DARK RIM AROUND THE GLASS IS DRAWN BY THE SCREEN, INSIDE THE ALUMINUM */

.demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen {
    margin: var(--space-tight);
    box-shadow: 0 0 0 var(--space-tight) var(--color-canvas-dark);
}

.demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen > [data-df-slot] {
    padding: var(--space-medium);
}

.demo-page .demo-stage .demo-monitor .demo-monitor__neck {
    width: 16%;
    height: var(--space-large);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 56%, var(--color-canvas-dark)), var(--color-border) 40%, var(--color-surface));
}

.demo-page .demo-stage .demo-monitor .demo-monitor__foot {
    width: 32%;
    height: var(--space-small);
    border-radius: var(--space-small) var(--space-small) var(--space-tight) var(--space-tight);
    background: linear-gradient(to bottom, var(--color-surface), color-mix(in srgb, var(--color-border) 64%, var(--color-canvas-dark)));
    box-shadow:
        0 var(--space-small) var(--space-medium) calc(var(--space-tight) * -1) color-mix(in srgb, var(--color-canvas-dark) 48%, transparent),
        0 var(--space-medium) var(--space-large) calc(var(--space-small) * -1) color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
}


/* THE DEVICES — THE LAPTOP AT THE COLUMN'S LEFT EDGE AND THE VISITOR'S PHONE AT ITS RIGHT EDGE, BOTH STANDING ON THE DESK;
   WHEN THE WINDOW HAS NO ROOM FOR BOTH, THE PHONE GOES UNDER THE LAPTOP */

.demo-page .demo-stage .demo-stage__layout:has(.demo-phone) {
    --demo-phone-width: calc(var(--space-large) * 6);
    --demo-desk-gap: calc(var(--space-large) * 2);
}

.demo-page .demo-stage .demo-stage__layout .demo-stage__devices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-large) var(--demo-desk-gap);
}

.demo-page .demo-stage .demo-stage__layout .demo-stage__devices .demo-laptop {
    flex: 1 1 calc(var(--space-large) * 14);
    min-width: 0;
    max-width: var(--demo-device-width);
}

/* THE PHONE — A DARK BODY AROUND THE SCREEN, THE CAMERA ISLAND AT ITS TOP, AS TALL AS THE LAPTOP IT STANDS BESIDE */

.demo-page .demo-stage .demo-phone {
    display: flex;
    flex: 0 0 var(--demo-phone-width);
    align-self: stretch;
    min-height: calc(var(--space-large) * 11);
}

.demo-page .demo-stage .demo-phone .demo-phone__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-small);
    border-radius: var(--space-large);
    background: var(--color-canvas-dark);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--color-border) 70%, var(--color-canvas-dark)),
        0 var(--space-medium) var(--space-medium) calc(var(--space-small) * -1) color-mix(in srgb, var(--color-canvas-dark) 48%, transparent),
        0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-canvas-dark) 24%, transparent);
}

.demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__island {
    position: absolute;
    top: var(--space-medium);
    left: 50%;
    z-index: 1;
    width: calc(var(--space-large) * 1.5);
    height: var(--space-medium);
    border-radius: var(--radius-pill);
    background: var(--color-canvas-dark);
    transform: translateX(-50%);
}

/* THE SCREEN FILLS THE BODY WITHOUT EVER SIZING IT: A LONG SCREEN SCROLLS INSIDE THE PHONE INSTEAD OF MAKING THE PHONE TALLER */

.demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__screen {
    position: absolute;
    inset: var(--space-small);
    border-radius: calc(var(--space-large) - var(--space-small));
    background: var(--color-palette-background);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__screen:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}


/* THE VISITOR'S AGENT, ON THE PHONE'S SCREEN — ONE SCREEN AT A TIME: NOT CONNECTED, THE STEPS FOR ONE ASSISTANT, WHAT THE AGENT IS DOING.
   THE THREE ASSISTANTS' COLORS ARE THEIR OWN INSTITUTIONAL ONES, NAMED HERE ONCE; THEY SAY WHOSE MARK IT IS AND NOTHING ELSE */

.demo-page .demo-agent {
    --demo-brand-chatgpt: #000000;
    --demo-brand-claude: #d97757;
}

.demo-page .demo-agent :is(h2, p, ol, ul) {
    margin: 0;
}

.demo-page .demo-agent .demo-agent__view {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    box-sizing: border-box;
    min-height: 100%;
    padding: calc(var(--space-large) + var(--space-medium)) var(--space-small) var(--space-medium);
}

/* EVERY SCREEN AND STATE OF THE PHONE IS SWITCHED WITH THE hidden ATTRIBUTE, WHICH MUST BEAT THE display OF THE RULES BELOW */

.demo-page .demo-agent [hidden] {
    display: none !important;
}

.demo-page .demo-agent .demo-agent__view.demo-agent__view--start:has(.demo-agent__status:not([hidden])) {
    justify-content: center;
}

.demo-page .demo-agent .demo-agent__title {
    color: var(--color-text-dark);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.demo-page .demo-agent .demo-agent__text {
    color: var(--color-muted);
    font-size: var(--type-size-small);
    line-height: 1.6;
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-agent .demo-agent__text em {
    color: var(--color-text-dark);
    font-style: normal;
    font-weight: 600;
}

/* NOT CONNECTED — WHAT THE PHONE IS FOR, THEN ONE ROW PER ASSISTANT */

.demo-page .demo-agent .demo-agent__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-medium);
    text-align: center;
}

.demo-page .demo-agent .demo-agent__status .demo-agent__text {
    text-align: center;
}

.demo-page .demo-agent .demo-agent__status .demo-agent__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
}

.demo-page .demo-agent .demo-agent__status .demo-agent__status-icon .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .demo-agent .demo-agent__brands {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    padding: 0;
    list-style: none;
}

.demo-page .demo-agent .demo-agent__brands .demo-agent__brand {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    color: var(--color-text-dark);
    font: inherit;
    font-size: var(--type-size-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-quick) var(--ease-state);
}

.demo-page .demo-agent .demo-agent__brands .demo-agent__brand:hover {
    border-color: var(--color-palette-primary);
}

.demo-page .demo-agent .demo-agent__brands .demo-agent__brand:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

.demo-page .demo-agent .demo-agent__brands .demo-agent__brand .demo-agent__brand-name {
    flex: 1 1 auto;
    text-align: left;
}

.demo-page .demo-agent .demo-agent__brands .demo-agent__brand .eicon {
    color: var(--color-muted);
}

/* AN ASSISTANT'S MARK — ITS OWN SYMBOL ON ITS OWN COLOR, LIKE AN APP'S ICON */

.demo-page .demo-agent .demo-agent__logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--space-medium);
    height: var(--space-medium);
    border-radius: var(--space-tight);
}

.demo-page .demo-agent .demo-agent__logo img {
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .demo-agent .demo-agent__logo.demo-agent__logo--chatgpt {
    background: var(--demo-brand-chatgpt);
}

.demo-page .demo-agent .demo-agent__logo.demo-agent__logo--claude {
    background: var(--demo-brand-claude);
}

.demo-page .demo-agent .demo-agent__logo.demo-agent__logo--copilot {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* A SCREEN'S TOP BAR — THE WAY BACK, WHOSE SCREEN IT IS */

.demo-page .demo-agent .demo-agent__bar {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
}

.demo-page .demo-agent .demo-agent__bar .demo-agent__back {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-palette-primary);
    cursor: pointer;
}

.demo-page .demo-agent .demo-agent__bar .demo-agent__back:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

.demo-page .demo-agent .demo-agent__bar .demo-agent__back .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* THE STEPS FOR ONE ASSISTANT — THE ADDRESS AND ITS COPY ACTION FIRST, BECAUSE EVERY STEP LIST ENDS BY PASTING IT */

.demo-page .demo-agent .demo-agent__address {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    min-width: 0;
}

.demo-page .demo-agent .demo-agent__address .demo-agent__url {
    display: block;
    padding: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-code-background);
    color: var(--color-code-text);
    font-size: var(--type-size-xs);
    line-height: 1.5;
    overflow-wrap: anywhere;
    user-select: all;
}

.demo-page .demo-agent .demo-agent__address .demo-agent__error {
    color: var(--color-danger);
    font-size: var(--type-size-small);
    line-height: 1.6;
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-agent .demo-agent__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    padding-left: var(--space-medium);
    list-style: decimal;
    color: var(--color-muted);
    font-size: var(--type-size-small);
    line-height: 1.6;
}

.demo-page .demo-agent .demo-agent__steps strong {
    color: var(--color-text-dark);
    font-weight: 600;
    text-box-trim: none;
}

.demo-page .demo-agent .demo-agent__waiting {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    color: var(--color-muted);
    font-size: var(--type-size-small);
    text-align: left;
}

.demo-page .demo-agent .demo-agent__waiting.demo-agent__waiting--done {
    color: var(--color-success);
    font-weight: 600;
}

/* WHAT THE AGENT IS DOING — THE LATEST CALL FIRST: ITS STATE, WHAT IT IS, THE DATA IT CARRIES */

.demo-page .demo-agent .demo-agent__calls {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    padding: 0;
    list-style: none;
}

.demo-page .demo-agent .demo-agent__calls:empty {
    display: none;
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call {
    display: flex;
    align-items: flex-start;
    gap: var(--space-small);
    padding: var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call.is-new {
    animation: demo-fade-enter var(--motion-standard) var(--ease-state) both;
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-state {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-state .demo-agent__call-icon {
    display: inline-flex;
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-state .demo-agent__call-icon.demo-agent__call-icon--done {
    color: var(--color-success);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-state .demo-agent__call-icon.demo-agent__call-icon--blocked {
    color: var(--color-danger);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-state .demo-agent__call-icon.demo-agent__call-icon--failed {
    color: var(--color-warning);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-small);
    min-width: 0;
    padding-top: calc((var(--icon-size) - var(--type-size-small) * var(--font-cap-ratio)) / 2);
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-text p {
    font-size: var(--type-size-small);
    line-height: 1.5;
    text-align: left;
    hyphens: manual;
    overflow-wrap: anywhere;
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-text .demo-agent__call-title {
    color: var(--color-text-dark);
    font-weight: 600;
}

.demo-page .demo-agent .demo-agent__calls .demo-agent__call .demo-agent__call-text :is(.demo-agent__call-detail, .demo-agent__call-note) {
    color: var(--color-muted);
}

.demo-page .demo-agent .demo-agent__more {
    align-self: center;
}

@media (prefers-reduced-motion: reduce) {

    .demo-page .demo-agent .demo-agent__calls .demo-agent__call.is-new { animation: none; }

}


/* A SECTION'S HEADING AND THE SENTENCE THAT EXPLAINS IT */

.demo-page .demo-audit .demo-audit__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-audit .demo-audit__layout .demo-audit__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    max-width: 760px;
}

.demo-page .demo-audit .demo-audit__layout .demo-audit__heading h2 {
    font-size: var(--type-size-heading);
    text-wrap: balance;
}

.demo-page .demo-audit .demo-audit__layout .demo-audit__heading p {
    color: var(--color-muted);
    font-size: var(--type-size-base);
    line-height: 1.6;
    text-align: left;
    hyphens: manual;
}


/* CLOSING SECTIONS — AN INVITATION TO TALK TO THE TEAM, THEN THE WAY BACK TO THE OTHER DEMOS */

.demo-page .demo-closing.demo-closing--contact {
    background: var(--color-surface);
}

.demo-page .demo-closing.demo-closing--more {
    background: var(--color-palette-primary-surface);
}

/* A CLOSING SECTION WITH ANOTHER AFTER IT LEAVES ROOM FOR THE WAVE THAT RISES OVER ITS BASE */

.demo-page main > section.demo-closing:not(:last-child) {
    padding-bottom: calc(var(--space-large) + var(--demo-section-wave-depth));
}

.demo-page .demo-closing .demo-closing__layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-medium);
}

.demo-page .demo-closing .demo-closing__layout h2 {
    font-size: var(--type-size-heading);
    text-wrap: balance;
}

.demo-page .demo-closing .demo-closing__layout p {
    max-width: 760px;
    color: var(--color-muted);
    font-size: var(--type-size-base);
    line-height: 1.6;
    text-align: left;
    hyphens: manual;
}


/* THE LAST SECTION LEAVES ROOM FOR THE FOOTER'S WAVE, WHICH IS DRAWN OVER ITS BASE */

.demo-page main > section[class^="demo-"]:last-child {
    padding-bottom: calc(var(--space-large) * 3);
}


/* THE FADE EVERY PANEL AND SCREEN OF THE DEMO PAGES ENTERS WITH */

@keyframes demo-fade-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* THE ROOM — EVERYONE WITH THE PAGE OPEN: THEIR POINTERS OVER IT, WHO THEY ARE ON A BAR, AND A CHAT.
   EACH PERSON'S COLOUR IS THE FRIENDLY IDENTITY'S OWN (--efi-color), THE SAME ONE THE AUDIT LOG SHOWS */

.demo-page .demo-room [hidden] {
    display: none !important;
}

.demo-page .demo-room .demo-room__cursors {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
}

.demo-page .demo-room .demo-room__cursors .demo-room__cursor {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    transition: transform 0.1s linear, opacity var(--motion-standard) var(--ease-state);
    will-change: transform;
}

.demo-page .demo-room .demo-room__cursors .demo-room__cursor.is-still {
    transition: opacity var(--motion-standard) var(--ease-state);
}

.demo-page .demo-room .demo-room__cursors .demo-room__cursor:is(.is-out, .is-idle) {
    opacity: 0;
}

/* THE ARROW'S TIP IS THE POINTER'S OWN SPOT: THE DRAWING STARTS 4px IN, SO IT IS PULLED BACK BY THAT MUCH */

.demo-page .demo-room .demo-room__cursors .demo-room__cursor .demo-room__cursor-arrow {
    flex: 0 0 var(--space-medium);
    width: var(--space-medium);
    height: var(--space-medium);
    transform: translate(-4px, -3px);
    fill: var(--efi-color, var(--color-muted));
    stroke: var(--color-surface);
    stroke-width: 1.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--color-canvas-dark) 32%, transparent));
}

.demo-page .demo-room .demo-room__cursors .demo-room__cursor .demo-room__cursor-name {
    transform: translate(calc(var(--space-tight) * -1), var(--space-small));
    padding: 0 var(--space-small);
    border-radius: var(--radius-pill);
    background: var(--efi-color, var(--color-muted));
    color: var(--color-text-on-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    line-height: var(--space-medium);
    white-space: nowrap;
    text-transform: lowercase;
    box-shadow: 0 var(--space-tight) var(--space-small) color-mix(in srgb, var(--color-canvas-dark) 16%, transparent);
}

.demo-page .demo-room .demo-room__dock {
    position: fixed;
    left: var(--space-medium);
    bottom: var(--space-medium);
    z-index: 40;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-small);
    max-width: calc(100vw - var(--space-large));
}

.demo-page .demo-room .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.demo-page .demo-room .demo-room__dock .demo-room__bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
    padding: 0 var(--space-medium) 0 var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: var(--type-size-small);
    font-weight: 700;
    box-shadow: 0 var(--space-small) var(--space-medium) color-mix(in srgb, var(--color-canvas-dark) 16%, transparent);
    cursor: pointer;
    transition: border-color var(--motion-quick) var(--ease-state);
}

.demo-page .demo-room .demo-room__dock .demo-room__bar:hover,
.demo-page .demo-room .demo-room__dock .demo-room__bar[aria-expanded="true"] {
    border-color: var(--color-palette-primary);
}

.demo-page .demo-room .demo-room__dock .demo-room__bar:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: var(--space-tight);
}

.demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__stack {
    display: inline-flex;
    align-items: center;
}

.demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__stack:empty {
    display: none;
}

.demo-page .demo-room .demo-room__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--space-medium);
    height: var(--space-medium);
    border-radius: var(--radius-pill);
    background: var(--efi-color, var(--color-muted));
    color: var(--color-text-on-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    box-shadow: 0 0 0 2px var(--color-surface);
    user-select: none;
}

/* A MARK SHOWS THE PERSON'S ANIMAL INSTEAD OF THE INITIAL: ONE CELL OF THE 4 x 4 GLYPH SHEET, PAINTED THROUGH A MASK */

.demo-page .demo-room :is(.demo-room__mark, .eesier-friendly-identity__mark).has-glyph {
    font-size: 0;
}

.demo-page .demo-room :is(.demo-room__mark, .eesier-friendly-identity__mark).has-glyph::before {
    content: "";
    width: calc(var(--space-medium) - var(--space-tight));
    height: calc(var(--space-medium) - var(--space-tight));
    background: var(--color-text-on-dark);
    -webkit-mask: url("/img/demo/animais.webp") calc(var(--demo-room-glyph-column) * 100% / 3) calc(var(--demo-room-glyph-row) * 100% / 3) / 400% 400% no-repeat;
    mask: url("/img/demo/animais.webp") calc(var(--demo-room-glyph-column) * 100% / 3) calc(var(--demo-room-glyph-row) * 100% / 3) / 400% 400% no-repeat;
}

/* MARGIN EXCEPTION — gap CANNOT EXPRESS A NEGATIVE OVERLAP (THE SAME ONE AS .eesier-avatar-stack) */

.demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__stack .demo-room__mark + .demo-room__mark {
    margin-left: calc(var(--space-tight) * -1);
}

.demo-page .demo-room .demo-room__mark.demo-room__mark--more {
    padding: 0 var(--space-tight);
    background: var(--color-palette-background);
    color: var(--color-muted);
}

.demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__chat {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-palette-primary);
}

/* UNREAD MESSAGES — A RED COUNT ON THE CHAT ICON'S CORNER UNTIL THE CHAT IS OPENED */

.demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__chat .demo-room__unread {
    position: absolute;
    top: calc(var(--space-small) * -1);
    right: calc(var(--space-small) * -1 - var(--space-tight));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--space-medium);
    height: var(--space-medium);
    padding: 0 var(--space-tight);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: var(--color-text-on-dark);
    font-size: var(--type-size-xs);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    box-sizing: border-box;
    width: min(400px, calc(100vw - var(--space-large)));
    max-height: calc(100dvh - var(--space-large) * 3);
    padding: var(--space-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    box-shadow: 0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-text-dark) 16%, transparent);
    animation: demo-fade-enter var(--motion-quick) var(--ease-state) both;
}

/* WHAT SOMEONE JUST DID — ONE QUIET LINE ABOVE THE BAR, GONE AFTER A FEW SECONDS; IT NEVER TAKES THE POINTER */

.demo-page .demo-room .demo-room__dock .demo-room__notice {
    box-sizing: border-box;
    max-width: min(400px, calc(100vw - var(--space-large)));
    margin: 0;
    padding: var(--space-tight) var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--type-size-xs);
    line-height: var(--space-medium);
    text-align: left;
    pointer-events: none;
    animation: demo-fade-enter var(--motion-standard) var(--ease-state) both;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel :is(h2, p, ul) {
    margin: 0;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-small);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__head .demo-room__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: var(--space-medium);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__head .demo-room__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--space-medium);
    width: var(--space-medium);
    height: var(--space-medium);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-palette-primary);
    cursor: pointer;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__head .demo-room__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight) var(--space-small);
    max-height: calc(var(--space-large) * 2);
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__list .demo-room__person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(var(--space-large) * 6);
    min-height: calc(var(--space-large) * 2);
    padding: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-palette-background);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-muted) 32%, transparent) transparent;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .demo-room__empty {
    color: var(--color-muted);
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .eesier-chat {
    gap: var(--space-small);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .eesier-chat > .eesier-chat-message {
    max-width: 88%;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble {
    padding: var(--space-small);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .eesier-chat .eesier-chat-plain {
    gap: var(--space-tight);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__error {
    padding: var(--space-small);
    border-radius: var(--radius-standard);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--space-medium);
    text-align: left;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel .demo-room__thread .eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-meta {
    padding: 0 var(--space-tight);
}

/* THE SHARED FORM, LAID OUT AS A CHAT'S LAST LINE: THE FIELD TAKES THE ROOM AND THE BUTTON IS A SQUARE THAT SHOWS ONLY ITS ICON
   (ITS LABEL STAYS IN THE MARKUP FOR SCREEN READERS). THE SPACE ABOVE IS WHERE THE FIELD'S LABEL FLOATS */

.demo-page .demo-room .demo-room__dock .demo-room__panel #demo-room-form {
    flex: 0 0 auto;
    padding-top: var(--space-small);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel #demo-room-form form {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-small);
}

.demo-page .demo-room .demo-room__dock .demo-room__panel #demo-room-form form .eesier-form-group {
    flex: 1 1 auto;
    min-width: 0;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel #demo-room-form form .eesier-form-submit {
    flex: 0 0 var(--control-height);
    width: var(--control-height);
    padding: 0;
}

.demo-page .demo-room .demo-room__dock .demo-room__panel #demo-room-form form .eesier-form-submit .button-text {
    gap: 0;
    font-size: 0;
}

@media (prefers-reduced-motion: reduce) {

    .demo-page .demo-room .demo-room__cursors .demo-room__cursor { transition: none; }

    .demo-page .demo-room .demo-room__dock .demo-room__panel,
    .demo-page .demo-room .demo-room__dock .demo-room__notice { animation: none; }

}


/* THE TUTORIAL — A LIGHT OVER ONE PART OF THE PAGE, THE REST IN SHADE, AND A CARD THAT SAYS WHAT TO DO THERE.
   IT LIVES IN THE TOP LAYER (A POPOVER), SO IT ALSO STANDS OVER THE DIALOG; ONLY THE CARD TAKES THE POINTER */

.demo-page .demo-tour {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    z-index: 50;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-dark);
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--motion-quick) var(--ease-state);
}

.demo-page .demo-tour:is(.is-waiting, .is-leaving) {
    opacity: 0;
}

.demo-page .demo-tour [hidden] {
    display: none !important;
}

.demo-page .demo-tour .eicon,
.demo-page .demo-tour-again .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.demo-page .demo-tour .demo-tour__spot {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: var(--radius-standard);
    box-shadow: 0 0 0 3px var(--color-palette-primary), 0 0 0 200vmax color-mix(in srgb, var(--color-canvas-dark) 64%, transparent);
    transition: box-shadow var(--motion-standard) var(--ease-state);
}

/* A STEP INSIDE THE DIALOG KEEPS ONLY THE RING: THE DIALOG'S OWN BACKDROP ALREADY SHADES THE PAGE */

.demo-page .demo-tour.is-flat .demo-tour__spot {
    box-shadow: 0 0 0 3px var(--color-palette-primary), 0 0 0 200vmax transparent;
}

/* THE RING BREATHES OUT, SO THE EYE FINDS IT; A CLICK ANYWHERE ELSE MAKES IT FLASH ONCE */

.demo-page .demo-tour .demo-tour__spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: demo-tour-pulse 1.8s var(--ease-travel) infinite;
}

.demo-page .demo-tour .demo-tour__spot.is-nudged::after {
    animation: demo-tour-nudge 0.5s var(--ease-travel) 2;
}

@keyframes demo-tour-pulse {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-palette-primary) 70%, transparent); }
    to { box-shadow: 0 0 0 var(--space-medium) transparent; }
}

@keyframes demo-tour-nudge {
    from { box-shadow: 0 0 0 3px var(--color-surface); }
    to { box-shadow: 0 0 0 var(--space-large) transparent; }
}

.demo-page .demo-tour .demo-tour__card {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    width: min(340px, calc(100vw - var(--space-medium)));
    padding: var(--space-medium) var(--space-medium) 0;
    border-radius: var(--radius-standard);
    background: var(--color-surface);
    box-shadow: 0 var(--space-medium) var(--space-large) color-mix(in srgb, var(--color-canvas-dark) 32%, transparent);
    pointer-events: auto;
    animation: demo-fade-enter var(--motion-standard) var(--ease-state) both;
}

.demo-page .demo-tour.is-waiting .demo-tour__card {
    pointer-events: none;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__steps .demo-tour__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    animation: demo-fade-enter var(--motion-standard) var(--ease-state) both;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__steps .demo-tour__step .demo-tour__title {
    margin: 0;
    color: var(--color-palette-primary);
    font-size: var(--type-size-base);
    font-weight: 700;
    line-height: var(--space-medium);
    text-wrap: balance;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__steps .demo-tour__step .demo-tour__text {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
    text-align: left;
    hyphens: manual;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    min-height: var(--control-height);
}

/* HOW FAR THE TUTORIAL IS — ONE DOT PER STEP, THE CURRENT ONE LONGER */

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__dots {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-tight);
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__dots li {
    width: var(--space-tight);
    height: var(--space-tight);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: width var(--motion-standard) var(--ease-travel), background-color var(--motion-standard) var(--ease-state);
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__dots li:is(.is-done, .is-current) {
    background: var(--color-palette-primary);
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__dots li.is-current {
    width: var(--space-medium);
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__skip {
    min-height: var(--control-height);
    padding: 0 var(--space-small);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-muted);
    font-family: inherit;
    font-size: var(--type-size-small);
    font-weight: 600;
    cursor: pointer;
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__skip:hover {
    color: var(--color-palette-primary);
}

.demo-page .demo-tour .demo-tour__card .demo-tour__foot .demo-tour__skip:focus-visible,
.demo-page .demo-tour-again:focus-visible {
    outline: 2px solid var(--color-palette-primary);
    outline-offset: 2px;
}

/* THE BUTTON THAT STARTS THE TUTORIAL AGAIN — QUIET, IN THE CORNER OPPOSITE THE ROOM'S BAR */

.demo-page .demo-tour-again {
    position: fixed;
    right: var(--space-medium);
    bottom: var(--space-medium);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
    min-height: calc(var(--control-height) - var(--space-small));
    padding: 0 var(--space-small);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
    font-family: inherit;
    font-size: var(--type-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-state), border-color var(--motion-quick) var(--ease-state);
}

.demo-page .demo-tour-again[hidden] {
    display: none;
}

.demo-page .demo-tour-again:hover {
    border-color: var(--color-palette-primary);
    color: var(--color-palette-primary);
}

/* AFTER A SKIP THE BUTTON FLASHES, SO THE VISITOR SEES WHERE THE TUTORIAL WENT */

.demo-page .demo-tour-again.is-hinted {
    animation: demo-tour-pulse 0.9s var(--ease-travel) 3;
}

@media (prefers-reduced-motion: reduce) {

    .demo-page .demo-tour .demo-tour__spot::after,
    .demo-page .demo-tour .demo-tour__card,
    .demo-page .demo-tour .demo-tour__card .demo-tour__steps .demo-tour__step,
    .demo-page .demo-tour-again.is-hinted { animation: none; }

}


/* THE DIALOG FRAME — THE SHARED NATIVE DIALOG WITH THE SYSTEM'S 24px CANVAS */

.demo-page .demo-dialog {
    width: 560px;
}

.demo-page .demo-dialog .demo-dialog__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: var(--space-medium);
}

.demo-page .demo-dialog .demo-dialog__frame .demo-dialog__close {
    position: sticky;
    top: var(--space-small);
    z-index: 3;
    align-self: flex-end;
    margin: calc(var(--space-small) * -1) calc(var(--space-small) * -1) calc((var(--control-height) + var(--space-small)) * -1) 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: 0 0 0 var(--space-tight) var(--color-surface);
}

.demo-page .demo-dialog .demo-dialog__frame .demo-dialog__loading {
    display: flex;
    justify-content: center;
    padding: var(--space-large);
}

.demo-page .demo-dialog .demo-dialog__frame .demo-dialog__loading[hidden] {
    display: none;
}


/* THE DEMOS INDEX */

.demo-page main > section.demo-index {
    padding-block: var(--space-medium) calc(var(--space-large) * 2);
}

.demo-page .demo-index .demo-index__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.demo-page .demo-index .demo-index__list .demo-index__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-medium);
    padding: var(--space-medium);
    color: var(--color-text-dark);
    text-decoration: none;
    transition: border-color var(--motion-quick) var(--ease-state);
}

.demo-page .demo-index .demo-index__list .demo-index__card:hover {
    border-color: var(--color-palette-primary);
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--control-height);
    width: var(--control-height);
    height: var(--control-height);
    border-radius: var(--radius-standard);
    background: var(--color-palette-primary-surface);
    color: var(--color-palette-primary);
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__icon .eicon,
.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__go .eicon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-tight);
    min-width: 0;
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__text .demo-index__name {
    font-size: var(--type-size-heading);
    font-weight: 700;
    line-height: 1.3;
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__text .demo-index__summary {
    color: var(--color-muted);
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
}

.demo-page .demo-index .demo-index__list .demo-index__card .demo-index__go {
    color: var(--color-palette-primary);
}


@media (max-width: 900px) {

    .demo-page:has(main > section.demo-stage) {
        --demo-header-wave-depth: 28px;
        --demo-header-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 92' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C65,92 130,54 195,72 S325,58 390,82 L390,0 L0,0 Z'/%3E%3C/svg%3E");
        --demo-section-wave-depth: 50px;
    }

    .demo-page main > section.demo-intro {
        padding-block: var(--space-large) var(--space-small);
    }

    /* ON A PHONE THE DEVICE GIVES WAY: THE APP IS A SHEET ON THE SCENE, AS TALL AS ITS CONTENT */

    .demo-page main > section.demo-stage {
        padding-bottom: var(--space-large);
    }

    .demo-page .demo-stage .demo-stage__layout {
        gap: var(--space-medium);
        width: 100%;
    }

    .demo-page .demo-stage .demo-stage__layout > .demo-intro > .demo-intro__layout {
        padding-inline: var(--space-medium);
    }

    .demo-page .demo-stage .demo-laptop .demo-laptop__lid,
    .demo-page .demo-stage .demo-monitor .demo-monitor__display {
        padding: 0;
        border-radius: var(--radius-standard);
        background: transparent;
        box-shadow: 0 var(--space-small) var(--space-medium) color-mix(in srgb, var(--color-canvas-dark) 16%, transparent);
    }

    .demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen,
    .demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen {
        aspect-ratio: auto;
        margin: 0;
        border-radius: var(--radius-standard);
        box-shadow: none;
        overflow-y: visible;
    }

    .demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen > [data-df-slot] {
        padding: var(--space-small);
    }

    .demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__screen > *,
    .demo-page .demo-stage .demo-monitor .demo-monitor__display .demo-monitor__screen > * {
        zoom: 1;
    }

    .demo-page .demo-stage .demo-screen-bar,
    .demo-page .demo-stage .demo-laptop .demo-laptop__lid::after,
    .demo-page .demo-stage .demo-monitor .demo-monitor__display::after,
    .demo-page .demo-stage .demo-phone .demo-phone__body::after,
    .demo-page .demo-stage .demo-laptop .demo-laptop__lid .demo-laptop__camera,
    .demo-page .demo-stage .demo-laptop .demo-laptop__base,
    .demo-page .demo-stage .demo-monitor .demo-monitor__neck,
    .demo-page .demo-stage .demo-monitor .demo-monitor__foot {
        display: none;
    }

    /* THE PHONE GIVES WAY TOO: A SHEET UNDER THE APP, AS TALL AS THE SCREEN IT SHOWS */

    .demo-page .demo-stage .demo-stage__layout:has(.demo-phone) {
        width: 100%;
    }

    .demo-page .demo-stage .demo-stage__layout .demo-stage__devices {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--space-medium);
    }

    .demo-page .demo-stage .demo-stage__layout .demo-stage__devices .demo-laptop {
        flex: 0 0 auto;
        max-width: none;
    }

    .demo-page .demo-stage .demo-phone {
        flex: 0 0 auto;
        min-height: 0;
    }

    .demo-page .demo-stage .demo-phone .demo-phone__body {
        padding: 0;
        border-radius: var(--radius-standard);
        background: transparent;
        box-shadow: 0 var(--space-small) var(--space-medium) color-mix(in srgb, var(--color-canvas-dark) 16%, transparent);
    }

    .demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__island {
        display: none;
    }

    .demo-page .demo-stage .demo-phone .demo-phone__body .demo-phone__screen {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        border-radius: var(--radius-standard);
        overflow-y: visible;
    }

    .demo-page .demo-agent .demo-agent__view {
        min-height: 0;
        padding: var(--space-medium);
    }

    /* ON A PHONE THE ROOM'S BAR RESTS IN THE CORNER AND ITS PANEL SPANS THE SCREEN ABOVE IT */

    .demo-page .demo-room .demo-room__dock {
        left: var(--space-small);
        bottom: var(--space-small);
        max-width: calc(100vw - var(--space-medium));
    }

    .demo-page .demo-room .demo-room__dock .demo-room__bar {
        padding-right: var(--space-small);
    }

    .demo-page .demo-room .demo-room__dock .demo-room__panel:not([hidden]) ~ .demo-room__notice {
        display: none;
    }

    .demo-page .demo-tour-again {
        right: var(--space-small);
        bottom: var(--space-small);
    }

    .demo-page .demo-room .demo-room__dock .demo-room__bar .demo-room__count {
        display: none;
    }

    .demo-page .demo-room .demo-room__dock .demo-room__panel {
        position: fixed;
        left: var(--space-small);
        right: var(--space-small);
        bottom: calc(var(--space-small) * 2 + var(--control-height));
        width: auto;
        max-height: calc(100dvh - var(--space-large) * 2 - var(--control-height));
        padding: var(--space-small);
    }

}