@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@500;600;700;800&family=Jacquard+24&family=JetBrains+Mono:wght@400;500&family=Mona+Sans:wght@400;500&display=swap');

/* qymyz.dev — component styles. Values come from tokens.css; type sizes from the generated style classes (.display-xl, .loom-xl …). */

html, body { margin: 0; }
body { font-family: var(--font-sans); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- utilities ---------- */
.qz-band { background: var(--band); color: var(--on-band); }
.qz-band--garnet { background: var(--band-garnet); }
.qz-uv { background: var(--band-uv); color: var(--on-violet); }
.qz-scan { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.qz-uv.qz-scan { background-image: repeating-linear-gradient(0deg, rgba(11, 10, 14, .07) 0 1px, transparent 1px 4px); }
.qz-caps { text-transform: uppercase; }
.qz-loom { font-family: var(--font-loom); font-weight: 400; }
.qz-glitch { text-shadow: -3px 0 rgba(34, 228, 255, .85), 3px 0 rgba(255, 62, 200, .85); }
.qz-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-6); }
.qz-stack { display: grid; gap: var(--space-4); padding: var(--space-6); }

/* HUD frame */
.qz-hud { position: relative; --qz-hud-c: var(--hud); }
.qz-band .qz-hud { --qz-hud-c: var(--violet); }
.qz-code.qz-hud { --qz-hud-c: var(--lime); }
.qz-uv.qz-hud, .qz-uv .qz-hud { --qz-hud-c: var(--night); }
.qz-hud::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 0 0 / var(--size-hud) 1px no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 0 0 / 1px var(--size-hud) no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 100% 0 / var(--size-hud) 1px no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 100% 0 / 1px var(--size-hud) no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 0 100% / var(--size-hud) 1px no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 0 100% / 1px var(--size-hud) no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 100% 100% / var(--size-hud) 1px no-repeat,
    linear-gradient(var(--qz-hud-c), var(--qz-hud-c)) 100% 100% / 1px var(--size-hud) no-repeat;
}

/* eyebrow: dot-matrix caps in brackets */
.qz-eyebrow { margin: 0; font-family: var(--font-display); text-transform: uppercase; color: var(--accent); }
.qz-eyebrow::before { content: "[\00a0"; }
.qz-eyebrow::after { content: "\00a0]"; }
.qz-band .qz-eyebrow { color: var(--violet); }
.qz-band--garnet .qz-eyebrow { color: var(--on-band-mute); }
.qz-uv .qz-eyebrow { color: var(--night); }

/* the arrow: a CSS mask in currentColor */
.qz-arrow {
  display: inline-block; flex: none; width: 0.95em; height: 0.95em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8H14M8.5 2.5L14 8l-5.5 5.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8H14M8.5 2.5L14 8l-5.5 5.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms ease-out;
}
.qz-arrow--double {
  width: 1.4em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8H22M10.5 2.5L16 8l-5.5 5.5M16.5 2.5L22 8l-5.5 5.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8H22M10.5 2.5L16 8l-5.5 5.5M16.5 2.5L22 8l-5.5 5.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Logo ---------- */
.qz-logo { display: block; color: inherit; flex: none; }

/* ---------- Ornament: neon glows on dark grounds ---------- */
.qz-orn { display: block; flex: none; }
.qz-orn--ink { color: var(--ink); }
.qz-orn--on-band { color: var(--on-band); }
.qz-orn--accent { color: var(--accent); }
.qz-orn--night { color: var(--night); }
.qz-orn--garnet { color: var(--garnet); }
.qz-orn--violet { color: var(--violet); filter: drop-shadow(0 0 4px var(--violet)); }
.qz-orn--lime { color: var(--lime); filter: drop-shadow(0 0 4px var(--lime)); }
.qz-orn--magenta { color: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }
.qz-orn--cyan { color: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.qz-orn--gold { color: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); }
.qz-orn--flag { filter: drop-shadow(0 0 4px rgba(200, 255, 46, .5)); }
.qz-orn--auto { color: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }
[data-theme="light"] .qz-orn--auto { color: var(--accent); filter: none; }
[data-theme="light"] .qz-band .qz-orn--auto { color: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }
.qz-uv .qz-orn--auto { color: var(--night); filter: none; }

/* ---------- Button ---------- */
.qz-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; height: var(--size-control); padding: 0 var(--space-6);
  border: 1px solid transparent; background: transparent;
  font-family: var(--font-display); font-size: 15px; line-height: 18px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: filter 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}
