.redesign {
    --bg: #f7f7f5;
    --white: #ffffff;
    --alt: #f0efec;
    --border: #dddbd6;
    --border-s: #c4c1ba;
    --text: #1c1c1a;
    --t2: #5c5a55;
    --t3: #96938c;
    --grn: #005299;
    --grn-b: #00457a;
    --grn-p: #EAF3FF;
    --grn-br: #9FC0E6;
    --grn-f: rgba(0, 82, 153, 0.1);
    --red: #c92a2a;
    --red-l: #fef2f2;
    --amb: #b45309;
    --amb-l: #fffbeb;
    --amb-br: #fde68a;
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'DM Sans', sans-serif;
    --disp: 'Fraunces', serif;
    --r: 10px;
    --rs: 6px;
}

.redesign * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.redesign {
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* ─── Nav ─── */
.redesign nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    justify-content: space-between;
}

.redesign .nav-l {
    display: flex;
    align-items: center;
    gap: 36px;
}

.redesign .nav-brand {
    font-family: var(--disp);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.redesign .nav-brand .m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--grn);
    color: white;
    border-radius: 6px;
    font-family: var(--disp);
    font-size: 0.85rem;
    font-weight: 700;
}

.redesign .nav-tabs {
    display: flex;
    list-style: none;
    height: 56px;
    align-items: stretch;
}

.redesign .nav-tabs a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--t3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.redesign .nav-tabs a:hover {
    color: var(--t2);
}

.redesign .nav-tabs a.on {
    color: var(--grn);
    border-bottom-color: var(--grn);
}

.redesign .nav-r {
    display: flex;
    gap: 4px;
}

.redesign .nav-r a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--t2);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--rs);
    transition: all 0.15s;
}

.redesign .nav-r a:hover {
    background: var(--alt);
    color: var(--text);
}

/* ─── Container ─── */
.redesign .wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ─── Header ─── */
.redesign .hdr {
    padding: 44px 0 36px;
    margin-bottom: 28px;
    text-align: center;
}

.redesign .hdr h1 {
    font-family: var(--disp);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

/* Ensure all top-level headings in the redesign use the display font */
.redesign h1 {
    font-family: var(--disp);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.redesign .hdr p {
    font-size: 0.9rem;
    color: var(--t2);
    line-height: 1.6;
    max-width: 740px;
}

.redesign .hdr a {
    color: var(--grn);
    text-decoration: none;
    font-weight: 600;
}

.redesign .sep {
    height: 1px;
    background: var(--border);
    margin-bottom: 28px;
}

/* ─── Section label ─── */
.redesign .lbl {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.redesign .gap {
    margin-bottom: 36px;
}

/* Accent panel: styles copied from the publications container/panel */
.redesign .accent-panel {
    background: var(--alt);
    padding: 40px 0;
    margin-top: -50px;
    text-align: center;
}

/* ═══ Config (v5 style — single row, all 5 fields) ═══ */
.redesign .config {
    margin-bottom: 20px;
}

.redesign .fields {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.redesign .f {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--rs);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.redesign .f:focus-within {
    border-color: var(--grn);
    box-shadow: 0 0 0 3px var(--grn-f);
}

.redesign .f-s {
    font-family: var(--disp);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--grn);
    min-width: 16px;
    text-align: center;
    line-height: 1;
}

.redesign .f-t {
    flex: 1;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--t2);
    white-space: nowrap;
}

.redesign .f-i {
    width: 64px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    background: var(--alt);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.redesign .f-i:focus {
    border-color: var(--grn);
    background: var(--white);
}

/* Presets + Run row */
.redesign .action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-top: 4px;
}

.redesign .presets {
    display: flex;
    gap: 6px;
    align-items: center;
}

.redesign .presets-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}

.redesign .preset {
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--white);
    color: var(--t2);
    cursor: pointer;
    transition: all 0.15s;
}

.redesign .preset:hover {
    border-color: var(--border-s);
    color: var(--text);
    background: var(--alt);
}

.redesign .preset.on {
    border-color: var(--grn);
    color: var(--grn);
    background: var(--grn-p);
}

.redesign .btns {
    display: flex;
    gap: 8px;
}

.redesign .btn-run {
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 9px 28px;
    background: var(--grn);
    color: white;
    border: none;
    border-radius: var(--rs);
    cursor: pointer;
    transition: all 0.15s;
}

