/* Thumb Arc browser demo. Page and fake screen use the site tokens; the pad keeps
   the app's own default graphite theme, which doesn't change with the page. */
.try-stage { --arc-accent: #7C66F0; margin-inline: -1rem; }
.scope-dark .try-stage, [data-theme=dark] .try-stage { --arc-accent: #9E8CFC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .try-stage { --arc-accent: #9E8CFC; } }
@media (min-width: 640px) { .try-stage { margin-inline: -1.5rem; } }

.try-screen {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(500px, calc(100svh - 76px), 800px);
  background: var(--background); color: var(--foreground);
  border-block: 1px solid var(--border);
  user-select: none; -webkit-user-select: none;
}
@media (min-width: 768px) {
  .try-stage {
    margin-inline: auto; width: 414px; padding: 12px; border-radius: 52px; background: #151718;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 70px -24px rgb(0 0 0 / 0.75);
  }
  .try-screen { border: 0; border-radius: 40px; height: clamp(600px, calc(100svh - 180px), 780px); }
}

/* Coach card */
.try-coach { position: relative; z-index: 3; margin: 12px 12px 0; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.try-coach h2, .try-tag { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.try-coach-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.try-text { flex: 1; font-size: 14px; line-height: 1.4; user-select: text; -webkit-user-select: text; }
.try-hint { min-height: 18px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--highlight); }
.try-btn {
  flex: none; min-width: 64px; min-height: 48px; padding-inline: 14px; border-radius: 12px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer;
}
.try-btn:hover { background: var(--accent); }
.try-btn:focus-visible, .try-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* The fake app */
.try-app { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 170px 12px 0; }
.try-now { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.try-now p { font-size: 15px; font-weight: 600; line-height: 1.2; }
.try-now small, .try-row small { display: block; font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.try-play { width: 92px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 24px; background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 600; }
.try-row { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; margin-top: 4px; padding-inline: 12px; border-radius: 12px; background: var(--muted); font-size: 14px; font-weight: 500; }
.try-menu { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 6px 12px; border-radius: 10px; background: var(--popover); border: 1px solid var(--border); box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5); font-size: 12px; line-height: 1.5; }
.try-menu[hidden] { display: none; }
.try-slider { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 56px; margin-top: 4px; padding-inline: 12px; font-size: 13px; }
.try-slider > span { display: flex; justify-content: space-between; }
.try-track { display: block; height: 6px; border-radius: 3px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); }
.try-fill { position: relative; display: block; height: 100%; border-radius: 3px; background: var(--arc-accent); }
.try-fill::after { content: ""; position: absolute; right: -9px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--foreground); border: 3px solid var(--arc-accent); }
.try-list { flex: 1; min-height: 96px; margin-top: 6px; overflow: hidden; list-style: none; padding: 0; border-top: 1px solid var(--border); }
.try-list li { display: flex; align-items: center; height: 48px; padding-inline: 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
.try-list li[data-try=goal] { color: var(--brand); font-weight: 600; }

/* Pad, cursor, snap highlight. touch-action: none is on the pad only. */
.try-pad {
  position: absolute; right: 0; bottom: 0; z-index: 4; display: block;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer; transition: opacity 140ms linear;
}
.try-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.try-cursor { z-index: 6; width: 0; height: 0; }
.try-cursor[hidden], .try-snap[hidden] { display: none; }
.try-cursor::before {
  content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.6), inset 0 0 0 1.5px rgb(0 0 0 / 0.6), 0 0 8px 3px rgb(0 0 0 / 0.27);
}
.try-cursor::after { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); }
.try-snap { z-index: 5; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--arc-accent); background: color-mix(in srgb, var(--arc-accent) 15%, transparent); opacity: 0; transition: transform 120ms ease-out, width 120ms ease-out, height 120ms ease-out, opacity 120ms linear; }
.try-snap.is-on { opacity: 1; }
.try-ripple { z-index: 6; width: 0; height: 0; }
.try-ripple::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--arc-accent); opacity: 0; }
.try-ripple.is-on::before { animation: try-ripple 450ms ease-out; }
@keyframes try-ripple { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }

/* Finish card */
.try-finish { position: absolute; z-index: 7; left: 12px; right: 12px; top: 12px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.6); user-select: text; -webkit-user-select: text; }
.try-finish[hidden], .try-coach[hidden] { display: none; }
.try-finish h2 { outline: none; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.try-finish p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted-foreground); }
.try-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; border-radius: 12px; font-size: 14px; font-weight: 500; text-align: center; padding-inline: 12px; }
.try-link-primary { background: var(--primary); color: var(--primary-foreground); }
.try-link-plain { border: 1px solid var(--border); }
.try-links { list-style: none; padding: 0; }
.try-finish .try-btn { width: 100%; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .try-pad, .try-snap { transition: none; }
  .try-ripple.is-on::before { animation: none; }
}