@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");
:root{--bg:#FAFAF8;--ink:#141414}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 13.5px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.top{height:101px;flex:none}
main{flex:1;display:flex;align-items:center;justify-content:center}
/* mark path is 70% of its 2400 viewBox, so a 60vh box shows a 42vh mark */
.stage{perspective:1400px;width:min(60vh,140vw);aspect-ratio:1}
.mark{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.mark .back,.mark canvas{position:absolute;inset:0;width:100%;height:100%}
.mark .back{transform:translateZ(-14px);fill:none;stroke:var(--ink);stroke-width:3px;vector-effect:non-scaling-stroke;opacity:.35}
.foot{flex:none;height:120px;padding:0 24px;display:flex;align-items:flex-start}
.foot p{margin:0;font:400 14px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mark{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1)}
.mark.on{opacity:1}
@media (prefers-reduced-motion:reduce){.mark{transition:none}}