:root {
  --ink: #12202d;
  --muted: #687685;
  --line: #dce3e8;
  --paper: #f4f6f5;
  --white: #ffffff;
  --navy: #0f2636;
  --blue: #266c8e;
  --blue-dark: #174e6b;
  --mint: #78bda5;
  --shadow: 0 18px 60px rgba(21, 45, 59, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body:before, body:after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
body:before { width: 40vw; height: 40vw; left: -18vw; top: 22vh; background: rgba(77, 156, 150, .10); animation: ambient-drift 15s ease-in-out infinite alternate; }
body:after { width: 34vw; height: 34vw; right: -14vw; top: 48vh; background: rgba(48, 106, 147, .09); animation: ambient-drift 18s ease-in-out -5s infinite alternate-reverse; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

.masthead { height: 78px; padding: 0 max(34px, calc((100vw - 1360px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(18, 32, 45, .08); background: rgba(248, 249, 248, .9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; position: relative; display: grid; place-items: center; border-radius: 10px; background: var(--navy); box-shadow: 0 8px 20px rgba(15, 38, 54, .18); }
.brand-mark:before, .brand-mark:after, .brand-mark i { content: ""; position: absolute; width: 5px; height: 5px; border: 2px solid #8ed2ba; border-radius: 50%; }
.brand-mark:before { transform: translate(-7px, -6px); }
.brand-mark:after { transform: translate(7px, 6px); }
.brand-mark i:first-child { transform: translate(7px, -6px); }
.brand-mark i:last-child { transform: translate(-7px, 6px); }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand b { font-size: 18px; letter-spacing: -.4px; }
.brand small { margin-top: 1px; color: #7d8993; font-size: 9px; letter-spacing: .12em; }
.header-note { display: flex; align-items: center; gap: 8px; color: #70808a; font: 600 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.header-note i { width: 7px; height: 7px; border-radius: 50%; background: #62ac8e; box-shadow: 0 0 0 4px rgba(98,172,142,.12); }

main { max-width: 1360px; margin: 0 auto; padding: 32px 34px 26px; }
.hero { --depth-x: 0; --depth-y: 0; min-height: 430px; overflow: hidden; position: relative; border: 1px solid rgba(119,184,172,.13); border-radius: 24px; background: #081e2d; box-shadow: 0 25px 75px rgba(10, 35, 48, .18); isolation: isolate; }
.hero:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,26,39,.97) 0%, rgba(7,27,40,.88) 35%, rgba(7,27,40,.38) 58%, rgba(7,27,40,.12) 100%), linear-gradient(0deg, rgba(5,20,30,.55), transparent 44%); }
.hero:after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -70px 100px rgba(3,14,22,.28); pointer-events: none; }
.hero-backdrop { position: absolute; inset: 0; overflow: hidden; }
.depth-image { width: 112%; height: 112%; position: absolute; left: -4%; top: -6%; object-fit: cover; opacity: .54; transform: translate3d(calc(var(--depth-x) * -16px), calc(var(--depth-y) * -10px), 0) scale(1.035); filter: blur(1.2px) saturate(.74) contrast(1.03); transition: transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.anatomy-foreground { width: auto; height: 112%; position: absolute; right: -2.5%; bottom: -12%; z-index: 2; object-fit: contain; opacity: .94; transform: translate3d(calc(var(--depth-x) * 10px), calc(var(--depth-y) * 7px), 0); filter: saturate(.73) contrast(1.04) brightness(.84) drop-shadow(-24px 12px 34px rgba(1,12,20,.38)); transition: transform .58s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.anatomy-scan { width: 41%; height: 1px; position: absolute; right: 0; top: 18%; z-index: 3; background: linear-gradient(90deg, transparent, rgba(105,223,197,.72), transparent); box-shadow: 0 0 18px rgba(105,223,197,.42); opacity: .55; animation: anatomy-scan 6.5s ease-in-out infinite; }
.depth-grid { position: absolute; inset: -8%; transform: translate3d(calc(var(--depth-x) * 9px), calc(var(--depth-y) * 6px), 0); background-image: linear-gradient(rgba(142,211,198,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(142,211,198,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 72%); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.depth-glow { position: absolute; border-radius: 50%; filter: blur(38px); opacity: .42; mix-blend-mode: screen; }
.depth-glow-one { width: 180px; height: 180px; right: 18%; top: 12%; z-index: 2; background: rgba(64,193,189,.22); transform: translate3d(calc(var(--depth-x) * 24px), calc(var(--depth-y) * 16px), 0); }
.depth-glow-two { width: 110px; height: 110px; right: 5%; bottom: 8%; background: rgba(104,211,178,.19); transform: translate3d(calc(var(--depth-x) * 38px), calc(var(--depth-y) * 24px), 0); }
.depth-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.depth-particles i { width: 5px; height: 5px; position: absolute; border-radius: 50%; background: rgba(116,219,205,.62); box-shadow: 0 0 12px rgba(116,219,205,.75); animation: particle-float 6s ease-in-out infinite alternate; }
.depth-particles i:nth-child(1) { left: 45%; top: 24%; }
.depth-particles i:nth-child(2) { width: 3px; height: 3px; left: 56%; top: 68%; animation-delay: -1.4s; }
.depth-particles i:nth-child(3) { width: 8px; height: 8px; left: 70%; top: 17%; filter: blur(2px); animation-delay: -3s; }
.depth-particles i:nth-child(4) { left: 83%; top: 61%; animation-delay: -4.2s; }
.depth-particles i:nth-child(5) { width: 11px; height: 11px; left: 91%; top: 26%; filter: blur(4px); animation-delay: -2.1s; }
.depth-particles i:nth-child(6) { width: 3px; height: 3px; left: 62%; top: 38%; animation-delay: -.7s; }
.hero-copy { width: min(680px, 59%); min-height: 430px; display: flex; flex-direction: column; justify-content: center; padding: 52px 56px 50px; position: relative; z-index: 3; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #80bca8; font: 600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.eyebrow i { width: 23px; height: 1px; background: #80bca8; }
.hero h1 { margin: 21px 0 16px; color: #f7fbfc; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(38px, 4.2vw, 61px); font-weight: 500; line-height: 1.14; letter-spacing: -.052em; text-shadow: 0 5px 30px rgba(2,12,19,.32); }
.hero h1 em { color: #9cd0be; font-style: normal; }
.hero-copy > p { max-width: 660px; margin: 0; color: #a9bac4; font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.hero-upload { min-width: 210px; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 0 23px; border: 1px solid rgba(191,237,221,.72); border-radius: 11px; color: #0b2837; background: linear-gradient(135deg, #b6e6d5, #89cbb5); box-shadow: 0 13px 32px rgba(66,157,130,.23), inset 0 1px rgba(255,255,255,.45); cursor: pointer; font-size: 14px; font-weight: 700; transition: .25s ease; }
.hero-upload:hover { background: linear-gradient(135deg, #c6eee0, #9bd8c4); box-shadow: 0 16px 40px rgba(66,157,130,.31), inset 0 1px rgba(255,255,255,.55); transform: translateY(-2px); }
.hero-upload span { font-size: 16px; font-weight: 400; }
.capability-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.capability-tags span { padding: 8px 12px; border: 1px solid rgba(171,205,199,.22); border-radius: 999px; color: #abc0c6; background: rgba(255,255,255,.045); font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.hero-readout { min-width: 172px; position: absolute; right: 27px; bottom: 24px; z-index: 5; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid rgba(155,215,200,.2); border-radius: 8px; color: #dcebea; background: rgba(5,24,35,.58); box-shadow: 0 12px 40px rgba(2,14,21,.2); backdrop-filter: blur(16px); }
.hero-readout span { display: flex; align-items: center; gap: 7px; color: #94b9b3; font: 600 7px ui-monospace, monospace; letter-spacing: .12em; }
.hero-readout span i { width: 6px; height: 6px; border-radius: 50%; background: #71d0ac; box-shadow: 0 0 10px #71d0ac; }
.hero-readout b { margin-top: 8px; font: 600 10px ui-monospace, monospace; letter-spacing: .09em; }
.hero-readout small { margin-top: 4px; color: #6f9296; font: 500 6px ui-monospace, monospace; letter-spacing: .08em; }
.hero-edge-label { position: absolute; right: -45px; top: 50%; z-index: 5; transform: rotate(90deg); color: rgba(161,199,198,.5); font: 600 6px ui-monospace, monospace; letter-spacing: .23em; }

.workspace { margin-top: 24px; padding: 28px; border: 1px solid rgba(204,216,222,.9); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 18px 55px rgba(31, 54, 68, .075); backdrop-filter: blur(20px); }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.workspace-head > div:first-child span, .panel-title span { color: var(--blue); font: 600 8px ui-monospace, monospace; letter-spacing: .16em; }
.workspace h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.035em; }
.workspace-meta { display: flex; align-items: center; gap: 18px; }
.workflow-rail { display: flex; align-items: center; gap: 8px; }
.workflow-rail > i { width: 22px; height: 1px; display: block; background: #dbe2e6; }
.workflow-rail span { display: flex; align-items: center; gap: 5px; color: #9aa5ac; font-size: 8px; transition: .25s; }
.workflow-rail span b { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #dce3e7; border-radius: 50%; color: #9aa5ac; font: 600 7px ui-monospace, monospace; background: #f8f9f9; transition: .25s; }
.workflow-rail span.active { color: var(--blue-dark); font-weight: 600; }
.workflow-rail span.active b { border-color: #76ae9a; color: #fff; background: #4f9278; box-shadow: 0 0 0 4px rgba(79,146,120,.1); }
.workflow-rail span.complete { color: #68907f; }
.workflow-rail span.complete b { border-color: #b5d9ca; color: #4d8e75; background: #edf7f3; }
.service-state { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #e1e5e8; border-radius: 999px; color: #72808b; background: #f8f9f9; font-size: 9px; }
.service-state i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6ae; box-shadow: 0 0 0 4px rgba(154,166,174,.12); }
.service-state.ready { color: #32765d; border-color: #cde6dc; background: #f3faf7; }
.service-state.ready i { background: #52a985; box-shadow: 0 0 0 4px rgba(82,169,133,.12); }
.service-state.warning { color: #9a7022; border-color: #eedfb8; background: #fffaf0; }
.service-state.warning i { background: #d8a240; }
.service-state.offline { color: #966060; border-color: #ecd8d8; background: #fff7f7; }
.service-state.offline i { background: #c97b7b; }

.workflow-grid { display: grid; grid-template-columns: minmax(380px, .88fr) minmax(500px, 1.12fr); gap: 16px; }
.panel { min-height: 440px; position: relative; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--white); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.panel:hover { transform: translateY(-2px); border-color: #cdd9de; box-shadow: 0 16px 38px rgba(21,48,63,.08); }
.panel-index { position: absolute; right: 18px; top: 9px; color: #eff2f3; font: 700 62px/1 ui-monospace, monospace; pointer-events: none; }
.panel-title { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.panel-title h3 { margin: 5px 0 0; font-size: 17px; }
.panel-title > small { color: #87939d; font-size: 9px; }

.drop-zone { min-height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 24px; border: 1px dashed #b9c8d0; border-radius: 12px; background: #f7f9f9; cursor: pointer; transition: .2s ease; text-align: center; }
.drop-zone:hover, .drop-zone.dragging { border-color: #5b9f87; background: linear-gradient(145deg, #f4faf7, #f0f7f8); box-shadow: inset 0 0 0 1px rgba(91,159,135,.08), 0 12px 26px rgba(32,93,72,.07); transform: translateY(-2px); }
.upload-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; color: var(--blue); background: #e6f0f4; }
.upload-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.drop-zone b { font-size: 14px; }
.drop-zone p { max-width: 400px; margin: 7px 0 13px; color: #7b8892; font-size: 9px; line-height: 1.6; }
.choose-file { padding: 7px 13px; border: 1px solid #cdd8de; border-radius: 7px; color: #35556a; background: #fff; font-size: 9px; font-weight: 600; }
.input-preview { display: none; }
.input-preview.show { width: calc(100% - 20px); height: calc(100% - 20px); display: block; position: absolute; inset: 10px; border-radius: 9px; object-fit: contain; background: #07111a; }
.drop-zone.has-preview > :not(input):not(.input-preview) { opacity: 0; }
.drop-zone.has-preview:after { content: "点击更换图片"; position: absolute; right: 17px; bottom: 16px; z-index: 2; padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #d8e7e9; background: rgba(4,18,27,.72); backdrop-filter: blur(10px); font-size: 8px; }
.selection { display: none; margin-top: 11px; padding: 11px 12px; border: 1px solid #d7e6df; border-radius: 9px; background: #f4faf7; }
.selection.show { display: block; }
.selection.error { border-color: #edd3d3; background: #fff6f6; }
.selection > div { display: flex; justify-content: space-between; gap: 14px; }
.selection b { font-size: 10px; }
.selection > div span { color: #648071; font-size: 8px; }
.selection.error > div span { color: #aa6565; }
.selection ul { max-height: 72px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.selection li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid rgba(42,90,69,.09); color: #65736e; font-size: 8px; }
.selection li small { color: #8b9691; }
.analyze-button { width: 100%; min-height: 61px; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; background: var(--blue-dark); box-shadow: 0 10px 22px rgba(23,78,107,.19); cursor: pointer; text-align: left; transition: .2s ease; }
.analyze-button:hover:not(:disabled) { background: #103f57; transform: translateY(-1px); }
.analyze-button:disabled { color: #9aa7ae; background: #e8ecee; box-shadow: none; cursor: not-allowed; }
.button-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.1); }
.button-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.analyze-button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.analyze-button b { font-size: 12px; }
.analyze-button small { margin-top: 4px; opacity: .7; font-size: 8px; }
.analyze-button > i { font-style: normal; font-size: 18px; }
.progress { display: none; margin-top: 12px; }
.progress.show { display: block; }
.progress > div { display: flex; justify-content: space-between; margin-bottom: 6px; color: #65737d; font-size: 8px; }
.progress > i { height: 4px; display: block; overflow: hidden; border-radius: 99px; background: #e5e9eb; }
.progress em { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--mint)); transition: width .35s; }
.privacy { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; color: #849098; font-size: 8px; }
.privacy svg { width: 14px; fill: none; stroke: #60917e; stroke-width: 1.6; }

.result-panel { background: #0f1e29; border-color: #0f1e29; color: #eef5f6; }
.result-panel:hover { border-color: #193848; box-shadow: 0 18px 45px rgba(8,24,34,.18); }
.result-panel .panel-index { color: rgba(255,255,255,.035); }
.result-panel .panel-title h3 { color: #f3f7f8; }
.result-panel .panel-title > small { color: #8ba0aa; }
.result-panel .panel-title span { color: #78bda5; }
.result-empty { min-height: 326px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: .2s; }
.result-empty.hide { display: none; }
.empty-visual { width: 142px; height: 142px; position: relative; margin-bottom: 20px; border: 1px solid rgba(134,174,187,.15); border-radius: 50%; background: radial-gradient(circle, rgba(89,144,151,.17), transparent 68%); }
.empty-visual:before, .empty-visual:after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(121,178,174,.2); border-radius: 48% 52% 45% 55%; transform: rotate(18deg); }
.empty-visual:after { inset: 38px; transform: rotate(-25deg); }
.empty-visual i { position: absolute; background: rgba(111,190,168,.32); }
.empty-visual i:first-child { width: 1px; inset: 15px auto 15px 50%; }
.empty-visual i:nth-child(2) { height: 1px; inset: 50% 15px auto; }
.empty-visual span { width: 12px; height: 12px; position: absolute; left: 59%; top: 42%; border: 2px solid #ef8d52; border-radius: 50%; box-shadow: 0 0 14px rgba(239,141,82,.6); }
.result-empty b { font-size: 13px; }
.result-empty p { max-width: 330px; margin: 8px 0 0; color: #78909c; font-size: 9px; line-height: 1.7; }
.demo-loader { width: 142px; height: 142px; display: none; place-items: center; position: relative; margin-bottom: 20px; }
.demo-loader:before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, #78c3a8 42%, #4f89a6 70%, transparent 92%); animation: demo-spin 1.05s linear infinite; box-shadow: 0 0 38px rgba(83,177,156,.16); }
.demo-loader:after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(124,192,181,.16); border-radius: 50%; background: radial-gradient(circle, #102936 0 44%, #0b1d28 45% 100%); }
.demo-loader i { width: 1px; height: 118px; position: absolute; z-index: 2; background: linear-gradient(transparent, rgba(121,204,183,.38), transparent); animation: demo-scan 1.8s ease-in-out infinite alternate; }
.demo-loader span { position: relative; z-index: 3; color: #c9e8df; font: 600 20px ui-monospace, monospace; }
.demo-loader span:after { content: "s"; margin-left: 2px; color: #6f9891; font-size: 8px; }
.result-empty.processing .empty-visual { display: none; }
.result-empty.processing .demo-loader { display: grid; }
.result-content { display: none; }
.result-content.show { display: block; }
.demo-result-frame { height: 284px; position: relative; overflow: hidden; border: 1px solid #29424d; border-radius: 10px; background: #03080c; box-shadow: inset 0 0 35px rgba(44,108,111,.08); }
.demo-result-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.demo-result-frame > span { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(135,196,181,.2); border-radius: 5px; color: #9fc7bc; background: rgba(4,16,24,.72); backdrop-filter: blur(10px); font: 600 7px ui-monospace, monospace; letter-spacing: .1em; }
.demo-result-frame > span i { width: 6px; height: 6px; border-radius: 50%; background: #70c5a2; box-shadow: 0 0 9px #70c5a2; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.preview-grid figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #293a45; border-radius: 8px; background: #05090c; }
.preview-grid img { width: 100%; aspect-ratio: 1 / .82; display: block; object-fit: contain; }
.preview-grid figcaption { display: flex; justify-content: space-between; padding: 7px 8px; color: #7f9aa7; font: 600 7px ui-monospace, monospace; letter-spacing: .08em; }
.preview-grid figcaption span { color: #61737c; font-family: inherit; letter-spacing: 0; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.metrics div { padding: 11px; border: 1px solid #283a45; border-radius: 8px; background: #132631; }
.metrics span { display: block; color: #748b96; font-size: 7px; }
.metrics b { display: block; margin-top: 5px; color: #dcebec; font-size: 13px; }
.download-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; padding: 11px; border: 1px solid #376252; border-radius: 8px; color: #b5decf; background: #173329; cursor: pointer; font-size: 9px; font-weight: 600; }
.download-button:hover { background: #1c4133; }
.download-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.demo-disclaimer { margin: 9px 0 0; color: #687f89; font-size: 7px; text-align: center; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 4px 0; color: #8b959c; font-size: 8px; }
footer span { font: 600 8px ui-monospace, monospace; letter-spacing: .12em; }
footer p { margin: 0; text-align: right; }
.toast { min-width: 280px; display: flex; align-items: center; gap: 10px; position: fixed; right: 26px; bottom: 26px; z-index: 50; padding: 13px 15px; border: 1px solid #d5e1dc; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(20,40,50,.16); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: none; }
.toast > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #4d9a7c; }
.toast div { display: flex; flex-direction: column; }
.toast b { font-size: 10px; }
.toast small { margin-top: 3px; color: #7e8a92; font-size: 8px; }

@keyframes ambient-drift { to { transform: translate3d(5vw, -4vh, 0) scale(1.08); } }
@keyframes particle-float { to { transform: translate3d(8px, -12px, 0); opacity: .25; } }
@keyframes anatomy-scan { 0%, 100% { top: 18%; opacity: .2; } 48% { opacity: .68; } 60% { top: 82%; opacity: .42; } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-scan { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

@media (max-width: 980px) {
  .hero:before { background: linear-gradient(90deg, rgba(7,26,39,.97), rgba(7,27,40,.84) 65%, rgba(7,27,40,.42)); }
  .hero-copy { width: 78%; }
  .anatomy-foreground { right: -10%; opacity: .78; }
  .workflow-grid { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  .result-empty { min-height: 280px; }
}

@media (max-width: 640px) {
  .masthead { height: 68px; padding: 0 16px; }
  .brand small { display: none; }
  .header-note { font-size: 7px; letter-spacing: .09em; }
  main { padding: 16px; }
  .hero { min-height: 0; border-radius: 15px; }
  .hero-copy { width: 100%; min-height: 430px; padding: 38px 24px 78px; }
  .hero:before { background: linear-gradient(90deg, rgba(7,26,39,.97), rgba(7,27,40,.73)), linear-gradient(0deg, rgba(5,20,30,.65), transparent 55%); }
  .depth-image { width: 145%; left: -18%; opacity: .38; }
  .anatomy-foreground { height: 100%; right: -28%; bottom: -5%; opacity: .42; }
  .anatomy-scan { width: 64%; opacity: .28; }
  .hero h1 { font-size: 34px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .capability-tags { max-width: 280px; }
  .hero-readout { right: 18px; bottom: 17px; min-width: 156px; }
  .hero-edge-label { display: none; }
  .workspace { padding: 17px; border-radius: 15px; }
  .workspace-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .workspace-meta { width: 100%; align-items: flex-start; flex-direction: column-reverse; gap: 12px; }
  .workflow-rail { width: 100%; }
  .workflow-rail > i { flex: 1; }
  .workspace h2 { font-size: 18px; }
  .service-state { padding: 7px 9px; }
  .service-state span { max-width: 92px; }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 18px; }
  .panel-index { font-size: 46px; }
  .drop-zone { min-height: 165px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-grid img { aspect-ratio: 16 / 9; }
  .metrics { grid-template-columns: 1fr 1fr 1fr; }
  footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  footer p { text-align: left; line-height: 1.6; }
  .toast { left: 16px; right: 16px; bottom: 16px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Dark clinical shell: the medical visual continues behind the whole workspace. */
html { background: #06141e; }
body { position: relative; isolation: isolate; color: #dce7eb; background: transparent; }
body:before { width: auto; height: auto; inset: -8%; z-index: -2; border-radius: 0; opacity: .38; background: radial-gradient(circle at 18% 35%, rgba(35,119,119,.22), transparent 34%), radial-gradient(circle at 82% 68%, rgba(31,79,124,.2), transparent 32%); filter: blur(34px); animation: background-breathe 18s ease-in-out infinite alternate; }
body:after { width: auto; height: auto; inset: 0; z-index: -1; border-radius: 0; background: linear-gradient(180deg, rgba(4,17,26,.87), rgba(5,20,30,.75) 38%, rgba(4,16,24,.94)), radial-gradient(circle at 14% 34%, rgba(48,135,132,.17), transparent 34%), radial-gradient(circle at 86% 72%, rgba(39,92,133,.16), transparent 31%); filter: none; animation: none; }
.masthead { border-bottom-color: rgba(147,181,190,.12); background: rgba(5,20,30,.76); box-shadow: 0 10px 35px rgba(1,10,16,.18); }
.brand { color: #eaf1f3; }
.brand small { color: #77909a; }
.header-note { color: #78939b; }
main { position: relative; }
.workspace { position: relative; overflow: hidden; border-color: rgba(139,174,184,.15); background: rgba(7,24,35,.78); box-shadow: 0 22px 65px rgba(1,10,16,.26); }
.workspace:before { content: ""; position: absolute; inset: -10%; z-index: 0; background: url("./assets/lung-depth-hero.webp") 72% 48% / cover no-repeat; opacity: .24; filter: blur(5px) saturate(.75); animation: workspace-depth 16s ease-in-out infinite alternate; }
.workspace:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,20,30,.48), rgba(5,20,30,.18) 52%, rgba(5,20,30,.5)); pointer-events: none; }
.workspace > * { position: relative; z-index: 2; }
.workspace h2, .panel-title h3 { color: #edf4f5; }
.workspace-head > div:first-child span, .panel-title span { color: #7bc0aa; }
.workspace-meta { color: #9babb1; }
.workflow-rail > i { background: rgba(138,169,177,.22); }
.workflow-rail span { color: #6f848d; }
.workflow-rail span b { border-color: rgba(137,171,180,.25); color: #7e9198; background: rgba(255,255,255,.035); }
.workflow-rail span.active { color: #a7d7c5; }
.workflow-rail span.complete { color: #7fab99; }
.service-state { border-color: rgba(135,164,173,.18); color: #8499a1; background: rgba(255,255,255,.035); }
.service-state.offline { color: #d89595; border-color: rgba(204,117,117,.25); background: rgba(105,38,45,.16); }
.upload-panel { border-color: rgba(137,171,180,.16); background: rgba(9,29,41,.72); }
.panel:hover { border-color: rgba(131,191,177,.3); box-shadow: 0 18px 48px rgba(0,9,15,.24); }
.panel-index { color: rgba(226,240,243,.045); }
.panel-title > small { color: #738a93; }
.drop-zone { border-color: rgba(137,176,185,.35); background: rgba(255,255,255,.035); }
.drop-zone:hover, .drop-zone.dragging { border-color: #68b296; background: linear-gradient(145deg, rgba(75,151,125,.12), rgba(54,121,142,.09)); box-shadow: inset 0 0 0 1px rgba(91,159,135,.1), 0 14px 32px rgba(0,10,16,.18); }
.upload-icon { color: #8bc9b4; background: rgba(105,190,162,.11); }
.drop-zone b { color: #dce7ea; }
.drop-zone p { color: #768c95; }
.choose-file { border-color: rgba(139,174,184,.25); color: #abc0c7; background: rgba(255,255,255,.045); }
.selection { border-color: rgba(103,174,147,.24); background: rgba(41,101,78,.14); }
.selection.error { border-color: rgba(198,112,112,.28); background: rgba(111,44,44,.15); }
.selection b { color: #dce8e4; }
.selection > div span, .selection li, .selection li small { color: #78958a; }
.analyze-button:disabled { color: #667b84; background: rgba(255,255,255,.055); }
.privacy { color: #71858d; }
.progress > div { color: #82979f; }
.progress > i { background: rgba(255,255,255,.08); }
.result-panel { border-color: rgba(112,162,171,.14); background: rgba(5,18,28,.87); }
footer { color: #607680; }

@keyframes background-breathe {
  to { transform: scale(1.055) translate3d(-1.2%, -1%, 0); opacity: .33; }
}
@keyframes workspace-depth {
  to { transform: scale(1.045) translate3d(-1.1%, -.8%, 0); opacity: .29; }
}

/* Scalable image library */
.workflow-grid { grid-template-columns: minmax(520px, .98fr) minmax(500px, 1.02fr); }
.panel { min-height: 566px; }
.source-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -3px 0 13px; padding: 4px; border: 1px solid rgba(137,171,180,.16); border-radius: 10px; background: rgba(1,13,21,.28); }
.source-tabs button { min-height: 35px; border: 0; border-radius: 7px; color: #6f8791; background: transparent; cursor: pointer; font-size: 9px; font-weight: 600; transition: .2s ease; }
.source-tabs button span { margin-right: 5px; font-size: 13px; font-weight: 400; }
.source-tabs button:hover { color: #b7c9ce; background: rgba(255,255,255,.035); }
.source-tabs button.active { color: #c9e7dc; background: linear-gradient(135deg, rgba(64,136,111,.28), rgba(38,94,115,.23)); box-shadow: inset 0 0 0 1px rgba(119,193,167,.17), 0 5px 14px rgba(0,10,16,.16); }
.source-pane { min-height: 292px; }
.source-pane[hidden] { display: none !important; }
.library-toolbar { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.library-search { height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(137,171,180,.19); border-radius: 8px; background: rgba(255,255,255,.035); }
.library-search svg { width: 14px; flex: 0 0 auto; fill: none; stroke: #6f8f99; stroke-width: 1.7; }
.library-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #d9e6e9; background: transparent; font-size: 9px; }
.library-search input::placeholder { color: #647983; }
.library-toolbar select { height: 35px; padding: 0 28px 0 10px; border: 1px solid rgba(137,171,180,.19); border-radius: 8px; outline: 0; color: #adc0c6; background: #102735; font-size: 9px; }
.library-caption { display: flex; justify-content: space-between; margin: 11px 1px 8px; color: #7f979f; font-size: 8px; }
.library-caption small { color: #5f7780; }
.library-grid { min-height: 200px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 7px; }
.library-card { min-width: 0; overflow: hidden; padding: 0; border: 1px solid rgba(129,163,173,.17); border-radius: 9px; color: inherit; background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.library-card:hover { transform: translateY(-2px); border-color: rgba(111,187,161,.46); background: rgba(72,135,116,.08); }
.library-card.selected { border-color: #70b99d; background: rgba(72,147,119,.13); box-shadow: 0 0 0 1px rgba(112,185,157,.18), 0 9px 20px rgba(0,10,16,.18); }
.library-thumb { height: 82px; display: block; position: relative; overflow: hidden; background: #061019; }
.library-thumb:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(2,12,19,.52)); pointer-events: none; }
.library-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.76) contrast(1.03); transition: transform .35s ease; }
.library-card:hover img { transform: scale(1.045); }
.library-thumb i { width: 20px; height: 20px; display: grid; place-items: center; position: absolute; z-index: 2; right: 7px; top: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: transparent; background: rgba(3,16,24,.62); font-size: 9px; font-style: normal; backdrop-filter: blur(8px); }
.library-card.selected .library-thumb i { border-color: #83c9ae; color: #fff; background: #4d9a7d; }
.library-card-copy { display: block; padding: 8px; }
.library-card-copy b, .library-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-card-copy b { color: #c9d8dc; font-size: 8px; }
.library-card-copy small { margin-top: 4px; color: #607984; font: 600 7px ui-monospace, monospace; letter-spacing: .06em; }
.library-empty { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; border: 1px dashed rgba(137,171,180,.18); border-radius: 9px; color: #6e838c; font-size: 9px; }
.library-footer { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.library-selection { min-width: 0; display: flex; align-items: center; gap: 7px; color: #708690; font-size: 8px; }
.library-selection i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #647780; }
.library-selection span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-selection.ready { color: #91bba9; }
.library-selection.ready i { background: #6fc49e; box-shadow: 0 0 0 4px rgba(111,196,158,.09); }
.library-pagination { display: flex; align-items: center; gap: 8px; }
.library-pagination button { width: 27px; height: 27px; padding: 0; border: 1px solid rgba(137,171,180,.19); border-radius: 7px; color: #9bb0b7; background: rgba(255,255,255,.035); cursor: pointer; }
.library-pagination button:disabled { opacity: .32; cursor: default; }
.library-pagination span { min-width: 34px; color: #708690; font: 600 7px ui-monospace, monospace; text-align: center; }
#uploadPane .drop-zone { min-height: 236px; }
.demo-result-frame > span b { font: inherit; }

@media (max-width: 1100px) {
  .workflow-grid { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .library-toolbar { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-thumb { height: 92px; }
  .library-footer { align-items: flex-start; flex-direction: column; }
  .library-pagination { align-self: flex-end; }
}

/* Three fixed clinical datasets */
.dataset-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dataset-picker button { height: 132px; min-width: 0; position: relative; overflow: hidden; padding: 0; border: 1px solid rgba(128,164,175,.22); border-radius: 10px; color: #dbe8eb; background: #071722; cursor: pointer; text-align: left; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; isolation: isolate; }
.dataset-picker button:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,14,22,.03), rgba(3,14,22,.2) 38%, rgba(3,14,22,.94) 100%); }
.dataset-picker button:after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); pointer-events: none; }
.dataset-picker button > img { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -2; object-fit: cover; opacity: .7; filter: saturate(.85) contrast(1.08) brightness(.78); transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease, opacity .3s ease; }
.dataset-picker button:hover { transform: translateY(-3px); border-color: rgba(111,191,164,.55); box-shadow: 0 13px 26px rgba(0,9,15,.28); }
.dataset-picker button:hover > img { transform: scale(1.065); opacity: .85; }
.dataset-picker button.active { border-color: #78c3a7; box-shadow: 0 0 0 1px rgba(120,195,167,.2), 0 12px 28px rgba(0,10,16,.3); }
.dataset-picker button.active > img { opacity: .92; filter: saturate(1) contrast(1.06) brightness(.86); }
.dataset-code { position: absolute; left: 9px; top: 9px; z-index: 2; padding: 4px 6px; border: 1px solid rgba(144,210,191,.26); border-radius: 5px; color: #a9dacc; background: rgba(3,17,25,.62); backdrop-filter: blur(8px); font: 700 7px ui-monospace, monospace; letter-spacing: .12em; }
.dataset-picker button > span:nth-of-type(2) { position: absolute; left: 10px; right: 8px; bottom: 10px; z-index: 2; }
.dataset-picker button b, .dataset-picker button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dataset-picker button b { color: #f0f6f7; font-size: 13px; text-shadow: 0 2px 8px rgba(0,0,0,.48); }
.dataset-picker button small { margin-top: 3px; color: #89a6ae; font: 600 7px ui-monospace, monospace; letter-spacing: .04em; }
.dataset-picker button > i { position: absolute; right: 9px; top: 10px; z-index: 2; color: rgba(220,239,239,.48); font: 600 7px ui-monospace, monospace; font-style: normal; }
.dataset-picker button.active > i { color: #aee1cf; }
.dataset-label { display: flex; align-items: center; gap: 7px; margin: 10px 2px 12px; color: #7e959d; font-size: 8px; }
.dataset-label i { width: 6px; height: 6px; border-radius: 50%; background: #69b995; box-shadow: 0 0 0 4px rgba(105,185,149,.09); }
.library-pane { padding-top: 1px; }
.library-toolbar.single { grid-template-columns: 1fr; }
.library-grid { min-height: 136px; }
.library-thumb { height: 92px; }

@media (max-width: 640px) {
  .dataset-picker { gap: 6px; }
  .dataset-picker button { height: 112px; }
  .dataset-code { left: 7px; top: 7px; }
  .dataset-picker button > span:nth-of-type(2) { left: 8px; bottom: 8px; }
  .dataset-picker button b { font-size: 11px; }
  .dataset-picker button small { font-size: 6px; }
  .dataset-picker button > i { display: none; }
}