:root{--app-height:100vh;--visual-height:100vh;--visual-top:0px;--ink:#26352b;--gold:#f5dc94}
@supports(height:100dvh){:root{--app-height:100dvh;--visual-height:100dvh}}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#eceee8;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:#fff}html{overflow:hidden}body{display:flex;justify-content:center;align-items:center;gap:clamp(35px,7vw,110px);height:var(--app-height);overflow:hidden;-webkit-text-size-adjust:100%}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #d4af52;outline-offset:3px}button:active,a:active{filter:brightness(.9)}[hidden]{display:none!important}svg{display:block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.desktop-info{color:#354b3c;max-width:340px}.overline{font-size:10px;letter-spacing:4px;color:#838e7c}.desktop-info h1{font-size:42px;line-height:1.5;letter-spacing:-1px;font-weight:500;margin:25px 0}.desktop-info p{font-size:14px;color:#758370;line-height:2}.instruction{display:block;font-size:11px;color:#82917d;border-top:1px solid #d5dccf;padding-top:24px;margin-top:42px}#demo-note{font-size:11px;color:#888574;margin-top:24px}
#viewer{position:relative;width:405px;height:min(840px,calc(var(--app-height) - 40px));min-width:0;min-height:0;overflow:hidden;background:#151715;border-radius:26px;border:1px solid #ffffff35;box-shadow:0 30px 80px #23372530;isolation:isolate}#stage{position:absolute;inset:0;touch-action:pan-x pinch-zoom;background:#151715;overflow:hidden}html.is-zoomed #stage{touch-action:auto}#player{height:100%;width:100%;object-fit:contain;display:block}#viewer.is-changing #player,#viewer.is-changing #poster-demo{animation:clip-in .24s ease-out}#poster-demo{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 35%,#abb19a,#536b58 65%,#263d2e);overflow:hidden}#poster-demo:before{content:'';position:absolute;inset:13% 14% 29%;background:#ece6d4;transform:rotate(-7deg);box-shadow:10px 30px 45px #0003;border-radius:3px}#poster-demo .editorial{position:absolute;top:21%;left:18%;right:18%;transform:rotate(-7deg);color:#374837;border-top:1px solid #829174;border-bottom:1px solid #829174;padding:25px 0;font-family:serif}#poster-demo .editorial small{font:9px sans-serif;letter-spacing:3px}#poster-demo .editorial h2{font-size:35px;line-height:1.6;font-weight:400;margin:20px 0 12px;white-space:pre-line}#poster-demo .editorial p{font:10px/2 sans-serif;letter-spacing:2px;white-space:pre-line}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0007,transparent 22%,transparent 50%,#0004 65%,#000b 85%,#000d)}
.topbar{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;align-items:center;gap:10px;height:44px;min-width:0}.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#17201938;color:inherit;padding:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}#brand{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px #0005}#sound{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;color:#fff;background:#17201952;min-height:40px;border-radius:22px;padding:0 12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}#sound svg{width:18px;height:18px}#sound-label{font-size:11px;white-space:nowrap}#sound .sound-on{display:none}#sound[aria-pressed=true]{background:#f6eddc;color:#343b30}#sound[aria-pressed=true] .sound-off{display:none}#sound[aria-pressed=true] .sound-on{display:block}#play{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:76px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:18px;background:#0002;color:#fff;opacity:0;transition:opacity .18s;pointer-events:none}#play svg{width:40px;height:40px;fill:currentColor;stroke:none;filter:drop-shadow(0 2px 8px #0003)}#play span{font-size:11px;white-space:nowrap}#viewer.paused #play{opacity:1;pointer-events:auto}#viewer.sheet-open #play{opacity:0;pointer-events:none}.pager{position:absolute;right:12px;top:44%;display:flex;flex-direction:column;gap:8px}.pager button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #ffffff25;border-radius:50%;background:#17201935;color:#fff;opacity:.65}.pager button:hover{opacity:1}
.caption{position:absolute;bottom:0;left:16px;right:16px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));min-width:0;pointer-events:none}.caption button,.caption a,.caption #quick-questions{pointer-events:auto}.story-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:10px;letter-spacing:.5px;color:#ffffffa8}#counter{font-variant-numeric:tabular-nums;padding-left:8px;border-left:1px solid #ffffff40}#creator{font-size:17px;line-height:1.45;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px #0005}.description{display:flex;align-items:center;gap:12px;margin:3px 0 9px;min-width:0}.description>span{font-size:12px;color:#ffffffe0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;min-width:0}.description a{font-size:11px;color:#ffffffe0;min-height:32px;display:flex;align-items:center;gap:4px;flex-shrink:0}.description a span{font-size:19px;line-height:1}#quick-questions{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:12px;touch-action:pan-x pinch-zoom}#quick-questions::-webkit-scrollbar{display:none}#quick-questions:empty{display:none}#quick-questions button{color:#ffffffe8;background:#ffffff12;border:1px solid #ffffff2a;min-height:32px;padding:5px 11px;border-radius:18px;font-size:11px;white-space:nowrap;max-width:85%;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.action-bar{display:flex;align-items:center;gap:9px;min-width:0}.action-bar .ask{display:flex;align-items:center;justify-content:center;gap:6px;background:#ffffff17;border:1px solid #ffffff2b;border-radius:12px;color:#fff;font-size:12px;padding:0 12px;height:46px;white-space:nowrap;flex-shrink:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.ask svg{width:19px;height:19px}.action-bar #buy{border:1px solid #ffffff40;border-radius:12px;background:#ffffff17;color:#fff;font-size:12px;height:46px;padding:0 12px;white-space:nowrap}.action-bar #contact{flex:1;min-width:0;background:var(--gold);border-radius:12px;color:#3b3321;font-size:14px;font-weight:600;height:46px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-shadow:0 3px 12px #0001}.action-bar #contact svg{width:15px;height:15px;opacity:.7}#swipe-hint{text-align:center;color:#fff8;font-size:10px;margin-top:9px;line-height:16px}#progress{position:absolute;bottom:0;left:0;right:0;display:flex;gap:3px;pointer-events:none}#progress span{height:2px;flex:1;background:#fff2}#progress span.active{background:#dce5c4}#toast{position:absolute;z-index:9;top:calc(68px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:#202d26eb;color:#fff;padding:10px 16px;border-radius:20px;font-size:12px;max-width:calc(100% - 32px);text-align:center;opacity:0;transition:opacity .18s;pointer-events:none}#toast.show{opacity:1}#media-state{position:absolute;top:calc(65px + env(safe-area-inset-top,0px));left:18px;right:18px;text-align:center;font-size:11px;color:#ffffffb3;pointer-events:none;text-shadow:0 1px 3px #0008}
@keyframes sheet-in{from{transform:translateY(24px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes clip-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px),(max-width:1000px) and (max-height:440px){body{display:block;background:#151715}#viewer{width:100%;max-width:520px;height:var(--app-height);margin:0 auto;border:0;border-radius:0;box-shadow:none}.desktop-info{display:none}.pager{display:none}#overlay{position:fixed;top:var(--visual-top);bottom:auto;left:0;right:0;width:100%;max-width:520px;height:var(--visual-height);margin:0 auto}.sheet{max-height:680px;height:80%}html.keyboard-open .sheet{height:100%;max-height:100%;border-radius:18px 18px 0 0;padding-bottom:5px}html.keyboard-open .handle{margin-bottom:7px}html.keyboard-open .sheet-header{padding-bottom:8px}html.keyboard-open #chat-contact{display:none}html.keyboard-open #privacy{margin-top:3px;font-size:9px}}
@media(max-height:600px){.caption{left:14px;right:14px}.story-meta{display:none}.description{margin-bottom:5px}#creator{font-size:15px}#quick-questions{margin-bottom:8px}#swipe-hint{margin-top:5px;font-size:9px}.sheet{height:88%;max-height:100%}.sheet-header{padding-bottom:8px}.handle{margin-bottom:9px}#sheet-body{padding-top:12px}}
@media(max-height:440px) and (orientation:landscape){#viewer{max-width:none}.topbar{right:18px;left:18px;top:4px}.caption{left:18px;right:18px;padding-bottom:5px}#creator,#quick-questions,.story-meta{display:none}.description{margin-bottom:3px;max-width:65%}.action-bar{max-width:480px}.action-bar .ask,.action-bar #buy,.action-bar #contact{height:40px}#swipe-hint{display:none}#overlay{max-width:520px}.sheet{height:100%;border-radius:18px 18px 0 0}.handle{display:none}.sheet-header{padding-bottom:6px}#chat-contact{min-height:32px}#chat-advisor{min-height:32px}#privacy{margin-top:2px}}
@media(max-width:350px){.topbar{gap:8px;left:10px;right:10px}#sound{padding:0 10px}#sound-label{font-size:10px}#brand{font-size:13px}.caption{left:12px;right:12px}.action-bar{gap:7px}.action-bar .ask{padding:0 10px}.action-bar #buy{padding:0 9px}.action-bar #contact{font-size:12px;gap:4px}#chat-contact{font-size:10px}.sheet-header small{font-size:10px}}
.back-chat{display:block;background:none;color:#617d50;padding:0 0 18px;font-size:14px;min-height:40px}
@media(max-height:440px) and (orientation:landscape){.topbar,.caption{left:calc(18px + env(safe-area-inset-left,0px));right:calc(18px + env(safe-area-inset-right,0px))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#sound{width:40px;padding:0;background:#17201952;color:#fff}#sound[aria-pressed=true]{background:#17201952;color:#fff}#sound svg{width:20px;height:20px}#sound-hint{position:absolute;top:calc(60px + env(safe-area-inset-top,0px));right:14px;z-index:3;background:#f6e4b4;color:#534728;border:1px solid #fff4;border-radius:18px;padding:8px 13px;font-size:12px;line-height:1.5;box-shadow:0 3px 16px #0002}#sound-hint:before{content:"";position:absolute;right:13px;top:-4px;width:8px;height:8px;transform:rotate(45deg);background:inherit}#viewer.sheet-open #sound-hint{display:none}
