:root{color-scheme:light;--surface:#fff;--canvas:#f2f6fb;--ink:#20334b;--muted:#52677e;--line:#d3dfed;--soft:#eaf3ff;--brand:#6bb3ff;--accent:#2466ae;--accent-hover:#19518e;--danger:#a42d3b;--danger-soft:#fff0f2;--focus:#2466ae;font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink)}[hidden]{display:none!important}h1,h2,p{margin:0}h1{font-size:25px;line-height:1.35}h2{font-size:16px;line-height:1.4;font-weight:650}button,input{font:inherit;color:inherit;border-radius:0}button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);font-size:15px;font-weight:550;cursor:pointer;touch-action:manipulation;transition:background-color .15s,border-color .15s}button:hover{background:var(--soft);border-color:var(--brand)}button:active:not(:disabled){background:var(--line)}button:disabled{cursor:not-allowed;opacity:.45}button.primary{background:var(--brand);border-color:var(--brand);color:#122d4b}button.primary:hover{background:#8ec5ff}button.quiet{border-color:transparent;background:transparent}button.danger{color:var(--danger)}button.danger:hover{background:var(--danger-soft);border-color:var(--danger)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}input{display:block;width:100%;min-height:48px;padding:11px 14px;border:1px solid #8498b0;background:var(--surface);font-size:17px}input::placeholder{color:var(--muted)}label{display:block;margin-bottom:8px;font-weight:550}.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));background:var(--surface);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand img{object-fit:contain}.brand strong{font-size:22px;letter-spacing:.13em}.brand>span{border-left:1px solid var(--line);padding-left:16px;color:var(--muted);font-size:14px}.session-tools{display:flex;gap:16px;align-items:center}.connection{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.connection:before{content:"";width:7px;height:7px;background:var(--line)}.connection.online:before{background:var(--accent)}.eyebrow{display:block;color:var(--accent);font-size:12px;letter-spacing:.12em;font-weight:650;margin-bottom:10px}.helper{font-size:13px;line-height:1.65;color:var(--muted)}.login{max-width:480px;margin:8vh auto 40px;padding:32px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--brand)}.login-heading h1{font-size:30px;margin-bottom:14px}.login-heading p{color:var(--muted);font-size:15px;line-height:1.7}.login form{margin-top:32px}.login form .helper{margin-top:10px}.login form button{width:100%;margin-top:18px;justify-content:space-between}.error{color:var(--danger);font-size:14px;line-height:1.6;margin-top:10px;overflow-wrap:anywhere}.error:empty{display:none}.login-note{display:flex;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.65}.login-note svg{color:var(--accent);margin-top:2px}.workspace{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100dvh - 76px)}.rail{padding:28px 24px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:28px}.rail-heading h1{font-size:20px;overflow-wrap:anywhere}.rail-heading .helper{margin-top:10px;font-size:12px}.control-group{display:grid;gap:10px}.control-group h2{margin-bottom:2px}.control-group .helper{margin-bottom:4px}.control-group button{width:100%;justify-content:flex-start}.rail-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:20px}.rail-foot .helper{margin-top:10px}#scheduleNote{border-left:3px solid var(--brand);padding-left:10px}.viewer{min-width:0;display:flex;flex-direction:column;height:calc(100dvh - 76px);padding:24px 28px max(16px,env(safe-area-inset-bottom));gap:0}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;min-height:62px}.viewer-toolbar>div:first-child{display:flex;align-items:baseline;gap:12px}.view-status{font-size:13px;color:var(--muted)}.viewer-actions{display:flex;align-items:center;gap:12px}.frame-stats{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);white-space:nowrap}.icon-button{padding:10px;min-width:44px}.viewport{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;min-width:0;background:#e5edf6;border:1px solid var(--line);overflow:hidden}.viewport:fullscreen{background:#101e2f;border:0}.viewport canvas{display:block;flex:none;max-width:100%;max-height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}.viewport.controlling canvas{cursor:crosshair}.screen-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:#e5edf6f5;color:var(--muted)}.screen-overlay>svg{width:48px;height:48px;color:#6c89aa;stroke-width:1.4;margin-bottom:4px}.screen-overlay strong{font-size:19px;color:var(--ink);font-weight:550}.screen-overlay p{font-size:14px;max-width:420px;line-height:1.7;overflow-wrap:anywhere}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 0;font-size:12px;color:var(--muted)}.viewer-bottom span{white-space:nowrap}#inputStatus.active{color:var(--accent);font-weight:650}.action-error{color:var(--danger);background:var(--danger-soft);padding:12px 14px;border-left:3px solid var(--danger);font-size:14px;line-height:1.6;margin-top:12px;overflow-wrap:anywhere}.action-error:empty{display:none}
@media(max-width:1000px){.workspace{grid-template-columns:216px minmax(0,1fr)}.rail{padding:24px 18px}.viewer{padding:20px 18px 16px}.frame-stats{display:none}.viewer-toolbar>div:first-child{display:block}.view-status{display:block;font-size:12px}}
@media(max-width:640px){.topbar{padding:10px 16px;min-height:68px;gap:8px}.brand{gap:8px}.brand img{width:32px;height:32px}.brand strong{font-size:18px}.brand>span{display:none}.session-tools{gap:6px}.connection{font-size:12px}.quiet{padding:8px 10px}.login{margin:28px 16px;padding:24px;max-width:none}.workspace{display:flex;flex-direction:column;min-height:calc(100dvh - 68px)}.rail{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;border-right:0;border-bottom:1px solid var(--line)}.rail-heading{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.rail-heading h1{font-size:18px}.rail-heading .eyebrow{display:none}.rail-heading .helper{margin:0}.control-group{gap:8px;align-content:start}.control-group h2{font-size:14px}.control-group button{font-size:14px;padding:10px;gap:8px}.control-group p{font-size:12px;min-height:39px}.control-group #gameHint{grid-row:2}.rail-foot{display:none}.viewer{height:66dvh;min-height:420px;padding:16px}.viewer-toolbar{padding-bottom:12px;min-height:56px}.viewer-actions{gap:8px}.viewer-actions button{font-size:13px}.viewport{min-height:260px}.screen-overlay{padding:20px}.screen-overlay strong{font-size:17px}.screen-overlay p{font-size:13px}.viewer-bottom{gap:8px;font-size:11px;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}