:root { color-scheme: light; font-family: Arial, 'Malgun Gothic', sans-serif; color: #172033; background: #f5f7fb; }
body { margin: 0; }
.app { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 48px; }
.hero { padding: 34px 0 24px; border-bottom: 1px solid #d5ddeb; }
.kicker { margin: 0 0 10px; font-weight: 800; color: #16705e; }
h1 { margin: 0; max-width: 980px; font-size: clamp(32px, 5vw, 58px); line-height: 1.05; letter-spacing: 0; }
h2 { margin: 0 0 14px; font-size: 22px; }
h3 { margin: 22px 0 10px; font-size: 16px; }
.lead { max-width: 860px; font-size: 17px; line-height: 1.7; }
button { border: 0; border-radius: 7px; background: #176b5d; color: white; padding: 11px 14px; font-weight: 800; cursor: pointer; }
button.secondary { background: #31415e; }
.hero-actions, .test-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.mapping, .compression, .chat-shell { margin-top: 26px; }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.map-card, .code-panel, .chat-panel, .trace { background: white; border: 1px solid #d8e0ec; border-radius: 8px; padding: 16px; }
.map-card strong { display: block; margin-bottom: 8px; color: #244262; }
.compression { display: grid; grid-template-columns: minmax(260px, 0.65fr) 1.35fr; gap: 16px; align-items: start; }
.group-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.group-cell { min-height: 26px; display: grid; place-items: center; border-radius: 5px; background: #e7edf7; font-size: 12px; font-weight: 700; }
.group-cell.active { background: #176b5d; color: white; }
.chat-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 14px; align-items: stretch; }
input { min-width: 0; box-sizing: border-box; width: 100%; border: 1px solid #b9c5d6; border-radius: 7px; padding: 12px; font-size: 15px; }
.status { padding: 10px; border-radius: 7px; background: #edf8f5; }
.status.blocked { background: #fff1f1; color: #9b1c1c; }
.chat-log { min-height: 420px; display: grid; gap: 12px; align-content: start; }
.bubble { border-radius: 8px; padding: 12px; line-height: 1.55; background: #eef2f7; }
.bubble.user { justify-self: end; background: #dbeafe; max-width: 78%; }
.bubble.bot { justify-self: start; max-width: 86%; }
.meta { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.meta span { background: white; border: 1px solid #d7dfea; border-radius: 6px; padding: 6px; }
.composer { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
pre { white-space: pre-wrap; word-break: break-word; background: #111827; color: #d1fae5; border-radius: 8px; padding: 12px; min-height: 420px; font-size: 12px; }
@media (max-width: 980px) { .map-grid, .compression, .chat-shell { grid-template-columns: 1fr; } .group-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }