body,h1,h2,h3,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,pre,input,button,fieldset{padding:0;margin:0}*{flex-shrink:0}html{height:100%}body{min-height:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,button,textarea,select{font:inherit}button{-webkit-appearance:button}a,select:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}img{display:block}:root{--surface-0: rgb(242, 241, 245);--surface-1: rgb(255, 255, 255);--surface-2: rgba(252, 252, 252, .85);--surface-2-shadow: rgba(0, 0, 0, .06);--surface-ui-regular: rgba(168, 150, 182, .18);--surface-ui-accent: rgba(148, 136, 254, .2);--surface-ui-danger: rgba(255, 141, 177, .2);--surface-badge: rgba(51, 51, 51, .85);--text-primary: rgb(0, 0, 0);--text-secondary: rgb(111, 111, 111);--text-note: rgb(206, 206, 206);--text-badge: rgb(255, 255, 255);--chess: rgb(235, 235, 235);--ui-bg: rgba(168, 150, 182, .18);--ui-border: rgba(158, 158, 158, .2);--accent: rgb(114, 96, 218);--danger: rgb(226, 18, 101);--border-p3: rgba(255, 255, 255, .5);--border-rec2020: rgba(255, 255, 255, .75)}@font-face{src:url(https://pub.user-owns-data.net/corp/design-system/webfonts/FiraCode-VF.woff2) format("woff2-variations");font-style:normal;font-weight:300 700;font-display:swap;font-named-instance:Regular;font-family:Fira Code}:root{--radius: 12px;--opacity-pattern: repeating-conic-gradient( var(--chess) 0% 25%, var(--surface-1) 0% 50% ) 50% / 8px 8px;--unavailable-border: 1px dashed rgba(137, 120, 151, .4)}body,kbd{font-family:Fira Code,monospace;font-size:16px}body{--current-surface: var(--surface-0);line-height:16px;color:var(--text-primary);background:var(--current-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}a:focus,input:focus,button:focus{outline:var(--accent) solid 3px}a:not(:focus-visible):focus,input:not(:focus-visible):focus,button:not(:focus-visible):focus{outline:none}@media (prefers-reduced-motion: reduce){*{transition:none!important}}body{--range-color: var(--surface-1)}.range{position:relative;box-sizing:border-box;height:40px;border:var(--unavailable-border);border-radius:var(--radius)}.range.is-a{background:var(--opacity-pattern);border:none}.range_space,.range_gradient{position:absolute;border-radius:var(--radius)}.range_space{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}.range_gradient{inset:0;background:linear-gradient(to right,var(--range-a-from),var(--range-a-to))}.range_input{position:absolute;top:-1px;left:-13px;z-index:2;width:calc(100% + 26px);height:calc(100% + 2px);cursor:pointer;background:transparent;border-radius:var(--radius);-webkit-appearance:none;appearance:none;outline-offset:3px -10px}.range_input::-moz-range-thumb{appearance:none;box-sizing:border-box;width:27px;height:27px;cursor:grab;background:linear-gradient(var(--range-color),var(--range-color)),repeating-conic-gradient(from 45deg,var(--chess) 0% 25%,var(--surface-1) 0% 50%) 50% / 5.5px 5.5px;border:4px solid rgb(255,255,255);border-radius:0;box-shadow:0 1px 6px #160e1b1f,0 0 1px .5px #160e1b1f;transform:rotate(45deg) translate(14px,14px)}.range.is-invisible .range_input::-moz-range-thumb{background:var(--current-surface);box-shadow:inset 0 0 3px #160e1b1f,0 1px 6px #160e1b1f,0 0 1px .5px #160e1b1f}.range_input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:27px;height:27px;cursor:grab;background:linear-gradient(var(--range-color),var(--range-color)),repeating-conic-gradient(from 45deg,var(--chess) 0% 25%,var(--surface-1) 0% 50%) 50% / 5.5px 5.5px;border:4px solid rgb(255,255,255);border-radius:0;box-shadow:0 1px 6px #160e1b1f,0 0 1px .5px #160e1b1f;transform:rotate(45deg) translate(14px,14px)}.range.is-invisible .range_input::-webkit-slider-thumb{background:var(--current-surface);box-shadow:inset 0 0 3px #160e1b1f,0 1px 6px #160e1b1f,0 0 1px .5px #160e1b1f}.field{position:relative}.field_input{box-sizing:border-box;width:100%;height:40px;padding:0 12px;color:inherit;background:var(--surface-ui-regular);border:none;border-radius:var(--radius)}.field_input[type=number]{text-align:right}.field_input[aria-invalid]{color:var(--danger);background:var(--surface-ui-danger)}.field_input[aria-invalid]:focus{outline-color:var(--danger)}.field_hotkey{position:absolute;top:10px;left:-24px;width:16px;height:16px;font-size:12px;font-weight:700;line-height:18px;color:var(--text-note);text-align:center;text-transform:uppercase;border:1px solid var(--text-note);border-bottom-width:2px;border-radius:2px}@media (max-width: 829px){.field_hotkey{display:none}}body{--card-width: 340px}@media (max-width: 404px){body{--card-width: auto}}.card{--current-surface: var(--surface-1);position:relative;width:var(--card-width);padding:20px 32px 32px;background:var(--current-surface);border-radius:36px}.card_title{height:40px;margin-bottom:12px;font:inherit;font-size:18px;font-weight:700;line-height:40px}.card_number{position:absolute;top:20px;right:32px;width:110px}.card_chart{position:relative;height:174px;padding:0 20px;margin:0 -20px;overflow:hidden}body.was-loaded .card_chart{transition:height .4s}body.is-chart-hidden .card_chart{height:0}.card_size{height:150px}body{--chart-l: 70%;--chart-c: 20%;--chart-h: 79%}.chart{position:relative;box-sizing:border-box;height:100%;cursor:pointer;border:var(--unavailable-border);border-width:1px 0}.chart.is-l,.chart.is-h{border-bottom-color:transparent}.chart_line{position:absolute;top:0;left:0;width:100%;height:calc(100% + 1px)}.chart_line.is-l.is-x,.chart_line.is-l.is-y{--chart-line-position: var(--chart-l)}.chart_line.is-c.is-x{--chart-line-position: var(--chart-c)}.chart_line.is-h.is-y{--chart-line-position: var(--chart-h)}.chart_line:after{position:absolute;z-index:2;content:"";background:var(--surface-1);mix-blend-mode:difference;opacity:.4}.is-x.chart_line:after{right:0;bottom:var(--chart-line-position);left:0;height:1px}.is-y.chart_line:after{top:0;bottom:0;left:var(--chart-line-position);width:1px}.chart_label{position:absolute;width:15px;height:15px;font-size:12px;text-align:center;text-transform:uppercase;opacity:.5}.chart_line.is-x .chart_label{bottom:calc(var(--chart-line-position) - 7px);left:-15px}.chart_line.is-y .chart_label{top:100%;left:calc(var(--chart-line-position) - 7px)}.chart_canvas{position:absolute;top:-1px;left:0;width:100%;height:calc(100% + 2px);image-rendering:crisp-edges}body{--main-padding: 32px}@media (min-width: 1320px){body{--main-padding: 72px}}.main{position:relative;width:var(--card-width);padding:24px var(--main-padding) env(safe-area-inset-bottom,0) var(--main-padding);background:var(--surface-1);border-radius:36px}@media (max-width: 829px){.main{box-sizing:border-box;width:100%;padding-top:0;border-radius:36px 36px 0 0;box-shadow:0 0 2px var(--surface-2-shadow),0 0 18px var(--surface-2-shadow)}@supports ((-webkit-backdrop-filter: blur(24px)) or (backdrop-filter: blur(24px))){.main{background:var(--surface-2);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}}}@media (min-width: 830px){.main_expand{display:none}}@media (max-width: 829px){.main_expand{display:flex;align-items:center;justify-content:center;width:100%;height:32px;-webkit-user-select:none;user-select:none;background:transparent;border:none}}@media (max-width: 829px){.main_expand:before{display:block;width:32px;height:4px;content:"";background:var(--surface-ui-regular);border-radius:2px}}.main_row{margin-bottom:24px}body.is-main-collapsed .main_row--sample{margin-bottom:calc(24px + env(safe-area-inset-bottom,0))}.main_footer{padding-bottom:46px;font-size:12px;line-height:18px;color:var(--text-secondary);text-align:center}.main_link{font-weight:700;color:inherit;text-decoration:none}.main_link:hover,.main_link.is-hover{color:var(--accent);text-decoration:underline}.main_link:focus{text-decoration:none;border-radius:2px;outline-offset:2px}.main_logo{position:absolute;bottom:env(safe-area-inset-bottom,0);left:50%;width:96px;height:38px;padding-top:10px;transform:translate(-50%)}.main_logo>svg{width:100%;height:100%}.main_logo>svg>path{fill:var(--surface-ui-regular)}.main_logo:hover>svg>path,.main_logo.is-hover>svg>path{fill:var(--accent)}.layout{position:relative;display:grid;gap:4px;width:-moz-fit-content;width:fit-content;margin:0 auto}@media (max-width: 829px){.layout{grid-template:"T" "L" "C" "H" "A" "M" "P" "S";padding-bottom:450px}body.is-main-collapsed .layout{padding-bottom:163px}}@media (min-width: 830px) and (max-width: 1229px){.layout{grid-template:"T T" "M M" "L C" "A H" "P H"}}@media (min-width: 1230px){.layout{grid-template:"T T T" "M L C" "M A H" "M P H" "M . ."}}.layout_title{grid-area:T}.layout_main{grid-area:M}@media (min-width: 830px) and (max-width: 1229px){.layout_main{display:flex}}.layout_l{grid-area:L}.layout_c{grid-area:C}.layout_h{grid-area:H}.layout_a{grid-area:A}.layout_prefs{grid-area:P}@media (max-width: 829px){.layout_panel{position:fixed;right:0;bottom:0;left:0;z-index:10;transition:transform .3s cubic-bezier(.16,1,.3,1)}body.is-main-collapsed .layout_panel{transform:translateY(calc(287px + env(safe-area-inset-bottom,0)))}}@media (min-width: 830px){.layout_source{position:absolute;top:18px;right:0}}@media (max-width: 829px){.layout_source{grid-area:"S"}}.sample{--sample-real: var(--surface-1)}.sample_reader{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);border:0}.sample_unavailable{box-sizing:border-box;display:none;align-items:center;justify-content:center;width:50%;height:84px;padding:0 8px;font-size:12px;line-height:18px;color:var(--text-secondary);text-align:center;border:var(--unavailable-border);border-radius:var(--radius)}.sample.is-p3:not(.is-supported) .sample_unavailable.is-p3{display:flex}.sample.is-rec2020:not(.is-supported) .sample_unavailable.is-rec2020{display:flex}.sample.is-out:not(.is-supported) .sample_unavailable.is-out{display:flex}.sample_compare{display:flex}.sample.is-srgb .sample_compare{display:none}.sample_normal,.sample_real,.sample_fallback{position:relative;flex-grow:1;height:84px;background:var(--opacity-pattern);border-radius:var(--radius)}.sample_normal:before,.sample_real:before,.sample_fallback:before{position:absolute;inset:0;content:"";border-radius:var(--radius)}.sample:not(.is-srgb) .sample_normal{display:none}.sample:not(.is-supported) .sample_real{display:none}.sample_normal:before,.sample_real:before{background:var(--sample-real)}.sample_fallback:before{background:var(--sample-fallback)}.sample_note{position:absolute;bottom:4px;left:50%;padding:4px 6px;font-size:11.25px;line-height:13px;color:var(--text-badge);text-transform:capitalize;background:var(--surface-badge);border-radius:8px;transform:translate(-50%)}.title{padding:32px 0;font-size:20px;line-height:20px}@media (max-width: 829px){.title{text-align:center}}.source{position:relative;box-sizing:border-box;display:inline-block;height:48px;padding:0 44px;font-size:12px;line-height:48px;color:var(--text-primary);text-decoration:none;background:var(--surface-1);border-radius:var(--radius)}.source:hover{color:var(--accent)}@media (max-width: 829px){.source{width:calc(100% - 64px);margin:0 32px}}.source:hover .source_text{text-decoration:underline}.source_github>svg,.source_external>svg{position:absolute;top:15px;width:16px;height:16px}.source_github>svg>path,.source_external>svg>path{fill:var(--text-primary)}.source:hover :is(.source_github > svg)>path,.source:hover :is(.source_external > svg)>path{fill:var(--accent)}.source_github>svg{left:15px}.source_external>svg{right:15px}.code+.code{margin-top:4px}.code_note{padding-left:12px;margin-top:4px;font-size:12px;color:var(--text-secondary)}.code_note.is-hidden{display:none}.is-palette{margin:1rem 0;display:block}.is-light-temp input{text-align:left!important}#palette-link{display:block;margin:1.5rem 0;width:auto;padding:.5rem 1.5rem;border-radius:.25rem;background-color:var(--text-secondary);color:#efefef;text-align:center;line-height:1.5rem;font-size:.75rem;font-weight:600;text-decoration:none;transition:background-color .2s ease-in-out}#palette-link:hover{background-color:var(--text-primary)}#palette-link[aria-invalid=true]{cursor:not-allowed;opacity:.15;pointer-events:none;-webkit-user-select:none;user-select:none}#palette-demo{margin-top:1rem;min-height:44px;border:1px solid rgba(200,200,200,.35);display:grid;grid-template-columns:repeat(11,calc(100% / 11))}#palette-demo>div{width:100%;height:100%}.p99{background:var(--palette-99)}.p95{background:var(--palette-95)}.p90{background:var(--palette-90)}.p80{background:var(--palette-80)}.p70{background:var(--palette-70)}.p60{background:var(--palette-60)}.p50{background:var(--palette-50)}.p40{background:var(--palette-40)}.p30{background:var(--palette-30)}.p20{background:var(--palette-20)}.p10{background:var(--palette-10)}.checkbox{position:relative;display:block;margin-bottom:12px;margin-left:-12px}.checkbox:last-child{margin-bottom:0}.checkbox_input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);border:0}.checkbox_control{padding:12px 48px 12px 12px;cursor:pointer}.checkbox_input:focus+.checkbox_control{border-radius:20px;outline:var(--accent) solid 3px;outline-offset:3px}.checkbox_input:not(:focus-visible):focus+.checkbox_control{outline:none}.checkbox_icon{position:absolute;top:4px;right:4px;width:56px;height:32px;background:var(--surface-ui-regular);border-radius:16px;transition:background 1.5s}.checkbox_icon:before{position:absolute;inset:0;content:"";background:var(--accent);border-radius:16px;opacity:0;transition:opacity .15s}.checkbox_input:checked+.checkbox_control>.checkbox_icon:before{opacity:1}.checkbox_icon:after{position:absolute;top:2px;left:2px;width:28px;height:28px;content:"";background:rgb(255,255,255);border-radius:50%;transition:transform .15s;transform:translate(0)}.checkbox_input:checked+.checkbox_control>.checkbox_icon:after{transform:translate(24px)}.settings{padding:16px 32px}.desc{width:-moz-fit-content;width:fit-content;width:var(--card-width);padding:24px var(--main-padding);font-size:12px;line-height:18px}@media (max-width: 829px){.desc{padding-bottom:0}}.desc li{padding-top:10px}.desc ul+p{padding-top:10px}.desc a{color:inherit}.desc a:hover{color:var(--accent)}.desc a:focus{text-decoration:none;border-radius:2px;outline-offset:2px}.benchmark{display:none}.benchmark.is-enabled{position:fixed;top:0;left:0;display:block;padding:8px 10px;font-size:12px;font-weight:200;color:#fff;background:var(--benchmark-color)}.benchmark_row+.benchmark_row{padding-top:4px}.benchmark_freeze,.benchmark_quick,.benchmark_full{display:inline-block;min-width:25px;font-weight:400;text-align:right}