.scp-shade{margin:.4rem 0 1.6rem}
.scp-shade__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scp-shade__ui{display:grid;gap:1.4rem;padding:1.6rem;border:.1rem solid rgba(var(--color-foreground),.14);border-radius:.6rem;background:rgb(var(--color-background))}
.scp-shade__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.2rem}
.scp-shade__title{margin:0;font-family:var(--font-heading-family);font-weight:400;font-size:2.1rem;line-height:1.2}
.scp-shade__sub{margin:0;font-size:1.3rem;color:rgba(var(--color-foreground),.72)}
.scp-shade__top{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1.4rem;align-items:center}
.scp-shade__mini{position:relative;aspect-ratio:1/1;background:#fff;border-radius:.4rem;overflow:hidden;border:.1rem solid rgba(var(--color-foreground),.08)}
.scp-shade__mini img,.scp-shade__mini svg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.scp-shade__sum{display:grid;gap:.4rem}
.scp-shade__picked{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1.2rem;margin:0;font-size:1.5rem;font-weight:600;line-height:1.35}
.scp-shade__meta{margin:0;font-size:1.3rem;color:rgba(var(--color-foreground),.72)}
.scp-shade__note{margin:0;font-size:1.2rem;color:rgba(var(--color-foreground),.65)}
@media screen and (min-width:750px){.scp-shade__mini,.scp-shade__note{display:none}.scp-shade__top{grid-template-columns:minmax(0,1fr)}}
.scp-shade__group{display:grid;gap:.7rem}
.scp-shade__lbl{margin:0;font-size:1.3rem;color:rgba(var(--color-foreground),.72)}
.scp-shade__lbl b{color:rgb(var(--color-foreground));font-weight:600}
.scp-shade__shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.scp-shade__sizes,.scp-shade__cols{display:flex;flex-wrap:wrap;gap:.8rem}
.scp-shade__shapes button,.scp-shade__sizes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:4.8rem;padding:.6rem 1rem;border:.1rem solid rgba(var(--color-foreground),.2);border-radius:.6rem;background:#fff;color:rgb(var(--color-foreground));font:inherit;font-size:1.3rem;line-height:1.2;cursor:pointer}
.scp-shade__sizes button{min-width:7.4rem}
.scp-shade__sizes button span{font-weight:600;font-size:1.4rem}
.scp-shade__shapes button[aria-pressed=true],.scp-shade__sizes button[aria-pressed=true]{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .1rem rgb(var(--color-foreground))}
.scp-shade__fit{font-size:1.1rem}
.scp-shade__fit--good{color:#2F5A33}
.scp-shade__fit--roomy{color:rgba(var(--color-foreground),.72)}
.scp-shade__fit--small,.scp-shade__fit--wide{color:#8A4B12}
.scp-shade__cols button{position:relative;width:4.4rem;height:4.4rem;padding:0;border:.2rem solid transparent;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}
.scp-shade__cols button span{width:3.2rem;height:3.2rem;border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.2)}
.scp-shade__cols button[aria-pressed=true]{border-color:rgb(var(--color-foreground))}
.scp-shade__cols button:disabled{cursor:not-allowed;opacity:.55}
.scp-shade__cols button:disabled:after{content:'';position:absolute;width:4rem;height:.15rem;background:#8F172E;transform:rotate(-45deg)}
.scp-shade__ui button:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}
.scp-shade__verdict{margin:0;padding:1rem 1.2rem;border-radius:.6rem;font-size:1.35rem;line-height:1.45}
.scp-shade__verdict b{font-weight:600}
.scp-shade__verdict--good{background:#E3EADB;color:#2F4A2A}
.scp-shade__verdict--roomy{background:#fff;border:.1rem solid rgba(var(--color-foreground),.12)}
.scp-shade__verdict--small,.scp-shade__verdict--wide{background:#F6E9D8;color:#6E3D0E}
.scp-shade__total{margin:0;font-size:1.4rem}
.scp-shade__total b{font-weight:600}
.scp-shade__total span{color:rgba(var(--color-foreground),.72)}
.scp-shade__ship{margin:-.6rem 0 0;font-size:1.3rem;line-height:1.45;color:rgba(var(--color-foreground),.72)}
.scp-shade__ship b{font-weight:600;color:rgb(var(--color-foreground))}
.scp-shade__base{margin-top:1rem}
.scp-render-on{background:#fff}
.scp-render__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible!important}
.scp-shade__mini svg{overflow:visible!important}
.scp-zoomed{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.scp-render__note{position:absolute;right:1rem;bottom:1rem;z-index:4;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;width:11rem;padding:.7rem;border-radius:1rem;background:rgba(255,255,255,.95);border:.1rem solid rgba(var(--color-foreground),.14);font-size:1.2rem;line-height:1.3;text-align:center;color:rgb(var(--color-foreground))}
.scp-render__note[hidden]{display:none}
.scp-render__note button{flex:none;min-height:3.6rem;padding:0 1rem;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:99rem;background:#fff;font:inherit;font-size:1.2rem;font-weight:600;color:inherit;cursor:pointer}
.scp-render__note button:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}