:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; color: #263d34; background: #f4f2ec; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.045em; line-height: 1.25; }
h2 { font-size: 20px; letter-spacing: -.025em; }
h3 { font-size: 16px; margin-bottom: 8px; }
a { color: inherit; text-underline-offset: 4px; }
button, input { font: inherit; }
button, .button { min-height: 44px; padding: 10px 17px; border: 1px solid #294d3d; border-radius: 9px; background: #294d3d; color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button:hover:not(:disabled), .button:hover { background: #1c392d; color: #fff; }
button:disabled { cursor: default; opacity: .55; }
.secondary { color: #294d3d; background: transparent; border-color: #bfc9be; }
:focus-visible { outline: 3px solid #a85c23; outline-offset: 4px; }
.wrap { max-width: 1120px; margin: auto; padding: 48px 28px; }
.panel { background: #fffefa; border: 1px solid #dce0d5; border-radius: 16px; padding: 26px; }
.gate { max-width: 460px; margin: max(24px, 10vh) auto; padding: 36px; }
.gate h1 { font-size: 28px; margin: 12px 0; }
.gate form { margin: 28px 0 16px; }
.gate input { display: block; width: 100%; padding: 12px; margin: 8px 0 16px; border: 1px solid #869586; border-radius: 8px; background: white; color: #263d34; }
.gate button { width: 100%; }
.gate a { display: inline-block; margin-top: 20px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #5c705f; margin-bottom: 8px; }
.muted { color: #616d61; }
.small { font-size: 13px; }
.header { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 28px; }
.header .muted { margin-top: 10px; }
nav, .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
#status { font-weight: 600; }
.check { display: flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: #294d3d; }
.error { color: #a12d20; font-size: 14px; margin: 12px 0; }
.error:empty { display: none; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.card { background: #fffefa; border: 1px solid #dce0d5; border-radius: 14px; padding: 24px; }
.card h2 { font-size: 15px; font-weight: 500; }
.metric { font-size: clamp(24px, 3vw, 38px); font-weight: 650; letter-spacing: -.04em; margin: 12px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.featured { background: #294d3d; color: #fffefa; border-color: #294d3d; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.insight { margin: 24px 0 12px; font-size: 15px; }
.chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.bar-column { text-align: center; font-size: 12px; min-width: 0; }
.bar-number { min-height: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bar-track { height: 120px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid #bec8ba; background: #f4f5ef; margin: 6px 0; border-radius: 5px 5px 0 0; }
.bar { width: 65%; background: #8b9b80; border-radius: 4px 4px 0 0; }
.bar-column:last-child .bar { background: #294d3d; }
.bar-column.unavailable .bar-track { background: repeating-linear-gradient(135deg,#f1f0e9,#f1f0e9 6px,#e4e5dd 6px,#e4e5dd 7px); }
summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-size: 14px; font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
caption { text-align: left; padding: 8px 0; }
th, td { text-align: left; padding: 12px 6px; border-bottom: 1px solid #e0e3d9; }
th { font-weight: 600; }
.guide { margin-top: 24px; }
.behavior { margin-bottom: 24px; }
.behavior-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 12px; }
.behavior-controls input { padding: 10px; min-height: 44px; min-width: 0; max-width: 100%; border: 1px solid #869586; border-radius: 8px; background: white; color: #263d34; }
.behavior-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.behavior-card { min-width: 0; padding: 18px; border: 1px solid #dce0d5; border-radius: 12px; }
.behavior-card th, .behavior-card td { padding: 10px 4px; }
.behavior-card td:first-child { width: 52%; }
.behavior-card td:not(:first-child) { font-variant-numeric: tabular-nums; }
@media(max-width: 700px) { .behavior-grid { grid-template-columns: 1fr; } .behavior-card { padding: 14px; } }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 22px 0; }
.guide p { color: #616d61; font-size: 14px; }
.guide details { border-top: 1px solid #dce0d5; }
.guide details p + p { margin-top: 10px; }
footer { text-align: center; margin-top: 28px; }
@media(max-width: 800px) { .header { align-items: start; flex-direction: column; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar { align-items: start; flex-direction: column; } }
@media(max-width: 480px) { .wrap { padding: 24px 16px; } .panel { padding: 20px; } .card { padding: 18px 14px; } .section-head { align-items: start; flex-direction: column; } .guide-grid { grid-template-columns: 1fr; gap: 22px; } .chart { gap: 5px; } .bar-number { font-size: 11px; } .gate { padding: 26px; } nav { gap: 8px; } }