/* O que qualquer página de ferramenta do Ideacision partilha: fontes, tokens, reset, shell, cabeçalho, botões e rodapé. Extraído de score.html a 10 de setembro de 2026, quando nasceu a segunda página (questions.html) e a alternativa era duplicar cem linhas de tokens — e voltar a duplicá-las na terceira. A landing e a /privacy continuam com o CSS inline: aquele é um gradiente calibrado que não se partilha com nada, e mexer-lhe para o encaixar aqui seria refazer o que já está calibrado sem ninguém o ter pedido. */ @font-face{font-family:Geist;src:url(/fonts/geist-400.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Geist;src:url(/fonts/geist-600.woff2) format('woff2');font-weight:600;font-display:swap} @font-face{font-family:Geist;src:url(/fonts/geist-700.woff2) format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap} /* Ao contrário da landing, esta página muda mesmo de tema. Lá o gradiente é a identidade e inverter as cores calibradas a ele seria um redesign; aqui é uma superfície de trabalho, onde alguém vai estar sentado a arrastar dez sliders, e o tema tem de servir a luz da sala. Por isso tudo o que se pinta sai de tokens, e o bloco escuro redefine só os tokens. */ /* O ESCURO É O IMPLÍCITO, E O CLARO É QUE SE DIZ. Até 19 set 2026 era ao contrário aqui, e só aqui: o `index.html` e o `privacy.html` sempre tiveram `:root` escuro com `:root[data-theme="light"]` por cima, e este ficheiro — que veste as outras dez páginas — tinha `:root` claro com um bloco `dark` por cima. O mesmo atributo, o mesmo repositório, sentidos opostos. NÃO FOI UMA ESCOLHA MINHA. A convenção já estava escrita no cabeçalho do `tests/tema.test.mjs`, com estas palavras: «atributo data-theme na raiz, "dark" implícito e "light" explícito». A landing cumpria-a e este ficheiro é que tinha divergido. E o arranque de cada página diz o mesmo por outras palavras: quando alguma coisa corre mal, o `catch` escreve `'dark'`. Um fallback claro aqui contradizia o fallback que o próprio repo escolheu. PORQUE É QUE ISTO NÃO MUDA NADA NO QUE SE VÊ: o `:root` sem qualificação nunca é o tema activo em página nenhuma. As nove páginas de ferramenta escrevem o atributo num script síncrono no ``; a `/embed` não tem arranque nenhum, mas traz `data-theme="light"` no próprio `` e só sobe para `dark` se o sistema preferir. O único caminho que muda é JavaScript desligado — e aí a landing já dava escuro. O QUE ESTÁ NESTE BLOCO E NÃO NO OUTRO: o amarelo e as duas famílias de letra são identidade de marca e não mudam com o tema, por isso vivem aqui uma vez só. Tudo o que muda está declarado NOS DOIS blocos, com os mesmos nomes — há um teste a exigi-lo, porque um token definido só num tema deixa o outro a herdar a cor errada sem ninguém dar por isso. */ :root{ --yellow:#FFD24A; --sans:Geist,'Helvetica Neue',Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; color-scheme:dark; --bg:#08070c; --surface:#100e18; --line:rgba(243,237,225,.18); --line-soft:rgba(243,237,225,.09); --fg:#f3ede1; --fg-soft:rgba(243,237,225,.78); --fg-faint:rgba(243,237,225,.5); --go:oklch(.8 .17 145); --refine:var(--yellow); --kill:oklch(.72 .17 25); } :root[data-theme="light"]{ color-scheme:light; --bg:#f6f1e6; --surface:#fffdf7; --line:rgba(20,16,11,.16); --line-soft:rgba(20,16,11,.09); --fg:#14100b; --fg-soft:rgba(20,16,11,.72); --fg-faint:rgba(20,16,11,.5); --go:oklch(.52 .15 145); --refine:oklch(.5 .12 75); --kill:oklch(.52 .2 25); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased} h1,h2,p{margin:0;text-wrap:pretty} button{font:inherit} a{color:inherit} .shell{max-width:920px;margin:0 auto;padding:0 24px 96px} header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 0;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)} .brand span{font-size:16px;font-weight:700;letter-spacing:-.025em} .navright{display:flex;align-items:center;gap:14px} .theme-toggle{appearance:none;background:transparent;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;padding:0;display:grid;place-items:center;color:var(--fg-faint);cursor:pointer} .theme-toggle:hover{color:var(--fg)} .theme-toggle .half{transition:transform .3s ease} :root[data-theme="light"] .theme-toggle .half{transform:rotate(180deg);transform-origin:center} /* Mesma pílula do theme-toggle, mas com texto (a língua para a qual troca) em vez de ícone — um botão só, ao contrário do par EN/PT de antes: padrão do ta2f.com, decidido pelo Tiago a 11 set 2026 por ter metade dos controlos do xyz. */ .lang-toggle{width:auto;padding:0 10px;border-radius:14px; font:700 11px var(--mono);letter-spacing:.04em} .actions{display:flex;gap:10px;padding:22px 0 0;flex-wrap:wrap} .ghost{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;background:transparent;border:1px solid var(--line);color:var(--fg-soft);padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block} .ghost:hover:not(:disabled){border-color:var(--fg);color:var(--fg)} .ghost:disabled{opacity:.42;cursor:default} footer{padding:44px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg-faint);display:flex;flex-wrap:wrap;gap:8px 18px} footer a{text-decoration:none;border-bottom:1px solid var(--line)} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* NOTA para quem acrescentar regras aqui: este ficheiro é carregado ANTES do