/* National debt of the United States lesson. All rules scoped under .ndus-* */

.ndus-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ndus-sc > svg { display: block; width: 100%; height: auto; max-height: 50vh; overflow: visible; }
.ndus-hero { width: min(90%, 360px); }
.ndus-hero img { width: 100%; display: block; }
.ndus-note { font-size: 12px; color: var(--faint); text-align: center; }
.ndus-in { animation: ndus-in .5s ease-out; }
@keyframes ndus-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* the giant loan */
.ndus-bill { width: min(86%, 320px); aspect-ratio: 16 / 10; border-radius: 18px; border: 2px solid var(--gold); background: linear-gradient(160deg, #2A2548, #17142C); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: var(--sans); box-shadow: 0 0 0 6px rgba(252, 192, 80, .08); }
.ndus-bill small { font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--gold); }
.ndus-bill b { font: 800 30px var(--serif); }
.ndus-bill span { font-size: 15px; color: var(--dim); font-weight: 700; }
.ndus-bill.burst { animation: ndus-burst .35s ease-in forwards; }
@keyframes ndus-burst { to { transform: scale(1.25); opacity: 0; filter: blur(4px); } }

/* the tower */
.ndus-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; font-weight: 700; color: var(--dim); }
.ndus-key i { display: inline-block; width: 16px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.ndus-key .k-bill i { background: var(--mint); }
.ndus-key .k-note i { background: var(--violet-bright); }
.ndus-key .k-bond i { background: var(--gold); }
.ndus-tick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.ndus-tl { font: 700 16px var(--sans); fill: var(--faint); text-anchor: end; }
.ndus-soon { fill: rgba(94, 234, 180, .07); }
.ndus-tray { fill: rgba(252, 192, 80, .08); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ndus-trayl { font: 800 16px var(--sans); fill: var(--gold); text-anchor: end; }
.ndus-clock { fill: var(--violet-bright); }
.ndus-cl { font: 800 16px var(--sans); fill: var(--text); text-anchor: end; }
.ndus-slip rect { stroke: var(--bg); stroke-width: 1; transition: fill .3s; }
.ndus-slip.k-bill rect { fill: var(--mint); }
.ndus-slip.k-note rect { fill: var(--violet-bright); }
.ndus-slip.k-bond rect { fill: var(--gold); }
.ndus-slip.nb rect { stroke: var(--gold); stroke-width: 3; }
.ndus-slip.due rect { stroke: #fff; stroke-width: 2; }
.ndus-slip.due { animation: ndus-due .6s ease-in-out infinite alternate; }
@keyframes ndus-due { to { opacity: .55; } }
.ndus-slip.late rect { stroke: var(--red); stroke-width: 2.5; }
.ndus-slip.paid { opacity: 0; transition: opacity .4s; }
.ndus-coin { fill: var(--gold); }
.ndus-ring { fill: none; stroke: var(--gold); stroke-width: 2; animation: ndus-ring .9s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes ndus-ring { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }

/* one IOU due */
.ndus-due { display: flex; gap: 14px; align-items: stretch; justify-content: center; width: 100%; }
.ndus-ticket, .ndus-purse { flex: 1; max-width: 160px; border-radius: 16px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ndus-ticket { background: linear-gradient(160deg, #2A2548, #17142C); border: 2px solid var(--gold); transition: transform .5s, opacity .5s; }
.ndus-purse { background: var(--surface); border: 1px dashed var(--line-strong); }
.ndus-ticket small, .ndus-purse small { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.ndus-ticket b { font: 800 22px var(--serif); color: var(--gold); }
.ndus-purse b { font: 800 18px var(--serif); color: var(--dim); }
.ndus-ticket span { font-size: 13px; font-weight: 700; color: var(--text); }
.ndus-due.paid .ndus-ticket { transform: translateY(-8px) rotate(-3deg); opacity: .45; }
.ndus-due.paid .ndus-ticket span::after { content: ' · paid'; color: var(--mint); }

@media (max-height: 700px) {
  .ndus-sc > svg { max-height: 36vh; }
  .ndus-hero { width: min(72%, 270px); }
  .ndus-bill b { font-size: 26px; }
}