:root {
  --ink: #173a3b;
  --muted: #698184;
  --paper: #f5f6f0;
  --card: #ffffff;
  --line: #dce6df;
  --teal: #0d6b68;
  --teal-dark: #07504f;
  --mint: #dff1e8;
  --lime: #b8d955;
  --gold: #e8a94f;
  --coral: #db6e58;
  --shadow: 0 18px 48px rgba(25, 73, 71, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Manrope', 'Noto Sans SC', sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { max-width: 1440px; margin: 0 auto; padding: 0 34px 38px; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 90px; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px 13px 13px 4px; color: #fff; background: var(--teal); font-weight: 800; font-size: 20px; transform: rotate(-7deg); }
.brand-lockup h1 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.04em; }
.eyebrow { margin: 0; color: var(--teal); font: 500 10px/1.4 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.header-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 99px; background: #6abb63; box-shadow: 0 0 0 4px rgba(106, 187, 99, .14); }

.hero-panel { min-height: 330px; display: grid; grid-template-columns: 1fr .74fr; align-items: center; overflow: hidden; position: relative; padding: 58px 65px; margin-top: 28px; border-radius: 28px; color: #f4fff7; background: linear-gradient(120deg, #0b5e5e 0%, #0d6b68 54%, #2a8a76 100%); box-shadow: var(--shadow); }
.hero-panel:after { content: ''; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(90deg, transparent 0, #000 60%); }
.hero-copy { position: relative; z-index: 2; max-width: 610px; }
.hero-copy .eyebrow { color: #c2e8d1; }
.hero-copy h2 { margin: 12px 0 15px; color: #fff; font-size: clamp(34px, 4.4vw, 63px); line-height: 1.05; letter-spacing: -.065em; }
.hero-copy h2 em { color: var(--lime); font-style: normal; }
.hero-text { max-width: 540px; margin: 0; color: #d1ebe1; font-size: 14px; line-height: 1.85; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-chips span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; color: #edfff3; background: rgba(255,255,255,.1); font: 10px 'DM Mono', monospace; }
.hero-orbit { position: relative; z-index: 1; width: min(30vw, 340px); aspect-ratio: 1; justify-self: center; }
.orbit { position: absolute; inset: 11%; border: 1px solid rgba(218,255,218,.25); border-radius: 50%; transform: rotate(-25deg) scaleX(1.36); }
.orbit-b { inset: 22% -2%; transform: rotate(63deg) scaleX(1.2); border-color: rgba(184,217,85,.45); }
.hero-badge { position: absolute; inset: 25%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; background: rgba(3,66,64,.5); box-shadow: 0 10px 50px rgba(0,0,0,.15); transform: rotate(7deg); }
.hero-badge strong { color: var(--lime); font-size: 32px; letter-spacing: -.08em; }
.hero-badge span { color: #d4eee3; font: 10px/1.25 'DM Mono', monospace; }
.leaflet { position: absolute; color: var(--lime); font-size: 31px; }
.leaflet-one { top: 2%; left: 20%; transform: rotate(20deg); }
.leaflet-two { right: 12%; bottom: 12%; color: #e7a853; font-size: 38px; }

.carousel-section, .model-cards { padding-top: 49px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading h3 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.05em; }
.section-heading.compact { align-items: center; }
.carousel-controls { display: flex; gap: 8px; }
.auto-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 10px 'DM Mono', monospace; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(184, 217, 85, .18); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(184, 217, 85, 0); } }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--teal); background: #fff; transition: .2s ease; }
.icon-button:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.carousel-window { overflow: hidden; margin: 0 -2px; }
.carousel-track { display: flex; gap: 13px; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.carousel-item { flex: 0 0 calc((100% - 52px) / 5); min-width: 150px; aspect-ratio: 1.38; overflow: hidden; position: relative; border-radius: 17px; background: #d8e0dc; cursor: pointer; }
.carousel-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.carousel-item:hover img { transform: scale(1.06); }
.carousel-item:after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(3,46,46,.56)); }
.carousel-item span { position: absolute; z-index: 1; left: 12px; bottom: 10px; max-width: 90%; overflow: hidden; color: #fff; font: 9px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }

.workbench { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: 20px; padding-top: 46px; }
.panel { min-width: 0; padding: 27px; border: 1px solid var(--line); border-radius: 23px; background: var(--card); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.panel-heading h3 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.045em; }
.panel-index { color: #a5b7b4; font: 10px 'DM Mono', monospace; }
.model-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 17px; }
.model-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: #f9fbf8; text-align: left; transition: .2s ease; }
.model-tab:hover { border-color: #9bcab3; }
.model-tab.active { border-color: var(--teal); color: var(--teal-dark); background: var(--mint); box-shadow: inset 0 0 0 1px rgba(13,107,104,.07); }
.tab-icon { flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--teal); background: #fff; font-size: 19px; }
.model-tab strong, .model-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-tab strong { font-size: 12px; }
.model-tab small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.source-preview, .result-preview { display: grid; place-items: center; overflow: hidden; min-height: 300px; border-radius: 15px; background: #edf2ed; }
.source-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 10px; }
.source-preview:has(.empty-state) { display: grid; }
.source-preview .empty-state, .result-preview .empty-state { grid-column: 1 / -1; }
.sample-card { min-width: 0; overflow: hidden; position: relative; aspect-ratio: 1.12; border-radius: 10px; background: #dfe8e1; }
.sample-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sample-card span { position: absolute; right: 5px; bottom: 5px; left: 5px; overflow: hidden; padding: 4px 5px; border-radius: 5px; color: #fff; background: rgba(15, 54, 52, .66); font: 8px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.source-grid-single { grid-template-columns: 1fr; padding: 16px; }
.source-grid-single .sample-card { width: 100%; max-width: 550px; justify-self: center; aspect-ratio: auto; max-height: 430px; }
.source-grid-single .sample-card img { object-fit: contain; max-height: 430px; }
.source-preview img, .result-preview img { width: 100%; height: 100%; max-height: 480px; display: block; object-fit: contain; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 35px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); font-size: 13px; }
.empty-state span:last-child { font-size: 11px; }
.empty-icon { display: grid; place-items: center; width: 57px; height: 57px; border: 1px dashed #a9c7b9; border-radius: 50%; color: var(--teal); font-size: 28px; }
.result-empty { color: var(--gold); border-color: #e8c38e; }
.source-meta { display: flex; align-items: center; justify-content: space-between; min-height: 37px; color: var(--muted); font: 10px 'DM Mono', monospace; }
.source-meta span:first-child { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row { display: flex; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.button-primary { color: #fff; background: var(--teal); }
.button-primary:hover { background: var(--teal-dark); transform: translateY(-1px); }
.button-secondary { color: var(--teal); border-color: var(--line); background: #fff; }
.button-secondary:hover { border-color: var(--teal); background: #f2fbf5; }
.upload-button { cursor: pointer; }
.upload-button input { display: none; }
.drop-hint { margin-top: 13px; padding: 11px 12px; border: 1px dashed #c7d8d0; border-radius: 10px; color: #869b98; background: #fafcf9; font-size: 10px; text-align: center; transition: .2s; }
.drop-hint.drag-over { border-color: var(--teal); color: var(--teal); background: var(--mint); }
.result-preview { min-height: 345px; }
.result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 10px; }
.result-grid-single { grid-template-columns: 1fr; padding: 16px; }
.result-grid-board { display: block; overflow: visible; padding: 16px; }
.result-card { min-width: 0; overflow: hidden; border: 1px solid #dce8df; border-radius: 10px; background: #fff; }
.result-card-image { position: relative; aspect-ratio: 1.12; overflow: hidden; background: #e5eee7; }
.result-card-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.result-card-index { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; color: #fff; background: var(--teal); font: 10px 'DM Mono', monospace; }
.result-card-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: baseline; padding: 7px 8px 8px; }
.result-card-meta strong { color: var(--teal); font-size: 18px; letter-spacing: -.07em; }
.result-card-meta span { color: var(--muted); font-size: 9px; }
.result-card-meta small { grid-column: 1 / -1; overflow: hidden; margin-top: 3px; color: #91a19e; font: 8px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.result-grid-board .result-card-board { width: 100%; border: 0; background: transparent; }
.result-grid-board .result-card-image { display: block; overflow: visible; width: 100%; aspect-ratio: auto; background: transparent; }
.result-grid-board .result-card-image img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0 11px; }
.confidence-control { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.confidence-control input { width: 120px; accent-color: var(--teal); }
.confidence-control output { min-width: 37px; color: var(--teal); font: 11px 'DM Mono', monospace; }
.button-run { min-width: 137px; color: #fff; background: var(--coral); }
.button-run:hover:not(:disabled) { background: #bd5544; transform: translateY(-1px); }
.button-run:disabled { cursor: not-allowed; opacity: .42; }
.run-glyph { font-size: 17px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.metric-card { min-height: 91px; padding: 13px; border-radius: 13px; background: #f2f6f2; }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; margin: 4px 0 1px; color: var(--ink); font-size: 28px; letter-spacing: -.08em; }
.metric-target { background: #e4f4e9; }
.metric-target strong { color: var(--teal); }
.result-note { margin-top: 13px; color: #78908c; font-size: 10px; line-height: 1.6; }
.model-count { color: var(--muted); font: 10px 'DM Mono', monospace; }
.model-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.model-card { display: flex; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.model-card-icon { flex: none; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: var(--teal); background: var(--mint); font-size: 25px; }
.board-card .model-card-icon { color: #b16b26; background: #fff0dc; }
.model-card h4 { margin: 1px 0 6px; font-size: 14px; }
.model-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.model-path { display: inline-block; margin-top: 11px; color: var(--teal); font: 10px 'DM Mono', monospace; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); color: #91a4a0; font: 10px 'DM Mono', monospace; }
.toast { position: fixed; z-index: 10; right: 25px; bottom: 25px; max-width: 360px; padding: 13px 16px; border-radius: 11px; color: #fff; background: #244b4a; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #a94d40; }

@media (max-width: 1000px) {
  .page-shell { padding: 0 20px 28px; }
  .hero-panel { padding: 42px 36px; }
  .carousel-item { flex-basis: calc((100% - 39px) / 4); }
  .workbench { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { min-height: 72px; }
  .brand-lockup h1 { font-size: 15px; }
  .header-status { display: none; }
  .hero-panel { min-height: auto; grid-template-columns: 1fr; padding: 34px 25px 20px; }
  .hero-copy h2 { font-size: 39px; }
  .hero-orbit { width: 220px; margin-top: 20px; }
  .carousel-item { flex-basis: calc((100% - 13px) / 2); }
  .panel { padding: 19px; }
  .panel-heading { margin-bottom: 15px; }
  .model-switch, .model-card-grid { grid-template-columns: 1fr; }
  .source-preview { min-height: 235px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-preview { min-height: 260px; }
  .result-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .button-run { width: 100%; }
  .metrics-grid { gap: 6px; }
  .metric-card { padding: 10px; }
  .metric-card strong { font-size: 23px; }
  .site-footer { flex-direction: column; gap: 8px; }
}