@font-face { font-family: "VT323 Dano"; src: url('/fonts/VT323-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
.dano-page .brand-name, .dano-page .footer-brand .brand-name { font-family: "VT323 Dano", var(--mono); }
.dano-page main { overflow-wrap: break-word; }
.ds-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 23px; color: #9eb5a6; font: 11px/1.8 var(--mono); }
.ds-breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; text-decoration-color: #4c7057; }
.ds-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 75px; align-items: center; padding: 43px 0 53px; }
.ds-kicker { margin: 0 0 23px; color: #a8c3b1; font: 11px/1.8 var(--mono); letter-spacing: .065em; }
.ds-kicker > span { padding-right: 14px; margin-right: 14px; border-right: 1px solid #4a6855; }
.dano-page h1 { font-size: clamp(44px, 4.8vw, 65px); line-height: 1.12; margin: 0 0 25px; letter-spacing: -.06em; }
.dano-page h1 em { display: inline; }
.ds-lede { color: #bdcec3; font-size: 18px; line-height: 1.85; margin: 0; max-width: 590px; }
.ds-intro-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 23px; }
.ds-text-link { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: #c0d7c8; font: 12px/1.8 var(--mono); text-decoration-color: #567860; }
.ds-text-link:hover { color: #e3f2e8; text-decoration-color: #a7cdb4; }
.ds-specimen { margin: 0; padding: 24px 28px; border: 1px solid #53775e; border-radius: 4px; background: linear-gradient(140deg, #1a2e20, #0e1c13 80%); }
.ds-specimen-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #3b5c45; padding-bottom: 15px; color: #b8d6c2; font: 11px/1.7 var(--mono); letter-spacing: .04em; }
.ds-specimen-heading > span:last-child { font: 29px/1 "VT323 Dano", var(--mono); color: #a7d4b5; }
.ds-specimen-step { margin-top: 21px; }
.ds-label { display: block; color: #a9c6b2; font: 10px/1.9 var(--mono); letter-spacing: .04em; }
.ds-specimen-step > p { margin: 7px 0 14px; color: #c9e0d0; font-size: 16px; line-height: 1.7; }
.ds-specimen pre { padding: 16px; margin: 0; background: #0b170f; border: 1px solid #3d6047; border-left: 2px solid #a2cfb1; border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-specimen code { color: #bfe4cb; font: 12px/1.8 var(--mono); }
.ds-validation { display: flex; align-items: center; gap: 13px; color: #a8c7b1; font: 10px/1.9 var(--mono); margin: 17px 0 0; }
.ds-validation > span:first-child { font: 25px/1 var(--mono); }
.ds-specimen blockquote { color: #d1e6d8; font-size: 17px; line-height: 1.8; margin: 8px 0 0; }
.ds-specimen figcaption { border-top: 1px solid #314b39; margin-top: 21px; padding-top: 16px; color: #9db9a7; font-size: 13px; line-height: 1.8; }
.ds-principle { display: flex; align-items: baseline; gap: 30px; padding: 19px 0; border-block: 1px solid #3c5b46; }
.ds-principle > span { flex: 0 0 auto; }
.ds-principle p { color: #c3d9cb; font-size: 16px; line-height: 1.8; margin: 0; }
.ds-section { padding-top: 56px; scroll-margin-top: 28px; }
.ds-section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 65px; align-items: end; }
.dano-page h2 { font-size: clamp(26px, 2.7vw, 35px); line-height: 1.32; }
.ds-section-heading > p, .ds-section-note { color: #b5cbbc; font-size: 16px; line-height: 1.85; margin: 0; }
.ds-section-note { max-width: 350px; margin-top: 22px; }
.ds-pipeline { margin: 30px 0 0; padding: 26px 28px; border: 1px solid #42654d; border-radius: 4px; background: linear-gradient(135deg, #16261b, #0e1912 75%); }
.ds-diagram-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: #bfd8c7; font: 11px/1.8 var(--mono); letter-spacing: .04em; }
.ds-diagram-heading > span + span { color: #9ebba7; letter-spacing: 0; }
.ds-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 28px 0; }
.ds-stages li { position: relative; display: flex; flex-direction: column; border-top: 1px solid #71987c; padding-top: 18px; }
.ds-stages li:not(:last-child)::after { content: '→'; color: #96b9a1; position: absolute; top: -12px; right: -22px; font: 18px/1 var(--mono); }
.ds-stage-number { color: #a9c7b3; font: 10px/1.8 var(--mono); letter-spacing: .045em; }
.ds-stages h3 { color: #d5e8dd; font: 400 18px/1.55 var(--mono); letter-spacing: -.035em; margin: 14px 0 12px; }
.ds-stages p { color: #b0c8b8; font-size: 15px; line-height: 1.85; margin: 0 0 22px; }
.ds-stage-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #35513e; color: #adceba; font: 10px/1.8 var(--mono); }
.ds-select-paths { display: flex; flex-direction: column; gap: 8px; margin-top: auto; color: #aecab8; font: 10px/1.8 var(--mono); }
.ds-select-paths > span { border-top: 1px solid #35513e; padding-top: 9px; }
.ds-select-paths b { color: #cfdfd5; font-weight: 400; display: block; }
.ds-fallback-path { display: flex; align-items: center; gap: 18px; padding: 20px 0 17px; border-top: 1px dashed #668a72; }
.ds-fallback-mark { color: #afd0bb; font: 27px/1 var(--mono); }
.ds-fallback-path strong { color: #c5dece; font: 400 13px/1.8 var(--mono); }
.ds-fallback-path p { color: #abc4b3; font-size: 14px; line-height: 1.8; margin: 5px 0 0; max-width: 720px; }
.ds-path-badge { flex: 0 0 auto; margin-left: auto; padding: 7px 10px; border: 1px dashed #648c70; color: #b6d4c1; font: 10px/1.8 var(--mono); }
.ds-pipeline figcaption { border-top: 1px solid #2c4534; padding-top: 16px; color: #9fb8a8; font-size: 13px; line-height: 1.85; }
.ds-examples, .ds-tradeoffs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 65px; padding-top: 64px; }
.ds-example { border-top: 1px solid #486b52; }
.ds-example:last-child { border-bottom: 1px solid #486b52; }
.ds-example summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 15px; padding: 20px 9px; list-style: none; cursor: pointer; }
.ds-example summary::-webkit-details-marker, .ds-review-notes summary::-webkit-details-marker { display: none; }
.ds-example summary::marker, .ds-review-notes summary::marker { content: ''; }
.ds-example summary:hover, .ds-example[open] summary { background: #14241a; }
.ds-example summary:focus-visible, .ds-review-notes summary:focus-visible { outline: 2px solid #b7d7c1; outline-offset: 4px; }
.ds-example-kind { color: #a3c1ae; font: 10px/1.8 var(--mono); letter-spacing: .045em; }
.ds-example summary > strong { color: #d3e6da; font: 400 17px/1.6 var(--mono); letter-spacing: -.025em; grid-column: 1; }
.ds-toggle { color: #b5d7c0; grid-column: 2; grid-row: 1 / 3; align-self: center; font: 21px/1 var(--mono); }
.ds-example[open] .ds-toggle { transform: rotate(45deg); }
.ds-example-body { padding: 8px 9px 23px; }
.ds-example blockquote { border-left: 2px solid #90b99d; padding-left: 18px; color: #c9e0d1; font-size: 17px; line-height: 1.85; margin: 13px 0 17px; }
.ds-example-body > p { color: #aec6b6; font-size: 15px; line-height: 1.85; margin: 0; }
.ds-boundaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.ds-boundary { border: 1px solid #3e6049; border-radius: 3px; padding: 25px 27px; background: #122017; }
.ds-boundary-heading { border-bottom: 1px solid #37553f; padding-bottom: 20px; }
.ds-boundary h3 { color: #d1e7d9; font: 400 20px/1.55 var(--mono); letter-spacing: -.035em; margin: 9px 0 0; }
.ds-boundary ul { margin: 20px 0 0; padding-left: 18px; }
.ds-boundary ul li { padding-left: 6px; margin-top: 12px; color: #b5cebd; font-size: 16px; line-height: 1.8; }
.ds-boundary ul li::marker { color: #89b498; }
.ds-support { background: #101c15; }
.ds-support ol { list-style: none; padding: 0; margin: 23px 0 0; }
.ds-support li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 15px; padding-bottom: 22px; }
.ds-support li:last-child { padding-bottom: 0; }
.ds-support li > span { color: #9abcaa; font: 11px/1.8 var(--mono); padding-top: 4px; }
.ds-support li p { margin: 0; color: #b6cfbf; font-size: 16px; line-height: 1.85; }
.ds-boundary-note { max-width: 1000px; color: #a2bdaa; font-size: 14px; line-height: 1.85; margin: 18px 0 0; }
.ds-evidence { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 65px; border-block: 1px solid #43624b; margin-top: 62px; padding: 39px 0; scroll-margin-top: 28px; }
.ds-evidence-date { display: block; color: #a7c4b0; font: 10px/1.9 var(--mono); margin-top: 24px; }
.ds-proof-list { margin: 0; }
.ds-proof-list > div { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid #35513f; }
.ds-proof-list > div:first-child { padding-top: 0; }
.ds-proof-list dt { display: flex; flex-direction: column; gap: 5px; color: #adccb8; font: 11px/1.7 var(--mono); }
.ds-proof-list dt strong { color: #bddfc9; font: 400 48px/1 "VT323 Dano", var(--mono); }
.ds-proof-list dd { color: #b5cdbd; font-size: 16px; line-height: 1.8; margin: 0; }
.ds-learning { border-left: 2px solid #a69f80; padding-left: 21px; margin: 27px 0; }
.ds-learning .ds-label { color: #d2c6a6; }
.ds-learning h3 { color: #d2e3d8; font: 400 18px/1.6 var(--mono); letter-spacing: -.025em; margin: 11px 0; }
.ds-learning p { color: #b8cbbb; font-size: 16px; line-height: 1.85; margin: 0 0 15px; }
.ds-learning p:last-child { margin-bottom: 0; }
.ds-review-notes { border-top: 1px solid #39513f; }
.ds-review-notes summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #c5ddce; font: 12px/1.8 var(--mono); padding: 18px 0; cursor: pointer; list-style: none; }
.ds-review-notes summary > span:last-child { font-size: 19px; line-height: 1; }
.ds-review-notes[open] summary > span:last-child { transform: rotate(45deg); }
.ds-review-notes p, .ds-prose p { color: #b5cbbb; font-size: 16px; line-height: 1.85; margin: 0 0 18px; }
.ds-review-notes p:last-child, .ds-prose p:last-child { margin-bottom: 0; }
.ds-tradeoffs { padding-top: 44px; }
.ds-related { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 65px; padding-top: 43px; margin-top: 42px; border-top: 1px solid #3b5b45; }
.ds-related-links a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 7px 16px; padding: 17px 0; border-bottom: 1px solid #344f3d; text-decoration: none; }
.ds-related-links a:first-child { padding-top: 0; }
.ds-related-links a > span:first-child { color: #9fb9a8; font: 10px/1.7 var(--mono); }
.ds-related-links strong { color: #cce2d4; font: 400 15px/1.8 var(--mono); grid-column: 1; }
.ds-related-links a > span:last-child { color: #a8cbb5; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.ds-related-links a:hover strong { color: #f0faf3; text-decoration: underline; text-underline-offset: 5px; }
.dano-page footer { margin-top: 55px; }
@media (max-width: 1100px) {
  .ds-intro { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .ds-section-heading, .ds-examples, .ds-evidence, .ds-tradeoffs, .ds-related { gap: 40px; }
  .ds-specimen { padding: 22px; }
  .ds-stages { gap: 22px; }
  .ds-stages li:not(:last-child)::after { right: -19px; }
  .ds-stages h3 { font-size: 16px; }
  .ds-pipeline { padding: 24px; }
  .ds-boundary { padding: 23px; }
  .ds-proof-list > div { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 900px) {
  .ds-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .ds-stages li::after { display: none; }
  .ds-stages h3 { font-size: 19px; }
  .ds-stage-foot { font-size: 11px; }
  .ds-select-paths { font-size: 11px; }
  .ds-select-paths b { display: inline; }
  .ds-fallback-path { flex-wrap: wrap; align-items: start; }
  .ds-fallback-path > div { flex: 1; min-width: 220px; }
  .ds-path-badge { margin-left: 45px; }
}
@media (max-width: 800px) {
  .ds-intro { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 35px 0 35px; }
  .dano-page h1 { font-size: clamp(43px, 7vw, 60px); }
  .ds-specimen { max-width: 620px; width: 100%; }
  .ds-section-heading, .ds-examples, .ds-evidence, .ds-tradeoffs, .ds-related { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .ds-section-note { max-width: 620px; }
  .ds-principle { align-items: start; flex-direction: column; gap: 8px; }
  .ds-boundaries { gap: 22px; }
  .ds-boundary { padding: 21px; }
  .ds-boundary h3 { font-size: 18px; }
  .ds-proof-list > div { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .ds-evidence { margin-top: 48px; }
  .ds-evidence-date { margin-top: 18px; }
}
@media (max-width: 600px) {
  .ds-boundaries { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ds-stages { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ds-stages p { font-size: 16px; margin-bottom: 15px; }
  .ds-stage-number, .ds-label, .ds-example-kind { font-size: 11px; }
  .ds-stage-foot { border: 0; padding-top: 0; }
  .ds-select-paths { gap: 6px; }
  .ds-select-paths > span { border: 0; padding-top: 0; }
  .ds-fallback-path p, .ds-pipeline figcaption { font-size: 14px; }
  .ds-fallback-path { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; }
  .ds-fallback-path > div { min-width: 0; }
  .ds-path-badge { grid-column: 2; justify-self: start; margin-left: 0; }
  .ds-diagram-heading { flex-direction: column; gap: 4px; }
  .ds-path-badge { font-size: 10px; }
}
@media (max-width: 480px) {
  .ds-breadcrumb { font-size: 11px; gap: 8px; padding-top: 18px; }
  .ds-intro { padding-top: 28px; }
  .dano-page h1 { font-size: clamp(41px, 10.6vw, 50px); }
  .ds-lede { font-size: 17px; }
  .ds-kicker { font-size: 10px; margin-bottom: 18px; }
  .ds-intro-links { gap: 4px 20px; }
  .ds-specimen { padding: 20px; }
  .ds-specimen pre { padding: 14px 10px; }
  .ds-specimen code { font-size: 11px; }
  .ds-specimen blockquote, .ds-example blockquote { font-size: 16px; }
  .ds-validation { font-size: 11px; }
  .ds-specimen figcaption { font-size: 14px; }
  .ds-section { padding-top: 43px; }
  .ds-pipeline { padding: 20px; margin-top: 24px; }
  .ds-fallback-path { gap: 12px; }
  .ds-fallback-path > div { min-width: 0; }
  .ds-path-badge { margin-left: 0; }
  .ds-example summary { padding: 18px 6px; }
  .ds-example summary > strong { font-size: 16px; }
  .ds-example-body { padding: 8px 6px 22px; }
  .ds-example-body > p { font-size: 16px; }
  .ds-boundary { padding: 22px; }
  .ds-proof-list > div { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .ds-proof-list dt { flex-direction: row; align-items: baseline; gap: 16px; }
  .ds-proof-list dt strong { font-size: 44px; }
  .ds-learning { padding-left: 17px; }
  .ds-learning h3 { font-size: 17px; }
  .ds-related-links strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .ds-specimen, .ds-specimen pre, .ds-pipeline, .ds-boundary, .ds-example summary:hover, .ds-example[open] summary { background: Canvas; }
  .ds-learning { border-color: CanvasText; }
}