*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--gap: .2rem;--base: clamp(2rem, 8cqi, 80px);--easing: linear( 0 0%, .1538 4.09%, .2926 8.29%, .4173 12.63%, .5282 17.12%, .6255 21.77%, .7099 26.61%, .782 31.67%, .8425 37%, .8887 42.23%, .9257 47.79%, .9543 53.78%, .9752 60.32%, .9883 67.11%, .9961 75%, 1 100% );--speed: .6s;font-family:Share Tech Mono,monospace}body{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:100vh;min-height:100dvh;overflow:hidden}.app-container{max-width:100vw;height:100vh;height:100dvh;margin:0 auto;width:100vw;padding:0 1rem;box-sizing:border-box;overflow:hidden}@media (min-width: 1000px){.app-container{max-width:80vw;width:75vw;padding:0}}@media (min-aspect-ratio: 21/9){.app-container{max-width:60vw;width:60vw;padding:0}}@media (min-width: 1000px) and (max-width: 1279px){:root{font-size:18px}}@media (min-width: 1280px) and (max-width: 1919px){:root{font-size:20px}}@media (min-width: 1920px) and (max-width: 2159px){:root{font-size:32px}}@media (min-width: 2160px){:root{font-size:50px}}main{height:75vh;height:75dvh;margin:0;padding:0}ul{display:grid;grid-template-columns:1fr min-content min-content min-content;gap:var(--gap);list-style:none;height:100%;padding:0;margin:0;width:100%;transition:grid-template-columns var(--speed) var(--easing);container-type:inline-size}li{position:relative;overflow:hidden;min-width:calc(var(--base) * .5 + 1.5rem);border-radius:8px;border:1px solid rgba(255,255,255,.25);color:#fff}li :is(svg,h3){opacity:.6;transition:opacity calc(var(--speed) * 1.2) var(--easing);color:#fff}li :is(p,a,h4,strong){opacity:0;width:fit-content;transition:opacity calc(var(--speed) * 1.2) var(--easing);color:#fff}[data-active=true] :is(p,a,h3,h4,strong,svg){opacity:var(--opacity, 1)}[data-active=true] .text-component{opacity:1}[data-active=true] :is(p,a,h4,strong){transition-delay:calc(var(--speed) * .25)}article{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:row;gap:0;padding:0;margin-bottom:0;overflow:hidden;color:#fff}article .title-wrapper{height:100%;padding:calc(var(--base) * .25);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex-shrink:0;width:calc(var(--base) * .5 + 1.5rem)}article h3{transform-origin:.5rem 50%;rotate:90deg;font-size:1.5em;font-weight:300;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}article .icon-wrapper{width:1.5rem;height:auto;display:flex;align-items:center;justify-content:center;color:#fff;z-index:10}article .icon-wrapper svg{width:100%;height:auto;fill:currentColor;color:#fff}article .content-wrapper{flex-grow:1;font-size:1.5em;line-height:1.25;text-wrap:balance;color:#fff;overflow-y:auto;height:calc(100% - 1rem);width:100%;margin:.5rem 0;align-items:center}.content-wrapper ul{display:block;grid-template-columns:none;gap:0;height:auto;width:auto;max-width:none;transition:none;container-type:none;list-style:disc;padding-left:1.5rem;margin:.5rem 0}.content-wrapper ul li{list-style:disc;margin:.25rem 0;padding:0;display:list-item;border:none;border-radius:0;min-width:auto;overflow:visible;position:static;font-size:1.25rem}.text-component{padding:0;padding-bottom:1rem;overflow-y:auto;color:#fff;font-size:.8125em;line-height:1.25;text-wrap:balance;opacity:0;transition:opacity calc(var(--speed) * 1.2) var(--easing)}.text-component p{margin-bottom:.75rem}.text-component .first-element{margin-top:0}.text-component h4{font-size:1.5rem;line-height:1.25;margin-top:2rem;margin-bottom:.65rem}.text-component .source-link{margin-bottom:.5rem}header{position:sticky;top:0;height:15vh;height:15dvh;background:transparent;border:none;z-index:100;display:flex;align-items:center;justify-content:center}.header-content{display:flex;align-items:center;gap:1rem;width:100%}.header-avatar{width:3.75em;height:3.75em;border:.125em solid white;border-radius:50%;flex-shrink:0}.header-text{min-width:0;flex:1}.header-name{color:#f5f5f5;font-weight:700;line-height:1.2;word-break:break-word;margin:0}.header-subtitle{color:#f5f5f5;font-size:.875em;line-height:1.2;word-break:break-word;margin:0}footer{position:sticky;bottom:0;height:10vh;height:10dvh;background:transparent;border:none;z-index:100;display:flex;align-items:center;justify-content:center}.footer-content{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;width:100%}.footer-copyright{color:#f5f5f5;font-size:.875em;line-height:1.4;word-break:break-word;margin:0}.footer-social{display:flex;gap:.5rem;flex-shrink:0}.social-link{color:#f5f5f5;text-decoration:none;display:flex;align-items:center;justify-content:center}.social-link:hover{opacity:.8}@media (max-width: 767px){header{height:10vh;height:10dvh}main{height:85vh;height:85dvh}footer{height:5vh;height:5dvh}ul{grid-template-columns:1fr;grid-template-rows:1fr min-content min-content min-content;gap:.5rem}li{min-width:auto;min-height:calc(var(--base) * .5 + 1.5rem)}article{flex-direction:column;gap:.5rem}article .title-wrapper{height:auto;width:100%;flex-direction:row;justify-content:space-between;align-items:center;padding:.5rem;padding-bottom:0}article h3{rotate:0deg;transform-origin:0 0;font-size:1.25em}article .content-wrapper{font-size:1em;padding:.5rem;padding-top:0;height:auto;flex-grow:1}.text-component p{font-size:1.25rem}}@media (max-width: 350px){header h1{font-size:2rem}header .header-avatar{width:2rem;height:2rem;border:1px solid white}header .header-subtitle{display:none}body{height:100vh;height:100dvh;overflow:scroll}}.text-component .first-element{padding-top:0}@media (min-width: 1000px){.text-component .first-element{padding-top:.75rem}li{border:.125rem solid rgba(255,255,255,.25)}}