@font-face{font-family:WenKai;src:url('/fonts/wenkai.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:HelpSans;src:url('/fonts/sans.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{font-family:HelpSans,'PingFang SC','Microsoft YaHei',sans-serif;color:#344650;background:#f7f2e9;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh}button,input{font:inherit}button{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #274f68;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}button:active{transform:translateY(2px)}
#app{min-height:100svh;display:grid;place-items:center;padding:24px 0 32px}.mirror{container-type:inline-size;position:relative;isolation:isolate;width:min(100%,470px);aspect-ratio:3/4;text-align:center;background:url('/assets/mirror.png') center/100% 100% no-repeat}.mirror.empty{background-image:url('/assets/mirror-empty.png')}
.brand{position:absolute;top:16%;left:18%;width:64%;margin:0;font-family:WenKai,serif;font-size:clamp(21px,5.6cqw,26px);line-height:1.4;letter-spacing:.16em}
h1{position:absolute;top:25%;left:12%;width:76%;margin:0;font-family:WenKai,serif;font-weight:400;font-size:clamp(29px,9.4cqw,44px);line-height:1.28;white-space:pre-line;text-wrap:balance}.lead{position:absolute;top:45%;left:12%;width:76%;margin:0;color:#53656e;font-size:clamp(17px,4.8cqw,21px);line-height:1.65;white-space:pre-line;text-wrap:balance}
.primary{position:absolute;top:64%;left:13%;width:74%;height:15%;min-height:64px;padding:4px 10px;border:0;border-radius:24px;background:transparent;color:#fff;font-size:clamp(23px,6.7cqw,30px);font-weight:600;line-height:1.25}.secondary{position:absolute;top:54%;left:20%;width:60%;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:#465c68;font-size:18px;text-decoration:underline;text-underline-offset:5px}
.has-secondary .lead{top:42%;font-size:clamp(16px,4.6cqw,20px)}.has-secondary h1{top:24%}.footnote{position:absolute;top:81.5%;width:72%;left:14%;margin:0;font-size:13px;color:#53656e;line-height:1.4}.manual h1{top:25%;font-size:clamp(28px,7.5cqw,35px)}.manual input{position:absolute;top:37%;left:16%;width:68%;height:44px;padding:8px 10px;border:1px solid #98a7ab;border-radius:8px;background:#fff;color:#344650;font-size:16px}.manual .lead{top:48%;font-size:17px}.manual .secondary{top:53%}
.live{width:min(100%,720px);min-height:810px;height:min(1100px,96svh);aspect-ratio:auto}.live .brand{top:14%;font-size:26px}.live-content{position:absolute;inset:20% 15% 22%;display:flex;flex-direction:column;gap:12px;min-height:0}.live-content .live-label{margin:0;font-size:20px;line-height:1.5;min-height:30px;color:#344650}.live-content .live-label::before{content:'';display:inline-block;width:8px;height:8px;margin:0 8px 2px 0;border-radius:50%;background:#557764}.video-wrap{flex:1;min-height:150px;overflow:auto;background:#e7e8e3;border:1px solid #bbc5c5;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative}video{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}.video-wrap.zoomed{display:block}.video-wrap.zoomed video{width:200%;height:200%;max-width:none;object-fit:contain}.live-tools{display:flex;gap:12px;justify-content:center}.live-tools button{min-height:48px;padding:8px 12px;font-size:17px;color:#344650;border:1px solid #a6b0b3;border-radius:12px;background:#fff9}.live .primary{top:auto;bottom:22%;height:9%;min-height:64px;left:16%;width:68%;background:#356d8d url('/assets/mirror.png') center 73%/180% 800%;border-radius:44% 44% 14px 14px / 20% 20% 14px 14px;font-size:24px}.live-content{bottom:35%}.play{position:absolute;inset:35% 10%;min-height:64px;border:0;border-radius:12px;background:#355f79;color:white;font-size:23px}.reconnecting .live-label::before{background:#a27b2d}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mirror:fullscreen{width:100vw;height:100svh;min-height:680px;max-width:none;background-color:#f7f2e9}.mirror:fullscreen .live-content{inset:19% 16% 30%}.mirror:fullscreen .brand{top:12%}
@media(max-width:500px){#app{padding:16px 0 24px}.live{height:860px;min-height:860px}.live .brand{font-size:24px}.live-content{left:14%;right:14%}.live-tools{gap:8px}.live-tools button{flex:1;padding:8px 4px;font-size:16px}.live .primary{left:17%;width:66%}}
@media(prefers-reduced-motion:no-preference){.mirror{animation:arrive .3s ease-out}@keyframes arrive{from{opacity:.6;translate:0 5px}to{opacity:1;translate:0 0}}}

body[data-state=receiving] .live-label::before{background:#89989b}.manual .lead{display:none}