@layer reset,tokens,base,layout,components,utilities;
@layer reset {
  *,*::before,*::after {box-sizing:border-box}
  * {margin:0}
  button,input,select {font:inherit}
  img,canvas,svg {display:block;max-inline-size:100%}
  iframe {border:0}
  p,h1,h2,h3 {overflow-wrap:break-word}
  [hidden] {display:none!important}
}
@layer tokens {
  :root {color-scheme:light dark;--paper:light-dark(oklch(97% .012 83),oklch(18% .009 70));--surface:light-dark(oklch(99% .006 83),oklch(22% .008 70));--ink:light-dark(oklch(26% .014 65),oklch(91% .011 80));--muted:light-dark(oklch(48% .015 65),oklch(70% .014 80));--line:color-mix(in oklch,var(--ink) 22%,var(--paper));--accent:light-dark(oklch(52% .135 34),oklch(74% .13 39));--button:light-dark(oklch(33% .04 37),oklch(82% .05 49));--on-button:light-dark(oklch(99% .006 83),oklch(20% .012 60));--soft:color-mix(in oklch,var(--accent) 7%,var(--surface));--space:clamp(18px,2.6vw,36px);--font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;--latin:"Space Grotesk","Segoe UI",sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
}
@layer base {
  html {scrollbar-gutter:stable;scrollbar-color:var(--line) var(--paper)}
  body {background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}
  h1,h2,h3 {font-weight:650;line-height:1.35;text-wrap:balance}
  h1 {font-size:20px;letter-spacing:-.025em}
  h2,h3 {font-size:17px}
  p {text-wrap:pretty}
  a {color:inherit;text-underline-offset:4px}
  button {cursor:pointer;touch-action:manipulation;border:1px solid transparent;border-radius:3px;min-block-size:44px;padding:9px 14px;font-size:13px;font-weight:600;background:transparent;color:var(--ink)}
  button:disabled {cursor:default;opacity:.48}
  button:hover:not(:disabled) {background:color-mix(in oklch,var(--ink) 7%,var(--surface))}
  input:not([type=checkbox]),select {inline-size:100%;min-inline-size:0;min-block-size:46px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:14px;caret-color:var(--accent)}
  input::placeholder {color:var(--muted)}
  input:disabled,select:disabled {opacity:.6}
  input[type=checkbox] {accent-color:var(--accent);inline-size:17px;block-size:17px;flex-shrink:0}
  :focus-visible {outline:2px solid var(--accent);outline-offset:3px}
  input:user-invalid {border-color:var(--accent)}
  ::selection {background:color-mix(in oklch,var(--accent) 24%,var(--paper))}
  dialog {color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px;max-inline-size:min(540px,calc(100% - 32px));inline-size:540px;margin:auto;max-block-size:calc(100dvh - 40px);overflow:auto}
  dialog::backdrop {background:oklch(15% .01 70 / .5)}
  dialog h2 {font-size:20px}
  dialog>p,dialog form>p {margin-block:14px}
  summary {cursor:pointer;list-style:none;min-block-size:44px}
  summary::-webkit-details-marker {display:none}
}
@layer layout {
  .page {inline-size:min(1280px,100%);margin-inline:auto;padding:22px var(--space) 30px}
  .page-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block-end:15px;border-block-end:1px solid var(--line)}
  .brand {display:flex;align-items:center;gap:9px;text-decoration:none;font-size:16px;font-weight:650;line-height:1.4;flex-shrink:0}
  .brand>svg {inline-size:26px;block-size:29px;fill:none;stroke:var(--accent);stroke-width:1.8}
  .brand h1 {font-size:18px}
  .page-header nav {display:flex;align-items:center;gap:10px}
  .page-header nav>a {font-size:13px;text-decoration:none;min-block-size:44px;padding-inline:6px;display:flex;align-items:center}
  .network-strip {display:flex;align-items:center;gap:12px;padding-block:13px;color:var(--muted);font-size:12px;flex-wrap:wrap}
  .network-strip>span:first-child {color:var(--accent);font-weight:600}
  .network-strip>span:last-child {margin-inline-start:auto;white-space:nowrap}
  .network-strip p:empty {display:none}
  .create-form {padding-block:10px 0}
  .create-description {margin-block-end:18px;font-size:15px}
  .create-main {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px}
  .create-main>.primary {min-block-size:46px;padding-inline:25px}
  .field {display:grid;gap:7px;min-inline-size:0}
  .field>label,.field>span:first-child {font-weight:600;font-size:12px}
  .field label>span {font-size:11px;font-weight:400;color:var(--muted);margin-inline-start:5px}
  .setup-options {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin-block-start:9px}
  .session-options {min-inline-size:0}
  .session-options>summary {display:flex;align-items:center;gap:12px;inline-size:fit-content;font-size:12px}
  .session-options>summary .subtle {font-size:11px}
  .session-option-fields {display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px;max-inline-size:650px;padding-block:6px 16px}
  .check-field {display:flex;align-items:center;gap:8px;min-block-size:44px;font-size:12px;cursor:pointer;align-self:start}
  .sessions-panel {container-type:inline-size;margin-block:14px 20px;border-block-end:1px solid var(--line);padding-block-end:10px}
  .sessions-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:12px}
  .sessions-heading h2 {font-size:14px}
  .sessions-heading>span {font-size:12px;white-space:nowrap}
  .sessions-empty {font-size:13px;color:var(--muted);padding-block:6px 14px}
  .session-list {list-style:none;padding:0;max-block-size:310px;overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
  .session-list li {border-block-start:1px solid var(--line)}
  .session-row {display:grid;grid-template-columns:minmax(0,1fr) 108px 112px 52px;align-items:center;gap:14px;inline-size:100%;padding:12px;border-radius:0;text-align:start;font-weight:400}
  .session-row[aria-pressed=true] {background:var(--soft)}
  .session-row:focus-visible {outline-offset:-3px}
  .session-row-label {font-weight:600;overflow-wrap:anywhere;min-inline-size:0}
  .session-row-status {font-size:12px;color:var(--muted)}
  .session-row-time {font-size:12px;color:var(--muted);white-space:nowrap}
  .session-row-action {font-size:12px;color:var(--accent);text-align:end;white-space:nowrap}
  .session-row[aria-pressed=true] .session-row-action {text-decoration:underline;text-underline-offset:4px}
  .session-list-help {font-size:11px;padding-block:10px 0}
  .end-session-label {font-weight:600;overflow-wrap:anywhere}
  @container(max-width:560px) {
    .session-row {grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 9px}
    .session-row-label {grid-column:1;grid-row:1}
    .session-row-status {grid-column:1;grid-row:2}
    .session-row-time {grid-column:2;grid-row:2}
    .session-row-action {grid-column:2;grid-row:1}
  }
  .workspace {margin-block-start:5px}
  .workspace-heading {display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
  .workspace-heading>span {font-size:12px}
  .session-controls {display:flex;align-items:center;justify-content:space-between;gap:18px;flex:1;min-inline-size:0}
  .session-identity {display:flex;align-items:center;gap:15px;flex-wrap:wrap;min-inline-size:0}
  .session-identity strong {font-size:14px;overflow-wrap:anywhere}
  .session-identity .mono {font-size:12px;color:var(--muted);white-space:nowrap}
  .action-group {display:flex;gap:4px;align-items:center;flex-shrink:0}
  .share-hint {font-size:11px;color:var(--muted);margin-block-end:10px}
  .stage {border:1px solid var(--line);background:var(--surface);min-inline-size:0;position:relative;container-type:inline-size}
  .empty-state {display:flex;flex-direction:column;align-items:center;justify-content:center;min-block-size:180px;text-align:center;padding:28px 20px}
  .empty-state p {color:var(--muted);font-size:13px;margin-block-start:8px}
  .empty-state button {margin-block-start:18px}
  #preview-frame {display:block;inline-size:100%;block-size:calc(100cqi * .625 + 280px);background:var(--surface)}
  .stage[data-viewport=mobile] #preview-frame {block-size:calc(min(100cqi,390px) * 1.94872 + 285px)}
  .help-disclosure {border-block-start:1px solid var(--line);margin-block-start:24px}
  .help-disclosure>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;padding-block:8px}
  .login-help .help-list {padding-block:4px 10px}
  .help-list details {border-block-start:1px solid var(--line)}
  .help-list summary {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px;font-size:13px}
  .help-list details>p {padding-block:2px 15px;font-size:12px;line-height:1.85;color:var(--muted);max-inline-size:70ch}
  .help-content {padding-block:3px 14px;color:var(--muted);font-size:12px}
  .help-content p+p {margin-block-start:10px}
  .dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:20px}
  .dialog-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block:20px}
  .full {grid-column:1/-1}
  .dialog-actions {display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-block-start:22px}
  .login-panel {padding-block:20px}
  .login-panel form {display:flex;gap:10px;align-items:center;margin-block-start:14px;flex-wrap:wrap}
  .login-panel input {max-inline-size:350px}
  .viewer-header {margin-block-end:16px}
  .viewer-header h1 {font-size:16px;max-inline-size:50%;overflow-wrap:anywhere;text-align:end}
  .browser-tabs {display:flex;align-items:stretch;border:1px solid var(--line);background:var(--surface);padding-inline:6px;min-inline-size:0;flex-wrap:wrap}
  .browser-tabs button {border-radius:0;border-block-end:2px solid transparent;margin-block-end:-1px;padding:10px 16px;font-weight:500;min-inline-size:0;font-size:13px}
  .browser-tabs button[aria-selected=true] {border-block-end-color:var(--accent);color:var(--accent);font-weight:650}
  .browser-tabs button .mono {font-size:11px;margin-inline-end:6px}
  .tab-help {padding:7px 12px;font-size:11px;color:var(--muted);border-inline:1px solid var(--line);background:var(--surface)}
  .viewer-toolbar {display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);padding:5px 8px;background:var(--surface)}
  .browser-actions {display:flex;align-items:center;gap:4px;min-inline-size:0}
  .browser-actions:first-child {flex-wrap:wrap}
  .browser-actions .mono {font-size:12px;white-space:nowrap;padding-inline:6px;color:var(--muted)}
  .browser-actions .subtle {font-size:12px;white-space:nowrap}
  #reconnect,#cancel-auth {white-space:nowrap}
  .toolbar-rule {inline-size:1px;block-size:18px;background:var(--line);margin-inline:4px}
  .screen-shell {position:relative;background:white;border:1px solid var(--line);border-block-start:0;min-inline-size:0;line-height:0;overflow:clip;container-type:inline-size}
  #screen {inline-size:100%;block-size:auto;max-inline-size:100%;cursor:default;touch-action:none}
  #screen:focus-visible {outline:2px solid var(--accent);outline-offset:-3px}
  .screen-message {position:absolute;inset:0;display:grid;place-content:center;background:var(--surface);color:var(--muted);text-align:center;line-height:1.7;padding:25px;font-size:14px}
  .screen-shell.mobile-viewport {max-inline-size:390px;margin-inline:auto}
  .viewer-meta {display:flex;justify-content:space-between;align-items:start;gap:16px;padding-block:10px;color:var(--muted);font-size:11px;line-height:1.7}
  .viewer-meta p {max-inline-size:70ch}
  .viewer-meta p:last-child {text-align:end}
  .viewer-privacy {font-size:11px;margin-block-start:14px}
  .password-wrap {display:flex;gap:5px;min-inline-size:0}
  #type-form>.field {margin-block:20px 14px}
  .embedded .viewer-header,.embedded .viewer-help,.embedded .viewer-privacy,.embedded .skip,.embedded #finish,.embedded #time-left,.embedded #network-label {display:none}
  .embedded .viewer-page {inline-size:100%;padding:0}
  .embedded .viewer-toolbar,.embedded .browser-tabs {border:0;border-block-end:1px solid var(--line)}
  .embedded .tab-help {border-inline:0}
  .embedded .screen-shell {border:0}
  .embedded .viewer-meta,.embedded #viewer-notice {padding-inline:12px}
  .embedded .viewer-meta {justify-content:start}
  .embedded .viewer-meta p:last-child {text-align:start}
  @media(max-width:900px) {
    .session-controls {flex-wrap:wrap;gap:10px}
    .action-group {margin-inline-start:auto}
    .viewer-toolbar {flex-wrap:wrap}
  }
  @media(max-width:560px) {
    .page {padding:16px 18px 24px}
    .page-header {padding-block-end:10px;gap:8px}
    .brand {font-size:14px;gap:7px}
    .brand h1 {font-size:15px}
    .brand>svg {inline-size:22px;block-size:25px}
    .page-header nav {gap:2px}
    .page-header nav>a,.page-header .quiet {font-size:12px;padding-inline:6px}
    .network-strip {gap:7px 9px;font-size:11px}
    .create-description {font-size:13px;margin-block-end:15px}
    .create-main {grid-template-columns:minmax(0,1fr);gap:12px}
    .create-main>.primary {inline-size:100%}
    .setup-options {grid-template-columns:minmax(0,1fr);gap:0}
    .session-option-fields {grid-template-columns:minmax(0,1fr) 94px;gap:12px}
    .check-field {font-size:12px}
    .workspace-heading {gap:8px;padding-block:8px}
    .session-controls {flex-basis:100%;gap:10px}
    .session-identity {gap:12px}
    .action-group {inline-size:100%;justify-content:flex-start;margin-inline-start:0;gap:3px;flex-wrap:wrap}
    .action-group button {font-size:12px;padding-inline:11px}
    .empty-state {min-block-size:140px}
    .browser-tabs {padding-inline:2px}
    .browser-tabs button {padding-inline:12px;font-size:12px}
    .viewer-toolbar {gap:2px;padding:4px 6px}
    .browser-actions {gap:2px;flex:1}
    .browser-actions:first-child {flex-basis:100%;border-block-end:1px solid var(--line);padding-block-end:3px}
    .browser-actions:nth-child(2) {justify-content:flex-end}
    .browser-actions .subtle {font-size:11px}
    #reconnect,#cancel-auth {padding-inline:10px;font-size:12px}
    .viewer-meta {flex-direction:column;gap:4px}
    .viewer-meta p:last-child {text-align:start}
    .viewer-header h1 {font-size:14px}
    dialog {padding:20px 18px}
    .dialog-actions {gap:7px}
    .dialog-actions button {font-size:12px;padding-inline:11px}
  }
}
@layer components {
  .primary {background:var(--button);color:var(--on-button);border-color:var(--button);white-space:nowrap}
  .primary:hover:not(:disabled) {background:color-mix(in oklch,var(--button) 85%,var(--ink));color:var(--on-button)}
  .outline {background:var(--surface);border-color:var(--line)}
  .quiet {background:transparent}
  .danger {color:var(--accent)}
  .icon-button {inline-size:44px;padding:0;font-size:22px;font-family:var(--latin);flex-shrink:0;display:grid;place-content:center}
  .icon-button .tool-icon {inline-size:20px;block-size:20px}
  .disclosure-icon {inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  details[open]>summary .disclosure-icon {transform:rotate(180deg)}
  .notice {font-size:12px;line-height:1.7;color:var(--accent);padding-block:6px;overflow-wrap:anywhere}
  .notice:empty {display:none}
  .skip {position:fixed;inset-block-start:10px;inset-inline-start:20px;z-index:20;padding:10px 15px;background:var(--surface);transform:translateY(-200%)}
  .skip:focus {transform:none}
  @media(prefers-reduced-motion:no-preference) {
    button {transition:background-color .15s ease-out,opacity .15s ease-out}
    dialog[open] {animation:enter .16s ease-out}
    @keyframes enter {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  }
}
@layer utilities {
  .mono {font-family:var(--mono);font-variant-numeric:tabular-nums}
  .subtle {color:var(--muted)}
  .small {font-size:11px;line-height:1.8}
  .sr-only {position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:clip;clip-path:inset(50%);white-space:nowrap;border:0}
  @media(forced-colors:active) {button,input,select,.stage,.screen-shell {border:1px solid ButtonText}}
}