* { box-sizing: border-box; }
      [hidden] { display: none !important; }
      html, body { height: 100%; width: 100%; overflow: hidden; overscroll-behavior: none; }
      body { margin: 0; overflow: hidden; color: var(--text); background: var(--page); }
      body.workspace-active { position: fixed; inset: 0; }
      button, textarea { font: inherit; }
      button { color: inherit; }
      .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); width: 100%; max-width: 100%; height: 100dvh; overflow: hidden; }
      .sidebar { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #30303a; background: #15151a; }
      .brand { height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-bottom: 1px solid #30303a; }
      .pi { color: var(--accent); font-size: 23px; font-weight: 800; }
      .brand strong { font-size: 13px; letter-spacing: .04em; }
      .new-session { margin: 12px; min-height: 36px; border: 1px solid #43434f; background: transparent; text-align: left; padding: 0 11px; cursor: pointer; }
      .new-session:hover { border-color: var(--border); }
      .new-session span { color: var(--accent); }
      .session-label { padding: 8px 14px 6px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
      .sessions { flex: 1; overflow: auto; padding: 0 7px; }
      .session { width: 100%; border: 0; border-left: 2px solid transparent; background: transparent; padding: 9px 10px; text-align: left; cursor: pointer; }
      .session.active { background: var(--selected); border-left-color: var(--accent); }
      .session-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
      .session-meta { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; }
      .account { width: 100%; border: 0; border-top: 1px solid #30303a; padding: 12px 14px; color: var(--muted); background: transparent; font: inherit; font-size: 11px; line-height: 1.7; text-align: left; cursor: pointer; }
      .account b { color: var(--text); font-weight: 500; }
      .account:hover, .account:focus-visible { background: var(--selected); outline: 0; }
      .workspace { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: 100vh; overflow: hidden; }
      .topbar { display: flex; align-items: center; justify-content: space-between; }
      .topbar-left { min-width: 0; }
      .title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .crumb { margin-top: 3px; color: var(--dim); font-size: 10px; }
      .shortcuts { color: var(--muted); font-size: 10px; white-space: nowrap; }
      .shortcuts kbd { color: var(--text); background: none; font: inherit; }
      .transcript-shell { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
      .transcript { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 24px clamp(20px, 5vw, 72px) 40px; scrollbar-color: var(--selected) transparent; }
      .terminal-width { width: min(920px, 100%); margin: 0 auto; }
      .startup { color: var(--muted); font-size: 12px; line-height: 1.75; }
      .startup .logo { color: var(--accent); font-weight: 700; }
      .startup .ok { color: var(--green); }
      .startup .key { color: var(--yellow); }
      .rule { border: 0; border-top: 1px solid #34343e; margin: 20px 0; }
      .assistant { font-size: 13px; line-height: 1.7; }
      .assistant .prompt { color: var(--accent); }
      .assistant ul { margin: 10px 0 0; padding-left: 21px; }
      .assistant li { margin: 5px 0; }
      .message-user { margin: 24px 0 14px; padding: 12px 14px; background: var(--user); font-size: 13px; line-height: 1.6; }
      .attachment { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--text); }
      .attachment::before { content: "@"; color: var(--accent); }
      .tool { margin: 14px 0; padding: 11px 13px; background: var(--tool-success); font-size: 12px; line-height: 1.6; }
      .tool.pending { background: #282832; }
      .tool.error, .notice.error { background: #3c2828; }
      .tool-title { display: flex; justify-content: space-between; gap: 20px; font-weight: 700; }
      .tool-state { color: var(--green); font-weight: 400; }
      .tool-output { margin-top: 5px; color: var(--muted); }
      .notice { margin: 14px 0; padding: 10px 12px; color: #cc6666; border-left: 2px solid #cc6666; background: #2b2226; font-size: 12px; line-height: 1.6; }
      .download { display: inline-block; margin-top: 10px; color: var(--accent); text-decoration: none; }
      .download:hover { text-decoration: underline; }
      .composer-wrap { width: min(920px, 100%); margin: 0 auto; }
      .composer-wrap { position: relative; }
      .composer { border: 1px solid var(--border); background: var(--panel); box-shadow: 0 0 0 1px #242433 inset; }
      .composer:focus-within { border-color: var(--accent); }
      .compose-row { display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px; }
      .icon-btn { flex: 0 0 30px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
      .icon-btn:hover { color: var(--accent); background: #2b2b34; }
      textarea { flex: 1; min-height: 34px; max-height: 150px; resize: none; border: 0; outline: 0; padding: 7px 4px 4px; color: var(--text); background: transparent; line-height: 1.45; }
      textarea::placeholder { color: #5e5e6a; }
      .send { color: var(--accent); }
      .interrupt { color: #e88989; }
      .interrupt:hover, .interrupt:focus-visible { color: #ffaaaa; background: #3c2828; }
      .icon-btn:disabled { opacity: .35; cursor: wait; }
      .pending-files { display: none; gap: 7px; flex-wrap: wrap; padding: 7px 10px 0; }
      .pending-files.active { display: flex; }
      .file-chip { border: 1px solid #43434f; padding: 5px 8px; color: var(--muted); font-size: 10px; }
      .file-chip b { color: var(--text); font-weight: 400; }
      .composer-hint { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #30303a; padding: 6px 10px; color: var(--dim); font-size: 10px; }
      .footer { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; margin-top: 7px; color: var(--dim); font-size: 10px; }
      .footer .model { grid-column: 2; grid-row: 2; }
      .mobile-sessions { display: none; }
      .command-menu { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(100% + 8px); max-height: min(420px, 52vh); overflow-y: auto; border: 1px solid #43434f; background: #202027; box-shadow: 0 14px 50px #0009; }
      .command-menu[hidden] { display: none; }
      .command-head { padding: 8px 11px; color: var(--dim); border-bottom: 1px solid #34343e; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
      .command-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; width: 100%; padding: 8px 11px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
      .command-item:hover, .command-item.active { background: var(--selected); }
      .command-name { color: var(--accent); }
      .command-description { color: var(--muted); }
      .overlay { position: fixed; z-index: 50; inset: 0; display: flex; justify-content: flex-end; pointer-events: auto; background: #0b0b0d55; }
      .overlay[hidden] { display: none; }
      .dialog { width: min(460px, 100vw); height: 100%; max-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; border-left: 1px solid var(--border); border-radius: 16px 0 0 16px; background: #1d1d23; box-shadow: -20px 0 70px #0008; animation: drawer-in .16s ease-out; }
      @keyframes drawer-in { from { opacity: .2; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
      .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; border-bottom: 1px solid #383842; }
      .dialog-header-main { display: flex; min-width: 0; align-items: center; gap: 10px; }
      .dialog-back { width: 27px; height: 27px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
      .dialog-back:hover, .dialog-back:focus-visible { color: var(--text); background: var(--selected); outline: 0; }
      .dialog-title { color: var(--accent); font-size: 12px; font-weight: 700; }
      .dialog-subtitle { margin-left: 12px; color: var(--dim); font-size: 10px; }
      .dialog-close { width: 28px; height: 26px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
      .dialog-close:hover { color: var(--text); background: var(--selected); }
      .dialog-body { min-height: 0; overflow: auto; padding: 9px; }
      .dialog-footer { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border-top: 1px solid #383842; color: var(--dim); font-size: 10px; }
      .selector-section { padding: 8px 7px 5px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
      .selector-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px; border-left: 2px solid transparent; font-size: 11px; }
      button.selector-row { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; cursor: pointer; }
      .selector-row:hover, .selector-row.selected { background: var(--selected); border-left-color: var(--accent); }
      .selector-mark { color: var(--green); }
      .selector-main { min-width: 0; }
      .selector-main strong { display: block; color: var(--text); font-weight: 500; }
      .selector-main small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
      .selector-value { color: var(--muted); white-space: nowrap; }
      .selector-value.warning { color: var(--yellow); }
      .tree-row { display: grid; grid-template-columns: 46px 76px minmax(0, 1fr); gap: 8px; padding: 7px 9px; color: var(--muted); font-size: 10px; }
      .tree-row:hover { background: var(--selected); }
      .tree-branch { color: var(--accent); white-space: pre; }
      .tree-role { color: var(--yellow); }
      .tree-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .hotkey-grid { display: grid; grid-template-columns: minmax(140px, .7fr) 1fr; gap: 0; }
      .hotkey-grid div { padding: 7px 9px; border-bottom: 1px solid #2e2e36; font-size: 10px; }
      .hotkey-grid div:nth-child(odd) { color: var(--accent); }
      .hotkey-grid div:nth-child(even) { color: var(--muted); }
      .empty-state { padding: 28px 18px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.7; }
      .modal-layer { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 22px; background: #0b0b0dcc; }
      .modal-layer[hidden] { display: none; }
      .modal { width: min(520px, 100%); max-height: min(620px, 88vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--border); border-radius: 14px; background: #1d1d23; box-shadow: 0 24px 90px #000c; animation: modal-in .14s ease-out; }
      @keyframes modal-in { from { opacity: .2; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
      .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid #383842; }
      .modal-title { color: var(--text); font-size: 13px; font-weight: var(--weight-semibold); }
      .modal-subtitle { margin-left: 10px; color: var(--dim); font-size: 10px; }
      .modal-body { min-height: 0; overflow: auto; padding: 12px; }
      .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #383842; }
      .modal-close, .modal-action { border: 1px solid #3a3f4c; border-radius: 7px; background: transparent; color: var(--muted); padding: 7px 11px; cursor: pointer; font-size: 11px; }
      .modal-close:hover, .modal-action:hover { color: var(--text); background: var(--selected); }
      .modal-action.primary { border-color: var(--accent); color: var(--accent); }
      .modal-action.danger { border-color: #d77b7b; color: #e88989; }
      /* Translation workspace surface: DSH-inspired browser shell, without coding-agent chrome. */
      body { background: var(--page); font-family: var(--font-ui); font-weight: 400; }
      button, input, textarea { font-family: var(--font-ui); }
      code, pre, kbd { font-family: var(--font-code); }
      .app { grid-template-columns: 248px minmax(0, 1fr); }
      .sidebar { border-right: 1px solid #2b2e37; background: var(--panel); }
      .brand { height: 60px; padding: 0 18px; }
      .pi { color: var(--accent); font-size: 21px; }
      .pi img, .startup .logo img { display: block; width: 26px; height: 26px; object-fit: contain; }
      .brand strong { font-size: 12px; letter-spacing: .08em; }
      .new-session { margin: 14px; min-height: 40px; border-radius: 8px; border-color: #3a3f4c; background: #252832; padding: 0 13px; }
      .new-session:hover { border-color: var(--accent); background: var(--selected); }
      .new-session span { margin-right: 6px; }
      .session-label { padding: 13px 16px 7px; font-size: 10px; }
      .sessions { padding: 0 8px; }
      .session { border-left-width: 3px; border-radius: 7px; padding: 11px 10px; }
      .session.active { background: var(--selected); }
      .session-title { font-size: 12px; }
      .session-meta { font-size: 10px; }
      .account { padding: 14px 16px; }
      .account { display: block; }
      .session-row { display: flex; align-items: stretch; gap: 3px; margin: 2px 0; }
      .session-row .session { min-width: 0; flex: 1; }
      .session-menu { flex: 0 0 26px; border: 0; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; opacity: 0; }
      .session-row:hover .session-menu, .session-menu:focus-visible { opacity: 1; }
      .session-menu:hover, .session-menu:focus-visible { color: var(--text); background: var(--selected); outline: 0; }
      .title { font-size: 14px; font-weight: 600; }
      .crumb { color: var(--dim); font-size: 11px; }
      .shortcuts { display: flex; align-items: center; gap: 5px; }
      .shortcuts kbd { display: none; }
      .transcript { padding: 30px clamp(24px, 6vw, 96px) 44px; }
      .terminal-width { width: min(820px, 100%); }
      .startup, .rule { display: none; }
      .assistant { margin: 16px 0; font-size: 14px; line-height: 1.75; }
      .assistant .prompt { display: none; }
      .assistant-content { width: min(100%, var(--reading-measure)); color: var(--text); }
      .assistant-content p { margin: 0 0 16px; }
      .assistant-content p:last-child { margin-bottom: 0; }
      .assistant-content h2, .assistant-content h3, .assistant-content h4 { margin: 24px 0 10px; color: var(--text); line-height: 1.35; letter-spacing: -.012em; }
      .assistant-content h2 { font-size: 18px; font-weight: var(--weight-semibold); }
      .assistant-content h3 { font-size: 16px; font-weight: 600; }
      .assistant-content h4 { font-size: 14px; font-weight: 600; }
      .assistant-content h2:first-child, .assistant-content h3:first-child, .assistant-content h4:first-child { margin-top: 0; }
      .assistant-content ul, .assistant-content ol { margin: 0 0 16px; padding-left: 24px; }
      .assistant-content li { margin: 6px 0; padding-left: 3px; }
      .assistant-content li::marker { color: var(--accent); }
      .assistant-content strong { font-weight: var(--weight-semibold); }
      .assistant-content em { font-style: italic; }
      .assistant-content del { color: var(--muted); }
      .assistant-content code { border-radius: 5px; background: var(--panel-subtle); padding: 2px 5px; color: var(--text); font-size: .92em; }
      .assistant-content pre { position: relative; overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--separator); border-radius: 9px; background: var(--panel-subtle); padding: 28px 14px 14px; color: var(--text); font-size: 12px; line-height: 1.55; white-space: pre; }
      .assistant-content pre code { display: block; padding: 0; background: transparent; color: inherit; }
      .assistant-code-language { position: absolute; top: 8px; right: 12px; color: var(--muted); font-family: var(--font-ui); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
      .assistant-content blockquote { margin: 0 0 16px; border-left: 3px solid var(--accent); padding-left: 14px; color: var(--muted); }
      .assistant-content hr { height: 1px; margin: 22px 0; border: 0; background: var(--separator); }
      .clarification-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
      .clarification-actions button { min-height: 34px; border: 1px solid var(--separator); border-radius: 17px; background: var(--panel); padding: 6px 12px; color: var(--text); cursor: pointer; font: inherit; font-size: 12px; }
      .clarification-actions button:hover, .clarification-actions button:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, var(--separator)); background: var(--accent-soft); color: var(--accent); outline: 0; }
      .clarification-actions button:active { transform: scale(.98); }
      .clarification-actions small { align-self: center; color: var(--muted); font-size: 11px; }
      .clarification-actions.is-answered { align-items: center; gap: 7px; }
      .clarification-actions .clarification-answer-label { color: var(--muted); font-size: 11px; }
      .clarification-actions button.is-selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--separator)); background: var(--accent-soft); color: var(--text); cursor: default; }
      .clarification-actions button.is-selected:disabled { opacity: 1; }
      .assistant-math { color: var(--text); }
      .assistant-math-inline { display: inline-block; margin: 0 2px; border-radius: 4px; background: var(--panel-subtle); padding: 0 4px; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
      .assistant-math-display { overflow-x: auto; margin: 4px 0 18px; border-left: 3px solid var(--accent); background: var(--panel-subtle); padding: 10px 14px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; line-height: 1.6; white-space: pre-wrap; }
      .message-user { margin: 20px 0 12px; border: 1px solid #343945; border-radius: 12px; background: var(--user); padding: 13px 15px; font-size: 14px; }
      .attachment { padding: 7px 9px; border: 1px solid #454b5b; border-radius: 7px; background: #1c2028; }
      .attachment::before { content: "↳"; }
      .tool { margin: 10px 0; border: 1px solid #324237; border-radius: 9px; background: var(--tool-success); padding: 10px 12px; font-size: 12px; }
      .tool.pending { border-color: #3c4250; background: #252832; }
      .tool-title { font-weight: 600; }
      .tool-output { max-height: 44px; overflow: hidden; }
      .notice { border-radius: 8px; }
      .composer { border: 1px solid #434958; border-radius: 14px; box-shadow: 0 10px 38px #0003; }
      .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #83a4ff22, 0 10px 38px #0003; }
      .compose-row { padding: 11px 12px; }
      .icon-btn { border-radius: 7px; }
      textarea { min-height: 38px; padding: 9px 5px 5px; font-size: 14px; }
      textarea::placeholder { color: #818999; }
      .composer-hint { padding: 7px 13px; font-size: 10px; }
      .footer { margin-top: 8px; font-size: 10px; }
      .footer .model { color: var(--dim); }
      .more-menu-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid #30343e; background: transparent; padding: 13px 12px; text-align: left; cursor: pointer; }
      .more-menu-row:last-child { border-bottom: 0; }
      .more-menu-row:hover { background: var(--selected); }
      .more-menu-icon { color: var(--accent); font-size: 15px; text-align: center; }
      .more-menu-main strong { display: block; color: var(--text); font-size: 12px; font-weight: 500; }
      .more-menu-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
      .more-menu-arrow { color: var(--dim); }
      .turn-block { scroll-margin-top: 16px; }
      .jump-latest { position: absolute; z-index: 4; right: clamp(18px, 5vw, 72px); bottom: 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); box-shadow: 0 8px 28px #0005; padding: 7px 11px; color: var(--accent); cursor: pointer; font-size: 11px; }
      .jump-latest:hover, .jump-latest:focus-visible { background: var(--selected); outline: 0; }
      @media (max-width: 760px) {
        .app { grid-template-columns: 1fr; }
        .sidebar { display: none; }
        .mobile-sessions { display: inline-block; }
        .shortcuts { display: none; }
        .transcript { padding: 18px 14px 32px; }
        .jump-latest { right: 14px; }
      }
    
/* Translation Agent source style 2 (apple-design-system) */

      /* Apple Design system: quiet utility surface, semantic tokens, one accent. */
      :root {
        color-scheme: light;
        --page: #f5f5f7;
        --panel: #ffffff;
        --panel-raised: #ffffff;
        --panel-subtle: #f2f2f7;
        --selected: #eef0f4;
        --selected-strong: #e5e8ee;
        --user: #f2f2f7;
        --tool-success: #f3f8f3;
        --text: #1d1d1f;
        --muted: #6e6e73;
        --dim: #8a8a8f;
        --border: #d2d2d7;
        --separator: #e5e5ea;
        --accent: #0071e3;
        --accent-soft: #e8f1ff;
        --green: #2d7d46;
        --yellow: #9a6b00;
        --danger: #c93434;
        --shadow-soft: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 5%);
        --shadow-overlay: 0 18px 60px rgb(0 0 0 / 18%);
        --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
        --font-code: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
        /* Canonical type and control metrics shared by every surface. */
        --font-body-size: 15px;
        --font-control-size: 14px;
        --font-meta-size: 12px;
        --font-caption-size: 11px;
        --weight-regular: 400;
        --weight-medium: 500;
        --weight-semibold: 600;
        --control-height: 44px;
        --control-compact-height: 40px;
        --radius-control: 12px;
        --radius-surface: 16px;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 20px;
        --focus-footer: 88px;
        --layout-gutter: clamp(20px, 3vw, 48px);
        --reading-measure: 74ch;
        --motion-press: 100ms cubic-bezier(.4, 0, 1, 1);
        --motion-standard: 180ms cubic-bezier(.22, 1, .36, 1);
        --motion-spring: 260ms cubic-bezier(.34, 1.56, .64, 1);
        --motion-hover-duration: 180ms;
        --motion-hover-easing: cubic-bezier(.22, 1, .36, 1);
        --motion-spring-duration: 260ms;
        --motion-spring-easing: cubic-bezier(.34, 1.56, .64, 1);
        --motion-return-duration: 260ms;
        --motion-return-easing: cubic-bezier(.2, .8, .2, 1);
        --motion-press-duration: 120ms;
        --motion-press-easing: cubic-bezier(.4, 0, 1, 1);
        --motion-status-duration: 240ms;
        --motion-status-easing: ease-in-out;
        font-family: var(--font-ui);
        --book-paper: #f6f5f1;
        --book-paper-lit: #fcfbf8;
        --book-paper-shade: #eeece6;
        --book-ink: #253d69;
        --book-caption: #626b76;
        --book-rest-shadow: 0 2px 3px rgb(24 24 27 / 11%), 0 6px 12px rgb(24 24 27 / 9%);
        --book-hover-shadow: 0 3px 6px rgb(24 24 27 / 15%), 0 12px 24px rgb(24 24 27 / 22%);
      }
      :root[data-theme="dark"] {
        color-scheme: dark;
        --page: #1d1d1f;
        --panel: #2c2c2e;
        --panel-raised: #3a3a3c;
        --panel-subtle: #242426;
        --selected: #454547;
        --selected-strong: #515153;
        --user: #3a3a3c;
        --tool-success: #263329;
        --text: #f5f5f7;
        --muted: #b8b8bd;
        --dim: #98989d;
        --border: #636366;
        --separator: #48484a;
        --accent: #64a8ff;
        --accent-soft: #203b5e;
        --green: #8fd3a1;
        --yellow: #f0c36a;
        --danger: #ff8b8b;
        --shadow-soft: 0 1px 2px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 14%);
        --shadow-overlay: 0 18px 60px rgb(0 0 0 / 42%);
        --book-paper: #e0ddd5;
        --book-paper-lit: #e7e5df;
        --book-paper-shade: #dddad2;
        --book-ink: #22375f;
        --book-caption: #56606d;
        --book-rest-shadow: 0 2px 3px rgb(0 0 0 / 28%), 0 6px 12px rgb(0 0 0 / 20%);
        --book-hover-shadow: 0 3px 6px rgb(0 0 0 / 32%), 0 12px 24px rgb(0 0 0 / 44%);
      }
      html, body { min-width: 320px; background: var(--page); }
      body { color: var(--text); font-family: var(--font-ui); font-size: var(--font-body-size); line-height: 1.5; font-synthesis: none; text-rendering: optimizeLegibility; }
      button, input, textarea { font-family: var(--font-ui); }
      button, a, textarea { -webkit-tap-highlight-color: transparent; }
      button { border: 0; }
      :focus { outline: none; }
      :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .app { grid-template-columns: 260px minmax(0, 1fr); background: var(--page); }
      .sidebar { border-right: 1px solid var(--separator); background: var(--panel); }
      .brand { height: 64px; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--separator); }
      .pi { display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); font-size: 20px; font-weight: 600; }
      .pi img, .startup .logo img { width: 28px; height: 28px; border-radius: 8px; }
      .brand strong { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; }
      .new-session { min-height: 44px; margin: 12px 12px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; padding: 0 12px; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
      .new-session:hover { background: var(--panel-subtle); }
      .new-session span { display: inline-block; margin-right: 8px; color: var(--accent); font-size: 20px; font-weight: 400; line-height: 1; vertical-align: -2px; }
      .session-label { padding: 16px 20px 8px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
      .sessions { padding: 0 10px 12px; scrollbar-color: var(--selected-strong) transparent; }
      .session-row { gap: 4px; margin: 2px 0; border-radius: 10px; }
      .session { min-height: 56px; border-left: 0; border-radius: 10px; padding: 10px 12px; color: var(--text); }
      .session:hover { background: var(--panel-subtle); }
      .session.active { background: var(--selected); border-left-color: transparent; box-shadow: none; }
      .session.active:hover { background: var(--selected-strong); }
      .session:focus-visible { outline-offset: -2px; }
      .session-title { font-size: 14px; font-weight: 500; line-height: 1.35; }
      .session-meta { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
      .session-menu { flex: 0 0 44px; min-height: 44px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; opacity: 0; }
      .session-row:hover .session-menu, .session.active + .session-menu, .session-menu:focus-visible { opacity: 1; }
      .session-menu:hover { background: var(--panel-subtle); color: var(--text); }
      .account { min-height: 72px; border-top: 1px solid var(--separator); padding: 14px 20px; color: var(--muted); background: transparent; font-size: 12px; line-height: 1.55; }
      .account b { color: var(--text); font-weight: 500; }
      .account:hover { background: var(--panel-subtle); }
      .workspace { background: var(--page); }
      .title { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35; }
      .crumb { margin-top: 3px; color: var(--muted); font-size: 12px; }
      .shortcuts { gap: 8px; color: var(--muted); font-size: 12px; }
      .shortcuts .icon-btn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); font-size: 20px; }
      .shortcuts .icon-btn::after { content: none; }
      .shortcuts .icon-btn:hover { background: var(--panel-subtle); color: var(--text); }
      .mobile-sessions { width: 44px; height: 44px; margin-right: 4px; border-radius: 22px; }
      .transcript { padding: 32px clamp(20px, 3.5vw, 52px) 48px; background: var(--page); overscroll-behavior: auto; scrollbar-gutter: stable; scrollbar-color: var(--selected-strong) transparent; }
      .terminal-width { width: min(1040px, 100%); }
      .startup, .rule { display: none; }
      .assistant { margin: 20px 0; color: var(--text); font-size: 15px; line-height: 1.75; }
      .assistant .prompt { display: none; }
      .message-user { width: fit-content; max-width: min(78%, 760px); margin: 24px 0 16px auto; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--user); padding: 12px 16px; color: var(--text); font-size: 15px; line-height: 1.6; }
      .attachment { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); padding: 8px 10px; }
      .attachment::before { color: var(--accent); }
      .tool { margin: 14px 0; border: 1px solid var(--separator); border-radius: var(--radius-md); background: var(--tool-success); padding: 12px 14px; font-size: 13px; line-height: 1.55; }
      .tool.pending { border-color: var(--separator); background: var(--panel-subtle); }
      .tool-title { font-weight: 600; }
      .tool-output { color: var(--muted); }
      .notice { margin: 14px 0; border: 1px solid var(--separator); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: var(--panel-subtle); padding: 12px 14px; color: var(--text); font-size: 13px; line-height: 1.55; }
      .notice.error { background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
      .download { color: var(--accent); }
      .composer { border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-soft); }
      .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-soft); }
      #message-input:focus-visible { outline: none; box-shadow: none; }
      .compose-row { gap: 8px; padding: 12px 14px; }
      .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: transparent; color: var(--muted); }
      .icon-btn:not(.send):hover { background: var(--panel-subtle); color: var(--text); }
      /* The composer action stays icon-only: one compact primary action, no CTA copy. */
      .send { width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background-color: var(--accent); color: var(--panel); box-shadow: none; font-size: 20px; font-weight: 500; line-height: 1; transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 120ms cubic-bezier(0.4, 0, 1, 1), opacity 120ms linear; will-change: transform, opacity; }
      .send:hover { background-color: color-mix(in srgb, var(--accent) 88%, #000); color: var(--panel); box-shadow: none; }
      .send[data-primary-action="stop"] { background-color: var(--text); color: var(--panel); box-shadow: none; }
      .send[data-primary-action="stop"]:hover { background-color: color-mix(in srgb, var(--text) 92%, var(--panel)); color: var(--panel); box-shadow: none; }
      .send .control-stop { fill: currentColor; stroke: none; }
      .send:active { transform: scale(.96); opacity: .86; }
      .send:not(:active) { transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease-out; }
      .interrupt { border-radius: 12px; color: var(--danger); }
      .interrupt:hover, .interrupt:focus-visible { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); }
      .icon-btn:disabled { opacity: .45; cursor: wait; }
      textarea { min-width: 0; min-height: 44px; max-height: 160px; padding: 10px 5px 8px; color: var(--text); font-size: 15px; line-height: 1.55; }
      textarea::placeholder { color: var(--dim); }
      .pending-files { gap: 8px; padding: 10px 14px 0; }
      .file-chip { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-subtle); padding: 7px 10px; color: var(--muted); font-size: 12px; }
      .file-chip b { color: var(--text); font-weight: 500; }
      .composer-context-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 7px 14px 8px; border-top: 1px solid var(--separator); }
      .composer-context-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
      .composer-context-controls > div { flex: 0 0 auto; max-width: 100%; }
      .composer-language-trigger-label, .composer-style-trigger-label, .composer-knowledge-trigger-label { flex-shrink: 0; white-space: nowrap; }
      .composer-hint { min-width: 0; color: var(--dim); font-size: var(--font-meta-size); font-weight: var(--weight-regular); line-height: 1.35; }
      .composer-statusbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; min-width: 0; padding: 2px 8px 0; color: var(--muted); font-size: var(--font-meta-size); font-weight: var(--weight-regular); line-height: 1.4; }
      .composer-task-label { min-width: 0; flex: 1 1 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .composer-token-label { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
      .model-usage-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 44px; padding: 4px 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
      .model-usage-trigger:hover, .model-usage-trigger[aria-expanded="true"] { color: var(--text); }
      .model-usage-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .composer-hint[hidden], .composer-statusbar[hidden], .model-usage-panel[hidden] { display: none; }
      .context-ring { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
      .context-ring-track { opacity: .22; }
      .context-ring-value { stroke: var(--accent); transform: rotate(-90deg); transform-origin: center; stroke-linecap: round; }
      .model-usage-panel { position: fixed; z-index: 45; box-sizing: border-box; width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; border: 1px solid var(--separator); border-radius: var(--radius-control); background: var(--panel-raised); box-shadow: var(--shadow-overlay); color: var(--text); font-size: var(--font-meta-size); }
      .model-usage-panel:focus { outline: none; }
      .model-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .model-usage-head strong { font-size: var(--font-meta-size); font-weight: var(--weight-medium); }
      .model-usage-panel .knowledge-popover-close { width: 32px; height: 32px; min-height: 32px; }
      .model-usage-panel dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; margin: 6px 0; }
      .model-usage-panel dt { color: var(--muted); }
      .model-usage-panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
      .model-usage-panel p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
      .task-progress-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: -4px 0 8px 28px; color: var(--muted); font-size: var(--font-meta-size); line-height: 1.6; font-variant-numeric: tabular-nums; }
      .task-progress-copy [data-task-elapsed] { white-space: nowrap; }
      @media (max-width: 600px) { .composer-statusbar { gap: 0 12px; padding-inline: 4px; } .composer-task-label { flex-basis: 100%; padding-top: 8px; } .composer-token-label { margin-right: auto; } }
      .composer-language { position: relative; flex: 0 0 auto; }
      .composer-language-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-compact-height); max-width: 260px; border: 1px solid var(--separator); border-radius: 10px; background: transparent; padding: 5px 9px; color: var(--muted); cursor: pointer; font: inherit; font-size: var(--font-control-size); font-weight: var(--weight-medium); line-height: 1.2; }
      .composer-language-trigger:hover, .composer-language-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--separator)); background: var(--accent-soft); color: var(--text); }
      .composer-language-trigger.has-selection, .composer-style-trigger.has-selection, .composer-knowledge-trigger.has-selection { border-color: color-mix(in srgb, var(--accent) 48%, var(--separator)); background: color-mix(in srgb, var(--accent-soft) 72%, transparent); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
      .composer-language-trigger.is-personalized, .composer-style-trigger.is-personalized { border-color: color-mix(in srgb, var(--accent) 72%, var(--separator)); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
      .composer-language-trigger.has-selection:hover, .composer-language-trigger.has-selection[aria-expanded="true"], .composer-style-trigger.has-selection:hover, .composer-style-trigger.has-selection[aria-expanded="true"], .composer-knowledge-trigger.has-selection:hover, .composer-knowledge-trigger.has-selection[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
      .composer-language-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .composer-language-trigger-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); }
      .composer-language-trigger-icon path, .composer-language-trigger-icon circle { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
      .composer-language-trigger-label { color: inherit; }
      .composer-language-trigger-value { overflow: hidden; min-width: 0; max-width: 150px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
      .composer-language-trigger-chevron { width: 12px; height: 12px; flex: 0 0 12px; color: var(--dim); }
      .composer-language-trigger-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
      .composer-language-trigger[aria-expanded="true"] .composer-language-trigger-chevron { transform: rotate(180deg); color: var(--accent); }
      .composer-language-popover { position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(420px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 112px)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-overlay); transform-origin: bottom left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.985); transition: opacity 180ms var(--motion-standard), transform var(--motion-spring), visibility 0s linear 300ms; }
      .composer-language-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
      .language-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--separator); }
      .language-popover-heading { display: grid; gap: 3px; min-width: 0; }
      .language-popover-heading strong { color: var(--text); font-size: 13px; font-weight: 600; }
      .language-popover-heading span { color: var(--muted); font-size: 11px; line-height: 1.4; }
      .language-popover-close { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
      .language-popover-close:hover, .language-popover-close:focus-visible { background: var(--panel-subtle); color: var(--text); }
      .language-popover-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .language-popover-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; min-height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-subtle); padding: 0 10px; }
      .language-popover-search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
      .language-popover-search svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--dim); }
      .language-popover-search svg circle, .language-popover-search svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
      .language-popover-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
      .language-popover-search input::placeholder { color: var(--dim); }
      .language-popover-status { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px 8px; color: var(--muted); font-size: 11px; }
      .language-popover-status-actions { display: inline-flex; align-items: center; gap: 6px; }
      .language-popover-action { border: 0; background: transparent; padding: 3px 4px; color: var(--accent); cursor: pointer; font: inherit; font-size: 11px; }
      .language-popover-action:hover, .language-popover-action:focus-visible { color: var(--text); outline: 0; }
      .language-popover-action:disabled { color: var(--dim); cursor: default; }
      .language-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px; min-height: 0; overflow-y: auto; padding: 0 8px 10px; scrollbar-color: var(--selected-strong) transparent; }
      .language-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 50px; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 8px 10px; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
      .language-option:hover { background: var(--panel-subtle); }
      .language-option.selected { border-color: color-mix(in srgb, var(--accent) 40%, var(--separator)); background: var(--accent-soft); }
      .language-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .language-option-mark { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--separator); border-radius: 50%; color: transparent; font-size: 11px; line-height: 1; }
      .language-option.selected .language-option-mark { border-color: var(--accent); background: var(--accent); color: #fff; }
      .language-option-copy { display: grid; gap: 2px; min-width: 0; }
      .language-option-copy strong { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
      .language-option-copy span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
      .language-empty { padding: 24px 14px; color: var(--muted); font-size: 12px; text-align: center; }
      .composer-knowledge { position: relative; flex: 0 0 auto; }
      .composer-knowledge-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-compact-height); min-width: 0; max-width: 220px; box-sizing: border-box; border: 1px solid var(--separator); border-radius: 10px; background: transparent; padding: 5px 9px; color: var(--muted); cursor: pointer; font: inherit; font-size: var(--font-control-size); font-weight: var(--weight-medium); line-height: 1.2; transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), box-shadow var(--motion-standard), transform var(--motion-spring); }
      .composer-knowledge-trigger:hover, .composer-knowledge-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--separator)); background: var(--accent-soft); color: var(--text); }
      .composer-knowledge-trigger:active { transform: scale(.98); }
      .composer-knowledge-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .composer-knowledge-trigger-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); }
      .composer-knowledge-trigger-icon path, .composer-knowledge-trigger-icon rect { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
      .composer-knowledge-trigger-label { color: inherit; }
      .composer-knowledge-trigger-value { overflow: hidden; min-width: 0; max-width: 116px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
      .composer-knowledge-trigger-chevron { width: 12px; height: 12px; flex: 0 0 12px; color: var(--dim); transition: transform var(--motion-spring), color var(--motion-standard); }
      .composer-knowledge-trigger-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
      .composer-knowledge-trigger[aria-expanded="true"] .composer-knowledge-trigger-chevron { transform: rotate(180deg); color: var(--accent); }
      .composer-knowledge-popover { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 10px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(380px, calc(100vw - 32px)); max-height: min(500px, calc(100vh - 112px)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-overlay); transform-origin: bottom left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.985); transition: opacity 180ms var(--motion-standard), transform var(--motion-spring), visibility 0s linear 300ms; }
      .composer-knowledge-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
      .pptx-format-setting { padding: 12px 16px 16px; border-top: 1px solid var(--separator); display: grid; gap: 8px; }
      .pptx-format-setting[hidden] { display: none; }
      .pptx-format-setting label { color: var(--text); font-size: var(--font-control-size); }
      .pptx-format-setting select { min-height: 44px; width: 100%; padding: 8px; border: 1px solid var(--separator); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: var(--font-control-size); }
      .pptx-format-setting small { color: var(--dim); font-size: 12px; line-height: 1.5; }
      .composer-style { position: relative; flex: 0 0 auto; }
      .composer-style-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-compact-height); max-width: 220px; border: 1px solid var(--separator); border-radius: 10px; background: transparent; padding: 5px 9px; color: var(--muted); cursor: pointer; font: inherit; font-size: var(--font-control-size); font-weight: var(--weight-medium); line-height: 1.2; transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), box-shadow var(--motion-standard), transform var(--motion-spring); }
      .composer-style-trigger:hover, .composer-style-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--separator)); background: var(--accent-soft); color: var(--text); }
      .composer-style-trigger:active { transform: scale(.98); }
      .composer-style-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .composer-style-icon { display: block; width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); }
      .composer-style-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
      .composer-style-value { overflow: hidden; min-width: 0; max-width: 112px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
      .composer-style-chevron { width: 12px; height: 12px; flex: 0 0 12px; color: var(--dim); transition: transform var(--motion-spring), color var(--motion-standard); }
      .composer-style-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
      .composer-style-trigger[aria-expanded="true"] .composer-style-chevron { transform: rotate(180deg); color: var(--accent); }
      .composer-style-popover { position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 0; width: min(380px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-overlay); transform-origin: bottom left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.985); transition: opacity 180ms var(--motion-standard), transform var(--motion-spring), visibility 0s linear 300ms; }
      .composer-style-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
      .composer-style-popover { display: flex; flex-direction: column; max-height: min(680px, calc(100dvh - 140px)); }
      .composer-style-popover > .language-popover-header, .pptx-format-setting { flex-shrink: 0; }
      .style-popover-list { display: grid; gap: 2px; min-height: 0; flex: 1 1 auto; max-height: min(430px, calc(100vh - 180px)); overflow: auto; padding: 7px; }
      .style-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 52px; border: 0; border-radius: 9px; background: transparent; padding: 8px 10px; color: var(--text); cursor: pointer; text-align: left; transition: background-color var(--motion-standard), transform var(--motion-spring); }
      .style-option:hover, .style-option:focus-visible { background: var(--panel-subtle); outline: 0; }
      .style-option:active { transform: scale(.985); }
      .style-option-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--separator); border-radius: 50%; color: transparent; font-size: 11px; }
      .style-option.selected .style-option-mark { border-color: var(--accent); background: var(--accent); color: white; }
      .style-option-copy { min-width: 0; }
      .style-option-copy strong, .style-option-copy span { display: block; }
      .style-option-copy strong { font-size: 13px; font-weight: 600; }
      .style-option-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }
      .personalization-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
      .personalization-stat { border: 1px solid var(--separator); border-radius: 12px; background: var(--panel-subtle); padding: 14px; }
      .personalization-stat strong, .personalization-stat span { display: block; }
      .personalization-stat strong { font-size: 20px; }
      .personalization-stat span { margin-top: 4px; color: var(--muted); font-size: 11px; }
      .knowledge-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--separator); }
      .knowledge-popover-heading { display: grid; gap: 3px; min-width: 0; }
      .knowledge-popover-heading strong { color: var(--text); font-size: 13px; font-weight: 600; }
      .knowledge-popover-heading span { color: var(--muted); font-size: 11px; line-height: 1.4; }
      .knowledge-popover-close { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--motion-standard), color var(--motion-standard), transform var(--motion-spring); }
      .knowledge-popover-close:hover, .knowledge-popover-close:focus-visible { background: var(--panel-subtle); color: var(--text); }
      .knowledge-popover-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .knowledge-popover-close:active { transform: scale(.94); }
      .knowledge-popover-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; min-height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-subtle); padding: 0 10px; }
      .knowledge-popover-search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
      .knowledge-popover-search svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--dim); }
      .knowledge-popover-search svg circle, .knowledge-popover-search svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
      .knowledge-popover-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
      .knowledge-popover-search input::placeholder { color: var(--dim); }
      .knowledge-popover-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px; color: var(--muted); font-size: 11px; }
      .knowledge-popover-actions > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .knowledge-popover-action { border: 0; background: transparent; padding: 4px 5px; color: var(--accent); cursor: pointer; font: inherit; font-size: 11px; }
      .knowledge-popover-action:hover, .knowledge-popover-action:focus-visible { color: var(--text); outline: 0; }
      .knowledge-book-list { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; padding: 0 8px 10px; scrollbar-color: var(--selected-strong) transparent; }
      .knowledge-book-card { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 9px; width: 100%; min-height: 64px; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 10px; color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), transform var(--motion-spring); }
      .knowledge-book-card:hover { background: var(--panel-subtle); }
      .knowledge-book-card:active { transform: scale(.99); }
      .knowledge-book-card.selected { border-color: color-mix(in srgb, var(--accent) 40%, var(--separator)); background: var(--accent-soft); }
      .knowledge-book-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .knowledge-book-mark { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--separator); border-radius: 50%; color: transparent; font-size: 11px; line-height: 1; transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), transform var(--motion-spring); }
      .knowledge-book-card.selected .knowledge-book-mark { border-color: var(--accent); background: var(--accent); color: #fff; transform: scale(1.02); }
      .knowledge-book-copy { display: grid; gap: 3px; min-width: 0; }
      .knowledge-book-copy strong { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
      .knowledge-book-copy span { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
      .knowledge-book-count { align-self: center; color: var(--dim); font-size: 11px; white-space: nowrap; }
      .knowledge-book-empty { padding: 24px 14px; color: var(--muted); font-size: 12px; text-align: center; }
      @media (max-width: 760px) { .composer-context-row { align-items: flex-start; } .composer-context-controls { flex-wrap: wrap; } .composer-language-popover, .composer-knowledge-popover, .composer-style-popover { position: fixed; right: 16px; bottom: 86px; left: 16px; width: auto; max-height: min(520px, calc(100vh - 110px)); transform-origin: bottom center; } }
      @media (max-width: 480px) { .composer-knowledge-trigger { width: auto; max-width: 100%; } }
      .footer { margin-top: 8px; color: var(--dim); font-size: 11px; }
      .quality-report { --quality-tone: var(--yellow); margin: 0 0 4px; color: var(--text); }
      .quality-report[data-tone="suggestion"] { --quality-tone: var(--muted); }
      .quality-report[data-tone="blocked"] { --quality-tone: var(--danger); }
      .quality-report-summary { cursor: pointer; }
      .quality-report-icon { color: var(--quality-tone); }
      .quality-report-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .quality-report-title { display: grid; min-width: 0; gap: 4px; }
      .quality-report-title strong { color: var(--text); font-size: var(--font-control-size); font-weight: var(--weight-medium); line-height: 1.5; }
      .quality-report-title span { color: var(--muted); font-size: var(--font-meta-size); line-height: 1.5; overflow-wrap: anywhere; }
      .quality-report[data-tone="suggestion"] .quality-report-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
      .quality-report[data-tone="suggestion"] .quality-report-title strong { font-weight: var(--weight-regular); }
      .quality-report-title .quality-report-file { flex-basis: 100%; }
      .quality-report-toggle svg { transition: transform var(--motion-standard); }
      .quality-report.is-expanded .quality-report-toggle svg { transform: rotate(180deg); }
      .quality-report-reveal, .library-concept-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--motion-return-duration) var(--motion-return-easing), opacity var(--motion-standard); }
      .quality-report.is-expanded .quality-report-reveal, .library-concept-detail.is-expanded .library-concept-reveal { grid-template-rows: 1fr; opacity: 1; }
      .quality-report-clip, .library-concept-clip { min-height: 0; overflow: hidden; }
      .quality-report-body { max-height: min(480px, 52vh); overflow: auto; border-top: 1px solid var(--separator); padding: 4px 0 8px 30px; }
      .quality-report-list { margin: 0; padding: 0; list-style: none; }
      .quality-report-item { padding: 12px 0; }
      .quality-report-item + .quality-report-item { border-top: 1px solid var(--separator); }
      .quality-report-item > strong { display: block; margin-bottom: 8px; font-size: var(--font-control-size); font-weight: var(--weight-medium); }
      .quality-report-level { display: inline-block; margin-right: 8px; color: var(--yellow); font-size: var(--font-meta-size); font-weight: var(--weight-medium); }
      .quality-report-item[data-severity="soft"] .quality-report-level { color: var(--accent); }
      .quality-report-evidence { margin: 7px 0 0; }
      .quality-report-evidence dt { color: var(--muted); font-size: var(--font-meta-size); }
      .quality-report-evidence dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--font-control-size); line-height: 1.55; }
      .quality-report-advice { margin: 8px 0 0; color: var(--muted); font-size: var(--font-meta-size); line-height: 1.5; }
      @media (prefers-reduced-motion: reduce) { .quality-report-reveal, .library-concept-reveal { transition: none; } }
      .jump-latest { display: inline-flex; align-items: center; gap: 8px; right: clamp(24px, 6vw, 96px); bottom: 22px; min-height: 44px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow-soft); padding: 10px 16px; color: var(--accent); font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0; }
      .jump-latest:hover, .jump-latest:focus-visible { background: var(--panel-subtle); }
      .command-menu { bottom: calc(100% + 10px); max-height: min(420px, 52vh); border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-overlay); }
      .command-head { padding: 10px 14px; border-bottom: 1px solid var(--separator); color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
      .command-item { min-height: 44px; gap: 16px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
      .command-item:hover, .command-item.active { background: var(--panel-subtle); }
      .command-name { color: var(--text); font-weight: 500; }
      .command-description { color: var(--muted); }
      .overlay { align-items: center; justify-content: center; padding: 24px; background: rgb(0 0 0 / 24%); backdrop-filter: blur(6px); }
      .dialog { width: min(560px, 100%); height: auto; max-height: min(760px, calc(100vh - 48px)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel); box-shadow: var(--shadow-overlay); animation: surface-in .22s cubic-bezier(.2,.8,.2,1); }
      .dialog-header { min-height: 64px; padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--separator); }
      .dialog-header-main { gap: 12px; }
      .dialog-back, .dialog-close { width: 44px; height: 44px; border-radius: 22px; color: var(--muted); font-size: 20px; }
      .dialog-back:hover, .dialog-close:hover { background: var(--panel-subtle); color: var(--text); }
      .dialog-title { color: var(--text); font-size: 16px; font-weight: 600; }
      .dialog-subtitle { margin-left: 8px; color: var(--muted); font-size: 12px; }
      .dialog-body { padding: 12px; }
      .dialog-footer { min-height: 48px; padding: 10px 20px; border-top: 1px solid var(--separator); color: var(--dim); font-size: 11px; }
      .selector-section { padding: 12px 10px 8px; color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
      .selector-row { min-height: 56px; gap: 12px; margin: 2px 0; border-left: 0; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
      button.selector-row { border: 0; }
      .selector-row:hover, .selector-row.selected { background: var(--panel-subtle); border-left-color: transparent; }
      .selector-mark { display: block; width: 8px; height: 8px; margin-top: 6px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--accent); }
      .selector-mark-active { border-color: var(--accent); background: var(--accent); }
      .selector-mark-complete { border-color: var(--green); background: var(--green); }
      .selector-mark-neutral { border-color: var(--dim); background: var(--dim); }
      .selector-main strong { color: var(--text); font-size: 13px; font-weight: 500; }
      .selector-main small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
      .selector-value { color: var(--muted); font-size: 12px; }
      .tree-row { min-height: 44px; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
      .tree-row:hover { background: var(--panel-subtle); }
      .tree-role { color: var(--accent); }
      .hotkey-grid div { min-height: 44px; padding: 12px 10px; border-bottom: 1px solid var(--separator); font-size: 12px; }
      .hotkey-grid div:nth-child(odd) { color: var(--text); font-weight: 500; }
      .hotkey-grid div:nth-child(even) { color: var(--muted); }
      .empty-state { padding: 32px 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
      .empty-workspace { display: grid; justify-items: center; gap: 8px; padding: clamp(72px, 16vh, 160px) 20px 120px; color: var(--muted); text-align: center; }
      .empty-workspace strong { color: var(--text); font-size: 16px; font-weight: 600; }
      .empty-workspace span { font-size: 13px; line-height: 1.6; }
      .session-rename-form { display: grid; gap: 8px; }
      .session-rename-form label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
      .session-rename-form input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-subtle); padding: 10px 12px; color: var(--text); font: inherit; font-size: 14px; }
      .session-rename-form select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-subtle); padding: 0 12px; color: var(--text); font: inherit; font-size: 14px; }
      .session-rename-form input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
      .session-rename-form select:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
      .modal-layer { padding: 24px; background: rgb(0 0 0 / 28%); backdrop-filter: blur(6px); }
      .modal { width: min(520px, 100%); max-height: min(680px, calc(100vh - 48px)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel); box-shadow: var(--shadow-overlay); animation: surface-in .22s cubic-bezier(.2,.8,.2,1); }
      .modal-header { min-height: 64px; padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--separator); }
      .modal-title { color: var(--text); font-size: 16px; font-weight: 600; }
      .modal-subtitle { margin-left: 8px; color: var(--muted); font-size: 12px; }
      .modal-body { padding: 16px; }
      .modal-footer { gap: 8px; padding: 12px 16px; border-top: 1px solid var(--separator); }
      .modal-close, .modal-action { min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: transparent; padding: 10px 16px; color: var(--text); font-size: 13px; }
      .modal-close { width: 44px; padding: 0; border: 0; border-radius: 22px; color: var(--muted); font-size: 20px; }
      .modal-close:hover, .modal-action:hover { background: var(--panel-subtle); }
      .modal-action.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
      .modal-action.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
      .confirmation-modal .modal { width: min(440px, 100%); }
      .confirmation-modal .modal-header { border-bottom: 0; padding: 18px 16px 0 24px; }
      .confirmation-modal .modal-title { font-size: 18px; font-weight: var(--weight-semibold); line-height: 1.4; }
      .confirmation-modal .modal-subtitle { display: none; }
      .confirmation-modal .modal-body { padding: 14px 24px 8px; }
      .confirmation-subject { margin: 0 0 10px; color: var(--text); font-size: var(--font-control-size); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
      .confirmation-description { margin: 0; color: var(--muted); font-size: var(--font-body-size); line-height: 1.65; }
      .confirmation-modal .modal-footer { border-top: 0; padding: 18px 24px 24px; }
      .confirmation-modal .modal-action { min-width: 88px; font: inherit; font-size: var(--font-control-size); font-weight: var(--weight-medium); }
      .confirmation-modal .modal-action.danger { border-color: var(--danger); background: var(--danger); color: var(--panel); }
      .confirmation-modal .modal-action.danger:hover { background: color-mix(in srgb, var(--danger) 88%, var(--text)); }
      @media (max-width: 480px) { .confirmation-modal .modal-footer .modal-action { flex: 1; } }
      .more-menu-row { min-height: 56px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--separator); border-radius: 0; }
      .more-menu-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
      .more-menu-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
      .more-menu-row:hover { background: var(--panel-subtle); }
      .more-menu-icon { color: var(--muted); font-size: 15px; }
      .more-menu-main strong { color: var(--text); font-size: 13px; font-weight: 500; }
      .more-menu-main small { margin-top: 3px; color: var(--muted); font-size: 12px; }
      .more-menu-arrow { color: var(--dim); font-size: 18px; }
      .more-menu-row:focus-visible, .command-item:focus-visible, .selector-row:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent); }
      .account:focus-visible { outline: 0; background: var(--panel-subtle); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent); }
      .session-menu:focus-visible, .account:focus-visible, .dialog-back:focus-visible, .dialog-close:focus-visible, .modal-close:focus-visible, .modal-action:focus-visible, .artifact-download:focus-visible, .icon-btn:focus-visible, .jump-latest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      @keyframes surface-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
      @media (pointer: coarse) { .session-menu { opacity: 1; } }
      @media (max-width: 860px) {
        .app { grid-template-columns: 1fr; }
        .sidebar { display: none; }
        .mobile-sessions { display: inline-grid; place-items: center; }
        .shortcuts { display: none; }
        .transcript { padding: 24px 16px 36px; }
        .jump-latest { right: 16px; bottom: 16px; }
      }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      }
    
/* Translation Agent source style 3 */

      .auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--page); color: var(--text); }
      .boot-screen { min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: var(--page); color: var(--text); }
      .boot-status { display: grid; justify-items: center; gap: 16px; color: var(--muted); font-size: 13px; }
      .boot-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--separator); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-soft); overflow: hidden; }
      .boot-mark-fallback { color: var(--accent); font-size: 18px; font-weight: 600; line-height: 1; transition: opacity 100ms ease; }
      .boot-mark img { position: absolute; inset: 9px; display: block; width: 30px; height: 30px; object-fit: contain; opacity: 0; transition: opacity 100ms ease; }
      .boot-mark.has-image .boot-mark-fallback { opacity: 0; }
      .boot-mark.has-image img { opacity: 1; }
      .boot-progress { width: 16px; height: 16px; border: 1.5px solid var(--separator); border-top-color: var(--accent); border-radius: 50%; animation: boot-progress .8s linear infinite; }
      .boot-status p { margin: 0; }
      @keyframes boot-progress { to { transform: rotate(360deg); } }
      .auth-card { width: min(100%, 360px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
      .auth-mark { display: none; }
      .auth-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 13px; letter-spacing: 0; }
      .auth-card h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
      .auth-intro { margin: 10px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.6; }
      .auth-form { display: grid; gap: 16px; }
      .auth-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
      .auth-form input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--canvas); color: var(--text); font: inherit; outline: none; }
      .auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent); }
      .auth-submit { min-height: 44px; margin-top: 4px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
      .auth-submit:disabled { opacity: .6; cursor: wait; }
      .auth-error { margin: -2px 0 0; color: #bd3b3b; font-size: 13px; line-height: 1.5; }
      .auth-notice { margin: -2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
      .auth-switch { display: flex; justify-content: center; margin: 18px 0 0; }
      .auth-link { border: 0; background: transparent; padding: 4px 8px; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
      .auth-link:hover, .auth-link:focus-visible { color: var(--text); outline: 0; }
      .settings-footer { display: flex; justify-content: flex-end; padding: 14px 10px 4px; border-top: 1px solid var(--separator); }
      .user-review-actions { display: flex; gap: 8px; padding: 0 12px 8px 52px; }
      .user-review-actions button { min-height: 32px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
      .user-review-actions button:hover, .user-review-actions button:focus-visible { background: var(--panel-subtle); color: var(--text); outline: 0; }
      .user-review-actions button[data-review-decision="approved"] { color: var(--accent); }
      .user-review-actions button[data-review-decision="rejected"] { color: var(--danger); }
      .skill-intro { margin: 0 10px 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
      .skill-list { display: grid; gap: 8px; }
      .skill-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--separator); border-radius: 10px; background: var(--panel-subtle); }
      .skill-card strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
      .skill-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
      .skill-card button { min-height: 32px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); padding: 5px 9px; cursor: pointer; font: inherit; font-size: 12px; }
      .skill-card button:hover, .skill-card button:focus-visible { background: var(--panel); color: var(--text); outline: 0; }
      .skill-install { display: grid; gap: 14px; margin-top: 16px; padding: 16px 12px 4px; border-top: 1px solid var(--separator); }
      .skill-install label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
      .skill-install input[name="source"] { min-height: 44px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 10px 12px; font: inherit; font-size: 13px; }
      .skill-install input[name="source"]:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
      .skill-install-file { gap: 7px !important; }
      .skill-install-label { color: var(--muted); }
      .skill-file-picker { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 6px; transition: background-color var(--motion-standard), border-color var(--motion-standard), box-shadow var(--motion-standard); }
      .skill-file-picker:hover { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: var(--panel-subtle); }
      .skill-install-file:focus-within .skill-file-picker { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
      .skill-file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
      .skill-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; flex: 0 0 auto; border: 1px solid var(--separator); border-radius: 8px; background: var(--panel-subtle); padding: 6px 11px; color: var(--text); font-size: 12px; font-weight: 500; transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), transform var(--motion-spring); }
      .skill-file-picker:hover .skill-file-button { border-color: color-mix(in srgb, var(--accent) 40%, var(--separator)); background: var(--accent-soft); color: var(--accent); }
      .skill-file-button:active { transform: scale(.98); }
      .skill-file-name { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
      .skill-file-name.has-file { color: var(--text); }
      .skill-install-hint { margin: -2px 0 0; color: var(--dim); font-size: 11px; line-height: 1.4; }
      .skill-install button[type="submit"] { justify-self: end; min-height: 40px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; padding: 8px 15px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; transition: background-color var(--motion-standard), opacity var(--motion-standard), transform var(--motion-spring); }
      .skill-install button[type="submit"]:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
      .skill-install button[type="submit"]:active { transform: scale(.98); }
      .skill-install button:disabled { opacity: .55; cursor: wait; }
      :root[data-theme="dark"] .auth-card { box-shadow: none; }
      @media (max-width: 480px) { .auth-card { padding: 0 8px; } }
      @media (prefers-reduced-motion: reduce) { .boot-progress { animation: none; border-color: var(--separator); border-top-color: var(--accent); } }
    
/* Translation Agent source style 4 (unified-design-system) */

      /* Unified utility surface: content first, one accent, calm state feedback. */
      .crumb, .footer { display: none !important; }
      body, .app, .sidebar, .workspace, .topbar, .transcript, .composer-shell, .composer,
      .account, .new-session, .session, .session-menu,
      .artifact-row, .dialog, .modal, .command-menu, .jump-latest,
      .auth-screen, .auth-card, .auth-form input {
        transition: background-color var(--motion-standard), color var(--motion-standard), border-color var(--motion-standard), box-shadow var(--motion-standard);
      }
      .dialog, .modal { transition: transform var(--motion-spring), opacity var(--motion-standard), background-color var(--motion-standard), border-color var(--motion-standard), box-shadow var(--motion-standard); }
      button, a, input, textarea, select {
        transition: background-color var(--motion-return-duration) var(--motion-return-easing),
          color var(--motion-return-duration) var(--motion-return-easing),
          border-color var(--motion-return-duration) var(--motion-return-easing),
          box-shadow var(--motion-return-duration) var(--motion-return-easing),
          opacity var(--motion-return-duration) var(--motion-return-easing),
          transform var(--motion-spring-duration) var(--motion-spring-easing);
      }
      .icon-btn:not(:disabled):active, .modal-action:not(:disabled):active, .auth-submit:not(:disabled):active,
      .artifact-download:active, .jump-latest:not(:disabled):active, .new-session:not(:disabled):active { transform: scale(.98); }
      button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .new-session:hover, .account:hover, .session:hover, .session.active:hover { background: var(--panel-subtle); }
      .session.active { background: var(--selected); }
      .session.active:hover { background: var(--selected-strong); }
      .session-menu { transition: opacity var(--motion-standard), background-color var(--motion-standard), color var(--motion-standard); }
      .session-menu:hover { background: var(--panel-subtle); color: var(--text); }
      .icon-btn:not(.send):hover { background: var(--panel-subtle); color: var(--text); }
      .interrupt:hover, .interrupt:focus-visible { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); }
      /* One result surface; file delivery, review and terminology share a row contract. */
      .translation-result { width: min(100%, var(--reading-measure)); margin: 24px 0 8px; padding-top: 8px; border-top: 1px solid var(--separator); }
      .result-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 80px; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: var(--control-height); border: 0; border-radius: 0; background: transparent; padding: 0; color: var(--text); font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-regular); text-align: left; }
      .result-row-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .result-row-icon:not(.quality-report-icon) { color: var(--muted); }
      .result-action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 80px; min-height: var(--control-height); border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; padding: 0; color: var(--accent); font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-regular); text-decoration: none; white-space: nowrap; }
      .result-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .result-action:hover, button.result-row:hover .result-action { background: transparent; box-shadow: none; color: color-mix(in srgb, var(--accent) 82%, var(--text)); text-decoration: none; }
      .result-action:focus-visible, .result-row:focus-visible { background: transparent; box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; }
      .result-action:active, button.result-row:active { opacity: .72; }
      .artifacts { margin: 0 0 4px; padding-bottom: 8px; border: 0; background: transparent; }
      .artifact-row { min-height: 72px; padding: 12px 0; }
      .artifact-row + .artifact-row { border-top: 1px solid var(--separator); }
      .artifact-copy { min-width: 0; }
      .artifact-name { display: block; overflow-wrap: anywhere; color: var(--text); font-size: var(--font-body-size); font-weight: var(--weight-medium); line-height: 1.5; }
      .artifact-meta { display: block; margin-top: 4px; color: var(--muted); font-size: var(--font-meta-size); line-height: 1.5; overflow-wrap: anywhere; }
      .jump-latest { transition: opacity var(--motion-standard), transform var(--motion-spring), background-color var(--motion-standard), color var(--motion-standard), border-color var(--motion-standard), box-shadow var(--motion-standard); }
      .message-user { border-radius: 12px; background: var(--user); }
      .tool, .notice { border-radius: 8px; }
      .more-menu-row { grid-template-columns: minmax(0, 1fr) 12px; border-radius: 0; }
      .more-menu-icon { display: none; }
      .more-menu-arrow { position: relative; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
      .more-menu-arrow::after { content: none; }
      .more-menu-row, .command-item, .selector-row, .tree-row { transition: background-color var(--motion-standard), color var(--motion-standard), box-shadow var(--motion-standard); }
      .command-menu:not([hidden]) { animation: surface-in .18s cubic-bezier(.2, .8, .2, 1); }
      .overlay, .modal-layer { transition: opacity var(--motion-standard); }
      .overlay.is-closing, .modal-layer.is-closing { opacity: 0; pointer-events: none; }
      .is-closing .dialog, .is-closing .modal { transform: translateY(6px) scale(.985); }
      .dialog-close, .dialog-back, .modal-close, .modal-action { transition: background-color var(--motion-standard), color var(--motion-standard), border-color var(--motion-standard), opacity var(--motion-standard), transform var(--motion-spring); }
      .dialog-close:active, .dialog-back:active, .modal-close:active, .modal-action:active { transform: scale(.96); }
      .modal-action.primary:hover, .auth-submit:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
      .modal-action.primary:active, .auth-submit:active { transform: scale(.98); opacity: .86; }
      .library-intro { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
      .library-create-form { display: grid; gap: 0; }
      .library-create-note { margin: 0; padding: 18px 24px 16px; border-bottom: 1px solid var(--separator); background: var(--panel-subtle); color: var(--muted); font-size: 13px; line-height: 1.55; }
      .library-create-section { display: grid; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--separator); }
      .library-create-section:last-child { border-bottom: 0; }
      .library-create-section-heading { display: grid; gap: 3px; }
      .library-create-section-heading strong { color: var(--text); font-size: 14px; font-weight: 600; }
      .library-create-section-heading span { color: var(--muted); font-size: 12px; line-height: 1.45; }
      .library-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
      .library-create-field { display: grid; min-width: 0; gap: 7px; color: var(--muted); font-size: 12px; line-height: 1.35; }
      .library-create-field.full { grid-column: 1 / -1; }
      .library-create-field input, .library-create-field select, .library-create-field textarea { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.35; }
      .library-create-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
      .library-create-field input::placeholder, .library-create-field textarea::placeholder { color: var(--dim); }
      .library-create-field input:focus-visible, .library-create-field select:focus-visible, .library-create-field textarea:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
      .library-create-modal .modal { width: min(700px, 100%); max-height: min(760px, calc(100vh - 48px)); }
      .library-create-modal .modal-body { padding: 0; }
      .library-create-modal .modal-footer { padding: 14px 24px 20px; background: var(--panel-subtle); }
      .library-create-modal .modal-footer .modal-action { min-width: 88px; }
      .library-list { display: grid; gap: 8px; margin-top: 16px; }
      .library-entry { display: grid; gap: 6px; padding: 12px; border-bottom: 1px solid var(--separator); }
      .library-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .library-entry-title { color: var(--text); font-size: 13px; font-weight: 600; }
      .library-entry-meta, .library-entry-copy { color: var(--muted); font-size: 12px; line-height: 1.55; }
      .library-entry-copy { white-space: pre-wrap; }
      .library-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--panel-subtle); color: var(--muted); font-size: 11px; }
      .library-badge.pending { color: var(--accent); }
      .library-badge.rejected { color: var(--danger); }
      .library-review-actions { display: flex; gap: 8px; margin-top: 4px; }
      .library-review-actions .modal-action { min-height: 34px; padding: 7px 11px; }
      @media (max-width: 600px) { .library-create-grid { grid-template-columns: 1fr; } .library-create-field.full { grid-column: auto; } .library-create-section { padding: 18px 20px; } .library-create-note { padding-right: 20px; padding-left: 20px; } .library-create-modal .modal-footer { padding-right: 20px; padding-left: 20px; } }
      .session-menu { position: relative; font-size: 0; }
      .session-menu::before { content: ""; position: absolute; top: 19px; left: 18px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 5px 0 currentColor, 10px 0 currentColor; }
      .auth-screen { align-items: start; padding-top: clamp(72px, 17vh, 156px); }
      .auth-card { width: min(100%, 400px); padding: 0 20px; }
      .auth-mark { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 0 22px; overflow: hidden; border: 0; border-radius: 16px; background: transparent; }
      .auth-mark img { width: 100%; height: 100%; object-fit: contain; }
      .auth-eyebrow { margin-bottom: 9px; color: var(--muted); font-size: 13px; font-weight: 500; }
      .auth-card h1 { font-size: 30px; line-height: 1.2; }
      .auth-intro { max-width: 300px; margin: 10px 0 32px; }
      .auth-form { gap: 18px; }
      .auth-form label { gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
      .auth-form input { min-height: 48px; border-color: var(--border); border-radius: 10px; background: var(--panel); }
      .auth-submit { min-height: 48px; margin-top: 4px; border-radius: 10px; font-weight: 600; transition: background-color var(--motion-standard), opacity var(--motion-standard), transform var(--motion-spring); }
      .auth-form input { transition: border-color var(--motion-standard), box-shadow var(--motion-standard), background-color var(--motion-standard); }
      .toast-region { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
      .toast { display: grid; gap: 2px; border: 1px solid var(--separator); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-soft); padding: 12px 14px; color: var(--text); pointer-events: auto; animation: toast-in .18s cubic-bezier(.2, .8, .2, 1); transition: opacity var(--motion-standard), transform var(--motion-standard); }
      .toast.is-leaving { opacity: 0; transform: translateY(6px); }
      .toast strong { font-size: 13px; font-weight: 600; }
      .toast span { color: var(--muted); font-size: 12px; line-height: 1.4; }
      .toast.error { border-color: color-mix(in srgb, var(--danger) 42%, var(--separator)); }
      .toast.error strong { color: var(--danger); }
      @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      .auth-footnote { margin: 22px 0 0; color: var(--dim); font-size: 12px; }
      .auth-form[hidden] { display: none; }
      /* Utility controls use the same inline SVG stroke language. */
      .jump-latest.is-showing { opacity: 0; transform: translateY(6px); }
      .jump-latest.is-hiding { opacity: 0; transform: translateY(6px); pointer-events: none; }
      #header-model { display: none; }
      @media (max-width: 860px) { .toast-region { right: 16px; bottom: 16px; } }
      @media (prefers-reduced-motion: reduce) {
        .toast { animation: none; }
        body, .app, .sidebar, .workspace, .topbar, .transcript, .composer-shell, .composer,
        .account, .new-session, .session, .session-menu,
        .artifact-row, .dialog, .modal, .command-menu, .jump-latest,
        .auth-screen, .auth-card, .auth-form input, button, a { transition: none !important; }
        .icon-btn:not(:disabled):active, .modal-action:not(:disabled):active, .auth-submit:not(:disabled):active,
        .artifact-download:active, .jump-latest:not(:disabled):active, .new-session:not(:disabled):active, .dialog-close:active, .dialog-back:active, .modal-close:active { transform: none; }
        .send, .send:not(:active) { transition: opacity 80ms linear; }
        .send:active { transform: none; opacity: .7; }
      }
    
/* Translation Agent source style 5 */

      /* Shared library is a utility workspace: calm surfaces, compact rows, native scrolling. */
      .library-screen { position: fixed; z-index: 70; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--page); color: var(--text); overflow: hidden; }
      .library-screen.is-closing { animation: library-screen-out .18s ease-in forwards; }
      @keyframes library-screen-out { from { opacity: 1; } to { opacity: 0; } }
      .library-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 12px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--separator); background: var(--panel); }
      .library-screen-heading, .library-screen-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
      .library-back { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); cursor: pointer; font-size: 28px; line-height: 1; }
      .library-back:hover, .library-back:focus-visible, .library-icon-button:hover, .library-icon-button:focus-visible { background: var(--panel-subtle); color: var(--text); outline: 0; }
      .library-screen-title { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.25; }
      .library-screen-subtitle { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
      .library-screen-actions { gap: 8px; }
      .library-quiet-button, .library-primary-button { min-height: 40px; border: 1px solid var(--separator); border-radius: 10px; padding: 8px 14px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
      .library-quiet-button:hover, .library-quiet-button:focus-visible { background: var(--panel-subtle); outline: 0; }
      .library-danger-button { color: var(--danger); }
      .library-danger-button:hover, .library-danger-button:focus-visible { border-color: color-mix(in srgb, var(--danger) 32%, var(--separator)); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
      .library-primary-button { border-color: var(--accent); background: var(--accent); color: #fff; }
      .library-primary-button:hover, .library-primary-button:focus-visible { background: color-mix(in srgb, var(--accent) 86%, #000); outline: 0; }
      .library-screen-body { min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 56px) 48px; }
      .library-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(5, minmax(126px, 164px)); gap: 8px; align-items: center; max-width: 1440px; margin: 0 auto; }
      .library-search-wrap { display: flex; align-items: center; gap: 8px; min-height: 42px; border: 1px solid var(--separator); border-radius: 10px; background: var(--panel); padding: 0 12px; color: var(--muted); }
      .library-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
      .library-search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
      .library-search-wrap input::placeholder { color: var(--dim); }
      .workspace-select { position: relative; min-width: 0; }
      .workspace-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--control-compact-height); border: 1px solid var(--separator); border-radius: var(--radius-control); background: var(--panel); color: var(--text); padding: 8px 12px; font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-medium); text-align: left; cursor: pointer; }
      .workspace-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .workspace-select-trigger svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .workspace-select-trigger:hover { background: var(--panel-subtle); }
      .workspace-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .workspace-select-trigger:disabled { color: var(--dim); cursor: default; }
      .workspace-select-menu { position: fixed; z-index: 110; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--separator); border-radius: var(--radius-control); background: var(--panel-raised); box-shadow: var(--shadow-soft); padding: 4px; }
      .workspace-select-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control-height); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); padding: 8px 10px; font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-regular); text-align: left; cursor: pointer; }
      .workspace-select-option:hover, .workspace-select-option:focus-visible { background: var(--selected); outline: 0; }
      .workspace-select-option[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
      .workspace-select-option svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
      .workspace-select-option[aria-selected="true"] svg { opacity: 1; }
      .workspace-select-option:disabled { color: var(--dim); cursor: default; }
      .library-summary { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1440px; margin: 20px auto 14px; color: var(--muted); font-size: 12px; }
      .library-stat { display: inline-flex; align-items: baseline; gap: 6px; }
      .library-stat strong { color: var(--text); font-size: 18px; font-weight: 600; }
      .library-create-panel { max-width: 1440px; margin: 0 auto 16px; border-bottom: 1px solid var(--separator); padding: 0 0 18px; }
      .library-create-panel .library-form { max-width: 920px; margin: 0; }
      .library-table-shell { max-width: 1440px; margin: 0 auto; border: 1px solid var(--separator); border-radius: 12px; background: var(--panel); overflow: hidden; }
      .library-table-scroll { overflow: auto; }
      .library-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
      .library-table th, .library-table td { border-bottom: 1px solid var(--separator); padding: 12px 14px; text-align: left; vertical-align: middle; }
      .library-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-subtle); color: var(--muted); font-size: var(--font-meta-size); font-weight: var(--weight-medium); white-space: nowrap; }
      .library-table td { color: var(--text); font-size: var(--font-control-size); line-height: 1.4; }
      .library-table tbody tr { transition: background-color var(--motion-standard); }
      .library-table tbody tr:hover { background: var(--panel-subtle); }
      .library-table tbody tr:last-child td { border-bottom: 0; }
      .library-table th:first-child, .library-table td:first-child { width: 44px; padding-right: 4px; padding-left: 14px; }
      .library-table th:nth-child(2), .library-table td:nth-child(2) { width: 21%; }
      .library-table th:nth-child(3), .library-table td:nth-child(3) { width: 25%; }
      .library-table th:nth-child(4), .library-table td:nth-child(4) { width: 13%; }
      .library-table th:nth-child(5), .library-table td:nth-child(5) { width: 11%; }
      .library-table th:nth-child(6), .library-table td:nth-child(6) { width: 11%; }
      .library-table th:nth-child(7), .library-table td:nth-child(7) { width: 11%; }
      .library-table th:nth-child(8), .library-table td:nth-child(8) { width: 110px; }
      .library-table th:last-child, .library-table td:last-child { width: 42px; padding-right: 14px; }
      .library-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
      .library-cell-main { display: block; overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
      .library-cell-sub:not(td) { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: var(--font-meta-size); text-overflow: ellipsis; white-space: nowrap; }
      .library-table td.library-cell-sub { color: var(--muted); font-size: var(--font-meta-size); white-space: nowrap; }
      .library-table-badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius-sm); background: var(--panel-subtle); padding: 3px 8px; color: var(--muted); font-family: var(--font-ui); font-size: var(--font-meta-size); font-weight: var(--weight-regular); white-space: nowrap; }
      .library-table-badge.approved { gap: 6px; padding: 0; background: transparent; color: var(--muted); font-family: var(--font-ui); font-size: var(--font-meta-size); font-weight: var(--weight-regular); }
      .library-table-badge.approved::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
      .library-table-badge.pending { color: var(--accent); }
      .library-table-badge.rejected { color: var(--danger); }
      .library-row-action { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
      .library-row-action:hover, .library-row-action:focus-visible { background: var(--panel-subtle); color: var(--text); outline: 0; }
      .library-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-top: 1px solid var(--separator); padding: 8px 14px; color: var(--muted); font-size: 12px; }
      .library-pagination-actions { display: flex; gap: 6px; }
      .library-page-button { min-width: 36px; min-height: 36px; border: 1px solid var(--separator); border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
      .library-page-button:hover:not(:disabled), .library-page-button:focus-visible:not(:disabled) { background: var(--panel-subtle); outline: 0; }
      .library-page-button:disabled { color: var(--dim); cursor: not-allowed; }
      .library-bulkbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--separator); background: var(--panel-subtle); padding: 8px 14px; }
      .library-bulk-count { margin-right: auto; color: var(--text); font-size: 12px; }
      .library-bulkbar select, .library-bulkbar button:not(.workspace-select-trigger) { min-height: 34px; border: 1px solid var(--separator); border-radius: 8px; background: var(--panel); color: var(--text); padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
      .library-bulkbar button:not(.workspace-select-trigger):hover, .library-bulkbar button:not(.workspace-select-trigger):focus-visible { background: var(--selected); outline: 0; }
      .library-bulkbar .library-bulk-primary { border-color: var(--accent); color: var(--accent); }
      .library-detail { position: absolute; z-index: 2; top: 72px; right: 0; bottom: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(420px, 92vw); border-left: 1px solid var(--separator); background: var(--panel); box-shadow: -14px 0 38px rgb(0 0 0 / 10%); animation: library-detail-in .2s cubic-bezier(.2,.8,.2,1); }
      @keyframes library-detail-in { from { opacity: .2; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
      .library-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 76px; border-bottom: 1px solid var(--separator); padding: 20px; }
      .library-detail-kicker { color: var(--muted); font-size: 11px; }
      .library-detail-title { margin-top: 5px; color: var(--text); font-size: 16px; font-weight: 600; }
      .library-icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
      .library-detail-form { min-height: 0; overflow: auto; padding: 20px; }
      .library-detail-fields { display: grid; gap: 14px; }
      .library-detail-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
      .library-detail-field input, .library-detail-field select, .library-detail-field textarea { width: 100%; min-height: 42px; border: 1px solid var(--separator); border-radius: 9px; background: var(--page); color: var(--text); padding: 9px 10px; font: inherit; font-size: 13px; }
      .library-detail-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
      .library-detail-field input:focus-visible, .library-detail-field select:focus-visible, .library-detail-field textarea:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
      .library-detail-actions { display: flex; gap: 8px; margin-top: 22px; }
      .library-detail-actions button { min-height: 42px; border: 1px solid var(--separator); border-radius: 9px; background: transparent; color: var(--text); padding: 9px 14px; font: inherit; font-size: 13px; cursor: pointer; }
      .library-detail-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
      .library-detail-actions button:hover, .library-detail-actions button:focus-visible { background: var(--panel-subtle); outline: 0; }
      .library-detail-actions button.primary:hover, .library-detail-actions button.primary:focus-visible { background: color-mix(in srgb, var(--accent) 86%, #000); }
      .library-empty { padding: 56px 20px; color: var(--muted); text-align: center; font-size: 13px; }
      .library-concept-row { cursor: default; }
      .library-concept-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
      .library-concept-title .library-cell-main { min-width: 0; }
      .library-language-versions { display: flex; flex-wrap: wrap; gap: 5px; }
      .library-language-version { display: inline-flex; align-items: center; min-height: 24px; border: 1px solid var(--separator); border-radius: 7px; padding: 2px 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
      .library-concept-disclosure { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
      .library-concept-disclosure:hover, .library-concept-disclosure:focus-visible { background: var(--panel-subtle); color: var(--text); outline: 0; }
      .library-concept-disclosure svg { width: 16px; height: 16px; transition: transform var(--motion-standard); }
      .library-concept-disclosure[aria-expanded="true"] svg { transform: rotate(90deg); }
      .library-concept-detail td { padding: 0 !important; border-bottom: 0; background: var(--panel); }
      .library-concept-expressions { display: grid; padding: 8px 20px 12px 58px; }
      .library-concept-expression { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 64px; border-bottom: 1px solid var(--separator); }
      .library-concept-expression:last-child { border-bottom: 0; }
      .library-expression-side { min-width: 0; }
      .library-expression-language { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--font-meta-size); }
      .library-expression-text { display: block; color: var(--text); font-size: var(--font-control-size); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
      .library-expression-arrow { width: 18px; height: 18px; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
      .library-expression-open { justify-self: start; min-height: var(--control-height); border: 0; border-radius: var(--radius-sm); background: transparent; padding: 0 12px; color: var(--accent); cursor: pointer; font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-medium); }
      .library-expression-open:hover { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
      .library-expression-open:focus-visible { background: transparent; box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
      .library-load-status { min-height: 18px; margin: 0 0 12px; color: var(--muted); font-size: var(--font-meta-size); }
      .library-merge-review { display: flex; align-items: center; gap: 12px; max-width: 1440px; min-height: 48px; margin: 0 auto 14px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--separator)); border-radius: 10px; background: var(--accent-soft); padding: 8px 12px; color: var(--muted); font-size: 12px; }
      .library-merge-review strong { color: var(--text); font-weight: 600; }
      .library-merge-review button { margin-left: auto; min-height: 34px; border: 0; border-radius: 8px; background: transparent; padding: 0 10px; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; }
      .library-merge-review button:hover, .library-merge-review button:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: 0; }
      .concept-assignment-list, .concept-merge-list { display: grid; gap: 0; }
      .concept-assignment-row, .concept-merge-row { display: grid; gap: 9px; padding: 14px 4px; border-bottom: 1px solid var(--separator); }
      .concept-assignment-row:last-child, .concept-merge-row:last-child { border-bottom: 0; }
      .concept-assignment-copy { display: grid; gap: 4px; }
      .concept-assignment-copy strong { color: var(--text); font-size: var(--font-control-size); font-weight: var(--weight-semibold); }
      .concept-assignment-copy span { color: var(--muted); font-size: var(--font-meta-size); }
      .concept-assignment-row select { width: 100%; min-height: 42px; border: 1px solid var(--separator); border-radius: 9px; background: var(--panel); color: var(--text); padding: 0 10px; font: inherit; font-size: 12px; }
      .concept-merge-actions { display: flex; gap: 8px; }
      .concept-merge-actions button { min-height: 36px; border: 1px solid var(--separator); border-radius: 8px; background: transparent; padding: 0 11px; color: var(--text); cursor: pointer; font: inherit; font-size: 12px; }
      .concept-merge-actions button.primary { border-color: var(--accent); color: var(--accent); }
      @media (max-width: 960px) { .library-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 1fr)); } .library-toolbar select:nth-of-type(n+3) { grid-row: auto; } .library-concept-expressions { padding-left: 18px; } }
      @media (max-width: 640px) { .library-screen-header { align-items: flex-start; padding: 12px 16px; } .library-screen-actions { align-items: flex-end; flex-direction: column; gap: 4px; } .library-screen-actions button { min-height: 36px; padding: 6px 10px; font-size: 12px; } .library-screen-body { padding: 16px 12px 32px; } .library-toolbar { grid-template-columns: 1fr 1fr; } .library-search-wrap { grid-column: 1 / -1; } .library-summary { gap: 12px; margin-top: 16px; } .library-detail { top: 64px; width: 100%; } }
      @media (prefers-reduced-motion: reduce) { .library-screen, .library-screen.is-closing, .library-detail { animation: none; } .library-table tbody tr { transition: none; } }
      .library-index-view { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 64px; }
      .library-index-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 42px; }
      .library-index-heading { min-width: 0; }
      .library-index-title { margin: 0; color: var(--text); font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
      .library-index-copy { max-width: 540px; margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
      .library-index-search { display: flex; align-items: center; gap: 9px; flex: 0 0 min(340px, 100%); min-height: 44px; border: 1px solid var(--separator); border-radius: 10px; background: var(--panel); padding: 0 13px; color: var(--muted); }
      .library-index-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
      .library-index-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
      .library-index-search input::placeholder { color: var(--dim); }
      .library-index-section { margin-top: 34px; }
      .library-index-section[hidden] { display: none; }
      .library-index-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 600; }
      .library-index-section-title span { color: var(--muted); font-size: 12px; font-weight: 400; }
      /* BEGIN WORDBOOK SURFACES — shared by shelf, inner page and suggestions. */
      .library-notebook-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 40px; padding: 8px 0 16px; }
      .library-notebook-row { display: block; width: 100%; max-width: 200px; min-width: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; padding: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
      .library-notebook-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
      .library-notebook-row:disabled { cursor: wait; }
      .library-book-cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 2px 4px 4px 2px; box-shadow: var(--book-rest-shadow); background: var(--book-paper); color: var(--book-ink); container-type: inline-size; isolation: isolate; }
      .library-book-cover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--book-hover-shadow); opacity: 0; pointer-events: none; transition: opacity var(--motion-standard); }
      .library-notebook-row:focus-visible .library-book-cover::before { opacity: 1; }
      @media (hover: hover) and (pointer: fine) { .library-notebook-row:not(:disabled):hover .library-book-cover::before { opacity: 1; } }
      .library-notebook-row:not(:disabled):active .library-book-cover { opacity: .94; }
      .library-book-cover-surface { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background-color: var(--book-paper); background-image: linear-gradient(145deg, var(--book-paper-lit) 0%, var(--book-paper) 58%, var(--book-paper-shade) 100%); }
      .library-book-cover-content { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 12fr) minmax(0, 68fr) minmax(0, 20fr); padding: 12% 11%; min-width: 0; }
      .library-book-cover-kind { align-self: start; font-size: 11px; font-size: clamp(10px, 5.6cqi, 12px); font-weight: 400; line-height: 1.5; color: var(--book-caption); }
      .library-book-cover-name { align-self: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 3.36em; overflow: hidden; overflow-wrap: anywhere; min-width: 0; font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif; font-size: clamp(20px, 3.2vw, 40px); font-size: clamp(20px, 20cqi, 44px); font-weight: 400; line-height: 1.12; letter-spacing: -.04em; text-align: start; }
      .library-book-cover-long .library-book-cover-name { font-size: clamp(16px, 2.7vw, 32px); font-size: clamp(16px, 16cqi, 32px); letter-spacing: -.025em; }
      .library-book-cover-caption { align-self: end; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 2.8em; overflow: hidden; overflow-wrap: anywhere; font-family: var(--font-ui); font-weight: 400; font-size: 12px; font-size: clamp(11px, 6.5cqi, 14px); line-height: 1.4; color: var(--book-caption); }
      .library-book-cover-art .library-book-cover-surface { background-color: #30445d; background-image: var(--book-art); background-size: cover; background-position: center; color: #f5f4ef; }
      .library-book-cover-art .library-book-cover-content { grid-template-rows: minmax(0, 12fr) minmax(0, 88fr); }
      .library-book-cover-art .library-book-cover-kind { color: #f5f4ef; }
      .library-book-cover-art .library-book-cover-name { align-self: start; margin-top: 8%; font-family: var(--font-ui); font-weight: 500; font-size: 24px; font-size: clamp(16px, 11.5cqi, 24px); line-height: 1.4; letter-spacing: 0; max-height: 4.2em; }
      .library-book-cover-mini { width: 78px; flex: 0 0 78px; }
      .library-book-cover-mini .library-book-cover-content { grid-template-rows: minmax(0, 1fr); }
      .library-book-cover-mini .library-book-cover-kind, .library-book-cover-mini .library-book-cover-caption { display: none; }
      .library-book-cover-mini .library-book-cover-name { margin-top: 0; align-self: center; font-size: 10px; font-size: clamp(10px, 16cqi, 13px); line-height: 1.2; max-height: 3.6em; letter-spacing: -.015em; }
      .library-notebook-main { display: block; min-width: 0; margin-top: 16px; }
      .library-notebook-name { display: block; overflow-wrap: anywhere; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.6; }
      .library-notebook-count, .library-notebook-languages { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.6; }
      .library-personal-empty { grid-column: 1 / -1; padding: 24px 0; color: var(--muted); font-size: 13px; }
      .library-book-heading { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; min-width: 0; }
      .library-book-heading-copy { min-width: 0; }
      .library-book-heading h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
      .library-book-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
      .suggestion-popover-heading .library-book-cover-mini { width: 52px; flex-basis: 52px; }
      @media (max-width: 800px) { .library-notebook-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
      @media (max-width: 600px) { .library-notebook-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .library-notebook-name { font-size: 13px; } .library-book-heading { gap: 16px; } .library-book-heading h1 { font-size: 20px; } .library-book-cover-mini { width: 72px; flex-basis: 72px; } }
      @media (prefers-reduced-motion: reduce) { .library-book-cover::before { transition: none; } }
      .library-notebook-match { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
      .library-notebook-match-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
      /* END WORDBOOK SURFACES */
      .library-index-recent { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 34px; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); color: var(--muted); font-size: 12px; }
      .library-index-recent strong { color: var(--text); font-size: 13px; font-weight: 500; }
      .library-index-recent .library-recent-divider { width: 1px; height: 16px; background: var(--separator); }
      .library-index-recent button { margin-left: auto; border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; }
      .library-index-recent button:hover, .library-index-recent button:focus-visible { text-decoration: underline; outline: 0; }
      .library-index-empty { padding: 48px 0; color: var(--muted); text-align: center; font-size: 13px; }
      .library-detail-view[hidden], .library-index-view[hidden] { display: none; }
      @media (max-width: 800px) { .library-index-intro { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 30px; } .library-index-search { flex-basis: auto; } }
      @media (max-width: 520px) { .library-index-view { padding-top: 24px; } .library-index-title { font-size: 28px; } }
    
/* Translation Agent source style 6 (kinetic-scenes) */

      .kinetic-scene {
        --kinetic-x: 50%;
        --kinetic-y: 50%;
        --kinetic-glow-halo: color-mix(in srgb, var(--accent) 22%, transparent);
        --kinetic-glow-core: color-mix(in srgb, var(--accent) 12%, transparent);
        --kinetic-glow-blend: normal;
        --kinetic-ring-alpha: .18;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background:
          radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%),
          radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
          var(--page);
      }
      .kinetic-canvas, .kinetic-grid, .kinetic-glow, .kinetic-orbit { position: absolute; pointer-events: none; }
      .kinetic-canvas { z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .9; }
      .kinetic-grid {
        z-index: -3;
        inset: -32px;
        background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 1px, transparent 1.25px);
        background-size: 30px 30px;
        opacity: .42;
        mask-image: radial-gradient(circle 580px at var(--kinetic-x) var(--kinetic-y), #000 0%, rgb(0 0 0 / 68%) 42%, transparent 76%);
        transform: translate3d(var(--kinetic-grid-x, 0), var(--kinetic-grid-y, 0), 0);
        will-change: transform, mask-image;
      }
      .kinetic-glow {
        z-index: -2;
        inset: 0;
        background:
          radial-gradient(circle 420px at var(--kinetic-x) var(--kinetic-y), var(--kinetic-glow-halo), transparent 70%),
          radial-gradient(circle 170px at var(--kinetic-x) var(--kinetic-y), var(--kinetic-glow-core), transparent 75%);
        mix-blend-mode: var(--kinetic-glow-blend);
        opacity: .82;
      }
      .kinetic-orbit {
        z-index: -1;
        top: 50%;
        left: 50%;
        width: min(68vw, 720px);
        aspect-ratio: 1;
        border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
        border-radius: 50%;
        transform: translate3d(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px)), 0) rotate(-12deg);
        opacity: .72;
        will-change: transform;
      }
      .kinetic-orbit::before, .kinetic-orbit::after {
        content: "";
        position: absolute;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
        border-radius: 50%;
      }
      .kinetic-orbit::before { inset: 14%; animation: kinetic-orbit 18s linear infinite; }
      .kinetic-orbit::after { inset: 31%; border-style: dashed; animation: kinetic-orbit 12s linear infinite reverse; }
      .kinetic-orbit span {
        position: absolute;
        top: 13.5%;
        left: 50%;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 48%, transparent);
        animation: kinetic-pulse 2.8s ease-in-out infinite;
      }
      @keyframes kinetic-orbit { to { transform: rotate(360deg); } }
      @keyframes kinetic-pulse { 50% { transform: scale(1.35); opacity: .7; } }

      .auth-screen.kinetic-scene { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
      .auth-screen .kinetic-orbit { width: min(82vw, 880px); opacity: .52; }
      .auth-card {
        position: relative;
        z-index: 2;
        width: min(100%, 430px);
        border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
        border-radius: 28px;
        background: color-mix(in srgb, var(--panel) 84%, transparent);
        box-shadow: 0 28px 80px rgb(0 0 0 / 12%), inset 0 1px rgb(255 255 255 / 55%);
        padding: 34px;
        backdrop-filter: blur(26px) saturate(145%);
        transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
        transform-style: preserve-3d;
        will-change: transform;
      }
      .auth-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle 260px at var(--kinetic-x-pct, 50%) var(--kinetic-y-pct, 50%), rgb(255 255 255 / 22%), transparent 66%);
        pointer-events: none;
      }
      .auth-mark, .auth-eyebrow, .auth-card h1, .auth-intro, .auth-form { position: relative; z-index: 1; }
      .auth-mark { width: 52px; height: 52px; margin-bottom: 24px; border-radius: 15px; box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 18%, transparent); }
      .auth-eyebrow { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
      .auth-card h1 { font-size: clamp(30px, 4vw, 38px); letter-spacing: -.035em; }
      .auth-intro { max-width: 340px; margin-bottom: 30px; font-size: 14px; }
      .auth-form input { background: color-mix(in srgb, var(--panel) 76%, transparent); backdrop-filter: blur(12px); }
      .auth-submit { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent); }

      .launch-screen {
        position: fixed;
        inset: 0;
        z-index: 20;
        min-height: 100vh;
        overflow: hidden;
        background: var(--page);
        color: var(--text);
      }
      .launch-screen .kinetic-orbit { width: min(70vw, 820px); opacity: .62; }
      .launch-header {
        position: absolute;
        inset: 0 0 auto;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 76px;
        padding: 18px clamp(22px, 3vw, 48px);
      }
      .launch-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
      .launch-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 50%; }
      .launch-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
      .launch-brand strong { font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: -.015em; }
      .launch-account {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        border-radius: 22px;
        background: color-mix(in srgb, var(--panel) 64%, transparent);
        padding: 5px 14px 5px 6px;
        color: var(--text);
        font: inherit;
        text-align: left;
        backdrop-filter: blur(18px) saturate(135%);
        cursor: pointer;
      }
      .launch-account-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: var(--weight-semibold); }
      .launch-account-copy { display: grid; gap: 1px; }
      .launch-account-copy strong { font-size: 12px; font-weight: 600; }
      .launch-account-copy small { color: var(--muted); font-size: 10px; }
      .launch-account:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); background: color-mix(in srgb, var(--panel) 82%, transparent); }
      .launch-main { position: relative; z-index: 2; display: grid; min-height: 100vh; place-items: center; padding: 112px 24px 72px; }
      .launch-copy {
        position: relative;
        z-index: 2;
        display: grid;
        justify-items: center;
        max-width: 760px;
        text-align: center;
        transform: translate3d(var(--copy-x, 0px), var(--copy-y, 0px), 0);
        will-change: transform;
      }
      .launch-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .025em; }
      .launch-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
      .launch-copy h1 { max-width: 720px; margin: 0; color: var(--text); font-size: clamp(42px, 6vw, 78px); font-weight: 680; line-height: 1.02; letter-spacing: -.055em; }
      .launch-copy > p { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
      .launch-action { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; min-height: 46px; margin-top: 32px; border: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px rgb(255 255 255 / 18%); padding: 0 24px; color: #fff; font: inherit; font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-return-duration) var(--motion-return-easing), box-shadow var(--motion-return-duration) var(--motion-return-easing), color var(--motion-return-duration) var(--motion-return-easing); }
      .launch-action:hover { background: color-mix(in srgb, var(--accent) 92%, #000); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px rgb(255 255 255 / 22%); }
      .launch-action:active { transform: scale(.985); }
      .launch-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
      .launch-action:disabled { opacity: .62; cursor: wait; transform: none; }

      :root[data-theme="dark"] .kinetic-scene { background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 35%), radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 38%), var(--page); }
      :root[data-theme="dark"] .kinetic-scene { --kinetic-glow-core: rgb(255 255 255 / 38%); --kinetic-glow-blend: screen; --kinetic-ring-alpha: .09; }
      :root[data-theme="dark"] .auth-card { background: color-mix(in srgb, var(--panel) 76%, transparent); box-shadow: 0 34px 90px rgb(0 0 0 / 38%), inset 0 1px rgb(255 255 255 / 8%); }
      :root[data-theme="dark"] .auth-card::before { background: radial-gradient(circle 260px at var(--kinetic-x-pct, 50%) var(--kinetic-y-pct, 50%), rgb(255 255 255 / 7%), transparent 68%); }
      @media (max-width: 640px) {
        .auth-screen.kinetic-scene { align-items: center; padding: 20px; }
        .auth-card { width: 100%; border-radius: 24px; padding: 28px 22px; }
        .launch-header { min-height: 68px; padding: 14px 18px; }
        .launch-brand strong { display: none; }
        .launch-account-copy { display: none; }
        .launch-account { width: 42px; padding: 4px; }
        .launch-main { padding: 96px 20px 54px; }
        .launch-copy h1 { font-size: clamp(42px, 13vw, 58px); }
        .launch-copy > p { max-width: 330px; font-size: 14px; }
        .kinetic-orbit { width: 118vw; }
      }
      @media not all and (pointer: fine), (prefers-reduced-motion: reduce) {
        .kinetic-grid { transform: none !important; }
        .kinetic-orbit { transform: translate3d(-50%, -50%, 0) rotate(-12deg) !important; }
        .auth-card, .launch-copy { transform: none !important; }
        .kinetic-orbit::before, .kinetic-orbit::after, .kinetic-orbit span { animation: none !important; }
      }
    
/* Translation Agent source style 7 (library-apple-overrides) */

      /* Shared glossary directory: a single, quiet language for every notebook. */
      .library-index-view { max-width: min(1200px, 100%); margin: 0 auto; padding: clamp(36px, 5vw, 64px) 0 80px; }
      .library-index-intro { align-items: flex-start; gap: 40px; margin-bottom: 46px; }
      .library-index-title { font-size: clamp(30px, 3vw, 38px); font-weight: var(--weight-semibold); letter-spacing: -.035em; }
      .library-index-copy { max-width: 560px; margin-top: 10px; font-size: 14px; line-height: 1.6; }
      .library-index-search { flex: 0 1 320px; min-height: 44px; box-sizing: border-box; border-color: var(--border); border-radius: 12px; background: var(--panel); padding: 0 14px; }
      .library-index-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
      .library-search-symbol { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
      .library-index-section { margin-top: 34px; }
      .library-index-section-title { gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
      .library-index-section-title span { font-size: 12px; }
      .library-inline-action { min-height: 32px; margin-left: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 0 12px; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; transition: background-color var(--motion-return-duration) var(--motion-return-easing), border-color var(--motion-return-duration) var(--motion-return-easing), box-shadow var(--motion-return-duration) var(--motion-return-easing), transform var(--motion-spring-duration) var(--motion-spring-easing); }
      .library-inline-action:hover, .library-inline-action:focus-visible { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); background: var(--panel-subtle); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 12%, transparent); outline: 0; }
      .library-index-recent { gap: 10px; min-height: 52px; box-sizing: border-box; margin-top: 34px; border: 1px solid var(--separator); border-radius: 12px; background: var(--panel-subtle); padding: 0 16px; }
      .library-recent-symbol { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
      .library-index-recent strong { font-size: 12px; font-weight: 600; }
      .library-index-recent .library-recent-divider { height: 16px; background: var(--separator); }
      .library-index-recent button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-left: auto; border-radius: 8px; padding: 0 8px; color: var(--accent); }
      .library-index-recent button:hover, .library-index-recent button:focus-visible { background: var(--panel); text-decoration: none; outline: 0; }
      .library-inline-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
      @media (max-width: 800px) {
        .library-index-view { padding-right: 20px; padding-left: 20px; }
        .library-index-intro { gap: 20px; margin-bottom: 32px; }
        .library-index-search { flex-basis: auto; width: 100%; }
      }
      @media (max-width: 520px) {
        .library-index-view { padding: 28px 16px 56px; }
        .library-index-title { font-size: 30px; }
        .library-index-recent { align-items: flex-start; flex-wrap: wrap; padding: 8px 12px; }
        .library-index-recent button { width: 100%; justify-content: flex-end; margin-left: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
      }
    
/* Translation Agent source style 8 (unified-motion-system) */

      /* Apple-style motion: calm on hover, immediate on press, and always interruptible. */
      @supports (animation-timing-function: linear(0, 1)) {
        :root {
          --motion-spring-easing: linear(0, .012, .049, .107, .185, .278, .383, .493, .601, .702, .791, .865, .924, .967, .995, 1.013, 1.019, 1.016, 1.009, 1.003, 1);
          --motion-return-easing: linear(0, .0037, .0142, .031, .0534, .0804, .1108, .1438, .1784, .2135, .2484, .3145, .3746, .4283, .4755, .5562, .6215, .6726, .7112, .7735, .8196, .854, .8793, .9185, .9458, .9647, .9779, .9921, 1);
          --motion-press-easing: linear(0, .006, .03, .09, .2, .38, .63, .82, .95, 1);
        }
      }
      @media (hover: hover) and (pointer: fine) {
        button:hover, a:hover, input:focus-visible, textarea:focus-visible, select:focus-visible {
          transition-duration: var(--motion-hover-duration);
          transition-timing-function: var(--motion-hover-easing);
        }
      }
      button:not(:disabled):active, a:active { transition-duration: var(--motion-press-duration); transition-timing-function: var(--motion-press-easing); }
      .icon-btn:not(:disabled):active, .modal-action:not(:disabled):active, .auth-submit:not(:disabled):active,
      .artifact-download:active, .jump-latest:not(:disabled):active, .new-session:not(:disabled):active { transform: scale(.985); }

      /* Hover changes tone only; press acknowledges the action without moving its hit target. */
      .auth-submit:hover, .launch-action:hover, .library-primary-button:hover,
      .modal-action.primary:hover { box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 18%, transparent); }
      .new-session:hover, .account:hover, .session:hover, .session.active:hover, .session-menu:hover,
      .icon-btn:not(.send):hover, .interrupt:hover, .dialog-back:hover, .dialog-close:hover, .modal-close:hover,
      .modal-action:hover, .command-item:hover, .selector-row:hover, .tree-row:hover,
      .user-review-actions button:hover, .skill-card button:hover, .library-quiet-button:hover,
      .library-row-action:hover, .library-page-button:hover, .library-bulkbar button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); }

      @media (prefers-reduced-motion: reduce) {
        button, a, input, textarea, select { transition: none !important; }
      }
    
