*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:system-ui,-apple-system,'Microsoft JhengHei',sans-serif;color:#183946;background:#edf3f5}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #28a7e1;outline-offset:3px}#app{height:100vh;height:100dvh;min-height:500px;display:flex;flex-direction:column;overflow:hidden}header{padding:16px 20px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;flex:none}.brand{font-size:12px;font-weight:750;letter-spacing:1.5px;color:#148bbd}.brand span{color:#78929c;letter-spacing:1px;font-weight:400}h1{font-size:25px;line-height:1.25;margin:5px 0 0}h1 small{font-size:14px;font-weight:400;margin-left:10px;color:#617985}.live{color:white;background:#138ec0;border-radius:9px;padding:12px 16px;text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap}.live:hover{background:#0876a2}#viewport{position:relative;flex:1;min-height:210px;overflow:hidden;background:linear-gradient(#bacfd8,#e2eef1)}canvas{display:block;width:100%;height:100%;touch-action:none}.corner{pointer-events:none;position:absolute;z-index:2;top:14px;left:16px;display:flex;gap:8px;font-size:12px;color:#264a59;align-items:center}.tag{background:#ffffffc9;padding:5px 8px;border-radius:5px}.zooms{position:absolute;right:14px;bottom:18px;z-index:3;display:grid;gap:6px}.zooms button{width:42px;height:42px;background:#ffffffed;border:1px solid #d2e0e6;border-radius:8px;font-size:23px;color:#274c5d;cursor:pointer}#viewName{position:absolute;left:17px;bottom:15px;color:#214451;background:#ffffffdd;border-radius:6px;padding:6px 10px;font-size:12px;pointer-events:none}footer{flex:none;padding:12px 15px 11px;background:#fff;border-top:1px solid #d9e5e9}nav{display:flex;gap:7px;flex-wrap:wrap}nav button,nav a{font:inherit;font-size:14px;line-height:1.3;text-decoration:none;color:#365867;padding:10px 12px;border:1px solid #d6e2e6;border-radius:8px;background:white;cursor:pointer;min-height:40px}nav button:hover,nav a:hover{background:#edf6fa}nav button[aria-pressed=true]{background:#183f52;color:white;border-color:#183f52}.footnote{display:flex;justify-content:space-between;gap:4px 15px;flex-wrap:wrap;margin-top:10px;font-size:12px;line-height:1.5;color:#637b85}#labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;top:0;left:0;white-space:nowrap;font-size:12px;line-height:1.3;background:#fffffff0;color:#294b59;border-radius:5px;padding:5px 8px;box-shadow:0 2px 10px #0d324419;transform:translate(-50%,-100%)}#loading,#error{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:#e7f0f3;font-size:15px}#error{flex-direction:column;padding:25px;text-align:center}#error a{color:#138ec0}#error p{line-height:1.6}#error[hidden],#loading[hidden]{display:none}@media(max-width:560px){header{padding:12px 13px 10px}h1{font-size:22px}h1 small{display:block;font-size:12px;margin:4px 0 0}.brand{font-size:11px;letter-spacing:1px}.brand span{display:none}.live{padding:11px 12px}footer{padding:9px 10px}nav{gap:5px}nav button,nav a{font-size:13px;padding:9px 10px}.footnote{font-size:11px;margin-top:7px}.corner{left:12px;top:10px}.label{font-size:11px;padding:4px 6px}.zooms{right:10px;bottom:14px}}