.fv-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.fv-tabs button { border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 999px; padding: .4rem 1rem; font: inherit; cursor: pointer; }
.fv-tabs button[aria-selected="true"] { border-color: var(--rose-700); color: var(--rose-700); font-weight: 700; background: var(--surface-2); }
.fv-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .fv-grid { grid-template-columns: minmax(0, 1fr) 15rem; } }
.fv-opts [hidden] { display: none; }
.fv-two { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.fv-two .field, .fv-opts .field { min-width: 0; }
.fv-check { display: inline-flex; gap: .4rem; align-items: center; padding-bottom: .7rem; }
.fv-opts input[type="color"] { width: 100%; min-height: 2.4rem; padding: .15rem; }
.fv-view { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
#fv-prev { width: 12rem; height: 12rem; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.fv-tabmock { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: .35rem .7rem; background: var(--surface-2); font-size: .85rem; }
.fv-tabmock canvas { image-rendering: auto; }
#fv-tab16 { width: 16px; height: 16px; }
#fv-tab32 { width: 32px; height: 32px; margin-left: .5rem; }
#fv-out[hidden] { display: none; }
.fv-list { list-style: none; padding: 0; margin: .6rem 0 0; }
.fv-list li { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .35rem 0; border-top: 1px solid var(--line); }
.fv-list li span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; }
.fv-list li small { color: var(--muted); }
.fv-code { margin-top: 1.1rem; }
.fv-code h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
.fv-codehead { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.fv-codehead h3 { margin: .4rem 0; }
.fv-code pre { overflow-x: auto; white-space: pre; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; font-size: .8rem; max-width: 100%; }