*{box-sizing:border-box}body{margin:0;background:#128ac6;color:#073563;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}
.demo-toolbar{padding:12px 20px;background:#f4f8fa;color:#294c64;font:14px/1.6 "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;display:flex;gap:18px;align-items:center;flex-wrap:wrap;min-height:55px}.demo-toolbar button,.demo-toolbar select{border:1px solid #bed1dd;border-radius:6px;background:white;padding:5px 12px;color:#143d60}.demo-toolbar strong{font-weight:700}.viewport{position:relative;width:100%;overflow:hidden;margin:0 auto}.scene{position:absolute;left:0;top:0;transform-origin:0 0;background-size:100% 100%;background-repeat:no-repeat;isolation:isolate}.desktop-scene{width:1672px;height:941px;background-image:url('assets/desktop-ui-backdrop.png')}.mobile-scene{width:941px;height:1672px;background-image:url('assets/mobile-ui-backdrop.png')}
/* U01 shared transparent shell; U02 live message and nickname */
.message-bubble{position:absolute;width:316px;height:304.15px;margin:0}.bubble-shell{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bubble-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(25px)}.message-content{margin:0;width:270px;font-size:31px;line-height:1.36;font-weight:700;text-align:center;white-space:pre-line;overflow-wrap:anywhere;word-break:break-all}.message-content.long-line{font-size:28px;line-height:1.50}.message-content.live-message{white-space:normal}.message-divider{height:4px;width:86px;margin:13px 0 11px}.message-nickname{margin:0;max-width:242px;font-size:23px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center;font-weight:400}
/* U03 participation panel. QR stays a placeholder until the official URL exists. */
.qr-panel{position:absolute;left:24px;top:789px;width:520px;height:134px;color:#073563}.qr-panel-base{position:absolute;inset:0;width:100%;height:100%}.qr-placeholder{position:absolute;left:51px;top:813px;width:114px;height:98px;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#797d80;font-size:20px;line-height:1.38;text-align:center}.qr-panel .qr-placeholder{left:27px;top:18px}.qr-placeholder span{display:block}.qr-title{position:absolute;left:194px;top:18px;margin:0;font-size:43px;line-height:1.25;font-weight:700;letter-spacing:1px}.qr-description{position:absolute;left:194px;top:76px;margin:0;font-size:27px;line-height:1.3;white-space:nowrap}
/* U04 real mobile fields; all coordinates use the approved 941 × 1672 canvas. */
.mobile-form{position:absolute;inset:0;margin:0}.field-label{position:absolute;left:60px;margin:0;font-size:43px;line-height:1.25;font-weight:700;letter-spacing:1px}.nickname-label{top:453px}.optional{margin-left:18px;font-size:29px;font-weight:400;letter-spacing:0;color:#345d7d}.nickname-input{position:absolute;left:54px;top:518px;width:834px;height:105px;border:3.5px solid #60b9df;border-radius:28px;background:linear-gradient(130deg,#fffdf4,#fffbf0);padding:13px 35px;color:#173e6d;font-size:36px;line-height:1.4;outline:none}.nickname-input::placeholder,.message-input::placeholder{color:#6482a5;opacity:1}.nickname-input:focus,.message-box:focus-within{box-shadow:0 0 0 3px #ffffffa6}.nickname-hint{position:absolute;left:59px;top:635px;margin:0;font-size:29px;line-height:1.4;letter-spacing:.4px}.message-label{top:712px}.message-box{position:absolute;left:54px;top:782px;width:834px;height:317px;border:3.5px solid #60b9df;border-radius:28px;background:linear-gradient(130deg,#fffdf4,#fffbf0);overflow:hidden}.message-input{display:block;width:100%;height:100%;border:0;background:none;resize:none;padding:24px 35px 70px;color:#173e6d;font-size:36px;line-height:1.55;outline:none}.character-count{position:absolute;right:28px;bottom:17px;font-size:34px;color:#6482a5;line-height:1.2;pointer-events:none}.message-box.over-limit{border-color:#b84940}.over-limit .character-count{color:#aa302e}.form-status{position:absolute;left:62px;top:1104px;right:60px;min-height:24px;margin:0;font-size:20px;line-height:1.25;color:#a6332d}.form-status[data-kind=success]{color:#145b5c}.submit-button{position:absolute;left:45px;top:1133px;width:851px;height:122px;border:0;border-radius:62px;background:linear-gradient(110deg,#0e477e,#0c3e76);color:#fff;display:flex;align-items:center;justify-content:center;gap:22px;font-size:49px;font-weight:700;letter-spacing:3px;line-height:1.3}.submit-button:disabled{opacity:.74}.submit-button:focus-visible{outline:5px solid white;outline-offset:5px}.paper-plane{width:63px;height:63px;flex:none}.privacy-note{position:absolute;left:0;right:0;top:1275px;text-align:center;margin:0;font-size:29px;line-height:1.5;letter-spacing:.6px}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}