:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #17212b; background: #f3f6fa; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
.page-header, main, footer { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.page-header { padding: 30px 0 18px; }
.eyebrow { margin: 0 0 7px; color: #315e98; font-size: .82rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.55rem); line-height: 1.12; }
.intro { max-width: 820px; margin: 10px 0 0; color: #465565; line-height: 1.55; }
.visualizer, .algorithm-note { background: #fff; border: 1px solid #d5dde7; border-radius: 14px; box-shadow: 0 8px 26px #1935500d; }
.visualizer { padding: clamp(12px, 2.5vw, 24px); }
.chart-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
h2 { margin: 0; font-size: 1.05rem; }
.chart-heading p { margin: 4px 0 0; color: #5a6878; font-size: .86rem; }
.legend { display: flex; gap: 8px 13px; flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 5px; color: #4c5967; font-size: .74rem; white-space: nowrap; }
.key::before { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 3px; content: ""; background: var(--swatch); }
.queued { --swatch: #cfdae7; color: #60758b; }.current { --swatch: #ffbe55; color: #9b5900; }.boundary { --swatch: #c9a7f5; color: #6335a1; }.placed { --swatch: #54c7a0; color: #087955; }
.chart-frame { margin-top: 12px; overflow-x: auto; border: 1px solid #dce4ed; border-radius: 9px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 47px, #eff3f7 48px, #fff 49px); scrollbar-width: thin; }
.chart { min-height: 252px; padding: 12px 10px 4px; display: flex; align-items: stretch; gap: clamp(3px, .65vw, 8px); }
.bar-slot { min-width: 0; min-height: 230px; flex: 1 1 0; display: grid; grid-template-rows: 1fr 18px 22px; justify-items: center; align-items: end; position: relative; padding: 0 1px; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.bar-slot:focus-visible { outline: 3px solid #f0a52b; outline-offset: 2px; }
.bar { width: min(100%, 42px); min-width: 6px; height: var(--bar-height); border: 2px solid #8193a6; border-bottom-width: 3px; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(135deg, #d1dce8, #d1dce8 6px, #e5ebf2 6px, #e5ebf2 12px); transition: height 240ms ease, background-color 160ms ease, opacity 160ms ease, transform 160ms ease; }
.bar-slot.placed .bar, .bar-slot.completed .bar { border-color: #087955; background: #54c7a0; }
.bar-slot.current .bar { border: 3px solid #a35d00; background: repeating-linear-gradient(135deg, #ffbd55, #ffbd55 6px, #ffe1ad 6px, #ffe1ad 12px); transform: translateY(-4px); }
.bar-slot.boundary .bar { border: 3px double #6335a1; background: repeating-linear-gradient(135deg, #c9a7f5, #c9a7f5 6px, #ebddff 6px, #ebddff 12px); }
.bar-value { align-self: center; color: #263548; font-size: clamp(.6rem, 1vw, .76rem); font-weight: 750; }
.bar-index { align-self: center; color: #667486; font-size: .62rem; }
.bar-path { width: 100%; overflow: hidden; align-self: center; color: #315e98; font: 650 .61rem ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.bar-path.empty { color: #9aa6b3; }
.path-strip { display: flex; gap: 6px; overflow-x: auto; padding: 7px 2px 9px; margin: 0; list-style: none; scrollbar-width: thin; }
.path-strip li { min-width: 70px; max-width: 135px; flex: 0 0 auto; }
.path-entry { width: 100%; padding: 5px 7px; border: 1px solid #cbd7e3; border-radius: 7px; background: #f7f9fc; text-align: left; cursor: pointer; }
.path-entry:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #f0a52b; outline-offset: 2px; }
.path-entry strong, .path-entry code { display: block; }
.path-entry strong { color: #253448; font-size: .76rem; }
.path-entry code { overflow: hidden; color: #315e98; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.path-entry.unavailable { color: #778494; background: #fafafa; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0 13px; }
button, select { min-height: 38px; border: 1px solid #aebbc9; border-radius: 8px; background: #fff; color: #17212b; font: inherit; }
.controls button { padding: 6px 12px; cursor: pointer; font-size: .87rem; font-weight: 650; }
button:hover:not(:disabled) { background: #edf4fb; }
button.primary { border-color: #195ca6; background: #195ca6; color: #fff; }
button.primary:hover:not(:disabled) { background: #104982; }
button:disabled { cursor: not-allowed; opacity: .52; }
.speed-control { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #475666; font-size: .86rem; }
select { padding: 4px 24px 4px 8px; }
.below-chart { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .8fr); gap: 12px; align-items: start; }
.details, .coverage { min-width: 0; padding: 13px 14px; border: 1px solid #d8e1eb; border-radius: 9px; background: #f8fafc; }
.details { border-left: 4px solid #2869ac; }
.step-status { margin: 6px 0 10px; color: #3e4d5e; font-size: .82rem; line-height: 1.4; }
dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 0; }
dl div { min-width: 0; }
dt { color: #5b6978; font-size: .68rem; font-weight: 650; }
dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: .79rem; font-weight: 650; }
.path-note, .coverage-note { margin: 9px 0 0; color: #596777; font-size: .72rem; line-height: 1.4; }
.coverage-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; list-style: none; }
.coverage-chip { padding: 4px 7px; border: 1px solid #bac7d4; border-radius: 999px; background: #fff; color: #596777; font-size: .7rem; font-weight: 650; }
.coverage-chip.seen { border-color: #15805d; background: #e7f7ef; color: #075c3d; }
.coverage-chip.newly-seen { outline: 2px solid #e4a126; outline-offset: 1px; }
.coverage-chip.unavailable { opacity: .55; }
.completion { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #e7f7ee; color: #075c3d; font-size: .88rem; font-weight: 700; line-height: 1.45; }
.algorithm-note { margin: 13px 0; padding: 14px 17px; }
.algorithm-note p { margin: 7px 0 0; color: #4d5c6d; font-size: .84rem; line-height: 1.48; }
footer { padding: 4px 0 24px; color: #5e6b79; font-size: .78rem; line-height: 1.45; }
@media (max-width: 760px) { .below-chart { grid-template-columns: minmax(0, 1fr); } .chart { min-width: 690px; } .page-header, main, footer { width: calc(100% - 24px); } }
@media (max-width: 420px) { .page-header, main, footer { width: calc(100% - 18px); } .visualizer { padding: 10px; } .legend { gap: 6px 9px; } .speed-control { margin-left: 0; } .path-strip { margin-inline: -2px; } .details, .coverage { padding: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }