body:has(.hero){background:#fff;margin:0}html[data-theme=dark] body:has(.hero){background:#000}.hero{background:#fff;height:100svh;position:relative;overflow:hidden}.hero[data-theme=dark]{background:#000}.mock{width:min(1.3 * 100svh * var(--ratio,16 / 9), 600vw);opacity:0;transition:opacity .8s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mock.ready{opacity:1}.mock-frame{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.mock-controls{gap:16px;display:flex;position:absolute;bottom:24px;right:24px}.hero-caption{text-wrap:pretty;text-align:center;color:#111;opacity:.5;width:max-content;max-width:calc(100% - 48px);margin:0;font-size:15px;line-height:18px;position:absolute;top:40px;left:50%;transform:translate(-50%)}.hero[data-theme=dark] .hero-caption{color:#fff}.scroll-hint{text-wrap:pretty;color:#111;opacity:.5;white-space:nowrap;flex-direction:column;align-items:center;gap:2px;font-size:15px;line-height:18px;text-decoration:none;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.scroll-hint svg{width:16px;height:16px}.hero[data-theme=dark] .scroll-hint{color:#fff}.scroll-hint:hover{opacity:.9}.mock-controls button{color:#111;cursor:pointer;opacity:.3;background:0 0;border:0;width:24px;height:24px;padding:0}.mock-controls button.on{opacity:.7}.mock-controls button svg{stroke-width:1.5px;width:24px;height:24px}.mock-controls[data-theme=dark] button{color:#fff}.mock-controls button:hover,.mock-controls[data-theme=dark] button:hover{background:0 0}.boot{z-index:20;background:#fff;align-content:center;place-items:center;gap:14px;transition:opacity .45s,visibility 0s linear .45s;display:grid;position:fixed;inset:0}.hero[data-theme=dark] .boot{background:#000}.boot.gone{opacity:0;visibility:hidden;pointer-events:none}.boot .spinner{opacity:.3;border:2px solid #111;border-top-color:#0000;border-radius:50%;width:26px;height:26px;animation:.8s linear infinite boot-spin}.hero[data-theme=dark] .boot .spinner{border-color:#0000 #fff #fff}.boot-label{color:#111;opacity:.4;font-size:15px;line-height:18px}.hero[data-theme=dark] .boot-label{color:#fff}@keyframes boot-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.boot .spinner{border-top-color:currentColor;animation:none}}