.qz-btn::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--qz-btn-bg, transparent);
  clip-path: polygon(0 0, calc(100% - var(--size-cut)) 0, 100% var(--size-cut), 100% 100%, var(--size-cut) 100%, 0 calc(100% - var(--size-cut)));
}
.qz-btn:hover .qz-arrow { transform: translateX(4px); }
.qz-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-btn--primary { --qz-btn-bg: var(--primary); color: var(--on-primary); }
.qz-btn--magenta { --qz-btn-bg: var(--magenta); color: var(--on-magenta); }
.qz-btn--night { --qz-btn-bg: var(--night); color: var(--violet); }
.qz-btn--primary:hover { filter: drop-shadow(0 0 12px var(--violet)); }
[data-theme="light"] .qz-btn--primary:hover { filter: drop-shadow(0 0 10px var(--magenta)); }
.qz-band .qz-btn--primary { --qz-btn-bg: var(--violet); color: var(--on-violet); }
.qz-btn--magenta:hover { filter: drop-shadow(0 0 12px var(--magenta)); }
.qz-btn--night:hover { color: var(--milk); }
.qz-btn--outline { border-color: var(--line-strong); color: var(--ink); }
.qz-btn--outline:hover { border-color: var(--violet); color: var(--violet); }
[data-theme="light"] .qz-btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.qz-band .qz-btn--outline { border-color: var(--on-band-mute); color: var(--on-band); }
.qz-band .qz-btn--outline:hover { border-color: var(--violet); color: var(--violet); background: transparent; }
.qz-btn:disabled, .qz-btn[aria-disabled="true"] { --qz-btn-bg: var(--line); color: var(--ink-mute); filter: none; cursor: not-allowed; }

/* ---------- ArrowLink ---------- */
.qz-link { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); text-decoration: none; transition: color 160ms ease-out; }
.qz-link__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.qz-link:hover { color: var(--accent); }
.qz-link:hover .qz-link__text { text-decoration-color: currentColor; }
.qz-link:hover .qz-arrow { transform: translateX(4px); }
.qz-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-band .qz-link { color: var(--on-band); }
.qz-band .qz-link:hover { color: var(--violet); }
.qz-band .qz-link__text { text-decoration-color: var(--on-band-mute); }
.qz-prose a { color: var(--link); text-underline-offset: 3px; }

/* ---------- Tabs ---------- */
.qz-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qz-tab {
  display: inline-flex; align-items: center; box-sizing: border-box; height: var(--size-tab); padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); background: transparent; text-decoration: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1; color: var(--ink); cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.qz-tab:hover { border-color: var(--accent); color: var(--accent); }
.qz-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.qz-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- TopNav ---------- */
.qz-nav { display: flex; align-items: center; gap: var(--space-10); box-sizing: border-box; height: var(--size-nav); padding: 0 var(--space-10); background: var(--canvas); color: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--font-sans); }
.qz-nav.qz-band { background: var(--band); color: var(--on-band); border-bottom-color: var(--band-raised); }
.qz-nav__logo { display: flex; color: inherit; }
.qz-nav__logo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-nav__links { display: flex; gap: var(--space-8); flex: 1; }
.qz-nav__link { color: inherit; text-decoration: none; font-size: 15px; line-height: 22px; }
.qz-nav__link:hover { color: var(--accent); }
.qz-nav.qz-band .qz-nav__link:hover { color: var(--violet); }
.qz-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-nav__end { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.qz-nav__menu { display: none; }
.qz-nav.qz-band .qz-nav__menu { color: var(--on-band); border-color: var(--on-band-mute); }
@media (max-width: 860px) {
  .qz-nav { gap: var(--space-4); padding: 0 var(--space-4); }
  .qz-nav__links, .qz-nav__mail { display: none; }
  .qz-nav__menu { display: inline-flex; }
}

/* ---------- Hero ---------- */
.qz-hero { position: relative; padding: var(--space-30) var(--space-10) 0; overflow: hidden; }
.qz-hero__inner { max-width: var(--size-content); margin: 0 auto; padding-bottom: var(--space-20); }
.qz-hero__title { margin: var(--space-6) 0 0; font-weight: 400; }
.qz-hero__line { display: block; }
.qz-hero__break { display: block; margin-top: var(--space-2); color: var(--violet); text-shadow: 0 0 24px rgba(169, 112, 255, .65); }
.qz-hero__lead { margin: var(--space-8) 0 0; max-width: 560px; color: var(--on-band-mute); }
.qz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-10); }
.qz-hero__note { margin: var(--space-4) 0 0; color: var(--on-band-mute); }
.qz-hero__media { margin-top: var(--space-20); background: var(--felt); }
.qz-hero__seam { padding-bottom: var(--space-6); }
@media (max-width: 767px) {
  .qz-hero { padding: var(--space-20) var(--space-4) 0; }
  .qz-hero__line { font-size: 44px; line-height: 46px; }
  .qz-hero__break { font-size: 72px; line-height: 64px; }
}

/* ---------- StatBand ---------- */
.qz-stats { padding: var(--space-20) var(--space-10); }
.qz-stats > .qz-eyebrow { max-width: var(--size-content); margin: 0 auto var(--space-10); }
.qz-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); max-width: var(--size-content); margin: 0 auto; }
.qz-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--garnet); }
.qz-stats__value { margin: 0; color: var(--on-band); }
.qz-stats__label { margin: 0; color: var(--on-band-mute); }
@media (max-width: 767px) { .qz-stats__grid { grid-template-columns: 1fr; } }

