.rhythm-page{background:#fff}.rhythm-container{width:min(calc(100% - 40px),1080px);margin-inline:auto}.rhythm-hero{padding:42px 0 58px;background:linear-gradient(180deg,#fffefa,#fff 62%)}
.rhythm-heading{text-align:center}.rhythm-back{display:inline-block;margin-bottom:18px;color:#667085;font-size:14px;text-decoration:none}.rhythm-back:hover{color:var(--gold)}.rhythm-heading>p:first-of-type{margin:0 0 9px;color:var(--gold);font-size:14px;font-weight:800;letter-spacing:.15em}.rhythm-heading h1{margin:0;color:var(--navy);font:600 clamp(38px,6vw,66px)/1 Georgia,'Times New Roman',serif;letter-spacing:.035em}.rhythm-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:17px auto 13px;color:var(--gold)}.rhythm-rule span{width:min(25vw,160px);height:1px;background:var(--gold)}.rhythm-rule b{font-size:10px}.rhythm-heading h2{margin:0;color:#a66e08;font:500 clamp(27px,4vw,42px)/1.15 Georgia,'Times New Roman',serif}.rhythm-intro{max-width:660px;margin:14px auto 28px;color:#506078;font-size:17px;line-height:1.6}
.rhythm-workspace{border:1px solid #e4d7bc;border-radius:20px;background:#fff;box-shadow:0 20px 48px rgba(21,35,65,.09);overflow:hidden}.rhythm-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 26px;background:var(--navy);color:#fff}.rhythm-toolbar>div:first-child{display:grid;gap:4px}.rhythm-label{color:#d8b65d;font-size:11px;font-weight:800;letter-spacing:.12em}.rhythm-toolbar strong{font:500 22px/1.15 Georgia,'Times New Roman',serif}.rhythm-toolbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.rhythm-button{min-height:42px;border:0;border-radius:9px;padding:10px 15px;font-size:12px;font-weight:800;letter-spacing:.025em;cursor:pointer}.rhythm-button:focus-visible{outline:3px solid #e2bd62;outline-offset:2px}.rhythm-primary{background:var(--gold);color:#172543}.rhythm-secondary{background:#fff;color:var(--navy)}.rhythm-quiet{border:1px solid #d8dfe9;background:transparent;color:inherit}.rhythm-button:disabled{cursor:not-allowed;opacity:.45}
.rhythm-count{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px 26px 8px}.rhythm-count span{display:grid;place-items:center;gap:3px;min-height:76px;border-radius:14px;background:#faf7ef;color:var(--navy);transition:transform .15s,background .15s,box-shadow .15s}.rhythm-count b{font:600 27px/1 Georgia,'Times New Roman',serif}.rhythm-count small{color:#9b6a0b;font-size:9px;font-weight:800;letter-spacing:.13em}.rhythm-count span.active{transform:translateY(-4px) scale(1.025);background:#fff2c8;box-shadow:0 9px 22px rgba(185,120,8,.2)}
.rhythm-lines{display:grid;gap:10px;padding:18px 26px 28px}.rhythm-line{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;border:1px solid #e9e3d6;border-radius:13px;padding:12px 14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.rhythm-line:hover{border-color:#d7bd82}.rhythm-line.selected{border-color:#c99025;background:#fffaf0;transform:translateX(3px)}.rhythm-line>span:first-child{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#edf1f7;color:var(--navy);font-size:12px;font-weight:800}.rhythm-phrase{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}.rhythm-beat{padding:10px 8px;border-radius:9px;color:#536078;font-size:17px;line-height:1.3}.rhythm-beat strong{color:#a66e08;font-weight:800}.rhythm-beat.active{background:#fff0bd;color:var(--navy)}.rhythm-line button{border:0;border-radius:8px;background:#f0f3f8;color:var(--navy);width:38px;height:38px;font-weight:800;cursor:pointer}
.rhythm-four .rhythm-count,.rhythm-four .rhythm-phrase{grid-template-columns:repeat(4,minmax(0,1fr))}
.rhythm-sentences .rhythm-lines{gap:12px}.rhythm-sentence-line{grid-template-columns:42px 1fr;padding:16px 18px;cursor:pointer}.rhythm-sentence-line p{margin:0;color:#33435e;font:500 clamp(16px,2vw,20px)/1.55 Georgia,'Times New Roman',serif}.rhythm-sentence-line.selected p{color:#8c5e08}.rhythm-sentences .rhythm-record-panel p{max-width:720px;line-height:1.5;text-transform:none}
.rhythm-sentence-guide{display:flex;justify-content:space-between;gap:18px;padding:22px 26px 4px;color:#667085}.rhythm-sentence-guide strong{color:#a66e08;font-size:12px;letter-spacing:.11em}.rhythm-sentence-line{grid-template-columns:42px minmax(0,1fr) auto}.rhythm-sentence-text{color:var(--navy);font:500 clamp(16px,2vw,20px)/1.5 Georgia,'Times New Roman',serif}.rhythm-sentence-line.active{border-color:#c99025;background:#fff2c8}.rhythm-sentences .rhythm-lines{padding-top:16px}.rhythm-sentences .rhythm-record-panel p{max-width:720px;line-height:1.5}
.rhythm-nowrap{white-space:nowrap}
.rhythm-record-panel{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:25px 27px;border-top:1px solid #ece4d4;background:#fffaf0}.rhythm-record-panel h3{margin:4px 0 6px;color:var(--navy);font:500 24px/1.25 Georgia,'Times New Roman',serif}.rhythm-record-panel p{margin:0;color:#8c5e08;font-size:15px;font-weight:800}.rhythm-record-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.rhythm-record-actions .rhythm-quiet{color:var(--navy)}.rhythm-status{grid-column:1/-1;min-height:22px;color:#667085;font-size:13px}.rhythm-tip{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:26px 0 8px;padding:22px 27px;border-left:4px solid var(--gold);background:#fffaf0}.rhythm-tip strong{color:#9b6808;font-size:12px;letter-spacing:.11em}.rhythm-tip p{margin:0;color:#33435e;font-size:16px;line-height:1.55}.rhythm-tip b{color:var(--navy)}
.rhythm-staff{position:relative;height:82px;margin-top:18px;color:#b98a2d;overflow:hidden}.rhythm-staff-art{position:absolute;inset:0}.rhythm-staff-art span{position:absolute;left:75px;right:0;height:1px;background:#d7bf88}.rhythm-staff-art span:nth-of-type(1){top:18px}.rhythm-staff-art span:nth-of-type(2){top:27px}.rhythm-staff-art span:nth-of-type(3){top:36px}.rhythm-staff-art span:nth-of-type(4){top:45px}.rhythm-staff-art span:nth-of-type(5){top:54px}.rhythm-staff-art b{position:absolute;left:18px;top:2px;font-size:58px;line-height:1;font-weight:400}.rhythm-continue{position:absolute;z-index:1;right:18px;top:10px;display:grid;grid-template-columns:1fr auto;column-gap:15px;align-items:center;min-height:53px;padding:8px 18px 8px 21px;border:1px solid #c8952f;border-radius:8px;background:var(--gold);box-shadow:0 5px 14px rgba(14,37,69,.16);color:var(--navy);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.rhythm-continue small{grid-column:1;color:#644400;font-size:11px;font-weight:800;letter-spacing:.12em}.rhythm-continue strong{grid-column:1;font-size:15px;line-height:1.2}.rhythm-continue>b{grid-column:2;grid-row:1/3;font-size:24px;line-height:1}.rhythm-continue:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(14,37,69,.22);background:#e4b650}.rhythm-continue:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media(max-width:820px){.rhythm-toolbar{align-items:flex-start;flex-direction:column}.rhythm-toolbar-actions{justify-content:flex-start}.rhythm-line{grid-template-columns:36px 1fr}.rhythm-line>button{grid-column:2;justify-self:end}.rhythm-record-panel{grid-template-columns:1fr}.rhythm-record-actions{justify-content:flex-start}}
@media(max-width:580px){.rhythm-container{width:min(calc(100% - 24px),1080px)}.rhythm-hero{padding-top:28px}.rhythm-workspace{border-radius:15px}.rhythm-toolbar,.rhythm-count,.rhythm-lines{padding-left:15px;padding-right:15px}.rhythm-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.rhythm-button{padding-inline:10px}.rhythm-count{gap:8px}.rhythm-count span{min-height:65px}.rhythm-line{padding:11px 9px}.rhythm-phrase{gap:5px}.rhythm-beat{font-size:14px;padding:8px 3px}.rhythm-record-panel{padding:22px 16px}.rhythm-record-actions{display:grid;grid-template-columns:1fr 1fr}.rhythm-tip{grid-template-columns:1fr;gap:8px;padding:19px}.rhythm-staff{height:104px}.rhythm-staff-art span{left:58px}.rhythm-staff-art b{left:4px}.rhythm-continue{left:58px;right:4px;top:12px;padding-inline:14px}.rhythm-continue strong{font-size:14px}}
.rhythm-intro strong{color:#a66e08}
.rhythm-button.playing{background:#a62a2a;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.rhythm-line button.playing{background:#a62a2a;color:#fff}
.rhythm-sentence-line mark{padding:0 .05em;background:transparent;color:#a66e08;font-weight:800}