:root{color:oklch(22% .015 155);font-synthesis:none;text-rendering:optimizelegibility;--color-bg:oklch(98.5% 0 0);--color-surface:oklch(100% 0 0);--color-ink:oklch(22% .015 155);--color-muted:oklch(45% .02 155);--color-line:oklch(88% .01 155);--color-action:oklch(56% .16 151);--color-action-hover:oklch(49% .15 151);--color-action-ink:oklch(99% 0 0);--color-danger:oklch(55% .2 27);--color-focus:oklch(63% .18 250);background:oklch(98.5% 0 0);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--color-bg);min-width:20rem;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer;border-radius:.625rem;min-height:2.75rem;padding:.7rem 1rem;font-weight:700;transition:background-color .18s,border-color .18s,transform .18s}button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:focus-visible,input:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:disabled{cursor:wait;opacity:.65}.shell{width:min(100% - 2rem,34rem);margin:0 auto;padding:4.5rem 0 2rem}.intro{margin-bottom:2rem}.product-name{color:var(--color-action-hover);margin:0 0 .75rem;font-size:.875rem;font-weight:750}h1,h2,p{text-wrap:pretty}h1{letter-spacing:-.025em;text-wrap:balance;max-width:18ch;margin:0;font-size:1.75rem;line-height:1.18}.intro>p:last-child{max-width:65ch;color:var(--color-muted);margin:1rem 0 0;line-height:1.65}.task{border:1px solid var(--color-line);background:var(--color-surface);border-radius:.75rem;padding:1.5rem}.task-heading{border-bottom:1px solid var(--color-line);margin-bottom:1.25rem;padding-bottom:1.25rem}h2{margin:0;font-size:1.25rem;line-height:1.3}#status{min-height:1.35rem;color:var(--color-muted);margin:.4rem 0 0;font-size:.875rem;line-height:1.5}#status[data-kind=error]{color:var(--color-danger);font-weight:650}.choice{cursor:pointer;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;display:flex}.choice input{width:1.125rem;height:1.125rem;accent-color:var(--color-action);margin:.15rem 0 0}.choice span{gap:.2rem;display:grid}.choice strong{font-size:.9375rem}.choice small{color:var(--color-muted);font-size:.8125rem;line-height:1.45}.primary{border:1px solid var(--color-action);width:100%;color:var(--color-action-ink);background:var(--color-action)}.primary:hover:not(:disabled){border-color:var(--color-action-hover);background:var(--color-action-hover)}.secondary{border:1px solid var(--color-line);color:var(--color-ink);background:var(--color-surface)}.secondary:hover:not(:disabled){border-color:var(--color-muted);background:var(--color-bg)}.identity{gap:1rem;margin:0 0 1.5rem;display:grid}.identity div{gap:.3rem;display:grid}.identity dt{color:var(--color-muted);font-size:.8125rem}.identity dd{overflow-wrap:anywhere;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.55}.security-note{color:var(--color-muted);margin:1.25rem 0 0;font-size:.8125rem;line-height:1.6}.demo-links{flex-wrap:wrap;gap:.5rem 1rem;margin-top:1rem;font-size:.8125rem;display:flex}.demo-links a{color:var(--color-action-hover);text-underline-offset:.2em;font-weight:650}.demo-links a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:.125rem}[hidden]{display:none!important}@media (width>=40rem){.shell{width:min(100% - 3rem,34rem);padding-top:6rem}.task{padding:1.75rem}}@media (prefers-reduced-motion:reduce){button{transition:none}button:hover:not(:disabled){transform:none}}
