/* The "Try it" pages (try.js), on top of /docs/docs.css and /packages.css (the claim chips):
   the app's frame at 1:1 on the left with a hotspot over each control, its claim on the right. */
main.try { max-width: 1180px; margin: 0 auto; padding: 8px 16px 72px; }
main.try > header.page { max-width: 820px; }
main.try > .note { max-width: 820px; }

.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .try-grid { grid-template-columns: minmax(0, 1fr); } }

.b { font: 600 14px/1 var(--pixel); color: var(--fg); background: var(--chip); border: 0; padding: 8px 12px; cursor: pointer; }
.b:hover:not(:disabled) { background: #383c78; }
.b:disabled { color: var(--muted); opacity: 0.55; cursor: default; }
.b:focus-visible, .try-pick a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.try-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; font: 14px/1.3 var(--pixel); color: var(--muted); }
.try-tools .pins { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.try-tools .pins input { accent-color: var(--gold); }
.try-tools .where { margin-left: auto; }

/* The window: the app's own pixels, 1:1 up to its width, scaled down to fit a narrow screen. */
.try-shadow { position: relative; margin: 0 auto; filter: drop-shadow(var(--px) var(--px) 0 var(--shadow)); }
.try-window { --s: var(--px); background: var(--chip); padding: 10px; }
.try-frame { position: relative; width: 100%; background: #f5f5f7; }
.try-frame img { display: block; width: 100%; height: 100%; }
.spots { position: absolute; inset: 0; }
.spot { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.spot .badge { position: absolute; left: -3px; top: -17px; font: 600 11px/15px var(--mono); padding: 0 5px; color: #fff; background: #d9450d; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; }
.pinned .spot { outline: 2px dashed rgba(217, 69, 13, 0.75); outline-offset: 2px; }
.pinned .spot .badge { opacity: 1; }
.spot:hover, .spot:focus-visible { outline: 3px solid #1a59f2; outline-offset: 2px; background: rgba(26, 89, 242, 0.08); }
.spot:hover .badge, .spot:focus-visible .badge { opacity: 1; background: #1a59f2; z-index: 2; }
.spot:focus { outline: 3px solid #1a59f2; outline-offset: 2px; }

.menu { position: absolute; z-index: 3; min-width: 190px; max-width: 280px; background: var(--panel); padding: 6px; display: grid; gap: 4px; filter: drop-shadow(3px 3px 0 var(--ink)); }
.menu[hidden] { display: none; }
.menu button { display: flex; justify-content: space-between; gap: 12px; text-align: left; font: 600 14px/1.2 var(--pixel); color: var(--fg); background: var(--chip); border: 0; padding: 8px 10px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: #383c78; outline: 2px solid var(--gold); }
.menu .out { font: 12px/1.2 var(--mono); color: var(--muted); align-self: center; }

.msg { min-height: 1.6em; margin: 12px 0 0; font-size: 16px; color: var(--muted); }
.msg.far { color: var(--gold); }

/* The panel: the claim under the pointer (or focused), then the steps taken. */
.try-panel { display: grid; gap: 18px; position: sticky; top: 16px; }
@media (max-width: 900px) { .try-panel { position: static; } }
.try-panel .card { --s: var(--px); background: var(--panel); padding: 16px 18px; box-shadow: inset 0 0 0 var(--px) var(--chip); filter: drop-shadow(var(--px) var(--px) 0 var(--ink)); }
.try-panel .label { font: 600 14px/1 var(--pixel); color: var(--gold); letter-spacing: 0.04em; margin: 0 0 10px; }
.try-panel .title { font: 600 22px/1.2 var(--pixel); margin: 8px 0 4px; color: #f3efff; }
.try-panel .ref { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.try-panel .ref code { font-size: 15px; color: var(--gold); background: var(--chip); }
.try-panel .ref a { text-decoration: none; }
.try-panel .key { font: 13px var(--mono); color: var(--muted); margin-left: -4px; }
.try-panel .role { font: 13px/1.4 var(--mono); color: var(--muted); margin-bottom: 10px; }
.try-panel .said { font-size: 16px; line-height: 1.5; margin-bottom: 8px; }
.try-panel .said b { display: block; font: 600 13px/1.4 var(--pixel); color: var(--muted); letter-spacing: 0.04em; }
.try-panel .hint { color: var(--muted); font-size: 15px; }
.try-panel details { margin: 6px 0 12px; font-size: 14px; }
.try-panel summary { cursor: pointer; font: 600 13px/1.4 var(--pixel); color: var(--muted); }
.thms { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.thms .ok { color: #9fd3b4; }
.thms .bad { color: #ec7a62; }
.acts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.acts li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.out { font: 12.5px/1.2 var(--mono); color: var(--muted); }
.out.ok { color: #9fd3b4; }
.out.far { color: var(--gold); }
.try-panel .go { margin: 0; font: 15px/1.3 var(--pixel); }

.steps { margin: 0; padding-left: 34px; max-height: 260px; overflow-y: auto; font-size: 15px; line-height: 1.45; }
.steps li { margin: 2px 0; }
.steps li[aria-current] { color: #f3efff; font-weight: 600; }
.steps code { font-size: 12px; }
.steps a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* A narrow screen scales the frame down; the refs stay in the panel, not over the controls. */
@media (max-width: 600px) { .pinned .spot .badge { opacity: 0; } .try-window { padding: 6px; } }

/* /try/: the apps. */
.try-pick { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.try-pick a { --s: var(--px); display: grid; gap: 8px; height: 100%; padding: 16px; background: var(--panel); color: var(--fg); text-decoration: none; }
.try-pick a:hover { background: #262a5a; }
.try-pick .shot { display: grid; place-items: start center; background: #f5f5f7; height: 200px; overflow: hidden; }
.try-pick .shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.try-pick b { font: 600 22px/1.2 var(--pixel); color: #f3efff; }
.try-pick span { color: var(--muted); font-size: 16px; line-height: 1.45; }
.try-pick .n { font: 13px/1.3 var(--mono); color: var(--gold); }
.try-about { max-width: 760px; }
.try-about h2 { font: 600 24px/1.2 var(--pixel); }