.token-mix-card{border:1px solid var(--line);background:var(--bg-raised);border-radius:16px;overflow:hidden}.token-mix-card button{cursor:pointer}.token-mix-card button:disabled{cursor:default}.token-mix-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;display:flex}.token-mix-eyebrow{color:var(--color-ink);display:block}.token-mix-period{color:var(--fg-muted)}.token-mix-ranges{background:var(--bg-muted);border-radius:8px;gap:4px;padding:4px;display:flex}.token-mix-ranges button{min-width:40px;min-height:36px;color:var(--fg-muted);transition:background .18s var(--ease-out-cubic), color .18s var(--ease-out-cubic);border-radius:6px;padding:4px 8px}.token-mix-ranges button[aria-pressed=true]{background:var(--bg-raised);color:var(--color-ink);box-shadow:0 1px 3px var(--line)}.token-mix-ranges button:hover{color:var(--accent-deep)}.token-mix-explorer{grid-template-columns:minmax(0,1fr) 240px;display:grid}.token-mix-main{min-width:0;padding:24px 20px 16px 24px}.token-mix-summary{min-height:90px}.token-mix-featured{align-items:center;gap:8px;display:flex}.token-mix-swatch{border-radius:2px;flex:0 0 8px;width:8px;height:8px}.token-mix-summaryHint{color:var(--fg-muted);margin-left:2px;font-size:11px}.token-mix-metric{font-variant-numeric:tabular-nums;align-items:baseline;gap:12px;margin-top:8px;display:flex}.token-mix-metric>span{color:var(--fg-muted);font-size:11px}.token-mix-plotShell{margin-top:16px;padding-left:36px;position:relative}.token-mix-axis{width:30px;color:var(--fg-muted);font-size:10px;position:absolute;top:0;bottom:44px;left:0}.token-mix-axis span{position:absolute;right:0;transform:translateY(-50%)}.token-mix-scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent;overflow:auto hidden}.token-mix-plot{height:304px;position:relative}.token-mix-grid{pointer-events:none;position:absolute;inset:0 0 44px}.token-mix-grid span{border-top:1px dashed var(--line);position:absolute;left:0;right:0}.token-mix-grid span:last-child{border-top-style:solid}.token-mix-columns{gap:2px;display:flex;position:absolute;inset:0}.token-mix-column{outline-offset:-2px;border-radius:6px;flex:1;min-width:0;height:100%;padding:0 5px 44px;position:relative}.token-mix-column:before{content:"";background:var(--bg-muted);opacity:0;transition:opacity .18s var(--ease-out-cubic);border-radius:6px;position:absolute;inset:-8px 0 36px}.token-mix-column[data-active=true]:before{opacity:1}.token-mix-stack{border-radius:4px 4px 0 0;flex-direction:column-reverse;height:100%;display:flex;position:relative;overflow:hidden}.token-mix-segment{width:100%;transition:opacity .18s var(--ease-out-cubic);flex-shrink:0;display:block}.token-mix-month{white-space:nowrap;color:var(--fg-muted);font-size:10px;position:absolute;top:calc(100% - 36px);left:50%;transform:translate(-50%)}.token-mix-month[data-hidden=true]{visibility:hidden}.token-mix-column[data-active=true] .token-mix-month{color:var(--color-ink);visibility:visible}.token-mix-columns[data-dense=true] .token-mix-column[data-active=true]+.token-mix-column .token-mix-month{visibility:hidden}.token-mix-columns[data-dense=true] .token-mix-column:has(+.token-mix-column[data-active=true]) .token-mix-month{visibility:hidden}.token-mix-marker{background:var(--accent);opacity:0;border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:calc(50% - 2px)}.token-mix-column[data-selected=true] .token-mix-marker{opacity:1}.token-mix-help{color:var(--fg-muted);text-align:center;margin:12px 0 0;font-size:10px}.token-mix-help span{display:none}.token-mix-detail{border-left:1px solid var(--line);background:var(--bg);padding:20px 12px 12px}.token-mix-monthNav{text-align:center;grid-template-columns:28px 1fr 28px;align-items:center;gap:4px;margin-bottom:16px;display:grid}.token-mix-monthNav button{width:28px;height:36px;color:var(--fg-muted);transition:background .18s var(--ease-out-cubic);border-radius:6px}.token-mix-monthNav button:hover:not(:disabled){background:var(--bg-strong);color:var(--color-ink)}.token-mix-monthNav button:disabled{opacity:.3}.token-mix-monthNav strong{color:var(--color-ink);font-weight:600;display:block}.token-mix-monthNav span{color:var(--fg-muted);font-size:11px;display:block}.token-mix-listHeader{color:var(--fg-muted);justify-content:space-between;margin:0 8px 6px;font-size:10px;display:flex}.token-mix-family{text-align:left;width:100%;min-height:32px;transition:background .18s var(--ease-out-cubic), opacity .18s var(--ease-out-cubic);border-radius:6px;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;font-size:11px;display:grid}.token-mix-family strong{font-variant-numeric:tabular-nums;font-weight:500}.token-mix-family[data-highlighted=true]{background:var(--bg-strong)}.token-mix-family[aria-pressed=true]{box-shadow:inset 2px 0 var(--accent)}.token-mix-reset{width:100%;min-height:36px;color:var(--accent-deep);margin-top:8px;font-size:10px}.token-mix-reset:disabled{color:var(--fg-muted)}.token-mix-footnote{border-top:1px solid var(--line);color:var(--fg-muted);padding:12px 24px;font-size:11px}@media (max-width:809px){.token-mix-explorer{grid-template-columns:minmax(0,1fr)}.token-mix-detail{border-left:0;border-top:1px solid var(--line);padding:16px}.token-mix-monthNav{grid-template-columns:44px 1fr 44px;max-width:300px;margin:0 auto 16px}.token-mix-monthNav button{width:44px;height:44px}.token-mix-families{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;display:grid}.token-mix-family{min-height:40px}.token-mix-listHeader{display:none}.token-mix-main{padding:20px 16px 16px}.token-mix-summary{min-height:80px}.token-mix-toolbar{padding:16px}.token-mix-footnote{padding:12px 16px}.token-mix-help span{display:block}.token-mix-reset{min-height:44px}}@media (max-width:420px){.token-mix-toolbar{gap:8px}.token-mix-ranges button{min-width:32px;min-height:36px;padding-inline:6px}.token-mix-period{font-size:11px}.token-mix-families{gap:2px 4px}.token-mix-family{gap:6px;padding-inline:4px;font-size:10px}.token-mix-summaryHint{font-size:10px}}