:root {
    --qd-bg: #fcfcfa;
    --qd-panel: #f4f4ee;
    --qd-line: #e0e0d6;
    --qd-line-hard: #c9c9bd;
    --qd-ink: #16181a;
    --qd-muted: #585d63;
    --qd-accent: #1f6f4a;
    --qd-accent-deep: #145236;
    --qd-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --qd-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --qd-wrap: 1000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--qd-bg);
    color: var(--qd-ink);
    font-family: var(--qd-sans);
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: var(--qd-mono);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.22;
    margin: 0 0 14px;
}

h1 { font-size: clamp(1.65rem, 4.4vw, 2.35rem); }
h2 { font-size: clamp(1.28rem, 3vw, 1.6rem); }
h3 { font-size: 1.06rem; }

p { margin: 0 0 15px; }

a { color: var(--qd-accent-deep); }

a:hover { color: var(--qd-accent); }

img { display: block; max-width: 100%; height: auto; }

table { border-collapse: collapse; }

ul, ol { margin: 0 0 16px; padding-left: 20px; }

li { margin-bottom: 7px; }

code, kbd { font-family: var(--qd-mono); font-size: 0.92em; }

:focus-visible {
    outline: 2px solid var(--qd-accent);
    outline-offset: 2px;
}

.qd-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--qd-ink);
    color: var(--qd-bg);
    padding: 12px 18px;
    z-index: 60;
}

.qd-skip:focus { left: 0; }

.qd-wrap {
    max-width: var(--qd-wrap);
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}

.qd-head {
    border-bottom: 1px solid var(--qd-line-hard);
    background: var(--qd-bg);
}

.qd-head__row {
    max-width: var(--qd-wrap);
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.qd-head__logo {
    font-family: var(--qd-mono);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--qd-ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.qd-head__logo span { color: var(--qd-accent); }

.qd-head__mail {
    margin-left: auto;
    font-family: var(--qd-mono);
    font-size: 0.82rem;
}

.qd-nav {
    width: 100%;
    border-top: 1px solid var(--qd-line);
    padding-top: 8px;
}

.qd-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
}

.qd-nav a {
    display: inline-block;
    padding: 10px 0;
    min-height: 44px;
    font-family: var(--qd-mono);
    font-size: 0.86rem;
    text-decoration: none;
    color: var(--qd-muted);
}

.qd-nav a:hover, .qd-nav a.is-active { color: var(--qd-accent-deep); }

.qd-crumbs {
    font-family: var(--qd-mono);
    font-size: 0.79rem;
    color: var(--qd-muted);
    padding-top: 16px;
}

.qd-crumbs a { color: var(--qd-muted); }

.qd-tag {
    display: inline-block;
    font-family: var(--qd-mono);
    font-size: 0.74rem;
    color: var(--qd-accent-deep);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.qd-hero {
    padding-top: 40px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--qd-line);
}

.qd-hero__lead {
    font-size: 1.08rem;
    color: var(--qd-muted);
    max-width: 62ch;
}

.qd-hero__meta {
    font-family: var(--qd-mono);
    font-size: 0.79rem;
    color: var(--qd-muted);
    margin-top: 18px;
}

.qd-hero__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.qd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 14px 26px;
    background: var(--qd-accent-deep);
    color: #ffffff;
    font-family: var(--qd-mono);
    font-size: 0.88rem;
    text-decoration: none;
    border: 1px solid var(--qd-accent-deep);
    transition: background 140ms ease, color 140ms ease;
}

.qd-btn:hover { background: var(--qd-accent); color: #ffffff; }

.qd-btn--ghost {
    background: transparent;
    color: var(--qd-ink);
    border-color: var(--qd-line-hard);
}

.qd-btn--ghost:hover { background: var(--qd-panel); color: var(--qd-ink); }

.qd-sec { padding-top: 46px; padding-bottom: 10px; }

.qd-sec__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.qd-sec__no {
    font-family: var(--qd-mono);
    font-size: 0.8rem;
    color: var(--qd-accent);
}

.qd-lede { max-width: 68ch; }

.qd-tblbox {
    overflow-x: auto;
    border: 1px solid var(--qd-line-hard);
    margin-bottom: 10px;
}

.qd-tbl {
    width: 100%;
    min-width: 620px;
    font-size: 0.9rem;
}

.qd-tbl caption {
    text-align: left;
    font-family: var(--qd-mono);
    font-size: 0.8rem;
    color: var(--qd-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--qd-line);
}

.qd-tbl th, .qd-tbl td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--qd-line);
    vertical-align: top;
}