/* Translation Agent source style 9 (icon-alignment-system) */

      /*
       * Icon controls share one geometry contract. Glyphs have font side-bearings
       * and baselines, so text characters are hidden and the visual mark is drawn
       * from a centered box instead of relying on the font's advance width.
       */
      .icon-btn:not(.send),
      .dialog-back,
      .dialog-close,
      .modal-close,
      .library-back,
      .library-icon-button,
      .session-menu,
      .library-row-action {
        position: relative;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: 0;
        line-height: 0;
        text-align: center;
        transition:
          background-color var(--motion-hover-duration) var(--motion-hover-easing),
          color var(--motion-hover-duration) var(--motion-hover-easing),
          box-shadow var(--motion-hover-duration) var(--motion-hover-easing),
          opacity var(--motion-hover-duration) var(--motion-hover-easing),
          transform var(--motion-press-duration) var(--motion-press-easing);
      }

      /* One circular primary action, shared by send and stop. */
      .icon-btn.send {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        padding: 0;
        line-height: 0;
      }

      /* Keep the primary action anchored to the composer edge at every width.
       * The text field may shrink; the action must never be pushed or wrapped. */
      .compose-row {
        min-width: 0;
        align-items: center;
      }
      .compose-row > textarea {
        min-width: 0;
      }
      .compose-row > .send {
        margin-left: auto;
      }
      .compose-row > .send .control-send {
        display: block;
        flex: 0 0 20px;
        margin: 0 auto;
      }
      .icon-btn:not(.send):disabled,
      .dialog-back:disabled,
      .dialog-close:disabled,
      .modal-close:disabled,
      .library-back:disabled,
      .library-icon-button:disabled,
      .session-menu:disabled,
      .library-row-action:disabled { cursor: wait; }

      .icon-btn:not(.send):hover,
      .icon-btn:not(.send):focus-visible,
      .dialog-back:hover,
      .dialog-back:focus-visible,
      .dialog-close:hover,
      .dialog-close:focus-visible,
      .modal-close:hover,
      .modal-close:focus-visible,
      .library-back:hover,
      .library-back:focus-visible,
      .library-icon-button:hover,
      .library-icon-button:focus-visible,
      .session-menu:hover,
      .session-menu:focus-visible,
      .library-row-action:hover,
      .library-row-action:focus-visible {
        background: var(--panel-subtle);
        color: var(--text);
        outline: 0;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
      }

      .icon-btn:not(.send):focus-visible,
      .dialog-back:focus-visible,
      .dialog-close:focus-visible,
      .modal-close:focus-visible,
      .library-back:focus-visible,
      .library-icon-button:focus-visible,
      .session-menu:focus-visible,
      .library-row-action:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .session-menu::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 3px;
        margin: 0;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 5px 0 currentColor, 10px 0 currentColor;
        transform: translate(-6.5px, -50%);
      }

      .control-icon {
        display: block;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
      }
      .control-send { width: 20px; height: 20px; flex-basis: 20px; stroke-width: 1.8; }
      .title { display: flex; min-width: 0; align-items: center; gap: 8px; }
      .title #session-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .jump-icon { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; border: 0; transform: none; }

      .library-table th:last-child,
      .library-table td:last-child { width: 52px; padding-right: 4px; padding-left: 4px; }

      .library-search-wrap > span {
        display: block;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin: 0;
      }

      @media (prefers-reduced-motion: reduce) {
        .icon-btn, .dialog-back, .dialog-close, .modal-close, .library-back,
        .library-icon-button, .session-menu, .library-row-action { transition: none !important; }
      }
    
