:root {
  --dillo-ink: #102f3a;
  --dillo-petrol: #164c5b;
  --dillo-blue: #2e8998;
  --dillo-sky: #edf8fa;
  --dillo-sky-deep: #d9eff2;
  --dillo-background: #fbfdfd;
  --dillo-card: #ffffff;
  --dillo-muted: #60777e;
  --dillo-line: #dcecef;
  --dillo-ok: #d8f0e8;
  --dillo-radius: 28px;
  --dillo-shadow: 0 18px 50px rgba(16, 47, 58, .08);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--dillo-ink); background: var(--dillo-background); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.dillo-shell { min-height: 100dvh; }
.dillo-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px clamp(22px, 5vw, 76px); }
.dillo-brand { display: inline-flex; align-items: baseline; color: var(--dillo-ink); text-decoration: none; font-weight: 800; letter-spacing: -.055em; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; }
.dillo-brand::after { content: "."; color: #72b9c4; }
.dillo-nav { display: flex; gap: 20px; color: var(--dillo-muted); font-size: 14px; }
.dillo-nav a { text-decoration: none; }
.dillo-nav a:hover, .dillo-nav a:focus-visible { color: var(--dillo-ink); }
.dillo-eyebrow { color: var(--dillo-blue); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dillo-editorial { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; }
.dillo-pill { display: inline-flex; align-items: center; border: 1px solid var(--dillo-line); border-radius: 999px; padding: 8px 13px; color: var(--dillo-muted); background: rgba(255,255,255,.75); font-size: 12px; font-weight: 750; }
.dillo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; padding: 13px 22px; color: #fff; background: var(--dillo-ink); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.dillo-button:hover, .dillo-button:focus-visible { background: var(--dillo-petrol); }
.dillo-button.secondary { color: var(--dillo-ink); background: #fff; border: 1px solid var(--dillo-line); }
.dillo-card { border: 1px solid var(--dillo-line); border-radius: var(--dillo-radius); background: var(--dillo-card); box-shadow: var(--dillo-shadow); }
/* Simple Demo enters an application-like camera state without a second page. */
body:has(#workspace:not(.hidden)) { overflow: auto; }
body:has(#workspace:not(.hidden)) .hero,
body:has(#workspace:not(.hidden)) .wrap > .dillo-eyebrow,
body:has(#workspace:not(.hidden)) .choices,
body:has(#workspace:not(.hidden)) .free { display: none; }
body:has(#workspace:not(.hidden)) .wrap { max-width: 1500px; min-height: calc(100dvh - 96px); padding: 2vh clamp(18px, 4vw, 60px); }
body:has(#workspace:not(.hidden)) .workspace { min-height: calc(100dvh - 140px); grid-template-columns: minmax(0, 1.6fr) minmax(280px, .65fr); align-items: center; }
body:has(#workspace:not(.hidden)) .camera-card { padding: clamp(12px, 1.5vw, 24px); }
body:has(#workspace:not(.hidden)) .stage video { max-height: 70dvh; }
body:has(#workspace:not(.hidden)) .camera-card + .controls { position: sticky; bottom: 14px; z-index: 20; justify-content: center; margin: -58px 22px 14px; padding: 10px; border: 1px solid rgba(220,236,239,.95); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(16,47,58,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body:has(#workspace:not(.hidden)) .camera-card + .controls button { min-height: 42px; margin: 0; }
body:has(#workspace:not(.hidden)) .camera-card + .controls .quiet { min-height: 42px; margin: 0; padding: 11px 15px; border: 1px solid var(--dillo-line); border-radius: 999px; background: #fff; color: var(--dillo-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
body:has(#workspace:not(.hidden)) .camera-card + .controls .quiet:hover,
body:has(#workspace:not(.hidden)) .camera-card + .controls .quiet:focus-visible { background: var(--dillo-sky); color: var(--dillo-ink); }
@media (max-width: 850px) { body:has(#workspace:not(.hidden)) .workspace { min-height: auto; } body:has(#workspace:not(.hidden)) .stage video { max-height: none; } body:has(#workspace:not(.hidden)) .camera-card + .controls { margin: -10px 4px 12px; border-radius: 22px; justify-content: flex-start; } }
@media (max-width: 640px) { .dillo-header { padding: 21px 18px; } .dillo-nav { gap: 11px; font-size: 12px; } .dillo-brand { font-size: 34px; } }