:root {
	--bg: #f7f5f0;
	--card: #ffffff;
	--primary: #2e5a3a;
	--accent: #b88b3a;
	--muted: #6b6b6b;
	--text: #1e1e1e;
	--stripe: #f0f4ef;
	--border: #d0d0cd;
	--font-sans: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Merriweather", "Georgia", serif;
}

html,body{height:100%;}
body{
	margin:0;
	font-family:var(--font-sans);
	background:var(--bg);
	color:var(--text);
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	padding:24px 0;
}
.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px;
}

.site-header{
    margin-bottom:18px;
    text-align:center
}

.site-header h1{
    font-family:var(--font-heading);
    font-size:1.9rem;
    color:var(--primary);
    margin:6px 0
}

.site-footer{
    margin-top:40px;
    padding:16px 0;
    border-top:1px solid var(--border);
    text-align:center
}

.intro{
    margin:14px 0 20px 0
}

.intro p{
    max-width:1000px;
    margin:0 auto;
    color:var(--muted)
}

.intro p.note{
    color:var(--muted);
    font-size:0.95rem;
    text-align: center;
}

.intro-subheader{
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1.1rem;
    margin:0 0 10px 0;
    text-align:center
}

.intro-panel{
    max-width:1000px;
    margin:0 auto;
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,244,241,0.95));
    border:1px solid var(--border);
    padding:16px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(22,22,22,0.04);
}

.intro-panel p{
    color:var(--text);
    margin:0 0 8px 0;
}

.walkthrough-container{
    max-width:1100px;
    margin:0 auto;
    padding:16px 16px;
    align-self:center;
}

.walkthrough-subheader{
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1.1rem;
    margin:0 0 10px 0;
    text-align:center
}

.walkthrough-panel{
    max-width:1000px;
    margin:0 auto;
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,244,241,0.95));
    border:1px solid var(--border);
    padding:16px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(22,22,22,0.04);
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.walkthrough-item{
    flex:1;
    min-width:300px;
    background:var(--card);
    border:2px solid var(--accent);
    border-radius:8px;
    padding:16px;
    cursor:pointer;
    transition:all 0.3s ease;
}

.walkthrough-item:hover{
    background:var(--accent);
    box-shadow:0 4px 12px rgba(184, 139, 58, 0.3);
    transform:translateY(-2px);
}

.walkthrough-item h3{
    color:var(--accent);
    margin:0 0 8px 0;
    font-size:1rem;
}

.walkthrough-item:hover h3{
    color:var(--card);
}

.walkthrough-item p{
    color:var(--text);
    margin:0;
    font-size:0.95rem;
    line-height:1.5;
}

.walkthrough-item:hover p{
    color:var(--card);
}

.intro-container{
    max-width:1100px;
    margin:0 auto;
    padding:16px 16px;
    align-self:center;
}

.tg{
    border-collapse:collapse;
    border-spacing:0;
    margin:0px auto;
    width:60%;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden
}

.tg td,.tg th{
    border-color:var(--border);
    border-style:solid;
    border-width:1px;
    font-family:var(--font-sans);
    font-size:14px;
    overflow:hidden;
    padding:12px 8px;
    word-break:normal;
    color:var(--text)
}

.tg th{
    font-weight:700;
    background:linear-gradient(180deg, rgba(46,90,58,0.06), rgba(46,90,58,0.02));
    color:var(--primary);
    text-align:center
}

.tg .tg-fyfk{
    background:transparent;
    border-color:inherit;
    font-weight:bold;
    text-align:center;
    vertical-align:top
}

.tg .tg-nbj5{
    background:transparent;
    border-color:inherit;
    text-align:center;
    vertical-align:top
}

.tg tbody tr:nth-child(even) td{
    background:var(--stripe)
}

.note{
    color:var(--muted);
    font-size:0.9rem;
    margin-top:8px
}

.table-figure{
    margin-bottom:20px
}

.table-caption{
    display:block;
    font-size:0.95rem;
    color:var(--muted);
    margin-top:8px;
    text-align:center
}

.table-caption .muted{
    font-style:italic
}

.glossary{
    margin-top:26px;
    padding:18px 0
}

.glossary h2{
    font-family:var(--font-heading);
    color:var(--primary);
    margin:0 0 10px 0
}

.glossary dl{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px
}

.glossary dt{
    font-weight:700;
    color:var(--primary);
    margin-top:10px;
    cursor:pointer
}

.glossary dd{
    margin:6px 0 12px 0;
    color:var(--muted);
    opacity:0;
    max-height:0;
    overflow:hidden;
    transform:translateX(-20px);
    transition:opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease
}

.glossary dd.visible{
    opacity:1;
    max-height:500px;
    transform:translateX(0)
}

.info-message {
    background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,244,241,0.98));
    border:2px solid var(--accent);
    border-radius:8px;
    padding:20px;
    margin:20px auto;
    max-width:1000px;
    box-shadow:0 6px 18px rgba(22,22,22,0.1);
    animation:slideInUp 0.4s ease;
}

.info-message h3 {
    color:var(--primary);
    margin-top:0;
    font-family:var(--font-heading);
    font-size:1.3rem;
}

.info-message p {
    color:var(--text);
    margin:8px 0;
    line-height:1.6;
}

@keyframes slideInUp {
    from {
        opacity:0;
        transform:translateY(30px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.data-analysis h2{
    font-family:var(--font-heading);
    color:var(--primary);
    margin:0 0 10px 0
}

.data-grid{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:12px;
}
.data-figure{
    width:720px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px;
    box-shadow:0 6px 18px rgba(22,22,22,0.04);
}
.data-figure img{
    display:block;
    width:100%;
    height:auto;
    border-radius:4px;
}
.analysis-panel{
    margin-top:8px;
    color:var(--muted);
    font-size:0.95rem;
}

.column-highlight {
  background-color: rgba(255, 166, 0, 0.821) !important;
  transition: background-color 0.2s ease;
}

.row-highlight td {
    background:rgba(255, 229, 54, 0.5) !important;
    transition: background-color 0.2s ease;
}