:root{--text-color: #f1dddd;--hint-color: rgb(252, 151, 151);--text-tint-even: rgb(116, 98, 214);--text-tint-odd: white;--bg-color: #123530;--weight: 400}html,body{height:100%}body{margin:0;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--text-color);display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--bg-color)}h1{font-weight:var(--weight);font-size:clamp(2.5rem,8vw,8rem);margin:0;line-height:1.1}.title-container{position:relative;display:inline-block}h1{--fold: 20;--fold-max: 40;--θ: calc(var(--fold) * 1deg);--stretch: .5;--scale-x: calc(var(--stretch) + .5);--scale-y: calc(1.5 - var(--stretch));--t: calc(var(--stretch) * 100%);display:inline-flex;gap:0;white-space:nowrap;font-variant-ligatures:none;letter-spacing:calc((1 - cos(var(--θ)))/-2ch);transform:scale(var(--scale-x),var(--scale-y))}h1 span{box-sizing:border-box;display:inline-block;transform-origin:center}h1 span{--dir: 1;text-decoration:underline;transform:skewY(calc(var(--dir) * var(--θ)))}h1 span:nth-child(2n){--dir: -1;color:color-mix(in srgb,var(--text-color) var(--t),var(--text-tint-even))}.dot{position:absolute;cursor:pointer;width:1ch;height:1ch;display:flex;align-items:center;justify-content:center;pointer-events:auto;overflow:hidden;font-weight:var(--weight);font-size:clamp(2.5rem,8vw,8rem);margin:0;line-height:1.1;bottom:5%;right:-1ch}.dot-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;transform-origin:50% 50%;transition:transform .25s cubic-bezier(0,.5,.5,1);padding-bottom:.12em}.dot.dragging .dot-inner,.dot:hover .dot-inner{transform:scale(1.3)}.hint{font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:italic;font-variation-settings:"wdth" 100;position:absolute;bottom:50%;left:104.5%;width:3vw;opacity:1;transition:opacity .15s linear}.hint.hidden{opacity:0}.hint:after{content:"Drag the dot";position:absolute;left:110%;bottom:105%;white-space:nowrap;transform:translate(-50%);color:var(--hint-color);font-size:max(1.25vw,12px)}.hint svg{width:100%;height:auto;display:block}.hint svg path{stroke:var(--hint-color);stroke-width:1.5}