/* Native, lightweight interpretations of the supplied 21st.dev references. */
.cases-heading{display:grid;grid-template-columns:1.1fr 1fr;column-gap:80px;align-items:end}.cases-heading>.section-label{grid-column:1/-1;margin-bottom:23px}.cases-heading h2,.reviews-heading h2{white-space:pre-line}.cases-heading>.lead{max-width:430px;margin:0}.case-display{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;margin-top:30px;align-items:center}.case-stage{height:520px;position:relative;isolation:isolate;touch-action:pan-y;overflow:hidden;perspective:1200px;border-radius:28px}.case-halo{position:absolute;inset:12% 0 7%;z-index:-1;background:radial-gradient(ellipse,#e6d8f591,transparent 68%);filter:blur(10px)}.case-screen{position:absolute;height:460px;aspect-ratio:9/16;left:50%;top:22px;border:5px solid #fff;border-radius:23px;overflow:hidden;box-shadow:0 14px 30px #30283f20;transform:translateX(-50%);transition:transform .75s cubic-bezier(.2,.7,.15,1),opacity .6s,filter .6s;will-change:transform;background:#19161e;z-index:3}.case-screen[data-position="-1"]{transform:translateX(calc(-50% - 88px)) rotate(-9deg) scale(.85);z-index:1;filter:brightness(.8);opacity:.72}.case-screen[data-position="1"]{transform:translateX(calc(-50% + 88px)) rotate(9deg) scale(.85);z-index:2;filter:brightness(.9);opacity:.8}.case-screen video{width:100%;height:100%;object-fit:contain;display:block;background:#101010}.case-silent{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}.case-tabs{grid-column:1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px}.case-tabs>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:40px;background:transparent;border:1px solid transparent;padding:6px;color:var(--muted);transition:background .3s,color .3s,padding .4s}.case-tabs>button>img{border-radius:50%;width:34px;height:34px;flex-shrink:0}.case-tabs>button>span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .4s,opacity .3s;font-size:12px}.case-tabs>button[aria-selected=true]{padding:6px 16px 6px 6px;background:#30283f;color:#fff}.case-tabs>button[aria-selected=true]>span{max-width:100px;opacity:1}.case-tabs>button:hover{border-color:#d9caee}.case-copy{grid-column:2;grid-row:1/span 2;min-width:0}.case-person{display:flex;gap:12px;align-items:center;margin-bottom:25px}.case-person>img{width:44px;height:44px;border-radius:50%;flex-shrink:0}.case-person strong{display:block;font:500 15px/1.4 Geologica}.case-person span{display:block;font-size:12px;color:var(--muted);margin-top:3px}.case-person a{text-decoration:underline;text-underline-offset:3px}.case-copy h3{font-size:35px;line-height:1.17;letter-spacing:-.035em;margin:0 0 20px}.case-copy article>p{font-size:16px;line-height:1.65;margin:0 0 23px;max-width:470px}.case-copy blockquote{font-size:20px;line-height:1.5;margin:0;padding:0 0 0 20px;border-left:2px solid #b99be8;max-width:440px}.case-source{font-size:12px;margin-top:12px;padding:0}.case-copy .case-comment{font-size:12px;color:var(--muted);margin-top:20px}.case-playback{display:flex;align-items:center;gap:13px;margin-top:28px}.case-playback>button{font-size:12px;border:1px solid var(--line);border-radius:40px;min-height:44px;padding:8px 15px;background:#fff;color:var(--ink);flex-shrink:0}.case-playback>button:hover{background:#f2edf9}.case-progress{height:2px;background:#eee5f7;flex:1;overflow:hidden;min-width:25px}.case-progress>span{display:block;width:100%;height:100%;background:#9c7bcc;transform:scaleX(var(--progress,0));transform-origin:left;transition:transform .2s linear}#case-time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}#case-status{font-size:12px;color:var(--muted);min-height:18px;margin:8px 0 0}
.reviews{overflow:hidden;background:linear-gradient(180deg,#fff,#faf8fd 48%,#fff)}.reviews-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}.reviews-heading .section-label{margin-bottom:20px}.reviews-heading .lead{max-width:520px;font-size:18px;margin:22px 0 0}.reviews-window{max-width:100%;overflow:clip;touch-action:pan-y;padding:15px 0 24px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.reviews-train{display:flex;width:max-content;animation:reviewFlow 65s linear infinite}.review-group{display:flex;gap:20px;padding-right:20px}.review-card{width:340px;min-height:300px;padding:28px;background:#fff;border:1px solid #e8e0f0;border-radius:21px;box-shadow:0 9px 25px #30283f04;position:relative;display:flex;flex-direction:column;gap:20px}.review-topic{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.review-quote-mark{position:absolute;right:25px;top:18px;font:60px/1 Geologica;color:#e4d7f3;pointer-events:none}.review-card blockquote{margin:0;font-size:17px;line-height:1.55;flex:1}.review-attribution{font-size:11px;color:var(--muted);padding-top:17px;border-top:1px solid var(--line)}.review-originals{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}.review-originals .text-button{font-size:11px;padding:0}.reviews.motion-paused .reviews-train{animation-play-state:paused}@media(hover:hover){}@keyframes reviewFlow{to{transform:translateX(-50%)}}
.case-tools{grid-column:1;grid-row:2;display:flex;justify-content:center;gap:12px;margin-top:10px}.case-tools>button{min-height:44px;min-width:100px;padding:8px 16px;border:1px solid var(--line);border-radius:40px;background:#fff;font-size:12px}.case-tabs{grid-row:3}.case-copy{grid-row:1/span 3}

.case-video-dialog{width:calc(100% - 28px);max-width:570px;padding:58px 18px 18px}.case-video-dialog video{width:100%;height:auto;max-height:74dvh;aspect-ratio:9/16;object-fit:contain;background:#101010;border-radius:13px}.case-video-dialog p{font-size:12px;color:var(--muted);margin:13px 0 0;text-align:center}
/* Glass pockets hold the actual covers, not stock screenshots of folders. */
.guide-library{background:none;border:0;padding:0}.guide-library .guide-shelf{gap:24px;overflow-y:hidden;padding:50px 0 35px}.guide-library .guide{position:relative;background:none;border:0;padding:0 20px 75px;box-shadow:none;perspective:900px;isolation:isolate;border-radius:20px;min-height:350px}.guide-library .guide .guide-tab{position:absolute;z-index:5;bottom:40px;left:22px;padding:0;font-size:10px;letter-spacing:.06em}.guide-library .guide>img{position:relative;z-index:1;width:78%;margin:0 auto;border-radius:6px;max-height:285px;filter:drop-shadow(0 5px 9px #30283f18);transform:translateY(25px) rotate(-4deg);transition:transform .55s cubic-bezier(.2,.75,.2,1)}.guide-library .guide>span:not(.guide-tab):not(.folder-back):not(.folder-pocket){position:absolute;z-index:5;bottom:59px;left:22px;right:22px;padding:0;display:flex;justify-content:space-between;font-size:15px;font-weight:600}.folder-back{position:absolute;inset:54px 0 0;display:block!important;padding:0!important;border:1px solid #d4bceca6;border-radius:14px 22px 21px 21px;background:linear-gradient(125deg,#ddcaf2,#f2edf8 55%,#d6e4f4);z-index:0}.folder-back::before{content:"";position:absolute;left:0;top:-20px;width:43%;height:22px;border-radius:14px 16px 0 0;background:#ddcaf2;border:1px solid #d4bcec;border-bottom:0}.folder-pocket{position:absolute;inset:44% 0 0;display:block!important;padding:0!important;z-index:3;border:1px solid #fff;border-radius:14px 14px 21px 21px;background:linear-gradient(130deg,#ffffffba,#e8dbf2b3 62%,#e3edf1aa);backdrop-filter:blur(8px);box-shadow:inset 0 1px #fffc,0 14px 28px #72519d16;transform-origin:bottom center;transition:transform .55s cubic-bezier(.2,.75,.2,1)}.folder-pocket>span{position:absolute;bottom:16px;left:22px;font-size:10px;color:#665773}.guide-library .guide:hover,.guide-library .guide:focus-visible{transform:none;box-shadow:none}.guide-library .guide:hover>img,.guide-library .guide:focus-visible>img{transform:translateY(-8px) rotate(-7deg)}.guide-library .guide:hover .folder-pocket,.guide-library .guide:focus-visible .folder-pocket{transform:rotateX(-13deg)}.motion-toggle{min-height:44px;min-width:44px;padding:8px 10px}
@media(max-width:1000px){.case-display{column-gap:35px}.case-copy h3{font-size:30px}.case-stage{height:480px}.case-screen{height:420px}.cases-heading{column-gap:35px}.case-tabs{gap:5px}}
@media(max-width:700px){.cases-heading{display:block}.cases-heading>.section-label{display:block;margin-bottom:20px}.cases-heading>.lead{font-size:17px;line-height:1.6;margin-top:20px}.case-display{display:flex;flex-direction:column;gap:0;margin-top:22px}.case-stage{width:calc(100% + 30px);height:clamp(390px,112vw,460px);margin-inline:-15px;border-radius:20px}.case-screen{height:calc(100% - 48px);top:12px;border-width:4px;border-radius:20px}.case-screen[data-position="-1"]{transform:translateX(calc(-50% - 57px)) rotate(-9deg) scale(.85)}.case-screen[data-position="1"]{transform:translateX(calc(-50% + 57px)) rotate(9deg) scale(.85)}.case-silent{bottom:5px;font-size:10px}.case-tabs{width:100%;margin:18px 0 28px;gap:5px}.case-tabs>button{gap:7px;min-height:48px}.case-tabs>button>span{max-width:100px;opacity:1;font-size:11px}.case-tabs>button>img{width:28px;height:28px}.case-tabs>button[aria-selected=true]{padding:6px 10px 6px 6px}.case-copy{width:100%;padding:24px 21px 18px;border:1px solid #e8e0f0;border-radius:22px;background:#fff}.case-person{margin-bottom:20px}.case-copy h3{font-size:29px;margin-bottom:17px}.case-copy article>p{font-size:15px;margin-bottom:20px}.case-copy blockquote{font-size:18px;padding-left:15px}.case-copy .case-comment{font-size:11px;margin-bottom:12px}.case-playback{gap:10px;margin-top:22px}.case-playback>button{padding:7px 12px;font-size:11px}#case-time{font-size:10px}.reviews-heading{display:block;margin-bottom:27px}.reviews-heading .lead{font-size:17px}.review-card{width:min(300px,83vw);padding:24px;min-height:320px}.review-card blockquote{font-size:16px}.review-group{gap:14px;padding-right:14px}.review-originals{gap:4px 17px;margin-top:10px}.review-originals>span{width:100%;margin-bottom:4px}.guide-library .guide-shelf{gap:22px;padding:45px 0 32px}.guide-library .guide{flex-basis:85%;padding:0 15px 76px;min-height:337px}.guide-library .guide>img{max-height:275px;width:76%}.guide-library .guide>span:not(.guide-tab):not(.folder-back):not(.folder-pocket){font-size:14px;bottom:62px}.guide-library .guide .guide-tab{font-size:10px}.guide-library .slider-controls{margin-top:0}}
@media(max-width:350px){.case-tabs{gap:1px}.case-tabs>button{gap:4px;padding:5px}.case-tabs>button[aria-selected=true]{padding-right:8px}.case-tabs>button>span{font-size:10px}.case-tabs>button>img{width:25px;height:25px}.case-copy{padding:21px 16px}.case-playback{gap:7px}.case-playback>button{font-size:10px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.case-screen,.case-tabs>button,.case-tabs>button>span,.case-progress>span,.guide-library .guide>img,.folder-pocket{transition:none}}