:root {
  color-scheme: light;
  --paper: #f8f5ee;
  --ink: #17271f;
  --muted: #526057;
  --green: #245a48;
  --focus: #548b72;
  font: 100%/1.5 system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 1rem; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 87% 15%, #cfdfd1 0%, transparent 39%),
    radial-gradient(ellipse at 7% 1%, #dce7dc 0%, transparent 28%), var(--paper);
}
h1, p, figure { margin: 0; }
button { font: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 3; padding: .55rem .85rem; background: white; border-radius: .5rem; }
.skip-link:focus { top: .5rem; }

.site-header {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .6rem 1rem;
}
.site-brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 790; letter-spacing: -.025em; }
.site-brand img { display: block; }
.tag { border: 1px solid #355a4233; border-radius: 99px; padding: .25rem .65rem; font-size: .73rem; color: var(--green); font-weight: 700; }

.demo-stage {
  min-height: calc(100svh - 4rem);
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(.75rem, 3vw, 2rem) .75rem 2rem;
}

.phone {
  --screen-width: 244;
  --bezel: 10px;
  --screen-radius: calc(var(--screen-width) * .135px);
  width: calc(var(--screen-width) * 1px + 2 * var(--bezel));
  max-width: 100%;
}
.phone-body {
  position: relative;
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: linear-gradient(150deg, #3a4240 0%, #151a19 38%, #0b0f0e 100%);
  box-shadow: inset 0 0 0 1px #ffffff1a, inset 0 0 0 3px #050706, 0 35px 70px -25px #132c2a70;
}
.phone-body::before, .phone-body::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #1c2221; }
.phone-body::before { height: 72px; top: 24%; right: -2px; }
.phone-body::after { height: 44px; top: 18%; left: -2px; box-shadow: 0 60px #1c2221; }
.phone-screen {
  width: 100%;
  aspect-ratio: 390 / 800;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--screen-radius);
}
.phone.is-live .phone-screen { box-shadow: 0 0 0 3px var(--focus); }
.phone-app {
  position: absolute;
  inset: 0 auto auto 0;
  width: 390px;
  height: 800px;
  transform: scale(calc(var(--screen-width) / 390));
  transform-origin: 0 0;
  border: 0;
  background: var(--paper);
}
.phone:not(.is-live) .phone-app { pointer-events: none; }
.phone-try {
  position: absolute;
  z-index: 1;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  width: max-content;
  max-width: calc(100% - 1.25rem);
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 99px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 12px 30px -10px #0008;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 680;
}
.phone-try svg, .full-demo svg { width: 1.12rem; height: 1.12rem; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.phone-caption { margin-top: 1.35rem; text-align: center; color: var(--muted); font-size: .81rem; }
.caption-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .6rem; }
.full-demo, .phone-done { display: inline-flex; align-items: center; justify-content: center; gap: .32rem; min-height: 44px; font-weight: 680; }
.full-demo { color: var(--green); text-decoration: none; }
.full-demo:hover { text-decoration: underline; }
.full-demo svg { width: .9rem; height: .9rem; }
.phone-done { padding: 0 .85rem; color: var(--ink); background: var(--paper); border: 1px solid #39534451; border-radius: 99px; cursor: pointer; }

@media (min-width: 320px) { .phone { --screen-width: 272; } }
@media (min-width: 360px) { .phone { --screen-width: 300; --bezel: 11px; } }
@media (min-width: 410px) { .phone { --screen-width: 312; } }
@media (min-width: 72rem) { .phone { --screen-width: 326; --bezel: 12px; } }