.asp-code{width:min(100%,38rem);color:var(--ink);text-align:center;overflow-wrap:anywhere;margin-inline:auto;container:code-puzzle/inline-size}.asp-code-mini{max-width:315px}.asp-code *{box-sizing:border-box}.asp-code .asp-code-rule{margin:0 0 .75rem;font-weight:600;line-height:1.45}.asp-code-positions{justify-content:center;gap:.5rem;display:flex}.asp-code .asp-code-button{border:1px solid var(--control-border);background:var(--card);min-width:44px;min-height:52px;color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;border-radius:12px;padding:.625rem .875rem;font-size:.9375em;font-weight:600;line-height:1.3}.asp-code-positions .asp-code-button{font-variant-numeric:tabular-nums;width:3.25rem;min-height:3.5rem;font-size:1.5em}.asp-code .asp-code-button[aria-pressed=true]{border:2px solid var(--accent);background:var(--accent-soft);box-shadow:none}.asp-code .asp-code-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.asp-code:not(.asp-code-mini) .asp-code-primary{min-width:220px}.asp-code-legend{text-align:start;gap:.25rem;width:fit-content;max-width:100%;margin:0 auto 1rem;font-size:.8125em;line-height:1.4;display:grid}.asp-code-legend>div{grid-template-columns:minmax(0,.75fr) minmax(0,1.75fr);gap:.625rem;display:grid}.asp-code-legend dt{font-weight:650}.asp-code-legend dd{margin:0}.asp-code .asp-code-instruction{margin:.75rem 0 .5rem;font-size:.875em;line-height:1.4}.asp-code-digits{grid-template-columns:repeat(var(--asp-code-digits),minmax(44px,1fr));gap:.25rem;max-width:24rem;margin-inline:auto;display:grid}.asp-code .asp-code-digits>.asp-code-button{border-radius:9px;min-height:44px;padding:.375rem .125rem}.asp-code-actions,.asp-code-support{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.75rem;display:flex}.asp-code .asp-code-status{margin:.75rem 0 0;font-size:.9375em;line-height:1.45}.asp-code-status:empty{display:none}.asp-code[data-code-solved=true] .asp-code-status{color:var(--good);font-weight:650}.asp-code-history{scrollbar-color:var(--control-border) var(--bg);max-height:15rem;margin:.75rem 0 0;padding:0;list-style:none;overflow:auto}.asp-code-history li{border-top:1px solid var(--line);text-align:start;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem;padding:.5rem 0;font-size:.875em;display:flex}.asp-code-history strong{letter-spacing:.1em;font-variant-numeric:tabular-nums}.asp-code-given{max-height:none;margin:0 auto 1rem}.asp-code-given li{border-block:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;padding:.5rem 0;display:grid}.asp-code-given small{color:var(--muted);font-size:1em}.asp-code-given li>span{grid-column:1/-1}.asp-code .asp-code-button:is([data-code-action=reset],[data-code-action=hint],[data-code-action=reveal]){color:var(--accent);text-underline-offset:.2em;background:0 0;border-color:#0000;text-decoration:underline}.asp-code .asp-code-button[data-code-action=next]:not(.asp-code-primary){color:var(--accent);background:0 0;border-color:#0000}.asp-code .asp-code-note{color:var(--muted);margin:.75rem 0 0;font-size:.875em;line-height:1.4}.asp-code button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.asp-code button:disabled{cursor:default}.asp-code ::selection{background:var(--accent-soft);color:var(--ink)}@media (hover:hover){.asp-code-button:hover:not(:disabled){border-color:var(--accent)}}@media (width<=360px){.asp-code-digits{gap:2px}}@container code-puzzle (width<=290px){.asp-code-digits:has([data-code-digit="6"]){grid-template-columns:repeat(3,minmax(44px,1fr))}.asp-code-legend>div{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}@media (width<=700px){.asp-code:not(.asp-code-mini) .asp-code-primary{flex:100%;width:100%}}.asp-code-mini .asp-code-given{margin-bottom:.5rem}.asp-code-mini .asp-code-given li{border:0;justify-content:center;align-items:center;gap:.25rem .75rem;padding:0;display:flex}.asp-code-mini .asp-code-given small{display:none}.asp-code-mini .asp-code-given li>span{font-size:.875rem}.asp-code-mini .asp-code-positions{gap:.375rem}.asp-code-mini .asp-code-positions .asp-code-button{width:44px;min-height:44px;padding:.25rem;font-size:1.25rem}.asp-code-mini .asp-code-instruction{margin:.375rem 0}.asp-code-mini .asp-code-actions{margin-top:.375rem}.asp-code-mini .asp-code-actions .asp-code-button{min-height:44px;padding:.375rem .75rem}.asp-code-mini .asp-code-status{margin-top:.375rem}
