.g-color-sequence{--seq-lit:#fff;--seq-ink:#23283d;--seq-1:#ef6461;--seq-2:#4d9de0;--seq-3:#3fb98a;--seq-4:#edb63a;--seq-5:#a583ee;--seq-6:#f0913f;width:100%}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-color-sequence{--seq-lit:#f3f5ff;--seq-1:#db5f5d;--seq-2:#4a93cf;--seq-3:#3aa87f;--seq-4:#d6a638;--seq-5:#9679d9;--seq-6:#db853d}}:root[data-theme=dark] .g-color-sequence{--seq-lit:#f3f5ff;--seq-1:#db5f5d;--seq-2:#4a93cf;--seq-3:#3aa87f;--seq-4:#d6a638;--seq-5:#9679d9;--seq-6:#db853d}.g-color-sequence__pads{gap:var(--sp-2);width:min(100%,320px);display:grid}.g-color-sequence__pads[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.g-color-sequence__pads[data-cols="3"]{grid-template-columns:repeat(3,1fr);width:min(100%,440px)}.g-color-sequence__pad{aspect-ratio:1;min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-lg);background:var(--pad,var(--c-surface-2));color:var(--seq-ink);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);border:2px solid #0000;place-items:center;padding:0;display:grid}.g-color-sequence__pad[data-pad="0"]{--pad:var(--seq-1)}.g-color-sequence__pad[data-pad="1"]{--pad:var(--seq-2)}.g-color-sequence__pad[data-pad="2"]{--pad:var(--seq-3)}.g-color-sequence__pad[data-pad="3"]{--pad:var(--seq-4)}.g-color-sequence__pad[data-pad="4"]{--pad:var(--seq-5)}.g-color-sequence__pad[data-pad="5"]{--pad:var(--seq-6)}.g-color-sequence__shape{width:56%;height:56%}.g-color-sequence__pad.is-on{background:color-mix(in srgb, var(--pad) 45%, var(--seq-lit));border-color:var(--seq-ink);box-shadow:0 0 0 4px color-mix(in srgb, var(--pad) 45%, transparent), var(--shadow-md);transform:scale(1.07)}.g-color-sequence__pad.is-on .g-color-sequence__shape{stroke-width:4.2px}.g-color-sequence__pad.is-wrong{border-color:var(--c-warn);box-shadow:0 0 0 4px color-mix(in srgb, var(--c-warn) 35%, transparent)}.g-color-sequence__pad.is-locked{cursor:default}.g-color-sequence__pad:not(.is-locked):hover{filter:brightness(1.05)}.g-color-sequence__msg{max-width:32ch;min-height:3em;color:var(--c-text-dim);font-size:var(--fs-md);text-align:center;text-wrap:balance;margin:0;font-weight:600}.g-color-sequence__steps{min-height:12px;padding-inline:var(--sp-2);flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.g-color-sequence__step{border-radius:var(--r-full);background:var(--c-border);width:10px;height:10px;transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease)}.g-color-sequence__step.is-done{background:var(--c-brand)}.g-color-sequence__step.is-active{background:var(--c-accent);transform:scale(1.4)}.g-color-sequence__go{min-width:160px}.g-color-sequence__go[hidden]{display:none}.g-color-sequence.is-reduced .g-color-sequence__pad,.g-color-sequence.is-reduced .g-color-sequence__step{transition:none}.g-color-sequence.is-reduced .g-color-sequence__pad.is-on,.g-color-sequence.is-reduced .g-color-sequence__step.is-active{transform:none}