.redesign .btn-run:hover {
    background: var(--grn-b);
    box-shadow: 0 2px 8px var(--grn-f);
}

.redesign .btn-g {
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 500;
    padding: 9px 18px;
    background: transparent;
    color: var(--t2);
    border: 1px solid var(--border);
    border-radius: var(--rs);
    cursor: pointer;
    transition: all 0.15s;
}

.redesign .btn-g:hover {
    background: var(--white);
    border-color: var(--border-s);
    color: var(--text);
}

/* ═══ Viz section (v4 spacious style) ═══ */
.redesign #viz {
    display: none;
}

/* Playback */
.redesign .play-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.redesign .pbar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.redesign .pb {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rs);
    border: none;
    background: transparent;
    color: var(--t2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
}

.redesign .pb:hover {
    background: var(--alt);
    color: var(--text);
}

.redesign .pb.on {
    background: var(--grn);
    color: white;
}

.redesign .pb-s {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 2px;
}

/* Skip buttons shown in playback controls */
.redesign .pb-skip {
    min-width: 44px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--alt);
    color: var(--t2);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}

.redesign .pb-skip:hover {
    background: var(--white);
    color: var(--text);
    border-color: var(--border-s);
}

.redesign .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--grn);
    background: var(--grn-p);
    border: 1px solid var(--grn-br);
    padding: 4px 12px;
    border-radius: 100px;
}

.redesign .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grn);
    animation: bl 1.4s ease-in-out infinite;
}

@keyframes bl {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

/* Insertions */
.redesign .ins-row {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 28px;
    justify-content: center;
    align-items: center;
}

.redesign .ins {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 500;
    min-width: 46px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--rs);
    background: var(--white);
    color: var(--text);
    flex-shrink: 0;
}

.redesign .ins.on {
    background: var(--grn);
    color: white;
    border-color: var(--grn);
}

.redesign .ins.w {
    border-color: var(--amb);
    color: var(--amb);
    background: var(--amb-l);
    font-weight: 600;
}

/* ─── Algo panels (full width, spacious) ─── */
.redesign .panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}

.redesign .panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}

.redesign .panel-h {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--alt);
}

