:root{font-family:ui-rounded,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#263b50;background:#e6f1f5;font-size:16px;font-synthesis:none;--ink:#263b50;--accent:#087b83;--paper:#fffef9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#book:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}a{color:inherit}.reader{width:100%;margin:auto;padding:16px clamp(8px,1.2vw,24px) 68px;min-height:100svh}.book-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px;color:#52677b}.book-heading h1{font-size:17px;margin:0;letter-spacing:-.035em}.book-heading b{font-size:22px;color:var(--accent);margin-right:10px}.sketchbook{--pad-y:10px;--pad-x:10px;position:relative;perspective:2800px;isolation:isolate;touch-action:pan-x;user-select:none;-webkit-user-select:none}.paper{background:var(--paper);padding:var(--pad-y) var(--pad-x);position:relative;box-shadow:3px 3px 0 #cfdde2,6px 6px 0 #fffdf4,0 9px 22px #263b5018}.current-paper{border-radius:12px 12px 4px 4px}.second-paper{border-radius:4px 4px 12px 12px;margin-top:12px}.image-slot{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);pointer-events:none}.image-slot img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}.binding{height:24px;position:absolute;left:11%;right:11%;top:calc(50% - 12px);z-index:5;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.66% - 8px),#8a9da6 calc(16.66% - 8px),#d5dfe2 calc(16.66% - 5px),#8a9da6 calc(16.66% - 3px),transparent calc(16.66% - 3px),transparent 16.66%);border-radius:3px}.flip-sheet{position:absolute;z-index:4;pointer-events:none;transform-style:preserve-3d;will-change:transform}.flip-forward{transform-origin:center top}.flip-backward{transform-origin:center bottom}.flip-face{position:absolute;inset:0;background:var(--paper);padding:var(--pad-y) var(--pad-x);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 4px 16px #243c5040;border:1px solid #eeeade}.flip-front{transform:translateZ(.2px)}.flip-back{transform:rotateX(180deg) translateZ(.2px)}.flip-forward .flip-front,.flip-backward .flip-back{padding-top:calc(var(--pad-y) + var(--half-gap));border-radius:3px 3px 12px 12px}.flip-forward .flip-back,.flip-backward .flip-front{padding-bottom:calc(var(--pad-y) + var(--half-gap));border-radius:12px 12px 3px 3px}.flip-face .image-slot{width:100%;height:100%;aspect-ratio:auto}.fold-shadow{position:absolute;left:0;right:0;height:50%;z-index:3;pointer-events:none;background:linear-gradient(#233c56,#233c5600)}.shadow-lower{top:50%;transform-origin:top}.shadow-upper{top:0;transform:rotate(180deg)}.reader-controls{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 16px}.reader-controls button{border:1px solid #b9cdd6;background:white;border-radius:24px;min-height:46px;min-width:75px;padding:10px 18px;font-size:15px;font-weight:700}#play-toggle{background:#d52d62;color:white;border:0;min-width:165px;box-shadow:0 3px 0 #aa234f}.reader-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:18px;color:#587181;font-size:13px}.reader-foot button{border:0;background:none;padding:4px 0;font-size:13px;color:#587181}.page-picker{display:flex;align-items:center;gap:4px}.page-picker select{max-width:68px;border:1px solid #bed0d9;border-radius:7px;background:#fffef9;color:var(--ink);padding:4px;font-size:13px}#player-state{text-align:center;color:#526b7c;font-size:13px;min-height:20px;line-height:1.5;margin:15px 0 0}#quality-note{text-align:center;color:#687e8d;font-size:12px;margin:6px 0 0}#play-help{display:block;text-align:center;font-size:14px;margin:10px 0 0;color:var(--accent)}.link-tools{width:min(100%,760px);margin:0 auto;padding:18px 28px 35px;font-size:14px;border-top:1px solid #c9dce4}.link-tools summary{color:var(--accent);cursor:pointer;width:fit-content;padding:6px 0}.link-tools label{display:block;margin:12px 0 8px}.link-entry{display:flex;gap:8px}.link-entry input{min-width:0;flex:1;border:1px solid #b9cdd6;border-radius:10px;padding:12px;background:white;font-size:16px}.link-entry button,#example-book{border:0;background:var(--ink);color:white;border-radius:10px;padding:12px 16px;font-weight:700}.link-tools form p{color:#526b7c;font-size:13px;line-height:1.5}.link-tools #convert-state{margin:0;line-height:1.6}.link-tools #convert-state:not(:empty){padding:8px 0}.link-tools [data-state=error]{color:#a3224c}#example-book{font-size:13px;margin-top:7px;background:white;color:var(--accent);border:1px solid #b9cdd6}.original{background:#dbeaf0;padding:40px 24px;text-align:center;border-top:1px solid #c9dce4}.original h2{font-size:15px;margin:0 0 16px;color:#526b7c}.player-frame{width:min(100%,356px);height:220px;min-height:200px;margin:auto;border-radius:12px;overflow:hidden;background:#263b50}.player-frame iframe,.player-frame #youtube-player{width:100%;height:100%;min-height:200px;border:0;display:block}.source-link{display:inline-block;margin-top:16px;font-size:13px;color:#526b7c;text-underline-offset:3px}#book-title{font-size:13px;max-width:600px;margin:10px auto;color:#526b7c;line-height:1.5}#source-note{font-size:12px;line-height:1.6;color:#687e8d;margin:0 auto;max-width:600px}
@media(max-width:760px){.reader{padding:12px 8px 54px}.book-heading{margin-bottom:12px}.book-heading h1{font-size:16px}.sketchbook{--pad-y:6px;--pad-x:5px}.paper{box-shadow:2px 2px 0 #cfdde2,4px 4px 0 #fffdf4,0 6px 15px #263b5015}.second-paper{margin-top:12px}.binding{height:22px;top:calc(50% - 11px)}.reader-controls{gap:8px;margin:0 0 12px}.reader-controls button{min-width:68px;padding:10px 14px}#play-toggle{min-width:150px}.reader-foot{font-size:12px}.reader-foot button{font-size:12px}.link-tools{padding:16px 20px 30px}.link-entry{flex-direction:column}.link-entry button{min-height:44px}.original{padding-top:34px}}@media(max-width:360px){.reader{padding-left:6px;padding-right:6px}.reader-controls button{min-width:60px;padding:10px 12px}#play-toggle{min-width:140px}.reader-foot{gap:5px}.book-heading b{margin-right:6px}.original{padding-left:18px;padding-right:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.intro-setting{max-width:480px;margin:24px auto;text-align:left;font-size:14px;line-height:1.5}.intro-setting label{display:flex;align-items:center;gap:8px}.intro-setting input{width:18px;height:18px;accent-color:var(--accent)}#intro-status{font-size:13px;color:#526b7c;margin:8px 0 4px}.intro-setting small{font-size:12px;color:#687e8d}

#playlist-bar{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 8px;font-size:14px}#playlist-bar button{border:1px solid #b9cdd6;border-radius:15px;background:white;padding:6px 12px}#song-title{font-size:14px;text-align:center;color:#526b7c;max-width:760px;margin:0 auto 12px;line-height:1.4}#book-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:6;background:var(--paper);color:#526b7c;font-size:16px;line-height:1.6;margin:0;border-radius:12px}.book-heading h1{flex-shrink:0}.book-heading>span{white-space:nowrap}

/* The book starts the page; all playback controls live immediately below it. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.reader{min-height:0;padding-bottom:22px}.reader-controls{margin:24px 0 0;gap:10px}.reader-foot{justify-content:flex-end;margin-top:12px}#quality-note{margin-top:10px}.reader-controls #restart{background:transparent;border-color:#a9c4cf;font-weight:500}#play-toggle{min-width:145px}
.link-tools{width:100%;max-width:1200px;border:2px dashed #bdd4dd;border-radius:16px;margin:12px auto 28px;padding:18px 24px}.drop-hint{color:#617c8a;font-size:14px;margin:8px 0 0}.dragging-link #link-drop{background:#d2edef;border-color:#087b83;box-shadow:0 0 0 4px #087b8320}.dragging-link #link-drop .drop-hint{color:#00646c;font-weight:700}
.music-shelf{max-width:1400px;margin:0 auto;padding:0 24px 32px}.shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 16px}.shelf-heading h2{font-size:18px;margin:0}.shelf-heading>span{font-size:13px;color:#617c8a}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.song-card{border:1px solid #c8dce5;background:#fff;border-radius:14px;text-align:left;padding:0;overflow:hidden;min-width:0;position:relative}.song-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#d6e5ea}.song-card .song-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 12px;margin:10px 0 5px;font-size:14px;line-height:1.5;min-height:42px}.song-card .song-meta{display:block;padding:0 12px 12px;color:#617c8a;font-size:12px}.song-card[aria-current=true]{border:2px solid #087b83;box-shadow:0 0 0 2px #087b831c}.song-card[aria-current=true] .song-meta{color:#087b83;font-weight:700}.song-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#d6e5ea;font-size:20px;color:#527384}#queue-section{margin-bottom:30px}#playlist-bar{margin:0;flex-wrap:wrap;gap:8px}#song-title{text-align:left;max-width:none;font-size:14px;margin:0 0 14px}.original{margin-top:20px}
@media(max-width:760px){.reader{padding-top:8px;padding-bottom:20px}.reader-controls{gap:6px;margin-top:20px}.reader-controls button{min-width:0;padding:10px 11px;font-size:14px;white-space:nowrap}#play-toggle{min-width:114px}.link-tools{width:calc(100% - 24px);padding:14px 16px}.music-shelf{padding:0 12px 24px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shelf-heading{flex-wrap:wrap}.song-card .song-name{padding:0 9px;font-size:14px}.song-card .song-meta{padding:0 9px 10px}}
@media(max-width:360px){.reader-controls{gap:4px}.reader-controls button{font-size:13px;padding:9px 8px}#play-toggle{min-width:104px}.song-grid{gap:8px}}

.quality-help{font-size:13px;color:#617c8a;max-width:480px;margin:14px auto 0;line-height:1.6}

#page-timer{--remaining:1;position:absolute;z-index:6;right:20px;top:20px;width:58px;height:58px;border-radius:50%;background:conic-gradient(#fff calc(var(--remaining)*1turn),#ffffff38 0);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;font-variant-numeric:tabular-nums}#page-timer::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#163745d9;z-index:-1;box-shadow:0 2px 4px #0005}#timer-seconds{font-size:17px;font-weight:750;line-height:1.1}#page-timer small{font-size:10px;margin-top:3px}@media(max-width:760px){#page-timer{top:13px;right:13px;width:48px;height:48px}#timer-seconds{font-size:15px}#page-timer small{font-size:9px}}

/* Page turn: a short fade of the outgoing pictures. No 3D, filters or shadow animation, so weak tablets keep a steady frame rate. */
.fade-sheet{position:absolute;z-index:4;pointer-events:none;background:var(--paper);padding:var(--pad-y) var(--pad-x);border-radius:12px;will-change:opacity,transform}.fade-sheet .image-slot{width:100%;height:100%;aspect-ratio:auto}
.top-link{text-align:center;margin:10px 0 0;font-size:14px}.top-link a{color:var(--accent);text-underline-offset:3px}
/* Video-pause book: two stacked still players per paper; the standby layer is pre-seeked to the next page. */
.still-slot{position:relative;background:#263b50}.still-layer{position:absolute;inset:0;opacity:0;pointer-events:none}.still-layer.active{opacity:1;z-index:1}.still-layer.fading{z-index:2;will-change:opacity,transform}.still-layer iframe{width:100%;height:100%;border:0;display:block}
.player-frame #song{width:100%;height:100%;min-height:200px;border:0;display:block}
.reader-foot #mode{display:inline-flex;align-items:center;gap:6px;border:1px solid #bed0d9;border-radius:16px;background:#fffef9;padding:5px 11px;font-size:13px;color:var(--ink)}.reader-foot #mode #mode-icon{font-size:15px}.reader-foot:has(#mode){justify-content:space-between}

/* Video book layout: book, controls and shelf share one screen; the shelf takes the remaining height. */
.video-book .screen{display:flex;flex-direction:column;height:100svh;overflow:hidden}
.video-book .reader{flex:none;padding:10px clamp(8px,1.2vw,24px) 0;min-height:0}
.video-book .sketchbook{max-width:min(100%,calc((100svh - 300px) * .86));margin:0 auto}
.video-book .reader-controls{width:85%;margin:26px auto 18px;flex-wrap:nowrap;gap:10px}.video-book .reader-controls button{flex:1 1 0;min-width:0;min-height:58px;padding:12px 8px;font-size:16px;white-space:nowrap}.video-book #play-toggle{flex:1.5 1 0;min-height:62px;font-size:17px}
.video-book .reader-controls #mode{min-width:0;display:inline-flex;align-items:center;gap:6px;font-weight:600;background:#fffef9}
.video-book .music-shelf{flex:1;min-height:120px;display:flex;flex-direction:column;padding:0 16px 12px;max-width:none}
.video-book .shelf-heading{flex:none;margin:8px 0 4px}.video-book .shelf-heading:not(:has(#history-note:not(:empty))){display:none}.video-book .song-grid{margin-top:10px}.video-book .shelf-heading h2{font-size:16px}
.video-book .song-grid{flex:1;min-height:0;display:block;overflow:hidden;padding:2px 0 6px;touch-action:pan-y;user-select:none;-webkit-user-select:none}.song-track{display:flex;gap:12px;height:100%;width:max-content;will-change:transform;backface-visibility:hidden}@keyframes shelf-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--loop-width,0px)),0,0)}}
.video-book .song-card{flex:0 0 auto;height:60%;aspect-ratio:1/1;display:block;min-width:84px;max-width:240px;border:0;border-radius:0;overflow:visible;background:none;contain:layout paint;backface-visibility:hidden}.video-book .song-card[aria-current=true]{border:0;box-shadow:none;outline:3px solid #087b83;outline-offset:-3px;border-radius:12px}
.video-book .song-card img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#d6e5ea}
.video-book .song-card .song-name{min-height:0;flex:1;font-size:clamp(11px,1.6vh,14px);line-height:1.4;margin:6px 0 2px}
.video-book .song-card .song-meta{font-size:clamp(10px,1.3vh,12px);padding-bottom:6px}
/* Folded settings keep the original player at full size so YouTube playback is unaffected; it is clipped, not hidden. */
.admin-panel{border-top:1px solid #c9dce4;background:#dbeaf0;min-height:60svh;padding-bottom:40px}
.admin-content.collapsed{position:absolute;left:-200vw;top:0;width:100%;max-height:0;overflow:hidden;opacity:0;pointer-events:none}
.admin-panel .link-tools{margin:14px auto 18px;background:#e6f1f5}.admin-panel .original{border-top:1px solid #c9dce4}
.lock-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(90%,360px);margin:36px auto 0;padding:26px;background:#fffef9;border:1px solid #c9dce4;border-radius:18px;box-shadow:0 6px 24px #263b5020;color:var(--ink);font-size:17px;font-weight:700}.lock-card small{font-size:13px;font-weight:500;color:#587181}
#math-lock{border:0;border-radius:18px;padding:24px 26px;width:min(90vw,340px);box-shadow:0 12px 40px #263b5040;color:var(--ink)}#math-lock::backdrop{background:#263b5080}
#math-lock h2{font-size:16px;margin:0 0 12px;text-align:center}.math-question{font-size:36px;font-weight:800;text-align:center;margin:8px 0 14px;letter-spacing:.04em}
.math-input{display:block;width:100%;border:1px solid #b9cdd6;border-radius:12px;padding:12px;font-size:28px;text-align:center;background:#fffef9}
#math-feedback{min-height:20px;font-size:14px;color:#a3224c;margin:10px 0 0;text-align:center}#math-cancel{border:0;background:none;color:#587181;font-size:13px;padding:6px 0 0;width:100%}
/* Stills: the embed is 140% tall and centered, so the title bar and control strip fall outside the clipped 16:9 slot. */
/* Stills render at half size and are scaled up by the compositor: a quarter of the decode work, same crop. */
.still-slot{overflow:hidden;border-radius:10px;isolation:isolate}.still-layer iframe{position:absolute;top:50%;left:50%;width:50%;height:70%;transform:translate(-50%,-50%) scale(2);transform-origin:50% 50%;backface-visibility:hidden}
@media(max-width:760px){.video-book .reader-controls{width:92%;gap:6px;margin:18px auto 12px}.video-book .reader-controls button{padding:10px 4px;font-size:14px;min-height:50px}.video-book #play-toggle{font-size:15px;min-height:54px}.video-book .music-shelf{padding:0 10px 10px}}

/* Shelf cards: the cover is the open button; a corner ✕ appears only while settings are unlocked. */
.video-book .song-card{position:relative}.song-open{display:block;width:100%;height:100%;padding:0;border:0;background:none}
.card-remove{display:none;position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:50%;background:#263b50e0;color:white;font-size:14px;line-height:1;align-items:center;justify-content:center;box-shadow:0 1px 4px #0006}
body.admin-open .card-remove{display:flex}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;background:#263b50;color:white;font-size:14px;box-shadow:0 8px 28px #263b5060}
#toast-undo{border:0;background:none;color:#8fe3e9;font-weight:700;font-size:14px;padding:4px 2px;white-space:nowrap}
.video-book .song-grid::-webkit-scrollbar{display:none}
.still-cover{position:absolute;inset:0;z-index:3;background:transparent}

/* Keypad lock */
#math-lock{padding:0}.math-box{padding:22px 22px 16px}.math-answer{display:block;text-align:center;font-size:32px;font-weight:800;min-height:46px;margin:0 0 6px;color:var(--ink);font-variant-numeric:tabular-nums}.math-answer.empty{color:#9fb3bd}
.math-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.math-keys button{min-height:54px;font-size:24px;font-weight:700;border:1px solid #b9cdd6;border-radius:12px;background:#fffef9;color:var(--ink)}.math-keys button:active{background:#d2edef}
/* Phone remote */
.remote-page{background:#e6f1f5}.remote{max-width:560px;margin:0 auto;padding:16px 16px 40px}.remote-head h1{font-size:18px;margin:4px 0 2px}.link-state{margin:0 0 14px;font-size:13px;color:#587181}
.now{display:flex;gap:14px;align-items:center;background:#fffef9;border:1px solid #c9dce4;border-radius:16px;padding:12px}.now img{width:112px;height:63px;object-fit:cover;border-radius:10px;background:#d6e5ea;flex:none}.now-text{min-width:0}.now-text p{margin:0}#now-title{font-weight:700;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#now-state{font-size:13px;color:#587181;margin-top:4px}
.remote-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 22px}.remote-controls button{min-height:64px;border:1px solid #b9cdd6;border-radius:18px;background:#fff;font-size:17px;font-weight:700;color:var(--ink)}.remote-controls .r-big{grid-column:1/-1;min-height:84px;font-size:22px;background:#d52d62;color:#fff;border:0;box-shadow:0 4px 0 #aa234f}.remote-controls button:active{transform:translateY(1px)}
.remote-shelf h2{font-size:15px;margin:0 0 10px;color:#526b7c}.remote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.remote-card{padding:0;border:0;background:none;border-radius:12px;overflow:hidden;aspect-ratio:1/1}.remote-card img{width:100%;height:100%;object-fit:cover;display:block;background:#d6e5ea}.remote-card.current{outline:3px solid #087b83;outline-offset:-3px}
.remote-page:not(.unlocked) .remote{filter:blur(6px);pointer-events:none}

/* Touch shield: opaque enough to read, no blur so weak tablets stay smooth. */
#touch-shield{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:#e6f1f5e6;touch-action:none}#touch-shield[hidden]{display:none}
#touch-shield p{margin:0;padding:22px 34px;border-radius:24px;background:#fffef9;color:var(--ink);font-size:clamp(22px,4vw,34px);font-weight:800;box-shadow:0 10px 30px #263b5030;text-align:center}
#touch-shield.locked{background:#263b50e6;align-items:flex-start;padding-top:10vh}#touch-shield.locked p{background:#d52d62;color:#fff;font-size:clamp(18px,3vw,26px);padding:16px 26px}
.remote-controls .r-lock{grid-column:1/-1;background:#263b50;color:#fff;border:0}.remote-controls .r-lock.on{background:#d52d62}
/* The source player only needs to carry audio; a small frame keeps its decode cheap. */
.video-book .player-frame{width:256px;height:144px;min-height:144px}.video-book .player-frame iframe,.video-book .player-frame #song{min-height:144px}
.video-book #book{touch-action:none;cursor:default;-webkit-touch-callout:none}