.generation-section{padding:90px 0;background:#fff}.generation-section .profile-heading>p{margin:12px auto 0;color:#6a7a71;font-size:12px}
.generation-chart{margin-top:38px;overflow:hidden;border:1px solid #dbe6d9;border-radius:26px;background:#f8faf6;box-shadow:0 24px 60px rgba(25,70,40,.07)}
.generation-chart-head{display:flex;align-items:center;justify-content:space-between;padding:17px 23px;border-bottom:1px solid #e0e9de;background:#fff}.generation-legend{display:flex;flex-wrap:wrap;gap:15px}.generation-legend span{display:flex;align-items:center;gap:6px;color:#63746a;font-size:12px;font-weight:700}.generation-legend i{width:8px;height:8px;border-radius:50%}.generation-legend .gen-z{background:#68c33e}.generation-legend .gen-young{background:#2c9370}.generation-legend .gen-mid{background:#e3a83f}.generation-legend .gen-senior{background:#a96cc1}.generation-status{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#edf7e8;color:#4f9630;font-size:12px;font-weight:800}.generation-status>i{width:6px;height:6px;border-radius:50%;background:#71c345;box-shadow:0 0 0 4px rgba(113,195,69,.13)}
.generation-plot{display:grid;grid-template-columns:65px 1fr;grid-template-rows:260px 56px;padding:26px 24px 4px}.generation-y-axis{display:flex;flex-direction:column;justify-content:space-between;padding:3px 11px 8px 0;color:#89958e;font-size:12px;text-align:right}.generation-grid{position:relative;display:grid;grid-template-rows:repeat(4,1fr);gap:7px;background:repeating-linear-gradient(180deg,transparent 0 64px,#e4ebe2 64px 65px)}
.generation-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.generation-row button{position:relative;overflow:hidden;padding:0;border:0;border-radius:8px;background:#edf1ec;cursor:pointer}.generation-row button i{position:absolute;left:0;right:0;bottom:0;height:var(--energy);background:currentColor;opacity:.18;transition:height .6s cubic-bezier(.2,.8,.2,1),opacity .25s ease}.generation-row button span{position:relative;z-index:2;color:#405148;font-size:12px;font-weight:800;opacity:0;transition:opacity .2s}.generation-row button:hover span,.generation-row button.active span{opacity:1}.generation-row button:hover i,.generation-row button.active i{opacity:.42}.generation-row.gen-z{color:#68c33e}.generation-row.gen-young{color:#2c9370}.generation-row.gen-mid{color:#e3a83f}.generation-row.gen-senior{color:#a96cc1}
.generation-cursor{position:absolute;z-index:1;top:-8px;bottom:-8px;left:calc((var(--phase) * 20%) + 10%);width:calc(20% - 4px);border:1px solid rgba(84,164,47,.25);border-radius:12px;background:rgba(113,197,68,.045);transform:translateX(-50%);transition:left .45s cubic-bezier(.2,.8,.2,1)}.generation-cursor>i{position:absolute;width:8px;height:8px;left:50%;top:-5px;border-radius:50%;background:#6fbd45;box-shadow:0 0 0 5px rgba(111,189,69,.13);transform:translateX(-50%)}
.generation-x-axis{grid-column:2;display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.generation-x-axis button{padding:10px 4px;border:0;background:none;color:#75837b;font-family:Manrope;cursor:pointer}.generation-x-axis b,.generation-x-axis span{display:block}.generation-x-axis b{font-size:12px}.generation-x-axis span{margin-top:3px;font-size:12px}.generation-x-axis button.active{color:#4d972f}.generation-x-axis button.active b{font-size:12px}
.generation-detail{display:grid;grid-template-columns:1.2fr 1fr 1.6fr .8fr;gap:22px;align-items:center;padding:21px 25px;border-top:1px solid #dde7db;background:#fff}.generation-now span,.generation-now strong{display:block}.generation-now span{color:#5da338;font-size:12px;font-weight:800}.generation-now strong{margin-top:4px;font-size:12px}.generation-songs{display:flex;flex-wrap:wrap;gap:5px}.generation-songs span{padding:5px 7px;border-radius:999px;background:#eef6ea;color:#58724f;font-size:12px;font-weight:700}.generation-detail>p{margin:0;color:#718078;font-size:12px;line-height:1.6}.generation-best{padding-left:17px;border-left:1px solid #e1e8df}.generation-best span,.generation-best strong{display:block}.generation-best span{color:#8a968e;font-size:12px}.generation-best strong{margin-top:4px;color:#4d952f;font-size:12px}
.generation-principle{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;color:#77857d;font-size:12px}.generation-principle strong{color:#213d30}
@media(max-width:800px){.generation-detail{grid-template-columns:1fr 1fr}.generation-detail>p{grid-column:1/-1}.generation-plot{grid-template-columns:48px 1fr;padding-inline:14px}.generation-chart-head{align-items:flex-start;gap:12px}.generation-status{white-space:nowrap}}
@media(max-width:560px){.generation-section{padding:65px 0}.generation-chart-head{display:block}.generation-status{display:inline-flex;margin-top:12px}.generation-plot{grid-template-columns:1fr;grid-template-rows:240px 58px;padding:18px 10px 3px}.generation-y-axis{display:none}.generation-x-axis{grid-column:1}.generation-x-axis span{font-size:12px}.generation-detail{grid-template-columns:1fr;gap:13px;padding:18px}.generation-detail>p{grid-column:auto}.generation-best{padding:0;border:0}.generation-principle{display:block;text-align:center;line-height:1.6}.generation-principle strong{display:block}}
@media(prefers-reduced-motion:reduce){.generation-row button i,.generation-cursor{transition:none}}

/* Explicit series colours override global button styles. */
.generation-row.gen-z button{color:#61bd35;background:#eef8e9}
.generation-row.gen-young button{color:#188c70;background:#e7f5f1}
.generation-row.gen-mid button{color:#e6a128;background:#fff5df}
.generation-row.gen-senior button{color:#a85ac4;background:#f6eafa}
.generation-row button i{opacity:.58}
.generation-row button:hover i,.generation-row button.active i{opacity:.92}
.generation-row button span{color:#173327;text-shadow:0 1px rgba(255,255,255,.7)}
.generation-row.gen-z button.active{box-shadow:inset 0 0 0 2px #61bd35}
.generation-row.gen-young button.active{box-shadow:inset 0 0 0 2px #188c70}
.generation-row.gen-mid button.active{box-shadow:inset 0 0 0 2px #e6a128}
.generation-row.gen-senior button.active{box-shadow:inset 0 0 0 2px #a85ac4}