/* OD-LAYOUT-PRIMITIVES v1 */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack { display:flex; flex-direction:column; gap:var(--od-gap,8px); }
  .od-row { display:flex; align-items:center; gap:var(--od-gap,8px); }
  .od-row-top { display:flex; align-items:flex-start; gap:var(--od-gap,8px); }
  .od-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--od-gap,8px); }
  .od-fill { flex:1 1 0; min-width:0; }
  .od-fixed { flex:none; }
  .od-grid { display:grid; gap:var(--od-gap,12px); grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr)); }
  .od-stat,.od-field,.od-cell { display:grid; gap:var(--od-gap,2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display:block; }
  .od-tile { display:grid; grid-template-rows:auto 1fr; }
  :where(.od-tile) > :where(*) { display:block; }
  .od-media { display:block; width:100%; height:auto; aspect-ratio:var(--od-ratio,auto); }
  .od-media-cover { object-fit:cover; }
  .od-icon { display:inline-block; inline-size:var(--od-icon-size,1em); block-size:var(--od-icon-size,1em); flex:none; }
  .od-truncate { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .od-clamp-2,.od-clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .od-clamp-2 { -webkit-line-clamp:2; }
  .od-clamp-3 { -webkit-line-clamp:3; }
  .od-lines-2 { min-height:calc(2 * 1.4em); }
  .od-nowrap { white-space:nowrap; }
  .od-keep { word-break:keep-all; overflow-wrap:anywhere; }
  .od-screen { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
  .od-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
  .od-rail { display:flex; gap:var(--od-gap,8px); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-inline:var(--od-rail-pad,16px); scroll-padding-inline:var(--od-rail-pad,16px); }
  .od-rail::-webkit-scrollbar { display:none; }
  :where(.od-rail) > :where(*) { flex:none; scroll-snap-align:start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end:var(--od-rail-pad,16px); }
  .od-spacer { flex:none; visibility:hidden; pointer-events:none; }
  .od-touch { min-width:44px; min-height:44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display:none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

:root {
  color-scheme:light;
  --paper:#fcfaf9;
  --white:#ffffff;
  --ink:#29242a;
  --muted:#71616c;
  --brand:#ad0038;
  --brand-hover:#87002c;
  --brand-tint:#f6eaf0;
  --stage:#f1efed;
  --line:#e3d7dd;
  --font-body:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;
  --font-display:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:20px;
  --text-xl:24px;
  --text-display:clamp(48px,4.55vw,66px);
  --scene-height:416px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --radius:14px;
  --duration:240ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 12px 32px -16px #34232d26,0 2px 8px #34232d05;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { position:relative; isolation:isolate; margin:0; background:radial-gradient(ellipse at 8% 35%,#f6ebef80,transparent 65%),radial-gradient(ellipse at 95% 90%,#eee9ed70,transparent 65%),var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--text-base); line-height:1.75; -webkit-font-smoothing:antialiased; }
button,a,textarea { -webkit-tap-highlight-color:transparent; }
button { font:inherit; letter-spacing:.02em; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,textarea:focus-visible,[tabindex="0"]:focus-visible { outline:2px solid var(--brand); outline-offset:5px; }
svg.od-icon { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
p,h1,h2 { margin:0; }
button { border:0; }
::selection { background:#ad003824; color:var(--ink); }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:16px; z-index:10; padding:8px 16px; background:var(--white); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.page-shell { width:calc(100% - 128px); max-width:1280px; min-height:100svh; margin-inline:auto; display:flex; flex-direction:column; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.brand-logo { display:flex; align-items:center; justify-content:center; width:48px; height:36px; overflow:hidden; }
.brand-logo img { display:block; width:50px; height:auto; max-width:none; flex:none; }
.brand-name { font-size:20px; font-weight:600; letter-spacing:.02em; }
.brand-divider { display:block; width:1px; height:14px; background:#d8cfd4; margin-inline:4px; }
.wordmark { font-size:20px; font-weight:600; letter-spacing:-.03em; }
.site-nav { display:flex; align-items:center; gap:32px; }
.nav-link { display:flex; align-items:center; min-height:44px; padding:0; background:transparent; font-size:13px; font-weight:500; }
.platform-label { display:flex; align-items:center; gap:8px; padding:4px 0 4px 24px; border-left:1px solid var(--line); font-size:12px; color:var(--muted); letter-spacing:.02em; }
.status-dot { display:block; width:5px; height:5px; border-radius:50%; background:var(--brand); }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; align-items:center; gap:48px; flex:1; padding-block:40px; }

.hero-landscape { position:absolute; z-index:-1; bottom:0; left:0; width:100%; height:auto; overflow:hidden; opacity:.38; pointer-events:none; }
.hero-copy,.demo-section { position:relative; }

.hero-copy { display:flex; flex-direction:column; justify-content:center; align-self:stretch; padding-block:16px; min-width:0; }
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--brand); font-size:13px; font-weight:550; letter-spacing:.04em; margin-bottom:24px; }
.eyebrow>span { display:block; width:32px; height:1px; background:var(--brand); }
h1 { font-family:var(--font-display); font-size:var(--text-display); font-weight:600; line-height:1.35; letter-spacing:0; white-space:nowrap; }
h1>span { display:block; color:var(--brand); }
.hero-description { margin-top:24px; color:var(--muted); font-size:16px; line-height:1.85; max-width:36ch; }
.download-area { margin-top:36px; }
.download-row { display:flex; align-items:center; gap:24px; }
.download-button { display:flex; align-items:center; justify-content:center; gap:12px; min-height:60px; padding:12px 24px; border:1px solid #980031; border-radius:10px; color:var(--white); background:var(--brand); font-size:16px; font-weight:550; letter-spacing:.02em; box-shadow:inset 0 1px 0 #ffffff24,0 8px 20px -12px #7f063e80; transition:background var(--duration),transform var(--duration),box-shadow var(--duration); white-space:nowrap; }
.download-button .od-icon { --od-icon-size:18px; }
.download-button .download-arrow { margin-left:8px; --od-icon-size:16px; }
.release { --od-gap:4px; padding-left:20px; border-left:1px solid #cfb9c2; line-height:1.5; }
.release-version { font-size:14px; font-weight:550; font-variant-numeric:tabular-nums; }
.release-platform { font-size:12px; color:var(--muted); }
.download-meta { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:8px; min-height:40px; font-size:12px; color:var(--muted); }
.package-size { margin-left:6px; }
.meta-divider { height:12px; width:1px; background:var(--line); }
.text-button { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0; background:transparent; font-size:12px; color:var(--muted); }
.text-button .od-icon { --od-icon-size:14px; transform:rotate(-45deg); }
.hero-signoff { display:flex; align-items:flex-start; gap:16px; margin-top:36px; }
.signoff-line { display:block; flex:none; width:40px; height:1px; margin-top:12px; background:#b38a9b; }
.hero-signoff p { font-size:13px; line-height:1.85; }
.hero-signoff p>span { color:var(--muted); }
.demo-section { min-width:0; scroll-margin-top:24px; container:demo / inline-size; }
.demo-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:0 4px 12px; font-size:14px; font-weight:550; }
.demo-heading h2 { font:inherit; }
.demo-caption { color:var(--muted); font-size:11px; font-weight:400; letter-spacing:.02em; }
.demo-stage { background:var(--white); border:1px solid #d8c9d0; border-radius:var(--radius); box-shadow:0 24px 56px -28px #4c1e3340,0 2px 6px #4c1e3305; overflow:clip; }
.demo-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:8px; border-bottom:1px solid var(--line); background:#faf7f8; }
.demo-tabs button { display:flex; justify-content:center; align-items:center; gap:8px; min-width:0; min-height:44px; padding:8px 4px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:550; white-space:nowrap; transition:color var(--duration),border-color var(--duration),background var(--duration); }
.demo-tabs button[aria-selected="true"] { color:var(--brand); border-color:#e7c7d2; background:var(--white); box-shadow:0 2px 4px #4c1e3306; }
.demo-tabs button:focus-visible { outline-offset:-6px; border-radius:4px; }
.tab-number { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:5px; background:#eee5e9; color:#78606b; font-size:9px; font-weight:550; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.demo-tabs button[aria-selected="true"] .tab-number { background:var(--brand); color:#fff; }
.demo-canvas { display:grid; height:var(--scene-height); background:var(--stage); }
.demo-panel { grid-area:1 / 1; position:relative; height:var(--scene-height); min-height:0; display:flex; flex-direction:column; min-width:0; }
/* Inactive scenes reserve their space without exposing their content or controls. */
@layer od-layout {
  .demo-panel[hidden] { display:flex!important; visibility:hidden; pointer-events:none; }
}
.document-window,.quick-chat,.capture-window { position:relative; display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; overflow:hidden; }
.window-bar { display:flex; align-items:center; gap:12px; min-height:34px; padding:7px 16px; background:#f5f5f5; border-bottom:1px solid #e9e7e8; font-size:10px; color:var(--muted); line-height:1.5; }
.window-dots { display:flex; gap:4px; flex:none; }
.window-dots i { display:block; width:5px; height:5px; border-radius:50%; background:#c6bdbd; }
.window-dots i:first-child { background:#b9a4aa; }
.browser-address { margin-inline:auto; padding:2px 12px; border:1px solid #eee9eb; border-radius:5px; background:#fff; font-size:9px; color:#87818a; }
.file-type { margin-left:auto; font-size:9px; white-space:nowrap; }
.document-window { background:#fff; }
.web-navigation { display:flex; align-items:center; gap:20px; padding:10px 24px; border-bottom:1px solid #ecece8; font-size:9px; color:#657060; }
.web-navigation strong { color:#263e36; font-family:Georgia,serif; font-size:19px; letter-spacing:-1px; }
.web-navigation strong span { font:8px Arial,sans-serif; vertical-align:top; margin-left:2px; }
.web-menu { margin-left:auto; font-size:14px; color:#263e36; }
.document-content { position:relative; flex:1; min-height:0; padding:20px 24px; }
.web-article { display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:24px; align-items:start; }
.document-kicker { margin-bottom:8px; color:#788278; font-size:8px; letter-spacing:.12em; }
.document-title { font-family:Georgia,'Times New Roman',serif; font-size:28px; font-weight:400; line-height:1.16; letter-spacing:-.03em; color:#263e36; }
.document-body { margin-top:12px; color:#526055; font-size:14px; line-height:1.75; }
.selected-phrase { position:relative; display:inline-block; color:#263e36; z-index:0; }
.selected-phrase::before { content:''; position:absolute; z-index:-1; inset:0; background:#ad003824; border-bottom:1px solid #ad003850; transform:scaleX(0); transform-origin:left; }
.selection-cursor { position:absolute; left:0; top:3px; display:block; width:1px; height:20px; background:var(--brand); opacity:0; }
.selection-cursor::before,.selection-cursor::after { content:''; position:absolute; left:-2px; width:5px; height:1px; background:var(--brand); }
.selection-cursor::before { top:0; }.selection-cursor::after { bottom:0; }
.selection-panel[data-step="1"] .selected-phrase::before { transform:scaleX(var(--selection-progress,0)); }
.selection-panel[data-step="1"] .selection-cursor { opacity:var(--selection-cursor-opacity,1); left:calc(var(--selection-progress,0) * 100%); }
.selection-panel:is([data-step="2"],[data-step="3"],[data-step="4"]) .selected-phrase::before { transform:scaleX(1); }
.article-visual { position:relative; height:154px; overflow:hidden; background:#e6dcc9; }
.article-visual>span { position:absolute; width:70px; height:70px; right:-10px; top:12px; border-radius:50%; background:#c88d6a; }
.article-visual>i { position:absolute; width:170px; height:90px; left:-14px; bottom:-22px; background:#4c6858; transform:rotate(-25deg); border-radius:50% 50% 0 0; }
.article-visual small { position:absolute; left:12px; top:16px; font:11px/1.5 Georgia,serif; letter-spacing:.06em; color:#3d5146; }
.web-paragraph { margin-top:16px; max-width:68ch; font:12px/1.8 Georgia,serif; color:#8a8c83; }
.web-bottom { position:absolute; inset:auto 24px 14px; display:flex; justify-content:space-between; border-top:1px solid #e5e7df; padding-top:10px; font-size:9px; color:#75816e; }
.shortcut-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; font-size:10px; color:var(--muted); }
.scene-shortcut { position:absolute; z-index:3; bottom:16px; right:16px; padding:6px 10px; border:1px solid #e1ddda; border-radius:6px; background:#fffefdf0; box-shadow:0 2px 10px #29262908; }
.capture-panel .scene-shortcut { opacity:var(--shortcut-opacity,0); transform:translateY(calc((1 - var(--shortcut-opacity,0)) * 6px)); pointer-events:none; }
.key-combo { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.key-combo>span { color:#94898c; font-size:10px; }
kbd { display:inline-flex; align-items:center; justify-content:center; min-width:22px; min-height:22px; padding:1px 4px; border:1px solid #d2cbca; border-bottom-width:2px; border-radius:4px; background:#f8f6f4; color:#61575b; font-family:var(--font-body); font-size:10px; line-height:1.5; transition:color var(--duration),background var(--duration); }
.selection-keys kbd,.capture-keys kbd { transform:translateY(calc(var(--key-press,0) * 2px)); border-color:color-mix(in srgb,var(--brand) calc(var(--key-press,0) * 100%),#d2cbca); background:color-mix(in srgb,var(--brand-tint) calc(var(--key-press,0) * 100%),#f8f6f4); color:color-mix(in srgb,var(--brand) calc(var(--key-press,0) * 100%),#61575b); transition:none; }
.quick-panel[data-step="1"] .quick-keys kbd { color:var(--brand); border-color:#c9a3b0; background:var(--brand-tint); }
.translation-window { position:absolute; z-index:4; background:var(--white); border:1px solid #ddd3d9; border-radius:13px; padding:14px 16px; box-shadow:0 12px 32px -12px #39202c30,0 2px 6px #39202c05; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 320ms var(--ease),transform 320ms var(--ease); }
.selection-panel:is([data-step="3"],[data-step="4"]) .selection-result,.capture-panel:is([data-step="3"],[data-step="4"]) .capture-result,.quick-panel[data-step="2"] .quick-result { opacity:1; pointer-events:auto; transform:translateY(0); }
.quick-panel[data-step="3"] .quick-result { opacity:var(--quick-popup-opacity,1); transform:translateY(calc((1 - var(--quick-popup-opacity,1)) * 8px)); pointer-events:auto; transition:none; }
.quick-panel[data-quick-action="done"] .quick-result { pointer-events:none; }
.translation-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.result-brand { display:flex; align-items:center; gap:4px; color:var(--brand); font-size:11px; font-weight:550; }
.mini-logo { display:flex; align-items:center; justify-content:center; width:20px; height:18px; overflow:hidden; }
.mini-logo img { display:block; width:22px; height:auto; max-width:none; flex:none; }
.language-pair { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; white-space:nowrap; }
.result-original { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.5; }
.result-translation { margin-top:4px; font-size:18px; line-height:1.65; font-weight:400; }
.selection-result { left:20px; bottom:16px; width:min(480px,calc(100% - 40px)); }
.selection-result .result-original { font-size:11px; line-height:1.5; }
.selection-output { display:grid; min-height:52px; margin-top:4px; }
.selection-output>* { grid-area:1 / 1; margin:0; }
.selection-measure { visibility:hidden; }
.selection-loading { display:flex; flex-direction:column; gap:6px; opacity:0; pointer-events:none; }
.selection-loading-label { display:flex; align-items:center; gap:6px; color:var(--brand); font-size:10px; line-height:14px; }
.selection-loading-label svg { width:12px; height:12px; stroke:currentColor; stroke-width:2; stroke-dasharray:42 15; transform:rotate(var(--stream-spin,0deg)); }
.selection-skeleton { display:flex; flex-direction:column; gap:4px; }
.selection-skeleton i { display:block; height:5px; width:90%; border-radius:3px; background:linear-gradient(90deg,#f0ecee 25%,#e3dce0 50%,#f0ecee 75%); background-size:200% 100%; background-position:var(--stream-shimmer,200%) 0; }
.selection-skeleton i:nth-child(2) { width:70%; }.selection-skeleton i:nth-child(3) { width:80%; }.selection-skeleton i:nth-child(4) { width:55%; }
.selection-panel[data-stream-state="loading"] .selection-loading { opacity:1; }
.quick-chat { background:#f4f1f2; }
.quick-chat-header { display:flex; align-items:center; gap:10px; padding:12px 20px; background:#fffdfd; border-bottom:1px solid var(--line); }
.quick-avatar { display:flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:9px; background:#eee7ec; color:var(--brand); font-size:12px; font-weight:600; }
.quick-contact { --od-gap:0px; line-height:1.4; }
.quick-contact-name { font-size:13px; font-weight:550; }.quick-contact-topic,.quick-chat-label { color:#71666f; font-size:10px; }.quick-chat-label { margin-left:auto; }
.quick-history { display:flex; flex-direction:column; align-items:stretch; gap:18px; flex:1; min-height:142px; padding:20px; }
.quick-message { display:flex; align-items:flex-end; gap:8px; min-width:0; }.quick-message-out { justify-content:flex-end; }
.quick-avatar-small { width:24px; height:24px; border-radius:7px; font-size:10px; }.quick-avatar-self { color:#70535f; background:#e9dce2; }
.quick-bubble { max-width:calc(100% - 40px); padding:8px 12px; border:1px solid #e4e7eb; border-radius:10px 10px 10px 2px; background:#fff; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.quick-message-out .quick-bubble { border-color:#e5cbd6; border-radius:10px 10px 2px 10px; background:#f1e4ea; color:#7c2445; }
.draft-content { position:relative; padding:12px 20px 8px; background:#fff; border-top:1px solid #e4e7eb; }
.quick-compose-heading { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.quick-compose-heading label { color:#6f626a; font-size:10px; }.draft-status { margin-left:auto; color:#746770; font-size:9px; }
.quick-input-wrap { position:relative; }
#quick-input,.quick-input-mirror,.quick-input-transition { width:100%; height:58px; padding:6px 44px 6px 10px; border:1px solid #e4e7eb; border-radius:7px; font:14px/1.6 var(--font-body); white-space:pre-wrap; overflow-wrap:anywhere; }
#quick-input { display:block; resize:none; background:#fff; color:var(--ink); }
.quick-input-mirror { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.quick-input-transition { position:absolute; inset:0; display:grid; opacity:0; border-color:transparent; pointer-events:none; }
.quick-input-transition>span { grid-area:1 / 1; }
.quick-source-text { opacity:var(--quick-source-opacity,1); transform:translateY(calc((1 - var(--quick-source-opacity,1)) * -4px)); }
.quick-target-text { opacity:var(--quick-target-opacity,0); transform:translateY(calc((1 - var(--quick-target-opacity,0)) * 4px)); }
.quick-panel[data-quick-action="replace"] #quick-input { color:transparent; }
.quick-panel[data-quick-action="replace"] .quick-input-transition { opacity:1; }
.quick-panel[data-quick-action="done"] #quick-input { border-color:color-mix(in srgb,#a0c7ae calc(var(--reset-opacity,1) * 100%),#e4e7eb); background:color-mix(in srgb,#f7fcf9 calc(var(--reset-opacity,1) * 100%),#fff); }
.quick-panel[data-quick-action="done"] .draft-status { color:#15803d; }
.draft-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; font-size:10px; color:#746770; }
.draft-feedback { display:grid; align-items:center; min-height:22px; }
.draft-feedback>* { grid-area:1 / 1; }
.draft-hint { pointer-events:none; }
.quick-action-note { min-height:26px; padding:0 20px 8px; background:#fff; color:#746770; font-size:10px; line-height:18px; }
.peak-icon { display:block; width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quick-indicator { position:absolute; z-index:3; display:grid; place-items:center; width:36px; height:36px; opacity:0; color:#15803d; }
.quick-indicator .peak-icon { width:36px; height:36px; }
.quick-panel:is([data-step="1"],[data-step="2"]) .quick-indicator { opacity:1; }
.quick-panel[data-step="3"] .quick-indicator { opacity:var(--quick-popup-opacity,1); }
.quick-panel[data-step="1"] .quick-indicator .peak-icon { animation:peak-loading 2.1s linear infinite; }
.demo-stage[data-playing="false"] .quick-indicator .peak-icon { animation-play-state:paused; }
@keyframes peak-loading { 0%,100% {color:#60a5fa} 15% {color:#c084fc} 30% {color:#f87171} 45% {color:#fb923c} 60% {color:#facc15} 75% {color:#4ade80} 90% {color:#22d3ee} }
.quick-result { width:min(360px,calc(100% - 36px)); padding:12px 12px 8px; border-color:#e2e6eb; border-radius:12px; box-shadow:0 10px 28px -14px #25324b38; font-size:13px; line-height:1.5; }
.quick-original { color:#454b54; }
.quick-preview { margin-top:10px; padding-left:10px; border-left:2px solid var(--brand); color:#293240; font-size:13px; line-height:1.5; }
.quick-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.quick-popup-brand { display:flex; align-items:center; gap:5px; color:#15803d; }.quick-popup-brand strong { color:#293240; font-size:12px; font-weight:500; }.quick-popup-brand>span { margin-left:4px; color:#8b929c; font-size:10px; }
.replace-button { display:flex; align-items:center; justify-content:center; min-width:64px; min-height:40px; padding:6px 13px; border-radius:7px; color:var(--white); background:var(--brand); font-size:12px; line-height:1.5; transform:scale(var(--quick-press-scale,1)); }
.restore-button { min-height:22px; padding:0 4px; justify-self:start; border-radius:3px; background:transparent; color:#15803d; font-size:10px; text-decoration:underline; text-underline-offset:3px; opacity:0; pointer-events:none; }
.restore-button:disabled,.replace-button:disabled { opacity:.5; }
.restore-button:disabled { opacity:0; }
.quick-panel[data-quick-action="done"] .draft-hint { opacity:0; }
.quick-panel[data-quick-action="done"] .restore-button { opacity:var(--reset-opacity,1); pointer-events:auto; }
.replace-wrap { position:relative; display:block; }
.replace-wrap::after { content:''; position:absolute; width:30px; height:30px; top:8px; right:2px; border:2px solid #9a91ff; border-radius:50%; opacity:var(--quick-click-opacity,0); transform:scale(var(--quick-click-scale,.5)); pointer-events:none; }
.demo-pointer { --od-icon-size:24px; position:absolute; right:0; top:22px; color:var(--ink); fill:#fff!important; opacity:0; pointer-events:none; }
.quick-panel[data-step="3"] .demo-pointer { opacity:var(--quick-popup-opacity,1); transform:translate(calc((1 - var(--quick-pointer-progress,0)) * -80px),calc((1 - var(--quick-pointer-progress,0)) * 55px)); }
.quick-panel[data-step="3"] .replace-button { background:var(--brand-hover); }
.capture-window { background:#d4d2bc; }
.capture-toolbar { position:absolute; inset:0 0 auto; z-index:2; background:#263e36d9; color:#e9ede4; border-color:#ffffff20; }
.capture-toolbar .window-dots i { background:#e6e7d270; }
.capture-content { position:absolute; inset:0; }
.capture-art { display:block; width:100%; height:100%; }
.capture-art>image { filter:brightness(var(--capture-brightness,1)); }
.capture-outline { fill:#fff1; stroke:var(--brand); stroke-width:1.5; opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:top left; }
.capture-corners { fill:none; stroke:var(--brand); stroke-width:3; opacity:0; }
.capture-panel[data-step="1"] .capture-outline { opacity:1; transform:scale(var(--step-progress,0)); }
.capture-panel:is([data-step="2"],[data-step="3"],[data-step="4"]) .capture-outline { opacity:1; transform:scale(1); }
.capture-panel:is([data-step="2"],[data-step="3"],[data-step="4"]) .capture-corners { opacity:1; }
.capture-pointer { fill:#fff!important; stroke:#292629; opacity:0; }
.capture-panel[data-step="1"] .capture-pointer { opacity:1; transform:translate(calc((var(--step-progress,0) - 1) * 470px),calc((var(--step-progress,0) - 1) * 164px)); }
.capture-result { left:20px; bottom:70px; width:min(350px,calc(100% - 40px)); }
.demo-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:76px; padding:12px 16px; background:#fdfbfc; border-top:1px solid var(--line); }
.step-copy { --od-gap:2px; min-width:0; }
#step-label { font-size:var(--text-xs); font-weight:500; line-height:1.6; }
#step-detail { font-size:10px; line-height:1.6; color:var(--muted); }
.step-detail-slot { display:grid; align-items:center; }
.step-detail-slot>* { grid-area:1 / 1; }
.selection-key-guide { visibility:hidden; }
.demo-stage[data-scene="selection"] .selection-key-guide { visibility:visible; }
.demo-stage[data-scene="selection"] #step-detail { visibility:hidden; }
.playback-controls { display:flex; align-items:center; gap:6px; flex:none; }
.control-button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:4px 8px; border:1px solid #e5dbe0; border-radius:7px; background:var(--white); color:#6f5e67; font-size:11px; white-space:nowrap; transition:color var(--duration),background var(--duration),border-color var(--duration); }
.control-button>span[data-icon] { display:flex; align-items:center; }
.control-button .od-icon { --od-icon-size:14px; }
.demo-progress { height:2px; background:#eee7eb; }
.demo-progress>span { display:block; width:100%; height:100%; background:var(--brand); transform:scaleX(var(--progress,0)); transform-origin:left; }
.step-copy,.demo-progress>span,.quick-action-note,.draft-feedback,.draft-status { opacity:var(--loop-opacity,1); }
.demo-panel:not(.quick-panel)[data-resetting="true"] .translation-window { opacity:var(--reset-opacity); transform:translateY(var(--reset-shift)); pointer-events:none; transition:none; }
.selection-panel[data-resetting="true"] .selected-phrase::before,.capture-panel[data-resetting="true"] .capture-outline,.capture-panel[data-resetting="true"] .capture-corners,.quick-panel[data-resetting="true"] .quick-action-note { opacity:var(--reset-opacity); }
.motion-note { font-size:11px; line-height:1.6; color:var(--muted); margin-top:8px; padding-inline:4px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-block:20px; font-size:11px; color:var(--muted); }
.site-footer p>span[lang] { color:var(--ink); font-size:var(--text-sm); font-weight:600; letter-spacing:-.02em; }
.footer-divider { margin-inline:16px; color:#b4a8ad; }
.footer-note { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:10px; letter-spacing:.02em; }
.footer-dot { color:#b5a9ae; }
.notice { width:min(440px,calc(100% - 40px)); padding:24px 32px 32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); color:var(--ink); box-shadow:0 24px 80px #21151d29; }
.notice::backdrop { background:#29222955; backdrop-filter:blur(3px); }
.notice-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.notice-kicker { color:var(--brand); font-size:10px; letter-spacing:.1em; }
.notice-close { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:transparent; border-radius:4px; }
.notice-close .od-icon { --od-icon-size:18px; }
.notice h2 { font-size:var(--text-xl); line-height:1.4; font-weight:600; letter-spacing:0; }
.notice>p { margin-top:16px; font-size:var(--text-sm); color:var(--muted); }
.notice .notice-footnote { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); font-size:var(--text-xs); }
.noscript-note { padding:16px; color:var(--brand); text-align:center; }

@media (hover:hover) {
  .nav-link:hover,.text-button:hover,.restore-button:not(:disabled):hover { color:var(--brand); }
  .download-button:hover { background:var(--brand-hover); transform:translateY(-1px); box-shadow:inset 0 1px 0 #ffffff24,0 10px 24px -12px #7f063e80; }
  .demo-tabs button:not([aria-selected="true"]):hover { color:var(--brand); background:#eee2e8; }
  .control-button:hover,.notice-close:hover { color:var(--brand); background:var(--brand-tint); }
  .replace-button:not(:disabled):hover { background:var(--brand-hover); color:var(--white); }
}

/* Fit each simulated document to its actual column, without scaling the scene. */
@container demo (max-width:640px) {
  .web-article { grid-template-columns:minmax(0,1fr); }
  .article-visual { display:none; }
  .web-navigation>span:not(.web-menu) { display:none; }
  .document-content { padding:16px 20px; }
  .document-title { font-size:26px; line-height:1.18; }
  .document-body { margin-top:10px; font-size:13px; line-height:1.7; }
  .document-kicker { margin-bottom:8px; }
  .web-paragraph { margin-top:12px; }
}
@container demo (max-width:480px) {
  .window-bar { padding-inline:12px; gap:8px; }
  .browser-address { min-width:0; max-width:calc(100% - 44px); padding-inline:8px; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .web-navigation { padding:8px 20px; }
  .document-title { font-size:24px; }
  .selection-result { left:12px; width:calc(100% - 24px); padding:12px; }
  .selection-result .result-translation { font-size:16px; line-height:1.6; }
  .result-brand { font-size:10px; }
  .language-pair { font-size:9px; gap:4px; }
  .demo-controls { padding-inline:12px; gap:8px; }
  .control-button { padding-inline:6px; }
  .replay-button>span { display:none; }
  .playback-controls { gap:8px; }
}
@media (min-width:1024px) and (max-height:800px) {
  :root { --scene-height:412px; --text-display:clamp(44px,4.3vw,60px); }
  .site-header { padding-block:10px; }
  .hero { padding-block:12px; }
  .hero-copy { padding-block:8px; }
  .eyebrow { margin-bottom:20px; }
  .hero-description { margin-top:20px; line-height:1.75; }
  .download-area { margin-top:28px; }
  .hero-signoff { margin-top:28px; }
  .demo-heading { padding-bottom:8px; }
  .demo-tabs { padding-block:6px; }
  .demo-controls { min-height:70px; padding-block:8px; }
  .document-content { padding-top:8px; }
  .site-footer { padding-block:12px; }
}
@media (min-width:1024px) and (max-height:740px) and (prefers-reduced-motion:reduce) {
  .site-header { padding-block:9px; }
  .hero { padding-block:4px; }
}
@media (max-width:1199px) and (min-width:1024px) {
  .page-shell { width:calc(100% - 96px); }
  .hero { gap:32px; }
  h1 { font-size:48px; }
  .site-nav { gap:24px; }
  .download-row { gap:16px; }
  .download-button { padding-inline:16px; font-size:14px; gap:8px; }
  .download-button .download-arrow { margin-left:0; }
  .release { padding-left:16px; }
  .platform-label { display:none; }
}
@media (max-width:1023px) {
  :root { --scene-height:448px; }
  .page-shell { width:calc(100% - 64px); max-width:720px; }
  .site-header { padding-block:24px; }
  .site-nav { gap:24px; }
  .platform-label { display:none; }
  .hero { grid-template-columns:minmax(0,1fr); align-content:start; gap:40px; padding-block:40px; }
  .hero-copy { padding-block:0; }
  h1 { font-size:60px; }
  .hero-description { margin-top:20px; }
  .download-area { margin-top:28px; }
  .hero-signoff { margin-top:24px; }
  .hero-signoff p br { display:none; }
  .hero-signoff p>span { margin-left:8px; }
  .site-footer { align-items:flex-start; }
}
@media (max-width:599px) {
  :root { --scene-height:512px; }
  .page-shell { width:calc(100% - 40px); }
  .site-header { padding-block:20px; gap:12px; }
  .brand { gap:8px; }
  .brand-logo { width:32px; height:28px; }
  .brand-logo img { width:34px; }
  .brand-name { font-size:15px; }
  .wordmark { font-size:14px; }
  .brand-divider { margin-inline:0; height:12px; }
  .site-nav { gap:12px; }
  .site-nav .nav-link { font-size:var(--text-xs); }
  .site-nav button { display:none; }
  .hero { padding-block:32px 24px; gap:36px; }
  .eyebrow { margin-bottom:20px; font-size:12px; }
  h1 { font-size:clamp(34px,10.7vw,52px); line-height:1.35; }
  .hero-description { font-size:15px; }
  .download-area { margin-top:24px; }
  .download-row { gap:16px; }
  .download-button { min-height:56px; padding-inline:16px; font-size:14px; gap:8px; }
  .download-button .download-arrow { margin-left:0; }
  .download-meta { gap:12px; font-size:11px; }
  .release { padding-left:12px; }
  .release-version { font-size:12px; }
  .release-platform { font-size:11px; }
  .hero-signoff { margin-top:24px; }
  .hero-signoff p { font-size:12px; }
  .signoff-line { width:24px; }
  .demo-heading { font-size:12px; padding-bottom:12px; gap:4px; }
  .demo-caption { font-size:10px; }
  .demo-tabs { padding:7px; gap:4px; }
  .demo-tabs button { min-height:44px; font-size:11px; gap:5px; border-radius:7px; }
  .tab-number { width:17px; height:18px; border-radius:5px; font-size:8px; }
  .document-content { padding:20px; }
  .document-title { font-size:25px; }
  .web-paragraph { font-size:12px; }
  .web-bottom { inset-inline:20px; }
  .selection-result { bottom:12px; }
  .scene-shortcut { right:12px; bottom:14px; padding:5px 8px; font-size:9px; gap:6px; }
  .quick-chat-header { padding-inline:16px; }
  .quick-history { padding:18px 16px; }
  .draft-content { padding-inline:16px; }
  #quick-input,.quick-input-mirror,.quick-input-transition { height:76px; font-size:13px; }
  .quick-action-note { padding-inline:16px; font-size:9px; }
  .draft-bottom { font-size:9px; }
  .quick-result { width:calc(100% - 24px); }
  .quick-popup-brand { gap:3px; }
  .quick-popup-brand>span { font-size:9px; }
  .quick-popup-brand .peak-icon { width:24px; height:24px; }
  .replace-button { min-height:40px; padding-inline:10px; }
  .capture-result { left:12px; width:calc(100% - 24px); }
  .key-combo { gap:3px; }
  kbd { font-size:9px; }
  .demo-controls { min-height:76px; padding:12px; align-items:center; gap:8px; }
  .step-copy { padding-top:4px; }
  #step-label { font-size:11px; }
  #step-detail { font-size:9px; }
  .control-button { min-width:44px; padding:4px; font-size:10px; }
  .control-button .od-icon { --od-icon-size:12px; }
  .site-footer { gap:12px; padding-block:20px; font-size:10px; }
  .site-footer p>span[lang] { font-size:var(--text-xs); }
  .footer-divider { margin-inline:8px; }
  .footer-note { font-size:9px; }
}
@media (max-width:359px) {
  :root { --scene-height:544px; }
  .page-shell { width:calc(100% - 32px); }
  .site-nav { display:none; }
  h1 { font-size:34px; }
  .download-row { gap:12px; }
  .download-button { padding-inline:12px; font-size:13px; }
  .download-button .od-icon { --od-icon-size:16px; }
  .release { padding-left:12px; }
  .demo-caption { display:none; }
  .hero-signoff p>span { display:block; margin-left:0; }
  .hero-signoff p br { display:none; }
  .demo-tabs button { gap:4px; }
  .tab-number { display:none; }
  .window-dots { display:none; }
  .translation-top { gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}