@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600&display=swap');
html.eras-ready { --era-bar-height: calc(60px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
html.eras-ready body { margin: 0; overflow: hidden; }
html.eras-ready #knm-preview { height: calc(100svh - var(--era-bar-height)); height: calc(100dvh - var(--era-bar-height)); }
.era-dock, .era-dock * { box-sizing: border-box; }
.era-dock { position: fixed; z-index: 100; inset: auto 0 0; height: var(--era-bar-height); display: flex; justify-content: center; align-items: center; padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); color: #151419; background: #f1e9f7; border-top: 1px solid #15141924; font-family: Spectral, Georgia, serif; }
.era-options { display: grid; grid-template-columns: 1fr 1fr 1.25fr; width: min(360px,100%); gap: 4px; padding: 0; margin: 0; border: 0; }
.era-option { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 10px; cursor: pointer; border-radius: 3px; transition: background-color .16s, color .16s; }
.era-option input, .era-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.era-option-name { font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.era-option:hover { background: #1514190b; }
.era-option:has(input:checked) { background: #151419; color: #f1e9f7; }
.era-option:has(input:focus-visible) { outline: 2px solid #175ff1; outline-offset: 2px; }
html[data-era="html"] .era-dock { background: #fff; font-family: 'Times New Roman', serif; }
html[data-era="html"] .era-option { border-radius: 0; }
html[data-era="html"] .era-option:has(input:checked) { background: #eee; color: #000; text-decoration: underline; }
html[data-era="desktop"] .era-dock { background: #ddd9e2; border-top: 2px solid white; font-family: Tahoma, Arial, sans-serif; }
html[data-era="desktop"] .era-option { border-radius: 0; border: 1px solid transparent; }
html[data-era="desktop"] .era-option:has(input:checked) { color: #151419; background: #c9c0d4; border: 1px solid; border-color: #89818e #fff #fff #89818e; }
html[data-era="desktop"] .era-option-name { font-size: 13px; }
@media (max-width: 360px) { .era-dock { padding-inline: 6px; } .era-option-name { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .era-option { transition: none; } }