@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  color-scheme: dark;
  --ink: #f3f4f1;
  --muted: #888d93;
  --dim: #555b62;
  --canvas: #020304;
  --panel: #070809;
  --panel-soft: #0c0e10;
  --line: rgba(255, 255, 255, 0.115);
  --green: #b8f968;
  --green-deep: #334a22;
  --amber: #ffc86b;
  --red: #ff7569;
  --red-deep: #6e322f;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 52% 35%, rgba(184, 249, 104, 0.045), transparent 34rem),
    linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px),
    var(--canvas);
  background-size: auto, 48px 48px, 48px 48px, auto;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

button { font: inherit; }

.app-shell { width: min(1460px, calc(100% - 56px)); margin: 0 auto; padding: 25px 0 36px; }

.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }

.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -1px; text-decoration: none; }
.brand > span:last-child span { color: var(--green); }
.brand-mark { display: inline-flex; gap: 2px; align-items: center; width: 20px; height: 20px; transform: rotate(-30deg); }
.brand-mark i { display: block; width: 4px; border-radius: 10px; background: var(--green); }
.brand-mark i:nth-child(1) { height: 8px; opacity: .7; }
.brand-mark i:nth-child(2) { height: 17px; }
.brand-mark i:nth-child(3) { height: 11px; opacity: .85; }

.session-status { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font: 500 10px/1 'DM Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
.status-dot, .record-dot { width: 7px; height: 7px; border-radius: 50%; background: #737881; }
.session-status.is-live .status-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(168, 236, 104, .12); }
.session-status.is-alert .status-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(255, 117, 105, .12); }

.intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 60px 0 34px; }
.eyebrow { margin: 0 0 12px; color: var(--green); font: 500 10px/1 'DM Mono', monospace; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 690px; margin-bottom: 0; font-size: clamp(42px, 5vw, 72px); line-height: .95; letter-spacing: -4.5px; font-weight: 700; }
h1 em { color: #c7c9c3; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -3.6px; }
.intro-copy { max-width: 340px; margin-bottom: 3px; color: var(--muted); font-size: 12px; line-height: 1.8; }

.monitor-layout { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(430px, 1fr); gap: 16px; align-items: stretch; }
.camera-column { min-width: 0; }
.camera-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #060708; box-shadow: 0 25px 75px rgba(0, 0, 0, .42); transition: border-color .4s ease, box-shadow .4s ease; }
.camera-card.active { border-color: rgba(184, 249, 104, .82); box-shadow: 0 0 0 1px rgba(184, 249, 104, .14), 0 0 52px rgba(132, 231, 75, .1), 0 25px 75px rgba(0, 0, 0, .5); }
.camera-card.caution { border-color: rgba(255, 200, 107, .82); box-shadow: 0 0 0 1px rgba(255, 200, 107, .15), 0 0 42px rgba(255, 200, 107, .1), 0 25px 75px rgba(0, 0, 0, .5); }
.camera-card.alert { border-color: rgba(255, 117, 105, .95); box-shadow: 0 0 0 1px rgba(255, 117, 105, .22), 0 0 52px rgba(255, 95, 83, .17), 0 25px 75px rgba(0, 0, 0, .5); }

.card-topline { display: flex; justify-content: space-between; padding: 17px 20px 14px; color: #aeb3ba; font: 500 10px/1 'DM Mono', monospace; letter-spacing: .12em; }
.camera-label { display: flex; align-items: center; gap: 8px; }
.record-dot { width: 6px; height: 6px; }
.active .record-dot { background: var(--green); box-shadow: 0 0 12px var(--green); animation: blink 1.6s ease-in-out infinite; }
.alert .record-dot { background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink .9s ease-in-out infinite; }
.frame-rate { color: var(--dim); font-size: 9px; }

.camera-stage { position: relative; min-height: 390px; aspect-ratio: 16 / 9.55; overflow: hidden; background: #020304; }
video { position: absolute; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .45s ease; }
.camera-card.has-video video { opacity: 1; }

.camera-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(19, 24, 20, .3), rgba(2, 3, 4, .98) 70%); transition: opacity .35s ease, visibility .35s ease; }
.camera-card.has-video .camera-overlay { opacity: 0; visibility: hidden; }
.overlay-content { max-width: 280px; padding: 20px; text-align: center; color: var(--muted); }
.camera-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 15px; place-items: center; color: var(--green); }
.camera-icon svg { width: 42px; }
.overlay-content p { margin-bottom: 7px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.overlay-content span:last-child { font-size: 12px; line-height: 1.65; }

.camera-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 15px 20px; }
.camera-message { color: var(--muted); font-size: 11px; line-height: 1.45; }
.primary-button { display: inline-flex; flex: 0 0 auto; gap: 9px; align-items: center; justify-content: center; min-width: 170px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #0d1209; background: var(--green); box-shadow: 0 10px 26px rgba(132, 231, 75, .16); cursor: pointer; font-size: 12px; font-weight: 800; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.primary-button:hover { background: #ccff8f; box-shadow: 0 13px 30px rgba(132, 231, 75, .24); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { cursor: wait; opacity: .72; transform: none; }
.primary-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.primary-button.stop { color: #fff5f2; background: #b34942; box-shadow: none; }
.primary-button.stop:hover { background: #d8584f; }
.button-icon { font-size: 17px; line-height: 10px; transform: rotate(45deg); }
.privacy-note { display: flex; gap: 7px; align-items: center; margin: 13px 4px 0; color: #787e85; font-size: 10px; line-height: 1.5; }
.privacy-note span { color: var(--green); font-size: 9px; }

.insight-panel { display: flex; flex-direction: column; padding: 33px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(5, 6, 7, .94); box-shadow: 0 25px 75px rgba(0, 0, 0, .35); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-heading .eyebrow { margin-bottom: 9px; }
h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -1.7px; }
.pulse-ring { display: block; width: 11px; height: 11px; margin: 8px 3px 0 0; border: 2px solid #5f646b; border-radius: 50%; }
.session-status.is-live ~ * .pulse-ring, .pulse-ring.live { border-color: var(--green); box-shadow: 0 0 0 5px rgba(168, 236, 104, .1); animation: pulse 1.8s ease-out infinite; }

.activity-card { display: flex; gap: 19px; align-items: flex-start; min-height: 151px; margin: 27px 0 18px; padding: 25px; border: 1px solid rgba(184, 249, 104, .22); border-radius: 16px; background: linear-gradient(135deg, rgba(184, 249, 104, .09), rgba(184, 249, 104, 0) 75%); }
.activity-icon { display: grid; flex: 0 0 auto; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(184, 249, 104, .34); border-radius: 13px; color: var(--green); background: rgba(184, 249, 104, .07); font-size: 30px; line-height: 1; }
.activity-kicker, .reading-label { margin: 0 0 5px; color: var(--dim); font: 500 9px/1 'DM Mono', monospace; letter-spacing: .1em; }
.activity-title { margin: 0 0 6px; color: #f3f4ee; font-size: 21px; font-weight: 700; letter-spacing: -.8px; }
.activity-description { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.attention-card { padding: 17px 15px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #030405; transition: border-color .3s ease, background .3s ease; }
.attention-card.alert { border-color: rgba(255, 117, 105, .5); background: linear-gradient(135deg, rgba(255, 117, 105, .12), rgba(13, 16, 22, 1) 70%); }
.attention-card.caution { border-color: rgba(255, 200, 107, .4); background: linear-gradient(135deg, rgba(255, 200, 107, .08), rgba(13, 16, 22, 1) 70%); }
.attention-header { display: flex; justify-content: space-between; align-items: center; color: #9ca1a7; font: 500 9px/1 'DM Mono', monospace; letter-spacing: .1em; }
.state-chip { padding: 5px 7px 4px; border: 1px solid currentColor; border-radius: 4px; color: #858a91; font-size: 8px; }
.state-chip.active { color: var(--green); background: rgba(168, 236, 104, .08); }
.state-chip.caution { color: var(--amber); background: rgba(255, 200, 107, .08); }
.state-chip.alert { color: var(--red); background: rgba(255, 117, 105, .08); }
.attention-title { margin: 14px 0 5px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.5px; }
.attention-card.alert .attention-title { color: #ff9a91; }
.attention-copy { min-height: 32px; margin-bottom: 17px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.timer-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #9398a0; font: 500 9px/1 'DM Mono', monospace; letter-spacing: .03em; }
.timer-label span:last-child { color: #d6d9d3; }
.timer-track { height: 5px; overflow: hidden; border-radius: 10px; background: #262b33; }
.timer-progress { width: 0%; height: 100%; border-radius: inherit; background: var(--green); transition: width .1s linear, background .2s ease; }
.caution .timer-progress { background: var(--amber); }
.alert .timer-progress { background: var(--red); }
.timer-note { margin: 9px 0 0; color: #757a80; font-size: 9px; line-height: 1.4; }

.reading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(255, 255, 255, .09); }
.reading { min-height: 59px; padding: 13px; background: #08090a; }
.reading strong { display: block; color: #e0e2dd; font-size: 12px; font-weight: 700; letter-spacing: -.2px; }
.wide-reading { grid-column: span 2; min-height: 51px; }
.wide-reading strong { color: var(--muted); font-size: 10px; font-weight: 500; }
.wide-expression { grid-column: span 2; min-height: 66px; background: linear-gradient(90deg, rgba(184, 249, 104, .055), #08090a 62%); }
.wide-expression strong { color: #e6e8e2; font-size: 14px; }
.wide-presence { grid-column: span 2; min-height: 59px; }

.motion-scope { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: auto; padding-top: 18px; color: #6f747a; font: 500 9px/1.4 'DM Mono', monospace; letter-spacing: .03em; }
.scope-label { width: 100%; margin-bottom: 2px; color: var(--dim); letter-spacing: .12em; }
.motion-scope i { width: 3px; height: 3px; border-radius: 50%; background: var(--green); opacity: .7; }

.guide-strip { display: flex; gap: 30px; justify-content: flex-end; margin-top: 25px; color: #70757b; font-size: 10px; }
.guide-strip p { margin: 0; }
.guide-strip span { margin-right: 7px; color: var(--green); font: 500 9px 'DM Mono', monospace; }

.technology-section { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.55fr); gap: 55px; align-items: start; margin-top: 84px; padding: 50px 0 2px; border-top: 1px solid var(--line); }
.technology-intro h2 { margin-bottom: 18px; font-size: clamp(28px, 3vw, 42px); line-height: 1.03; letter-spacing: -2px; }
.technology-intro h2 em { color: #c7c9c3; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -1.6px; }
.technology-intro > p:last-child { max-width: 350px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.technology-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.technology-card { min-height: 218px; padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: rgba(7, 8, 9, .68); }
.technology-card:hover { border-color: rgba(184, 249, 104, .28); }
.technology-number { display: block; margin-bottom: 40px; color: var(--green); font: 500 10px/1 'DM Mono', monospace; letter-spacing: .1em; }
.technology-card h3 { margin: 0 0 9px; color: var(--ink); font-size: 15px; letter-spacing: -.5px; }
.technology-card p { margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.impact-card { background: linear-gradient(145deg, rgba(184, 249, 104, .08), rgba(7, 8, 9, .68) 72%); }

@keyframes scan { from { transform: translateY(0); } to { transform: translateY(calc(100% + 370px)); } }
@keyframes blink { 50% { opacity: .38; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(168, 236, 104, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 236, 104, 0); } }

@media (max-width: 900px) {
  .intro { padding: 55px 0 38px; }
  .monitor-layout { grid-template-columns: 1fr; }
  .insight-panel { min-height: 0; }
  .guide-strip { justify-content: flex-start; flex-wrap: wrap; }
  .technology-section { grid-template-columns: 1fr; gap: 30px; margin-top: 60px; }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .monitor-layout { grid-template-columns: minmax(0, 1.25fr) minmax(365px, .9fr); }
  .insight-panel { padding: 25px; }
  .activity-card { padding: 19px; }
}

@media (max-width: 580px) {
  .app-shell { width: min(100% - 28px, 1440px); padding-top: 18px; }
  .intro { display: block; padding: 48px 0 30px; }
  h1 { font-size: 43px; letter-spacing: -2.8px; }
  h1 em { letter-spacing: -2.3px; }
  .intro-copy { margin-top: 22px; }
  .camera-stage { min-height: 290px; }
  .camera-footer { align-items: stretch; flex-direction: column; }
  .primary-button { width: 100%; }
  .insight-panel { padding: 20px; }
  .guide-strip { display: grid; gap: 12px; margin-top: 26px; }
  .technology-section { margin-top: 48px; padding-top: 34px; }
  .technology-grid { grid-template-columns: 1fr; }
  .technology-card { min-height: 0; }
  .technology-number { margin-bottom: 25px; }
}