:root{--preto:#000;--grafite:#2e2e33;--nevoa:#c9c9ce;--rosa:#d1145a;--rosa-claro:#f9d3e1;--branco:#fff;--bg:var(--preto);--fg:var(--branco);--muted:var(--nevoa);--line:var(--grafite);--sans:"Instrument Sans", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--gutter:clamp(16px, 4vw, 48px)}*,:before,:after{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--rosa);color:var(--branco)}.screen{min-height:100svh;padding:var(--gutter);display:grid}.viewfinder{grid-template-rows:auto 1fr auto;padding:clamp(20px,3vw,36px);animation:1s ease-out both fade-in;display:grid;position:relative}.corner{aspect-ratio:1;border:0 solid var(--branco);pointer-events:none;width:clamp(28px,4vw,48px);position:absolute}.corner.tl{border-top-width:3px;border-left-width:3px;border-top-left-radius:10px;top:0;left:0}.corner.tr{border-top-width:3px;border-right-width:3px;border-top-right-radius:10px;top:0;right:0}.corner.bl{border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:10px;bottom:0;left:0}.corner.br{border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:10px;bottom:0;right:0}.hud{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);justify-content:space-between;align-items:center;gap:16px;font-size:clamp(12px,1.1vw,14px);font-weight:500;display:flex}.logo{color:var(--branco);display:block}.rec{color:var(--fg);align-items:center;gap:10px;display:inline-flex}.rec-dot{background:var(--rosa);border-radius:50%;width:10px;height:10px;animation:1.4s step-end infinite blink}.timecode{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-left:8px;display:none}.hud-bottom{text-align:center;flex-direction:column;align-items:center}.links{text-transform:none;letter-spacing:.01em;flex-direction:column;align-items:center;gap:8px 28px;display:flex}.links a{color:var(--fg);background-image:linear-gradient(var(--rosa), var(--rosa));background-position:0 100%;background-repeat:no-repeat;background-size:0 2px;padding-block:10px 2px;transition:background-size .3s}.links a:hover,.links a:focus-visible{background-size:100% 2px;outline:none}.content{text-align:center;place-self:center;padding-block:56px}.title{letter-spacing:-.035em;font-size:clamp(48px,11vw,176px);font-weight:600;line-height:.95;animation:1s cubic-bezier(.2,.7,.2,1) .15s both rise}.wordmark-dot{background:var(--rosa);vertical-align:baseline;border-radius:50%;width:.5em;height:.5em;margin-inline:.03em;display:inline-block}.wordmark-light{font-weight:400}.tagline{color:var(--muted);margin-top:clamp(18px,2.5vw,32px);font-size:clamp(17px,1.8vw,24px);animation:1s .6s both fade-in}.status{border:1.5px solid var(--grafite);letter-spacing:.24em;text-transform:uppercase;color:var(--fg);border-radius:999px;align-items:center;gap:12px;margin-top:clamp(20px,3vw,32px);padding:10px 20px;font-size:12px;font-weight:500;animation:1s .9s both fade-in;display:inline-flex}.status-dot{background:var(--rosa);border-radius:50%;width:7px;height:7px}.strip{margin-top:clamp(32px,5vw,56px);animation:1s .75s both fade-in}.strip-frames{background:var(--grafite);border-radius:4px;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,340px);margin-inline:auto;padding:6px;list-style:none;display:grid}.strip-frame{--tile-bg:var(--preto);--icon-accent:var(--rosa);aspect-ratio:9/16;background:var(--tile-bg);color:var(--branco);place-items:center;transition:background-color .4s;display:grid}.strip-frame svg{width:72%;height:auto}.strip-frame.is-active{--tile-bg:var(--rosa);--icon-accent:var(--preto)}.strip-label{min-height:1.4em;color:var(--muted);margin-top:14px;font-size:16px;font-style:italic}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width>=600px){.timecode{display:inline}.hud-bottom{flex-direction:row;justify-content:center}.links{flex-flow:wrap}.links a{padding-block:0 2px}.strip-frames{gap:8px;width:420px;padding:8px}}@keyframes blink{50%{opacity:.2}}@keyframes fade-in{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(.2em)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation:none!important}}
