@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}}@property --tab-w{syntax: "<length>"; inherits: true; initial-value: 84px;}@layer base{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{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:"";position:fixed;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);pointer-events:none;z-index:-1}.bear-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}.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}}@layer demo{:root{--surface: light-dark(#fff, hsla(240, 6.2391%, 14.094%));--bezel: light-dark(#d9d9d9, hsla(228.78, 4.6321%, 28.604%));--ink: light-dark(#2e2e2e, hsl(230, 7%, 75%));--size: 480px;--gap: 4px;--radius: 12px;--tab: 48px;--tab-open: 126px;--icon: 20px;--icon-fit: min(var(--icon), calc(var(--tab) - 14px));--pad: calc((var(--tab) - var(--icon-fit)) / 2);--depth: 56px;--rx: 50deg;--ry: -10deg;--edge-frame-alpha: .4;--edge-panel-alpha: .4;--edge-frame: light-dark( rgb(0 0 0 / var(--edge-frame-alpha)), rgb(255 255 255 / var(--edge-frame-alpha)) );--edge-panel: light-dark( rgb(0 0 0 / var(--edge-panel-alpha)), rgb(255 255 255 / var(--edge-panel-alpha)) );--duration-reveal: .2s;--duration-swap: .28s;--duration-filter: .4s;--duration-lock: .45s;--duration-motion: .4s;--duration-scene: .6s;--delay-reveal: .16s;--delay-explode: .75s;--delay-explode-pieces: .7s;--out: cubic-bezier(.19, 1, .22, 1);--explode-ink: light-dark(#000, #fff);--pop: cubic-bezier(.34, 1.36, .4, 1);--glide: cubic-bezier(.32, .72, 0, 1);--calm: cubic-bezier( .45, .05, .15, 1 );--settle: linear( 0, .5261 7.4%, .8562 14.4%, 1.0359 22%, 1.0722 28.6%, 1.0489 36.5%, 1.0121 45.9%, .9992 55%, 1 )}main{display:grid;place-items:center;gap:1rem;padding:1rem;transform-style:preserve-3d}.frame{--tab-w: var(--tab);--panel-radius: max(0px, calc(var(--radius) - var(--gap)));--cut: min(var(--radius), calc(var(--tab) / 2));--notch-w: var(--tab-w);--notch-h: var(--tab);position:relative;margin:0;inline-size:min(var(--size),92vw,112svh);aspect-ratio:4 / 3;background:var(--bezel);border-radius:var(--radius);box-shadow:0 0 0 1px var(--edge-frame);transform-style:preserve-3d}.frame:has(.tab:is(:hover,:focus-visible)){--tab-w: var(--tab-open)}.shape{position:absolute;inset:0;z-index:1;pointer-events:none;filter:drop-shadow(0 0 1px var(--edge-panel))}.panel{position:absolute;background:var(--surface)}.corner-slice{display:none}:root[data-tech=corner-shape] .panel{inset:var(--gap) var(--gap) var(--gap) calc(var(--gap) + var(--notch-w));border-radius:var(--cut) var(--panel-radius) var(--panel-radius) 0}:root[data-tech=corner-shape] .corner-slice{position:absolute;display:block;background:var(--surface)}:root[data-tech=corner-shape] .corner-slice--edge{top:calc(var(--gap) + var(--notch-h));bottom:var(--gap);left:var(--gap);inline-size:max(var(--tab),var(--tab-open));border-radius:var(--cut) 0 0 var(--panel-radius)}:root[data-tech=corner-shape] .corner-slice--pocket{top:calc(var(--gap) + var(--notch-h) - var(--cut));left:calc(var(--gap) + var(--notch-w) - var(--cut));inline-size:var(--cut);block-size:var(--cut);border-radius:var(--cut) 0 0 0;corner-shape:superellipse(-1)}:root[data-slice=horizontal][data-tech=corner-shape] .panel{inset:calc(var(--gap) + var(--notch-h)) var(--gap) var(--gap) var(--gap);border-radius:var(--cut) 0 var(--panel-radius) var(--panel-radius)}:root[data-slice=horizontal][data-tech=corner-shape] .corner-slice--edge{top:var(--gap);right:var(--gap);bottom:auto;left:calc(var(--gap) + var(--notch-w));inline-size:auto;block-size:var(--notch-h);border-radius:var(--cut) var(--panel-radius) 0 0}.tab{position:absolute;top:calc(var(--gap) / 2);left:calc(var(--gap) / 2);inline-size:var(--tab-open);-webkit-user-select:none;-moz-user-select:none;user-select:none;block-size:var(--tab);padding-block:0;padding-inline:var(--pad);display:flex;align-items:center;justify-content:flex-start;gap:8px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:Inter,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif}.tab:before{content:"";position:absolute;inset:calc(var(--gap) / -2);border-radius:0 0 var(--cut) 0}.tab:focus-visible{outline:none}.tab:focus-visible:before{outline:2px solid var(--ink);outline-offset:-4px}.lock{flex:none;inline-size:var(--icon-fit);aspect-ratio:1;overflow:visible}.lock .case{fill:var(--ink)}.lock .shackle{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;d:path("M8 11 V7.5 A4 4 0 0 1 16 7.5 V11");transform-box:fill-box;transform-origin:15% 100%;transition:translate var(--duration-lock) var(--settle),rotate var(--duration-lock) var(--settle),d var(--duration-lock) var(--settle)}:root:not([data-locked]) .shackle{d:path("M8 11 V7.5 A4 4 0 0 1 16 7.5 V8.75");translate:0 -3px;rotate:-12deg}:root[data-anim]:not([data-locked]) .lock{animation:pop var(--duration-motion) cubic-bezier(.2,.7,.3,1)}:root[data-anim][data-locked] .lock{animation:clunk var(--duration-motion) cubic-bezier(.2,.7,.3,1)}@keyframes pop{30%{transform:translateY(-1.75px) scale(1.05,.96)}60%{transform:translateY(.25px) scale(.985,1.02)}}@keyframes clunk{30%{transform:translateY(1px) scale(1.05,.93)}60%{transform:translateY(-.5px) scale(.98,1.02)}}.label{display:inline-grid;justify-items:start;text-align:start;font-family:monospace;text-transform:lowercase;opacity:0;filter:blur(3px);translate:-4px 0;color:var(--ink);font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;transition:opacity var(--duration-reveal) var(--out),filter var(--duration-reveal) var(--out),translate var(--duration-reveal) var(--out)}.frame:has(.tab:is(:hover,:focus-visible)) .label{opacity:1;filter:blur(0);translate:0 0;transition-delay:var(--delay-reveal),var(--delay-reveal),0s}.label span{grid-area:1 / 1;transition:translate var(--duration-motion) var(--out),opacity var(--duration-swap) var(--out),filter var(--duration-filter) var(--out)}:root[data-locked] .label span:last-child,:root:not([data-locked]) .label span:first-child{opacity:0;filter:blur(3px)}:root[data-locked] .label span:last-child{translate:0 .45em}:root:not([data-locked]) .label span:first-child{translate:0 -.45em}:root[data-tech=clip] .panel{inset:var(--gap);clip-path:shape(from calc(var(--notch-w) + var(--cut)) 0,hline to calc(100% - var(--panel-radius)),arc to 100% var(--panel-radius) of var(--panel-radius) cw,vline to calc(100% - var(--panel-radius)),arc to calc(100% - var(--panel-radius)) 100% of var(--panel-radius) cw,hline to var(--panel-radius),arc to 0 calc(100% - var(--panel-radius)) of var(--panel-radius) cw,vline to calc(var(--notch-h) + var(--cut)),arc to var(--cut) var(--notch-h) of var(--cut) cw,hline to calc(var(--notch-w) - var(--cut)),arc to var(--notch-w) calc(var(--notch-h) - var(--cut)) of var(--cut) ccw,vline to var(--cut),arc to calc(var(--notch-w) + var(--cut)) 0 of var(--cut) cw,close)}:root[data-tech=mask] .panel{inset:var(--gap);border-radius:0 var(--panel-radius) var(--panel-radius) var(--panel-radius);-webkit-mask:linear-gradient(#fff 0 0) 0 0 / 100% 100% no-repeat,radial-gradient(var(--cut) at 100% 100%,#0000 99%,#fff 100%) 0 var(--notch-h) / var(--cut) var(--cut) no-repeat,radial-gradient(var(--cut) at 100% 100%,#0000 99%,#fff 100%) var(--notch-w) 0 / var(--cut) var(--cut) no-repeat,radial-gradient(var(--cut) at 0 0,#0000 99%,#fff 100%) calc(var(--notch-w) - var(--cut)) calc(var(--notch-h) - var(--cut)) / var(--cut) var(--cut) no-repeat,linear-gradient(#fff 0 0) 0 0 / var(--notch-w) var(--notch-h) no-repeat add;-webkit-mask-composite:source-out,source-over,source-over,xor;mask:linear-gradient(#fff 0 0) 0 0 / 100% 100% no-repeat subtract,radial-gradient(var(--cut) at 100% 100%,#0000 99%,#fff 100%) 0 var(--notch-h) / var(--cut) var(--cut) no-repeat add,radial-gradient(var(--cut) at 100% 100%,#0000 99%,#fff 100%) var(--notch-w) 0 / var(--cut) var(--cut) no-repeat add,radial-gradient(var(--cut) at 0 0,#0000 99%,#fff 100%) calc(var(--notch-w) - var(--cut)) calc(var(--notch-h) - var(--cut)) / var(--cut) var(--cut) no-repeat exclude,linear-gradient(#fff 0 0) 0 0 / var(--notch-w) var(--notch-h) no-repeat add}.panel,.corner-slice,.tab,.frame{transform-style:preserve-3d;outline:2px dashed #0000;outline-offset:2px}.frame{outline-offset:4px}main{pointer-events:none}figure{pointer-events:auto}.shape{transform-style:preserve-3d}.shape--debug{opacity:1}.shape--debug *{outline:none;background:var(--bezel)!important}.shape:not(.shape--debug){filter:none}[data-exploded=true] .shape{pointer-events:none}:root[data-exploded=true] .frame,:root[data-exploded=true] .panel,:root[data-exploded=true] .corner-slice,:root[data-exploded=true] .tab{outline-color:var(--explode-ink)}.frame{transition:--tab-w var(--duration-motion) var(--glide),transform var(--duration-scene) var(--calm) var(--delay-explode),outline-color var(--duration-motion) var(--calm)}.tab,.panel,.corner-slice{transition:translate var(--duration-motion) var(--calm),outline-color var(--duration-motion) var(--calm),opacity var(--duration-motion) var(--calm)}.shape--debug{transition:opacity var(--duration-motion) var(--pop) var(--delay-explode)}:root[data-exploded=true] .frame{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(-28deg) translateZ(calc(var(--depth) * var(--d, -1)));transition:--tab-w var(--duration-motion) var(--glide),transform var(--duration-scene) var(--calm),outline-color var(--duration-motion) var(--calm) var(--delay-explode)}:root[data-exploded=true][data-tech=corner-shape] .frame{--d: -2;transition:--tab-w var(--duration-motion) var(--glide),transform var(--duration-scene) var(--calm),outline-color var(--duration-motion) var(--calm) var(--delay-explode-pieces)}:root[data-exploded=true] .shape--debug{opacity:0;transition:opacity var(--duration-motion) var(--pop)}.shadows{pointer-events:none}.panel.panel--outline{opacity:0}:root[data-tech=clip] .panel.panel--outline{background:repeating-linear-gradient(45deg,red 0 1px,#0000 1px 10px),#0000;border-radius:var(--panel-radius);clip-path:unset;z-index:-1}[data-exploded=true] .panel.panel--outline{transition-delay:var(--delay-explode-pieces);opacity:1}:root[data-exploded=true] .panel,:root[data-exploded=true] .corner-slice,:root[data-exploded=true] .tab{translate:0 0 calc(var(--depth) * var(--d, 0));transition:translate var(--duration-motion) var(--pop) var(--delay-explode-pieces),outline-color var(--duration-motion) var(--pop) var(--delay-explode-pieces),opacity var(--duration-motion) var(--pop) var(--delay-explode-pieces)}:root[data-exploded=true][data-tech=corner-shape] .tab{--d: 1}:root[data-exploded=true][data-tech=corner-shape] .panel{--d: 4}:root[data-exploded=true][data-tech=corner-shape] .corner-slice--edge{--d: 2}:root[data-exploded=true][data-tech=corner-shape] .corner-slice--pocket{--d: 3}:root[data-exploded=true][data-tech=clip] .tab,:root[data-exploded=true][data-tech=mask] .tab{--d: 1}:root[data-exploded=true][data-tech=clip] .panel,:root[data-exploded=true][data-tech=mask] .panel{--d: 2}.shadows{--bezel: #000;height:100%;width:100%}.shadows *{outline:none!important}.shadows .shape--debug{filter:none;opacity:1!important}.shadows .shape--debug *{background:#111}.shadows .tab rect{fill:#111}.shadows .tab path{stroke:#111}.shadows .tab .label{color:#111}.shadows{overflow:hidden}[data-tech=corner-shape] .shadows .shape--debug:not(.shape--debug-panel) .panel{clip-path:inset(0 calc(100% - (var(--tab-open) + var(--radius))) calc(100% - var(--tab)) 0)}[data-tech=corner-shape] .shadows .shape--debug:not(.shape--debug-panel){clip-path:inset(0 calc(100% - (var(--tab-open) + var(--radius))) 0 0)}[data-tech=clip] .shape--debug-panel{display:none}.shadows .shape--debug :is(.panel,.corder-slice--pocket,.corner-slice--edge){opacity:1;transition:filter var(--duration-motion) var(--calm),opacity var(--duration-motion) var(--calm)}.shadows .shape--debug-panel{clip-path:inset(0 0 0 var(--tab-open))}.shadows .shape--debug-panel .panel{background:#111!important;filter:blur(0px);opacity:1}[data-exploded=true] .shadows .shape--debug .corner-slice--edge{opacity:.5;filter:blur(4px);transition:filter var(--duration-motion) var(--pop) var(--delay-explode-pieces),opacity var(--duration-motion) var(--pop) var(--delay-explode-pieces)}[data-exploded=true] .shadows .shape--debug .corner-slice--pocket{opacity:.4;filter:blur(4px);transition:filter var(--duration-motion) var(--pop) var(--delay-explode-pieces),opacity var(--duration-motion) var(--pop) var(--delay-explode-pieces)}[data-exploded=true] .shadows .shape--debug .panel{opacity:.2;filter:blur(4px);transition:filter var(--duration-motion) var(--pop) var(--delay-explode-pieces),opacity var(--duration-motion) var(--pop) var(--delay-explode-pieces)}[data-exploded=true] .shadows .shape--debug-panel .panel{opacity:.2;filter:blur(4px);transition:filter var(--duration-motion) var(--pop) var(--delay-explode-pieces),opacity var(--duration-motion) var(--pop) var(--delay-explode-pieces)}}div.tp-dfwv{--bs-br: 8px;width:280px;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}