:root {

    --fact-swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M2.6 10.4 C3.4 6.4 6 4.2 10 3.8 C40 1.8 76 5.6 110.4 2.8 C115.6 2.4 118 5.4 117.6 10.4 C117.2 14.8 117.8 19.6 115.8 23.4 C114 26.8 109.6 27 104.4 26.4 C70 22.8 42 26.6 10 25.8 C5 25.6 2.4 22.8 2.2 18.4 C2 15.6 2.2 12.8 2.6 10.4 Z' fill='%23000'/%3E%3C/svg%3E");

}

.more-facts { grid-column: 1 / -1; margin-top: 6px; }

.fx-wall {
    --fact-ink: color-mix(in srgb, var(--tone-b) 60%, white 40%);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 2px;
    grid-auto-flow: dense;
    gap: 10px;
}

.fx-wall.is-measuring .fx { align-self: start; }

.fx {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--lift);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.fx.is-accent {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--tone-b) 60%, transparent),
            color-mix(in srgb, var(--tone-b) 22%, transparent)),
        var(--lift-2);
}

.fx-v {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.92;
    font-size: clamp(34px, 3.4vw, 52px);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px 10px;
}

.fx-v span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); }

.w3 .fx-v, .w4 .fx-v, .w6 .fx-v { font-size: clamp(44px, 5.2vw, 82px); }
.is-accent .fx-v span { color: rgba(255, 255, 255, 0.72); }

.fx-now { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.is-accent .fx-now { color: rgba(255, 255, 255, 0.66); }

.fx-t { margin: 10px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3; font-weight: 500; }

.fx > div:first-of-type { padding-right: 124px; }
.w2 > div:first-of-type { padding-right: 96px; }
.fx-shot .fx-in, .fx-shot .fx-t { padding-right: 0; }

.fx-foot { margin-top: auto; padding-top: 12px; }

.fx-cmp { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.fx-cmp b { font-weight: 600; color: var(--ink); }
.is-accent .fx-cmp { color: rgba(255, 255, 255, 0.8); }
.is-accent .fx-cmp b { color: #fff; }

.fx-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.w4 .fx-list, .w5 .fx-list, .w6 .fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }

.fx-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ink-soft);
}

.bt { color: var(--fact-ink); }