.redesign .panel-t {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.redesign .tag {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.redesign .tag.g {
    background: var(--grn-p);
    color: var(--grn);
    border: 1px solid var(--grn-br);
}

.redesign .tag.a {
    background: var(--amb-l);
    color: var(--amb);
    border: 1px solid var(--amb-br);
}

.redesign .panel-b {
    padding: 16px;
    min-height: 300px;
}

/* ─── Redesigned Structure Panels ─── */
.redesign .tree-container {
    padding: 16px;
    height: 575px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    position: relative;
    background: var(--white);
}

.redesign .quit-bplus-tree {
    height: 575px;
    min-height: 575px;
    max-height: 575px;
}

.redesign .animations-layout>.animations-container {
    width: 110%;
    max-width: 110%;
    margin-left: -5%;
    gap: 12px;
}

.redesign .animations-layout>.animations-container>.container {
    max-width: calc(50% - 6px);
    padding-left: 8px;
    padding-right: 8px;
}

.redesign .sware-box {
    gap: 12px;
    overflow: hidden;
}

.redesign .sware-box .buffer-container {
    height: 120px;
    min-height: 120px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.redesign .sware-box .buffer-content {
    height: 100%;
    overflow: hidden;
}

.redesign .sware-tree-panel {
    overflow: auto;
}

.redesign .section-labels-sware[data-sware-layout] {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 0;
}

.redesign .sware-buffer-page {
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 3px;
    background: var(--white);
    box-shadow: none;
}

.redesign .sware-buffer-page-label {
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    color: var(--t3);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0 2px;
    margin-bottom: 2px;
    border-bottom: none;
}

.redesign .sware-buffer-page-slots {
    gap: 2px;
    padding: 0;
}

.redesign .sware-buffer-page .buffer-btn {
    min-height: 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--alt);
    color: var(--t2);
    box-shadow: none;
    font-family: var(--mono);
    font-size: 5px;
    font-weight: 500;
}

.redesign .sware-buffer-page .buffer-btn.sware-buffer-empty {
    color: var(--t3);
    border-style: dashed;
    background: rgba(255, 255, 255, 0.7);
}

.redesign .sware-buffer-page.sware-page-sorted {
    border-style: solid;
    border-color: var(--border-s);
    border-left: 3px solid var(--grn-b);
    background: var(--bg);
    box-shadow: none;
}

.redesign .sware-buffer-page.sware-page-sorted .sware-buffer-page-label {
    color: var(--grn);
}

.redesign .sware-buffer-page.sware-page-unsorted {
    border-style: solid;
    border-color: var(--amb-br);
    border-left: 3px solid var(--amb);
    background: #fffdf6;
    box-shadow: none;
}

.redesign .sware-buffer-page.sware-page-unsorted .sware-buffer-page-label {
    color: var(--amb);
}

.redesign .sware-buffer-page.sware-page-flushing {
    border-style: solid;
    border-color: #b9d1ff;
    border-left: 3px solid #1f5fbf;
    background: #f4f8ff;
    box-shadow: 0 0 0 2px rgba(31, 95, 191, 0.1);
}

.redesign .sware-buffer-page.sware-page-flushing .sware-buffer-page-label {
    color: #1d4f9b;
}

.redesign .buffer-btn.sware-buffer-active {
    border-color: var(--grn);
    background: var(--grn-p);
    color: var(--grn);
    box-shadow: 0 0 0 1px rgba(21, 101, 58, 0.14);
}

.redesign .buffer-btn.sware-buffer-flushing-slot {
    border-color: #1f5fbf;
    background: #e8f1ff;
    color: #1d4f9b;
    box-shadow: 0 0 0 1px rgba(31, 95, 191, 0.12);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) {
    gap: 16px;
    min-height: 100%;
    padding: 8px 2px 12px;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path {
    stroke: var(--border-s);
    stroke-width: 1;
    opacity: 1;
    filter: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-fast {
    stroke: var(--grn);
    stroke-width: 1.8;
    filter: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-link-path.quit-tree-link-path-active {
    stroke: var(--red);
    stroke-width: 1.8;
    filter: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
    gap: 9px;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
    width: 82px;
    min-height: 70px;
    max-width: 82px;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
    width: calc((5 * 82px) + (4 * 9px));
    max-width: calc((5 * 82px) + (4 * 9px));
    min-height: 74px;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis {
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: var(--white);
    color: var(--t3);
    box-shadow: none;
    font-family: var(--mono);
    font-size: 0.72rem;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-ellipsis.quit-ellipsis-path-active {
    border-color: var(--red);
    background: var(--red-l);
    color: var(--red);
    box-shadow: 0 0 0 1px rgba(201, 42, 42, 0.14);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-ellipsis {
    min-height: calc(56px + (var(--quit-layer-span, 1) * 8px));
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-layer-dot-line {
    letter-spacing: 0.16em;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 7px 7px 6px;
    background: var(--white);
    box-shadow: none;
    overflow: hidden;
    text-align: center;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.internal,
.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.leaf {
    border-color: var(--border);
    background: var(--white);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.root {
    border-color: var(--grn);
    border-width: 2px;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node {
    border-color: var(--amb);
    background: var(--amb-l);
    box-shadow: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node {
    border-color: #7ea3bf;
    background: #f7fbff;
    box-shadow: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-path-active {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.12);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-fast-active {
    border-color: var(--grn);
    background: var(--grn-p);
    box-shadow: 0 0 0 2px rgba(21, 101, 58, 0.12);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active {
    border-color: var(--grn);
    background: #eef8f2;
    box-shadow: 0 0 0 2px rgba(21, 101, 58, 0.16);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-header,
.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-node-range,
.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-cell,
.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-leaf-pointer {
    color: var(--grn);
    font-weight: 500;
    text-shadow: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node.quit-fast-active .quit-key-empty {
    border-color: var(--grn-br);
    background: rgba(255, 255, 255, 0.8);
    color: var(--t3);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-header {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--t3);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    padding: 0;
    border-bottom: none;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-pole-node .quit-node-header {
    color: var(--amb);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.sware-tail-node .quit-node-header {
    color: #547c9a;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-fast-active .quit-node-header {
    color: var(--grn);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-path-active .quit-node-header {
    color: var(--red);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-range {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--t2);
    margin-bottom: 4px;
    padding: 0;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 0;
    min-height: 0;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-cell {
    width: auto;
    min-width: 0;
    height: auto;
    line-height: 1.35;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--alt);
    font-family: var(--mono);
    font-size: 0.53rem;
    font-weight: 500;
    color: var(--t2);
    overflow: visible;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-key-empty {
    background: var(--white);
    border-style: dashed;
    color: var(--t3);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-fast-active .quit-key-cell {
    border-color: var(--grn-br);
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-card.quit-path-active .quit-key-cell {
    border-color: #f0b6b6;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-leaf-pointer {
    margin-top: 3px;
    padding: 0;
    border-top: none;
    font-family: var(--mono);
    font-size: 0.46rem;
    color: var(--t3);
    text-transform: uppercase;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card {
    border-color: var(--border);
    background: var(--white);
    color: var(--t3);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .sware-tail-dots-card.sware-tail-dots-fast {
    border-color: var(--grn-br);
    background: var(--grn-p);
    color: var(--grn);
    box-shadow: 0 0 0 1px rgba(21, 101, 58, 0.12);
}

/* SWARE grid */
.redesign .pgrid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

.redesign .pc {
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 3px;
    min-height: 130px;
    background: var(--white);
}

.redesign .pc.fl {
    border-style: solid;
    border-color: var(--border-s);
    background: var(--bg);
}

.redesign .pc.fl.c0 {
    border-left: 3px solid #e03e3e;
}

.redesign .pc.fl.c1 {
    border-left: 3px solid #e8890c;
}

.redesign .pc.fl.c2 {
    border-left: 3px solid var(--grn-b);
}

.redesign .pc-l {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--t3);
    text-align: center;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.redesign .pv {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--t2);
    text-align: center;
    padding: 2px 0;
    line-height: 1.35;
}

.redesign .pv.n {
    background: var(--grn-p);
    color: var(--grn);
    font-weight: 600;
    border-radius: 2px;
}

/* QuIT tree */
.redesign .tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.redesign .tn {
    border: 1.5px solid var(--border);
    border-radius: var(--rs);
    padding: 10px 14px;
    background: var(--white);
    text-align: center;
    min-width: 100px;
}

.redesign .tn.root {
    border-color: var(--grn);
    border-width: 2px;
}

.redesign .tn.pole {
    border-color: var(--amb);
    background: var(--amb-l);
}

.redesign .tn-ty {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.redesign .tn-rg {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--t2);
    margin-bottom: 6px;
}

.redesign .tn-vs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}

.redesign .tv {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    background: var(--alt);
    border: 1px solid var(--border);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--t2);
}

.redesign .tv.h {
    border-color: var(--amb);
    color: var(--amb);
    background: var(--amb-l);
    font-weight: 600;
}

.redesign .tc {
    width: 1px;
    height: 16px;
    background: var(--border-s);
}

.redesign .tch {
    display: flex;
    gap: 12px;
}

.redesign .tnx {
    font-family: var(--mono);
    font-size: 0.52rem;
    color: var(--t3);
    margin-top: 4px;
}

@media (max-width: 991px) {
    .redesign .animations-layout>.animations-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row {
        gap: 6px;
    }

    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-node-slot {
        width: 74px;
        min-height: 66px;
        max-width: 74px;
    }

    .redesign :is(#quit-tree-grid, #sware-tree-grid, #tail-tree-grid, #lil-tree-grid, #bplus-tree-grid) .quit-tree-row.quit-row-layer-ellipsis .quit-node-slot {
        width: calc((5 * 74px) + (4 * 6px));
        max-width: calc((5 * 74px) + (4 * 6px));
        min-height: 70px;
    }

    .redesign .sware-buffer-page .buffer-btn {
        font-size: 4.5px;
    }
}

/* ─── Metrics (full-width 3-col grid) ─── */
.redesign .metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.redesign .m-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 20px;
}

.redesign .m-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--t2);
    margin-bottom: 14px;
}

.redesign .m-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.redesign .m-col {
    text-align: center;
    flex: 1;
}

.redesign .m-al {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.redesign .m-al.s {
    color: var(--grn);
}

.redesign .m-al.q {
    color: var(--amb);
}

.redesign .m-n {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.redesign .m-n.na {
    color: var(--t3);
    font-size: 1.2rem;
}

/* Highlight animation when a metric changes */
.redesign .m-card.metric-updated {
    box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
    border-color: rgba(255, 160, 0, 0.9);
    transition: box-shadow 280ms ease, border-color 280ms ease;
}

.redesign .m-card.metric-updated .m-name {
    color: #b36b00;
    /* slightly darker amber */
}

.redesign .m-vs {
    font-size: 0.62rem;
    color: var(--t3);
    padding: 0 6px;
    align-self: center;
}

/* ─── Charts (full-width 2-col grid) ─── */
.redesign .chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}

.redesign .cc {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 20px;
}

.redesign .cc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.redesign .cc-t {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.redesign .cc-lg {
    display: flex;
    gap: 12px;
}

.redesign .lg {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--t3);
}

.redesign .ld {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.redesign .ld.g {
    background: var(--grn);
}

.redesign .ld.r {
    background: var(--red);
}

.redesign .cc-a {
    /* Flexible height but with clear min/max to avoid very small or enormous cards */
    /* Static baseline to match fixed Plotly chart size (425x450) */
    height: auto;
    min-height: 460px;
    /* allows for card header + 450px chart body */
    max-height: 900px;
    background: var(--alt);
    border: 1px solid var(--border);
    border-radius: var(--rs);
    position: relative;
    overflow: hidden;
}

/* Medium chart card variant: use when charts need extra vertical space */
.redesign .cc-md .cc-a {
    /* Medium cards get a larger baseline for desktop layouts */
    min-height: 480px;
    /* medium cards give slightly more room for padding */
    max-height: 1000px;
    overflow: auto;
}

.redesign canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.redesign .ax {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--t3);
    position: absolute;
}

.redesign .ax.x {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.redesign .ax.y {
    top: 50%;
    left: 6px;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left center;
}

.redesign .cc-sub {
    font-family: var(--mono);
    font-size: 0.78rem;
    /* slightly larger */
    color: var(--t2);
    /* a little darker */
    text-align: center;
    margin-top: 8px;
}

.redesign .cc-x {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--t3);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: all 0.12s;
}

.redesign .cc-x:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-l);
}

/* ─── Footer ─── */
.redesign footer {
    border-top: 1px solid var(--border);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 36px auto 0;
}

.redesign .fl {
    display: flex;
    gap: 16px;
}

.redesign .fl a {
    font-size: 0.78rem;
    color: var(--t2);
    text-decoration: none;
    font-weight: 500;
}

.redesign .fl a:hover {
    color: var(--text);
}

.redesign .fc {
    font-size: 0.72rem;
    color: var(--t3);
}

/* v6-style overrides for playback controls that neutralize legacy ID rules
   and apply the circular green play button + neutral pause/reset look. */

.redesign #buttons-container #continue-button,
.redesign #buttons-container #stop-button,
.redesign #buttons-container #reset-button,
.redesign #buttons-container #nextstep-button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    /* square-ish */
    border: 1px solid transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mono) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: transparent !important;
    color: var(--t2) !important;
}

/* Selected state: green background and white glyph */
.redesign #buttons-container #continue-button.on,
.redesign #buttons-container #stop-button.on,
.redesign #buttons-container #reset-button.on,
.redesign #buttons-container #nextstep-button.on {
    background: var(--grn) !important;
    color: #fff !important;
    border-color: var(--grn) !important;
    box-shadow: 0 6px 14px rgba(21, 101, 58, 0.12) !important;
}

.redesign #buttons-container .badge {
    margin-left: 12px !important;
}

/* paused badge style */
.redesign #buttons-container .badge.paused {
    background: var(--amb-l) !important;
    color: var(--amb) !important;
    border: 1px solid var(--amb-br) !important;
}

/* ensure running badge retains green style */
.redesign #buttons-container .badge.running {
    background: var(--grn-p) !important;
    color: var(--grn) !important;
    border: 1px solid var(--grn-br) !important;
}

/* dot color variants for badge states */
.redesign #buttons-container .badge.paused .dot {
    background: var(--amb) !important;
}

.redesign #buttons-container .badge.running .dot {
    background: var(--grn) !important;
}

.redesign #results-gap {
    display: none;
}

.redesign #results-gap.visible {
    display: block;
}

/* Publication / Authors / Sponsors styling to match redesign */
.redesign #publication {
    max-width: 1100px;
    margin: 32px auto;
    padding: 22px 28px 18px 28px;
    /* leave space for the top accent */
    background: #fff;
    /* keep content area white for readability */
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

/* Top title bar accent: slim gradient strip across the top of the publication card */
.redesign #publication::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
    background: linear-gradient(90deg, var(--grn), var(--grn-b));
}

.redesign #publication .pub-title {
    margin-top: 8px;
}

.redesign .pub-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.redesign .pub-title {
    font-family: var(--disp);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.redesign .pub-authors {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--t2);
}

/* Make publication block text match the site's sans body styling */
.redesign #publication p,
.redesign #publication .content {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--t2);
    line-height: 1.6;
    max-width: 900px;
    /* wider content pane for publications */
    margin: 0 auto;
    /* center within the publication container */
}

.redesign .pub-links a {
    color: var(--grn);
    font-weight: 600;
    text-decoration: none;
}

/* Conference/venue lines in publications use accent green */
.redesign .pub-conf {
    color: var(--grn);
    font-family: var(--sans);
}

.redesign #authors {
    max-width: 1100px;
    margin: 32px auto;
    padding: 22px 10px;
}

.redesign #authors .team-member-box-2 {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px;
    margin: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* make boxes slightly wider for better readability */
    min-width: 170px;
    max-width: 240px;
    box-sizing: border-box;
    transition: transform 220ms cubic-bezier(.2, .9, .2, 1), box-shadow 220ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
}

.redesign .team-member-box-2 .team-member-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 999px;
    border: 2px solid var(--border);
}

.redesign #authors h2 {
    font-family: var(--disp);
    font-size: 1.3rem;
    color: var(--text);
    margin-bottom: 12px;
}

/* Make the Meet The Team heading match the main page title */
.redesign #authors h1.team-title,
.redesign h1.team-title {
    font-family: var(--disp);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    color: var(--grn);
}

/* Center the team title within the page and constrain its width like the main title */
.redesign #authors .team-title {
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    max-width: 740px;
}

/* Add gutter padding for author grid columns inside the redesign so cards have space */
.redesign #authors .row>[class*="col-"] {
    padding: 8px 10px;
    /* center the card inside the column and prevent it from stretching */
    display: flex;
    justify-content: center;
}

/* Hover effect: slightly zoom the whole card and lift shadow */
.redesign #authors .team-member-box-2:hover {
    transform: scale(1.06);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

/* Make hover gentler on small screens */
@media (max-width: 576px) {
    .redesign #authors .team-member-box-2:hover {
        transform: scale(1.02);
    }
}

/* Ensure links (and nested <font> tags) inside team cards transition color */
.redesign #authors .team-member-box-2 a,
.redesign #authors .team-member-box-2 a font {
    transition: color 180ms ease-in-out, transform 180ms ease-in-out;
}

/* When the card is hovered, make links accent color and slightly bolder */
.redesign #authors .team-member-box-2:hover a,
.redesign #authors .team-member-box-2:hover a font {
    color: var(--grn);
    font-weight: 600;
}

.redesign #authors h3,
.redesign #authors p {
    margin: 0;
}

.redesign #authors h3 a {
    color: var(--text);
    text-decoration: none;
    transition: color 160ms ease-in-out;
}

/* Ensure team member names use the site's sans-serif for consistency */
.redesign #authors .team-member-box-2 h3,
.redesign #authors .team-member-box-2 h3 a,
.redesign #authors .team-member-box-2 h3 a font {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--text);
}

