.reader-view{--reader-guide-offset:clamp(96px,17vh,180px);position:fixed;inset:0;z-index:30;overflow:hidden;background-color:var(--bg);background-image:radial-gradient(70% 55% at 50% 48%,color-mix(in srgb,var(--reader-focus) 5%,transparent),transparent 72%);color:var(--text)}.reader-view[hidden]{display:none!important}.reader-view:focus{outline:none}.reader-progress{position:absolute;top:18px;left:50%;z-index:6;display:flex;align-items:center;gap:16px;width:min(680px,calc(100% - 240px));height:38px;transform:translateX(-50%);color:var(--muted);font-size:10px;font-weight:600;line-height:1;letter-spacing:0.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;pointer-events:none}.reader-progress-label{flex:none;white-space:nowrap}.reader-progress-wpm{text-align:right}.reader-progress-track{position:relative;flex:1;height:6px;overflow:hidden;background-color:var(--surface-3)}.reader-progress-fill{width:0;height:100%;background-color:var(--reader-focus);transition:width 120ms linear}.reader-progress-trigger{display:inline-flex;align-items:center;gap:5px;height:28px;margin:0 -6px;padding:0 6px;border:1px solid transparent;background-color:transparent;color:inherit;font:inherit;font-variant-numeric:inherit;letter-spacing:inherit;line-height:1;text-transform:inherit;cursor:pointer;pointer-events:auto;transition:border-color 140ms var(--ease),background-color 140ms var(--ease),color 140ms var(--ease)}.reader-progress-trigger:hover,.reader-progress-trigger[aria-expanded="true"]{border-color:var(--border);background-color:var(--surface-2);color:var(--text)}.reader-progress-trigger svg{width:11px;height:11px;color:var(--faint);stroke-width:2;transition:transform 140ms var(--ease)}.reader-progress-trigger[aria-expanded="true"] svg{color:var(--muted);transform:rotate(180deg)}.reader-popover{position:absolute;top:calc(100% + 8px);z-index:12;width:236px;max-width:calc(100vw - 24px);padding:12px;border:1px solid var(--border);background-color:var(--surface);box-shadow:var(--shadow-md);pointer-events:auto}.reader-popover[hidden]{display:none}#reader-position-popover{left:0}.reader-popover-wpm{right:0;width:268px}.reader-popover-form{display:flex;flex-direction:column;gap:10px}.reader-popover-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;font-weight:600;line-height:1;letter-spacing:0.1em;text-transform:uppercase}.reader-popover-title{color:var(--text-soft)}.reader-popover-hint{color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:0.06em;white-space:nowrap}.reader-popover-row{display:flex;align-items:center;gap:8px}.reader-popover-input{flex:1;min-width:0;height:34px;padding:0 9px;border:1px solid var(--border);outline:none;appearance:textfield;-moz-appearance:textfield;background-color:var(--bg-elevated);color:var(--text);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;box-shadow:var(--input-ring);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}.reader-popover-input::-webkit-outer-spin-button,.reader-popover-input::-webkit-inner-spin-button{margin:0;display:none;appearance:none;-webkit-appearance:none}.reader-popover-input:hover,.reader-popover-input:focus{border-color:var(--focus-ring-color);box-shadow:var(--focus-ring)}.reader-popover-unit{flex:none;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}.reader-popover-submit{flex:none;height:34px;padding:0 14px;border:1px solid var(--text);background-color:var(--text);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:border-color 140ms var(--ease),background-color 140ms var(--ease)}.reader-popover-submit:hover{border-color:var(--text-soft);background-color:var(--text-soft)}.reader-popover-range{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px}.reader-popover-range .range-input{width:100%}.reader-popover-end{color:var(--faint);font-size:9px;font-variant-numeric:tabular-nums}.reader-back{position:absolute;top:18px;left:18px;z-index:6;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius-pill);background-color:transparent;color:var(--muted);font-size:12px;font-weight:500;transition:background-color 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}.reader-back:hover{border-color:var(--border);background-color:var(--surface);color:var(--text)}.reader-back svg{width:17px;height:17px}.reader-stage{position:absolute;inset:0;overflow:hidden}.reader-view:not([hidden]) .reader-stage{animation:reader-stage-in 260ms var(--ease)}@keyframes reader-stage-in{from{opacity:0}}.reader-guides{position:absolute;inset:0;pointer-events:none}.reader-guide{position:absolute;left:0;width:100%;height:1px;background:linear-gradient(to right,transparent 0%,var(--border) 14%,var(--border) 86%,transparent 100%)}.reader-guide::after{content:"";position:absolute;left:50%;width:1px;height:12px;background-color:var(--muted);opacity:0.55;transform:translateX(-50%)}.reader-guide-top{top:calc(50% - var(--reader-guide-offset))}.reader-guide-top::after{top:0}.reader-guide-bottom{top:calc(50% + var(--reader-guide-offset))}.reader-guide-bottom::after{bottom:0}.reader-word{position:absolute;top:50%;left:50%;display:flex;align-items:baseline;color:var(--reader-word);font-size:var(--reader-word-size);font-weight:500;line-height:1;letter-spacing:normal;white-space:pre;will-change:transform;transform:translate3d(0,-50%,0);transform-origin:left center;transition:opacity 180ms var(--ease)}.reader-view[data-countdown="true"] .reader-word,.reader-view[data-paused="true"] .reader-word{opacity:0.22}.reader-word-focus{color:var(--reader-focus)}.reader-state{position:absolute;top:calc(50% - var(--reader-guide-offset) - 16px);left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-100%);color:var(--muted);text-align:center;pointer-events:none}.reader-state[hidden]{display:none}.reader-state-label{color:var(--muted);font-size:10px;font-weight:600;line-height:1;letter-spacing:0.18em;text-transform:uppercase}.reader-state-count{color:var(--reader-focus);font-size:34px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}.reader-state[data-mode="paused"] .reader-state-count{display:none}.reader-state-icon{display:none;width:20px;height:34px;align-items:center;justify-content:center;gap:4px}.reader-state-icon::before,.reader-state-icon::after{content:"";width:4px;height:14px;background-color:var(--reader-focus)}.reader-state[data-mode="paused"] .reader-state-icon{display:inline-flex}.reader-controls{position:absolute;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 16px calc(48px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 28%,transparent 100%);pointer-events:none}.reader-dock{display:flex;align-items:center;gap:5px;padding:7px;border:1px solid var(--border);border-radius:var(--radius-pill);background-color:var(--surface);background-color:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow-dock);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}.reader-control{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid transparent;border-radius:0;background-color:transparent;color:var(--text-soft);transition:background-color 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease),transform 140ms var(--ease)}.reader-control:hover{border-color:var(--border);background-color:var(--surface-2);color:var(--text)}.reader-control:active{transform:scale(0.96)}.reader-control svg{width:20px;height:20px}.reader-control-primary{width:54px;height:54px;margin:0 2px;border-color:var(--text);background-color:var(--text);color:var(--bg)}.reader-control-primary:hover{border-color:var(--text-soft);background-color:var(--text-soft);color:var(--bg)}.reader-control-primary svg{width:22px;height:22px}.reader-view[data-playing="true"] .icon-play,.reader-view[data-playing="false"] .icon-pause{display:none}.reader-view[data-playing="false"] .icon-play{display:block}.reader-view[data-playing="true"] .icon-pause{display:block}.reader-view :focus-visible{outline-color:var(--reader-focus)}@media (width <=640px){.reader-progress{top:60px;gap:10px;width:calc(100% - 24px);height:24px}.reader-progress-trigger{height:24px}.reader-popover{top:calc(100% + 6px)}.reader-back{top:12px;left:12px;padding:0 10px}.reader-guide{background:linear-gradient(to right,transparent 0%,var(--border) 6%,var(--border) 94%,transparent 100%)}.reader-controls{padding:14px 12px calc(44px + env(safe-area-inset-bottom))}.reader-dock{gap:2px;padding:6px}.reader-control{width:44px;height:44px}.reader-control-primary{width:52px;height:52px}}@media (width <=520px){.reader-back span{display:none}.reader-back{width:38px;justify-content:center;padding:0}}@media (height <=540px){.reader-view{--reader-guide-offset:82px}.reader-controls{gap:6px;padding-top:8px}.reader-back{top:10px}}