@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Noto+Serif+SC:wght@400;500;600;700;900&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root { --cream:#fbf3ef; --paper:#fffaf7; --ink:#452438; --muted:#8a6779; --line:#e5cfd2; --accent:#ad526d; --accent-strong:#7b2947; --soft:#f4dce1; --lilac:#c9b0cd; --shadow:0 18px 40px rgba(89,43,63,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--cream); color:var(--ink); font-family:"Nunito Sans","Noto Serif SC",sans-serif; line-height:1.6; transition:background .25s,color .25s; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.site-header { max-width:1180px; padding:22px 30px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-family:"Noto Serif SC",serif; font-weight:700; font-size:17px; }
.brand-flower { color:var(--accent); font-size:22px; }
.header-note,.eyebrow { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:1.7px; }
main { overflow:hidden; }
.hero { min-height:510px; max-width:1180px; margin:0 auto; padding:74px 30px 82px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); align-items:center; gap:44px; }
.hero-copy { position:relative; z-index:1; }
h1,h2 { font-family:"Noto Serif SC","DM Serif Display",serif; letter-spacing:0; line-height:1.22; margin:0; }
h1 { font-size:clamp(38px,5vw,61px); font-weight:900; max-width:720px; }
.lead { max-width:550px; margin:25px 0 31px; font-size:17px; color:var(--muted); }
.primary-link,.transcript-footer button { display:inline-flex; align-items:center; gap:10px; border:0; border-radius:5px; padding:15px 21px; background:var(--accent-strong); color:#fffaf7; text-decoration:none; font-weight:800; box-shadow:0 7px 0 rgba(69,36,56,.16); }
.primary-link:hover,.transcript-footer button:hover { transform:translateY(-1px); }
.hero-art { height:365px; position:relative; border:1px solid var(--line); border-radius:50% 50% 42% 42%; background:var(--paper); overflow:hidden; box-shadow:var(--shadow); }
.hero-art:after { content:""; position:absolute; inset:20px; border:1px dashed var(--line); border-radius:48%; pointer-events:none; }
.petal { position:absolute; display:block; background:var(--soft); border-radius:100% 10% 100% 10%; opacity:.9; }
.petal-a { width:210px;height:150px;top:-54px;right:-35px; transform:rotate(28deg); }.petal-b { width:160px;height:110px;bottom:-38px;left:-22px;transform:rotate(-30deg); }.petal-c { width:104px;height:66px;top:58px;left:24px;transform:rotate(-20deg); }
.flower { color:var(--accent); position:absolute; z-index:1; }.flower-a { font-size:72px;left:38px;bottom:34px; }.flower-b { font-size:36px;right:40px;top:46px; }.flower-c { font-size:44px;right:72px;bottom:28px; }
.paper-note { position:absolute; z-index:2; width:207px; min-height:165px; padding:25px 23px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg); background:#fffdfb; box-shadow:0 13px 22px rgba(74,46,58,.14); text-align:center; font-family:"Noto Serif SC",serif; }
.paper-note span { font-size:12px;color:var(--muted); }.paper-note strong { display:block;font-size:24px;margin:6px 0 12px; }.paper-note i { display:block;border-top:1px solid var(--line);margin:8px 0; }
.style-picker { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px max(30px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:25px; background:rgba(255,255,255,.25); }
.style-picker h2 { font-size:22px; }.style-picker .eyebrow { margin:0 0 2px; }
.theme-options { display:flex; gap:9px; flex-wrap:wrap; }.theme-choice { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:5px; padding:9px 12px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; }.theme-choice:hover,.theme-choice.selected { border-color:var(--accent); box-shadow:0 3px 0 var(--accent); }.swatch { width:17px;height:17px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08); }.garden-swatch {background:linear-gradient(135deg,#fbf3ef 50%,#ad526d 50%);}.violet-swatch {background:linear-gradient(135deg,#d9c6dc 50%,#785b91 50%);}.editorial-swatch {background:linear-gradient(135deg,#f4d7d2 50%,#161318 50%);}
.practice-section,.rehearsal-section,.feedback-section,.method-section { max-width:1120px; margin:0 auto; padding:94px 30px; }.section-heading { max-width:670px; }.section-heading .eyebrow,.rehearsal-copy .eyebrow,.feedback-heading .eyebrow,.method-section .eyebrow { margin:0 0 9px; }.section-heading h2,.rehearsal-copy h2,.feedback-heading h2 { font-size:36px; }.section-heading>p:last-child {color:var(--muted);margin:14px 0 0;}
.practice-grid { margin-top:38px; display:grid; grid-template-columns:1.04fr .96fr; gap:25px; }.practice-form,.recorder-panel,.transcript-tool,.feedback-card { border:1px solid var(--line); background:var(--paper); border-radius:7px; box-shadow:var(--shadow); }.practice-form { padding:28px; }.practice-form label,.transcript-tool label { display:block;font-family:"Noto Serif SC",serif;font-weight:700;font-size:18px; }.practice-form input,.transcript-tool textarea { width:100%; margin:10px 0 20px; border:0; border-bottom:1px solid var(--line); outline:0; background:transparent; color:var(--ink); padding:9px 2px; }.practice-form input:focus,.transcript-tool textarea:focus { border-color:var(--accent); }.practice-form fieldset { border:0;padding:0;margin:0; }.practice-form legend { font-weight:800;font-size:14px;margin-bottom:4px; }.practice-form fieldset input { margin:3px 0 9px; }.consent-line {color:var(--muted);font-size:12px;margin-top:7px;}
.recorder-panel { padding:28px; display:flex; flex-direction:column; align-items:center; text-align:center; }.timer-label { width:100%; display:flex;justify-content:space-between;font-weight:800; }.timer { color:var(--accent);font-size:20px;font-variant-numeric:tabular-nums; }.timer-ring { width:172px;height:172px;margin:24px auto 15px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 0deg, var(--soft) 0deg);position:relative; }.timer-ring:before { content:"";position:absolute;inset:10px;background:var(--paper);border-radius:50%; }.timer-ring span {position:relative;z-index:1;font-family:"DM Serif Display","Noto Serif SC",serif;font-size:55px;}.recording-status {min-height:50px;color:var(--muted);margin:0 0 17px;}.recording-actions {display:flex;gap:8px;align-items:center;}.record-button {border:0;background:var(--accent-strong);color:#fff;padding:13px 17px;border-radius:5px;font-weight:800;}.record-button span {display:inline-block;width:10px;height:10px;border-radius:50%;background:#ffd8dd;margin-right:8px;}.record-button.recording {background:#c83d54;}.icon-button {width:44px;height:44px;border:1px solid var(--line);color:var(--ink);background:var(--paper);border-radius:5px;}.icon-button:disabled {opacity:.4;cursor:not-allowed;}.download-link {margin-top:16px;color:var(--accent-strong);font-weight:800;}.is-hidden {display:none!important;}
.rehearsal-section { display:grid;grid-template-columns:.72fr 1.28fr; gap:52px;align-items:start;background:var(--soft);max-width:none;padding-left:max(30px,calc((100vw - 1120px)/2));padding-right:max(30px,calc((100vw - 1120px)/2)); }.rehearsal-copy p:last-child {color:var(--muted);}.transcript-tool {padding:25px;}.transcript-tool textarea {height:190px;resize:vertical;border:1px solid var(--line);padding:14px;margin-bottom:11px;}.transcript-footer {display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);font-size:13px;}.transcript-footer button {padding:11px 15px;box-shadow:none;}
.feedback-section { padding-top:82px;padding-bottom:82px; }.feedback-heading { text-align:center; }.feedback-cards {margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}.feedback-card {min-height:142px;padding:20px;position:relative;overflow:hidden;}.feedback-card:before {content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent);}.feedback-card.good:before{background:#6b9b78}.feedback-card.question:before{background:var(--lilac)}.feedback-card span {display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:10px;}.feedback-card strong {font-family:"Noto Serif SC",serif;font-size:18px;line-height:1.45;}.retry-button {display:flex;align-items:center;justify-content:center;gap:9px;margin:24px auto 0;border:1px solid var(--accent);background:transparent;color:var(--accent-strong);padding:12px 17px;border-radius:5px;font-weight:800;}.retry-button:hover{background:var(--soft)}
.method-section {padding-top:20px;text-align:center;}.method-section ol {display:flex;justify-content:center;gap:0;max-width:900px;margin:20px auto 0;padding:0;list-style:none;counter-reset:steps;}.method-section li {flex:1;padding:18px;position:relative;font-family:"Noto Serif SC",serif;}.method-section li:before {counter-increment:steps;content:"0" counter(steps);display:block;color:var(--accent);font-size:12px;font-weight:800;font-family:"Nunito Sans",sans-serif;}.method-section li:not(:last-child):after {content:"";position:absolute;right:0;top:50%;height:34px;border-right:1px solid var(--line);}
footer {padding:34px 30px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--line);} footer span {padding:0 7px;color:var(--accent);}
body.theme-violet {--cream:#f4eff5;--paper:#fffaff;--ink:#4a3858;--muted:#806e86;--line:#d9ccdf;--accent:#876299;--accent-strong:#604573;--soft:#e6d8e8;--lilac:#b7a2ca;}body.theme-editorial {--cream:#faeeea;--paper:#fffaf8;--ink:#19151a;--muted:#78676c;--line:#e2c9c5;--accent:#db6171;--accent-strong:#21181d;--soft:#f3d7d2;--lilac:#e5a2b3;}
body.theme-violet .hero-art {border-radius:18px 78px 18px 78px;} body.theme-violet .paper-note {border-radius:0 34px 0 34px;} body.theme-violet .hero-art:after {border-radius:14px 62px 14px 62px;}body.theme-editorial .hero-art {border-radius:0;border-width:2px;}body.theme-editorial .paper-note {transform:translate(-50%,-50%) rotate(0);border-left:6px solid var(--accent);}body.theme-editorial .hero-art:after {border-style:solid;border-radius:0;inset:15px;}
@media (max-width:760px){.site-header{padding:18px 20px}.header-note{display:none}.hero{padding:42px 20px 56px;grid-template-columns:1fr;gap:30px}.hero-art{height:278px;max-width:460px;width:100%;margin:auto}.style-picker{padding:25px 20px;display:block}.theme-options{margin-top:15px}.practice-section,.feedback-section,.method-section{padding:60px 20px}.section-heading h2,.rehearsal-copy h2,.feedback-heading h2{font-size:30px}.practice-grid,.rehearsal-section{grid-template-columns:1fr}.rehearsal-section{padding:60px 20px;gap:25px}.feedback-cards{grid-template-columns:1fr}.method-section ol{flex-direction:column}.method-section li:not(:last-child):after{display:none}.method-section li{border-bottom:1px solid var(--line)}.method-section li:last-child{border-bottom:0}.transcript-footer{align-items:flex-end}.transcript-footer button{font-size:13px}.lead{font-size:16px}}
@media (max-width:390px){h1{font-size:36px}.theme-choice{padding:8px 10px;font-size:12px}.timer-ring{width:150px;height:150px}.timer-ring span{font-size:46px}.recording-actions{flex-direction:column;width:100%}.record-button{width:100%}.icon-button{width:100%}}