@layer components{[data-tool=cross-stitch-calculator]{--result-h:36.5rem}@media (width>=64rem){[data-tool=cross-stitch-calculator]{--result-h:26.5rem}}.xs[data-xs-mode=size] [data-xs-panel]:not([data-xs-panel~=size]),.xs[data-xs-mode=fit] [data-xs-panel]:not([data-xs-panel~=fit]){display:none}.xs-help{color:var(--color-ink-soft);margin:-.5rem 0 1rem;font-size:1rem}.xs-optional{color:var(--color-ink-soft);font-weight:400}.xs-colors textarea{width:100%;min-width:0;font:inherit;resize:vertical;font-variant-numeric:tabular-nums;min-height:8.5rem;color:var(--color-ink);background:0 0;border:0;flex:1;padding:.6rem .75rem;font-size:1.0625rem;line-height:1.5}.xs-colors textarea:focus{outline:none}.xs-echo{border-left:4px solid var(--color-madder);background:var(--color-linen);flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-top:1rem;margin-bottom:0;padding:.6rem .8rem;font-weight:700;display:flex;position:relative}.xs-echo__label{color:var(--color-ink-soft);font-weight:400}.xs-echo__short{display:none}[data-xs-stale] .xs-echo [data-out=sticky],[data-xs-stale] .xs-echo [data-out=stickyShort]{text-decoration:line-through}@media (width>=64rem){.xs-echo{display:none}}[data-tool=cross-stitch-calculator] form[data-tool-form]{container-type:inline-size}@container (width<=16rem){.xs-echo__label,.xs-echo__full{display:none}.xs-echo__short{font-size:.85em;display:inline}}.xs .tool-field,.xs .tool-fieldset{scroll-margin-bottom:5rem}.xs-note{color:var(--color-on-walnut);margin-top:.9rem;font-size:1rem}.xs-note:empty{display:none}.xs-figure svg{max-height:22rem}.data-table .xs-caption{caption-side:top;text-align:left;padding:.7rem .85rem;font-weight:700}.xs-source{color:var(--color-ink-soft);margin-top:.6rem;font-size:1rem}.tool-method h3{font-size:var(--text-step-1);margin-top:1.5rem}.xs-static{margin-bottom:2rem}.xs-faq h3{margin-top:1.25rem}.xs-related-title{font-size:var(--text-step-2);margin-bottom:1rem}.xs-related{gap:.75rem;padding:0;list-style:none;display:grid}.xs-related a{min-height:var(--tap);border:1px solid var(--color-rule-strong);background:var(--color-card);color:var(--color-ink);gap:.25rem;padding:.9rem 1rem;text-decoration:none;display:grid}.xs-related a span{color:var(--color-ink-soft);font-size:1rem}.xs-related a:hover strong{text-decoration:underline}@media (width>=48rem){.xs-related{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=47.99rem){.xs-stack{overflow:visible}.xs-stack table,.xs-stack tbody,.xs-stack tr,.xs-stack caption{width:100%;display:block}.xs-stack thead{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.xs-stack tr{border-bottom:1px solid var(--color-rule)}.xs-stack th[scope=row]{border-bottom:0;padding-bottom:.2rem;display:block;position:static}.xs-stack td{border-bottom:0;justify-content:space-between;gap:1rem;padding-block:.25rem;display:flex}.xs-stack td:before{content:attr(data-label);color:var(--color-ink-soft);white-space:nowrap}.xs-stack tr>:last-child{padding-bottom:.7rem}.xs-static th,.xs-static td{padding-inline:.55rem}.xs-stack tbody th,.xs-stack td{white-space:normal}.xs-stack td{flex-wrap:wrap}.xs-allfab:not(:has([data-xs-all]:checked)) .xs-stack tbody tr:not([data-highlight]):not([data-xs-cmp]){display:none}}.xs-allfab__toggle{margin-bottom:.75rem}@media (width>=48rem){.xs-allfab__toggle{display:none}}.xs-readas{border-left:4px solid var(--color-madder);background:var(--color-linen);color:var(--color-ink);margin-top:.5rem;padding:.5rem .75rem;font-size:1rem}.xs-readas:empty{display:none}}@media print{[data-tool=cross-stitch-calculator][data-print-sheet] .tool{flex-direction:column;display:flex}[data-tool=cross-stitch-calculator][data-print-sheet] .tool__result{order:-2}[data-tool=cross-stitch-calculator][data-print-sheet] .tool__list{order:-1}[data-tool=cross-stitch-calculator][data-print-sheet] .shopping-list li{gap:4mm;padding:.6mm 0}[data-tool=cross-stitch-calculator][data-print-sheet] .tool-result__facts{gap:.4mm 4mm}[data-tool=cross-stitch-calculator][data-print-sheet] .tool-result>*+*{margin-top:1mm}[data-tool=cross-stitch-calculator][data-print-sheet] .xs-stack tbody tr:not([data-highlight]):not([data-xs-cmp]){display:none}}