@font-face{font-family:"New Science";src:url("/NewScience-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"New Science";src:url("/NewScience-SemiBold.otf") format("opentype");font-weight:600 800;font-display:swap}
:root{color-scheme:dark;--ink:#022c3a;--teal:#00c8b3;--cyan:#00b6cc;--paper:#f2fbfb;--muted:#b6d6db;--line:#37636f;font-family:"New Science",system-ui,sans-serif;color:var(--paper);background:var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#105060,transparent 420px)}
main{width:min(100% - 2rem,34rem);margin:auto;padding:2rem 0 max(2rem,env(safe-area-inset-bottom))}
header{display:flex;justify-content:center;margin-bottom:2rem}
header img{width:min(15rem,70%);height:auto;object-fit:contain}
h1{font-size:clamp(2rem,7vw,3.15rem);line-height:1.05;margin:0 0 1.2rem}
h2{margin:0 0 .65rem;font-size:1.35rem}
p{line-height:1.5;color:var(--muted)}
a{color:var(--teal)}
.card{background:#093746;border:1px solid var(--line);border-radius:1rem;padding:1rem;margin:1rem 0}
.stack{display:grid;gap:1rem}
.stack .card{margin:0}
label{display:grid;gap:.45rem}
input:not([type=radio],[type=checkbox]),select{width:100%;min-height:3rem;border:1px solid var(--line);border-radius:.6rem;padding:.65rem .8rem;background:#052c39;color:var(--paper);font:inherit}
button,.button{display:inline-grid;place-items:center;min-height:3rem;padding:.65rem 1rem;border-radius:.6rem;border:1px solid transparent;background:var(--teal);color:var(--ink);font:600 1rem "New Science",system-ui;text-decoration:none;cursor:pointer}
.secondary{border-color:var(--line);background:#093746;color:var(--paper)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
fieldset{min-width:0}
legend{font-size:1.2rem;font-weight:600;padding:0 .4rem;color:var(--teal)}
.letters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
.letters label{position:relative;cursor:pointer}
.letters input{position:absolute;opacity:0}
.letters span{display:grid;place-items:center;min-height:3rem;background:#052c39;border:1px solid var(--line);border-radius:.65rem;font-weight:600}
.letters input:checked+span{color:var(--ink);background:var(--teal);border-color:var(--teal)}
.letters input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
details summary{cursor:pointer}
details form{margin-top:1rem}
.score{margin:0;font-size:3rem;color:var(--teal)}
.score small{font-size:1.25rem}
.message{padding:.8rem;border:1px solid var(--cyan);border-radius:.65rem}
.actions{display:flex;flex-wrap:wrap;gap:.6rem}
.check{display:flex;align-items:center;gap:.55rem}
.wide main{width:min(100% - 2rem,62rem)}
.key{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:.65rem;border-bottom:1px solid var(--line)}
.screen main{width:min(100% - 3rem,96rem)}
.screen-nav{display:flex;flex-wrap:wrap;gap:.4rem;position:sticky;top:0;z-index:1;background:var(--ink);padding:.6rem 0}
.projection{min-height:90vh;scroll-margin-top:5rem;padding:1rem 0 2rem;font-size:clamp(1.05rem,2.05vw,2.25rem)}
.projection h1{font-size:clamp(1.55rem,3.2vw,3.4rem)}
.projection p{color:var(--paper)}
.projection .eyebrow,.projection li::marker{color:var(--teal);font-weight:600}
.projection li{padding:.2em 0 .2em .2em}
header img{background:#f2fbfb;border-radius:1rem;padding:.8rem 1rem;width:min(17rem,82%)}