@property --umx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}.demo-uimaxxing{--paper:#fafaf8;--ink:#0e0e0d;--mid:#6c6c68;--faint:#6d6d69;--line:#e3e3df;--like:#c0564e;--cardr:17px;--navr:20px;--serif:"Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;--grotesk:"Helvetica Neue", Helvetica, Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--rainbow:conic-gradient(from var(--umx-ang), #ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #bf5af2, #ff2d55);background:var(--paper);width:100%;height:640px;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;isolation:isolate;border-radius:6px;position:relative;overflow:hidden;container-type:inline-size}.demo-uimaxxing *,.demo-uimaxxing :before,.demo-uimaxxing :after{box-sizing:border-box}.demo-uimaxxing button{font:inherit;color:inherit;margin:0}.demo-uimaxxing h2,.demo-uimaxxing h3,.demo-uimaxxing p{margin:0}.demo-uimaxxing .umx-scroll{overscroll-behavior:contain;padding-bottom:60px;position:absolute;inset:0;overflow-y:auto}.demo-uimaxxing .umx-navwrap{z-index:30;pointer-events:none;justify-content:center;display:flex;position:sticky;top:0}.demo-uimaxxing nav{pointer-events:auto;border-radius:0 0 var(--navr) var(--navr);background:var(--ink);align-items:center;gap:6px;max-width:calc(100% - 52px);padding:9px 9px 9px 15px;display:flex;position:relative}.demo-uimaxxing nav:before,.demo-uimaxxing nav:after{content:"";width:var(--navr);height:var(--navr);pointer-events:none;position:absolute;top:0}.demo-uimaxxing nav:before{left:calc(var(--navr) * -1);background:radial-gradient(circle at 0 100%, transparent 0 var(--navr), var(--ink) var(--navr))}.demo-uimaxxing nav:after{right:calc(var(--navr) * -1);background:radial-gradient(circle at 100% 100%, transparent 0 var(--navr), var(--ink) var(--navr))}.demo-uimaxxing .umx-brand{cursor:pointer;background:0 0;border:0;border-radius:9px;flex:none;place-items:center;width:44px;height:36px;margin-right:8px;padding:0;display:grid}.demo-uimaxxing .umx-mark{background:#fff;width:25px;height:19px;display:block;-webkit-mask:url(/work/uimaxxing/demo/logo.svg) 50%/contain no-repeat;mask:url(/work/uimaxxing/demo/logo.svg) 50%/contain no-repeat}.demo-uimaxxing .umx-links{scrollbar-width:none;align-items:center;gap:3px;min-width:0;display:flex;overflow-x:auto}.demo-uimaxxing .umx-links::-webkit-scrollbar{display:none}.demo-uimaxxing .umx-links button{font-family:var(--grotesk);color:#ffffff85;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:9px;flex:none;padding:7px 11px;font-size:13.5px;font-weight:400;transition:color .18s,background .18s}.demo-uimaxxing .umx-links button:hover{color:#fff;background:#ffffff12}.demo-uimaxxing .umx-links button.here{color:#fff;background:#ffffff1f}.demo-uimaxxing .umx-links button:focus-visible,.demo-uimaxxing .umx-brand:focus-visible{outline-offset:-2px;outline:2px solid #fff}.demo-uimaxxing .umx-randwrap{isolation:isolate;border-radius:13px;flex:none;margin-left:10px;padding:2px;display:inline-flex;position:relative}.demo-uimaxxing .umx-randwrap:before,.demo-uimaxxing .umx-randwrap:after{content:"";background:var(--rainbow);opacity:0;border-radius:13px;transition:opacity .28s;position:absolute}.demo-uimaxxing .umx-randwrap:before{z-index:1;inset:0}.demo-uimaxxing .umx-randwrap:after{filter:blur(12px);z-index:0;border-radius:17px;inset:-5px}.demo-uimaxxing .umx-randwrap:hover:before,.demo-uimaxxing .umx-randwrap:focus-within:before{opacity:1}.demo-uimaxxing .umx-randwrap:hover:after,.demo-uimaxxing .umx-randwrap:focus-within:after{opacity:.8}.demo-uimaxxing .umx-randwrap:hover:before,.demo-uimaxxing .umx-randwrap:hover:after{animation:3.2s linear infinite umx-spin}@keyframes umx-spin{to{--umx-ang:360deg}}.demo-uimaxxing .umx-rand{z-index:2;min-height:36px;font-family:var(--grotesk);color:var(--ink);white-space:nowrap;cursor:pointer;background:#fff;border:0;border-radius:11px;padding:9px 17px;font-size:13.5px;font-weight:600;position:relative}.demo-uimaxxing .umx-rand:focus-visible{outline:none}.demo-uimaxxing .umx-main{width:min(1440px,90cqw);margin:0 auto}.demo-uimaxxing .umx-section{margin-top:30px}.demo-uimaxxing .umx-sect{border:0;border-top:1px solid var(--line);width:100%;font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);text-align:center;cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:14px;padding:26px 0;font-size:36px;font-weight:400;display:flex}.demo-uimaxxing .umx-section:first-child{margin-top:18px}.demo-uimaxxing .umx-section:first-child .umx-sect{border-top:0}.demo-uimaxxing .umx-ct{color:var(--faint);font-size:17px}.demo-uimaxxing .umx-num{text-align:right;font-variant-numeric:tabular-nums;display:inline-block}.demo-uimaxxing .umx-chev{color:var(--faint);flex:none;transition:transform .3s cubic-bezier(.2,.7,.3,1),color .2s}.demo-uimaxxing .umx-sect:hover .umx-chev{color:var(--ink)}.demo-uimaxxing .umx-sect[aria-expanded=false] .umx-chev{transform:rotate(180deg)}.demo-uimaxxing .umx-sect[aria-expanded=false]{padding-bottom:12px}.demo-uimaxxing .umx-sect:focus-visible{outline:1px solid var(--ink);outline-offset:6px}.demo-uimaxxing .umx-grid{grid-template-columns:repeat(3,1fr);gap:40px 28px;display:grid}.demo-uimaxxing .umx-grid[hidden]{display:none}.demo-uimaxxing .umx-work{min-width:0;color:inherit;isolation:isolate;text-decoration:none;display:block;position:relative}.demo-uimaxxing .umx-card{border-radius:var(--cardr);border:1px solid var(--line);--ring:conic-gradient(from var(--umx-ang), #d6d6d0, #efefea, #c7c7c0, #eaeae4, #d2d2cb, #efefea, #d6d6d0);background:linear-gradient(170deg,#f3f3f0,#fcfcfa 62%);padding:11px;transition:border-color .25s,transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;display:block;position:relative}.demo-uimaxxing .umx-card img{background:#efefec;border-radius:9px;width:100%;height:auto;display:block}.demo-uimaxxing .umx-work:hover .umx-card{border-color:#b8b8b1;transform:translateY(-3px);box-shadow:0 12px 30px #0e0e0d21,0 3px 10px #0e0e0d12}.demo-uimaxxing .umx-card:before,.demo-uimaxxing .umx-card:after{content:"";pointer-events:none;background:var(--ring);opacity:0;transition:opacity .5s;position:absolute}.demo-uimaxxing .umx-card:before{border-radius:calc(var(--cardr) + 2px);z-index:-1;inset:-2px}.demo-uimaxxing .umx-card:after{border-radius:calc(var(--cardr) + 9px);filter:blur(13px);z-index:-2;inset:-9px}.demo-uimaxxing .umx-work.picked .umx-card{box-shadow:none;--ring:var(--rainbow);border-color:#0000;transition:border-color .25s,box-shadow .35s;transform:none}.demo-uimaxxing .umx-work.picked .umx-card:before,.demo-uimaxxing .umx-work.picked .umx-card:after{opacity:0;transition:none}.demo-uimaxxing .umx-work.picked .umx-card:before{border-radius:calc(var(--cardr) + 3px);animation:2.4s linear infinite umx-spin,2.1s forwards umx-pick-ring;inset:-3px}.demo-uimaxxing .umx-work.picked .umx-card:after{border-radius:calc(var(--cardr) + 12px);filter:blur(16px);animation:2.4s linear infinite umx-spin,2.1s forwards umx-pick-glow;inset:-12px}@keyframes umx-pick-ring{0%{opacity:0}7%{opacity:1}55%{opacity:1}to{opacity:0}}@keyframes umx-pick-glow{0%{opacity:0}7%{opacity:.62}55%{opacity:.62}to{opacity:0}}.demo-uimaxxing .umx-work:focus-visible{outline:none}.demo-uimaxxing .umx-work:focus-visible .umx-card{outline:1px solid var(--ink);outline-offset:4px}.demo-uimaxxing .umx-cap{flex-wrap:wrap;align-items:baseline;gap:2px 11px;padding-top:14px;font-size:16px;line-height:1.4;display:flex}.demo-uimaxxing .umx-cap u{font-family:var(--mono);letter-spacing:.02em;color:var(--faint);flex:none;font-size:11px;text-decoration:none}.demo-uimaxxing .umx-work.saved .umx-cap u{color:var(--ink)}.demo-uimaxxing .umx-work.saved .umx-cap u:after{content:"•";margin-left:3px}.demo-uimaxxing .umx-cap b{white-space:nowrap;font-weight:600}.demo-uimaxxing .umx-cap em{color:var(--mid);flex:0 0 100%;order:3;font-style:normal}.demo-uimaxxing .umx-cap i{font-style:normal;font-family:var(--mono);color:var(--faint);white-space:nowrap;flex:none;order:2;margin-left:auto;font-size:11.5px}.demo-uimaxxing .umx-work:hover .umx-cap i{color:var(--ink)}.demo-uimaxxing .umx-sheet{z-index:80;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.demo-uimaxxing .umx-veil{-webkit-backdrop-filter:blur(14px)saturate(1.1);backdrop-filter:blur(14px)saturate(1.1);background:#0e0e0d52;animation:.28s both umx-fade;position:absolute;inset:0}.demo-uimaxxing .umx-glass{-webkit-backdrop-filter:blur(26px)saturate(1.6);backdrop-filter:blur(26px)saturate(1.6);background:#fafaf89e;border:1px solid #ffffff8c;border-radius:22px;width:min(520px,100%);max-height:100%;padding:12px;animation:.34s cubic-bezier(.2,.7,.3,1) both umx-rise;position:relative;overflow-y:auto;box-shadow:0 26px 70px #0e0e0d57,inset 0 1px #ffffffb3}.demo-uimaxxing .umx-glass:focus{outline:none}@keyframes umx-fade{0%{opacity:0}}@keyframes umx-rise{0%{opacity:0;transform:translateY(14px)scale(.985)}}.demo-uimaxxing .umx-glass img{background:#efefec;border-radius:14px;width:100%;height:auto;display:block}.demo-uimaxxing .umx-x{color:#fff;cursor:pointer;background:#0e0e0d73;border:0;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;line-height:1;display:flex;position:absolute;top:22px;right:22px}.demo-uimaxxing .umx-x:before{content:"";position:absolute;inset:-6px}.demo-uimaxxing .umx-x:hover{background:#0e0e0dc7}.demo-uimaxxing .umx-x:focus-visible{outline-offset:2px;outline:2px solid #fff}.demo-uimaxxing .umx-shtxt{flex-wrap:wrap;align-items:baseline;gap:0 11px;padding:17px 4px 0;display:flex}.demo-uimaxxing .umx-shtxt u{font-family:var(--mono);letter-spacing:.02em;color:var(--mid);font-size:11px;text-decoration:none}.demo-uimaxxing .umx-shtxt h3{font-family:var(--serif);letter-spacing:-.01em;font-size:23px;font-weight:600}.demo-uimaxxing .umx-shtxt p{color:var(--mid);font-size:17px}.demo-uimaxxing .umx-shtxt i{font-style:normal;font-family:var(--mono);color:var(--faint);flex-basis:100%;margin-top:6px;font-size:11.5px}.demo-uimaxxing .umx-shact{gap:14px;padding:18px 0 0;display:flex}.demo-uimaxxing .umx-go,.demo-uimaxxing .umx-save{font-family:var(--grotesk);cursor:pointer;border:1px solid #0000;border-radius:12px;padding:13px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:background .34s,color .34s,border-color .34s}.demo-uimaxxing .umx-go{background:var(--ink);color:#fff;flex:1;justify-content:center;align-items:center;gap:9px;display:inline-flex}.demo-uimaxxing .umx-go:hover{background:#0a84ff}.demo-uimaxxing .umx-save{color:var(--ink);background:#fff;border-color:#0e0e0d38;flex:none;justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.demo-uimaxxing .umx-save:hover{border-color:#0e0e0d73}.demo-uimaxxing .umx-save svg{fill:none;transition:fill .18s,stroke .18s}.demo-uimaxxing .umx-save[aria-pressed=true] svg{fill:var(--like);stroke:var(--like)}.demo-uimaxxing .umx-go:focus-visible,.demo-uimaxxing .umx-save:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@container (max-width:1100px){.demo-uimaxxing .umx-grid{grid-template-columns:1fr 1fr}}@container (max-width:640px){.demo-uimaxxing{--cardr:11px}.demo-uimaxxing .umx-main{width:auto;margin:0 16px}.demo-uimaxxing nav{gap:2px;max-width:calc(100% - 40px);padding:7px 7px 7px 8px}.demo-uimaxxing .umx-brand{width:36px;margin-right:2px}.demo-uimaxxing .umx-links button{min-height:44px;padding:7px 9px}.demo-uimaxxing .umx-randwrap{margin-left:4px}.demo-uimaxxing .umx-rand{min-height:44px;padding:9px 12px}.demo-uimaxxing .umx-sect{padding:20px 0;font-size:28px}.demo-uimaxxing .umx-grid{grid-template-columns:1fr;gap:30px}.demo-uimaxxing .umx-card{padding:8px}.demo-uimaxxing .umx-cap{gap:3px 10px;font-size:15px}.demo-uimaxxing .umx-sheet{padding:12px}.demo-uimaxxing .umx-glass{border-radius:18px}.demo-uimaxxing .umx-x{top:18px;right:18px}}@media (max-width:640px){.demo-uimaxxing{height:620px}}@media (prefers-reduced-motion:reduce){.demo-uimaxxing .umx-randwrap:hover:before,.demo-uimaxxing .umx-randwrap:hover:after{animation:none}.demo-uimaxxing .umx-work:hover .umx-card{transform:none}.demo-uimaxxing .umx-card:before,.demo-uimaxxing .umx-card:after{animation:none!important}.demo-uimaxxing .umx-work.picked .umx-card:before,.demo-uimaxxing .umx-work.picked .umx-card:after{transition:opacity .6s}.demo-uimaxxing .umx-work.picked .umx-card:before{opacity:1}.demo-uimaxxing .umx-work.picked .umx-card:after{opacity:.62}.demo-uimaxxing .umx-veil,.demo-uimaxxing .umx-glass{animation:none}}