*{box-sizing:border-box}html,body{margin:0;height:100%;background:#101013;color:#fff;font-family:Arial,Helvetica,sans-serif}button,select{font:inherit}button{cursor:pointer;border:1px solid #44444c;border-radius:8px;background:#232329;color:#fff;min-height:42px;padding:8px 13px}button:hover{background:#37373f}button:disabled{opacity:.3;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #ff38a5;outline-offset:3px}#reader{height:100vh;height:100dvh;min-height:340px;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#303039,#101013 80%)}header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px;background:#111115;border-bottom:1px solid #34343a}strong{font-size:15px;letter-spacing:.5px}strong span{color:#ec008c}small{display:block;font-size:10px;letter-spacing:2px;color:#bbb;margin-top:4px}.tools{display:flex;gap:6px}.tools button{font-size:13px}#stage{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:12px;overscroll-behavior:contain}#sheet{position:relative;width:min(100%,calc((100dvh - 145px)*.8));aspect-ratio:4/5;background:#000;box-shadow:0 12px 42px #0009;flex-shrink:0}#sheet img,#sheet video{width:100%;height:100%;display:block;object-fit:contain;background:#000}#sheet img{touch-action:pan-y}#sheet.enter{animation:arrive .2s ease-out}@keyframes arrive{from{opacity:.4;transform:translateX(var(--direction,12px))}to{opacity:1;transform:translateX(0)}}#reader.zoomed #stage{display:block}#reader.zoomed #sheet{width:max(100%,864px);margin:0 auto}footer{padding:9px 16px;background:#111115;display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid #34343a}footer button{font-size:23px;width:56px}footer>div{text-align:center;font-size:14px}select{background:#25252c;color:#fff;border:1px solid #666;border-radius:6px;padding:7px;max-width:210px}#kind{display:block;color:#bdbdc8;font-size:11px;margin-top:5px}dialog{background:#17171d;color:#fff;border:1px solid #555;border-radius:12px;width:min(940px,94vw);max-height:90dvh;padding:20px}dialog::backdrop{background:#000c}.dialog-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.dialog-head h2{font-size:20px;margin:0}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:14px}#grid button{padding:6px;text-align:left}#grid button[aria-current=true]{border:2px solid #ec008c}#grid img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;background:#000;margin-bottom:7px}#grid span{display:block;font-size:11px;margin-top:4px;color:#ccc}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.error{padding:20px;line-height:1.6}a{color:#ff71bb}@media(max-width:540px){header{padding:8px 10px}strong{font-size:12px}.tools button{padding:8px 10px}.tools span{display:none}#stage{padding:5px}footer{gap:14px;padding:8px}select{max-width:180px}#sheet{width:min(100%,calc((100dvh - 134px)*.8))}}@media(prefers-reduced-motion:reduce){#sheet.enter{animation:none}}
/* Responsive magazine spreads, October 2026 */
#sheet{display:flex;perspective:2200px;isolation:isolate;background:transparent;aspect-ratio:4/5}
#sheet.spread{width:min(100%,calc((100dvh - 145px)*1.6));aspect-ratio:8/5}
.mag-page{position:relative;width:100%;height:100%;min-width:0;background:#000;flex:1}
#sheet.spread>.mag-page:first-child::after{content:'';position:absolute;inset:0 0 0 auto;width:16px;background:linear-gradient(90deg,transparent,#0003);pointer-events:none}
#sheet.spread>.mag-page:nth-child(2)::after{content:'';position:absolute;inset:0 auto 0 0;width:16px;background:linear-gradient(90deg,#0003,transparent);pointer-events:none}
.turning-leaf{position:absolute;top:0;width:100%;height:100%;z-index:5;transform-style:preserve-3d;pointer-events:none}
#sheet.spread .turning-leaf{width:50%}
.turning-leaf.forward{right:0;transform-origin:left center}.turning-leaf.backward{left:0;transform-origin:right center}
.turning-leaf .mag-page{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 22px #0005}
.turning-leaf .leaf-back{transform:rotateY(180deg)}
.turning-leaf .mag-page::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 30%,#0001);pointer-events:none}
#reader.zoomed #sheet.spread{width:max(100%,1400px)}
.mag-page .error{position:absolute;inset:15% 5% auto;background:#19191deb;font-size:14px}
@media(max-width:799px){#sheet{width:min(100%,calc((100dvh - 145px)*.8))}}
@media(max-width:540px){#sheet{width:min(100%,calc((100dvh - 134px)*.8))}}
/* Paper edges and draggable upper corners */
#sheet{box-shadow:0 2px 0 #bdbbb5,0 4px 0 #f0ede6,0 6px 0 #aaa8a2,0 20px 48px #0008}
#sheet.spread>.mag-page:first-child::after{width:26px;background:linear-gradient(90deg,transparent,#0001 55%,#0004)}
#sheet.spread>.mag-page:nth-child(2)::after{width:26px;background:linear-gradient(90deg,#0004,#0001 45%,transparent)}
.page-corner{position:absolute;top:0;width:48px;height:48px;min-height:0;padding:0;border:0;border-radius:0;z-index:8;touch-action:none;background:transparent;cursor:grab;opacity:.7}
.page-corner.right{right:0}.page-corner.left{left:0}
.page-corner::before{content:'';position:absolute;inset:0;background:linear-gradient(225deg,#fff8 0%,#eee9 28%,#0003 30%,transparent 33%);transition:filter .15s}
.page-corner.left::before{transform:scaleX(-1)}
.page-corner:hover{background:transparent;opacity:1}.page-corner:hover::before{filter:brightness(1.3)}
.page-corner:focus-visible{outline:3px solid #ff38a5;outline-offset:-3px}
.dragging,.dragging *{cursor:grabbing!important;user-select:none}
.dragging .page-corner{opacity:0}
.drag-under{position:absolute;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.drag-under.right{right:0}.drag-under.left{left:0}#sheet.spread .drag-under{width:50%}
.turning-leaf .mag-page::after{background:linear-gradient(90deg,rgba(0,0,0,var(--paper-shade,.16)),transparent 38%,#fff1 75%,#0002)}
#reader.zoomed .page-corner{display:none}
@media(prefers-reduced-motion:reduce){.page-corner::before{transition:none}}

/* Explicit user-initiated playback with sound. Native controls remain available. */
.video-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;max-width:85%;padding:14px 20px;min-height:48px;border:1px solid #ffffff80;border-radius:28px;background:#14141aeb;color:#fff;box-shadow:0 4px 24px #0006;font-size:14px;line-height:1.4;text-align:center;cursor:pointer}
.video-start:hover{background:#303039}.video-start[hidden]{display:none}
.dragging .video-start{visibility:hidden}
@media(max-width:540px){.video-start{font-size:13px;padding:12px 16px}}
/* Transparent surround for embedding on Frankfurt-Tipp. */
html,body,#reader{background:transparent}
#stage{background:transparent}
header,footer{background:#f7f7f8;color:#202027;border-color:#dedee3}
header small,#kind{color:#60606b}
header button,footer button{background:#fff;color:#202027;border-color:#d4d4da}
header button:hover,footer button:hover{background:#eaeaf0}
footer select{background:#fff;color:#202027;border-color:#b8b8c0}
#sheet{box-shadow:0 2px 0 #d6d4cf,0 4px 0 #f0ede6,0 6px 0 #bfbdb7,0 10px 24px #0002}

/* Magazine-only embed: no toolbar, footer or surrounding panel. */
header,footer{display:none}
#reader{min-height:0;background:transparent}
#stage{padding:6px;background:transparent}
#sheet{width:min(100%,calc((100dvh - 12px)*.8))}
#sheet.spread{width:min(100%,calc((100dvh - 12px)*1.6))}

/* Align the magazine with the top of its iframe, including tall mobile embeds. */
#stage{align-items:start;align-content:start;justify-items:center;padding-top:0}
.page-arrow{position:absolute;top:45%;transform:translateY(-50%);z-index:9;width:44px;height:56px;min-height:44px;padding:0;border-radius:8px;border:1px solid #ffffffa6;background:#16161ded;color:#fff;font:42px/1 Arial,sans-serif;box-shadow:0 2px 8px #0005;touch-action:manipulation;cursor:pointer}
.page-arrow.left{left:6px}.page-arrow.right{right:6px}
.page-arrow:hover{background:#ec008c}.page-arrow:focus-visible{outline:3px solid #ec008c;outline-offset:2px}
.click-to-turn{cursor:pointer}
.dragging .page-arrow{visibility:hidden}
.video-start{inset:0 0 55px;left:0;top:0;transform:none;max-width:none;width:100%;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0;touch-action:pan-y}
.video-start:hover{background:transparent}
.video-start span{display:block;max-width:80%;padding:12px 18px;border:1px solid #ffffffa6;border-radius:24px;background:#14141aeb;color:#fff;box-shadow:0 4px 24px #0006;font-size:14px}
.video-start:hover span{background:#303039}
.video-start[hidden]{display:none}

@media(max-width:799px){#sheet video{touch-action:pan-y}.click-to-turn{cursor:default}}

.sound-toggle{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:4;max-width:80%;border:1px solid #ffffffa6;border-radius:22px;background:#14141aeb;color:#fff;font-size:13px;padding:10px 16px}.sound-toggle[hidden]{display:none}

/* Small visible arrows with a transparent 44px touch target. */
.page-arrow{width:44px;height:44px;min-height:44px;border:0;background:transparent;box-shadow:none;border-radius:0;font-size:0;color:transparent;display:flex;align-items:center;justify-content:center;padding:0}
.page-arrow.left{left:-10px}.page-arrow.right{right:-10px}
.page-arrow::before{display:flex;align-items:center;justify-content:center;width:26px;height:34px;border-radius:5px;border:1px solid #ffffff80;background:#16161dc9;color:#fff;box-shadow:0 1px 4px #0003;font:28px/1 Arial,sans-serif;content:'›';pointer-events:none}
.page-arrow.left::before{content:'‹'}
.page-arrow:hover{background:transparent}.page-arrow:hover::before{background:#b5006d}
@media(max-width:799px){.page-arrow::before{width:18px;height:26px;font-size:22px;border-radius:4px}.page-arrow.left{left:-12px}.page-arrow.right{right:-12px}}

/* Compact custom pause control; no native overlay obscuring magazine text. */
.video-pause{position:absolute;bottom:8px;right:8px;z-index:4;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:transparent;font-size:0;display:flex;align-items:center;justify-content:center}
.video-pause::before{content:'Ⅱ';display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#16161dc9;color:#fff;font:16px/1 Arial,sans-serif;border:1px solid #ffffff80}
.video-pause:hover{background:transparent}.video-pause:hover::before{background:#b5006d}.video-pause[hidden]{display:none}
.video-start{bottom:0}