.three{padding-block:clamp(3.5rem,8vw,7.5rem)}.three__badge{border:1px solid var(--cobalt);color:var(--cobalt);font-size:var(--step--1);border-radius:999px;justify-self:start;margin:0;padding:.3rem .75rem;font-weight:600}.three__stage canvas,.three__rack canvas{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 8% 92%,#0000 100%),linear-gradient(#0000 0,#000 6% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 8% 92%,#0000 100%),linear-gradient(#0000 0,#000 6% 90%,#0000 100%);mask-composite:intersect}.three__designer{grid-template-columns:minmax(0,1.45fr) minmax(17rem,.55fr);align-items:center;gap:clamp(1.25rem,3vw,2.5rem);display:grid}.three__stage{height:clamp(30rem,74vh,46rem);position:relative}.three__stage canvas{position:absolute;inset:0}.three__stage.is-dropping:after{content:"Drop the image to print it on the front";border:2px dashed var(--cobalt);border-radius:var(--radius-stage);color:var(--cobalt);pointer-events:none;place-items:center;font-weight:600;display:grid;position:absolute;inset:10% 16%}.three__stage[aria-busy=true] canvas{cursor:progress!important}.three__sides{z-index:1;border:1px solid var(--seam);background:var(--paper);border-radius:999px;gap:.25rem;padding:.25rem;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.three__sides button{color:var(--ink);font:inherit;font-size:var(--step--1);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.45rem 1rem;font-weight:600}.three__sides button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.three__hint{color:var(--heather);font-size:var(--step--1);text-align:center;pointer-events:none;margin:0;position:absolute;inset:auto 0 0}@media (hover:none){.three__hint-wheel{display:none}}.three__placeholder{place-items:center;display:grid;position:absolute;inset:2.5rem 0 2rem}.three__placeholder img{object-fit:contain;opacity:.5;filter:saturate(.6);width:auto;max-width:100%;height:100%}.three__start{text-align:center;justify-items:center;gap:.75rem;display:grid;position:absolute}.three.is-ready .three__placeholder{display:none}.three:not(.is-ready) .three__sides,.three:not(.is-ready) .three__hint{visibility:hidden}.three:not(.is-ready) .three__panel{opacity:.55;pointer-events:none}.three.is-unsupported .three__panel,.three.is-unsupported .three__rack-head,.three.is-unsupported .three__rack{display:none}.three__panel{border:1px solid var(--seam);border-radius:var(--radius-stage);background:var(--paper);gap:1.1rem;padding:clamp(1.1rem,2vw,1.5rem);transition:opacity .3s;display:grid}.three__field{gap:.4rem;display:grid}.three__label{font-size:var(--step--1);font-weight:600}.three__field input[type=text],.three__field select{border:1px solid var(--seam-strong);border-radius:var(--radius);background:var(--paper);width:100%;min-height:2.75rem;color:var(--ink);font:inherit;padding:.55rem .75rem}.three__field input[type=text]:focus-visible,.three__field select:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}.three__swatches{flex-wrap:wrap;gap:.6rem;display:flex}.three__swatch{background:var(--swatch);cursor:pointer;width:2.1rem;height:2.1rem;transition:transform .16s var(--ease-out);border:1px solid #1a1d222e;border-radius:50%;padding:0}.three__swatch:hover{transform:scale(1.08)}.three__swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.three__swatch[data-3d-colour=white]{--swatch:#f7f7f5}.three__swatch[data-3d-colour=heather-grey]{--swatch:#a9adb1}.three__swatch[data-3d-colour=navy]{--swatch:#22304f}.three__swatch[data-3d-colour=bottle-green]{--swatch:#1f4d3a}.three__swatch[data-3d-colour=brick-red]{--swatch:#a8322d}.three__swatch[data-3d-colour=black]{--swatch:#1c1c1e}.three__upload{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.three__upload input[type=file]{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.three__status{min-height:1.3em;color:var(--heather);font-size:var(--step--1);margin:0}.three__status.is-error{color:var(--danger)}.three__tools{gap:.5rem;display:grid}.three__tools[hidden]{display:none}.three__range{font-size:var(--step--1);grid-template-columns:4.5rem 1fr;align-items:center;gap:.5rem;display:grid}.three__range input{width:100%;accent-color:var(--ink)}.three__rack-head{max-width:var(--measure);gap:.5rem;margin-top:clamp(3rem,7vw,5.5rem);display:grid}.three__rack-head h3{font-size:var(--step-3)}.three__rack-head p{color:var(--heather);margin:0}.three__rack{border-radius:var(--radius-stage);height:clamp(26rem,64vh,42rem);margin-top:1rem;position:relative}.three__rack:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}.three__rack canvas{position:absolute;inset:0}.three__close{z-index:1;position:absolute;top:.75rem;right:.75rem}.three__close[hidden]{display:none}.three__rack-ui{pointer-events:none;justify-items:center;gap:.4rem;display:grid;position:absolute;inset:auto 0 .75rem}.three__count{min-height:1.4em;color:var(--heather);letter-spacing:.08em;font-variant-numeric:tabular-nums;font-size:.75rem}.three__name{min-height:1.3em;font-family:var(--display);font-size:var(--step-1);letter-spacing:-.01em;font-weight:700}.three__count,.three__name{opacity:0;transition:opacity .25s}.three__count.is-shown,.three__name.is-shown{opacity:1}.three__actions{pointer-events:auto;gap:.5rem;display:flex}.three__actions .button[hidden]{visibility:hidden;opacity:0;display:inline-flex}.three__actions .button{transition:opacity .25s}.three__note{font-size:var(--step--1);text-align:center;margin:1.5rem 0 0}@media (width<=900px){.three__designer{grid-template-columns:1fr}.three__stage{height:clamp(26rem,68vh,38rem)}.three__rack{height:clamp(22rem,56vh,30rem)}}