#yarn-plan{--yp-ink:#234c48;--yp-paper:#f8f5ed;--yp-accent:#b75c43;color:#243c3a;line-height:1.55}#yarn-plan *{box-sizing:border-box}#yarn-plan [hidden]{display:none!important}#yarn-plan h2{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15;margin:.4rem 0}#yarn-plan h3{font-size:1.15rem;margin:0 0 .8rem}#yarn-plan p{margin:.5rem 0 1rem}.yp-eyebrow{letter-spacing:.12em;font-size:.75rem;font-weight:750;color:#735a37}.yp-presets{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}#yarn-plan button{font:inherit;cursor:pointer;white-space:normal;border:1px solid #afbfba;border-radius:10px;background:#fff;color:var(--yp-ink);padding:.65rem .9rem}#yarn-plan button:hover{background:#edf3ef}#yarn-plan button[aria-pressed=true]{border-color:var(--yp-ink);background:#e4efea}#yarn-plan button:disabled{opacity:.5;cursor:default}#yarn-plan :is(button,input,select):focus-visible{outline:3px solid #b65b41;outline-offset:3px}.yp-presets button{text-align:left;flex:1;min-width:230px}.yp-presets small{display:block;font-size:.8rem;font-weight:400}.yp-summary{background:var(--yp-ink);color:#fff;padding:1.2rem 1.5rem;border-radius:16px;margin:1rem 0 1.4rem}.yp-summary strong{display:block;font-size:1.9rem;line-height:1.15}.yp-summary p{margin:.4rem 0 0!important}.yp-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:1.4rem;align-items:start}.yp-controls,.yp-output{min-width:0}.yp-box{background:var(--yp-paper);padding:1.2rem;border-radius:14px;margin-bottom:1rem}.yp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .8rem}.yp-fields>label{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:.3rem;margin-bottom:.8rem;min-width:0}.yp-fields span{align-self:end;font-weight:650}.yp-fields small{font-size:.77rem;line-height:1.4;color:#526660}#yarn-plan input,#yarn-plan select{min-width:0;width:100%;font:inherit;color:#203d39;background:#fff;border:1px solid #a7b7ae;border-radius:7px;padding:.6rem;height:3rem}#yarn-plan input[type=color]{padding:.3rem}#yarn-plan select{padding-right:1.6rem}.yp-colour{padding:1rem 0;border-top:1px solid #cbd4c9}.yp-colour-head{display:flex;gap:.4rem;justify-content:space-between;align-items:center;margin-bottom:.6rem}.yp-colour-head strong{min-width:0;overflow-wrap:anywhere}.yp-colour-head button{padding:.3rem .6rem!important}.yp-note{font-size:.85rem;color:#526660}.yp-preview{background:#f7f2e7;border-radius:14px;padding:1rem;text-align:center}.yp-preview svg{width:100%;max-height:400px;display:block}.yp-preview p{font-size:.82rem}.yp-shopping{display:grid;gap:.7rem;margin:1rem 0}.yp-purchase{border-left:7px solid var(--swatch);background:#f4f7f3;padding:1rem;border-radius:0 12px 12px 0;overflow-wrap:anywhere}.yp-purchase h4{font-size:1rem;margin:0 0 .35rem}.yp-purchase strong{font-size:1.35rem}.yp-purchase dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .7rem;font-size:.85rem;margin:.65rem 0 0}.yp-purchase dt,.yp-purchase dd{margin:0}.yp-purchase dd{text-align:right}.yp-actions{display:flex;gap:.6rem;flex-wrap:wrap}.yp-equation{font-size:.85rem;background:#fff;padding:.7rem;border-radius:8px}#yp-error{border-left:4px solid #a13926;padding:1rem;background:#fff0e7;color:#742a1c}#yarn-plan details{margin:1rem 0}#yarn-plan summary{cursor:pointer;font-weight:700;padding:.6rem 0}.yp-notes{margin-top:1.5rem}.yp-notes p{font-size:.9rem}#yp-status{font-size:.85rem}
@media(max-width:900px){.yp-workspace{grid-template-columns:1fr}.yp-output{order:2}.yp-preview svg{max-height:360px}}
@media(max-width:420px){.yp-fields{grid-template-columns:1fr}.yp-box{padding:1rem}.yp-summary{padding:1.1rem}.yp-purchase dl{grid-template-columns:1fr}.yp-purchase dd{text-align:left;font-weight:650}}
@media(prefers-reduced-motion:no-preference){#yarn-plan button{transition:background .15s}}
#yarn-plan .yp-summary p{color:#f3f7f1}#yarn-plan .yp-summary a{color:#fff;text-decoration:underline;font-size:.85rem}

#yarn-plan [data-focus-colour]{cursor:pointer}#yarn-plan [data-focus-colour]:is(:hover,:focus){stroke:#203d39;stroke-width:3;outline:none}