@layer reset,base,layout;@layer components{main:has(>.studio-page){padding-block-start:var(--space-3)}.studio-page>*{margin:0}.studio-title{font-size:var(--step-display)}.studio-lede{color:var(--muted);margin-block:.2rem .8rem}.studio-picker{gap:.4rem;padding-block:.15rem .8rem;display:flex;overflow-x:auto}.studio-picker a{border:1px solid var(--hair);border-radius:calc(var(--radius) * .8);background:var(--white);color:var(--muted);font-size:var(--step-label);flex:none;justify-items:center;gap:.1rem;padding:.25rem .4rem .15rem;text-decoration:none;display:grid}.studio-picker img{object-fit:contain;background:var(--white);block-size:44px;inline-size:44px}.studio-picker a[aria-current=page]{border-color:var(--green);background:var(--green-wash);color:var(--green-deep);font-weight:600}.studio{gap:var(--space-2) clamp(16px, 3vw, 36px);grid-template-columns:300px minmax(0,1fr);grid-template-areas:"tools art""tools after";align-items:start;display:grid}.studio-tools{grid-area:tools;gap:.9rem;display:grid;position:sticky;top:10px}.studio-art{grid-area:art}.studio-after{grid-area:after}.studio button{font:inherit;cursor:pointer;color:var(--ink)}.studio-box{border:1px solid var(--hair);border-radius:var(--radius);background:var(--white);padding:.75rem}.studio-box h2{font-family:var(--font-body);font-size:var(--step-small);letter-spacing:0;margin:0 0 .5rem;font-weight:600}.studio-swatch,.studio-palette button{aspect-ratio:1;border:1px solid var(--swatch-edge);background:var(--c,var(--white));box-shadow:inset 0 -4px 7px color-mix(in srgb, var(--ink) 7%, transparent);border-radius:50%;padding:0}.studio-swatch{inline-size:20px;display:inline-block}.studio-swatch.is-empty{background:repeating-linear-gradient(45deg, var(--white) 0 3px, var(--paper-deep) 3px 6px)}.studio-inhand{font-size:var(--step-small);align-items:center;gap:.6rem;margin:0 0 .6rem;line-height:1.3;display:flex}.studio-inhand .studio-swatch{inline-size:34px}.studio-inhand b,.studio-inhand small{display:block}.studio-inhand small{color:var(--muted);font-size:inherit}.studio-palette{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.studio-palette button[aria-pressed=true]{outline:2.5px solid var(--ink);outline-offset:2px}.studio-mode{border-radius:var(--pill);background:var(--paper);grid-template-columns:1fr 1fr;margin-block-start:.75rem;padding:3px;display:grid}.studio-mode button{border-radius:var(--pill);font-size:var(--step-small);color:var(--muted);background:0 0;border:0;padding:.4rem .25rem}.studio-mode button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 13%, transparent);font-weight:600}.studio-mode-note{min-block-size:2.3em;color:var(--muted);font-size:var(--step-label);margin:.4rem .1rem 0;line-height:1.4}.studio-ways{grid-template-columns:1fr 1fr;gap:6px;display:grid}.studio-ways button{border:1px solid var(--hair);border-radius:calc(var(--radius) * .8);background:var(--white);block-size:48px;font-size:var(--step-small);text-align:start;grid-template-columns:1fr 26px;align-items:center;gap:4px;padding:0 .5rem 0 .6rem;line-height:1.2;display:grid}.studio-ways button[aria-pressed=true]{border-color:var(--green);background:var(--green-wash)}.studio-dots{justify-content:flex-end;display:inline-flex}.studio-dots i{border:1.5px solid var(--white);background:var(--c);border-radius:50%;block-size:11px;inline-size:11px;margin-inline-start:-4px}.studio-again{color:var(--green);justify-self:end;font-size:1.1rem;font-weight:600;line-height:1;display:none}.studio-ways button.rolls[aria-pressed=true] .studio-again{display:block}.studio-ways button.rolls[aria-pressed=true] .studio-dots{display:none}.studio-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-block-end:.5rem;display:flex}.studio-views{border:1px solid var(--hair);border-radius:var(--pill);background:var(--white);flex-wrap:wrap;max-inline-size:100%;padding:3px;display:inline-flex}.studio-views button{border-radius:var(--pill);font-size:var(--step-small);color:var(--muted);background:0 0;border:0;padding:.3rem .75rem}.studio-views button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.studio-edit{flex-wrap:wrap;gap:6px;max-inline-size:100%;display:inline-flex}.studio .studio-btn{border:1px solid var(--hair);border-radius:var(--pill);background:var(--white);font-size:var(--step-small);padding:calc(.3rem + 3px) .85rem}.studio-btn:disabled{opacity:.4;cursor:default}.studio-btn[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}.studio-stage{border:1px solid var(--hair);border-radius:var(--radius);background:var(--white);block-size:min(100vh - 240px,560px);min-block-size:320px;padding:14px;position:relative}.studio-stage img,.studio-stage canvas{object-fit:contain;block-size:100%;inline-size:100%;display:block}.studio-stage [hidden]{display:none}.studio-hint{border-radius:var(--pill);background:var(--ink);inline-size:max-content;max-inline-size:calc(100% - 28px);color:var(--paper);font-size:var(--step-small);text-align:center;white-space:normal;pointer-events:none;margin:0;padding:.35rem .9rem;position:absolute;inset-block-end:14px;inset-inline-start:50%;translate:-50%}.studio-hint[hidden]{display:none}.studio-yarn{margin-block:.9rem 0}.studio-yarn h2{font-family:var(--font-body);font-size:var(--step-small);letter-spacing:0;margin:0 0 .25rem;font-weight:600}.studio-yarn ul{max-inline-size:none;margin:0;padding:0;list-style:none}.studio-yarn li{border-block-end:1px dashed var(--hair);font-size:var(--step-small);grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding-block:.4rem;line-height:1.35;display:grid}.studio-sws{gap:2px;display:inline-flex}.studio-for{color:var(--muted);font-size:var(--step-label)}.studio-amt{font-family:var(--font-mono);font-size:var(--step-label);white-space:nowrap;text-align:end}.studio-fine{color:var(--muted);font-size:var(--step-label);margin:.4rem 0 0}.studio-actions{flex-wrap:wrap;gap:.5rem;margin-block-start:.75rem;display:flex}.studio-actions .button{font-size:var(--step-small);padding:.55em 1.2em}.studio-cta{border-radius:var(--radius);background:var(--green);color:var(--white);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-block-start:1.1rem;padding:.9rem 1rem;display:flex}.studio-cta p{flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0;display:flex}.studio-cta p:first-child{font-family:var(--font-display);font-size:var(--step-h3)}.studio-cta a{color:var(--white)}.studio-cta .button{border-color:var(--white);background:var(--white);color:var(--green-deep)}.studio-toast{border-radius:var(--pill);background:var(--ink);color:var(--paper);font-size:var(--step-small);opacity:0;pointer-events:none;margin:0;padding:.5rem .9rem;transition:opacity .2s;position:fixed;inset-block-end:18px;inset-inline-start:50%;translate:-50%}.studio-toast.is-shown{opacity:1}@media (width<=760px){.studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"art""tools""after"}.studio-tools{position:static}.studio-stage{block-size:36vh;min-block-size:240px}.studio-palette{grid-template-columns:repeat(9,1fr);gap:5px}}@media print{body:has(.studio) :is(.site-header,.site-footer,.breadcrumbs,.skip),.studio-picker,.studio-lede,.studio-tools,.studio-bar,.studio-hint,.studio-actions,.studio-cta,.studio-toast{display:none!important}.studio{display:block}.studio-stage{border:0;block-size:auto;min-block-size:0}.studio-stage canvas{block-size:auto;max-block-size:60vh}.studio-swatch{-webkit-print-color-adjust:exact;print-color-adjust:exact}}}@layer utilities;