:root { --ink:#10261a; --deep:#183c27; --leaf:#75ae55; --lime:#b9e68d; --mist:#edf8e4; --coral:#e75454; --white:#fff; --line:rgba(16,38,26,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:linear-gradient(145deg,#f8fff3 0%,var(--mist) 55%,#d5efbc 100%); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
a { color:inherit; }
.skip-link { position:absolute; left:-9999px; z-index:10; padding:.75rem 1rem; color:var(--white); background:var(--deep); }.skip-link:focus { left:1rem; top:1rem; }
.masthead { min-height:70px; padding:1rem max(5vw,1.25rem); color:var(--white); background:var(--deep); display:flex; justify-content:space-between; align-items:center; gap:1rem; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; font-size:1.35rem; font-weight:700; letter-spacing:.02em; }.brand b { color:var(--lime); }.brand-mark { display:grid; place-items:center; width:1.55rem; height:1.55rem; color:var(--coral); font-size:2.6rem; line-height:0; }.home-link { font-size:.9rem; color:var(--lime); }
.shell { width:min(960px,calc(100% - 2rem)); margin:0 auto; padding:4.5rem 0 5rem; }.intro { max-width:650px; margin-bottom:2.25rem; }.eyebrow { margin:0 0 .5rem; color:#4c852f; font-weight:700; letter-spacing:.11em; font-size:.78rem; }.intro h1 { margin:0; color:var(--deep); font-size:clamp(2.15rem,7vw,4.4rem); line-height:1; letter-spacing:-.055em; }.intro p:last-child { margin:1rem 0 0; font-size:clamp(1rem,2vw,1.25rem); }
.player-panel { padding:clamp(1.25rem,4vw,2.5rem); color:var(--white); background:var(--deep); border:1px solid rgba(255,255,255,.13); border-radius:1.25rem; box-shadow:0 20px 45px rgba(24,60,39,.24); }.now-playing p { margin:0; color:var(--lime); font-size:.74rem; font-weight:700; letter-spacing:.12em; }.now-playing h2 { min-height:1.3em; margin:.35rem 0 0; font-size:clamp(1.45rem,4vw,2.2rem); }.now-playing span { color:#d5edc5; }.now-playing a { color:inherit; font-weight:700; text-underline-offset:.15em; }
.progress-row { display:grid; grid-template-columns:3.3rem 1fr 3.3rem; gap:.6rem; align-items:center; margin:1.6rem 0 1.2rem; font-variant-numeric:tabular-nums; font-size:.85rem; } input[type=range] { width:100%; accent-color:var(--lime); }
.controls { display:flex; flex-wrap:wrap; gap:.65rem; }.controls button { min-height:2.7rem; padding:.55rem 1rem; color:var(--white); background:transparent; border:1px solid #91bd75; border-radius:.6rem; font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }.controls button:focus-visible,.controls button[aria-pressed=true],.controls button:active { color:var(--ink); background:var(--lime); outline:none; }.controls .primary { color:var(--ink); background:var(--lime); border-color:var(--lime); font-weight:700; }.status { min-height:1.5em; margin:.85rem 0 0; color:#d5edc5; font-size:.9rem; }
.playlist { margin-top:3rem; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--leaf); }.section-heading h2 { margin:0 0 .45rem; font-size:1.45rem; }.section-heading span { color:#4b7045; font-size:.9rem; } #track-list { margin:0; padding:0; list-style:none; }.playlist li { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.75rem; border-bottom:1px solid var(--line); }.track-main { min-width:0; padding:1rem 0; }.track-button { width:100%; padding:0; color:inherit; background:none; border:0; display:grid; grid-template-columns:3rem 1fr 1.5rem; gap:.5rem; align-items:center; text-align:left; font:inherit; cursor:pointer; }.track-number { color:#5e8753; font-size:.85rem; font-weight:700; }.track-copy { display:grid; gap:.12rem; }.track-author { display:block; margin:.12rem 1.5rem 0 3.5rem; color:#55714e; }.track-author a { color:#356e35; font-weight:700; text-underline-offset:.12em; }.track-action { color:var(--coral); }.track-links { display:flex; gap:.6rem; font-size:.86rem; }.track-links button { appearance:none; padding:.35rem .5rem; color:#356e35; background:none; border:0; font:inherit; font-weight:700; cursor:pointer; }.track-links button:hover,.track-links button:focus-visible { color:var(--ink); background:var(--lime); border-radius:.35rem; outline:none; }.playlist li.is-current { background:rgba(117,174,85,.16); }.playlist li.is-current .track-button strong { color:#1d632e; }.playlist li.is-current .track-action { color:#1d632e; }
footer { padding:2.5rem 1rem; color:#dcefd2; background:var(--ink); text-align:center; font-size:.84rem; } footer p { margin:.25rem; } footer a { color:var(--lime); }
@media (hover:hover) and (pointer:fine) { .controls button:hover { color:var(--ink); background:var(--lime); outline:none; } }
@media (max-width:560px) { .masthead { padding:.85rem 1rem; }.brand { font-size:1.05rem; }.shell { width:min(100% - 1.25rem,960px); padding-top:2.5rem; }.player-panel { border-radius:.9rem; }.playlist li { grid-template-columns:1fr; gap:0; }.track-main { padding-bottom:.45rem; }.track-links { padding:0 0 1rem 3.5rem; }.controls button { flex:1 1 7.5rem; }.controls button:nth-child(-n+4) { flex-basis:3rem; }.progress-row { grid-template-columns:2.8rem 1fr 2.8rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }