@layer base,demo,table;*{user-select:none;-webkit-tap-highlight-color:transparent}@layer demo{section{padding:.25rem;background:light-dark(hsl(0 0% 98%),#000);max-width:calc(100vw - 1rem);border:1px solid color-mix(in hsl,canvas,canvasText);border-radius:6px;overflow:hidden}.table-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:oklch(.5 .2 calc(var(--hue) * 1deg)) #0000}body{background:light-dark(#fff,#000)}td,th{padding:.3vmax .6vmax!important;text-align:center;white-space:nowrap;font-weight:400;font-size:1vmax;color:color-mix(in hsl,canvasText,#0000 65%)}table th{color:color-mix(in hsl,canvasText,#0000 35%);font-weight:500}}@layer table{:root{--hue: 210;--hovered: oklch(.5 .2 calc(var(--hue) * 1deg) / .8);--sibling: oklch(.5 .1 calc(var(--hue) * 1deg) / .4)}table{border-collapse:collapse}table :where(td,th){transition-property:color,opacity,background;transition-duration:.24s}table tr:first-of-type td:first-of-type{pointer-events:none}table tr:first-of-type td:first-of-type,table tr:not(:first-of-type) th{position:sticky;left:0;background:light-dark(hsl(0 0% 98%),#000)}table:has(td:hover) :where(th,td){color:color-mix(in hsl,canvasText,#0000 85%);transition-duration:0s}tr:not(:first-of-type) td:hover{background:var(--hovered);color:canvasText;font-weight:600;opacity:1}td:has(~td:hover),table:has(td:nth-of-type(1):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(1),table:has(td:nth-of-type(2):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(2),table:has(td:nth-of-type(3):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(3),table:has(td:nth-of-type(4):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(4),table:has(td:nth-of-type(5):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(5),table:has(td:nth-of-type(6):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(6),table:has(td:nth-of-type(7):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(7),table:has(td:nth-of-type(8):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(8),table:has(td:nth-of-type(9):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(9),table:has(td:nth-of-type(10):hover) tr:not(:first-of-type):has(~tr:hover) td:nth-of-type(10){opacity:1;color:canvasText;background:var(--sibling)}tr:not(:first-of-type):hover:not(:has(th:hover)) th,table:has(tr:not(:first-of-type) td:nth-of-type(1):hover) tr:first-of-type th:nth-of-type(1),table:has(td:nth-of-type(2):hover) tr:first-of-type th:nth-of-type(2),table:has(td:nth-of-type(3):hover) tr:first-of-type th:nth-of-type(3),table:has(td:nth-of-type(4):hover) tr:first-of-type th:nth-of-type(4),table:has(td:nth-of-type(5):hover) tr:first-of-type th:nth-of-type(5),table:has(td:nth-of-type(6):hover) tr:first-of-type th:nth-of-type(6),table:has(td:nth-of-type(7):hover) tr:first-of-type th:nth-of-type(7),table:has(td:nth-of-type(8):hover) tr:first-of-type th:nth-of-type(8),table:has(td:nth-of-type(9):hover) tr:first-of-type th:nth-of-type(9),table:has(td:nth-of-type(10):hover) tr:first-of-type th:nth-of-type(10){opacity:1;color:canvasText}}@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{padding-block:6rem;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 70%);content:"";height:100vh;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);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}}div.tp-dfwv{position:fixed;*{text-transform:lowercase}}