:root{--canon-gap:12px;--canon-sprite:96px;--canon-ring-room:8px}.studio-page{box-sizing:border-box;min-height:var(--view-h);padding:calc(var(--bar-h) + 16px) 16px;justify-content:center;align-items:center;max-width:100%;display:flex}.studio-card{background:var(--tank);color:var(--cream);border:var(--rim-w) solid var(--edge);border-radius:12px;width:100%;max-width:656px;padding:16px}.studio-grid{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:16px;display:grid}.studio-main{grid-template-columns:136px minmax(0,1fr) 176px;align-items:start;gap:16px;display:grid}.studio-main>section{max-width:none;margin:0;padding:0}.studio-regions{flex-direction:column;gap:2px;display:flex}.region{width:100%;color:var(--cream);font:inherit;text-align:left;text-transform:uppercase;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:4px 6px;line-height:1.2;display:flex}.region:hover{border-color:color-mix(in srgb, var(--cream) 30%, transparent)}.region.is-active{border-color:var(--amber);color:var(--amber)}.region.is-skipped{opacity:.5}.region-name{flex:1}.region-chips{gap:2px;display:flex}.chip{border:1px solid #00000080;width:10px;height:10px}.swatches{flex-wrap:wrap;gap:5px;margin-bottom:10px;display:flex}.swatch-column{flex-direction:column;gap:5px;display:flex}.swatch{cursor:pointer;width:28px;height:28px;font:inherit;color:var(--pixel-ink);border:2px solid #0000008c;border-radius:3px;padding:0}.swatch:disabled{opacity:.35;cursor:not-allowed}.swatch.is-picked{border-color:var(--amber);outline:2px solid var(--cream)}.swatch.is-slot{width:40px;height:40px}.swatch.is-clear{background:repeating-conic-gradient(#d9d2bb 0 25%, #f4efdc 0 50%) 0 0 / 10px 10px}.words,.word-column{gap:5px;margin-bottom:10px;display:flex}.words{flex-wrap:wrap}.word-column{flex-direction:column;margin-bottom:0}.word{border:2px solid color-mix(in srgb, var(--cream) 35%, transparent);color:var(--cream);font:inherit;text-transform:uppercase;text-align:center;cursor:pointer;background:0 0;border-radius:4px;padding:5px 10px;line-height:1.2}.word.is-picked{border-color:var(--amber);background:var(--amber);color:var(--pixel-ink)}.word:disabled{opacity:.4;cursor:not-allowed}.pattern-panel,.eye-panel{align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.eye-split{border:2px solid #0000008c;border-radius:3px;width:40px;height:40px}.clarity{touch-action:none;height:34px;margin-bottom:10px;position:relative}.clarity:before{content:"";background:linear-gradient(to right, var(--amber) calc(var(--fill) * 100%), color-mix(in srgb, var(--cream) 30%, transparent) calc(var(--fill) * 100%));border-radius:2px;height:4px;position:absolute;top:5px;left:0;right:0}.clarity-stop{top:14px;left:calc(var(--at) * 100%);transform:translateX(calc(var(--pull) * -100%));color:var(--cream);font:inherit;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:0;line-height:1.2;position:absolute}.clarity-stop.is-picked{color:var(--amber)}.finishes{gap:5px;display:flex}.finishes .word{flex:1}.studio-step{gap:8px;margin-top:4px;display:flex}.arrow{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:4px;justify-content:center;align-items:center;width:52px;height:44px;padding:0;display:inline-flex}.arrow img{width:40px;height:40px;image-rendering:pixelated;filter:brightness(0)invert()}.arrow.is-back img{transform:scaleX(-1)}.studio-step-at{display:none}.arrow:hover{border-color:var(--amber)}.arrow:disabled{opacity:.3;cursor:not-allowed}.studio-preview{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.studio-well{border:2px solid var(--edge);background:repeating-conic-gradient(#3b4a55 0 25%, #4a5b67 0 50%) 0 0 / 36px 36px;place-items:center;width:144px;height:144px;display:grid}.studio-well.is-rolling{border-color:var(--amber)}.studio-well canvas{width:128px;height:128px;image-rendering:pixelated;image-rendering:crisp-edges}.studio-code{text-transform:none;letter-spacing:1px;margin:0}.studio-line{width:100%}.studio-line input{border:2px solid color-mix(in srgb, var(--cream) 35%, transparent);width:100%;color:var(--cream);font:inherit;text-transform:uppercase;background:0 0;border-radius:4px;padding:6px 8px}.studio-line input:focus{border-color:var(--amber)}.studio-lab{justify-content:center;width:100%}.studio-status{text-align:center;margin:0}.studio-status:empty{display:none}.canon{border-top:2px solid color-mix(in srgb, var(--cream) 20%, transparent)}.canon-scroll{justify-content:start;align-items:start;gap:var(--canon-gap);padding:var(--canon-ring-room);overscroll-behavior-x:contain;scrollbar-width:none;grid-auto-columns:max-content;grid-auto-flow:column;display:grid;overflow:auto hidden}.canon-scroll::-webkit-scrollbar{display:none}.canon-list{display:contents}.canon-roll,.canon-tile{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:6px;padding:2px}.canon-roll{color:var(--cream);font:inherit;text-transform:uppercase;flex-direction:column;align-items:center;gap:4px;line-height:1.2;display:flex}.canon-roll-label{display:block}.roll-short{display:none}.canon-roll.is-rolling{border-color:var(--amber)}.canon-roll .canon-sprite{--roll-rainbow-ms:1.6s;animation:canon-roll-rainbow var(--roll-rainbow-ms) linear infinite}@keyframes canon-roll-rainbow{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}@media (prefers-reduced-motion:reduce){.canon-roll .canon-sprite{animation:none}}.canon-tile:hover,.canon-roll:hover{border-color:var(--amber)}.canon-sprite{width:var(--canon-sprite,64px);height:var(--canon-sprite,64px);image-rendering:pixelated;background-repeat:no-repeat;display:block}.region:focus-visible,.swatch:focus-visible,.word:focus-visible,.clarity-stop:focus-visible,.arrow:focus-visible,.canon-tile:focus-visible,.canon-roll:focus-visible,.studio-lab:focus-visible,.is-aimed{outline:3px solid var(--kelp-bright);outline-offset:2px}@media (max-width:860px){.canon-roll-label{font-size:8px}.studio-page{padding:calc(var(--bar-h) + 16px) 12px}.studio-main{grid-template-columns:minmax(0,1fr)}.studio-preview{order:-1}.studio-regions{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));display:grid}}@media (max-width:560px){.canon-roll-label{font-size:16px}.roll-long{display:none}.roll-short{display:inline}:root{--phone-gap:8px;--phone-choices-h:164px;--phone-well-min:136px;--phone-swatch-columns:8;--phone-swatch-max:34px;--phone-eye-columns:6;--phone-eye-max:40px}.studio-page{min-height:var(--view-h);padding:calc(var(--bar-h) + var(--phone-gap)) var(--phone-gap) var(--phone-gap);touch-action:manipulation;display:block}.studio-card{min-height:calc(var(--view-h) - var(--bar-h) - var(--phone-gap) * 2);padding:var(--phone-gap);flex-direction:column;max-width:none;display:flex}.studio-card button,.studio-card a{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.studio-grid{gap:var(--phone-gap);flex-direction:column;flex:1;display:flex}.studio-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(var(--phone-well-min), 1fr) auto var(--phone-choices-h);gap:var(--phone-gap);flex:1;grid-template-areas:"well""step""choices";align-items:stretch}.studio-main>.studio-preview,.studio-main>.studio-choices{display:contents}.studio-regions{display:none}.studio-well{grid-area:well;width:auto;height:auto;min-height:0;overflow:hidden}.studio-code{pointer-events:none;grid-area:well;place-self:end center;margin-bottom:6px;font-size:8px}.studio-status{background:var(--tank);grid-area:well;place-self:start stretch;margin:6px;padding:4px}.studio-step{grid-area:step;justify-content:space-between;align-items:center;margin:0}.arrow{flex:none;width:64px;height:56px}.arrow img{width:48px;height:48px}.studio-step-at{flex-direction:column;align-items:center;gap:4px;min-width:0;display:flex}.studio-step-name{line-height:1.2}.studio-step-pips{gap:4px;display:flex}.studio-pip{background:color-mix(in srgb, var(--cream) 35%, transparent);width:6px;height:6px}.studio-pip.is-active{background:var(--amber)}.studio-pip.is-skipped{opacity:.35}#choices{overscroll-behavior:contain;grid-area:choices;min-height:0;overflow-y:auto}.studio-card[data-step=name] #choices{display:none}.studio-line,.studio-lab{grid-area:choices;display:none}.studio-card[data-step=name] .studio-line{margin-top:var(--phone-gap);align-self:start;display:block}.studio-card[data-step=name] .studio-lab{align-self:center;display:flex}.studio-line input{padding:10px}.swatches{margin-bottom:6px}#choices>:last-child{margin-bottom:0}.swatches,.swatch-column{grid-template-columns:repeat(var(--phone-swatch-columns), minmax(0, var(--phone-swatch-max)));gap:6px;display:grid}.swatch{aspect-ratio:1;width:100%;height:auto}.swatch.is-slot{aspect-ratio:auto;grid-column:span 2;width:100%;height:40px}.pattern-panel{flex-direction:column;align-items:stretch}.word-column{flex-flow:wrap}.word{padding:5px 8px}.pattern-panel .swatch-column{width:100%}.eye-panel{grid-template-rows:auto auto;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:6px 10px;display:grid}.eye-split{grid-row:span 2}.eye-panel .swatch-column{grid-template-columns:repeat(var(--phone-eye-columns), minmax(0, var(--phone-eye-max)))}.canon{--canon-sprite:64px;flex:none}}@media (max-width:560px) and (hover:none){.arrow:hover,.canon-tile:hover,.canon-roll:not(.is-rolling):hover{border-color:#0000}}