/* Hover state for team card links: accent green */
.redesign #authors .team-member-box-2 h3 a:hover,
.redesign #authors .team-member-box-2 a:hover {
    color: var(--grn);
}

.redesign #authors p {
    font-family: var(--mono);
    color: var(--t2);
    font-size: 0.9rem;
}

.redesign #sponsors {
    /* max-width: 1100px;
    margin: 32px auto;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r); */
    max-width: 1100px;
    margin: 32px auto;
    padding: 22px 28px 18px 28px;
    /* leave space for the top accent */
    background: #fff;
    /* keep content area white for readability */
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

/* Top title bar accent: slim gradient strip across the top of the publication card */
.redesign #sponsors::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
    background: linear-gradient(90deg, var(--grn), var(--grn-b));
}

.redesign #sponsors .img-logo {
    max-width: 160px;
    height: auto;
    display: inline-block;
}

.redesign #sponsors .col-lg-6 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer adjustments for the legacy footer markup inside redesign */
.redesign footer.text-center {
    border-top: 1px solid var(--border);
    padding: 28px 32px;
    max-width: 1100px;
    margin: 36px auto 0;
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

/* Normalize section headings inside the redesign to override legacy global rules */
.redesign section h2,
.redesign h2 {
    font-family: var(--disp);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin: 0 0 12px;
}

.redesign .footer-below .img-logo {
    max-height: 60px;
}

.redesign footer .container .row .col-lg-12 {
    color: var(--t3);
    font-size: 0.9rem;
}