:root{color-scheme:light;--paper:#f3f3f0;--ink:#1d2022;--blue:#2747b8;--muted:#595f62}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,sans-serif}header{position:fixed;z-index:2;inset:8px 16px auto;display:flex;align-items:center;gap:20px;height:44px;background:var(--paper)}h1{font-size:16px;margin:0;font-weight:650}nav{display:flex;gap:8px}button,input{font:inherit;color:inherit}button{cursor:pointer;min-height:44px;min-width:44px;background:none;border:0;padding:0 8px}#themes button{font-size:12px;color:var(--muted)}#themes button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}#search{margin-left:auto;display:flex;border-bottom:1px solid #a9adaf;align-items:center;height:38px}input{width:190px;font-size:12px;background:none;border:0;outline:none;min-height:36px}#search button{font-size:17px}#about{border:1px solid var(--ink);border-radius:50%;width:38px;height:38px;min-width:38px;min-height:38px;font-size:18px}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}canvas{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:pan-y}canvas:focus-visible{outline:1px solid var(--blue);outline-offset:-4px}.column-labels{position:fixed;top:72px;left:5%;width:90%;display:flex;justify-content:space-around;font-size:12px;pointer-events:none}.column-labels b{font-size:10px;margin-left:5px;font-weight:400;color:var(--muted)}footer{position:fixed;bottom:10px;left:20px;right:20px;text-align:center;pointer-events:none;background:var(--paper);font-size:11px;line-height:1.5}footer p{margin:0}#reading{min-height:34px;font-size:12px;font-variant-numeric:tabular-nums}#reading strong{font-size:13px}#status{color:var(--blue)}.key{color:var(--muted)}.sample{font-size:10px;color:var(--muted)}dialog{color:var(--ink);background:#f8f8f4;border:1px solid #a9adaf;border-radius:3px;width:calc(100% - 32px);max-width:480px;padding:28px;font:15px/1.5 system-ui,sans-serif;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#14171ab5}dialog h2{font-size:21px;margin:0 28px 18px 0}dialog p{margin:0 0 14px}dialog #close{position:absolute;right:6px;top:6px;font-size:24px}dialog nav{flex-wrap:wrap;gap:16px;font-size:12px}a{color:inherit;text-underline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){header{height:92px;gap:6px;flex-wrap:wrap;align-content:flex-start;left:14px;right:14px}h1{font-size:14px;margin-right:auto}#themes{gap:0}#themes button{padding:0 6px}#about{margin-left:5px}#search{order:5;width:100%;height:38px;margin:0}input{width:calc(100% - 44px)}.column-labels{top:112px;font-size:11px}.column-labels b{font-size:9px;margin-left:3px}footer{left:12px;right:12px;font-size:10px}.sample{font-size:9px}#reading{font-size:11px;min-height:38px}dialog{font-size:14px;padding:24px}}@media(max-height:480px) and (min-width:651px){.column-labels{top:58px}header{top:4px}footer{bottom:5px}#reading{min-height:26px;font-size:10px}.sample{font-size:9px}}

dialog .credit{font-size:11px;color:var(--muted)}

/* Keep every theme available without putting settings in the caption. */
@media(min-width:651px) and (max-width:1199px){header{height:88px;flex-wrap:wrap;gap:0 14px}h1{order:0}#themes{order:3;width:100%;justify-content:center}#search{order:1}#about{order:2}}
@media(max-width:650px){header{height:auto;display:grid;grid-template-columns:1fr 38px;gap:0 6px}h1{grid-column:1;grid-row:1;align-self:center}#about{grid-column:2;grid-row:1;margin:0}#themes{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;justify-content:center;gap:0}#themes button{padding:0 7px;min-height:34px}#search{grid-column:1 / -1;grid-row:3}#search input{flex:1;min-width:0}}