.qd-tbl thead th {
    font-family: var(--qd-mono);
    font-weight: 500;
    font-size: 0.79rem;
    color: var(--qd-muted);
    background: var(--qd-panel);
}

.qd-tbl tbody th { font-weight: 600; }

.qd-tbl td { font-variant-numeric: tabular-nums; }

.qd-src {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--qd-muted);
    margin-bottom: 26px;
}

.qd-cmp { padding-top: 34px; }

.qd-cmp__crit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--qd-line);
    margin-bottom: 24px;
}

.qd-cmp__item {
    border-bottom: 1px solid var(--qd-line);
    padding: 14px 0;
}

.qd-cmp__item h3 { margin-bottom: 6px; }

.qd-cmp__item p { margin: 0; color: var(--qd-muted); font-size: 0.95rem; }

.qd-flow > p { max-width: 70ch; }

.qd-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 20px;
}

.qd-card {
    border: 1px solid var(--qd-line-hard);
    padding: 16px;
    background: var(--qd-bg);
}

.qd-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.qd-card__icon { width: 46px; height: 46px; }

.qd-card__label {
    font-family: var(--qd-mono);
    font-size: 0.74rem;
    color: var(--qd-accent);
    display: block;
}

.qd-card h3 { margin: 0; font-size: 1rem; }

.qd-card p { font-size: 0.94rem; color: var(--qd-muted); }

.qd-card__more {
    font-family: var(--qd-mono);
    font-size: 0.82rem;
    display: inline-block;
    padding: 10px 0;
    min-height: 44px;
}

.qd-zig { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }

.qd-zig__txt p { max-width: 62ch; }

.qd-zig__pic img { border: 1px solid var(--qd-line-hard); width: 100%; }

.qd-zig--flip .qd-zig__pic { order: -1; }

.qd-band {
    padding-top: 40px;
    padding-bottom: 26px;
    border-top: 1px solid var(--qd-line);
}

.qd-band--fill { background: var(--qd-panel); }

.qd-split { display: grid; grid-template-columns: 1fr; gap: 22px; }

.qd-split__side p { color: var(--qd-muted); font-size: 0.95rem; }

.qd-split__body > h3 { margin-top: 22px; }

.qd-steps { list-style: none; margin: 0 0 24px; padding: 0; }

.qd-steps li {
    position: relative;
    padding-left: 46px;
    padding-bottom: 18px;
    border-left: 1px solid var(--qd-line-hard);
    margin-left: 15px;
    margin-bottom: 0;
}

.qd-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.qd-steps__no {
    position: absolute;
    left: -15px;
    top: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qd-bg);
    border: 1px solid var(--qd-accent);
    color: var(--qd-accent-deep);
    font-family: var(--qd-mono);
    font-size: 0.78rem;
}

.qd-steps h3 { margin-bottom: 4px; }

.qd-steps p { margin: 0; color: var(--qd-muted); font-size: 0.95rem; }

.qd-cover {
    padding-top: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--qd-line-hard);
    background: var(--qd-panel);
}

.qd-cover h1 { max-width: 18ch; }

.qd-cover p { max-width: 46ch; color: var(--qd-muted); }

.qd-body { max-width: 700px; }

.qd-body h2 { margin-top: 34px; }

.qd-offset { display: grid; grid-template-columns: 1fr; gap: 20px; }

.qd-offset__a p, .qd-offset__b p { max-width: 62ch; }

.qd-bento { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }

.qd-tile {
    border: 1px solid var(--qd-line-hard);
    padding: 18px;
    background: var(--qd-panel);
}

.qd-tile--wide { background: var(--qd-bg); }

.qd-tile__num {
    font-family: var(--qd-mono);
    font-size: 2rem;
    color: var(--qd-accent-deep);
    display: block;
    line-height: 1.1;
}

