:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI",sans-serif;color-scheme:light;--bg:#f2f2f7;--panel:#ffffffb8;--card:#fff;--inset:#efeff4;--ink:#1c1c1e;--sub:#63636d;--blue:#0068da;--tint:#e3efff;--line:#3c3c431f;--shadow:0 18px 60px #2936500b;--overlay:#10121a55;--ease:cubic-bezier(.22,1,.36,1);color:var(--ink);background:var(--bg)}
:root[data-theme=dark]{color-scheme:dark;--bg:#0f0f12;--panel:#1c1c1ed9;--card:#242427;--inset:#343438;--ink:#f5f5f7;--sub:#b6b6bf;--blue:#77baff;--tint:#163655;--line:#ffffff1c;--shadow:0 18px 60px #0003;--overlay:#0008}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0f0f12;--panel:#1c1c1ed9;--card:#242427;--inset:#343438;--ink:#f5f5f7;--sub:#b6b6bf;--blue:#77baff;--tint:#163655;--line:#ffffff1c;--shadow:0 18px 60px #0003;--overlay:#0008}}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100dvh;padding:24px;background:var(--bg);transition:background-color 220ms,color 220ms}button,input{font:inherit}button{color:inherit;border:0;cursor:pointer;min-height:44px;transition:transform 180ms var(--ease),background-color 180ms,opacity 180ms;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:active:not(:disabled){transform:scale(.97);transition-duration:90ms}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}svg{display:block;width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.shell{height:calc(100dvh - 48px);min-height:560px;max-width:1440px;margin:auto;border-radius:28px;background:var(--panel);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:19px;letter-spacing:-.03em}.brand img{border-radius:9px}.icon-button{display:grid;place-items:center;border-radius:50%;width:44px;padding:10px;background:var(--inset);color:var(--blue)}.welcome{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 24px 38px;scrollbar-gutter:stable}.intro{text-align:center;animation:enter 360ms var(--ease) both}.device-symbol{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;background:var(--tint);color:var(--blue);border-radius:20px}.device-symbol svg{width:32px;height:32px}h1{font-size:36px;line-height:1.2;font-weight:700;letter-spacing:-.04em;margin:0}h2{font-size:21px;line-height:1.3;margin:0;letter-spacing:-.025em}h3{font-size:15px;line-height:1.5;margin:0 0 12px;font-weight:600}.intro>p{font-size:15px;color:var(--sub);margin:14px 0 26px}.connection-card{background:var(--card);width:min(100%,400px);padding:24px;border-radius:24px;box-shadow:0 3px 22px #15293d06;animation:enter 380ms 50ms var(--ease) both}.connection-card>label{display:block;font-size:14px;font-weight:600;margin:0 0 12px}.code-field{background:var(--inset);border-radius:16px;padding:10px 16px 13px;text-align:center;transition:background-color 180ms}#code{color:var(--ink);background:transparent;font-size:40px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-align:center;border:0;display:block;width:100%;padding:2px 0;min-width:0}#code::placeholder{color:var(--sub);opacity:.45}.code-caption{font-size:11px;color:var(--sub)}.destination{display:flex;align-items:center;gap:10px;padding:12px 0;color:var(--sub);min-height:68px}.destination>svg{width:18px;height:18px}.destination output{font-size:13px;flex:1;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.destination .icon-button{background:transparent}.primary{background:#007aff;color:#fff;border-radius:14px;padding:12px 18px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px}.primary svg{width:18px;height:18px}#connect{width:100%;justify-content:space-between;padding:14px 18px}.secondary{background:var(--inset);color:var(--blue);border-radius:14px;font-weight:600;padding:12px 18px}.full{width:100%}.quiet{color:var(--sub);font-size:12px;line-height:1.65;margin:15px 0 0}#hint{text-align:center}#error{color:#c42724;font-size:13px;margin:0 0 12px;line-height:1.5}#error:empty{display:none}.welcome footer{width:min(100%,400px);display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;font-size:12px;color:var(--sub);animation:enter 380ms 90ms var(--ease) both}.welcome footer>span{display:flex;align-items:center;gap:7px}.welcome footer svg{width:16px;height:16px}.text-button{background:transparent;color:var(--blue);padding:8px 4px;display:inline-flex;align-items:center;gap:7px;font-size:13px;border-radius:8px}
dialog{padding:0;border:0;border-radius:24px;width:min(460px,calc(100% - 36px));max-height:calc(100dvh - 60px);color:var(--ink);background:var(--card);box-shadow:0 24px 100px #0003;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade 200ms ease-out}.sheet-head{padding:20px 22px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.sheet-head .icon-button{width:32px;min-height:32px;padding:7px;color:var(--sub)}.sheet-head svg{width:18px;height:18px}.sheet-body{padding:0 22px 24px}.settings-group{background:var(--inset);border-radius:16px;padding:16px;margin-bottom:14px}.settings-group p,.sheet-body>p,.help-content p{font-size:13px;line-height:1.7;color:var(--sub)}.settings-group p{margin:12px 0 0}.segments{display:flex;padding:3px;gap:3px;background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:11px}.segments button{flex:1;min-width:0;min-height:38px;background:transparent;color:var(--sub);border-radius:8px;font-size:14px}.segments button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 2px 4px #0001}.advanced{padding:0}.disclosure{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:transparent;font-size:14px;font-weight:600;border-radius:16px}.disclosure svg{width:17px;height:17px;color:var(--sub);transition:transform 220ms var(--ease)}.disclosure[aria-expanded=true] svg{transform:rotate(90deg)}.collapse{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 260ms var(--ease),opacity 200ms}.collapse.expanded{grid-template-rows:1fr;opacity:1}.collapse>div{min-height:0;overflow:hidden}.setting-row{display:flex;align-items:center;gap:12px;width:100%;padding:16px;background:transparent;text-align:left;color:var(--blue);border-top:1px solid var(--line);border-radius:0 0 16px 16px}.setting-row>span{flex:1;font-size:14px}.setting-row small{display:block;font-size:11px;color:var(--sub);line-height:1.5;margin-top:4px}.setting-row>svg:last-child{width:15px;height:15px}.help-content section{display:flex;gap:14px;margin:4px 0 20px}.help-content h3{margin:0 0 5px}.help-content p{margin:0}.step{background:var(--tint);color:var(--blue);width:28px;height:28px;display:grid;place-items:center;font-size:13px;font-weight:600;border-radius:50%;flex-shrink:0}.help-content>.quiet{margin:8px 0 20px}.warning-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--tint);color:var(--blue);margin:4px 0 16px}.warning-symbol svg{width:26px;height:26px}.address{display:block;overflow-wrap:anywhere;padding:14px;background:var(--inset);border-radius:12px;font-size:13px;margin:20px 0}.dialog-actions{display:flex;gap:10px}.dialog-actions>button{flex:1;font-size:14px}
.workspace{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 16px 16px;border-radius:20px;background:var(--card);overflow:hidden}.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);flex-shrink:0}.workspace-bar>span{font-size:13px;color:var(--sub);text-align:center}.workspace-bar .icon-button{width:36px;min-height:36px;background:transparent}.back{transform:rotate(180deg);width:16px;height:16px}.frame-area{position:relative;flex:1;min-height:0}.frame-area iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}.frame-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--card)}.frame-wait h2{font-size:22px;margin-top:22px}.frame-wait p{font-size:14px;color:var(--sub);max-width:360px;line-height:1.7}.frame-wait .primary{min-width:160px;margin:12px auto 4px}.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin 800ms linear infinite}.frame-wait.failed .spinner{animation:none;border-color:var(--sub);opacity:.35}.toast{position:fixed;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border-radius:16px;background:var(--ink);color:var(--card);padding:14px 22px;max-width:calc(100% - 36px);font-size:14px;box-shadow:0 6px 26px #0002;z-index:20}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}::view-transition-old(root){animation:fade 320ms reverse ease-out}::view-transition-new(root){animation:fade 320ms ease-out}
@media(hover:hover){.icon-button:hover,.secondary:hover{background:color-mix(in srgb,var(--blue) 13%,var(--inset))}.primary:hover{background:#0068df}.text-button:hover{background:var(--tint)}}
@media(max-width:600px){body{padding:0}.shell{height:100dvh;min-height:0;border-radius:0}.toolbar{padding:14px 20px}.welcome{padding:16px 22px 28px;justify-content:center}h1{font-size:32px}.connection-card{padding:20px}.device-symbol{width:54px;height:54px;border-radius:18px;margin-bottom:16px}.intro>p{margin-bottom:22px}.workspace{margin:0;border-radius:0}.workspace-bar{padding:6px 14px}.brand{font-size:18px}dialog{margin:auto auto max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-height:calc(100dvh - 32px);border-radius:24px}.dialog-actions{flex-direction:column-reverse}.toast{bottom:max(22px,env(safe-area-inset-bottom))}}
@media(max-height:760px){.welcome{justify-content:flex-start}.intro{display:grid;grid-template-columns:50px 1fr;text-align:left;align-items:center;column-gap:16px;margin:0 0 20px;width:min(100%,400px)}.device-symbol{grid-row:1 / 3;width:50px;height:50px;border-radius:16px;margin:0}.intro h1{font-size:25px}.intro h1 br{display:none}.intro>p{margin:7px 0 0;font-size:13px}.welcome footer{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.devices{width:min(100%,400px);margin-top:24px;background:var(--card);border-radius:20px;padding:18px 20px;animation:enter 380ms var(--ease)}.devices h2{font-size:15px;margin-bottom:12px}.device-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.device-row>div{flex:1;min-width:0}.device-row input{width:100%;min-width:0;padding:5px 0;border:0;background:transparent;color:var(--ink);font-size:14px;font-weight:600;border-radius:6px}.device-row small{font-size:11px;color:var(--sub);display:block}.forget-device{background:transparent;color:var(--sub);font-size:23px;width:36px;padding:0}.devices .quiet{margin-top:8px;font-size:11px}.welcome:has(.devices:not([hidden])){justify-content:flex-start}.workspace-bar .text-button{white-space:nowrap}
::view-transition,::view-transition-group(root),::view-transition-image-pair(root),::view-transition-old(root),::view-transition-new(root){pointer-events:none}
html,body,.shell,.connection-card,.settings-group,dialog,.device-row,.devices,.code-field,.segments button,.frame-area iframe,.frame-wait{transition:background-color 360ms var(--ease),color 360ms var(--ease),box-shadow 260ms var(--ease)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--sub) 45%,transparent) transparent}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--sub) 45%,transparent);background-clip:padding-box}