@font-face{font-family:Onest;src:url(assets/onest-cyrillic.woff2) format('woff2');unicode-range:U+0400-052F;font-display:swap}@font-face{font-family:Onest;src:url(assets/onest-latin.woff2) format('woff2');font-display:swap;unicode-range:U+0000-024F}*{box-sizing:border-box}html,body{margin:0}body{font:16px/1.5 Onest,Arial,sans-serif;color:#20211e;background:#fff}button,input{font:inherit}button{min-height:44px;padding:10px 18px;background:#fff;border:1px solid #c9cbc4;color:#20211e;cursor:pointer;border-radius:4px}button[aria-pressed=true],button.primary{background:#20211e;color:#fff;border-color:#20211e}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #d30805;outline-offset:3px}.demo{padding:24px;max-width:1200px;margin:auto}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6d7166;margin:0 0 8px}.demo h1{font-size:clamp(24px,3vw,36px);font-weight:400;line-height:1.15;letter-spacing:-.03em;margin:0 0 12px}.note{font-size:14px;color:#63675c;margin:12px 0}.stage{background:#f6f7f4;border:1px solid #e0e2dc;border-radius:8px;overflow:hidden;position:relative;margin:18px 0}.stage canvas{display:block;width:100%;height:100%}.hero-stage{height:340px;background:#ebf1ff url(assets/flax.webp) center/340px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.range{display:flex;gap:14px;align-items:center;flex:1;min-width:180px}.range input{width:100%;accent-color:#d30805;min-height:44px}.range output{min-width:3em;text-align:right;font-variant-numeric:tabular-nums}.steps{display:flex;gap:24px;padding:12px 0;border-top:1px solid #e0e2dc;color:#63675c;flex-wrap:wrap}.steps b{color:#20211e;font-weight:400}.try-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(200px,.8fr);gap:24px;align-items:center}.try-stage{aspect-ratio:1;max-height:490px;margin:0}.try-stage svg{display:block;width:100%;height:100%}.try-controls h2{font-size:15px;font-weight:400;margin:20px 0 10px}.swatches{display:flex;gap:10px}.swatch{padding:4px;width:64px;height:64px;min-height:64px;background:#fff!important;border:2px solid transparent}.swatch[aria-pressed=true]{border-color:#d30805}.swatch img{width:100%;height:100%;object-fit:cover}.choices{display:flex;gap:8px;flex-wrap:wrap}.pack-stage{height:370px;max-width:100%;touch-action:pan-y;background:#fff}.pack-stage canvas{position:absolute;inset:0}.split-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#20211e;pointer-events:none}.labels{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;pointer-events:none}.labels span{background:#fff;padding:4px 10px;font-size:13px;border:1px solid #e0e2dc}.error{color:#a32612}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#fff9;pointer-events:none}.ready .loading{display:none}@media(max-width:520px){.demo{padding:16px}.hero-stage{height:330px}.try-grid{grid-template-columns:1fr;gap:8px}.try-stage{width:100%;max-height:none}.try-controls h2{margin-top:10px}.pack-stage{height:330px}.toolbar{gap:8px}.steps{gap:8px 20px}.note{font-size:13px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}