.s-helper{display:flex;flex-direction:column;gap:2rem;width:min(100% - 1rem * 2,60rem);margin-inline:auto;padding-block:3rem 4rem}@media(min-width:768px){.s-helper{gap:2.5rem;padding-top:4rem}}.s-helper:after{content:"";position:fixed;top:.75rem;right:.75rem;bottom:.75rem;left:.75rem;border:2px dashed #292929;border-radius:1.25rem;background:#faf7f499;opacity:0;pointer-events:none;transition:opacity .2s}.s-helper.is-dragging:after{opacity:1}.s-helper[data-state=ready] .s-helper__drop,.s-helper[data-state=ready] .s-helper__samples{display:none}.s-helper__head{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}.s-helper__logo img{display:block;width:min(100%,16.25rem);height:auto}.s-helper__intro{font-size:1rem;line-height:1.5rem;color:#6b6256}@media(min-width:768px){.s-helper__intro{font-size:1.125rem;line-height:1.5rem}}.s-helper__label{font-size:.75rem;line-height:1rem;margin-bottom:.75rem;padding:0;color:#6b6256;letter-spacing:.08em;text-transform:uppercase}.s-helper__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:20rem;padding:2rem;border:1.5px dashed #c9c1b8;border-radius:1.25rem;background:#fff;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}@media(hover:hover){.s-helper__drop:hover{border-color:#292929}}.s-helper__drop:focus-within{outline:2px solid #292929;outline-offset:3px}.is-dragging .s-helper__drop{border-color:#292929;background:#ede7e1}@media(min-width:768px){.s-helper__drop{min-height:25rem}}.s-helper__input{position:absolute;width:1px;height:1px;opacity:0}.s-helper__drop-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin-bottom:.5rem;border-radius:50%;background:#ede7e1;color:#292929;font-size:1.5rem}.s-helper__drop-title{font-family:Ogg Text,Times New Roman,serif;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;color:#292929}.s-helper__drop-hint{font-size:.875rem;line-height:1.25rem;color:#6b6256}.s-helper__samples{display:flex;flex-direction:column;align-items:center;gap:.75rem}.s-helper__sample-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.s-helper__sample{display:block;width:4rem;aspect-ratio:1;overflow:hidden;border-radius:.5rem;transition:transform .2s}.s-helper__sample img{width:100%;height:100%;object-fit:cover}@media(hover:hover){.s-helper__sample:hover{transform:translateY(-2px)}}.s-helper__results{display:flex;flex-direction:column;gap:1.5rem}.s-helper__results[hidden]{display:none}.s-helper__preview{display:grid;overflow:hidden;border-radius:1.25rem;background:var(--helper-bg, #ede7e1);color:var(--helper-text, #292929);transition:background .32s,color .32s}@media(min-width:768px){.s-helper__preview{grid-template-columns:1fr 1fr;min-height:26.25rem}}.s-helper__preview-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;padding:2rem 1.5rem}@media(min-width:768px){.s-helper__preview-panel{padding:3rem}}.s-helper__preview-eyebrow{font-size:.75rem;line-height:1rem;letter-spacing:.08em;text-transform:uppercase}.s-helper__preview-title{font-family:Ogg Text,Times New Roman,serif;font-weight:300;font-size:clamp(2rem,4vw,3rem);line-height:1.05;text-wrap:balance}.s-helper__preview-meta{font-size:1rem;line-height:1.5rem;max-width:40ch;text-wrap:pretty}.s-helper__preview-panel [hidden]{display:none}.s-helper__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.s-helper__ctas:empty{display:none}.s-helper__ctas--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%;max-width:30rem}.s-helper__ctas--grid .c-button{font-size:.875rem;line-height:1.25rem;justify-content:space-between;gap:.25rem;padding:.75rem}.s-helper__ctas--grid .c-button span{overflow:hidden;text-overflow:ellipsis}.s-helper__ctas--grid .c-button app-icon{flex-shrink:0}@media(min-width:768px){.s-helper__ctas--grid .c-button{padding:.75rem 1rem}}.s-helper__preview-image{order:-1;width:100%;height:100%;max-height:26.25rem;object-fit:cover}@media(min-width:768px){.s-helper__preview-image{order:0;max-height:none}}.s-helper__a11y .s-helper__label{margin-bottom:.5rem}.s-helper__a11y-row{display:flex;align-items:flex-start;gap:.75rem}.s-helper__a11y-text{font-size:.875rem;line-height:1.25rem;color:#3a342f;text-wrap:pretty}.s-helper__badge{font-size:.75rem;line-height:1rem;flex-shrink:0;margin-top:2px;padding:2px .5rem;border-radius:2rem;background:#5a8a56;color:#fff;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.s-helper__badge[data-level=ok]{background:#e5b178;color:#292929}.s-helper__badge[data-level=poor]{background:#c0443a}.s-helper__controls{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1.5rem}.s-helper__field{display:flex;flex-direction:column;gap:.75rem;min-width:0;margin:0;padding:0;border:0}.s-helper__field--swatches{flex:1 1 26.25rem}.s-helper__swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .5rem}@media(min-width:640px){.s-helper__swatches{grid-template-columns:repeat(6,1fr)}}.s-helper__swatch{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}.s-helper__swatch-chip{width:100%;height:4rem;margin-bottom:.5rem;border-radius:.75rem;box-shadow:inset 0 0 0 1px #2929290f;outline:2px solid transparent;outline-offset:2px;transition:transform .2s,outline-color .2s}@media(hover:hover){.s-helper__swatch-chip:hover{transform:translateY(-2px)}}.s-helper__swatch-chip[aria-pressed=true]{outline-color:#292929}.s-helper__swatch-copy{position:absolute;top:.25rem;right:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:#ffffffd9;color:#292929;font-size:.875rem;transition:background .2s,transform .2s}@media(hover:hover){.s-helper__swatch-copy:hover{background:#fff;transform:scale(1.08)}}.s-helper__swatch-name{font-size:.8125rem;line-height:1rem;color:#6b6256}.s-helper__swatch:has([aria-pressed=true]) .s-helper__swatch-name{color:#292929}.s-helper__swatch-hex{font-size:.8125rem;line-height:1rem;color:#292929;font-family:ui-monospace,SF Mono,Menlo,monospace}.s-helper__modes{display:inline-flex;padding:.25rem;border:1px solid #ede7e1;border-radius:2rem;background:#fff}.s-helper__modes button{padding:.5rem 1.25rem;border-radius:2rem;color:#6b6256;font-family:Ogg Text,Times New Roman,serif;transition:background .2s,color .2s}.s-helper__modes button[aria-pressed=true]{background:#292929;color:#fff}.s-helper__content{margin-top:1rem}.s-helper__inputs{display:grid;gap:1rem}@media(min-width:768px){.s-helper__inputs{grid-template-columns:1fr 1fr}}.s-helper__input-field{display:flex;flex-direction:column;gap:.5rem}.s-helper__input-field>span{font-size:.875rem;line-height:1.25rem;color:#292929}.s-helper__input-field>span small{font-size:.8125rem;line-height:1rem;margin-left:.5rem;color:#6b6256}.s-helper__input-field input,.s-helper__input-field textarea{font-size:1rem;line-height:1.5rem;width:100%;padding:.75rem 1rem;border:1px solid #ede7e1;border-radius:.5rem;background:#fff;color:#292929;font:inherit;resize:vertical;transition:border-color .2s}.s-helper__input-field input:focus,.s-helper__input-field textarea:focus{border-color:#292929;outline:none}@media(min-width:768px){.s-helper__input-field--wide{grid-column:1/-1}}.s-helper__cta-inputs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}@media(min-width:768px){.s-helper__cta-inputs{grid-template-columns:repeat(4,1fr)}}.s-helper__again{display:flex;justify-content:center;margin-top:1rem}.s-helper__toast{font-size:.875rem;line-height:1.25rem;position:fixed;bottom:1.5rem;left:50%;z-index:10;padding:.75rem 1.25rem;border-radius:2rem;background:#292929;color:#fff;opacity:0;pointer-events:none;transform:translate(-50%,.5rem);transition:opacity .2s,transform .2s cubic-bezier(.32,.72,0,1)}.s-helper__toast.is-visible{opacity:1;transform:translate(-50%)}