.demo-screen{box-shadow:0 40px 90px -30px #000000f2,0 0 0 1px #0009;container-type:inline-size}.demo-screen:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg, transparent 30%, rgb(var(--accent-rgb) / .6));height:1px;position:absolute;inset:0 24px auto}.demo-app{background:radial-gradient(120% 90% at 100% 0%, rgb(var(--accent-rgb) / .07), transparent 60%), var(--color-panel);font-size:clamp(10px,2.1cqi,14px);line-height:1.35}.demo-card{border:1px solid var(--color-line);background:#ffffff06;border-radius:12px;padding:3cqi 3.2cqi}.demo-h{color:var(--color-ink);margin-bottom:1.6cqi;font-weight:600}.demo-line{color:#f5f5f7b8;justify-content:space-between;gap:2cqi;padding-block:.5cqi;display:flex}.demo-pay{background:var(--accent);color:var(--accent-ink);text-align:center;border-radius:999px;padding:1.6cqi;font-weight:500;display:block}.demo-tick{color:var(--color-pass)}.demo-link{color:var(--accent);text-underline-offset:2px;text-decoration:underline}.demo-code{color:#f5f5f7b8;white-space:nowrap;text-overflow:ellipsis;margin-top:.8cqi;overflow:hidden}.demo-code b{color:var(--color-fail);font-weight:500}.demo-region{transition:box-shadow .3s var(--ease-apple);border-radius:12px;position:relative}.demo-region:after{content:"";z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-apple);background:#0c0c0e9e;position:absolute;inset:-1px}.demo-region.rounded-full{border-radius:999px}.demo-region:before{content:attr(data-pin);z-index:2;border:1px solid var(--sev);background:var(--color-canvas);min-width:2.2em;height:1.7em;color:var(--sev);font:500 max(10px, .85em) / 1 var(--font-mono);opacity:0;transition:opacity .3s var(--ease-apple), transform .3s var(--ease-apple);border-radius:999px;place-items:center;padding-inline:.4em;display:grid;position:absolute;top:-.7em;left:-.7em;transform:scale(.85)}.demo-dots{background:radial-gradient(circle,#ffffff26 4.4px,#0000 5px) 0 0/.8125rem .625rem repeat-x;flex:none;width:2.4375rem;height:.625rem}.demo-findings{counter-reset:finding}.demo-finding{counter-increment:finding;border-bottom:1px solid var(--color-line);cursor:pointer;transition:background-color .2s var(--ease-apple);justify-items:start;gap:.5rem;padding:1.1rem 1rem 1.1rem 3.5rem;display:grid;position:relative}.demo-finding:after{content:counter(finding, decimal-leading-zero);font:12px / 1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-faint);position:absolute;top:1.35rem;left:.75rem}.demo-finding:hover{background:#ffffff08}.demo-finding:before{content:"";background:var(--sev);opacity:0;width:2px;transition:opacity .2s var(--ease-apple);border-radius:2px;position:absolute;top:.9rem;bottom:.9rem;left:0}.demo-finding:has(:checked){background:#ffffff0b}.demo-finding:has(:checked):before{opacity:1}.demo-finding:has(:focus-visible){outline:2px solid var(--color-ink);outline-offset:-2px;border-radius:12px}.demo-level{border-color:color-mix(in srgb, var(--sev) 50%, transparent);color:var(--sev)}.demo-consequence{display:none}.demo-finding:has(:checked) .demo-consequence{display:block}[data-url]{display:none}@supports selector(:has(*)){.check-demo .demo-region:after{opacity:1}:is(.check-demo:has([value="0"]:checked) [data-region="0"],.check-demo:has([value="1"]:checked) [data-region="1"],.check-demo:has([value="2"]:checked) [data-region="2"],.check-demo:has([value="3"]:checked) [data-region="3"],.check-demo:has([value="4"]:checked) [data-region="4"]){box-shadow:0 0 0 1px var(--sev), 0 0 2.5rem -.5rem color-mix(in srgb, var(--sev) 45%, transparent)}.check-demo:has([value="0"]:checked) [data-region="0"]:before{opacity:1;transform:none}.check-demo:has([value="1"]:checked) [data-region="1"]:before{opacity:1;transform:none}.check-demo:has([value="2"]:checked) [data-region="2"]:before{opacity:1;transform:none}.check-demo:has([value="3"]:checked) [data-region="3"]:before{opacity:1;transform:none}.check-demo:has([value="4"]:checked) [data-region="4"]:before{opacity:1;transform:none}.check-demo:has([value="0"]:checked) [data-region="0"]:after{opacity:0}.check-demo:has([value="1"]:checked) [data-region="1"]:after{opacity:0}.check-demo:has([value="2"]:checked) [data-region="2"]:after{opacity:0}.check-demo:has([value="3"]:checked) [data-region="3"]:after{opacity:0}.check-demo:has([value="4"]:checked) [data-region="4"]:after{opacity:0}:is(.check-demo:has([value="0"]:checked) [data-url="0"],.check-demo:has([value="1"]:checked) [data-url="1"],.check-demo:has([value="2"]:checked) [data-url="2"],.check-demo:has([value="3"]:checked) [data-url="3"],.check-demo:has([value="4"]:checked) [data-url="4"]){display:inline}}@supports not selector(:has(*)){[data-url="0"]{display:inline}.demo-region:before{opacity:1;transform:none}.demo-consequence{display:block}}