.qd-tile p { margin: 6px 0 0; font-size: 0.94rem; color: var(--qd-muted); }

.qd-method { counter-reset: qdm; }

.qd-method ol { list-style: none; padding: 0; }

.qd-method li {
    padding-left: 40px;
    position: relative;
    margin-bottom: 14px;
    max-width: 66ch;
}

.qd-method li::before {
    counter-increment: qdm;
    content: "[" counter(qdm, decimal-leading-zero) "]";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--qd-mono);
    font-size: 0.78rem;
    color: var(--qd-accent);
}

.qd-feat { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; }

.qd-feat__lead { border-left: 3px solid var(--qd-accent); padding-left: 16px; }

.qd-feat__lead img { margin-top: 12px; border: 1px solid var(--qd-line-hard); }

.qd-feat__rest p { font-size: 0.95rem; color: var(--qd-muted); max-width: 64ch; }

.qd-feat__rest h3 { margin-bottom: 4px; }

.qd-case { border: 1px solid var(--qd-line-hard); padding: 18px; margin-bottom: 22px; }

.qd-case__shot { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }

.qd-case figure { margin: 0; }

.qd-case figcaption {
    font-family: var(--qd-mono);
    font-size: 0.76rem;
    color: var(--qd-muted);
    margin-top: 6px;
}

.qd-pre {
    font-family: var(--qd-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    background: var(--qd-panel);
    border: 1px solid var(--qd-line-hard);
    padding: 14px;
    overflow-x: auto;
    white-space: pre;
    margin: 0 0 12px;
}

.qd-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 22px;
    border-top: 1px solid var(--qd-line);
}

.qd-dl dt {
    font-family: var(--qd-mono);
    font-size: 0.86rem;
    padding-top: 12px;
    color: var(--qd-accent-deep);
}

.qd-dl dd {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--qd-line);
    font-size: 0.95rem;
    color: var(--qd-muted);
}

.qd-limits { list-style: none; padding: 0; margin: 0 0 22px; }

.qd-limits li {
    padding-left: 26px;
    position: relative;
    max-width: 66ch;
}

.qd-limits li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--qd-accent);
    font-family: var(--qd-mono);
}

.qd-pic { max-width: 300px; border: 1px solid var(--qd-line-hard); }

.qd-shots { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }

.qd-shots figure { margin: 0; }

.qd-shots img { border: 1px solid var(--qd-line-hard); width: 100%; }

.qd-shots figcaption {
    font-size: 0.86rem;
    color: var(--qd-muted);
    margin-top: 7px;
}

.qd-time { border-left: 1px solid var(--qd-line-hard); padding-left: 18px; margin-bottom: 24px; }

.qd-time__row { padding-bottom: 14px; }

.qd-time__when {
    font-family: var(--qd-mono);
    font-size: 0.79rem;
    color: var(--qd-accent-deep);
}

.qd-time p { margin: 2px 0 0; font-size: 0.95rem; color: var(--qd-muted); max-width: 62ch; }

.qd-myth { margin-bottom: 24px; }

.qd-myth__pair { border-top: 1px solid var(--qd-line); padding: 14px 0; }

.qd-myth__said { font-family: var(--qd-mono); font-size: 0.86rem; color: var(--qd-muted); margin: 0 0 6px; }

.qd-myth__real { margin: 0; max-width: 66ch; }

.qd-slip { margin-bottom: 24px; }

.qd-slip__item { padding: 12px 0; border-bottom: 1px solid var(--qd-line); }

.qd-slip__item h3 { margin-bottom: 4px; }

.qd-slip__item p { margin: 0; color: var(--qd-muted); font-size: 0.95rem; max-width: 66ch; }

.qd-svg { margin: 0 0 24px; }

.qd-svg svg { width: 100%; height: auto; max-width: 620px; border: 1px solid var(--qd-line-hard); background: var(--qd-bg); }

.qd-svg figcaption { font-size: 0.85rem; color: var(--qd-muted); margin-top: 8px; }

.qd-faq { margin-bottom: 26px; }

.qd-faq details {
    border-bottom: 1px solid var(--qd-line);
    padding: 4px 0;
}

