*{box-sizing:border-box}body{margin:0;background:#f7f4ec;color:#263f36;font-family:'Microsoft YaHei',system-ui,sans-serif}header{max-width:1000px;margin:auto;padding:18px 16px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}.eyebrow{font-size:14px;color:#607266}h1{font-size:28px;margin:3px 0}button{font:inherit;font-size:17px;border:1px solid #a6b5a7;border-radius:12px;min-height:48px;padding:10px 14px;color:#263f36;background:#fffdf6;cursor:pointer}.primary,button[aria-pressed=true]{background:#315744;color:white}button:focus-visible{outline:3px solid #bd8843;outline-offset:2px}.toolbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:1000px;margin:0 auto;padding:0 16px 14px}.stage{position:relative;background:#e6e9e2;max-width:1000px;margin:auto;overflow:hidden}.viewport{height:53svh;min-height:370px;max-height:720px;position:relative}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.label{position:absolute;transform:translate(-50%,-50%);background:#fffff0e8;padding:4px 7px;border-radius:5px;font-size:14px;white-space:nowrap;pointer-events:none}.label small{display:none}.stamp{position:absolute;top:12px;left:14px;pointer-events:none;max-width:calc(100% - 28px);background:#f7f4ecee;border-radius:8px;padding:7px 11px}.stamp b{font-size:18px}.stamp span{display:block;font-size:14px;color:#617265;margin-top:3px}.subbar{max-width:1000px;margin:auto;display:flex;gap:7px;flex-wrap:wrap;padding:12px 16px}.subbar button{font-size:16px;flex:1;white-space:nowrap}.subbar span{width:100%;font-size:15px;color:#617265;text-align:center;margin-top:5px}.details,.video{max-width:1000px;margin:auto;padding:6px 18px 18px}h2{font-size:21px;line-height:1.5;margin:8px 0}p{font-size:17px;line-height:1.8;margin:0}footer{max-width:1000px;margin:auto;border-top:1px solid #d6ddcf;font-size:14px;line-height:1.8;padding:18px;color:#617265}video{display:block;width:100%;max-height:580px;background:#e6e9e2;border-radius:12px}.video p{font-size:14px;color:#617265}.loading{padding:80px 20px}.record header,.record .toolbar,.record .subbar,.record .details,.record .video,.record footer,.record .stamp{display:none}.record .viewport{width:720px;height:960px;min-height:0;max-height:none}.record .stage{width:720px;max-width:none}.record .label{display:none!important}@media(min-width:760px){.toolbar{grid-template-columns:repeat(6,1fr)}.viewport{height:65vh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}