:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;color-scheme:dark;--bg:#0b1224;--ink:#f1f5fb;--muted:#a7b4c9;--line:rgba(213,227,255,.2);--panel:rgba(14,24,43,.8);--accent:#dce9ff;--button-ink:#091324;--logo-filter:invert(1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{min-height:100dvh;background:var(--bg);color:var(--ink)}button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #8cbcff;outline-offset:3px}[hidden]{display:none!important}
body[data-theme=blueprint]{--bg:#12202a;--ink:#e7f2f2;--muted:#a8bdc3;--line:rgba(183,224,228,.25);--panel:rgba(18,34,43,.86);--accent:#c7e6e6;--button-ink:#10212a}
body[data-theme=black]{--bg:#090b0e;--ink:#f3f3f1;--muted:#a5a7aa;--line:rgba(250,250,250,.16);--panel:rgba(19,20,22,.9);--accent:#f1f1ed;--button-ink:#151515}
body[data-theme=paper]{color-scheme:light;--bg:#e9e4dc;--ink:#242725;--muted:#686d6a;--line:rgba(37,45,42,.23);--panel:rgba(247,244,237,.94);--accent:#293431;--button-ink:#fff;--logo-filter:none}
.background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 67% 42%,rgba(68,110,167,.19),transparent 31%),radial-gradient(circle at 19% 80%,rgba(68,84,145,.13),transparent 38%),var(--bg)}
.background-stars{position:absolute;inset:0;opacity:.68;background-image:radial-gradient(1px 1px at 12% 15%,#d6e8ff 99%,transparent),radial-gradient(1px 1px at 83% 13%,#c6d7ff 99%,transparent),radial-gradient(2px 2px at 66% 29%,#dbeaff 99%,transparent),radial-gradient(1px 1px at 47% 55%,#fff 99%,transparent),radial-gradient(1px 1px at 88% 68%,#b9d4ff 99%,transparent),radial-gradient(1px 1px at 24% 73%,#dbeaff 99%,transparent),radial-gradient(1px 1px at 77% 84%,#dbeaff 99%,transparent);background-size:347px 263px,311px 317px,389px 281px,433px 367px,281px 423px,491px 347px,367px 491px;animation:drift 34s linear infinite}
.background-grid{position:absolute;inset:-30%;opacity:.045;background-image:linear-gradient(to right,#d8e6ff 1px,transparent 1px),linear-gradient(to bottom,#d8e6ff 1px,transparent 1px);background-size:72px 72px;transform:rotate(-7deg)}
body[data-theme=blueprint] .background{background:radial-gradient(circle at 70% 22%,rgba(90,154,168,.1),transparent 45%),var(--bg)}body[data-theme=blueprint] .background-grid{opacity:.14;transform:none;background-size:48px 48px}body[data-theme=blueprint] .background-stars{opacity:0}
body[data-theme=black] .background{background:var(--bg)}body[data-theme=black] .background-stars,body[data-theme=black] .background-grid{opacity:0}
body[data-theme=paper] .background{background:radial-gradient(circle at 70% 40%,rgba(178,163,135,.16),transparent 45%),var(--bg)}body[data-theme=paper] .background-grid{opacity:.08;transform:none;background-image:linear-gradient(to right,#69736e 1px,transparent 1px),linear-gradient(to bottom,#69736e 1px,transparent 1px);background-size:96px 96px}body[data-theme=paper] .background-stars{opacity:0}
@keyframes drift{to{transform:translate3d(28px,-22px,0)}}@media(prefers-reduced-motion:reduce){.background-stars{animation:none!important}*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
.app{min-height:100dvh;max-width:1800px;margin:auto;display:flex;flex-direction:column;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.topbar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:14px;white-space:nowrap}.brand img{width:140px;height:auto;filter:var(--logo-filter)}.brand-divider{height:24px;width:1px;background:var(--line)}.top-actions,.viewer-tools{display:flex;align-items:center;gap:8px}.quiet-button,.theme-picker,.back-button{border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--ink);border-radius:999px;min-height:42px;padding:0 17px;font-size:14px}.quiet-button:hover,.back-button:hover{background:rgba(196,216,255,.11)}.theme-picker{display:flex;align-items:center;gap:10px;color:var(--muted)}.theme-picker select,.camera-options select{border:0;background:transparent;color:var(--ink);outline:none;min-height:40px;cursor:pointer}.theme-picker option,.camera-options option{background:var(--bg);color:var(--ink)}.primary-button{border:1px solid transparent;background:var(--accent);color:var(--button-ink);border-radius:999px;min-height:54px;padding:0 26px;font-size:16px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:26px;box-shadow:0 10px 35px rgba(2,8,21,.15)}.primary-button:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary-button.small{min-height:42px;padding:0 18px;font-size:14px;gap:8px}
main{flex:1;display:flex;min-height:0}.cover-view{position:relative;flex:1;min-height:620px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:min(8vw,120px);padding:48px clamp(0px,4vw,70px)}.cover-art{width:min(39vw,560px);aspect-ratio:1;position:relative;display:grid;place-items:center;margin:auto;filter:drop-shadow(0 20px 50px rgba(5,14,35,.42))}.cover-art:before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(177,214,255,.15) 0,rgba(78,128,201,.1) 32%,transparent 67%);filter:blur(8px)}.cover-orbit{position:absolute;border:1px solid rgba(190,217,255,.38);border-radius:50%;transform:rotate(-23deg);box-shadow:0 0 24px rgba(169,205,255,.1)}.orbit-one{inset:12% 2%}.orbit-two{inset:26% -4%;transform:rotate(34deg);opacity:.46}.cover-core{width:40%;height:40%;border-radius:50%;background:radial-gradient(circle at 35% 32%,rgba(241,248,255,.9),rgba(135,173,224,.34) 28%,rgba(53,81,131,.18) 51%,transparent 70%);box-shadow:0 0 65px rgba(112,157,219,.18)}.cover-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}.cover-art:has(img:not([hidden])) .cover-orbit,.cover-art:has(img:not([hidden])) .cover-core{opacity:0}.cover-copy{max-width:640px}.eyebrow{display:block;font-size:13px;letter-spacing:.32em;color:var(--muted);margin-bottom:34px}.cover-copy h1{font-size:clamp(48px,5.1vw,84px);line-height:1.14;letter-spacing:-.045em;font-weight:530;margin:0 0 26px}.cover-copy p{font-size:16px;line-height:1.8;color:var(--muted);max-width:410px;margin:0 0 44px}.cover-buttons{display:flex;align-items:center;gap:22px}.cover-count{color:var(--muted);font-size:14px}.cover-index{position:absolute;left:4vw;bottom:30px;color:var(--muted);font-size:13px;letter-spacing:.08em}.cover-index span{margin-left:20px;letter-spacing:0}
body[data-theme=paper] .cover-orbit{border-color:rgba(55,72,75,.45)}body[data-theme=paper] .cover-core{background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.9),rgba(139,160,162,.35) 28%,rgba(72,104,111,.1) 55%,transparent 70%)}
.viewer-view{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:12px}.viewer-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:50px}.back-button{justify-self:start;display:flex;align-items:center;gap:8px;padding:0 16px}.viewer-title{font-size:15px;letter-spacing:.05em}.page-count{justify-self:end;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.image-stage{position:relative;flex:1;min-height:360px;display:flex;align-items:center;justify-content:center;padding:22px 72px}.image-viewport{position:relative;width:min(100%,1250px);height:100%;max-height:calc(100dvh - 230px);min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.52);box-shadow:0 24px 70px rgba(1,6,16,.35);touch-action:none;user-select:none}.image-viewport img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;will-change:transform;transition:opacity .18s ease;pointer-events:none}.image-viewport img.is-changing{opacity:.25}.slide-caption{position:absolute;left:18px;bottom:16px;background:rgba(7,13,20,.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.13);color:#edf2fa;padding:8px 11px;border-radius:5px;font-size:13px;pointer-events:none}.nav-button{position:absolute;top:50%;transform:translateY(-50%);height:58px;width:44px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;font-size:34px;line-height:1;display:grid;place-items:center}.nav-button:hover{background:rgba(139,171,218,.22)}.nav-button.prev{left:14px}.nav-button.next{right:14px}.zoom-badge{position:absolute;right:84px;top:34px;padding:8px 11px;border-radius:5px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}.viewer-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:100px;border-top:1px solid var(--line)}.thumbnails{display:flex;align-items:center;gap:9px;overflow:auto;max-width:65vw;padding:8px 2px}.thumb{width:68px;height:50px;flex:none;border:2px solid transparent;border-radius:4px;padding:0;background:rgba(255,255,255,.05);overflow:hidden;opacity:.52}.thumb.active{border-color:var(--ink);opacity:1}.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.camera-panel{position:fixed;z-index:10;right:max(26px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 40px));padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(24px);box-shadow:0 20px 65px rgba(0,0,0,.35)}.camera-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.camera-head div{display:flex;flex-direction:column;gap:3px}.camera-head strong{font-size:16px}.camera-head span{font-size:13px;color:var(--muted)}.icon-button{width:28px;height:28px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1}.camera-frame{position:relative;height:158px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#060b11}.camera-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-frame.rear video{transform:none}.camera-guide{position:absolute;inset:14% 25%;border:1px dashed rgba(255,255,255,.33);border-radius:60%}.hand-indicator{position:absolute;bottom:7px;left:8px;padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.65);color:#fff;font-size:12px}.camera-options{display:grid;gap:9px;margin:14px 0 10px;font-size:14px}.camera-options label{display:flex;align-items:center;justify-content:space-between;gap:12px}.camera-options select{padding:0 6px}.camera-options input{accent-color:#a5caff;width:18px;height:18px}.camera-hint{color:var(--muted);font-size:13px;line-height:1.7;margin:8px 0 14px}.camera-actions{display:flex;gap:8px}.camera-actions .primary-button{flex:1}.gesture-toast{position:fixed;z-index:20;left:50%;bottom:max(125px,env(safe-area-inset-bottom) + 100px);transform:translate(-50%,10px);opacity:0;pointer-events:none;background:rgba(233,243,255,.95);color:#0b1626;padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .22s ease,transform .22s ease;white-space:nowrap}.gesture-toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.topbar{align-items:flex-start}.brand{gap:10px}.brand img{width:110px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.cover-view{grid-template-columns:1fr 1fr;gap:24px;padding:30px 10px}.cover-art{width:min(38vw,400px)}.cover-copy h1{font-size:clamp(38px,5vw,64px)}.image-stage{padding:10px 54px}.image-viewport{max-height:calc(100dvh - 215px)}.nav-button.prev{left:0}.nav-button.next{right:0}.zoom-badge{right:64px;top:20px}}
@media(max-width:650px),(orientation:portrait){.app{padding:16px}.topbar{min-height:55px}.brand-divider,.brand>span:last-child{display:none}.top-actions .quiet-button{display:none}.cover-view{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:calc(100dvh - 75px);padding:18px 8px 70px;gap:8px}.cover-art{width:min(64vw,330px);height:auto}.cover-copy h1{font-size:clamp(43px,11vw,66px)}.cover-copy p{margin-bottom:25px}.eyebrow{margin-bottom:14px}.cover-index{left:8px;bottom:18px}.viewer-head{grid-template-columns:1fr auto}.viewer-title{display:none}.image-stage{min-height:300px;padding:10px 0}.image-viewport{min-height:260px;max-height:calc(100dvh - 225px)}.nav-button{height:48px;width:34px;z-index:2}.nav-button.prev{left:6px}.nav-button.next{right:6px}.zoom-badge{right:13px;top:20px}.viewer-foot{min-height:90px}.thumbnails{max-width:55vw}.viewer-tools{gap:4px}.viewer-tools .quiet-button{display:none}.viewer-tools .primary-button{padding:0 11px;font-size:12px}.slide-caption{font-size:12px}}
.cover-logo{display:block;width:min(280px,60vw);height:auto;filter:var(--logo-filter);margin:0 0 20px}
.offline-status{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 9px;letter-spacing:0;white-space:nowrap}
.offline-status.ready{color:#b7d8bf;border-color:rgba(183,216,191,.45)}
@media(max-width:1100px){.offline-status{display:none}}