.colour{gap:var(--s-4);width:100%;display:grid}.colour__viewport{width:min(100%, calc((100dvh - 15rem) * var(--colour-ratio,1.414)));border-radius:var(--radius);touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fbf8f1;margin-inline:auto;position:relative;overflow:hidden;box-shadow:0 1px 2px #00000040,0 8px 24px #0000002e}.colour--portrait .colour__viewport{--colour-ratio:.707}.colour__viewport:focus-visible{outline:3px solid var(--lantern);outline-offset:3px}.colour__stage{transform-origin:0 0;position:absolute;inset:0}.colour__canvas,.colour__overlay{width:100%;height:100%;position:absolute;inset:0}.colour__overlay{pointer-events:none}.colour__viewport:not(:focus) .colour__overlay{visibility:hidden}.colour__wait{font-family:var(--display);color:var(--ink-dark);place-items:center;margin:0;font-style:italic;display:grid;position:absolute;inset:0}.colour__tools{gap:var(--s-3);display:grid}.colour__tin{gap:var(--s-2);padding:var(--s-2) var(--s-1) var(--s-3);scroll-snap-type:x proximity;scrollbar-width:thin;display:flex;overflow-x:auto}@media (width>=48rem){.colour__tin{grid-template-columns:repeat(8,minmax(0,6.5rem));justify-content:center;display:grid;overflow:visible}.colour__crayon{width:auto}}.colour__crayon{justify-items:center;gap:var(--s-1);width:4.6rem;min-height:5rem;padding:var(--s-1);border-radius:var(--radius);color:var(--ink);font:inherit;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex:none;display:grid}.colour__wax{clip-path:polygon(0 0,78% 0,100% 40%,100% 60%,78% 100%,0 100%);border-radius:3px 0 0 3px;width:100%;height:1.75rem;transition:transform .12s ease-out;box-shadow:inset 0 -4px #00000026,inset 0 3px #fff3}.colour__name{font-family:var(--display);letter-spacing:0;text-align:center;text-wrap:balance;font-size:.8rem;line-height:1.15}.colour__crayon[aria-checked=true] .colour__wax{transform:translateY(-6px)}.colour__crayon[aria-checked=true] .colour__name{text-underline-offset:.25em;font-weight:700;text-decoration:underline}.colour__crayon:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}.colour__actions{gap:var(--s-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.colour__zoom{gap:var(--s-2);display:flex}.colour__zoom button,.colour__actions button{min-width:44px;min-height:44px;padding:0 var(--s-3);border-radius:var(--radius);color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:1px solid}.colour__zoom button{font-size:1.4rem;line-height:1}.colour__actions button:disabled{opacity:.4;cursor:default}.colour__actions button:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}.colour__confirm{gap:var(--s-2);flex-wrap:wrap;align-items:center;display:flex}@media (prefers-reduced-motion:reduce){.colour__wax{transition:none}.colour__crayon[aria-checked=true] .colour__wax{transform:none}}.colour__print{display:none}.colour__print-buttons{gap:var(--s-2);flex-wrap:wrap;display:flex}@media print{body *{visibility:hidden!important}.colour__print,.colour__print *{visibility:visible!important}.colour__print{object-fit:contain;width:100%;height:100%;display:block;position:fixed;inset:0}}@media (width>=56rem) and (aspect-ratio>=5/4){.colour{align-items:start;column-gap:var(--s-6);grid-template-columns:minmax(0,1fr) auto}.colour__viewport{width:min(100%, calc((100dvh - 3rem) * var(--colour-ratio,1.414)));margin-inline:auto 0}.colour__tools{top:var(--s-4);align-content:start;width:12rem;position:sticky}.colour__tin{gap:var(--s-1) var(--s-2);grid-template-columns:repeat(2,minmax(0,1fr));padding:0;display:grid;overflow:visible}.colour__crayon{width:auto;min-height:3.6rem;padding:2px}.colour__wax{height:1.25rem}.colour__actions{flex-direction:column;align-items:stretch}.colour__print-buttons{flex-direction:column}.colour__actions button{font-size:var(--step--1);letter-spacing:.04em}.colour__zoom{justify-content:flex-start}}.colour__unsaved{font-size:var(--step--1);color:var(--ink);margin:0}.colour__unsaved a{color:var(--lantern);text-underline-offset:.2em}.colour__unsaved a:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}