/* Translation Agent source style 10 (personalization-action-design) */

      /* Preference rows and attached term suggestions share one action contract. */
      .personalization-suggestion-row {
        grid-template-columns: 8px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        min-height: 80px;
        padding: 14px 12px;
      }
      .personalization-suggestion-row > .selector-mark {
        align-self: start;
        margin-top: 9px;
      }
      .personalization-suggestion-row .selector-main strong { font-weight: 600; }
      .personalization-suggestion-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
      }
      .suggestion-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--control-height);
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        background: transparent;
        padding: 8px 12px;
        color: var(--muted);
        cursor: pointer;
        font-family: var(--font-ui);
        font-size: var(--font-control-size);
        font-weight: var(--weight-medium);
        line-height: 1.2;
        letter-spacing: 0;
        white-space: nowrap;
        transition:
          background-color var(--motion-return-duration) var(--motion-return-easing),
          border-color var(--motion-return-duration) var(--motion-return-easing),
          color var(--motion-return-duration) var(--motion-return-easing),
          box-shadow var(--motion-return-duration) var(--motion-return-easing),
          opacity var(--motion-return-duration) var(--motion-return-easing),
          transform var(--motion-spring-duration) var(--motion-spring-easing);
      }
      .personalization-suggestion-actions .suggestion-action:hover,
      .personalization-suggestion-actions .suggestion-action:focus-visible {
        border-color: color-mix(in srgb, var(--separator) 72%, var(--text));
        background: var(--panel-subtle);
        color: var(--text);
        outline: 0;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
      }
      .personalization-suggestion-actions .suggestion-action:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
      .personalization-suggestion-actions .suggestion-action:active { transform: scale(.98); }
      .personalization-suggestion-actions .suggestion-action.primary {
        border-color: color-mix(in srgb, var(--accent) 24%, var(--separator));
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: var(--weight-semibold);
      }
      .personalization-suggestion-actions .suggestion-action.primary:hover,
      .personalization-suggestion-actions .suggestion-action.primary:focus-visible {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--separator));
        background: color-mix(in srgb, var(--accent-soft) 82%, var(--accent));
        color: var(--accent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
      }
      .personalization-suggestion-actions .suggestion-action.primary:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
      .suggestion-action:disabled {
        cursor: wait;
        opacity: .55;
      }
      @media (max-width: 560px) {
        .personalization-suggestion-row {
          grid-template-columns: 8px minmax(0, 1fr);
          align-items: start;
          row-gap: 6px;
        }
        .personalization-suggestion-actions {
          grid-column: 2;
          justify-content: flex-start;
          flex-wrap: wrap;
          min-height: auto;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .personalization-suggestion-actions .suggestion-action { transition: none !important; }
      }
    
/* Translation Agent source style 11 (product-navigation) */

      /* Product navigation: one calm, persistent control shared by the landing and workspace. */
      .product-nav {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--panel) 72%, transparent);
        box-shadow: 0 4px 18px rgb(15 23 42 / 6%), inset 0 1px rgb(255 255 255 / 42%);
        backdrop-filter: blur(18px) saturate(135%);
      }
      .product-nav-item {
        min-width: 58px;
        min-height: 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        padding: 0 14px;
        color: var(--muted);
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: var(--weight-medium);
        line-height: 1;
        white-space: nowrap;
      }
      .product-nav-item:hover { background: color-mix(in srgb, var(--panel-subtle) 78%, transparent); color: var(--text); }
      .product-nav-item.is-active,
      .product-nav-item[aria-current="page"] { background: var(--panel); color: var(--text); box-shadow: 0 2px 8px rgb(15 23 42 / 8%); }
      .product-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

      .workspace-product-nav { margin-inline: auto; }
      .library-product-nav { margin-inline: auto; }
      .module-overview { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 0; border-radius: 18px; background: transparent; padding: 0 8px 0 4px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; transition: background-color var(--motion-return-duration) var(--motion-return-easing), color var(--motion-return-duration) var(--motion-return-easing); }
      .module-overview .control-icon { width: 18px; height: 18px; }
      .module-overview:hover { background: var(--panel-subtle); color: var(--text); }
      .workspace-overview { margin-right: 2px; }
      .learning-screen { position: fixed; inset: 0; z-index: 65; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; overflow: hidden; background: var(--page); color: var(--text); }
      .learning-screen[hidden] { display: none; }
      .module-screen-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 18px clamp(22px, 3vw, 48px); background: color-mix(in srgb, var(--page) 18%, transparent); backdrop-filter: blur(18px) saturate(125%); }
      .module-product-nav { position: absolute; left: 50%; transform: translateX(-50%); }
      .module-screen-brand { color: var(--muted); font-size: var(--font-meta-size); font-weight: var(--weight-medium); }
      .focus-account { display: flex; align-items: center; gap: 11px; width: 220px; min-height: 64px; border: 1px solid var(--separator); border-radius: 16px; background: color-mix(in srgb, var(--panel) 86%, transparent); padding: 10px 12px; color: var(--text); cursor: pointer; font: inherit; text-align: left; box-shadow: 0 8px 24px rgb(15 23 42 / 7%), inset 0 1px rgb(255 255 255 / 52%); backdrop-filter: blur(18px) saturate(125%); transition: background-color var(--motion-return-duration) var(--motion-return-easing), border-color var(--motion-return-duration) var(--motion-return-easing), box-shadow var(--motion-return-duration) var(--motion-return-easing), transform var(--motion-spring-duration) var(--motion-spring-easing); }
      .focus-account-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: -.02em; }
      .focus-account-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
      .focus-account-copy strong { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
      .focus-account-copy small { color: var(--muted); font-size: 11px; line-height: 1.3; }
      .focus-account-divider { color: var(--separator); }
      .focus-account-hint { color: var(--accent); font-weight: var(--weight-medium); }
      .focus-account-chevron { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color var(--motion-hover-duration) var(--motion-hover-easing), transform var(--motion-spring-duration) var(--motion-spring-easing); }
      .focus-account:hover, .focus-account:focus-visible { border-color: color-mix(in srgb, var(--accent) 34%, var(--separator)); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px rgb(255 255 255 / 64%); outline: 0; }
      .focus-account:hover .focus-account-chevron, .focus-account:focus-visible .focus-account-chevron { color: var(--accent); transform: translateX(2px); }
      .sidebar .focus-account { align-self: flex-start; width: 220px; margin: 0 0 24px 24px; }
      .library-screen > .focus-account, .learning-screen > .focus-account { position: fixed; left: 24px; bottom: 24px; z-index: 5; }
      :root[data-theme="dark"] .focus-account { box-shadow: 0 10px 28px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 8%); }
      :root[data-theme="dark"] .focus-account:hover, :root[data-theme="dark"] .focus-account:focus-visible { background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 14px 34px rgb(0 0 0 / 34%), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px rgb(255 255 255 / 12%); }
      .module-screen-main { position: relative; z-index: 2; display: grid; min-height: 0; place-items: center; overflow: auto; padding: 72px 24px; }
      .module-screen-copy { display: grid; justify-items: center; width: min(760px, 100%); text-align: center; }
      .module-screen-copy h1 { max-width: 720px; margin: 0; color: var(--text); font-size: clamp(38px, 6vw, 76px); font-weight: 680; line-height: 1.04; letter-spacing: -.055em; }
      .module-screen-copy p { max-width: 540px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
      .module-screen-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--dim); font-size: 12px; }
      .module-screen-status span { width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent); }
      .launch-screen > .kinetic-canvas,
      .launch-screen > .kinetic-grid,
      .launch-screen > .kinetic-glow,
      .launch-screen > .kinetic-orbit { position: fixed; }
      .launch-screen > .kinetic-canvas,
      .launch-screen > .kinetic-grid,
      .launch-screen > .kinetic-glow,
      .launch-screen > .kinetic-orbit { z-index: 0; }
      .library-screen-header { background: var(--panel); }
      .launch-header { background: color-mix(in srgb, var(--page) 22%, transparent); box-shadow: 0 1px color-mix(in srgb, var(--separator) 58%, transparent); }
      .launch-screen {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: auto;
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
      }
      .launch-header {
        position: sticky;
        top: 0;
        min-height: 76px;
        background: color-mix(in srgb, var(--page) 22%, transparent);
        backdrop-filter: blur(18px) saturate(125%);
      }
      .launch-product-nav { position: absolute; left: 50%; transform: translateX(-50%); }
      /* CTA feedback is defined with the shared layout below; no looping hover halo. */
      .launch-scroller { position: relative; z-index: 2; }
      .launch-section {
        position: relative;
        display: grid;
        min-height: 100svh;
        place-items: center;
        padding: 112px clamp(24px, 8vw, 140px) 88px clamp(104px, 16vw, 250px);
        scroll-margin-top: 76px;
      }
      .launch-section::after {
        content: "";
        position: absolute;
        inset: 18% 12% 14%;
        z-index: -1;
        border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
        border-radius: 50%;
        opacity: .55;
        pointer-events: none;
      }
      .launch-section-translate { min-height: calc(100svh - 76px); }
      .launch-section > .launch-copy,
      .launch-section > .launch-section-card { opacity: var(--launch-section-opacity, 1); transition: opacity 360ms var(--motion-return-easing), transform 520ms var(--motion-return-easing); }
      .launch-section > .launch-copy { transform: translate3d(var(--copy-x, 0px), calc(var(--copy-y, 0px) + var(--launch-section-shift, 0px)), 0); }
      .launch-section > .launch-section-card { transform: translate3d(0, var(--launch-section-shift, 0px), 0); }
      .launch-section-card { display: grid; justify-items: center; width: min(760px, 100%); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
      .launch-section-card h2 { max-width: 720px; margin: 0; color: var(--text); font-size: clamp(42px, 6vw, 78px); font-weight: 680; line-height: 1.02; letter-spacing: -.055em; }
      .launch-section-card p { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
      .launch-section-note { margin-top: 26px; color: var(--dim); font-size: 12px; }
      .launch-progress {
        position: fixed;
        top: 50%;
        left: clamp(22px, 4vw, 56px);
        z-index: 6;
        display: grid;
        gap: 20px;
        width: 132px;
        transform: translateY(-50%);
      }
      .launch-progress-line { position: absolute; top: 12px; bottom: 44px; left: 7px; width: 1px; background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--border) 55%, transparent)); pointer-events: none; }
      .launch-progress-item { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 42px; border: 0; background: transparent; padding: 0; color: var(--muted); cursor: pointer; text-align: left; font: inherit; }
      .launch-progress-dot { display: block; width: 9px; height: 9px; margin-top: 4px; border: 1px solid var(--border); border-radius: 50%; background: var(--page); box-shadow: 0 0 0 4px color-mix(in srgb, var(--page) 85%, transparent); transition: background-color var(--motion-return-duration) var(--motion-return-easing), border-color var(--motion-return-duration) var(--motion-return-easing), box-shadow var(--motion-return-duration) var(--motion-return-easing), transform var(--motion-spring-duration) var(--motion-spring-easing); }
      .launch-progress-item:hover { color: var(--text); }
      .launch-progress-item:hover .launch-progress-dot { border-color: var(--accent); transform: scale(1.12); }
      .launch-progress-item.is-active { color: var(--text); }
      .launch-progress-item.is-active .launch-progress-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
      .launch-progress-copy { display: grid; gap: 2px; min-width: 0; }
      .launch-progress-copy strong { font-size: 12px; font-weight: 600; }
      .launch-progress-copy small { color: var(--muted); font-size: 10px; line-height: 1.3; }
      .launch-progress-hint { margin-top: 3px; color: var(--dim); font-size: 10px; line-height: 1.45; }
      :root[data-theme="dark"] .product-nav { box-shadow: 0 6px 24px rgb(0 0 0 / 22%), inset 0 1px rgb(255 255 255 / 7%); }
      :root[data-theme="dark"] .product-nav-item.is-active,
      :root[data-theme="dark"] .product-nav-item[aria-current="page"] { box-shadow: 0 2px 10px rgb(0 0 0 / 28%); }
      :root[data-theme="dark"] .launch-section-card { background: transparent; box-shadow: none; }
      @media (max-width: 860px) {
        .workspace-product-nav { margin-left: 10px; }
        .workspace-product-nav .product-nav-item { min-width: 48px; padding-inline: 10px; }
        .library-screen-header { flex-wrap: wrap; row-gap: 8px; }
        .library-screen-heading { flex: 1 1 auto; }
        .library-screen-actions { margin-left: auto; }
        .library-product-nav { order: 3; flex-basis: 100%; justify-content: center; margin: 0 auto; }
      }
      @media (max-width: 640px) {
        .launch-product-nav { position: static; transform: none; }
        .launch-header { gap: 10px; min-height: 68px; padding: 14px 18px; }
        .launch-product-nav .product-nav-item { min-width: 42px; min-height: 32px; padding-inline: 9px; }
        .launch-progress { top: auto; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; gap: 8px; width: auto; transform: none; }
        .launch-progress-line, .launch-progress-copy small, .launch-progress-hint { display: none; }
        .launch-progress-item { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; width: auto; padding: 6px 10px; border: 1px solid var(--separator); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(14px); }
        .launch-progress-dot { width: 7px; height: 7px; margin: 0; box-shadow: none; }
        .launch-progress-item.is-active .launch-progress-dot { box-shadow: 0 0 0 3px var(--accent-soft); }
        .launch-section { min-height: calc(100svh - 68px); padding: 88px 20px 112px; }
        .launch-section-translate { min-height: calc(100svh - 68px); }
        .launch-section-card { padding: 0; }
        .library-product-nav { margin: 4px 0 0; }
        .module-screen-header { gap: 10px; min-height: 68px; padding: 14px 18px; }
        .module-product-nav { position: static; transform: none; }
        .module-screen-brand { display: none; }
        .module-overview span { display: none; }
        .module-screen-main { padding: 56px 20px 84px; }
        .module-screen-copy h1 { font-size: clamp(36px, 12vw, 56px); }
        .library-screen > .focus-account, .learning-screen > .focus-account { left: 16px; bottom: 16px; width: min(220px, calc(100vw - 32px)); }
      }
      @media (prefers-reduced-motion: reduce) {
        .launch-screen { scroll-behavior: auto; }
        .launch-progress-dot { transition: none; }
        .launch-action { transition: none; }
        .launch-action::after { animation: none !important; opacity: 0; transition: none; transform: none; }
        .focus-account, .focus-account:hover, .focus-account:focus-visible, .focus-account-chevron { transition: none; transform: none; }
        .launch-section > .launch-copy,
        .launch-section > .launch-section-card { transition: none; transform: none; }
      }
    
