.rhythm-section { padding-block: 88px 32px; }
.rhythm-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:end; margin-bottom:56px; }
.rhythm-intro > p { max-width:470px; font-size:19px; color:var(--muted); }
.rhythm-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.rhythm-benefits { display:grid; gap:34px; }
.rhythm-benefit { display:flex; align-items:flex-start; gap:18px; }
.rhythm-benefit-icon { display:grid; place-items:center; flex:0 0 48px; height:48px; border-radius:16px; background:#e6ede8; color:var(--petrol); }
.rhythm-benefit:first-child .rhythm-benefit-icon { color:#a7430e; background:#ffeadc; }
.rhythm-benefit h3 { font-size:23px; margin:8px 0 10px; }
.rhythm-benefit p { color:var(--muted); font-size:16px; }
.rhythm-source { display:inline-flex; align-items:center; gap:8px; margin-top:8px; min-height:44px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.rhythm-source .icon { width:15px; height:15px; }
.rhythm-explorer { min-width:0; border:1px solid #d4dfd9; background:var(--white); border-radius:32px; box-shadow:0 20px 60px -40px #23535c70; overflow:hidden; }
.rhythm-tabs { display:flex; padding:8px; margin:12px; gap:6px; border-radius:20px; background:#eff2ee; }
.rhythm-tabs button { display:flex; flex:1; justify-content:center; align-items:center; gap:10px; min-height:48px; border:0; border-radius:14px; background:transparent; font-size:14px; font-weight:650; transition:background .2s,color .2s; }
.rhythm-tabs button[aria-selected="true"] { background:var(--petrol); color:white; box-shadow:0 4px 10px #23535c18; }
.rhythm-tabs .icon { width:19px; height:19px; }
.rhythm-panel { padding:24px 30px; animation:rhythm-panel-in .35s var(--ease) both; }
.rhythm-panel h3 { font-size:26px; line-height:1.15; }
.rhythm-panel-heading { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.rhythm-panel-heading > span { font-size:11px; border:1px solid #d4dfd9; border-radius:30px; padding:6px 10px; color:var(--muted); }
.rhythm-panel-intro { color:var(--muted); font-size:14px; margin-top:12px; }
.rhythm-reading { display:flex; align-items:center; gap:12px; margin-top:28px; }
.rhythm-heart { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fff0e5; color:#a7430e; }
.rhythm-reading > p { display:flex; align-items:baseline; gap:8px; line-height:1; }
.rhythm-reading strong { font-size:52px; letter-spacing:-.065em; font-weight:650; font-variant-numeric:tabular-nums; }
.rhythm-reading p > span { font-size:14px; color:var(--muted); }
#rhythm-time { margin-left:auto; font-size:12px; color:var(--muted); }
.rhythm-chart { display:block; width:100%; overflow:visible; margin-top:14px; }
.rhythm-axis { fill:#526661; font:13px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
.rhythm-gridline { stroke:#e6e9e5; stroke-dasharray:3 5; }
.rhythm-line { stroke:#c9510e; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.rhythm-entered .rhythm-line { animation:rhythm-draw 1.2s var(--ease) both; }
#rhythm-guide { stroke:#a7430e; stroke-width:1; stroke-dasharray:3 5; }
#rhythm-halo { fill:#ed681b25; }
#rhythm-dot { fill:#c9510e; stroke:white; stroke-width:3; }
.rhythm-controls { margin:16px 0 8px; }
.rhythm-controls label { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.rhythm-controls label .icon { width:17px; height:17px; }
#rhythm-range { display:block; width:100%; height:44px; margin:0; cursor:ew-resize; appearance:none; background:transparent; accent-color:var(--petrol); }
#rhythm-range:focus-visible { outline:3px solid #bd4609; outline-offset:3px; border-radius:8px; }
#rhythm-range::-webkit-slider-runnable-track { height:5px; border-radius:5px; background:linear-gradient(to right,var(--petrol) var(--range-progress,33.33%),#dfe8e2 var(--range-progress,33.33%)); }
#rhythm-range::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border:4px solid white; border-radius:50%; background:var(--petrol); box-shadow:0 0 0 1px #c4d6ce,0 3px 8px #23535c25; margin-top:-9px; }
#rhythm-range::-moz-range-track { height:5px; border-radius:5px; background:#dfe8e2; }
#rhythm-range::-moz-range-progress { height:5px; background:var(--petrol); }
#rhythm-range::-moz-range-thumb { width:18px; height:18px; border:3px solid white; border-radius:50%; background:var(--petrol); }
.rhythm-moment { display:flex; gap:12px; padding:16px; background:#f1f5f0; border-radius:16px; min-height:100px; }
.moment-dot { width:8px; height:8px; flex:0 0 8px; margin-top:7px; border-radius:50%; background:var(--petrol); }
.rhythm-moment h4 { font-size:14px; margin:0 0 4px; }
.rhythm-moment p { color:var(--muted); font-size:13px; line-height:1.5; }
.rhythm-data-note { display:flex; gap:8px; align-items:flex-start; color:var(--muted); font-size:11px; line-height:1.5; margin-top:18px; }
.rhythm-data-note .icon { width:16px; height:16px; margin-top:1px; }
.rhythm-table { margin-top:12px; border-top:1px solid #e3e9e3; }
.rhythm-table summary { cursor:pointer; display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:44px; font-size:12px; }
.rhythm-table summary::marker { content:""; }
.rhythm-table summary::-webkit-details-marker { display:none; }
.rhythm-table summary .icon { width:16px; height:16px; }
.rhythm-table[open] summary .icon { transform:rotate(45deg); }
.rhythm-table table { width:100%; font-size:12px; border-collapse:collapse; text-align:left; }
.rhythm-table caption { text-align:left; margin:8px 0 12px; }
.rhythm-table th,.rhythm-table td { padding:9px 6px; border-bottom:1px solid #e3e9e3; }
.rhythm-social { min-height:620px; }
.rhythm-faces { display:flex; margin:6px 0 26px; padding-left:8px; }
.rhythm-faces img,.rhythm-faces > span { border:3px solid white; width:52px; height:52px; border-radius:50%; margin-left:-8px; }
.rhythm-faces > span { display:grid; place-items:center; background:#e4ece5; }
.rhythm-social > h3 { font-size:34px; max-width:370px; letter-spacing:-.055em; }
.rhythm-social > p:not(.rhythm-data-note) { margin-top:14px; font-size:15px; color:var(--muted); }
.rhythm-memory { margin:24px 0; padding:24px; border-radius:4px 22px 22px; background:#fff0e4; }
.rhythm-memory h4 { display:flex; align-items:center; gap:8px; margin:0 0 16px; font-size:13px; }
.rhythm-memory h4 .icon { width:20px; height:20px; }
.rhythm-memory p { font-size:22px; line-height:1.45; letter-spacing:-.025em; }
.rhythm-memory small { display:block; margin-top:14px; color:#754b34; font-size:11px; line-height:1.5; }
.rhythm-shared { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:0; }
.rhythm-shared li { display:flex; align-items:center; gap:6px; font-size:11px; border:1px solid #d9e1da; border-radius:30px; padding:8px 10px; }
.rhythm-shared .icon { width:14px; height:14px; }
.rhythm-social > .text-link { margin-top:20px; font-size:14px; }
.rhythm-watch { display:flex; align-items:center; gap:24px; margin-top:36px; padding:20px 28px; border-block:1px solid var(--line); }
.rhythm-watch > img { flex:0 0 90px; width:90px; height:90px; object-fit:contain; }
.rhythm-watch h3 { font-size:20px; margin-bottom:8px; }
.rhythm-watch p { font-size:14px; color:var(--muted); max-width:630px; }
.rhythm-watch .text-link { font-size:13px; margin-left:auto; flex-shrink:0; }
@keyframes rhythm-panel-in { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rhythm-draw { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@media (hover:hover) and (pointer:fine) { .rhythm-tabs button:not([aria-selected="true"]):hover { background:#e0e8df; } .rhythm-source:hover { color:#a7430e; } }
@media (max-width:1100px) { .rhythm-layout { gap:32px; grid-template-columns:.8fr 1.2fr; } .rhythm-intro { gap:32px; } .rhythm-panel { padding:22px; } .rhythm-watch { flex-wrap:wrap; } .rhythm-watch > div { flex:1; } .rhythm-watch .text-link { margin-left:114px; } }
@media (max-width:780px) {
  .rhythm-section { padding-top:64px; }
  .rhythm-intro { display:block; margin-bottom:32px; }
  .rhythm-intro > p { font-size:17px; margin-top:22px; }
  .rhythm-layout { grid-template-columns:1fr; gap:36px; }
  .rhythm-benefits { gap:20px; }
  .rhythm-benefit { gap:14px; }
  .rhythm-benefit h3 { font-size:20px; }
  .rhythm-benefit p { font-size:14px; }
  .rhythm-explorer { border-radius:24px; }
  .rhythm-panel { padding:20px; }
  .rhythm-panel h3 { font-size:24px; }
  .rhythm-panel-intro { font-size:13px; }
  .rhythm-tabs { margin:8px; padding:6px; }
  .rhythm-tabs button { gap:8px; font-size:13px; }
  .rhythm-reading strong { font-size:46px; }
  .rhythm-reading { gap:8px; }
  #rhythm-time { font-size:11px; }
  .rhythm-social { min-height:590px; }
  .rhythm-memory { padding:20px; }
  .rhythm-memory p { font-size:21px; }
  .rhythm-watch { padding:16px 0; gap:12px; }
  .rhythm-watch > img { flex-basis:72px; width:72px; height:72px; }
  .rhythm-watch .text-link { margin-left:84px; }
  .rhythm-watch p { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .rhythm-panel,.rhythm-entered .rhythm-line { animation:none; } .rhythm-tabs button { transition:none; } }