:root{font-family:Arial,Helvetica,sans-serif;color:#171717;background:#fff}*{box-sizing:border-box}body{margin:0;min-width:280px}button{font:inherit}.gallery{width:min(1280px,87%);min-height:100svh;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:center;padding:56px 0}.card{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3 / 4;container-type:inline-size;cursor:default;outline-offset:5px;--ink: #171717;--focus: #0069df;color:var(--ink)}.apple{background:linear-gradient(180deg,#f5f5f3,#e6e6e4)}.google{--ink: #f5f8ff;--focus: #c9efff;background:linear-gradient(180deg,#0b164f,#193b9f 52%,#2c62f5)}.tesla{--ink: #f6f3f3;--focus: #6dc8ff;background:linear-gradient(180deg,#111112,#190f12)}.art{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.card:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 50%,var(--scrim) 77%,transparent 100%)}.apple{--scrim: #e9e9e78c}.google{--scrim: #2454d359}.tesla{--scrim: #170f12a6}.brand{position:absolute;left:11.5%;top:9%;display:flex;align-items:center;gap:9px}.mark{width:23px;height:25px;fill:currentColor;flex:none}h2{margin:0;font-size:clamp(17px,5.2cqi,24px);font-weight:600;letter-spacing:-.045em}.caption{position:absolute;left:11.5%;right:8%;bottom:9.5%}.tagline{margin:0 0 25px;font-size:clamp(19px,6.35cqi,29px);line-height:1.32;font-weight:400;letter-spacing:-.045em}.source{color:inherit;border:0;padding:7px 0;margin:-7px 0;background:transparent;cursor:pointer;font-size:clamp(12px,3.65cqi,15px);line-height:1.4;letter-spacing:-.025em;text-align:left;text-decoration-thickness:1px;text-underline-offset:5px}.source span{margin-left:9px}.source:hover{text-decoration:underline}.card:focus-visible,.source:focus-visible{outline:2px solid var(--focus)}.source:focus-visible{outline-offset:6px}dialog{width:min(740px,calc(100% - 32px));max-height:calc(100svh - 40px);padding:32px;border:1px solid #333;color:#eee;background:#131518}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-title{font-size:24px;letter-spacing:-.04em;font-weight:500;margin:0}.close,.copy{border:1px solid #555;color:#eee;background:transparent;padding:9px 13px;cursor:pointer}.close:hover,.copy:hover{background:#292d34}dialog button:focus-visible{outline:2px solid #7ac6ff;outline-offset:4px}.explanation{font-size:14px;line-height:1.7;color:#bdc2cb;margin:24px 0 18px}.code-label{color:#9bcfff;font:11px/1.6 Consolas,monospace;letter-spacing:.05em}pre{margin:9px 0 23px;padding:16px;border:1px solid #343840;background:#0c0e10;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 Consolas,monospace;color:#d6dde7}.dialog-bottom{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;color:#b9c0ca}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(min-width:601px)and (max-width:900px){.gallery{width:94%;gap:12px}.brand{gap:6px}.mark{width:18px;height:21px}.tagline{font-size:clamp(16px,6.1cqi,23px);margin-bottom:18px}}@media(max-width:600px){.gallery{width:calc(100% - 40px);grid-template-columns:1fr;gap:20px;padding:24px 0}.card{aspect-ratio:3 / 4}.tagline{font-size:6.35cqi}dialog{padding:22px}}@media(prefers-reduced-motion:reduce){dialog::backdrop{backdrop-filter:none}}