/* Shared base for all TM mockups. Each mockup adds its own look on top. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font, "Manrope", system-ui, sans-serif);background:var(--bg,#F7F7F5);color:var(--ink,#171717);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.tm-mark{display:block;height:1em;width:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{min-height:44px;padding:0 18px;border:1px solid currentColor;background:transparent;border-radius:0;font-size:13px;letter-spacing:.04em}
.btn[aria-pressed="true"]{background:var(--ink,#171717);color:var(--bg,#F7F7F5);border-color:var(--ink,#171717)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.back{position:fixed;left:12px;bottom:12px;z-index:50;font:12px/1 "IBM Plex Mono",monospace;background:#171717;color:#F7F7F5;padding:10px 12px;text-decoration:none;letter-spacing:.08em}

/* Intro */
html.tm-intro-on{overflow:hidden}
.tm-intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#F7F7F5;color:#171717;transition:opacity .45s ease,visibility .45s}
.tm-intro--dark{background:#121212;color:#F2F1EE}
.tm-intro.is-out{opacity:0;visibility:hidden}
.tm-intro__mark{width:min(46vw,300px);height:auto;fill:currentColor}
.tm-intro__draw{stroke-dasharray:1;stroke-dashoffset:1;animation:tmDraw .62s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(.15s + var(--i) * .5s)}
@keyframes tmDraw{to{stroke-dashoffset:0}}
.tm-intro__tag,.tm-intro__slogan{margin:0;opacity:0;transform:translateY(8px);animation:tmUp .6s ease forwards}
.tm-intro__tag{font:500 12px/1 "Manrope",sans-serif;letter-spacing:.32em;text-transform:uppercase;animation-delay:2.1s}
.tm-intro__slogan{font:300 italic 18px/1.2 "Source Serif 4",Georgia,serif;animation-delay:2.4s}
@keyframes tmUp{to{opacity:1;transform:none}}
.tm-intro__skip{position:absolute;right:20px;bottom:20px;min-height:44px;padding:0 16px;background:transparent;border:1px solid currentColor;font:12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}