/* Translation Agent source style 12 (workspace-layout-refinement) */

      /* Shared layout contract. Keep utility chrome still; reserve expressive motion for the overview. */
      button, input, textarea, select { font-family: var(--font-ui); }
      button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      .product-nav { flex-shrink: 0; box-shadow: none; }
      .product-nav-item { min-height: 44px; min-width: 64px; font-size: 13px; }
      .topbar, .library-screen-header, .module-screen-header { min-height: 76px; gap: 16px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--separator); }
      .topbar { position: relative; }
      .topbar-left { flex: 1 1 0; }
      .topbar .title { display: flex; align-items: center; gap: 8px; }
      #session-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .workspace-product-nav { margin: 0; }
      .topbar .shortcuts { flex: 1 1 0; text-align: right; }
      .workspace-overview { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; }
      .workspace-overview span { display: none; }
      .library-screen-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
      .library-product-nav { order: 0; grid-column: 2; grid-row: 1; margin: 0; }
      .library-screen-actions { justify-content: flex-end; }
      .library-screen-subtitle { font-size: 11px; }
      .module-screen-header { background: var(--panel); backdrop-filter: none; }
      /* The account control is a fixed sibling of the sidebar. Keep the
       * sidebar itself from growing with the list and give the one scrolling
       * owner an explicit safe area above that control. */
      .app { min-height: 0; grid-template-rows: minmax(0, 1fr); }
      .sidebar { min-height: 0; overflow: hidden; padding-bottom: 0; }
      .new-session { margin: 20px 16px 16px; min-height: 44px; border: 1px solid var(--separator); border-radius: 12px; background: var(--panel); }
      .sessions { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 12px calc(var(--focus-footer) + 16px); }
      .session-label { padding: 12px 24px; letter-spacing: 0; }
      .session { border-radius: 10px; }
      .transcript { padding: 32px var(--layout-gutter) 48px; }
      .terminal-width, .composer-wrap { width: 100%; max-width: 1200px; }
      .message-assistant { max-width: 82ch; }
      .composer-shell { padding: 12px var(--layout-gutter) 24px; background: var(--page); }
      .composer { border-radius: 20px; box-shadow: 0 4px 20px rgb(0 0 0 / 5%); }
      .composer:focus-within { box-shadow: 0 0 0 2px var(--accent-soft); }
      .compose-row { min-width: 0; align-items: flex-end; }
      #message-input { width: 0; min-width: 0; flex: 1 1 0; }
      .composer-context-row { flex-wrap: wrap; gap: 8px; }
      .composer-context-controls { flex-wrap: wrap; }
      .composer-context-row .composer-hint { border: 0; padding: 0; }
      /* An explicit account button, in the same reserved corner on every focus screen. */
      #app > .focus-account, .library-screen > .focus-account, .learning-screen > .focus-account {
        position: fixed; z-index: 6; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
        width: 228px; min-height: 60px; margin: 0; border-radius: 14px; background: var(--panel);
        box-shadow: 0 2px 8px rgb(0 0 0 / 5%); backdrop-filter: none;
      }
      .focus-account:hover, .focus-account:focus-visible { transform: none; background: var(--panel-subtle); box-shadow: 0 0 0 2px var(--accent-soft); }
      .focus-account-chevron { color: var(--muted); stroke: currentColor; }
      .library-screen-body { margin-bottom: var(--focus-footer); padding: 40px var(--layout-gutter); }
      .library-screen::after, .learning-screen::after { content: ""; position: absolute; inset: auto 0 0; height: var(--focus-footer); border-top: 1px solid var(--separator); background: var(--panel); pointer-events: none; }
      .library-index-view { max-width: 1120px; padding: 0; }
      .library-index-intro { align-items: center; margin-bottom: 36px; }
      .library-index-title { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.025em; }
      .library-index-search { min-height: 48px; border-color: var(--separator); box-shadow: none; }
      .library-inline-action { min-height: 44px; }
      .library-index-recent { background: transparent; border-width: 1px 0 0; border-radius: 0; padding: 12px 0; }
      .module-screen-main { margin-bottom: var(--focus-footer); padding: 48px 24px; }
      .module-screen-copy { max-width: 600px; }
      .module-screen-copy h1 { max-width: 560px; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
      .module-screen-copy p { max-width: 440px; font-size: 15px; }
      .module-screen-status { border: 1px solid var(--separator); border-radius: 8px; padding: 10px 14px; color: var(--muted); }
      .module-screen-status span { box-shadow: none; }
      .overlay { z-index: 80; }
      .modal-layer { z-index: 90; }
      /* Overview: confident typography and one continuous background, without stacked halos. */
      .launch-header { padding-inline: var(--layout-gutter); }
      .launch-section { padding-inline: max(168px, 12vw); min-height: calc(100svh - 76px); }
      .launch-section::after { content: none; }
      .launch-copy, .launch-section-card { width: min(920px, 100%); }
      .launch-copy h1, .launch-section-card h2 { max-width: 900px; font-size: clamp(40px, 5.5vw, 76px); font-weight: var(--weight-semibold); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
      .launch-copy p, .launch-section-card p { max-width: 580px; margin-top: 24px; font-size: 16px; line-height: 1.85; text-wrap: pretty; }
      .launch-screen .kinetic-grid { opacity: .22; }
      .launch-screen .kinetic-orbit { opacity: .22; }
      .launch-screen .kinetic-canvas { opacity: .55; }
      .launch-action { min-height: 48px; min-width: 0; margin-top: 32px; padding: 0 28px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); filter: none; transition: background-color 220ms, box-shadow 420ms cubic-bezier(.22,1,.36,1); }
      .launch-action::after { content: none; }
      .launch-action:hover { filter: none; background: color-mix(in srgb, var(--accent) 90%, black); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 26%, transparent); }
      .launch-action > span { display: inline-block; transition: transform 480ms cubic-bezier(.22,1.5,.36,1); }
      .launch-action:hover > span { transform: translateY(-1px) scale(1.035); }
      .launch-action:active > span { transform: scale(.96); transition-duration: 100ms; }
      .launch-progress { width: 116px; left: 28px; }
      .launch-progress-item { min-height: 44px; }
      .launch-progress-hint { display: none; }
      /* Login is a working form: pointer feedback belongs to the background, never to input geometry. */
      .auth-screen.kinetic-scene { height: 100dvh; min-height: 0; align-content: safe center; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 8vw, 120px); padding: clamp(24px, 5vh, 64px) max(32px, calc((100vw - 1120px) / 2)); overflow-y: auto; }
      .auth-context { position: relative; z-index: 2; max-width: 540px; }
      .auth-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
      .auth-context h2 { margin: 20px 0; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.2; font-weight: var(--weight-semibold); letter-spacing: -.035em; }
      .auth-context p { max-width: 380px; color: var(--muted); font-size: 16px; line-height: 1.85; }
      .auth-context small { color: var(--accent); font-size: 13px; font-weight: var(--weight-medium); }
      .auth-screen .auth-card { width: 100%; padding: 36px; border-radius: 20px; background: var(--panel); box-shadow: 0 12px 40px rgb(0 0 0 / 6%); transform: none; will-change: auto; backdrop-filter: none; }
      .auth-card::before { content: none; }
      .auth-card h1 { font-size: 26px; line-height: 1.3; }
      .auth-eyebrow { text-transform: none; letter-spacing: 0; }
      .auth-mark { width: 40px; height: 40px; box-shadow: none; margin-bottom: 20px; }
      .auth-form input { background: var(--page); backdrop-filter: none; }
      .auth-submit { box-shadow: none; }
      .auth-link { min-height: 44px; }
      @media (max-width: 1099px) {
        .library-screen-header { grid-template-columns: minmax(0,1fr) auto; }
        .library-screen-actions { grid-column: 1 / -1; }
        .library-screen-actions:empty { display: none; }
        .library-screen-subtitle { display: none; }
      }
      @media (max-width: 860px) {
        .auth-screen.kinetic-scene { grid-template-columns: minmax(0, 440px); justify-content: center; padding: 40px 24px; gap: 28px; }
        .auth-context h2 { font-size: 32px; margin: 8px 0; }
        .auth-context p { font-size: 14px; margin-bottom: 0; }
        .auth-context small { display: none; }
        #app { padding-bottom: var(--focus-footer); height: var(--workspace-viewport-height, 100dvh); }
        #app, .library-screen, .learning-screen { position: fixed; top: var(--workspace-viewport-top, 0px); right: 0; left: 0; }
        .workspace { height: 100%; }
        .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
        .topbar-left { flex: 1 1 100%; }
        .topbar .shortcuts { display: none; }
        .workspace-product-nav { margin: 0 auto; }
        .topbar .title { font-size: 14px; }
        .transcript { padding: 24px 20px 32px; }
        .composer-shell { padding: 8px 12px 12px; }
        .compose-row { padding: 10px 8px; gap: 4px; }
        .composer-context-controls { width: 100%; gap: 4px; }
        .composer-context-row { padding: 6px 8px 10px; }
        .composer-context-row .composer-hint { width: 100%; }
        .composer-language-trigger, .composer-style-trigger, .composer-knowledge-trigger { padding-inline: 8px; max-width: 100%; }
        .composer-language, .composer-knowledge { position: static; min-width: 0; flex: 1 1 0; }
        .composer-language-popover, .composer-knowledge-popover { left: 0; right: 0; width: 100%; max-height: min(480px, 55dvh); }
        .launch-section { padding: 72px 28px 88px; }
        .launch-progress { display: none; }
        .launch-header { position: sticky; }
        .launch-brand strong { display: none; }
        .launch-product-nav { position: static; transform: none; }
        .launch-account-copy { display: none; }
        .launch-copy h1, .launch-section-card h2 { font-size: clamp(34px, 7vw, 56px); line-height: 1.22; }
        .launch-copy p, .launch-section-card p { font-size: 14px; }
        .library-screen-body { padding: 28px 20px; }
        .library-index-view { padding: 0; }
        .library-index-section-title { flex-wrap: wrap; }
        .module-screen-main { padding-top: 36px; }
      }
      @media (max-width: 760px) {
        :root { --focus-footer: 0px; }
        #app { padding-bottom: 0; }
        .workspace { width: 100%; }
        .topbar { flex-wrap: nowrap; min-height: calc(60px + env(safe-area-inset-top)); height: calc(60px + env(safe-area-inset-top)); gap: 4px; padding: calc(8px + env(safe-area-inset-top)) calc(60px + env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
        .topbar-left { flex: 0 0 auto; }
        .topbar .title { gap: 0; }
        #session-title { display: none; }
        .workspace-product-nav, .library-product-nav, .module-product-nav { position: absolute; left: 50%; top: calc(30px + env(safe-area-inset-top)); margin: 0; transform: translate(-50%, -50%); }
        .library-product-nav { grid-column: auto; grid-row: auto; }
        .workspace-product-nav .product-nav-item, .library-product-nav .product-nav-item, .module-product-nav .product-nav-item { min-width: 44px; padding-inline: 6px; font-size: 12px; }
        #app > .focus-account, .library-screen > .focus-account, .learning-screen > .focus-account {
          top: calc(var(--workspace-viewport-top, 0px) + 8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); bottom: auto; left: auto; width: 44px; min-height: 44px; height: 44px; padding: 4px; gap: 0; border: 0; box-shadow: none; background: transparent;
        }
        .focus-account-copy, .focus-account-chevron { display: none; }
        .focus-account-avatar { width: 36px; height: 36px; flex-basis: 36px; }
        .library-screen-header, .module-screen-header { position: relative; min-height: calc(60px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) calc(60px + env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
        .library-screen-heading { min-height: 44px; }
        .library-screen-title { display: none; }
        .module-screen-header .module-overview { width: 44px; min-width: 44px; height: 44px; padding: 0; }
        .module-screen-header .module-overview span, .module-screen-header .module-screen-brand { display: none; }
        .library-screen::after, .learning-screen::after { display: none; }
        .library-screen, .learning-screen { height: var(--workspace-viewport-height, 100dvh); min-height: 0; }
        .transcript { padding: 16px 12px 24px; }
        .message-user { max-width: 90%; overflow-wrap: anywhere; }
        .attachment, .file-chip { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
        .attachment { flex-wrap: wrap; }
        .composer-shell { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
        .compose-row { padding: 8px 6px; }
        #message-input { font-size: 16px; min-height: 44px; max-height: min(160px, 28dvh); padding: 10px 4px; }
        .composer-language-popover input, .composer-knowledge-popover input, .library-screen input, .library-detail input, .library-detail textarea, .library-create-field input, .library-create-field textarea, .auth-form input, .modal input, .modal textarea, .dialog input, .dialog textarea { font-size: 16px; }
        .composer-context-row { padding: 6px 8px 8px; gap: 0; }
        .composer-context-controls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 6px; }
        .composer-context-controls > div { min-width: 0; width: 100%; }
        .composer-language-trigger, .composer-style-trigger, .composer-knowledge-trigger { width: 100%; min-width: 0; min-height: 44px; gap: 4px; padding-inline: 6px; }
        .composer-language-trigger-label, .composer-style-trigger-label, .composer-knowledge-trigger-label { display: none; }
        .composer-style-value, .composer-language-trigger-value, .composer-knowledge-trigger-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .composer-context-row .composer-hint { display: none; }
        .composer-language-popover, .composer-style-popover, .composer-knowledge-popover { position: fixed; right: 8px; left: 8px; bottom: calc(var(--workspace-obscured-bottom, 0px) + max(8px, env(safe-area-inset-bottom))); width: auto; max-height: min(520px, calc(var(--workspace-viewport-height, 100dvh) - 76px)); }
        .clarification-actions:not(.is-answered) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
        .clarification-actions button { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-control); text-align: left; font-size: 14px; }
        .clarification-actions.is-answered button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
        .clarification-actions small { font-size: 12px; }
        .overlay, .modal-layer { top: var(--workspace-viewport-top, 0px); bottom: var(--workspace-obscured-bottom, 0px); }
        .dialog, .modal, .library-create-modal .modal { max-height: calc(var(--workspace-viewport-height, 100dvh) - 24px); }
      }
      @media (max-width: 480px) {
        .launch-header { padding: 10px 12px; gap: 8px; }
        .launch-brand-mark { width: 28px; height: 28px; }
        .launch-account { padding: 4px; min-height: 40px; }
        .product-nav-item { min-width: 52px; padding-inline: 10px; }
        .library-screen-header, .module-screen-header { gap: 8px; }
        .library-screen-heading { gap: 4px; }
        .library-screen-title { font-size: 14px; }
        .library-back { width: 44px; flex-basis: 44px; }
        .library-index-section-title span { flex-basis: 100%; }
        .auth-screen .auth-card { padding: 24px; }
        .overlay, .modal-layer { padding: 12px; }
      }
      @media (max-width: 359px) {
        .topbar .workspace-overview { display: none; }
      }
      @media (min-width: 761px) and (max-width: 860px) and (max-height: 600px) {
        :root { --focus-footer: 68px; }
        .topbar { flex-wrap: nowrap; gap: 4px; min-height: 60px; padding: 6px 12px; }
        .topbar-left { flex: 0 0 auto; }
        .topbar .title { gap: 0; }
        #session-title { display: none; }
        .workspace-product-nav { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
        .topbar .product-nav-item { min-width: 48px; padding-inline: 8px; }
        #app > .focus-account, .library-screen > .focus-account, .learning-screen > .focus-account { min-height: 52px; padding-block: 6px; bottom: 8px; }
        .composer-context-row .composer-hint { display: none; }
        .launch-section { min-height: 400px; padding-block: 48px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .launch-action, .launch-action > span { transition: none; }
        .launch-action:hover > span, .launch-action:active > span { transform: none; }
      }
    
/* Translation Agent source style 13 (conversation-surface-refinement) */

      /* Conversation surfaces stay content-led: suggestions are contextual
       * affordances, while the Agent timeline remains a quiet disclosure. */
      /* One unframed, stable row throughout the request lifecycle. */
      .task-status { display: grid; grid-template-columns: 18px minmax(0, 1fr) 80px; align-items: center; gap: 10px; height: 48px; margin: 8px 0 12px; color: var(--muted); font-family: var(--font-ui); font-size: var(--font-control-size); font-weight: var(--weight-regular); }
      .task-status-icon { display: grid; place-items: center; width: 18px; height: 18px; }
      .task-status-mark { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
      .task-status-mark-running { animation: task-status-spin 1s linear infinite; }
      .task-status[data-status="failed"] .task-status-icon { color: var(--danger); }
      .task-status-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 22px; }
      .task-status-action { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; border: 0; border-radius: var(--radius-sm); padding: 0 4px; background: transparent; color: var(--accent); font-size: var(--font-control-size); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; }
      .task-status-action:hover { background: transparent; box-shadow: none; opacity: .72; }
      .task-status-action:active { background: transparent; box-shadow: none; opacity: .5; }
      .task-status-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      .task-status-action[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
      .task-status-action:disabled { cursor: default; opacity: .5; }
      .task-status-detail { margin: 0 0 16px; padding-left: 28px; color: var(--muted); font-size: var(--font-meta-size); line-height: 1.6; overflow-wrap: anywhere; }
      @keyframes task-status-spin { to { transform: rotate(360deg); } }
      .live-status-copy {
        display: block;
        min-width: 0;
        overflow: hidden;
        font-variant-numeric: tabular-nums;
      }
      .live-status-copy > .live-status-value {
        display: inline;
        white-space: nowrap;
      }
      .live-status-delta { display: inline-block; vertical-align: top; }
      .live-status-delta.is-changing { will-change: opacity; }

      @media (prefers-reduced-motion: reduce) {
        .task-status-mark-running { animation: none; }
        .live-status-delta.is-changing { will-change: auto; }
      }
    
/* Translation Agent source style 14 (attached-suggestion-popover) */

      .suggestion-entry { cursor: pointer; }
      .suggestion-entry-label { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
      .suggestion-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      /* A contextual suggestion belongs to the composer, not the transcript.
       * Keep it compact and anchored so it reads as an available next action. */
      .composer-wrap { position: relative; }
      .suggestion-popover-host {
        position: absolute;
        z-index: 30;
        right: 0;
        bottom: calc(100% + 14px);
        left: 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(.985);
        transform-origin: bottom center;
        transition:
          opacity 160ms var(--motion-return-easing),
          transform 240ms var(--motion-spring-easing),
          visibility 0s linear 240ms;
      }
      .suggestion-popover-host.is-open {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        transition-delay: 0s;
      }
      .suggestion-popover-host.is-detached { position: fixed; z-index: 85; top: 16px; right: 16px; bottom: auto; left: 16px; width: auto; max-width: none; }
      .suggestion-popover-host.is-closing {
        pointer-events: none;
        visibility: visible;
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.985);
        transition:
          opacity 140ms var(--motion-return-easing),
          transform 200ms var(--motion-spring-easing),
          visibility 0s linear 200ms;
      }
      .suggestion-popover {
        width: min(680px, calc(100% - 16px));
        max-height: min(620px, calc(100dvh - 230px));
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--separator) 88%, transparent);
        border-radius: 16px;
        background: var(--panel-raised);
        box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
      }
      .suggestion-popover-card {
        width: 100%;
        max-height: inherit;
        max-width: none;
        overflow: hidden;
        border: 0;
        border-radius: inherit;
        background: transparent;
        box-shadow: none;
      }
      .suggestion-popover-card.suggestion-card-termbook { border-left: 0; }
      .suggestion-popover-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 12px;
        max-height: inherit;
        overflow: hidden;
        padding: 14px 14px 12px;
      }
      .suggestion-popover-main { display: grid; min-width: 0; min-height: 0; gap: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
      .suggestion-popover-heading { position: sticky; z-index: 2; top: 0; display: flex; min-width: 0; align-items: flex-start; gap: 10px; padding-bottom: 8px; background: var(--panel-raised); }
      .suggestion-popover-icon {
        display: grid;
        width: 24px;
        height: 28px;
        flex: 0 0 24px;
        place-items: center;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
      }
      .suggestion-popover-icon svg { width: 17px; height: 17px; }
      .suggestion-popover-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
      .suggestion-popover-copy { display: grid; min-width: 0; gap: 3px; padding-top: 1px; }
      .suggestion-popover-copy strong { overflow: hidden; color: var(--text); font-size: var(--font-control-size); font-weight: var(--weight-semibold); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
      .suggestion-popover-copy span { color: var(--muted); font-size: var(--font-meta-size); font-weight: var(--weight-regular); line-height: 1.45; overflow-wrap: anywhere; }
      .suggestion-notebook-name { margin: 8px 0 14px; }
      .suggestion-popover-controls { display: flex; margin: -5px -5px -5px auto; flex: 0 0 auto; align-items: center; gap: 2px; }
      .suggestion-popover-heading .suggestion-status { display: none; }
      .suggestion-popover-card[data-status="running"] .suggestion-status, .suggestion-popover-card[data-status="error"] .suggestion-status { display: inline-flex; border: 0; background: transparent; color: var(--muted); padding-inline: 4px; }
      .suggestion-status { display: inline-flex; min-height: 24px; align-items: center; border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--panel-subtle) 72%, transparent); padding: 3px 8px; color: var(--muted); font-size: var(--font-caption-size); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; }
      .suggestion-popover-dismiss {
        display: grid;
        width: var(--control-height);
        min-width: var(--control-height);
        height: var(--control-height);
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: color var(--motion-hover-duration) var(--motion-hover-easing);
      }
      .suggestion-popover-dismiss svg {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 6.5px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.75;
        transition: background-color var(--motion-hover-duration) var(--motion-hover-easing), transform var(--motion-press-duration) var(--motion-press-easing);
      }
      .suggestion-popover-dismiss:hover { color: var(--text); }
      .suggestion-popover-dismiss:hover svg { background: var(--panel-subtle); }
      .suggestion-popover-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .suggestion-popover-dismiss:active svg { transform: scale(.94); }
      .suggestion-preview { min-width: 0; border: 0; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); border-radius: 0; background: transparent; overflow: hidden; transition: border-color var(--motion-return-duration) var(--motion-return-easing), background-color var(--motion-return-duration) var(--motion-return-easing); }
      .suggestion-preview:hover, .suggestion-preview:focus-within { border-color: var(--separator); background: transparent; }
      .suggestion-preview-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; width: 100%; min-height: 48px; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
      .suggestion-preview-copy { display: grid; min-width: 0; gap: 3px; }
      .suggestion-preview-copy strong { font-size: var(--font-meta-size); font-weight: var(--weight-semibold); line-height: 1.25; }
      .suggestion-preview-copy small { overflow: hidden; color: var(--muted); font-size: var(--font-caption-size); font-weight: var(--weight-regular); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
      .suggestion-preview-count { display: inline-flex; min-height: 24px; align-items: center; background: transparent; padding: 3px 0; color: var(--muted); font-size: var(--font-meta-size); font-weight: var(--weight-regular); white-space: nowrap; }
      .suggestion-preview-chevron { width: 15px; height: 15px; color: var(--dim); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: color var(--motion-return-duration) var(--motion-return-easing), transform 320ms var(--motion-spring-easing); }
      .suggestion-preview.is-expanded .suggestion-preview-chevron { color: var(--accent); transform: rotate(180deg); }
      .suggestion-preview-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translate3d(0, -5px, 0); transition: grid-template-rows 340ms var(--motion-spring-easing), opacity 180ms var(--motion-return-easing), transform 320ms var(--motion-spring-easing); }
      .suggestion-preview.is-expanded .suggestion-preview-reveal { grid-template-rows: 1fr; opacity: 1; transform: translate3d(0, 0, 0); }
      .suggestion-preview-clip { min-height: 0; overflow: hidden; }
      .suggestion-popover .suggestion-term-list { padding: 0 12px 9px; }
      .suggestion-popover .suggestion-term { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; min-height: 34px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--separator) 72%, transparent); font-size: var(--font-meta-size); line-height: 1.4; }
      .suggestion-popover .suggestion-term-source { min-width: 0; overflow: hidden; color: var(--text); font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
      .suggestion-popover .suggestion-term-target { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
      .suggestion-preview-collapse-row {
        display: flex;
        justify-content: center;
        border-top: 1px solid color-mix(in srgb, var(--separator) 72%, transparent);
        padding: 2px 0 4px;
      }
      .suggestion-preview-collapse {
        display: inline-flex;
        width: auto;
        min-height: var(--control-height);
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        padding: 0 12px;
        color: var(--muted);
        cursor: pointer;
        font: inherit;
        font-size: var(--font-meta-size);
        font-weight: var(--weight-medium);
        transition: background-color var(--motion-hover-duration) var(--motion-hover-easing), color var(--motion-hover-duration) var(--motion-hover-easing);
      }
      .suggestion-preview-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transform: rotate(180deg); }
      .suggestion-preview-collapse:hover { background: var(--panel-subtle); color: var(--text); }
      .suggestion-preview-collapse:focus-visible { color: var(--text); outline: 2px solid var(--accent); outline-offset: -2px; }
      .suggestion-popover .suggestion-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        border-top: 1px solid var(--separator);
        border-left: 0;
        padding: 10px 14px 12px;
      }
      .suggestion-popover .suggestion-action {
        width: auto;
        padding: 8px 6px;
        text-align: center;
      }
      .suggestion-popover .suggestion-action:focus-visible {
        background: color-mix(in srgb, var(--panel-subtle) 78%, transparent);
        color: var(--text);
        outline: 0;
      }
      .suggestion-popover .suggestion-action:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
      .suggestion-popover .suggestion-action:active { transform: scale(.96); transition-duration: 90ms; }
      .suggestion-popover .suggestion-action.primary {
        min-height: var(--control-height);
        border: 1px solid transparent;
        background: var(--accent);
        color: var(--accent-contrast, white);
        font-weight: var(--weight-semibold);
      }
      .suggestion-popover .suggestion-action.primary:focus-visible {
        color: var(--accent-contrast, white);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
      }
      @media (hover: hover) and (pointer: fine) {
        .suggestion-popover .suggestion-action:not(.primary):hover { background: var(--panel-subtle); color: var(--text); }
        .suggestion-popover .suggestion-action.primary:hover {
          border-color: transparent;
          background: color-mix(in srgb, var(--accent) 88%, var(--text));
          color: var(--accent-contrast, white);
        }
      }
      .suggestion-popover .suggestion-action.primary:active { transform: scale(.97); }

      /* Context value labels and attached-card actions share the semantic type scale. */
      .composer-language-trigger-value, .composer-style-value, .composer-knowledge-trigger-value { font-weight: var(--weight-regular); }

      @media (max-width: 680px) {
        .suggestion-popover-host, .suggestion-popover-host.is-detached { position: fixed; z-index: 85; top: var(--workspace-viewport-top, 0px); right: 0; bottom: var(--workspace-obscured-bottom, 0px); left: 0; align-items: flex-end; padding: 12px 8px max(12px, env(safe-area-inset-bottom)); background: rgb(0 0 0 / 16%); transform: none; }
        .suggestion-popover { width: 100%; max-height: calc(var(--workspace-viewport-height, 100dvh) - 72px); border-radius: 20px; }
        .suggestion-popover-grid { gap: 10px; }
        .suggestion-popover .suggestion-actions { justify-content: stretch; padding: 10px 12px 12px; }
        .suggestion-popover .suggestion-action { flex: 1 1 30%; min-height: var(--control-height); padding-inline: 7px; font-size: 13px; }
        .suggestion-popover-copy strong { white-space: normal; }
        .suggestion-popover-grid { padding: 18px 16px 12px; }
        .suggestion-popover .suggestion-term { min-height: 44px; gap: 12px; }
        .suggestion-popover .suggestion-term-source, .suggestion-popover .suggestion-term-target { white-space: normal; overflow-wrap: anywhere; }
      }
      @media (min-width: 681px) and (max-height: 650px) {
        .suggestion-popover-host { position: fixed; top: 8px; right: 8px; bottom: auto; left: 8px; width: auto; max-width: none; }
        .suggestion-popover { width: 100%; max-height: calc(100dvh - 16px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .suggestion-popover-host, .suggestion-preview, .suggestion-preview-chevron, .suggestion-preview-reveal, .suggestion-preview-collapse, .suggestion-popover-dismiss, .suggestion-popover .suggestion-action { transition: none; }
      }