.intro{padding:16px 0 24px}.intro h1{font-size:64px}.intro p{max-width:620px}.lab-note{font-size:14px;line-height:1.8;flex-shrink:0;color:var(--muted)}.featured{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;text-decoration:none;padding:40px;background:#e9e9df;border-radius:16px;overflow:hidden}.featured h2{font-size:42px;line-height:1.1}.featured p{margin-block:24px}.featured span{display:inline-block;border-bottom:1px solid;padding-bottom:4px}.feature-art{position:relative;height:280px;perspective:700px}.feature-art i{position:absolute;inset:0 12%;border:25px solid var(--blue);border-radius:28%;transform:rotate(-18deg) rotateY(-20deg);transition:transform .4s cubic-bezier(.16,1,.3,1)}.feature-art i:nth-child(2){inset:13% 23%;border-color:var(--pear);transform:rotate(5deg) rotateY(-20deg)}.feature-art i:nth-child(3){inset:26% 34%;border:16px solid var(--coral);transform:rotate(28deg) rotateY(-20deg)}.feature-art b{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;letter-spacing:-.04em}.featured:hover .feature-art i{transform:rotate(12deg) rotateY(0)}.library-head{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:48px 0 16px}.library-head h2{margin:0}.tool-row{display:grid;grid-template-columns:130px 1fr auto;gap:32px;align-items:center;padding:24px 0;text-decoration:none;border-bottom:1px solid var(--rule)}.tool-row[hidden]{display:none}.tool-row h3{font-size:26px;letter-spacing:-.025em}.tool-row p{margin:0;color:var(--muted)}.go{font-size:32px;transition:transform .2s}.tool-row:hover .go{transform:translate(3px,-3px)}.tool-row:hover h3{text-decoration:underline;text-underline-offset:5px}.tile{height:100px;border-radius:12px;background:#e9e9df;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.palette i{height:100%;flex:1;background:var(--blue)}.palette i:nth-child(2){background:var(--pear)}.palette i:nth-child(3){background:var(--coral)}.palette i:nth-child(4){background:var(--mint)}.systems{gap:8px}.systems i{width:24px;height:32px;border:3px solid var(--ink);border-radius:4px;background:var(--blue)}.systems i:nth-child(2){height:50px;background:var(--pear)}.simple{gap:4px}.simple span{font-size:32px;background:var(--coral);width:32px;height:40px;text-align:center;line-height:38px;border-radius:4px;transform:rotate(-10deg)}.gravity i{width:45px;height:45px;border-radius:50%;background:var(--blue);position:absolute;left:20px}.gravity i:nth-child(2){width:32px;height:32px;left:75px;top:14px;background:var(--pear)}.gravity i:nth-child(3){width:20px;height:20px;left:80px;bottom:18px;background:var(--coral)}.detective i{width:45px;height:45px;border:5px solid var(--ink);border-radius:50%}.detective i:after{content:'';position:absolute;width:6px;height:24px;background:var(--ink);transform:rotate(-40deg);top:58px;left:87px}.detective b{position:absolute;font-size:24px}.dominoes{gap:9px}.dominoes i{width:22px;height:50px;border-radius:4px;background:var(--blue);transform:rotate(24deg)}.dominoes i:nth-child(2){background:var(--coral);transform:rotate(12deg)}.dominoes i:nth-child(3){background:var(--pear);transform:none}.postcard i{width:75px;height:75px;border:12px solid var(--blue);border-radius:28%;transform:rotate(-20deg)}.postcard b{position:absolute;font-size:25px}.pizza i{width:70px;height:70px;border:7px solid #b5654b;border-radius:50%;background:conic-gradient(#ee9875 0 40deg,#f4f2e9 40deg 43deg,#d4e766 43deg 83deg,#f4f2e9 83deg 86deg,#ee9875 86deg 126deg,#f4f2e9 126deg 129deg,#d4e766 129deg 169deg,#f4f2e9 169deg 172deg,#ee9875 172deg 212deg,#f4f2e9 212deg 215deg,#d4e766 215deg 255deg,#f4f2e9 255deg 258deg,#ee9875 258deg 298deg,#f4f2e9 298deg 301deg,#d4e766 301deg)}@media(max-width:800px){.intro h1{font-size:50px}.library-head{display:block}.library-head .actions{margin-top:16px}.featured{padding:28px;gap:12px}.featured h2{font-size:34px}.feature-art b{font-size:46px}.feature-art i{border-width:18px}.tool-row{gap:20px}.tool-row h3{font-size:23px}}@media(max-width:650px){.intro h1{font-size:44px}.lab-note{margin-top:20px}.featured{grid-template-columns:1fr}.feature-art{height:220px;grid-row:1}.featured h2{font-size:32px}.tool-row{grid-template-columns:72px 1fr auto;gap:14px}.tile{height:72px}.tool-row h3{font-size:20px}.tool-row p{font-size:14px}.go{font-size:24px}.tile>*{scale:.8}.gravity i{left:8px}.gravity i:nth-child(2){left:40px}.gravity i:nth-child(3){left:45px}.detective i:after{left:38px}.postcard i{width:60px;height:60px}.feature-art{max-width:380px;width:100%;margin:auto}}

/* Keyboard equivalent of the restored gallery's original hover choreography. */
.featured:focus-visible .feature-art i{transform:rotate(12deg) rotateY(0)}
.tool-row:focus-visible .go{transform:translate(3px,-3px)}
.tool-row:focus-visible h3{text-decoration:underline;text-underline-offset:5px}
@media(prefers-reduced-motion:reduce){.featured:is(:hover,:focus-visible) .feature-art i{transform:rotate(-18deg) rotateY(-20deg)}.featured:is(:hover,:focus-visible) .feature-art i:nth-child(2){transform:rotate(5deg) rotateY(-20deg)}.featured:is(:hover,:focus-visible) .feature-art i:nth-child(3){transform:rotate(28deg) rotateY(-20deg)}.tool-row:is(:hover,:focus-visible) .go{transform:none}}
html[data-lab-motion="reduced"] .featured:is(:hover,:focus-visible) .feature-art i{transform:rotate(-18deg) rotateY(-20deg)}
html[data-lab-motion="reduced"] .featured:is(:hover,:focus-visible) .feature-art i:nth-child(2){transform:rotate(5deg) rotateY(-20deg)}
html[data-lab-motion="reduced"] .featured:is(:hover,:focus-visible) .feature-art i:nth-child(3){transform:rotate(28deg) rotateY(-20deg)}
html[data-lab-motion="reduced"] .tool-row:is(:hover,:focus-visible) .go{transform:none}