:root{--c-bg: #faf7f3;--c-ink: #241f2b;--c-accent: #6e5a92;--c-text: #3f3949;--c-text-soft: #574f63;--c-muted: #5c5468;--c-line: #e6ded4;--c-selection: #ded2f0;--c-row-a: #f3eefa;--c-export-bg: #ffffff;--c-export-credit: #8a8492;--c-brand-wing: #c5b2e4;--c-brand-wing-inner: #8a6fb8;--c-brand-eye: #fdfbf8;--c-error: #a3324a;--yarn-red: #c62828;--yarn-orange: #e8710a;--yarn-yellow: #c49000;--yarn-green: #2e7d32;--yarn-blue: #1565c0;--yarn-purple: #6a1b9a;--yarn-pink: #d81b60;--yarn-brown: #6d4c41;--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;--font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;--ls-micro: .14em;--sp-0: .25rem;--sp-1: .375rem;--sp-2: .625rem;--sp-3: .875rem;--radius-md: 8px;--radius-pill: 999px;--stitches-width: min(17rem, 80vw);--inspector-width: min(12rem, 40vw);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--c-text);background:var(--c-bg);overflow:hidden}:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}button{min-block-size:44px;min-inline-size:44px;font:inherit;cursor:pointer}[hidden]{display:none!important}.app{display:flex;flex-direction:column;block-size:100dvh}.consent{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;max-block-size:60dvh;padding:1rem;overflow-y:auto;border-block-end:1px solid var(--c-line);background:var(--c-bg)}.consent:focus{outline:none}.consent__text{display:flex;flex:1 1 30rem;flex-direction:column;gap:.375rem;min-inline-size:0}.consent__title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:400;color:var(--c-ink)}.consent__body,.consent__current{margin:0;max-inline-size:72ch;font-size:.875rem;line-height:1.6}.consent__body a{color:var(--c-ink);text-underline-offset:.2em}.consent__body a:hover{color:var(--c-accent)}.consent__current{color:var(--c-muted)}.consent__actions{display:flex;flex-wrap:wrap;gap:.5rem}.consent__choice{min-inline-size:9rem;padding:.6rem 1.25rem;border:0;background:var(--c-ink);color:var(--c-bg);font-size:.8125rem;font-weight:500;letter-spacing:var(--ls-micro);text-transform:uppercase}.consent__choice:hover{background:var(--c-accent)}@media not (min-width:30rem){.consent__actions{inline-size:100%}.consent__choice{flex:1 1 0;min-inline-size:0}}.panel__consent{display:block;margin-block-start:var(--sp-3);padding:var(--sp-1) 0;border:0;background:transparent;color:var(--c-text-soft);font-size:.875rem;text-decoration:underline;text-underline-offset:.2em}.panel__consent:hover{color:var(--c-accent)}.panel__consent+.panel__consent{margin-block-start:0}.wip{flex:0 0 auto;margin:0;padding:.35rem var(--sp-3);border-block-end:1px solid var(--c-line);background:var(--c-row-a);color:var(--c-ink);font-size:.8125rem;text-align:center}.wip__mail{color:var(--c-accent);font-weight:600}.bar{display:flex;align-items:center;gap:var(--sp-1) var(--sp-3);padding:var(--sp-1) var(--sp-3);border-block-end:1px solid var(--c-line);background:var(--c-bg)}.bar__lead{display:flex;align-items:center;gap:var(--sp-2)}.bar__title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:400;color:var(--c-ink);white-space:nowrap}.brand-mark{flex-shrink:0;inline-size:2rem;block-size:2rem;margin-inline-end:-.25rem}.brand-mark__wing{fill:var(--c-brand-wing)}.brand-mark__wing-inner{fill:var(--c-brand-wing-inner)}.brand-mark__body{fill:var(--c-ink)}.brand-mark__eye{fill:var(--c-brand-eye)}.home{display:inline-flex;gap:var(--sp-1);align-items:center;min-block-size:44px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--c-line);border-radius:var(--radius-pill);color:var(--c-text);font-size:.875rem;text-decoration:none}.home:hover{border-color:var(--c-accent);color:var(--c-accent)}.home:active{background:var(--c-selection)}.home__icon{inline-size:1.125rem;block-size:1.125rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon{inline-size:1.25rem;block-size:1.25rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tools{display:flex;flex:1 1 auto;align-items:center;gap:var(--sp-2);min-inline-size:0}.tool{display:inline-grid;justify-items:center;align-content:center;gap:.1rem;min-inline-size:44px;min-block-size:44px;padding:.2rem var(--sp-0);border:1px solid var(--c-line);border-radius:var(--radius-md);background:transparent;color:var(--c-text-soft);font-size:.8125rem}.tool:hover:not(:disabled){border-color:var(--c-accent);color:var(--c-accent)}.tool:active:not(:disabled){background:var(--c-selection)}.tool:disabled{cursor:not-allowed;opacity:.5}.tool[aria-pressed=true],.tool.is-on{border-color:var(--c-accent);background:var(--c-selection);color:var(--c-accent)}.tool--zoom{min-inline-size:3.75rem;font-variant-numeric:tabular-nums}.tools__group{display:flex;gap:var(--sp-0);padding-inline-start:var(--sp-2);border-inline-start:1px solid var(--c-line)}.tool__label{font-size:.6875rem;line-height:1.1;white-space:nowrap}.tool__label--menu{display:inline-flex;align-items:center;gap:.125rem}.tool__caret{inline-size:.625rem;block-size:.625rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tool[aria-expanded=true] .tool__caret{transform:rotate(180deg)}.new-menu,.io-menu,.elements-menu,.menu__group{position:relative}.menu{position:absolute;z-index:40;inset-block-start:calc(100% + var(--sp-0));inset-inline-start:0;display:grid;min-inline-size:13rem;padding:var(--sp-0);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);box-shadow:0 6px 20px #241f2b24}.menu--sub{inset-block-start:calc(-1 * var(--sp-0) - 1px);inset-inline-start:calc(100% + var(--sp-0))}.menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);inline-size:100%;min-block-size:44px;padding:0 var(--sp-2);border:0;border-radius:var(--radius-md);background:transparent;color:var(--c-text);font:inherit;text-align:start;white-space:nowrap;cursor:pointer}.menu__item:hover,.menu__item:focus-visible,.menu__item[aria-expanded=true]{background:var(--c-row-a);color:var(--c-ink)}.menu__item[aria-disabled=true]{color:var(--c-muted);cursor:not-allowed}.menu__item[aria-disabled=true]:hover{background:transparent}.menu__soon{font-size:.6875rem;letter-spacing:var(--ls-micro);text-transform:uppercase}.menu--end{inset-inline-start:auto;inset-inline-end:0;inline-size:max-content}.menu__item[data-tip]{position:relative}.menu__item[data-tip]:after{content:attr(data-tip);position:absolute;z-index:30;inset-block-start:50%;inset-inline-end:calc(100% + var(--sp-2));display:none;inline-size:max-content;max-inline-size:16rem;padding:var(--sp-0) var(--sp-2);border-radius:var(--radius-md);background:var(--c-ink);color:var(--c-bg);font-size:.75rem;line-height:1.3;text-transform:none;white-space:normal;pointer-events:none;translate:0 -50%}@supports (content: "a" / ""){.menu__item[data-tip]:after{content:attr(data-tip) / ""}}@media(min-width:40rem){.menu__item[data-tip]:hover:after,.menu__item[data-tip]:focus-visible:after{display:block}}.dialog{inline-size:min(20rem,calc(100vw - 2rem));padding:0;border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-text);box-shadow:0 12px 32px #241f2b33}.dialog.glossary{inline-size:min(30rem,calc(100vw - 2rem));max-block-size:calc(100dvh - 2rem)}.glossary .dialog__form{grid-template-rows:auto minmax(0,1fr) auto;max-block-size:calc(100dvh - 2rem - 2px)}.glossary__body{display:grid;gap:var(--sp-3);min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.glossary__title{margin:0 0 var(--sp-1);font-size:.8125rem;font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--c-muted)}.glossary__list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-2);align-items:center;margin:0}.glossary__term{display:flex;align-items:center;gap:var(--sp-1);min-inline-size:5.5rem}.glossary__abbr{color:var(--c-ink);font-weight:700}.glossary__meaning{display:grid;margin:0}.glossary__name{color:var(--c-ink)}.glossary__structure{color:var(--c-text-soft);font-size:.8125rem}.dialog::backdrop{background:#241f2b4d}.grid-menu{position:fixed;inset:auto;inline-size:min(18rem,calc(100vw - 1rem));margin:0;border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-text);padding:0;box-shadow:0 12px 32px #241f2b33}.grid-menu .dialog__title{font-size:1.25rem}.dialog__form{display:grid;gap:var(--sp-3);padding:var(--sp-3) calc(var(--sp-3) + var(--sp-0))}.dialog__title{margin:0;color:var(--c-ink);font-family:var(--font-display);font-size:1.5rem;font-weight:400}.dialog__text{margin:0}.dialog__field{display:grid;gap:var(--sp-0);margin:0}.dialog__input{min-block-size:44px;padding:0 var(--sp-2);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-ink);font:inherit}.dialog__input:hover{border-color:var(--c-accent)}.dialog__input[aria-invalid=true]{border-color:var(--c-error)}.dialog__error{color:var(--c-error);font-size:.8125rem}.dialog__switch{display:flex;align-items:center;gap:var(--sp-2);min-block-size:44px;cursor:pointer}.dialog__switch input{appearance:none;position:relative;flex:none;inline-size:2.5rem;block-size:1.5rem;margin:0;border:1px solid var(--c-muted);border-radius:var(--radius-pill);background:var(--c-line);cursor:pointer;transition:background-color .15s}.dialog__switch input:before{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:calc(1.5rem - 6px);block-size:calc(1.5rem - 6px);border-radius:50%;background:var(--c-muted);transition:transform .15s}.dialog__switch input:checked{border-color:var(--c-accent);background:var(--c-accent)}.dialog__switch input:checked:before{background:var(--c-bg);transform:translate(1rem)}.dialog__switch:hover input{border-color:var(--c-accent)}@media(prefers-reduced-motion:reduce){.dialog__switch input,.dialog__switch input:before{transition:none}}.dialog__buttons{display:flex;justify-content:flex-end;gap:var(--sp-2)}.dialog__button{min-block-size:44px;padding:0 var(--sp-3);border:1px solid var(--c-line);border-radius:var(--radius-pill);background:transparent;color:var(--c-text);font:inherit;cursor:pointer}.dialog__button:hover{border-color:var(--c-accent)}.dialog__button--main{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-bg)}.save__name{display:flex;align-items:center;gap:var(--sp-1)}.save__name .dialog__input{flex:1;min-inline-size:0}.save__extension{color:var(--c-text-soft)}.save__formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1)}.save__format{position:relative;display:grid;place-items:center;min-block-size:44px;border:1px solid var(--c-line);border-radius:var(--radius-md);color:var(--c-text);cursor:pointer}.save__format input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:inherit}.save__format:hover{border-color:var(--c-accent)}.save__format:has(input:checked){border-color:var(--c-accent);background:var(--c-accent);color:var(--c-bg)}.save__format:has(input:disabled){opacity:.45;cursor:not-allowed}.save__format:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:2px}.menu__arrow{font-size:1.125rem;line-height:1}.tools .tool[data-tip]{position:relative}.tools .tool[data-tip]:after{content:attr(data-tip);position:absolute;z-index:30;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:50%;display:none;inline-size:max-content;max-inline-size:22rem;padding:var(--sp-0) var(--sp-2);border-radius:var(--radius-md);background:var(--c-ink);color:var(--c-bg);font-size:.75rem;line-height:1.3;text-align:start;white-space:normal;pointer-events:none;translate:-50% 0}@supports (content: "a" / ""){.tools .tool[data-tip]:after{content:attr(data-tip) / ""}}.tools .tool[data-tip-align=start]:after{inset-inline-start:0;translate:none}.tools .tool[data-tip-align=end]:after{inset-inline-start:auto;inset-inline-end:0;translate:none}.tools .tool[data-tip]:hover:after,.tools .tool[data-tip]:focus-visible:after{display:block}.tools .tool[aria-expanded=true]:after{display:none}.pickers{display:inline-flex;gap:var(--sp-0);margin-inline-start:auto}.pickers__meta:empty{display:none}.picker{min-block-size:44px;padding:0 var(--sp-1);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:.875rem}.picker:hover{border-color:var(--c-accent)}.stage{position:relative;flex:1 1 auto;min-block-size:0}#board{position:absolute;inset-block:0;inset-inline:var(--stitches-width) var(--inspector-width);display:block;inline-size:calc(100% - var(--stitches-width) - var(--inspector-width));block-size:100%;touch-action:none}body.is-armed #board{cursor:crosshair}.start{--start-gap: var(--sp-3);position:absolute;inset-block:var(--start-gap);inset-inline:calc(var(--stitches-width) + var(--start-gap)) calc(var(--inspector-width) + var(--start-gap));display:grid;gap:var(--sp-2);block-size:fit-content;max-block-size:calc(100% - 2 * var(--start-gap));max-inline-size:36rem;margin:auto;padding:var(--sp-3) calc(var(--sp-3) + var(--sp-1));overflow-y:auto;border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-text);box-shadow:0 12px 32px #241f2b1f}.start[hidden]{display:none}.start__title{margin:0;color:var(--c-ink);font-family:var(--font-display);font-size:1.75rem;font-weight:400;line-height:1.15}.start__lead,.start__tip{margin:0}.start__heading{margin:var(--sp-1) 0 0;font-size:.8125rem;font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--c-muted)}.start__types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}.start__type{min-block-size:44px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--c-accent);border-radius:var(--radius-pill);background:var(--c-accent);color:var(--c-bg);font:inherit;font-weight:700;cursor:pointer}.start__type:hover{background:var(--c-ink);border-color:var(--c-ink)}.start__examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin:0;padding:0;list-style:none}.start__example{display:grid;gap:var(--sp-1);justify-items:center;inline-size:100%;block-size:100%;padding:var(--sp-1) var(--sp-1) var(--sp-2);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-export-bg);color:var(--c-text);font:inherit;font-size:.875rem;line-height:1.25;cursor:pointer}.start__example:hover{border-color:var(--c-accent)}.start__example[aria-busy=true]{opacity:.6;cursor:progress}.start__example img{display:block;inline-size:100%;max-inline-size:9rem;block-size:auto;aspect-ratio:1}.start__tip{padding-block-start:var(--sp-2);border-block-start:1px solid var(--c-line);color:var(--c-text-soft)}.start__thyone{color:var(--c-text-soft)}.start__thyone a{color:var(--c-ink);text-underline-offset:.2em}.start__thyone a:hover{color:var(--c-accent)}@media(not (min-height:32rem))and (orientation:landscape){.start{gap:var(--sp-1);max-inline-size:44rem;padding-block:var(--sp-2)}.start__title{font-size:1.375rem}.start__types{grid-template-columns:repeat(4,minmax(0,1fr))}.start__type{padding-inline:var(--sp-1)}.start__example{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:start}.start__example img{inline-size:3.5rem}}.stitches{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--stitches-width);scroll-padding-block:var(--sp-3);padding:var(--sp-3);overflow-y:auto;border-inline-end:1px solid var(--c-line);background:var(--c-bg)}.inspector{position:absolute;inset-block:0;inset-inline-end:0;display:flex;flex-direction:column;inline-size:var(--inspector-width);padding:var(--sp-3);overflow-y:auto;border-inline-start:1px solid var(--c-line);background:var(--c-bg)}.stage[data-stitches=closed]{--stitches-width: 0px}.stage[data-inspector=closed]{--inspector-width: 0px}.stage[data-stitches=closed] .stitches,.stage[data-inspector=closed] .inspector{display:none}.stage[data-empty]{--stitches-width: 0px;--inspector-width: 0px}.stage[data-empty]>.inspector,.stage[data-empty]>.panel-toggle,.stage[data-empty]>.stitches>:not(.panel__consent,.version){display:none}.stage[data-empty]>.stitches{inset-block:auto 0;inline-size:auto;overflow:visible;border:0;background:transparent}.stage[data-empty]>.stitches>.version{border:0;background:transparent}.panel-toggle{position:absolute;inset-block-start:var(--sp-0);z-index:21;display:grid;place-items:center;padding:0;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-text-soft)}.panel-toggle:hover{border-color:var(--c-accent);color:var(--c-accent)}.panel-toggle .icon{inline-size:16px;block-size:16px;stroke-width:4}.panel-toggle[aria-expanded=false] .icon{rotate:180deg}.panel-toggle--stitches{inset-inline-start:max(0px,var(--stitches-width) - 1px);border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.panel-toggle--inspector{inset-inline-end:max(0px,var(--inspector-width) - 1px);border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.colors{margin-block-start:auto;padding-block-start:var(--sp-3)}.element__choices{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--arrange-gap)}.element__choices .arrange__button{min-block-size:44px}.element__bold{font-weight:700}.element__italic{font-style:italic}.element__underline{text-decoration:underline}.element__text{inline-size:100%;min-block-size:44px;padding:var(--sp-1);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:.875rem;text-align:start;resize:vertical}.element__text:hover{border-color:var(--c-accent)}.element__font{inline-size:100%}.text-editor{position:fixed;z-index:10;margin:0;padding:0;border:0;outline:1px dashed var(--c-accent);background:transparent;color:var(--c-ink);line-height:1.2;white-space:pre;overflow:hidden;resize:none;transform-origin:0 0}.colors__frame{padding:var(--sp-2);border:1px solid var(--c-line);border-radius:var(--radius-md)}.colors__swatch:disabled{outline:1px dashed var(--c-muted);background:transparent;cursor:default}.colorpick__field{position:relative;block-size:10rem;border-radius:var(--radius-md);background:linear-gradient(to top,black,transparent),linear-gradient(to right,white,transparent),var(--hue, red);touch-action:none;cursor:crosshair}.colorpick__knob{position:absolute;inline-size:1rem;block-size:1rem;border:2px solid white;border-radius:var(--radius-pill);box-shadow:0 0 0 1px var(--c-ink);translate:-50% -50%;pointer-events:none}.colorpick__hue{inline-size:100%;block-size:1.5rem;margin:0;border-radius:var(--radius-pill);background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);appearance:none}.colorpick__hue::-webkit-slider-thumb{inline-size:1.5rem;block-size:1.5rem;border:2px solid var(--c-ink);border-radius:var(--radius-pill);background:#fff;appearance:none}.colorpick__hue::-moz-range-thumb{inline-size:1.25rem;block-size:1.25rem;border:2px solid var(--c-ink);border-radius:var(--radius-pill);background:#fff}.colorpick__row{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--sp-2);margin:0}.colorpick__preview{inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-pill);outline:1px solid var(--c-line);background:var(--swatch)}.colorpick__hex{min-inline-size:0;font-variant-numeric:tabular-nums}.colors__swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1)}.colors__swatch{min-block-size:0;min-inline-size:0;aspect-ratio:1;border:2px solid var(--c-bg);border-radius:var(--radius-pill);outline:1px solid var(--c-line);background:var(--swatch)}.colors__swatch:not(:disabled):hover{outline-color:var(--c-accent)}.colors__swatch[aria-pressed=true]{outline:3px solid var(--c-accent)}.colors__swatch:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}.colors__swatch[aria-pressed=mixed]{outline:2px dashed var(--c-accent)}.colors__swatch[aria-pressed=mixed]:focus-visible{outline-offset:3px}.colors__custom.is-on{border-color:var(--c-accent);background:var(--c-selection);color:var(--c-accent)}.arrange{--arrange-gap: var(--sp-0);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}.arrange__buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--arrange-gap)}.arrange__button{display:grid;justify-items:center;align-content:center;gap:.1rem;padding:var(--sp-0);border:1px solid var(--c-line);border-radius:var(--radius-md);background:transparent;color:var(--c-ink);font-size:.8125rem}.arrange__button:hover{border-color:var(--c-accent);color:var(--c-accent)}.arrange__button:active,.arrange__button[aria-pressed=true]{border-color:var(--c-accent);background:var(--c-selection);color:var(--c-accent)}.arrange__button[aria-pressed=mixed]:not(:disabled),.colors__custom.is-mixed{border-color:var(--c-accent);border-style:dashed;color:var(--c-accent)}.arrange__button:disabled{opacity:.45;cursor:not-allowed}.inspector>.element{margin-block-start:calc(var(--sp-3) + var(--sp-2))}.arrange__options,.arrange__setting{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}.arrange__options{--caret: 7px;--frame: 1px;--column: 0;--caret-at: calc( (100% + 2 * var(--frame) - var(--arrange-gap)) / 2 * (var(--column) + .5) + var(--column) * var(--arrange-gap) - var(--frame) );position:relative;margin-block-start:var(--caret);padding:var(--sp-1) var(--sp-2) var(--sp-2);border:var(--frame) solid var(--c-accent);border-radius:var(--radius-md);background:var(--c-bg)}#arrange-around-options{--column: 1}.arrange__options:before,.arrange__options:after{content:"";position:absolute;inset-inline-start:var(--caret-at);border:var(--caret) solid transparent;border-block-start:0;translate:-50% 0}.arrange__options:before{inset-block-end:100%;border-block-end-color:var(--c-accent)}.arrange__options:after{inset-block-end:calc(100% - var(--frame));border-block-end-color:var(--c-bg)}.arrange__label{color:var(--c-text-soft);font-size:.8125rem}.arrange__hint{margin:0;color:var(--c-text-soft);font-size:.8125rem;line-height:1.4}.arrange__pair{display:flex;align-items:center;gap:var(--sp-1)}.arrange__range{flex:1 1 auto;min-inline-size:0;min-block-size:44px;margin:0;accent-color:var(--c-accent)}.arrange__input{flex:0 0 auto;inline-size:3.25rem;text-align:center;min-block-size:44px;padding:0 var(--sp-1);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:.875rem}.arrange__input:hover{border-color:var(--c-accent)}.stepper{--stepper-w: 16px;position:relative;display:inline-flex;flex:0 0 auto}.stepper>input{flex:1 1 auto;min-inline-size:0;padding-inline-end:var(--stepper-w)}.stepper>.arrange__input{inline-size:calc(3.25rem + var(--stepper-w))}.dial .stepper>.arrange__input{inline-size:calc(2.5rem + var(--stepper-w))}.stepper__button{position:absolute;inset-inline-end:1px;display:grid;place-items:center;inline-size:var(--stepper-w);min-inline-size:0;block-size:calc(50% - 1px);min-block-size:0;padding:0;border:0;background:transparent;color:var(--c-text-soft);cursor:pointer}.stepper__button:hover{background:var(--c-selection);color:var(--c-accent)}.stepper__button--up{inset-block-start:1px;border-start-end-radius:calc(var(--radius-md) - 1px)}.stepper__button--down{inset-block-end:1px;border-end-end-radius:calc(var(--radius-md) - 1px)}.stepper__button:before{content:"";inline-size:5px;block-size:5px;border:solid currentColor;border-width:1.5px 1.5px 0 0;rotate:-45deg;translate:0 1px}.stepper__button--down:before{rotate:135deg;translate:0 -1px}.rounds__circles{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:2px var(--sp-1)}.rounds__circles .arrange__hint{grid-column:1 / -1;margin:0}.rounds__list{display:grid;gap:var(--sp-0);margin:0;padding:0;list-style:none}.rounds__row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:2px}.rounds__name{min-block-size:44px;padding:0 3px;overflow:hidden;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--c-ink);font:inherit;font-size:.875rem;text-align:start;text-overflow:ellipsis;white-space:nowrap}.rounds__name:hover{color:var(--c-accent)}.rounds__name[aria-pressed=true]{border-color:var(--c-accent);background:var(--c-selection);color:var(--c-accent)}.stepper.rounds__cells,.stepper.rounds__side,.stepper.rounds__corner{--stepper-w: 14px}.stepper.rounds__cells>input,.stepper.rounds__side>input,.stepper.rounds__corner>input{inline-size:44px;padding-inline-start:0}.rounds__row--square{grid-template-columns:44px 44px minmax(0,1fr) 44px;grid-template-areas:"name name name trash" "side-caption corner-caption . ." "side corner total total"}.rounds__row--square .rounds__name{grid-area:name}.rounds__row--square .rounds__delete{grid-area:trash}.rounds__caption{color:var(--c-muted);font-size:.75rem;text-align:center}.rounds__caption--side{grid-area:side-caption}.rounds__caption--corner{grid-area:corner-caption}.rounds__side{grid-area:side}.rounds__corner{grid-area:corner}.rounds__total{grid-area:total;padding-inline-start:var(--sp-1);color:var(--c-text-soft);font-size:.75rem;font-variant-numeric:tabular-nums}.rounds__delete{display:grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--c-ink)}.rounds__delete:hover:not(:disabled){border-color:var(--c-accent);color:var(--c-accent)}.rounds__delete:disabled{color:var(--c-muted);opacity:.45}.rounds__add{grid-auto-flow:column;gap:var(--sp-0);min-block-size:44px}.facing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;border:1px solid var(--c-line);border-radius:var(--radius-pill)}.facing__side{min-block-size:44px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--c-text-soft);font-size:.8125rem}.facing__side:hover{color:var(--c-accent)}.facing__side[aria-pressed=true]{background:var(--c-selection);color:var(--c-accent);font-weight:700}.dial{--dial-size: 7.75rem;position:relative;justify-self:center;inline-size:var(--dial-size);block-size:var(--dial-size);touch-action:none;cursor:grab}@media not (min-height:36rem){.dial{--dial-size: 6rem}}.dial__ring{position:absolute;inset:0;inline-size:100%;block-size:100%;fill:none;stroke-linecap:round}.dial__track{stroke:var(--c-line);stroke-width:6}.dial__arc{stroke:var(--c-accent);stroke-width:6}.dial__handle{position:absolute;z-index:1;inset-block-start:50%;inset-inline-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--angle, 0deg)) translateY(calc(var(--dial-size) * -.42))}.dial__handle:after{content:"";position:absolute;inset:50%;inline-size:16px;block-size:16px;border:2px solid var(--c-bg);border-radius:50%;background:var(--c-accent);translate:-50% -50%}.dial>.stepper{position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;cursor:text}.panel__title{margin:0 0 var(--sp-2);font-size:.8125rem;font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--c-muted)}.palette{display:grid;gap:var(--sp-3)}.palette__section{display:grid;gap:var(--sp-1)}.palette__grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-0)}.palette__title{margin:0;font-size:.75rem;font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--c-muted)}.stitch{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:.1rem;min-inline-size:44px;min-block-size:44px;padding:var(--sp-0);border:1px solid var(--c-line);border-radius:var(--radius-md);background:transparent;text-align:center}.stitch:hover{border-color:var(--c-accent)}.stitch:active:not(:disabled){background:var(--c-selection)}.stitch:disabled{cursor:not-allowed;opacity:.5}.stitch:disabled:hover{border-color:var(--c-line)}.stitch[aria-pressed=true]{border-color:var(--c-accent);background:var(--c-selection)}.stitch>canvas,.stitch>.stitch__key{grid-area:1 / 1}.stitch__name{color:var(--c-ink);font-size:.6875rem;line-height:1.15;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.stitch__detail{color:var(--c-text-soft);font-size:.625rem;line-height:1.15}.stitch__short,.place-base{display:none}.stitch__key{justify-self:end;align-self:start;color:var(--c-muted);font-family:var(--font-body);font-size:.625rem;line-height:1;white-space:nowrap}.stitch[data-tip]:after{content:attr(data-tip);position:absolute;z-index:30;inset-block-start:calc(100% + var(--sp-0));inset-inline-start:0;display:none;inline-size:max-content;max-inline-size:100%;padding:var(--sp-0) var(--sp-2);border-radius:var(--radius-md);background:var(--c-ink);color:var(--c-bg);font-size:.75rem;line-height:1.3;text-align:start;white-space:normal;pointer-events:none}.stitch[data-tip]:hover:after,.stitch[data-tip]:focus-visible:after{display:block}@media not ((hover:hover)and (pointer:fine)){.tools .tool[data-tip]:hover:not(:focus-visible):after,.menu__item[data-tip]:hover:not(:focus-visible):after,.stitch[data-tip]:hover:not(:focus-visible):after{display:none}}.palette__shaping{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--radius-md)}.palette__shaping:has(>:focus-visible){outline:2px solid var(--c-accent);outline-offset:1px}.palette__shaping:has(>:focus-visible)>:focus-visible{outline:none}.palette__shaping>.stitch{border-end-start-radius:0;border-end-end-radius:0}.palette__shaping>.palette__part{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}.stitch--shaping{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon name key" "icon detail detail";align-items:center;justify-items:start;column-gap:var(--sp-1);text-align:start}.stitch--shaping>canvas{grid-area:icon}.stitch--shaping>.stitch__name{grid-area:name}.stitch--shaping>.stitch__detail{grid-area:detail}.stitch--shaping>.stitch__key{grid-area:key}.palette__part{min-inline-size:0;min-block-size:44px;padding:0 var(--sp-1);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:.8125rem;text-overflow:ellipsis}.palette__part:hover:not(:disabled){border-color:var(--c-accent)}.palette__part:disabled{cursor:not-allowed;opacity:.5}.version{position:sticky;inset-block-end:calc(-1 * var(--sp-3));margin:var(--sp-3) 0 0;padding-block:var(--sp-2);background:var(--c-bg);border-block-start:1px solid var(--c-line);color:var(--c-muted);font-size:.6875rem;line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none}@media not (min-width:80rem){.bar__title{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media(min-width:62.5rem)and (not (min-width:72rem)){#io-button .tool__label-text{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media not (min-width:66rem){.home>span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media(min-width:62.5rem)and (not (min-width:66rem)){#elements-button .tool__label-text{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}.bar__menu-toggle{display:none}.tools>.wip{display:none}@media not (min-width:62.5rem){.place-base{display:grid}.place-base__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.75rem,1fr));gap:var(--sp-1)}.place-base__choice{min-block-size:44px;font-weight:700}.stage[data-empty]>.stitches{display:none}.bar:has(.pickers__meta:not(:empty)) .pickers{flex:1 1 100%;align-items:center}.pickers__meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-0);margin-inline-end:auto}.pickers__meta>.panel__consent{min-block-size:44px;margin:0}.pickers__meta>.version{position:static;margin:0;padding:0;border:0}.bar{position:relative}.bar__menu-toggle{display:inline-grid;margin-inline-start:auto}.bar:not([data-menu=open]) .tools{flex:0 1 auto}.bar:not([data-menu=open]) .tools>:not(.tools__group--history,.tools__group--selection){display:none}@media(orientation:portrait),not (min-width:40rem){.bar:not([data-menu=open]) .tools__group--selection>:not(#select-tool){display:none}}.bar:not([data-menu=open]) .tools__group--history{padding-inline-start:0;border-inline-start:0}.bar:not([data-menu=open]) .tools__group--selection{padding-inline-start:var(--sp-0)}.bar[data-menu=open] .tools{position:absolute;inset-block-start:calc(100% + var(--sp-0));inset-inline-end:var(--sp-2);z-index:30;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-2);inline-size:min(calc(100vw - 2 * var(--sp-2)),24rem);max-block-size:calc(var(--bar-menu-room, 70dvh) - 2 * var(--sp-2));overflow-y:auto;padding:var(--sp-2);border:1px solid var(--c-line);border-radius:var(--radius-md);background:var(--c-bg);box-shadow:0 12px 32px #241f2b33}.bar[data-menu=open] .tools__group{flex-wrap:wrap;padding-inline-start:0;border-inline-start:0}.tools>.wip{display:block;flex:1 1 100%;padding:var(--sp-2) 0 0;border-block-start:1px solid var(--c-line);border-block-end:0;background:transparent;font-size:.75rem;text-align:start}}@media not (min-width:22.5rem){.brand-mark{display:none}}@media not (min-width:62.5rem){.menu--sub{position:static;padding-block:0;padding-inline:var(--sp-2) 0;border:0;box-shadow:none}}@media not (min-width:40rem),(not (min-width:62.5rem))and (orientation:portrait){:root{--stitches-width: 0px;--inspector-width: 0px}.bar{gap:var(--sp-1) var(--sp-2);padding-inline:var(--sp-2)}#board{inset-block:var(--stitches-height, 0px) auto;block-size:calc(100% - var(--stitches-height, 0px))}.stitches{inset-block:0 auto;inset-inline:0;z-index:18;display:flex;align-items:stretch;gap:var(--sp-1);inline-size:auto;padding:var(--sp-1) var(--sp-2);overflow:auto hidden;overscroll-behavior-x:contain;border-inline-end:0;border-block-end:1px solid var(--c-line)}.palette,.palette__section,.palette__grid{display:flex;gap:var(--sp-1)}.stitch{flex:none;inline-size:3.5rem}.stitch__name,.stitch__detail,.stitch__key{display:none}.stitch__short{display:block;color:var(--c-ink);font-size:.75rem;font-weight:700;line-height:1.1;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.palette__shaping{display:contents}.palette__shaping>.palette__part{display:none}#place-options:has(>.place-base:not([hidden]))>#place-title{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.palette__shaping:has(>:focus-visible)>:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}.palette__shaping>.stitch.stitch--shaping{grid-template-columns:minmax(0,1fr);grid-template-areas:none;justify-items:center;text-align:center;border-radius:var(--radius-md)}.palette__shaping>.stitch--shaping>*{grid-area:auto}.stitches>.version,.stitches>.panel__consent{display:none}.panel-toggle--stitches{inset-block-start:calc(var(--stitches-height, 0px) - 1px);inset-inline:var(--sp-2) auto;border-radius:0 0 var(--radius-md) var(--radius-md)}.panel-toggle--stitches .icon{rotate:90deg}.panel-toggle--stitches[aria-expanded=false] .icon{rotate:-90deg}.stage[data-stitches=closed] .panel-toggle--stitches{inset-block-start:0}.inspector{inset-block:auto 0;inset-inline:0;z-index:20;inline-size:auto;max-block-size:45%;border-inline-start:0;border-block-start:1px solid var(--c-line);border-start-start-radius:var(--radius-md);border-start-end-radius:var(--radius-md);box-shadow:0 -6px 20px #241f2b24}.inspector:not(:has(>:not([hidden]))){display:none}.colors__swatches{grid-template-columns:repeat(8,minmax(0,2.75rem))}.colors[data-placing]{padding-block-start:var(--sp-1)}.colors[data-placing] .colors__frame{display:flex;align-items:center;gap:var(--sp-1);padding:3px;border:0;overflow-x:auto;scrollbar-width:none}.colors[data-placing] #color-default{order:-2}.colors[data-placing] #color-custom{order:-1}.colors[data-placing] .panel__title,.colors[data-placing] .arrange__label,.colors[data-placing] .colors__swatch:disabled{display:none}.colors[data-placing] .colors__swatches,.colors[data-placing] .arrange__buttons{display:contents}.colors[data-placing] .colors__swatch{flex:none;inline-size:2.25rem}.colors[data-placing] .arrange__button{flex:none;white-space:nowrap}.inspector[data-more=true]:after{content:"";position:sticky;inset-block-end:calc(-1 * var(--sp-3));z-index:1;flex:none;block-size:2rem;margin-block-start:-2rem;margin-inline:calc(-1 * var(--sp-3));pointer-events:none;background:linear-gradient(to bottom left,transparent calc(50% - 1px),var(--c-muted) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) calc(50% - 4px) calc(100% - var(--sp-1)) / 8px 8px no-repeat,linear-gradient(to bottom right,transparent calc(50% - 1px),var(--c-muted) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) calc(50% + 4px) calc(100% - var(--sp-1)) / 8px 8px no-repeat,linear-gradient(to bottom,transparent,var(--c-bg) 90%)}.panel-toggle--inspector{inset-block:auto calc(var(--sheet-height, 0px) - 1px);inset-inline-end:var(--sp-2);border-radius:var(--radius-md) var(--radius-md) 0 0}.stage[data-inspector=closed] .panel-toggle--inspector{inset-block-end:0}.panel-toggle--inspector .icon{rotate:90deg}.panel-toggle--inspector[aria-expanded=false] .icon{rotate:-90deg}.stage:not(:has(>.inspector>:not([hidden]))) .panel-toggle--inspector{display:none}.stitches>.panel__title,.palette__title{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}