.qd-faq summary {
    cursor: pointer;
    padding: 14px 0;
    min-height: 44px;
    font-family: var(--qd-mono);
    font-size: 0.94rem;
}

.qd-faq p { margin: 0 0 14px; max-width: 68ch; color: var(--qd-muted); }

.qd-cta {
    border: 1px solid var(--qd-accent);
    padding: 28px 20px;
    margin-top: 40px;
    margin-bottom: 46px;
    background: var(--qd-panel);
}

.qd-cta h2 { margin-bottom: 8px; }

.qd-cta p { color: var(--qd-muted); max-width: 56ch; }

.qd-foot {
    border-top: 1px solid var(--qd-line-hard);
    background: var(--qd-panel);
    padding-top: 30px;
    padding-bottom: 30px;
}

.qd-foot__cols { display: grid; grid-template-columns: 1fr; gap: 18px; }

.qd-foot h2 { font-size: 0.86rem; font-family: var(--qd-mono); color: var(--qd-muted); }

.qd-foot ul { list-style: none; padding: 0; margin: 0; }

.qd-foot a {
    display: inline-block;
    padding: 12px 0;
    min-height: 44px;
    font-size: 0.9rem;
}

.qd-foot p { font-size: 0.9rem; color: var(--qd-muted); }

.qd-foot__rev { font-family: var(--qd-mono); font-size: 0.78rem; }

.qd-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--qd-bg);
    border-top: 2px solid var(--qd-accent);
    padding: 16px 18px;
    z-index: 40;
    display: none;
}

.qd-cookie.is-open { display: block; }

.qd-cookie__row {
    max-width: var(--qd-wrap);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.qd-cookie p { margin: 0; font-size: 0.9rem; flex: 1 1 260px; }

.qd-cookie .qd-btn { flex: 1 1 auto; }

.qd-reveal { opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 320ms ease; }

.qd-reveal.is-seen { opacity: 1; transform: none; }

.qd-split__side,
.qd-split__body,
.qd-offset__a,
.qd-offset__b,
.qd-zig__txt,
.qd-zig__pic,
.qd-feat__lead,
.qd-feat__rest { min-width: 0; }

@media (min-width: 560px) {
    .qd-cookie .qd-btn { flex: 0 0 auto; }
    .qd-shots { grid-template-columns: repeat(2, 1fr); }
    .qd-case__shot { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
   .qd-shots img, .qd-case__shot img, .qd-zig__pic img, .qd-feat__lead img, .qd-pic { width: auto; max-width: 100%; max-height: 520px; }
    body { font-size: 16.5px; }
    .qd-cards { grid-template-columns: repeat(2, 1fr); }
    .qd-dl { grid-template-columns: 200px 1fr; column-gap: 24px; }
    .qd-dl dd { margin-bottom: 0; }
    .qd-feat { grid-template-columns: 1.15fr 1fr; }
    .qd-cmp__crit { grid-template-columns: repeat(2, 1fr); column-gap: 26px; }
    .qd-bento { grid-template-columns: repeat(3, 1fr); }
    .qd-tile--wide { grid-column: span 2; }
    .qd-foot__cols { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1000px) {
    .qd-zig { grid-template-columns: 1fr 400px; gap: 34px; align-items: center; }
    .qd-zig--flip .qd-zig__pic { order: 0; }
    .qd-zig--flip .qd-zig__txt { order: 1; }
    .qd-split { grid-template-columns: 320px 1fr; gap: 40px; }
    .qd-offset { grid-template-columns: repeat(12, 1fr); gap: 0 20px; }
    .qd-offset__a { grid-column: 1 / 8; }
    .qd-offset__b { grid-column: 5 / 13; }
    .qd-cards--three { grid-template-columns: repeat(3, 1fr); }
    .qd-shots--three { grid-template-columns: repeat(3, 1fr); }
    .qd-head__row { padding-top: 16px; padding-bottom: 16px; }
    .qd-nav { width: auto; border-top: 0; padding-top: 0; }
    .qd-head__mail { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .qd-reveal { opacity: 1; transform: none; transition: none; }
    .qd-btn { transition: none; }
}