#content {
        --accent: #cf4b5c;
        --ink: #24222a;
        --muted: #6f6b74;
        --panel: #fff;
        --panel-2: #f6f4f4;
        --line: #e8e2e4;
        --good: #2e9c5a;
        --die-face: #fff;
        --die-edge: #cfcdd4;
        --die-pip: #232733;
        --cup: #b7bac8;
        --cup-mark: #f4f4f8;
    }

    html.dark #content {
        --ink: #eeeaf0;
        --muted: #a29ba6;
        --panel: #201d24;
        --panel-2: #16141a;
        --line: #322d36;
        --die-face: #2b2b3a;
        --die-edge: #3a3a4e;
        --die-pip: #eeeaf0;
        --cup: #3a3644;
        --cup-mark: #cfc9d6;
    }

    #content .lede {
        color: var(--muted);
        margin: 0 0 22px;
        font-size: 1.02rem;
    }

    #content .d {
        width: 34px;
        height: 34px;
        vertical-align: middle;
    }

    #content .df {
        fill: var(--die-face);
        stroke: var(--die-edge);
        stroke-width: 3;
    }

    #content .d circle {
        fill: var(--die-pip);
    }

    #content .cup {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--cup);
        color: var(--cup-mark);
        font-weight: 700;
        font-size: 19px;
        vertical-align: middle;
    }

    #content .cell {
        display: inline-grid;
        place-items: center;
        padding: 3px;
        border-radius: 9px;
    }

    #content .cell.mark {
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        outline: 2px solid var(--accent);
    }

    #content .seat {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 8px 12px;
        margin: 6px 0;
    }

    #content .seat .who {
        width: 70px;
        font-size: .85rem;
        color: var(--muted);
        flex: none;
    }

    #content .seat.you .who {
        color: var(--ink);
        font-weight: 700;
    }

    #content .row {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    #content .bidrow {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 14px;
        margin: 6px 0;
    }

    #content .bid {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
    }

    #content .bid .q {
        font-size: 1.3rem;
        color: var(--accent);
    }

    #content .arrow {
        color: var(--muted);
    }

    #content .tag {
        font-size: .78rem;
        color: var(--muted);
    }

    #content .bad {
        color: #c33;
        text-decoration: line-through;
        opacity: .7;
    }

    #content .fine {
        color: var(--muted);
        font-size: .88rem;
        margin-top: 8px;
    }