:root{color-scheme:light;--bg:#edf1f7;--ink:#192032;--muted:#535e70;--line:#c4ccd9;--accent:#ffe17a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}main{max-width:1200px;padding:0 48px;margin:auto}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}header{padding:32px 0;display:flex;justify-content:space-between;font-size:14px}header>a{font-weight:600}header>span{color:var(--muted)}.playground{position:relative;height:370px;border-bottom:1px solid var(--line);isolation:isolate}h1{position:absolute;top:20px;left:-5px;margin:0;display:flex;gap:.23em;white-space:nowrap;font-size:clamp(64px,12.8vw,154px);line-height:1.12;font-weight:700;letter-spacing:-.07em}.word{display:flex}.word>span{display:inline-block}h1.fallen{visibility:hidden}.play-controls{position:absolute;left:0;top:220px;z-index:3;display:flex;gap:18px;align-items:center}button{font:inherit;color:inherit;cursor:pointer}#trigger{border:1px solid var(--ink);border-radius:2px;padding:14px 20px;background:var(--accent);font-size:16px;transform:rotate(-5deg);box-shadow:3px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s}#trigger:hover{transform:rotate(-2deg) translateY(-2px);box-shadow:4px 6px 0 var(--ink)}#trigger:active{transform:rotate(-2deg) translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}#trigger:disabled{cursor:default;opacity:.65}#reset{border:0;background:transparent;font-size:14px;padding:12px 0;text-decoration:underline;text-underline-offset:5px}[hidden]{display:none!important}.reaction{position:absolute;top:220px;right:0;text-align:right;z-index:2;pointer-events:none}#response{font-size:19px;letter-spacing:-.03em;margin:0 0 10px;font-weight:600}#hint{font-size:13px;color:var(--muted);margin:0;max-width:270px;line-height:1.5}.margin-note{position:absolute;right:0;bottom:26px;font-family:Georgia,serif;font-style:italic;font-size:17px;color:var(--muted);transition:opacity .2s}.playing .margin-note{opacity:0}#letters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.letter{position:absolute;left:0;top:0;font-weight:700;letter-spacing:-.07em;line-height:1.12;padding:0;border:0;background:transparent;touch-action:none;user-select:none;pointer-events:auto;cursor:grab;will-change:transform}.letter:active{cursor:grabbing}.letter:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}a:focus-visible,button:focus-visible{outline:3px solid #5b70ac;outline-offset:6px}.about{display:grid;grid-template-columns:1fr 1.12fr;gap:80px;padding:48px 0 54px}h2{font:400 clamp(25px,3vw,36px)/1.25 Georgia,serif;letter-spacing:-.025em;margin:0}.copy p{font-size:16px;line-height:1.7;margin:0 0 17px;color:var(--muted)}.copy p:last-child{margin-bottom:0}footer{border-top:1px solid var(--line);padding:26px 0 32px;display:flex;justify-content:space-between;gap:24px;font-size:14px}footer nav{display:flex;gap:32px}.place{color:var(--muted);margin-left:9px}
@media(min-width:1250px){h1{font-size:154px}}@media(max-width:700px){main{padding:0 24px}header{font-size:12px;padding:25px 0}.playground{height:310px}h1{top:28px;left:-2px;font-size:12.5vw}.play-controls{top:145px;gap:15px}#trigger{font-size:14px;padding:12px 15px}#reset{font-size:13px}.reaction{top:212px;left:0;text-align:left}#response{font-size:17px;margin-bottom:4px}#hint{font-size:12px;max-width:100%}.margin-note{font-size:15px}.about{grid-template-columns:1fr;gap:22px;padding:32px 0}h2{font-size:29px}.copy p{font-size:16px}footer{flex-direction:column;gap:22px}footer nav{justify-content:space-between;gap:16px}.playing .reaction{background:var(--bg);width:max-content;max-width:100%;padding:4px 6px 4px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}