:root{--paper:#f7f3ea;--ink:#2b0a3d;--muted:#746c78;--glass:rgba(255,253,248,.82);--line:rgba(43,10,61,.12);--gold:#b98a2f;--purple:#743481;--shadow:rgba(43,10,61,.13)}
*{box-sizing:border-box}html,body{width:100%;margin:0}html{scroll-behavior:auto}body{min-height:260vh;overflow-x:hidden;background:var(--paper);color:var(--ink);font:14px/1.35 ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif}main{position:fixed;inset:0;width:100%;height:100vh;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scroll-space{height:260vh;pointer-events:none}
.brand{position:fixed;z-index:5;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:11px}.brand img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 9px rgba(43,10,61,.14))}.brand div{display:flex;flex-direction:column}.brand strong{font:700 18px/1 Georgia,serif;letter-spacing:3px}.brand span{margin-top:4px;color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
#qrSource{--size:min(430px,61vh,70vw);position:absolute;z-index:2;left:50%;top:44%;width:var(--size);height:var(--size);object-fit:contain;transform:translate(-50%,-50%) scale(1);opacity:1;filter:drop-shadow(0 15px 35px rgba(43,10,61,.06));pointer-events:none;will-change:opacity,transform}
.panel{position:absolute;z-index:4;left:50%;bottom:max(22px,env(safe-area-inset-bottom));width:min(660px,calc(100% - 28px));transform:translateX(-50%);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:14px 17px 14px 20px;border:1px solid var(--line);border-radius:20px;background:var(--glass);box-shadow:0 12px 42px var(--shadow);backdrop-filter:blur(22px) saturate(130%)}.copy{display:flex;flex-direction:column;min-width:0}.copy .eyebrow{color:var(--gold);font-size:10px;font-weight:750;letter-spacing:2.2px}.copy strong{margin-top:3px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy #status{margin-top:3px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scroll-cue{display:grid;grid-template-columns:auto 92px 35px;gap:9px;align-items:center;height:48px;padding:0 14px;border-radius:14px;background:linear-gradient(125deg,#660874,#8e44ad);color:#fff;box-shadow:0 7px 20px rgba(116,52,129,.28)}.scroll-cue>span{font-size:9px;font-weight:800;letter-spacing:1.5px}.scroll-cue b{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}.meter{width:92px;height:4px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}.meter i{display:block;width:100%;height:100%;border-radius:inherit;background:#f0d27e;transform:scaleX(0);transform-origin:left center;will-change:transform}
@media(max-width:620px){.brand img{width:44px;height:44px}.brand strong{font-size:15px}.brand span{font-size:9px}.panel{grid-template-columns:1fr;padding:13px;gap:10px}.copy{text-align:center}.scroll-cue{grid-template-columns:auto 1fr 34px;width:100%}.meter{width:100%}#qrSource{--size:min(370px,53vh,82vw);top:40%}}
.embed{height:100vh;min-height:0;overflow:hidden;background:#fff}.embed main{position:absolute}.embed .brand,.embed .panel{display:none}.embed #qrSource{top:44%;filter:none}
.qr-follow{position:absolute;z-index:3;left:0;right:0;top:calc(44% + min(430px,61vh,70vw)/2 + 12px);margin:0;text-align:center;color:#8f8a96;font:13px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.5px;white-space:nowrap}
@media(max-width:620px){.embed #qrSource{top:44%}.qr-follow{top:calc(44% + min(370px,53vh,82vw)/2 + 10px);font-size:12px}}