:root{color-scheme:light;--ground:#f3f3f0;--ink:#1d2022;--muted:#5b6064;--grey:#a9adaf;--call:#2747b8;--ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ground);color:var(--ink);font:14px/1.5 var(--ui)}
main{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden}
canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:pinch-zoom;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
canvas:focus{outline:none}canvas:focus-visible{outline:2px solid var(--call);outline-offset:-3px}
:focus-visible{outline:2px solid var(--call);outline-offset:3px}
[hidden]{display:none!important}
.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}
/* Exact reading: placed by the script clear of the selected mark, the ? button and the post link. */
.reading{position:fixed;left:0;top:0;z-index:2;width:max-content;max-width:min(360px,calc(100vw - 20px));padding:7px 10px 8px;background:rgba(243,243,240,.95);border-left:2px solid var(--ink);pointer-events:none;font:12.5px/1.45 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.reading p{margin:0}
.reading .r-h{font-weight:650;font-size:14px}
.reading .r-said{color:var(--call);font-weight:600}
.reading .r-not{color:var(--muted)}
.reading .r-f{color:var(--muted);font-size:11.5px;margin-top:2px}
.reading.transient{opacity:.88}
.post-link{position:fixed;z-index:3;top:max(8px,env(safe-area-inset-top));right:calc(max(8px,env(safe-area-inset-right)) + 52px);height:44px;display:inline-flex;align-items:center;padding:0 8px;color:var(--call);font:600 13px/1 var(--ui);text-underline-offset:3px;white-space:nowrap;background:rgba(243,243,240,.9)}
.explore{position:fixed;z-index:3;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:rgba(243,243,240,.85);color:var(--ink);font:650 18px/1 var(--ui);cursor:pointer}
.explore:hover,.explore:focus-visible{background:var(--ink);color:var(--ground)}
.status{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4;width:min(440px,calc(100vw - 40px));text-align:center;color:var(--muted);font:13px/1.7 var(--ui);background:var(--ground);padding:14px}
.status p{margin:0 0 10px}
.status button{min-height:44px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--ink);padding:0 16px;cursor:pointer}
@media(max-width:360px){.reading{font-size:11.5px}.reading .r-h{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(forced-colors:active){.explore{border-color:ButtonText;color:ButtonText}canvas{border:1px solid CanvasText}.reading{border:1px solid CanvasText}}