/* App shell aliases to unchanged approved website tokens. */
:root{--paper:var(--tc-paper);--surface:var(--tc-surface);--ink:var(--tc-ink);--muted:var(--tc-muted);--rule:var(--tc-rule);--accent:var(--tc-accent);--accent-hover:var(--tc-accent-hover);--tint:var(--tc-tint);--control:var(--tc-control);--sans:var(--tc-font);--mono:var(--tc-mono);--radius:6px;--radius-sm:4px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--sans)}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px 56px}

.mast{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:8px 24px;padding:28px 0 16px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.eyebrow{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px;
  font:500 12px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.12;letter-spacing:-.04em}
.sub{margin:0;color:var(--muted);max-width:44ch}

.tools{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:620px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}}

a.tool{display:flex;gap:16px;align-items:flex-start;min-height:44px;height:100%;
  padding:18px 20px;background:var(--surface);color:inherit;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .12s ease,background-color .12s ease}
a.tool:hover{border-color:var(--accent);background:var(--tint)}
a.tool:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
a.tool:hover h2{color:var(--accent-hover)}

.glyph{flex:none;display:grid;place-items:center;width:44px;height:44px;
  font:400 20px/1 var(--mono);color:var(--accent);background:var(--tint);border-radius:var(--radius-sm)}
a.tool h2{margin:0 0 4px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
a.tool p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.dom{display:block;margin-top:8px;font:500 12px/1.5 var(--mono);letter-spacing:.07em;
  color:var(--accent);overflow-wrap:anywhere}
.tag{display:inline-block;margin-left:8px;padding:0 6px;vertical-align:2px;
  font:500 11px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:var(--radius-sm)}

footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--rule);
  color:var(--muted);font-size:13px}
footer p{margin:0 0 8px;max-width:72ch}

@media (max-width:619px){.mast{padding-top:20px}a.tool{padding:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors:active){a.tool{border:1px solid CanvasText}a.tool:focus-visible{outline-color:Highlight}}

/* Let the text column shrink beside its fixed glyph at 320px. */
a.tool > div:last-child { min-width: 0; }

a.tool:hover .dom { text-decoration: underline; text-underline-offset: 3px; }

.mast{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px 24px}
.aero-hub-brand{align-self:center}.aero-hub-theme{justify-self:end}.mast .sub{text-align:right}
.glyph svg{width:28px;height:28px}a.tool{transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}
a.tool:focus-visible{outline-color:var(--tc-focus)}
@media(max-width:619px){.mast .sub{grid-column:1/-1;text-align:left}.mast{gap:18px 12px}.mast h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){a.tool{transition:none!important}}