@import"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap"layer(fonts);@layer normalize,fonts,base,ui,stage,inspector,code,mobile;@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}@layer base{:root{--font-size-min: 16;--font-size-max: 20;--font-ratio-min: 1.2;--font-ratio-max: 1.33;--font-width-min: 375;--font-width-max: 1500}html{color-scheme:light dark}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}:where(.fluid){--fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)) );--fluid-max: calc( var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0)) );--fluid-preferred: calc( (var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)) );--fluid-type: clamp( (var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit, 100vi)), (var(--fluid-max) / 16) * 1rem );font-size:var(--fluid-type)}*,*:after,*:before{box-sizing:border-box}body{background:light-dark(#fff,#000);display:grid;place-items:center;min-height:100vh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}body:before{--size: 45px;--line: color-mix(in hsl, canvasText, transparent 80%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size) * .36) 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0% calc(var(--size) * .32) / var(--size) var(--size);-webkit-mask:linear-gradient(-20deg,transparent 50%,white);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}.brand-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.brand-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.craft-link .spinner{width:24px}.gem__facet{transform-box:fill-box;transform-origin:center}.gem__facet--top{--spin-to: 360deg;transform:scaleY(-1)}@media(prefers-reduced-motion:no-preference){.gem__facet{animation:gem-spin 30s infinite linear;animation-composition:add}.brand-link:is(:hover,:focus-visible) .gem__facet{animation:gem-spin 30s infinite linear,gem-hover .65s cubic-bezier(.215,.61,.355,1);animation-composition:add,add}}@keyframes gem-spin{to{rotate:var(--spin-to, -360deg)}}@keyframes gem-hover{to{rotate:calc(var(--spin-to, -360deg) / 4)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}div.tp-dfwv{width:256px;position:fixed;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}@layer ui{:where(button,[role=button],[role=tab],[role=switch],[role=slider],.swatch,.transport__now){-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--bg: #faf9f6;--surface: #fdfcfa;--border: #e6e4df;--rule: #eeece7;--ink: #111111;--muted: #66655f;--faint: #8c8a83;--hover: #f2f0eb;--selected: #ecebe6;--accent: #111111;--focus: #2563eb;--serif: "Instrument Serif", "Times New Roman", serif;--sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;--radius: 12px;--control: #f6f5f1;--shadow: 0 1px 2px hsl(30 10% 20% / .05), 0 6px 20px -10px hsl(30 10% 20% / .12)}:root[data-scheme=dark]{--bg: #0f0f10;--surface: #161616;--border: #2d2c29;--rule: #222221;--ink: #f4f3ef;--muted: #a3a29c;--faint: #7d7c77;--hover: #202022;--selected: #29292b;--control: #1e1e20;--accent: #f4f3ef;--focus: #60a5fa;--shadow: 0 1px 2px hsl(0 0% 0% / .28), 0 8px 24px -12px hsl(0 0% 0% / .4)}body{display:block;place-items:normal;min-height:100vh;overflow:hidden;font-family:var(--sans);font-size:12px;-webkit-font-smoothing:antialiased}body:before{display:none}button,input,select{font:inherit;color:inherit}:is(button,input,select,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}.ui{view-transition-class:segue-ui;color:var(--ink)}.transport{view-transition-name:segue-transport}::view-transition-group(.segue-ui),::view-transition-new(.segue-ui){animation:none}::view-transition-old(.segue-ui){display:none}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.icon-button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}.icon-button svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:var(--hover)}.segmented{display:flex;gap:2px}.segmented label,.segmented button{position:relative;display:grid;place-items:center;height:24px;padding:0 9px;border:0;border-radius:6px;background:none;font-size:11px;color:var(--muted);cursor:pointer}.segmented input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.segmented label:has(:checked),.segmented button[aria-pressed=true]{background:var(--selected);color:var(--ink);font-weight:500}.segmented label:has(:focus-visible){outline:2px solid var(--focus);outline-offset:1px}.catalogue{display:grid;grid-template-rows:minmax(0,1fr);max-height:min(62vh,560px);margin-bottom:6px;border-bottom:1px solid var(--rule);interpolate-size:allow-keywords}.catalogue__list{min-height:0;overflow:auto;padding:4px 0 6px;scrollbar-width:none}.family{margin:0}.family__head{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:5px 8px;border:0;border-radius:7px;background:none;font-size:12px;color:var(--muted);text-align:left;cursor:pointer}.family__head:hover{background:var(--hover)}.family__count{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}.family[data-open=true] .family__head{color:var(--ink);font-weight:600}.family__items{height:0;margin:0;padding:0;overflow:hidden;list-style:none;visibility:hidden;transition:height .28s cubic-bezier(.25,1,.5,1),margin .28s cubic-bezier(.25,1,.5,1),visibility .28s allow-discrete}.family[data-open=true] .family__items{height:auto;margin:1px 0 6px;visibility:visible}@media(prefers-reduced-motion:reduce){.family__items{transition-duration:0s}}.family__items button{position:relative;width:100%;padding:4px 8px 4px 20px;border:0;border-radius:6px;background:none;font-size:11.5px;color:var(--muted);text-align:left;cursor:pointer}.family__items button:hover{color:var(--ink)}.family__items button[aria-current=true]{color:var(--ink);font-weight:500}.family__items button[aria-current=true]:before{content:"";position:absolute;left:9px;top:50%;width:4px;aspect-ratio:1;border-radius:50%;background:currentColor;translate:0 -50%}.transport{--morph: .36s cubic-bezier(.25, 1, .5, 1);position:fixed;bottom:20px;left:50%;translate:-50% 0;z-index:4;display:grid;width:460px;max-width:calc(100vw - 28px);padding:7px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);transition:border-radius var(--morph)}.transport:not([data-panel=none]){border-radius:16px}.transport__tray{display:grid}.tray{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--morph)}.transport[data-panel=catalogue] .tray[data-for=catalogue],.transport[data-panel=inspector] .tray[data-for=inspector],.transport[data-panel=code] .tray[data-for=code]{grid-template-rows:1fr}.tray__clip{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .36s}.tray__clip>*{opacity:0;filter:blur(4px);scale:.98;transform-origin:50% 100%;transition-property:opacity,filter,scale;transition-duration:.18s;transition-timing-function:ease-out}:is(.transport[data-panel=catalogue] [data-for=catalogue],.transport[data-panel=inspector] [data-for=inspector],.transport[data-panel=code] [data-for=code]) .tray__clip{visibility:visible;transition-delay:0s}:is(.transport[data-panel=catalogue] [data-for=catalogue],.transport[data-panel=inspector] [data-for=inspector],.transport[data-panel=code] [data-for=code]) .tray__clip>*{opacity:1;filter:none;scale:1;transition-duration:.32s;transition-delay:.08s}@media(prefers-reduced-motion:reduce){.transport,.tray,.tray__clip>*{transition-duration:0s!important}}.transport__row{display:flex;align-items:center;justify-content:center;gap:2px}.transport__step,.transport__menu{border-radius:50%;width:30px;height:30px}.transport__menu{margin-right:2px;color:var(--muted)}.transport__menu .fill{fill:currentColor;stroke:none}.transport__menu:hover,.transport__menu[aria-expanded=true]{color:var(--ink);background:var(--hover)}.transport__now{display:grid;margin:0;width:140px;padding:0 6px;text-align:center;line-height:1.3}.transport__count,.transport__name{display:grid;min-width:0}:is(.transport__count,.transport__name)>span{grid-area:1 / 1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.transport__count{font-size:11px;font-variant-numeric:tabular-nums}.transport__name{font-size:10.5px;color:var(--muted)}.transport__play{display:grid;place-items:center;width:36px;height:36px;margin:0 4px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--surface);cursor:pointer;transition:scale .2s}.transport__play svg{width:14px;fill:currentColor}.transport__play:active{scale:.94}.transport__rule{width:1px;height:18px;margin:0 6px;background:var(--border)}.transport__toggle{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border:0;border-radius:999px;background:none;font-size:11.5px;color:var(--muted);cursor:pointer}.transport__toggle svg{width:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.transport__toggle:hover,.transport__toggle[aria-expanded=true]{background:var(--hover);color:var(--ink)}}@layer stage{.stage{position:fixed;inset:0;display:grid;padding:24px 24px 96px;background:var(--scene-bg);color:var(--scene-ink)}:root{--scene-bg: #1f3a33;--scene-ink: #ece8dd;--scene-soft: #a9b8ad}:root[data-scene="1"]{--scene-bg: #f1ede4;--scene-ink: #1d1c1a;--scene-soft: #6f6a60}:root[data-scene="2"]{--scene-bg: #26282c;--scene-ink: #ece8dd;--scene-soft: #9b9a95}:root[data-scene="3"]{--scene-bg: #cdc4b4;--scene-ink: #1d1c1a;--scene-soft: #5f584c}.wordmark{position:absolute;top:22px;left:26px;display:flex;align-items:center;gap:7px;margin:0;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1;letter-spacing:-.01em}.wordmark__mark{width:17px;translate:0 1px}.wordmark__old,.wordmark__trail{fill:currentColor}.wordmark__lead{fill:none}.wordmark__page{fill:none;stroke:currentColor;stroke-width:1.4}.scene{--type: clamp(44px, 6.4vw, 84px);position:relative;align-self:center;justify-self:center;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto auto;-moz-column-gap:calc(var(--type) * .9);column-gap:calc(var(--type) * .9)}.scene__count{grid-column:1;margin:0 0 28px;font-size:11px;letter-spacing:.08em;color:var(--scene-soft);font-variant-numeric:tabular-nums}.scene__title{grid-column:1;margin:0;font-family:var(--serif);font-weight:400;font-size:var(--type);line-height:.96;letter-spacing:-.015em}.scene__rule{grid-column:1;width:56px;margin:28px 0 18px;border:0;border-top:1px solid currentColor;opacity:.6}.scene__line{grid-column:1;margin:0;font-size:13px;line-height:1.5;color:var(--scene-soft);white-space:pre-line}.scene__form{grid-column:2;grid-row:2;align-self:start;width:calc(var(--type) * 1.92);aspect-ratio:1}[data-scene="0"] .scene__form{border:1px solid currentColor;border-radius:50%}[data-scene="1"] .scene__form{background:repeating-linear-gradient(currentColor 0 1px,transparent 1px 22px);-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent);opacity:.6}[data-scene="2"] .scene__form{border-radius:50%;background:linear-gradient(transparent 50%,#c8553d 50%)}[data-scene="3"] .scene__form{background:radial-gradient(circle at 70% 50%,#b4502f 0 9px,transparent 10px),linear-gradient(transparent calc(50% - .5px),currentColor 0 calc(50% + .5px),transparent 0)}}@layer inspector{.inspector{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:min(62vh,540px);margin-bottom:6px;border-bottom:1px solid var(--rule)}.inspector__head{display:flex;align-items:start;justify-content:space-between;gap:8px;padding:8px 4px 10px 10px;border-bottom:1px solid var(--rule)}.inspector__title{margin:0;font-size:13px;font-weight:600}.inspector__meta{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0 0;font-size:11px;color:var(--muted)}.tag{padding:0 5px;border:1px solid var(--border);border-radius:4px;font-size:10px;line-height:15px}.inspector__body{overflow:auto;padding:4px 10px 10px;scrollbar-width:thin}.group{padding:12px 0;border-bottom:1px solid var(--rule)}.group:last-child{border-bottom:0}.group__title{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.control{display:grid;gap:6px;padding:5px 0}.control--inline{grid-template-columns:1fr auto;align-items:center}.control__head{display:flex;align-items:baseline;justify-content:space-between}.control__label{font-size:11.5px}.control__value{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.slider{--fill: 50%;width:100%;height:14px;margin:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:grab}.slider:active{cursor:grabbing}:root[data-grabbing=true],:root[data-grabbing=true] *{cursor:grabbing!important}.slider::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--border) var(--fill))}.slider::-moz-range-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--border) var(--fill))}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4.5px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink)}.slider::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink)}.inspector .segmented{padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--control)}.inspector .segmented button{flex:1;padding:0 6px;text-transform:capitalize}.select select{text-transform:capitalize}.switch{position:relative;width:28px;height:16px;padding:0;border:0;border-radius:99px;background:var(--border);cursor:pointer;transition:background-color .2s}.switch:after{content:"";position:absolute;top:2px;left:2px;width:12px;aspect-ratio:1;border-radius:50%;background:var(--surface);transition:translate .2s cubic-bezier(.25,1,.5,1)}.switch[aria-checked=true]{background:var(--ink)}.switch[aria-checked=true]:after{translate:12px 0}.select{display:flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 2px;border:1px solid var(--border);border-radius:7px;background:var(--control)}.select select{flex:1;min-width:0;height:100%;padding:0 6px;border:0;background:none;font-size:11.5px;cursor:pointer}.select__preview svg{display:block;width:36px;fill:none;stroke:var(--ink);stroke-width:1.2}.link-button{justify-self:start;margin:6px 0 2px;padding:0;border:0;background:none;font-size:11px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;cursor:pointer}.link-button:hover{color:var(--ink)}.inspector__reset{margin:0;line-height:17px}.inspector__reset[hidden]{display:none}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:4px}.swatch{display:flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 3px;border:1px solid var(--border);border-radius:7px;background:var(--control);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer}.swatch input{width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer}.swatch input::-webkit-color-swatch-wrapper{padding:0}.swatch input::-webkit-color-swatch{border:0;border-radius:4px}.control--dial{grid-template-columns:auto 1fr;align-items:center;-moz-column-gap:14px;column-gap:14px}.control--dial .control__head{grid-column:2;grid-row:1;flex-direction:column;align-items:start;gap:2px}.control--dial .dial{grid-column:1;grid-row:1}.dial{--angle: 0deg;position:relative;width:64px;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none}.dial svg{width:100%;overflow:visible}.dial .dial__ring{fill:none;stroke:var(--border)}.dial .dial__ticks line{stroke:var(--faint);stroke-width:1}.dial .dial__hand,.dial .dial__knob{transform-origin:32px 32px;rotate:var(--angle)}.dial .dial__hand{stroke:var(--ink);stroke-width:1}.dial .dial__knob{fill:var(--ink)}}@layer code{.code{display:grid;grid-template-rows:auto minmax(0,1fr);height:min(46vh,420px);margin-bottom:6px;border-bottom:1px solid var(--rule)}.code__head{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-bottom:1px solid var(--rule)}.code__head button{height:24px;padding:0 9px;border:0;border-radius:6px;background:none;font-size:11px;color:var(--muted);cursor:pointer}.code__head [aria-selected=true]{background:var(--selected);color:var(--ink);font-weight:500}.code__head button:disabled{opacity:.4;cursor:default}.code__tabs{display:flex;gap:2px;margin-right:auto}.code .code__copy{display:grid;overflow:hidden;color:var(--ink);transition:background-color .2s,scale .12s ease-out}.code .code__copy:hover{background:var(--hover)}.code .code__copy:active{scale:.96}.code .code__copy svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.code .code__copy .state{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;opacity:0;translate:0 80%;filter:blur(3px);transition:opacity .2s,translate .32s cubic-bezier(.25,1,.5,1),filter .2s}.code .code__copy[data-state=idle] .state--idle,.code .code__copy[data-state=done] .state--done{opacity:1;translate:0 0;filter:none}.code .code__copy[data-state=done] .state--idle{translate:0 -80%}.code .code__copy .state--done svg{stroke-width:1.7}@media(prefers-reduced-motion:reduce){.code .code__copy .state{transition-duration:0s}}.code__body{margin:0;padding:14px 18px 18px;overflow:auto;font:11.5px/1.7 var(--mono);-moz-tab-size:2;-o-tab-size:2;tab-size:2;scrollbar-width:thin}.tok-comment{color:var(--faint);font-style:italic}.tok-at,.tok-keyword{color:#9a3e8f}.tok-selector{color:#2f6b55}.tok-prop{color:#3b5bab}.tok-string{color:#96621f}.tok-number{color:#b8452d}.tok-fn{color:#27707f}:root[data-scheme=dark] .tok-at,:root[data-scheme=dark] .tok-keyword{color:#d6a4e0}:root[data-scheme=dark] .tok-selector{color:#8fcfb2}:root[data-scheme=dark] .tok-prop{color:#9db7f2}:root[data-scheme=dark] .tok-string{color:#e8b877}:root[data-scheme=dark] .tok-number{color:#f29f85}:root[data-scheme=dark] .tok-fn{color:#86cbd8}}@layer mobile{@media not (min-width:760px){.scene{grid-template-columns:1fr}.scene__form{grid-column:1;grid-row:auto;width:150px;margin-top:28px}.catalogue{max-height:min(56vh,460px)}.stage{padding:84px 24px 110px}.wordmark{top:18px;left:20px}.wordmark{font-size:19px}.scene{align-self:center;justify-self:center;width:min(100%,320px)}.scene__form{justify-self:start}.transport{left:8px;right:8px;bottom:8px;width:auto;max-width:none;translate:none;padding:6px;border-radius:20px}.transport__row{justify-content:space-between}.transport__now{flex:1;width:auto}.transport__rule,.transport__toggle span{display:none}.transport__toggle{width:30px;padding:0;justify-content:center}.code__head{gap:4px}.code__head button{padding:0 7px}}}