.bt-dot-mine, .bt-dot-rest { width: 16px; height: 16px; margin-left: 5px; margin-right: 5px; }
.bt.bt-dot-mine .pen, .bt.bt-dot-rest .pen { stroke: none; }
.bt.bt-dot-mine .pen { fill: var(--fact-ink); }
.bt.bt-dot-rest .pen { fill: rgba(242, 241, 236, 0.3); }
.is-accent .bt.bt-dot-mine .pen { fill: #fff; }
.is-accent .bt.bt-dot-rest .pen { fill: rgba(255, 255, 255, 0.4); }
.is-accent .fx-list li { color: rgba(255, 255, 255, 0.8); }
.is-accent .bt { color: #fff; }

.fx-why {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-faint);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.is-accent .fx-why { color: rgba(255, 255, 255, 0.6); }

.fx > div > .fx-why { margin-top: 16px; -webkit-line-clamp: none; overflow: visible; }

.fx-cmp2 { display: flex; flex-direction: column; gap: 7px; margin: 16px 0 0; }
.is-part { gap: 5px; }

.part-bar {
    display: block;
    height: 12px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
    margin-bottom: 4px;
}

.part-bar i { display: block; height: 100%; border-radius: 3px 0 0 3px; background: var(--fact-ink); }
.is-accent .part-bar { background: rgba(255, 255, 255, 0.2); }
.is-accent .part-bar i { background: #fff; }

.fx-legend { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.fx-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ink-faint);
}

.fx-legend b { font-weight: 600; color: var(--ink); }
.is-accent .fx-legend li { color: rgba(255, 255, 255, 0.72); }
.is-accent .fx-legend b { color: #fff; }

mark.hl {
    background: none;
    color: var(--ink);
    font-weight: 600;
    position: relative;
    padding: 0 0.22em;
    margin: 0 -0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

mark.hl::before {
    content: '';
    position: absolute;
    inset: -0.2em -0.1em -0.24em;
    z-index: -1;
    background: var(--fact-ink);
    opacity: 0.55;
    -webkit-mask: var(--fact-swipe) center / 100% 100% no-repeat;
    mask: var(--fact-swipe) center / 100% 100% no-repeat;
}

.is-accent mark.hl { color: #fff; }
.is-accent mark.hl::before { background: #fff; opacity: 0.34; }

.cmp-row { display: flex; flex-direction: column; gap: 4px; }

.cmp-bar { display: block; height: 5px; border-radius: 2.5px; background: var(--line); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 2.5px; background: var(--line-strong); }
.is-mine .cmp-bar i { background: var(--fact-ink); }

.cmp-txt { margin: 0; font-size: 13px; line-height: 1.25; color: var(--ink-faint); }
.cmp-txt b { font-weight: 600; color: var(--ink-soft); }
.is-mine .cmp-txt { color: var(--ink-soft); }
.is-mine .cmp-txt b { color: var(--ink); }

.is-accent .cmp-bar { background: rgba(255, 255, 255, 0.22); }
.is-accent .cmp-bar i { background: rgba(255, 255, 255, 0.5); }
.is-accent .is-mine .cmp-bar i { background: #fff; }
.is-accent .cmp-txt { color: rgba(255, 255, 255, 0.7); }
.is-accent .cmp-txt b { color: rgba(255, 255, 255, 0.9); }
.is-accent .is-mine .cmp-txt b { color: #fff; }

.fx-seats {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 5px;
    margin: 14px 0 0;
    max-width: 264px;
}

.fx-seats i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.fx-seats i.on { background: var(--fact-ink); }
.is-accent .fx-seats i { background: rgba(255, 255, 255, 0.26); }
.is-accent .fx-seats i.on { background: #fff; }

.fx-cmp.solo { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.fx-cmp.solo b { color: var(--ink); }

.fx-time { position: relative; height: 16px; margin: 16px 0 0; max-width: 280px; }
.tl-line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--fact-ink); }
.tl-a, .tl-b { position: absolute; top: 1px; width: 2px; height: 14px; background: var(--fact-ink); }
.tl-a { left: 0; }
.tl-b { right: 0; }

.fx > div, .fx-foot { position: relative; z-index: 1; }

.fx.is-in .mk .pen {
    animation: mk-draw var(--t, 0.4s) linear calc(var(--in, 0s) + 0.1s + var(--d, 0s)) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .fx.is-in .mk .pen { animation: none; }
}

.fx-shot { padding: 0; }

.fx-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fx-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(15deg, rgba(8, 8, 10, 0.94) 18%, rgba(8, 8, 10, 0.42) 62%, rgba(8, 8, 10, 0.16));
}

.fx-shot .fx-in { position: relative; z-index: 2; margin-top: auto; padding: 20px 22px; }
.fx-shot .fx-t { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.fx-shot .fx-why { color: rgba(242, 241, 236, 0.66); }

.fx-bare { background: linear-gradient(150deg, var(--tone-b), var(--tone-a) 74%); }
.fx-bare::after { background: linear-gradient(15deg, rgba(22, 21, 26, 0.72) 8%, rgba(22, 21, 26, 0.12) 62%, transparent); }
.fx-bare .fx-t, .fx-bare .fx-why { color: #FBFAF6; }
.fx-bare .fx-why { color: rgba(251, 250, 246, 0.7); }

.fx-quote-tile .fx-t { font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

.w1 { grid-column: span 1; }
.w5 { grid-column: span 5; }
.w2 { grid-column: span 2; }
.w3 { grid-column: span 3; }
.w4 { grid-column: span 4; }
.w6 { grid-column: span 6; }

.fx { opacity: 0; transform: translateY(10px); }

.fx.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--mid) var(--ease) var(--in, 0s),
                transform var(--mid) var(--ease) var(--in, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .fx { opacity: 1; transform: none; }
    .fx.is-in { transition: none; }
}

@media (max-width: 900px) {
    .fx-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
    .w3, .w4, .w6 { grid-column: span 4; }
    .fx-shot { min-height: 34vw; }
}

@media (max-width: 620px) {
    .fx-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w4 .fx-list, .w5 .fx-list, .w6 .fx-list { grid-template-columns: minmax(0, 1fr); }
    .w2, .w3, .w4, .w6 { grid-column: span 2; }
    .fx { padding: 16px 17px; }
    .w2 .fx-mark { width: 88px; height: 88px; }
    .w2 > div:first-of-type { padding-right: 104px; }
    .fx-shot { min-height: 58vw; }
}