/* ---------- FeatureCard ---------- */
.qz-card { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.qz-card__title { margin: 0; }
.qz-card__text { margin: 0; color: var(--ink-mid); }
.qz-card__aud { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.qz-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.qz-card__list li::before { content: "> "; font-family: var(--font-display); font-weight: 700; color: var(--lime); }
[data-theme="light"] .qz-card__list li::before { color: var(--accent); }
.qz-card__link { margin-top: auto; padding-top: var(--space-2); align-self: flex-start; }
.qz-card--uv { background: var(--band-uv); color: var(--on-violet); border-color: var(--violet); }
.qz-card--uv .qz-card__text, .qz-card--uv .qz-card__list li::before { color: var(--night); }
.qz-card--uv .qz-card__aud { border-top-color: rgba(11, 10, 14, .25); }
.qz-card--uv .qz-link { color: var(--night); }
.qz-card--uv .qz-link__text { text-decoration-color: var(--night); }

/* ---------- CodeBlock ---------- */
.qz-code { margin: 0; background: var(--terminal); color: var(--on-band); font-family: var(--font-mono); }
.qz-code__bar { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--band-raised); }
.qz-code__bar .qz-eyebrow { color: var(--lime); }
.qz-code__tabs { display: flex; gap: var(--space-1); }
.qz-code__tab, .qz-code__copy { height: 30px; padding: 0 var(--space-3); border: 1px solid transparent; background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; color: var(--on-band-mute); cursor: pointer; }
.qz-code__tab:hover, .qz-code__copy:hover { color: var(--lime); }
.qz-code__tab[aria-selected="true"] { color: var(--night); background: var(--lime); }
.qz-code__copy { margin-left: auto; }
.qz-code__tab:focus-visible, .qz-code__copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-code__pre { margin: 0; padding: var(--space-4) var(--space-4) var(--space-6); overflow-x: auto; white-space: pre; }
.qz-code__str { color: var(--cyan); }
.qz-code__kw { color: var(--magenta); }
.qz-code__com { color: var(--on-band-mute); }

/* ---------- Quote ---------- */
.qz-quote { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: 0; padding: var(--space-10) var(--space-6); text-align: center; }
.qz-quote__text { margin: 0; max-width: 18ch; text-wrap: balance; }

/* ---------- EmailCta: the UV band ---------- */
.qz-email { padding: var(--space-30) var(--space-10); }
.qz-email__inner { max-width: var(--size-content); margin: 0 auto; }
.qz-email__title { margin: var(--space-6) 0 0; }
.qz-email__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }
.qz-email__addr { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 1; color: var(--night); text-decoration: none; transition: color 160ms ease-out; }
.qz-email__addr .qz-arrow { width: 0.55em; height: 0.55em; }
.qz-email__addr:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.qz-email__addr:hover .qz-arrow { transform: translateX(6px); }
.qz-email__addr:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--violet), 0 0 0 4px var(--night); }
.qz-email__copy:focus-visible { box-shadow: 0 0 0 2px var(--violet), 0 0 0 4px var(--night); }
.qz-email__note { margin: var(--space-6) 0 0; color: var(--night); }
@media (max-width: 767px) {
  .qz-email { padding: var(--space-20) var(--space-4); }
  .qz-email__addr { font-size: 36px; }
}

/* ---------- Footer ---------- */
.qz-footer { font-family: var(--font-sans); }
.qz-footer__flag { background: var(--night); padding: var(--space-6) 0; }
.qz-footer__band { padding: var(--space-20) var(--space-10) var(--space-8); }
.qz-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-10); max-width: var(--size-content); margin: 0 auto; }
.qz-footer__brand { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.qz-footer__tag { margin: 0; max-width: 28ch; color: var(--on-band-mute); }
.qz-footer__mail { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--violet); text-decoration: none; }
.qz-footer__mail:hover { text-shadow: 0 0 12px var(--violet); }
.qz-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.qz-footer__h { margin: 0 0 var(--space-4); color: var(--on-band); }
.qz-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.qz-footer__a { color: var(--on-band-mute); text-decoration: none; }
.qz-footer__a:hover { color: var(--violet); }
.qz-footer__a:focus-visible, .qz-footer__mail:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); max-width: var(--size-content); margin: var(--space-20) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--band-raised); color: var(--on-band-mute); }
.qz-footer__bottom p { margin: 0; }
.qz-footer__legal { display: flex; gap: var(--space-6); }
@media (max-width: 767px) {
  .qz-footer__band { padding: var(--space-20) var(--space-4) var(--space-8); }
  .qz-footer__top, .qz-footer__cols { grid-template-columns: 1fr; }
}