#reading-mode-button{display:none;position:fixed;z-index:44;width:40px;height:40px;min-width:40px;min-height:40px;padding:10px;border-radius:50%;border:1px solid #e0e0e0;background:#fffffff2;color:#555;box-shadow:0 3px 16px #0000000a;backdrop-filter:blur(12px)}
@media(max-width:760px){#reading-mode-button:not([hidden]){display:grid;place-items:center}}
#reading-layer{position:fixed;inset:0;z-index:1000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#reading-layer[hidden]{display:none}.reading-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#ffffff80;backdrop-filter:blur(2px);color:#222}.reading-countdown[hidden],.reading-zones[hidden],.reading-exit-hint[hidden]{display:none}.reading-countdown strong{font:500 76px/1 ui-sans-serif,system-ui;letter-spacing:-4px;margin-bottom:26px;font-variant-numeric:tabular-nums}.reading-countdown span{font-size:15px;font-weight:500}.reading-countdown small{font-size:12px;color:#888;margin-top:12px}.reading-zones{height:100%;display:grid;grid-template-rows:1fr 1fr}.reading-zones button{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;touch-action:none;-webkit-tap-highlight-color:transparent}.reading-zones button:hover,.reading-zones button:active{background:transparent;transform:none;box-shadow:none}.reading-zones button.tapped{animation:reading-tap .26s ease-out}.reading-exit-hint{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:12px 20px;border:1px solid #ddd;border-radius:24px;background:#fffffff2;box-shadow:0 4px 24px #0001;color:#333;font-size:14px;pointer-events:none;white-space:nowrap}
@keyframes reading-tap{0%,30%{background:#0000000b}100%{background:transparent}}
body.reading-mode{overflow:hidden;touch-action:none}body.reading-mode> :not(#workspace):not(#reading-layer){display:none!important}body.reading-mode #workspace{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:none!important;margin:0!important;min-width:0;display:flex!important;flex-direction:column;background:#fff}
body.reading-mode #workspace .topbar,body.reading-mode #editor,body.reading-mode #range-tools,body.reading-mode #message,body.reading-mode #add-bar,body.reading-mode #position{display:none!important}
body.reading-mode .content-layout{width:100%;height:100%;display:block!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.reading-mode #score-scroll{width:100%!important;height:100%!important;max-height:none!important;margin:0!important;padding:0 6px 100dvh!important;overflow:hidden!important;scroll-padding:0!important;scroll-behavior:auto!important;overscroll-behavior:none;touch-action:none;scrollbar-width:none}
body.reading-mode #score-paper{padding:20px 6px 30px!important;border:0!important;box-shadow:none!important;pointer-events:none!important;user-select:none;touch-action:none}
body.reading-mode .score-zoom-stage{touch-action:none}body.reading-mode .measure.selected{background:transparent}body.reading-mode .range-shade,body.reading-mode .hover-segment,body.reading-mode .playhead,body.reading-mode .playhead-dot,body.reading-mode .pointer-cursor,body.reading-mode .pointer-dot,body.reading-mode .pointer-time{visibility:hidden!important}
body.reading-mode .row-divider{pointer-events:none}body.reading-mode .row-divider::after{opacity:.45}
@media(prefers-reduced-motion:reduce){.reading-zones button.tapped{animation-duration:.1s}}
@media print{#reading-layer,#reading-mode-button{display:none!important}}

.fretboard-expanded #reading-mode-button{visibility:hidden}