@layer catch-up,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}}@property --fade-start{syntax: "<number>"; inherits: false; initial-value: 0;}@property --fade-end{syntax: "<number>"; inherits: false; initial-value: 0;}@property --field-y{syntax: "<number>"; inherits: true; initial-value: 0;}@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}.bear-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.x-link,.bear-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.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{z-index:9999;width:256px;position:fixed}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 demo{:root{--accent: hsl(150 35% 34%);--surface: light-dark(hsl(90 10% 98%), hsl(150 8% 10%));--frost: light-dark(hsl(0 0% 100% / .42), hsl(205 30% 9% / .42));--frost-strong: light-dark(hsl(0 0% 100% / .72), hsl(205 30% 11% / .72));--ink: light-dark(hsl(205 30% 10%), hsl(0 0% 98%));--rim-top: light-dark(hsl(0 0% 100% / .85), hsl(0 0% 100% / .35));--rim-bottom: light-dark(hsl(0 0% 100% / .2), hsl(0 0% 100% / .08));--shade: 205 60% 6%;--accent-ink: light-dark(var(--accent), color-mix(in oklch, var(--accent), white 40%));--note: hsl(0 0% 100%)}[data-slide=fern]{--accent: hsl(98 55% 32%)}[data-slide=mist]{--accent: hsl(168 25% 34%)}[data-slide=light]{--accent: hsl(75 50% 32%)}[data-slide=canopy]{--accent: hsl(138 40% 30%)}::-moz-selection{background:var(--accent);color:#fff}::selection{background:var(--accent);color:#fff}body{background:#0e1c20}.backdrop{--fade: 1.8s;--hold: 9s;position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0b0c0c}.backdrop img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:0;transition:opacity var(--fade) ease}.backdrop img[data-active]{opacity:1}.backdrop__grid{--size: 45px;--line: hsl(0 0% 100% / .14);position:absolute;inset:0;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);opacity:0;transition:opacity .6s ease}:root:is([data-notes=true],[data-backdrop=grid]) .backdrop img{opacity:0}:root:is([data-notes=true],[data-backdrop=grid]) .backdrop__grid{opacity:1}main{position:fixed;top:round(down,50%,1px);left:50%;width:min(480px,100vw - 2rem);height:0;translate:-50% 0}.ask{--inset: .5rem;--tool: 2rem;--tool-radius: .625rem;--gap: .375rem;--border: 1.5px;--radius: calc(var(--tool-radius) + var(--inset) + var(--border));--text-x: 1rem;--stack-top: .75rem;--row-gap: .75rem;--stack-bottom: calc(var(--row-gap) + var(--tool) + var(--inset));--max-lines: 8;--text-top: var(--stack-top);--text-bottom: var(--stack-bottom);--scroll-gap: .375rem;--rest: calc( var(--stack-top) + 1.6em + var(--stack-bottom) + var(--border) * 2 );position:absolute;top:round(calc(var(--rest) * -.5),1px);inset-inline:0;color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:.9375rem;font-optical-sizing:auto}.ask[data-layout=pill]{--text-top: calc((var(--tool) + var(--inset) * 2 - 1lh) * .5);--text-bottom: var(--text-top)}.greeting{position:absolute;inset-inline:0;bottom:calc(100% + 1.5rem);margin:0;font-family:"Instrument Serif",Iowan Old Style,Georgia,serif;font-size:clamp(2.5rem,1.75rem + 3vw,3.75rem);font-weight:400;line-height:1;letter-spacing:-.01em;text-align:center;color:#fff;pointer-events:none}.greeting:before{content:"";position:absolute;inset:-2em -3.5em;z-index:-1;background:radial-gradient(closest-side,hsl(var(--shade) / .32),transparent 90%);-webkit-backdrop-filter:blur(12px) brightness(.85);backdrop-filter:blur(12px) brightness(.85);-webkit-mask:radial-gradient(closest-side,#000 15%,transparent);mask:radial-gradient(closest-side,#000 15%,transparent);transition:opacity .4s ease}.greeting__text{display:inline-block;text-shadow:0 1px 2px hsl(var(--shade) / .3),0 2px 12px hsl(var(--shade) / .3),0 6px 48px hsl(var(--shade) / .45);transition:opacity .4s ease,translate .5s cubic-bezier(.16,1,.3,1),filter .4s ease}.greeting em{font-style:italic}.ask[data-typed] .greeting:before{opacity:0}.ask[data-typed] .greeting__text{opacity:0;translate:0 -.35em;filter:blur(8px)}.ask:before{content:"";position:absolute;inset:22% 6% -.875rem;border-radius:var(--radius);background:hsl(var(--shade) / .5);filter:blur(20px);pointer-events:none}.grow{border:var(--border) solid transparent;border-radius:var(--radius);background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:0 0 0 .5px hsl(var(--shade) / .22),0 1px 1px hsl(var(--shade) / .14),0 2px 5px -1px hsl(var(--shade) / .16)}.ask[data-surface=solid] .grow{background:linear-gradient(var(--surface) 0 0) padding-box}.grow:focus-within{--frost: light-dark(hsl(0 0% 100% / .55), hsl(205 30% 9% / .55));--rim-top: light-dark(hsl(0 0% 100% / 1), hsl(0 0% 100% / .5))}.grow:before{content:"";position:absolute;inset:0;z-index:3;padding:1px;border-radius:inherit;background:linear-gradient(to bottom,var(--rim-top),var(--rim-bottom) 45%,var(--rim-bottom) 80%,light-dark(hsl(0 0% 100% / .45),hsl(0 0% 100% / .16)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}.ask:after{content:"";position:absolute;inset:0;padding:2.5px;border-radius:var(--radius);-webkit-backdrop-filter:saturate(2.8) brightness(1.12);backdrop-filter:saturate(2.8) brightness(1.12);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}.grow:defined{container-type:size}.grow textarea{width:100%;min-height:calc(var(--text-top) + 1lh + var(--text-bottom));max-height:min(calc(var(--text-top) + var(--max-lines) * 1lh + var(--text-bottom)),60dvh);margin:0;padding:calc(var(--text-top) - var(--scroll-gap)) calc(var(--text-x) - var(--scroll-gap)) 0 var(--text-x);border:0 solid transparent;border-width:var(--scroll-gap) var(--scroll-gap) var(--text-bottom) 0;background:transparent;color:inherit;caret-color:var(--accent-ink);font:inherit;line-height:1.6;outline:none;--fade: 1.5rem;-webkit-mask:linear-gradient(#000 0 0) 0 0 / 100% calc(100cqh - var(--text-bottom)),linear-gradient(#000,#0000) top / 100% calc(var(--fade-start) * var(--fade)),linear-gradient(#000 0 0),linear-gradient(#0000,#000) bottom / 100% calc(var(--fade-end) * var(--fade));mask:linear-gradient(#000 0 0) 0 0 / 100% calc(100cqh - var(--text-bottom)),linear-gradient(#000,#0000) top / 100% calc(var(--fade-start) * var(--fade)),linear-gradient(#000 0 0),linear-gradient(#0000,#000) bottom / 100% calc(var(--fade-end) * var(--fade));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-origin:border-box,padding-box,border-box,padding-box;mask-origin:border-box,padding-box,border-box,padding-box;-webkit-mask-clip:border-box,padding-box,border-box,padding-box;mask-clip:border-box,padding-box,border-box,padding-box;-webkit-mask-composite:source-in,xor,xor,source-over,xor;mask-composite:intersect,exclude,exclude,add;scroll-padding-block:var(--fade);scrollbar-width:thin;scrollbar-color:color-mix(in oklch,var(--ink),transparent 72%) transparent}@supports (animation-timeline: scroll()){.grow textarea{animation:fade-start linear both,fade-end linear both;animation-timeline:scroll(self);animation-range:0 var(--fade),calc(100% - var(--fade)) 100%}@keyframes fade-start{to{--fade-start: 1}}@keyframes fade-end{0%{--fade-end: 1}to{--fade-end: 0}}}.ask[data-layout=pill] textarea{padding-inline:calc(var(--inset) + var(--tool) + var(--gap) * 2) calc(var(--inset) + var(--tool) * 2 + var(--gap) * 3 - var(--scroll-gap))}.measure{grid-area:1 / 1;align-self:start;position:relative;overflow:hidden}.measure:before{content:"";position:absolute;top:0;left:0;width:1px;height:1px;view-timeline:--field block;pointer-events:none}.grow textarea{display:block;field-sizing:content;resize:none}@keyframes field-y{to{--field-y: 1}}@supports (animation-timeline: --field){.ask{timeline-scope:--field;animation:field-y linear;animation-timeline:--field;animation-range:entry 100% exit 100%}}.ask[data-mechanism=css] .grow{box-sizing:content-box;height:calc(1px*round(1 / (1 - var(--field-y))))}.grow textarea::-moz-placeholder{color:color-mix(in oklch,var(--ink),transparent 50%)}.grow textarea::placeholder{color:color-mix(in oklch,var(--ink),transparent 50%)}.tools{position:absolute;inset:auto 0 0;z-index:2;padding:var(--row-gap) var(--inset) var(--inset);display:flex;justify-content:space-between;align-items:center;pointer-events:none}.tools__start,.tools__end{display:flex;align-items:center;gap:var(--gap);pointer-events:auto}.tool{position:relative;display:grid;place-items:center;width:var(--tool);height:var(--tool);padding:0;border:0;border-radius:var(--tool-radius);background:transparent;color:color-mix(in oklch,var(--ink),transparent 30%);cursor:pointer;transition:background-color .2s,color .2s,scale .2s cubic-bezier(.16,1,.3,1)}.tool:hover,.tool:has(:focus-visible),.tool:focus-visible{background:color-mix(in oklch,var(--ink),transparent 91%);color:var(--ink)}.tool:focus-visible,.tool:has(:focus-visible){outline:2px solid var(--accent-ink);outline-offset:1px}.tool:active{scale:.9}.tool svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.send{background:color-mix(in oklch,var(--ink),transparent 90%);color:color-mix(in oklch,var(--ink),transparent 55%);pointer-events:none}.ask:has(textarea:not(:-moz-placeholder)) .send{background:var(--ink);color:light-dark(white,hsl(205 30% 10%));box-shadow:inset 0 1px #fff3,0 1px 2px hsl(var(--shade) / .3),0 4px 10px -4px hsl(var(--shade) / .4);pointer-events:auto}.ask:has(textarea:not(:placeholder-shown)) .send{background:var(--ink);color:light-dark(white,hsl(205 30% 10%));box-shadow:inset 0 1px #fff3,0 1px 2px hsl(var(--shade) / .3),0 4px 10px -4px hsl(var(--shade) / .4);pointer-events:auto}.send svg{stroke-width:2.25}.model{height:var(--tool);padding:0 1.75rem 0 .75rem;border:0;border-radius:var(--tool-radius);background:color-mix(in oklch,var(--ink),transparent 92%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .5rem center / .875rem;color:var(--ink);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background-color .2s,opacity .25s,translate .35s cubic-bezier(.16,1,.3,1)}.model:hover{background-color:color-mix(in oklch,var(--ink),transparent 86%)}.model:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}.ask[data-layout=pill] .model{position:absolute;opacity:0;translate:0 .5rem;pointer-events:none;visibility:hidden}@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){.model,.model::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}.model{display:flex;align-items:center;gap:.25rem;padding-inline:.75rem .5rem;background-image:none}.model::picker-icon{content:"";width:.875rem;height:.875rem;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;rotate:none;transition:none}.model selectedcontent :is(.model__sep,.model__desc),.model option .model__sep{display:none}.model::picker(select){position-area:block-end span-inline-end;position-try-order:normal;position-try-fallbacks:flip-block;min-width:12rem;margin-block:.5rem;padding:.375rem;border:0;border-radius:1.125rem;background:var(--frost-strong);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 1px 0 var(--rim-top),0 0 0 .5px hsl(var(--shade) / .2),0 2px 6px -2px hsl(var(--shade) / .2),0 18px 40px -12px hsl(var(--shade) / .5);color:var(--ink);opacity:1;translate:0 0;transition:opacity .2s ease,translate .25s cubic-bezier(.16,1,.3,1),display .25s allow-discrete,overlay .25s allow-discrete}.model:not(:open)::picker(select){opacity:0;translate:0 -.25rem}@starting-style{.model:open::picker(select){opacity:0;translate:0 -.25rem}}.model option{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .625rem;border-radius:.75rem;font-size:.875rem}.model option:is(:hover,:focus-visible){background:color-mix(in oklch,var(--ink),transparent 91%);outline:none}.model option::checkmark{order:1;margin-inline-start:auto;color:var(--accent-ink)}.model__desc{opacity:.55;font-size:.8125rem}}.ruler{--note: hsl(0 0% 100%);--tick: .625rem;position:absolute;top:0;width:var(--tick);color:var(--note);pointer-events:none;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s .2s}[data-notes=true] .ruler{visibility:visible;opacity:1;transition:opacity .2s ease}.ruler--field{--note: hsl(48 96% 70%);right:calc(100% + .875rem);height:var(--field-height, 100%);background:repeating-linear-gradient(currentColor 0 5px,transparent 5px 10px) center / 2px 100% no-repeat}.ruler--box{left:calc(100% + .875rem);height:100%;background:linear-gradient(currentColor 0 0) center / 2px 100% no-repeat}.ruler:before,.ruler:after{content:"";position:absolute;inset-inline:0;height:2px;background:currentColor}.ruler:before{top:0}.ruler:after{bottom:0}.note{--s: .85;position:absolute;left:50%;width:0;height:0;font-family:Nanum Pen Script,Bradley Hand,Segoe Print,cursive;font-size:clamp(1.25rem,.9rem + 1.4vw,2rem);line-height:1.05;text-shadow:0 1px 6px hsl(var(--shade) / .5)}.note--field{--i: 0;top:-.5rem}.note--box{--i: 1;bottom:-.5rem}.note__arrow{position:absolute;left:calc(-4px * var(--s));top:calc(-80px * var(--s));width:calc(96px * var(--s));height:calc(84px * var(--s));overflow:visible;transform-origin:calc(4px * var(--s)) calc(80px * var(--s));fill:none;stroke:currentColor;stroke-width:calc(2.5 / var(--s));stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px hsl(var(--shade) / .4))}.note--box .note__arrow{scale:-1 -1}.note__shaft,.note__head{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .2s}[data-notes=true] .note__shaft{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.55,0,.35,1) calc(.15s + var(--i) * .15s)}[data-notes=true] .note__head{stroke-dashoffset:0;transition:stroke-dashoffset .15s ease-out calc(.58s + var(--i) * .15s)}.note__text{position:absolute;width:-moz-max-content;width:max-content;max-width:14em;margin:0;text-wrap:balance}.note--field .note__text{bottom:calc(84px * var(--s));left:0}.note--box .note__text{top:calc(84px * var(--s));right:0;text-align:right}.note__text strong{display:block;font-weight:400;font-size:1.15em}[data-speed] b{display:inline-block;font-weight:400;animation:speed-in .35s ease-out}[data-speed] s{position:relative;text-decoration:none;opacity:.6}[data-speed] s:after{content:"";position:absolute;inset-inline:-.15em;top:50%;height:.09em;border-radius:1em;background:currentColor;rotate:-6deg;transform-origin:left;animation:strike .3s ease-out}@keyframes strike{0%{scale:0 1}}@keyframes speed-in{0%{opacity:0;translate:0 .25em}}.note__text small{display:block;margin-top:.2em;font-size:.85em;font-variant-numeric:tabular-nums;opacity:.8}[data-notes=true] .greeting:before,[data-notes=true] .greeting__text{opacity:0}@media not (min-width:60rem){.ruler{--tick: .375rem}.ruler--field{right:calc(100% + .3125rem)}.ruler--box{left:calc(100% + .3125rem)}.note{--s: .55}}.bear-link{color:#fff;filter:drop-shadow(0 1px 2px hsl(0 0% 0% / .3))}}