@layer normalize,base,demo;@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{--surface: light-dark(#fbfaf6, #2c2d29);--rim: light-dark(#c9c8c2, #57584f);--ink: light-dark(#20211e, #f3f2eb);--faint: light-dark(#8b8c85, #75766e);--well: light-dark(#e3e1d6, #131410)}html{color-scheme:light dark}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}*,*:after,*:before{box-sizing:border-box}body{background:light-dark(#fff,#000);color:var(--ink);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}.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)}}}@layer demo{.stage{display:grid;place-items:center;min-height:100vh;width:100%}.membrane-host{position:relative;width:0;height:0;color:var(--well)}.membrane{position:absolute;overflow:visible;pointer-events:none;color:var(--rim)}.fixture{position:absolute;padding:0;border:0;background:none;color:var(--surface);font:inherit;cursor:pointer;touch-action:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.fixture :focus-visible:not(.fixture__range),.fixture:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:999px}.fixture--slider{width:356px;height:56px;left:-178px;top:-28px;display:grid;align-items:center}.fixture__range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;pointer-events:none;outline:none}.fixture__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}.fixture__range::-moz-range-thumb{width:0;height:0;border:0}.fixture--slider:not(.is-pointer-focus):has(.fixture__range:focus-visible){outline:2px solid var(--ink);outline-offset:8px;border-radius:999px}.fixture__groove,.fixture__well{z-index:-1}.fixture__groove{position:absolute;inset:50% 18px auto;height:10px;translate:0 -50%;border-radius:999px;background:var(--well)}.fixture__thumb{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none}.fixture--toggle{width:144px;height:74px;left:-72px;top:-37px}.fixture__well{position:absolute;inset:0;border-radius:999px;background:color-mix(in oklab,var(--track-off, var(--well)),var(--track-on, transparent) calc(var(--track-mix, 0) * 100%));border:1px solid color-mix(in oklab,var(--ink),transparent 88%)}.fixture--dial{width:0;height:0;cursor:default}.fixture__core,.fixture__item{position:absolute;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:none}.fixture__core{width:54px;height:54px;left:-27px;top:-27px;z-index:2;color:var(--ink)}.fixture__cross,.fixture__cross:after{position:absolute;width:15px;height:1.5px;border-radius:2px;background:currentColor}.fixture__cross{transition:rotate .42s cubic-bezier(.2,.9,.2,1.2)}.fixture__cross:after{content:"";inset:0;rotate:90deg}.is-open .fixture__cross{rotate:135deg}.fixture__item{width:38px;height:38px;left:-19px;top:-19px;opacity:0;transition:opacity .24s ease;color:var(--ink)}.is-open .fixture__item{opacity:1}.fixture__icon{width:18px;height:18px;opacity:.5;transition:opacity .2s ease}.fixture__item[aria-selected=true] .fixture__icon{opacity:1}.fixture__item[aria-selected=true]:before{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--ink),transparent 80%)}.fixture--dial:has(.fixture__core:focus-visible) .fixture__item.is-active{outline:2px solid color-mix(in oklab,var(--ink),transparent 45%);outline-offset:3px}.fixture--menu{width:196px;height:48px;left:-98px;top:-24px;cursor:default;--chev-shut: 45deg;--chev-hinge: rotateX(var(--chev-fold, 0deg));--chev-lift: translateY(calc(var(--chev-nudge) * -1));--chev-size: 8px;--chev-stroke: 1.5px;--chev-nudge: calc((var(--chev-size) - var(--chev-stroke)) / 2.8284)}.fixture--menu[data-direction=up]{--chev-shut: -135deg;--chev-lift: translateY(var(--chev-nudge))}.fixture--menu[data-direction=left]{--chev-shut: 135deg;--chev-hinge: rotateY(var(--chev-fold, 0deg));--chev-lift: translateX(var(--chev-nudge))}.fixture--menu[data-direction=right]{--chev-shut: -45deg;--chev-hinge: rotateY(var(--chev-fold, 0deg));--chev-lift: translateX(calc(var(--chev-nudge) * -1))}.fixture__trigger{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.fixture__label{display:grid;justify-items:start}.fixture__label>*{grid-area:1 / 1}.fixture__ghost{pointer-events:none}.fixture__chevron{width:var(--chev-size);height:var(--chev-size);border-right:var(--chev-stroke) solid currentColor;border-bottom:var(--chev-stroke) solid currentColor;transform:perspective(56px) var(--chev-hinge) var(--chev-lift) rotate(var(--chev-shut))}.fixture__panel{position:absolute;left:0;top:0;width:196px;height:auto;display:grid;align-content:start;padding:8px;opacity:0;pointer-events:none}.fixture--menu[data-direction=up] .fixture__panel{align-content:end}.fixture--menu:is([data-direction=left],[data-direction=right]) .fixture__panel{align-content:center}.is-open .fixture__panel{pointer-events:auto}.fixture__option{padding:9px 14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}.fixture__option:hover,.fixture__option.is-active{background:color-mix(in oklab,canvasText,transparent 90%)}.fixture__option[aria-selected=true]{font-weight:600}.is-grabbable{cursor:grab}.is-grabbing,body.is-dragging,body.is-dragging *{cursor:grabbing}body.is-dragging{-moz-user-select:none;user-select:none;-webkit-user-select:none}.readout{position:absolute;left:50%;bottom:max(96px,12vh);translate:-50% 0;text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}.hint{position:absolute;bottom:max(28px,5vh);max-width:min(80ch,100vw - 172px);text-align:center;text-wrap:balance;margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}.hint kbd{font:inherit;color:var(--ink)}.guide-open{position:fixed;left:1rem;bottom:1rem;width:34px;aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid var(--rim);border-radius:50%;background:var(--surface);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;cursor:pointer;opacity:.75;transition:opacity .18s ease}.guide-open:is(:hover,:focus-visible){opacity:1}dialog.guide{max-width:62ch;max-height:min(80vh,720px);margin:auto;padding:2rem 2.25rem 2.5rem;border:1px solid var(--rim);border-radius:14px;background:var(--surface);color:var(--ink);font-size:14px;line-height:1.55;overscroll-behavior:contain}dialog.guide::backdrop{background:color-mix(in oklab,canvas,transparent 25%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.guide h2{margin:0 0 .25rem;font-size:18px}.guide h3{margin:1.75rem 0 .5rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.guide__lede{margin:0 0 .5rem;color:var(--faint)}.guide__note{margin:0 0 .75rem;color:var(--faint)}.guide dl{margin:0;display:grid;gap:.75rem 1rem;grid-template-columns:minmax(9ch,max-content) 1fr}.guide dt{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:var(--ink)}.guide dd{margin:0;color:var(--faint)}.guide em{font-style:normal;color:var(--ink)}.guide__close{position:sticky;top:-2rem;display:flex;justify-content:flex-end;margin:-2rem -2.25rem 0 0}.guide__close button{width:32px;aspect-ratio:1;border:0;border-radius:50%;background:none;color:var(--faint);font-size:20px;line-height:1;cursor:pointer}.guide__close button:is(:hover,:focus-visible){color:var(--ink)}@media(max-width:560px){.guide dl{grid-template-columns:1fr;gap:.25rem}.guide dd{margin-bottom:.75rem}}@media(prefers-reduced-motion:reduce){.fixture__cross,.fixture__item,.fixture__panel,.fixture__well{transition-duration:1ms}}}div.tp-dfwv{position:fixed;z-index:10;top:12px;right:12px;width:280px}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background-color:var(--bs-bg);background-image:linear-gradient(var(--cnt-bg),var(--cnt-bg))}@media(max-width:560px){div.tp-dfwv{width:240px}}