@layer normalize,base,demo,animation,aesthetic,debug;@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 --opened{syntax: "<number>"; inherits: true; initial-value: 0;}@property --closed{syntax: "<number>"; inherits: true; initial-value: 1;}@layer debug{.debug{display:none}[data-debug=true] .drawer__anchors{outline:4px dashed hotpink}[data-debug=true] .drawer__scroller:after{outline:4px dashed hsl(210 80% 70%);background:repeating-linear-gradient(45deg,#0000,#75b3f0,#0000 6px) 0 0 / 100% 100%}[data-debug=true] .drawer__anchor{outline:4px dashed hotpink;background:repeating-linear-gradient(45deg,#0000,#f075c7,#0000 6px) 0 0 / 100% 100%}[data-snap=false] .drawer__scroller{scroll-snap-type:none}[data-content=false] :where(.drawer .content,.reaction-bar,.drawer__drag span:last-of-type){display:none}[data-css=true] .drawer{pointer-events:none;inset:0;display:flex;align-items:flex-end;justify-content:center}[data-css=true] .drawer__content{pointer-events:all}[data-css=true] .drawer__curtain,[data-css=true] .drawer__anchors{opacity:0;pointer-events:none}[data-css=true] .drawer__scroller{scroll-snap-type:none;display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;overflow:hidden}[data-css=true] .drawer__scroller:after{display:none}}@layer aesthetic{:root{--duration: .5s;--ease: cubic-bezier(.32, .72, 0, 1);--drag-bar: 44px;--border: color-mix(in hsl, canvas, canvasText 10%);--highlight: color-mix(in hsl, canvas, canvasText 10%);--drawer: canvas;--color: light-dark( color-mix(in hsl, canvasText, canvas 25%), color-mix(in hsl, canvasText, canvas 5%) )}@supports (light-dark(red,blue)){:root{--drawer: light-dark(#111, #000)}}body{font-family:sans-serif;color:var(--color)}main{align-content:center}.drawer ul{list-style-position:inside;padding:0;display:flex;flex-direction:column;gap:.25rem}main>p{text-wrap:balance;text-align:center;max-width:calc(100% - 2rem)}h1{--font-level: 7;margin:0}.main-open{border-radius:12px;padding:1rem 2rem;border:2px solid var(--border);cursor:pointer}.arrow{font-family:Gloria Hallelujah,cursive;width:100px;position:relative;translate:100% 0;margin-top:2rem;transform-origin:0 0;rotate:5deg}.content{padding:1rem;display:flex;flex-direction:column}.sig{width:25%;align-self:flex-end;rotate:15deg}.drawer a{text-decoration-thickness:2px;text-underline-offset:2px;color:inherit;opacity:var(--active, .75)}.drawer a:is(:hover,:focus-visible){--active: 1}.arrow svg{scale:-1 1}.arrow span{white-space:nowrap;rotate:-20deg;display:inline-block;position:absolute;left:100%;top:100%;translate:-25% 50%}.drawer__content{border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;color:var(--color)}#reaction-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:999999}.reaction-bar{padding:.5rem 1rem;display:flex;flex-direction:column;gap:.5rem;background:var(--drawer);border-top:1px solid var(--border)}button{border-radius:0;color:inherit;-webkit-appearance:none;outline:#0000}main{width:100vw;height:100svh;display:grid;place-items:center}.reactions{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%;overflow:auto}.comment{display:flex;align-items:center;width:100%;gap:.5rem}.comment button{width:44px;height:44px}.comment img{width:32px;height:32px;aspect-ratio:1;border-radius:50%}.reactions button{display:grid;place-items:center;padding:0;width:44px;aspect-ratio:1}.reaction-bar button{display:grid;place-items:center;padding:0;background:#0000;border:0;cursor:pointer;position:relative}.reaction-bar button:before{border-radius:12px;content:"";pointer-events:none;position:absolute;inset:0;background:var(--highlight);opacity:var(--active, 0);z-index:-1;transition:opacity var(--duration) var(--ease)}.reaction-bar button:is(:hover,:focus-visible){--active: 1}.reaction-bar button :is(span,svg){pointer-events:none}.reaction-bar button svg{fill:color-mix(in hsl,canvasText,canvas 25%);width:20px}.reaction-bar input{flex:1;padding:.5rem 1rem;border:0;background:transparent;height:100%;border-radius:12px;transition:background var(--duration) var(--ease)}.reaction-bar input:focus-visible{background:var(--highlight);outline:#0000}.drawer__content{background:var(--drawer)}.drawer__drag span:first-of-type{width:8ch;height:6px;border-radius:10px;background:color-mix(in hsl,canvasText,canvas 75%)}.drawer__drag{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;height:var(--drag-bar);background:#0000;border:0;font-size:.875rem;outline-color:#0000;border-bottom:1px solid var(--border)}.drawer__content{padding-top:var(--drag-bar)}}@layer animation{:root{timeline-scope:--drawer}.drawer__slide{view-timeline:--drawer}.drawer:not([data-snapped=true]){transition-property:display,overlay;transition-behavior:allow-discrete;transition-duration:var(--duration)}.drawer__content{transition-property:translate;transition-duration:var(--duration);transition-timing-function:var(--ease);translate:0 100%}.drawer:popover-open .drawer__content{translate:0 0}@starting-style{.drawer:popover-open .drawer__content{translate:0 100%}}main{transition-property:--opened,--closed;transition-duration:var(--duration);transition-timing-function:var(--ease);transform-origin:50% 0%}:root:has(.drawer:popover-open) main{transition-property:--opened}main{--diff: calc(var(--opened) * var(--closed));--scale-down: .04;--rad: 12px;--ty: calc(env(safe-area-inset-top) + var(--rad));scale:calc(1 - ((var(--opened) * var(--scale-down)) - (var(--diff) * var(--scale-down))));border-radius:calc((var(--opened) * var(--rad)) - (var(--diff) * var(--rad)));translate:0 calc((var(--opened) * var(--ty)) - (var(--diff) * var(--ty)))}:root:has(.drawer:popover-open) main{overflow:hidden;--opened: 1}:root:has(.drawer:popover-open){--closed: 0}@supports (animation-timeline: scroll()){:root:has(.drawer:popover-open){--closed: 1;animation:open both linear reverse;animation-timeline:--drawer;animation-range:entry}@keyframes open{0%{--closed: 0}}}:root:has(.drawer:popover-open),:root:has(.drawer:popover-open) main,.drawer:popover-open{overflow:hidden;overscroll-behavior:none}.drawer::backdrop{transition-property:display,--opened,--closed,overlay;transition-behavior:allow-discrete;transition-duration:var(--duration);transition-timing-function:var(--ease);opacity:calc(var(--opened) - (var(--opened) * var(--closed)))}.drawer:popover-open::backdrop{--opened: 1}@starting-style{.drawer:popover-open::backdrop{--opened: 0}}}@layer demo{.drawer{inset:0;margin:0;width:unset;height:unset;border:0;padding:0;background:transparent;transition:inset var(--duration) var(--ease)}.drawer::backdrop{background:#00000080}[data-dragging=true] .drawer__scroller{scroll-snap-type:none}@media(hover:none)and (pointer:coarse){.drawer__slide:after{content:"";position:absolute;inset:0;background:light-dark(#fff,#000);translate:0 100%}}.drawer__scroller{height:100%;width:100%;flex-direction:column;align-items:center;display:flex;overflow-y:auto;overscroll-behavior:none;scroll-snap-type:y mandatory}.drawer__scroller:after{content:"";width:100%;height:100svh;order:-999999;flex:1 0 100svh}[data-meta=true] .drawer__slide{max-height:calc(95% - (var(--sw-keyboard-height, 0) * 1px))}.drawer__slide{--size: 600px;width:600px;max-height:95%;max-width:100vw;height:var(--size);flex:1 0 var(--size);position:relative}.drawer__anchors{pointer-events:none;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;z-index:10}.drawer__anchor{height:50px;width:100%;scroll-snap-align:end}.drawer__anchor:first-of-type{translate:0 -100%}.drawer__curtain{position:absolute;left:50%;opacity:0;height:100svh;width:100vw;bottom:0;border:0;translate:-50% 0}.drawer__content{width:100%;height:100%;z-index:2;position:absolute}.drawer__content{display:flex;flex-direction:column;justify-content:space-between}.drawer__drag{position:absolute;top:0;width:100%}.content{flex:1;overflow:auto}.reaction-bar{position:sticky;bottom:0;width:100%}:root{--size: 45px;--line: color-mix(in lch, white, transparent 85%);background:#000}}@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{display:grid;place-items:center;min-height:100svh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}main{background:canvas}main:before{--size: 45px;--line: color-mix(in lch, canvasText, transparent 70%);content:"";height:100svh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / 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}.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:280px}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}