.kolon,.window{container-type:inline-size}.item,.kolon a{cursor:pointer}.item,.kolon,.sr-only{overflow:hidden}.item,.item_text{text-align:center}*,:after,:before{box-sizing:border-box}:root{--speed:8s;--transition:0.15s}.solan{padding:2rem 0;width:100%;background-color:#f7f7f7}:root:has(#theme:checked) :is(body,.controls,.item){background-color:hsl(0 0% 10%);color:hsl(0 0% 100%);border-color:hsl(0 0% 25%)}:root:has(#theme:checked) .kolon{background-color:hsl(0 0% 10%);color:hsl(0 0% 100%);border-color:hsl(0 0% 25%);box-shadow:0 10px 20px -5px hsl(0 0% 0% / .5)}:root:has(#theme:checked) .item{background-color:#000}:root:has(#theme:checked) li::before{background-color:#000}.kolon{padding:2rem;margin:0 auto;width:100%;border-radius:6px;background:hsl(0deg 0% 96.86%);max-width:min(calc(1600px + 8rem),calc(100vw - 2rem));min-width:340px;transition:background-color .25s,color .25s,border .25s,box-shadow .25s}.hh{display:flex;gap:.25ch;font-size:clamp(1.5rem, 4cqi + 1rem, 3rem);font-weight:160;margin:0;grid-column:1/-1}.grid,.oldsy,[for=theme]{display:grid}.hh span:last-of-type{display:inline-block;background:linear-gradient(to right,#9333ea,#db2777,#9333ea) 0 0/400% 100% no-repeat;background-clip:text;color:transparent;animation:4s linear infinite shade}@keyframes shade{to{background-position:100% 0}}.oldsy{grid-template:auto 1fr/6fr 4fr;gap:1rem;margin-bottom:2rem;transition:opacity .5s}.kolon a{align-self:start;text-decoration:none;justify-self:end;border-radius:100px;padding:.5rem 1.5rem;border:0;color:hsl(0 0% 100%);font-weight:120;background:linear-gradient(to right,#9333ea,#db2777) 0 0/200% 100% no-repeat;transition:background-position .15s}.kolon a:is(:hover,:focus-visible){background-position:100% 0}.pp{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[for=theme]{width:48px;aspect-ratio:1;position:fixed;bottom:1rem;right:1rem;place-items:center}[for=theme] svg{width:75%}#theme+svg path:first-of-type,#theme:checked+svg path:last-of-type{opacity:0}#theme:checked+svg path:first-of-type{opacity:1}.window{height:250px;transform-style:preserve-3d;width:100%;outline:transparent dashed 4px;transition:outline .5s}.grid,.item,.scene{height:100%;width:100%}.scene{--buff:3rem;mask:linear-gradient(transparent,white var(--buff) calc(100% - var(--buff)),transparent),linear-gradient(90deg,transparent,white var(--buff) calc(100% - var(--buff)),transparent);mask-composite:intersect}.grid{--count:6;--inset:0;--outset:2.5;margin:0;list-style-type:none;position:relative;padding:0 1rem;grid-template-columns:1fr 1fr;gap:0 2rem;transition:transform .5s;transform:rotateX(calc(var(--rotate,0) * 20deg)) rotateZ(calc(var(--rotate,0) * -20deg)) skewX(calc(var(--rotate,0) * 20deg));transform-style:preserve-3d;gap:1rem}:root:has(#dimension:checked) .grid{--rotate:1}.lili{min-height:60px;transform-style:preserve-3d;width:100%;z-index:calc(1 + var(--active))}.lili::before{content:"";position:absolute;inset:4px 4px -2px -2px;border-radius:6px;background:hsl(0 0% 0% / .1);filter:blur(calc(var(--active, 0) * 8px));z-index:-1;transition:scale var(--transition),opacity var(--transition),translate var(--transition),filter var(--transition);transform-origin:50% 0;scale:1 calc(1 + (var(--active,0) * 0.05));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow)}.grid:hover .lili{animation-play-state:paused}.item{align-items:center;background:hsl(0 0% 100%);border:1px solid hsl(0 0% 90%);color:hsl(0 0% 10%);border-radius:6px;display:flex;gap:1rem;justify-content:start;padding:1.25rem;transition:transform var(--transition),scale var(--transition),background-color .25s,color .25s,border .25s,box-shadow .25s;scale:calc(1 + (var(--active,0) * 0.05));transform:translate3d(0,0,calc(var(--active,0) * 24px))}.item_icon{width:24px;color:#7c3aed}.item_text{flex:1}.lili:first-of-type,.lili:nth-of-type(2){--index:0}.lili:nth-of-type(3),.lili:nth-of-type(4){--index:1}.lili:nth-of-type(5),.lili:nth-of-type(6){--index:2}.lili:nth-of-type(7),.lili:nth-of-type(8){--index:3}.lili:nth-of-type(10),.lili:nth-of-type(9){--index:4}.lili:nth-of-type(11),.lili:nth-of-type(12){--index:5}@container (width < 400px){.oldsy{grid-template:auto 1fr/1fr}.oldsy a{justify-self:start}.grid{--count:12;--inset:0;--outset:3;grid-template-columns:1fr}.lili:first-of-type{--index:0}.lili:nth-of-type(2){--index:1}.lili:nth-of-type(3){--index:2}.lili:nth-of-type(4){--index:3}.lili:nth-of-type(5){--index:4}.lili:nth-of-type(6){--index:5}.lili:nth-of-type(7){--index:6}.lili:nth-of-type(8){--index:7}.lili:nth-of-type(9){--index:8}.lili:nth-of-type(10){--index:9}.lili:nth-of-type(11){--index:10}.lili:nth-of-type(12){--index:11}}@media(prefers-reduced-motion:no-preference){.grid{gap:0 2rem}.lili{--duration:calc(var(--speed) * 1);--delay:calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));animation:slide var(--duration) var(--delay) infinite linear;translate:0% calc(((var(--count) - var(--index)) + var(--inset,0)) * 100%)}.lili:hover{--active:1}@keyframes slide{100%{translate:0% calc(calc((var(--index) + var(--outset,0)) * -100%))}}}