@font-face{font-family:Obel Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/design-book/_astro/ObelMono-VF.Ds5Sk10x.woff2)format("woff2")}:root{--paper:#eee9dc;--black:#0d0a03;--on-black:#fffaed;--blue:#172c4f;--red:#de5331;--yellow:#dab43d;--green:#479549;--font-text:"Valley Sans", ui-sans-serif, system-ui, sans-serif;--font-code:"Obel Mono", ui-monospace, "SF Mono", Menlo, monospace;--row:28px;--split-gap:calc(var(--row) * 3);--rail:calc(var(--row) * 2);--hole:radial-gradient(circle, transparent 5px, #000 5.5px);--tear:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--pp-text,var(--black)) 32%, var(--pp,var(--paper))) 0 3px, transparent 3px 7px)}.ink-blue{--pp:var(--blue);--pp-text:var(--on-black)}.ink-black{--pp:var(--black);--pp-text:var(--on-black)}.ink-red{--pp:var(--red);--pp-text:var(--black)}.ink-yellow{--pp:var(--yellow);--pp-text:var(--black)}.ink-green{--pp:var(--green);--pp-text:var(--black)}.ruled{background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), color-mix(in srgb, var(--pp-text) 12%, var(--pp,var(--paper))) calc(var(--row) - 1px) var(--row))}.holes-left{-webkit-mask:var(--hole) left top / calc(var(--row) * 1.25) var(--row) repeat-y, linear-gradient(#000 0 0) right / calc(100% - var(--row) * 1.25) 100% no-repeat;mask:var(--hole) left top / calc(var(--row) * 1.25) var(--row) repeat-y, linear-gradient(#000 0 0) right / calc(100% - var(--row) * 1.25) 100% no-repeat;position:relative}.holes-left:after{content:"";top:0;bottom:0;left:calc(var(--row) * 1.25);background:var(--tear);pointer-events:none;width:1px;position:absolute}.holes-both{z-index:0;background:0 0;position:relative}.holes-both:before{content:"";z-index:-1;background:var(--tear) calc(var(--row) * 1.25) 0 / 1px 100% no-repeat, var(--tear) calc(100% - var(--row) * 1.25) 0 / 1px 100% no-repeat, repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), color-mix(in srgb, var(--pp-text) 12%, var(--pp,var(--paper))) calc(var(--row) - 1px) var(--row)), var(--pp);-webkit-mask:var(--hole) left top / calc(var(--row) * 1.25) var(--row) repeat-y, var(--hole) right top / calc(var(--row) * 1.25) var(--row) repeat-y, linear-gradient(#000 0 0) center / calc(100% - var(--row) * 2.5) 100% no-repeat;mask:var(--hole) left top / calc(var(--row) * 1.25) var(--row) repeat-y, var(--hole) right top / calc(var(--row) * 1.25) var(--row) repeat-y, linear-gradient(#000 0 0) center / calc(100% - var(--row) * 2.5) 100% no-repeat;position:absolute;inset:0}.folder{min-width:0;padding-top:var(--row);display:grid}.folder-sheet{min-width:0;color:var(--pp-text);grid-area:1/1;align-self:start;transition:transform .25s;position:relative}.folder-sheet.is-front{z-index:1}.folder-sheet:not(.is-front){z-index:0;cursor:pointer;transform:translate(calc(var(--row) / 2), calc(var(--row) / -2))}.folder-sheet:not(.is-front) .folder-body{pointer-events:none}.folder-body{overflow-x:auto}.folder-tab{bottom:100%;left:var(--tab-left,0);height:var(--row);padding:0 var(--row);font:14px var(--font-text);white-space:nowrap;color:var(--pp-text);background:var(--pp);cursor:pointer;border:0;position:absolute}.folder-tab:focus-visible{outline-offset:2px;outline:1px solid}.folder-tab{transition:left .25s}.ledger,[data-ledger],[data-ledger-head]{--lg-ink:color-mix(in srgb, var(--pp-text) 72%, var(--pp));--lg-rule:color-mix(in srgb, var(--pp-text) 28%, var(--pp,var(--paper)));--lg-margin:color-mix(in srgb, var(--pp-text) 60%, var(--pp,var(--paper)))}.ledger{border-collapse:collapse;width:100%;line-height:var(--row)}.ledger th,.ledger td{height:var(--row);background:var(--pp);vertical-align:middle;border:0;padding:0 14px}.ledger td{box-shadow:inset 0 -1px 0 var(--lg-rule)}.ledger th,[data-ledger-head]{text-align:left;letter-spacing:.08em;color:var(--lg-ink);box-shadow:inset 0 -1px 0 var(--lg-rule), inset 0 -2px 0 var(--pp), inset 0 -3px 0 var(--lg-rule);font-variant-caps:all-small-caps;font-weight:400}.ledger th+th,.ledger td+td{border-left:1px solid var(--lg-rule)}.ledger th:first-child,.ledger td.no{text-align:right;color:var(--lg-ink);border-right:3px double var(--lg-margin);font-family:var(--font-code);font-variant-numeric:lining-nums;font-size:12px}.ledger td.no+td{border-left:0}.ledger td.val{padding-left:calc(var(--row) * .375 + 12px);position:relative}.ledger .swatch,[data-ledger] .swatch{width:calc(var(--row) * .375);position:absolute;top:0;bottom:0;left:0}[data-ledger]{counter-reset:ledger-row;line-height:var(--row);margin:0;padding:0;list-style:none}[data-ledger-head]{min-height:var(--row);padding:0 14px 0 calc(var(--row) * 2 + 14px);font-size:15px;line-height:var(--row);background-color:var(--pp);border:0;align-items:center;gap:10px;margin:0;display:flex}[data-ledger]>:not([data-ledger-skip]){counter-increment:ledger-row;grid-template-columns:calc(var(--row) * 2) var(--ledger-cols,minmax(0, 1fr));min-height:var(--row);background:var(--pp);box-shadow:inset 0 -1px 0 var(--lg-rule);border:0;align-items:stretch;margin:0;display:grid}[data-ledger]>:not([data-ledger-skip]):before{content:counter(ledger-row);font-family:var(--font-code);font-variant-numeric:lining-nums;color:var(--lg-ink);border-right:3px double var(--lg-margin);justify-content:flex-end;align-items:center;padding:0 12px;font-size:12px;display:flex}[data-ledger]>:not([data-ledger-skip])>*{min-width:0;line-height:var(--row);overflow-wrap:anywhere;align-content:center;padding:0 14px;display:block;position:relative}[data-ledger]>:not([data-ledger-skip])>*+*{border-left:1px solid var(--lg-rule)}[data-ledger]>:not([data-ledger-skip])>.swatch-cell{padding:0}.switch{display:flex}.switch button{white-space:nowrap;min-height:var(--row);font:12px var(--font-code);color:var(--pp-text);border:1px solid color-mix(in srgb, var(--pp-text) 42%, var(--pp,var(--paper)));cursor:pointer;background:0 0;border-radius:0;flex:1;padding:3px 10px}.switch button+button{margin-left:-1px}.switch button:hover{border-color:var(--pp-text)}.switch button:is([aria-pressed=true],.is-active){color:var(--pp);background:var(--pp-text);border-color:var(--pp-text)}.switch button code{color:inherit;font:inherit;background:0 0;padding:0}.curve-frame,.curve-diagonal,.curve-arm,.curve-tick,.curve-path{fill:none;stroke:var(--pp-text);vector-effect:non-scaling-stroke}.curve-frame{stroke:color-mix(in srgb, currentColor 60%, var(--pp,var(--paper)))}.curve-diagonal{stroke-dasharray:2 3}.curve-tick{stroke-dasharray:1 2}.curve-arm{stroke-dasharray:3 2}.curve-path{stroke-width:1.5px}.curve-step{fill:var(--pp-text)}.curve-handle{fill:var(--pp);stroke:var(--pp-text);stroke-width:1.5px;vector-effect:non-scaling-stroke;cursor:grab}.curve-handle:active{cursor:grabbing}.curve-handle:is(:hover,:focus-visible){fill:var(--pp-text);outline:none}.curve-label{fill:var(--pp-text);font-family:var(--font-code);font-size:var(--curve-label-size,3.4px)}.rail{width:var(--rail);z-index:10;color:var(--rail-ink,var(--on-black));background:var(--rail-bg,var(--blue));font-family:var(--font-code);font-variant-numeric:lining-nums;font-size:9px;line-height:1;position:fixed;top:0;bottom:0}.rail-left{left:0}.rail-right{right:0}.rail-scale{top:calc(var(--row) * 2);bottom:calc(var(--row) * 6);position:absolute;left:0;right:0}.rail .tick{background:currentColor;height:1px;position:absolute}.rail .tick.minor{width:4px}.rail a.tick.minor{color:inherit}.rail a.tick.minor:before{content:"";position:absolute;inset:-4px 0 -4px -6px}.rail a.tick.minor:hover,.rail a.tick.minor:focus-visible,.rail .tick.major{width:9px}.rail-left .tick{right:0}.rail-right .tick{left:0}.rail .num{color:inherit;text-decoration:none;position:absolute;transform:translateY(-50%)}.rail-left .num{right:13px}.rail-right .num{left:13px}.rail-left a.num:hover{opacity:1;text-decoration:underline}.rail .needle{background:currentColor;height:1px;position:absolute;transform:translateY(-50%)}.rail-left .needle{left:4px;right:0}.rail-right .needle{left:0;right:4px}.rail .needle:after{content:attr(data-label);background:var(--rail-bg,var(--blue));white-space:nowrap;padding:1px 2px;position:absolute;top:0;left:11px;transform:translateY(-50%)}.rail-legend{bottom:var(--row);writing-mode:vertical-rl;font-family:var(--font-code);white-space:nowrap;font-size:10px;position:absolute;left:50%;transform:translate(-50%)rotate(180deg)}.rail-feed{--pp-text:var(--rail-ink,var(--on-black));background-image:var(--tear);background-position:10px var(--feed,0px);-webkit-mask:var(--hole) 0 var(--feed,0px) / 100% var(--row) repeat-y;mask:var(--hole) 0 var(--feed,0px) / 100% var(--row) repeat-y;background-repeat:repeat-y;background-size:1px 7px}@media (width<=640px){:root{--rail:0px}.rail{display:none}}:root{--bar-h:calc(var(--row) * 1.5)}.install-bar{z-index:11;height:var(--bar-h);font:14px var(--font-code);color:var(--install-ink,var(--on-black));background:var(--install-bg,var(--blue));align-items:stretch;display:flex;position:sticky;bottom:0}.install-bar .bar-brand{padding:0 var(--row);font:600 16px / var(--bar-h) var(--font-text);letter-spacing:-.01em;color:inherit;align-items:center;gap:10px;text-decoration:none;display:inline-flex}body:has(>.rail-left) .install-bar{margin-left:calc(var(--rail) * -1);margin-right:0}.install-bar .bar-brand .mark{width:auto;height:26px;display:block}body:has(>.rail-left) .install-bar .bar-brand{width:var(--rail);justify-content:center;padding:0}.install-bar .bar-nav{align-items:center;gap:var(--row);padding:0 var(--row);font:15px var(--font-text);display:flex}.install-bar .bar-home{margin-right:auto;padding-left:10px}.install-bar .bar-nav a{color:inherit;text-underline-offset:.2em;text-decoration:underline 1px}.install-bar .bar-nav a[aria-current=page]{pointer-events:none;text-decoration:none}.install-bar code{padding:0 var(--row);font:inherit;line-height:var(--bar-h);color:inherit;border-left:1px solid color-mix(in srgb, var(--install-ink,var(--on-black)) 45%, var(--install-bg,var(--blue)));background:0 0}.install-bar .prompt{color:color-mix(in srgb, var(--install-ink,var(--on-black)) 55%, var(--install-bg,var(--blue)));margin-right:.4em}.install-bar .copy{font:15px var(--font-text);color:inherit;border:0;border-left:1px solid color-mix(in srgb, var(--install-ink,var(--on-black)) 45%, var(--install-bg,var(--blue)));border-right:1px solid color-mix(in srgb, var(--install-ink,var(--on-black)) 45%, var(--install-bg,var(--blue)));cursor:pointer;background:0 0;padding:0 14px}.install-bar .copy:hover{color:var(--on-black);background:var(--black)}.install-bar .copy.copied,.install-bar .copy.copied:hover{color:var(--black);background:#479549}@media (width<=640px){.install-bar code,.install-bar .copy,.install-bar .bar-nav a[href$=editor\/]{display:none}.install-bar .bar-brand,body:has(>.rail-left) .install-bar .bar-brand{white-space:nowrap;gap:8px;padding-left:14px;font-size:15px}.install-bar .bar-brand .mark{height:22px}.install-bar .bar-nav{gap:14px;padding:0 14px;font-size:14px}}footer.imprint{--imprint-line:color-mix(in srgb, var(--imprint-ink,var(--on-black)) 35%, var(--imprint-bg,var(--blue)));justify-content:space-between;align-items:baseline;gap:calc(var(--row) / 2) calc(var(--row) * 2);padding:var(--row) 40px calc(var(--row) * 2) calc(var(--row) * 2 + 47px);font:15px var(--font-text);color:var(--imprint-ink,var(--on-black));background:var(--imprint-bg,var(--blue));border-top:1px solid var(--imprint-line);border-right:1px solid var(--imprint-line);flex-wrap:wrap;margin:0;display:flex;position:relative}body:has(>.rail-left) footer.imprint{z-index:11;margin-left:calc(var(--rail) * -1);padding-left:calc(var(--rail) + 10px)}footer.imprint>*{line-height:var(--row)}footer.imprint a{color:inherit}.imprint-nav{align-items:center;gap:var(--row);display:flex}.imprint-nav a{line-height:var(--row)}.imprint-nav a[aria-current=page]{pointer-events:none;text-decoration:none}.imprint-by{align-items:center;gap:var(--row);display:inline-flex}footer.imprint .elastiq{display:inline-flex}.elastiq-logo{width:auto;height:calc(var(--row) * 1.6);display:block;position:relative;top:.18em}.imprint-made{justify-content:space-between;gap:0 var(--row);margin:var(--row) 0 0;padding-top:var(--row);font:12px / var(--row) var(--font-code);color:color-mix(in srgb, var(--imprint-ink,var(--on-black)) 70%, var(--imprint-bg,var(--blue)));flex-wrap:wrap;flex:1 0 100%;order:3;display:flex}.imprint-made:before{content:"";margin-top:calc(var(--row) * -1);border-top:1px dashed var(--imprint-line);position:absolute;left:0;right:0}footer.imprint .imprint-made a{color:var(--imprint-ink,var(--on-black))}@media (width<=640px){footer.imprint{gap:var(--row);padding:var(--row) 14px calc(var(--row) * 2) 87px}body:has(>.rail-left) footer.imprint{padding-left:28px}.imprint-nav{gap:14px}}.logo{width:auto;height:30px;display:block;overflow:visible}.logo .logo-fill{fill:var(--logo-fill,none)}.logo text{font:italic 800 30px var(--font-text)}.logo-link{width:fit-content;height:30px;color:inherit;display:block}.logo-link>.logo{height:100%}.logo-link:focus-visible{outline-offset:4px;outline:2px solid}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}input[type=checkbox]{-webkit-appearance:none;appearance:none;box-sizing:border-box;vertical-align:middle;width:12px;height:12px;color:inherit;cursor:pointer;background:0 0;border:1px solid;border-radius:0;margin:0 6px 0 0}input[type=checkbox]:checked{box-shadow:inset 0 0 0 2px var(--pp,var(--paper));background:currentColor}input[type=checkbox]:focus-visible{outline-offset:2px;outline:1px solid}.ledger :is(td,th)>:not(.swatch),[data-ledger]>*>* :is(code,span,b,a){vertical-align:baseline;line-height:18px}color-input{--canvas:var(--black);--canvas-text:var(--on-black);--radius-2:0;--radius-round:0;height:var(--row);color:inherit;vertical-align:top;background:0 0;border:0;align-items:center;gap:0;display:inline-flex}color-input::part(trigger){box-sizing:border-box;width:var(--row);height:var(--row);box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0;margin:0;padding:0}color-input::part(chip){block-size:100%;inline-size:100%;box-shadow:none;border:0;border-radius:0;display:block;scale:1}color-input::part(chip):hover,color-input::part(input):focus{box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--black)}color-input::part(trigger):focus-visible{outline:2px solid var(--black);outline-offset:-5px}color-input::part(input){box-sizing:border-box;width:calc(7ch + var(--row));height:var(--row);padding:0 calc(var(--row) / 2);font:12px/var(--row) var(--font-code);color:var(--black);background:var(--paper);box-shadow:none;border:0;border-radius:0;outline:0;margin:0}color-input::part(panel){color-scheme:dark;color:var(--on-black);background:var(--black);box-shadow:none;border:0;border-radius:0}color-input::part(controls){color:var(--on-black);font-family:var(--font-code)}.folder-tab{overflow:hidden}.folder-tab:after{content:"";pointer-events:none;background:currentColor;border-radius:50%;width:6px;height:6px;transition:transform .2s;position:absolute;top:0;left:50%;transform:translate(-50%,-100%)}.folder-sheet:not(.is-front) .folder-tab:hover,.folder-tabs>.folder-tab:not(.is-front):hover{text-decoration:none}.folder-sheet:not(.is-front) .folder-tab:hover:after,.folder-sheet:not(.is-front) .folder-tab:focus-visible:after,.folder-tabs>.folder-tab:not(.is-front):is(:hover,:focus-visible):after{transform:translate(-50%,4px)}@media (prefers-reduced-motion:reduce){.folder-tab:after{transition:none}}.folder-sheet.is-front>.folder-tab:after,.folder-tabs>.folder-tab.is-front:after{transform:translate(-50%,4px)}.folder-tab:after{width:4px;height:4px}.folder-tab:after{left:calc(var(--row) / 2 - 2px);transform:translateY(-100%)}.folder-sheet:not(.is-front) .folder-tab:hover:after,.folder-sheet:not(.is-front) .folder-tab:focus-visible:after,.folder-sheet.is-front>.folder-tab:after,.folder-tabs>.folder-tab:not(.is-front):is(:hover,:focus-visible):after,.folder-tabs>.folder-tab.is-front:after{transform:translateY(calc(var(--row) / 2 - 2px))}.folder-tab:after{transition:translate .2s,border-radius .2s,rotate .25s .1s,scale .25s .1s;transform:translateY(-100%)scale(.9)}.folder-sheet:not(.is-front) .folder-tab:is(:hover,:focus-visible):after,.folder-tabs>.folder-tab:not(.is-front):is(:hover,:focus-visible):after{transform:none;translate:0 calc(var(--row) / 2 - 2px)}.folder-sheet.is-front>.folder-tab:after,.folder-tabs>.folder-tab.is-front:after{transform:none;translate:0 calc(var(--row) / 2 - 2px);border-radius:0;rotate:45deg;scale:1.4}@media (prefers-reduced-motion:reduce){.folder-tab:after{transition:none}}.rail .rail-legend{bottom:calc(var(--row) * 2.5)}.rail .rail-scale{bottom:calc(var(--row) * 7.5)}html{scrollbar-color:var(--blue) var(--paper)}html:has(body>.rail-left){scrollbar-color:var(--paper) var(--rail-bg,var(--blue))}:root{--title-size:clamp(30px, 4vw, 54px);--sub-title-size:clamp(26px, 3vw, 40px);--rule-color:var(--rule);--band:calc(var(--row) * 2);--hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='56'%3E%3Cdefs%3E%3Cpattern id='h' width='8' height='56' patternUnits='userSpaceOnUse' patternTransform='skewX(-45)'%3E%3Cpolygon points='1.5,0 0,56 3,56'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='280' height='56' fill='url(%23h)'/%3E%3C/svg%3E");--inset:2.2rem}@media (width<=640px){:root{--inset:0px}}html,body{overflow-x:clip}.rule-title{isolation:isolate;margin:0 0 calc(var(--row) * 2);font-size:var(--title-size);letter-spacing:-.02em;grid-column:1/-1;line-height:1.2;position:relative}h3.rule-title{font-size:var(--sub-title-size)}.rule-title:before,.rule-title:after{content:"";pointer-events:none;width:300vw;position:absolute;left:-100vw}.rule-title:before{background:var(--rule-color);height:1px;top:100%}.rule-title:after{z-index:-1;height:var(--band);background:var(--rule-color);-webkit-mask:var(--hatch) left bottom / auto var(--band) repeat-x;mask:var(--hatch) left bottom / auto var(--band) repeat-x;bottom:0}.rule-title--under{padding-top:calc(var(--row) * 2)}.rule-title--under:before{top:0}.rule-title--under:after{bottom:100%}.rule-title~:not(.feature-sub),.fn-pitch{margin-left:var(--inset)}.folder--inset .folder-tab{left:calc(var(--inset) + var(--tab-left,0px));transition:translate .25s}.blueprint{--bp-gutter:var(--row);--bp-cell:calc(var(--row) * 2);--bp-minor:color-mix(in oklch, var(--pp-text) 9%, transparent);--bp-major:color-mix(in oklch, var(--pp-text) 20%, transparent);isolation:isolate;padding:var(--bp-gutter);position:relative}.blueprint:before,.blueprint:after{content:"";z-index:-1;pointer-events:none;position:absolute}.blueprint:before{background-color:var(--pp);background-image:linear-gradient(to right, var(--bp-major) 1px, transparent 1px), linear-gradient(to bottom, var(--bp-major) 1px, transparent 1px), linear-gradient(to right, var(--bp-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--bp-minor) 1px, transparent 1px);background-size:var(--bp-cell) var(--bp-cell), var(--bp-cell) var(--bp-cell), calc(var(--bp-cell) / 4) calc(var(--bp-cell) / 4), calc(var(--bp-cell) / 4) calc(var(--bp-cell) / 4);background-position:var(--bp-gutter) var(--bp-gutter);inset:0}.blueprint:after{inset:var(--bp-gutter);border:1px solid color-mix(in oklch, var(--pp-text) 45%, transparent)}.blueprint .palette-table__row:not(.palette-table__row--header){fill:var(--paper);fill-opacity:1}.blueprint svg.interactive .palette-table__row[data-token-key]:not(.palette-table__row--header):hover{fill:color-mix(in oklch, var(--paper) 88%, var(--pp-text));fill-opacity:1}.blueprint .bp-hatch{stroke:var(--pp-text);stroke-width:1.2px}.blueprint .bp-shadows rect{stroke:var(--pp-text);stroke-width:1px;vector-effect:non-scaling-stroke}.blueprint-labels{z-index:-1;pointer-events:none;font:11px/1 var(--font-code);color:color-mix(in oklch, var(--pp-text) 60%, transparent);position:absolute;inset:0}.blueprint-labels span{position:absolute;translate:-50% -50%}.split{gap:clamp(20px, 2.4vw, 32px) var(--split-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split--wide-start{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}.intro-logo{height:calc(var(--row) * 1.5);margin:0 0 calc(var(--row) * 2)}section.first-screen{position:relative}section.first-screen>.intro-logo{top:calc(var(--row) * 2);left:var(--first-inset);margin:0;position:absolute}section.first-screen{box-sizing:border-box;min-height:calc(100dvh - var(--bar-h));max-width:none;padding-left:var(--first-inset);padding-right:var(--first-inset);padding-bottom:var(--first-inset);margin-left:0;margin-right:0}@media (width<=640px){.folder-tab{padding:0 10px 0 18px;font-size:13px}.folder-tab:after{left:7px}}