:root{--paper:#f4f1e8;--ink:#222820;--orange:#fc6c3e;--lime:#d7ee8a;--line:#c9cbbd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid #6651a2;outline-offset:6px}::selection{background:var(--lime)}.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;padding:15px;background:var(--ink);color:white;z-index:20}.skip:focus{top:12px}header{min-height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.logo{font-size:43px;font-weight:900;letter-spacing:-4px;line-height:1}.logo span{font-size:12px;letter-spacing:0;margin-left:9px;font-weight:400}nav{display:flex;gap:32px;font-size:14px}nav a:hover,footer>a:last-child:hover{text-decoration:underline;text-underline-offset:5px}.status{font:11px monospace;color:#50613b}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:55px;align-items:center;padding-block:77px 85px}.label{font:11px/1.7 monospace;letter-spacing:1.2px;margin:0 0 24px}h1{font-size:clamp(42px,4.6vw,67px);line-height:1.05;letter-spacing:-3.8px;margin:0;font-weight:800}em{font-family:Georgia,serif;font-weight:400}p{line-height:1.6}.intro{font-size:17px;margin:26px 0 29px;color:#54594f}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid var(--ink);padding:17px 21px;border-radius:5px;font-size:14px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button span{font-size:20px;line-height:1}.dark{background:var(--ink);color:var(--paper)}.dark:hover{background:#424e38}.fine{font-size:10px;color:#686e61;margin-top:17px}.poster{position:relative;background:var(--orange);aspect-ratio:1.06;min-width:0;overflow:hidden;border-radius:4px;transform:rotate(2deg);isolation:isolate}.poster-top,.poster-bottom{position:absolute;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;font:9px monospace;letter-spacing:1px;z-index:4}.poster-top{top:23px}.poster-bottom{bottom:17px}.poster-bottom span{font-size:34px}.letters{position:absolute;top:15%;left:4%;font-weight:900;letter-spacing:-.09em;font-size:clamp(130px,20vw,260px);line-height:1;transform:rotate(-6deg)}.orbit{position:absolute;width:110%;height:40%;border:1px solid var(--ink);border-radius:50%;left:-6%;top:33%;transform:rotate(-28deg);z-index:-1}.smile{position:absolute;width:32%;aspect-ratio:1;background:var(--lime);border:2px solid var(--ink);border-radius:50%;left:12%;bottom:12%;transform:rotate(-16deg);box-shadow:5px 6px 0 var(--ink)}.eyes{position:absolute;left:28%;right:28%;top:25%;display:flex;justify-content:space-between}.eyes i{width:13%;height:24px;background:var(--ink);border-radius:50%;transform:translate(var(--eye-x,0px),var(--eye-y,0px))}.mouth{position:absolute;width:49%;height:28%;left:26%;top:49%;border:3px solid var(--ink);border-top:0;border-radius:0 0 70px 70px}.sticker{position:absolute;right:7%;bottom:16%;background:var(--paper);padding:15px 17px;font:12px/1.4 monospace;transform:rotate(9deg);box-shadow:3px 3px 0 #22282033}.sticker b{font-size:10px}.ticker{border-block:1px solid var(--ink);background:var(--lime);overflow:hidden;padding:17px 0;white-space:nowrap;font:12px monospace;letter-spacing:1.8px;text-align:center}.ticker b{margin:0 35px;font-size:19px;vertical-align:middle}.play{padding-block:74px 75px}.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.heading .label{margin-bottom:12px}h2{font-size:36px;line-height:1.12;letter-spacing:-1.6px;margin:0}.heading>p{font-size:13px;color:#62685d;margin:0 0 3px}.cards{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.card{border:1px solid var(--line);padding:30px 32px;border-radius:6px;min-width:0}.meaning{background:#e9ecdf}.chaos{background:#e8e0f0}.card .label{font-size:9px;margin-bottom:32px}h3{font-size:25px;letter-spacing:-.7px;margin:0 0 10px}.card>p:not(.label){font-size:14px;margin:0;color:#62635c}#definition{font-size:34px;font-weight:700;line-height:1.14;letter-spacing:-1px;display:grid;margin:28px 0;min-height:117px;overflow-wrap:anywhere}#definition span::first-letter{color:#577527}.outline{background:transparent;font-size:12px;padding:13px 16px}.outline:hover{background:var(--lime)}.control{display:grid;justify-items:center;margin:16px 0 10px}.note{font:italic 15px Georgia,serif;transform:rotate(-8deg);margin-bottom:10px}#chaos{border:2px solid var(--ink);background:var(--orange);width:112px;height:112px;border-radius:50%;box-shadow:0 7px 0 var(--ink);display:grid;place-items:center;font-size:73px;line-height:1;transition:transform .15s,box-shadow .15s}#chaos:hover{transform:rotate(10deg)}#chaos:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ink)}.card #message{text-align:center;font:11px/1.6 monospace;margin-top:25px;min-height:36px}.about{border-top:1px solid var(--line);padding-block:58px 65px;display:grid;grid-template-columns:1fr 1.8fr;gap:35px}.about h2{font-size:43px}.about div p{font-size:15px;color:#5a6055;max-width:530px;margin-top:24px}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:30px 40px}footer p,footer>a:last-child{font-size:11px}footer .logo{font-size:32px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.confetto{position:absolute;top:-30px;width:12px;height:19px;animation:fall 1.8s ease-in forwards}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(var(--spin));opacity:0}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.status{display:none}.hero{gap:28px;padding-block:55px}h1{letter-spacing:-2.5px}.letters{font-size:21vw}.poster-top,.poster-bottom{left:15px;right:15px;font-size:7px}.sticker{font-size:9px;padding:10px}.sticker b{font-size:8px}.eyes i{height:17px}.heading{display:block}.heading>p{margin-top:15px}.card{padding:25px}#definition{font-size:29px}.about{grid-template-columns:1fr 2fr}.about h2{font-size:35px}}
@media(max-width:620px){.wrap{width:calc(100% - 36px)}header{min-height:79px;gap:15px}nav{gap:18px;font-size:12px}header .logo{font-size:35px}header .logo span{display:none}.hero{grid-template-columns:1fr;padding-block:40px 43px;gap:38px}.label{font-size:9px;letter-spacing:.8px;margin-bottom:19px}h1{font-size:clamp(40px,10vw,60px);letter-spacing:-2.5px}.intro{font-size:16px;margin-block:23px}.fine{font-size:9px}.poster{width:calc(100% - 10px);margin:auto;aspect-ratio:1.16}.letters{font-size:49vw;top:11%}.poster-top,.poster-bottom{font-size:8px}.sticker{font-size:11px}.sticker b{font-size:9px}.eyes i{height:22px}.ticker{padding:13px 0;font-size:10px}.ticker b{margin:0 18px}.play{padding-block:44px}.heading{margin-bottom:24px}h2{font-size:30px}.cards{grid-template-columns:1fr;gap:18px}.card{padding:25px}#definition{font-size:34px}.card .label{margin-bottom:25px}.control{margin-block:20px}.about{grid-template-columns:1fr;gap:4px;padding-block:35px}.about h2{font-size:34px}.about div p{font-size:14px}footer{flex-wrap:wrap;gap:18px;padding-block:27px}footer p{order:3;width:100%;margin:0}footer>a:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.eyes i{transform:none}}
