:root{--bg:#fff;--ink:#171717;--muted:#737373;--line:#e8e8e8;--error:#ba3a32;--font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}button:hover{color:#000}button:active{opacity:.6}.wrap{width:calc(100% - 112px);max-width:1280px;margin-inline:auto}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:25px;letter-spacing:-1.5px;color:var(--ink);text-decoration:none}nav{display:flex;gap:30px}.practice{border:0}.stats{display:flex;gap:64px;padding:27px 0}.writing-area{position:relative;padding:40px 0 30px}.passage{padding:40px 0 45px;display:flex;flex-direction:column;gap:15px;font-size:clamp(25px,2.7vw,37px);letter-spacing:-1.3px;line-height:1.7;word-break:keep-all;font-weight:400}.current{color:#aaa}.char{position:relative;white-space:pre-wrap}.char.correct{color:var(--ink)}.char.wrong{color:var(--error);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}.char.composing{color:var(--ink);border-bottom:1px solid var(--ink)}.char.cursor:before{content:"";position:absolute;width:1px;left:-2px;top:2px;height:1.1em;background:var(--ink);animation:blink 1.2s infinite}.input-shell{display:flex;align-items:center;border-bottom:1px solid #c9c9c9;gap:16px;transition:border-color .15s}.input-shell:focus-within{border-color:var(--ink)}input{width:100%;min-width:0;border:0;outline:0;background:none;color:var(--ink);padding:18px 0;font-size:17px;caret-color:var(--ink)}input::placeholder{color:#8a8a8a;font-size:14px}kbd{font-family:inherit;font-size:10px;margin-right:8px}.footer{border-top:1px solid var(--line);margin-top:60px;padding-block:22px 28px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.sr-only,.input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:44px;max-width:540px;width:calc(100% - 32px)}dialog::backdrop{background:#0005}dialog h2{font-size:30px;letter-spacing:-1px;font-weight:500;margin:30px 0 12px}dialog>p{font-size:13px;color:var(--muted);line-height:1.7}@keyframes blink{50%{opacity:0}}@media(min-width:1500px){.writing-area{padding-top:55px}.passage{padding-block:50px 60px}}@media(max-width:800px){.wrap{width:calc(100% - 48px)}.header{height:80px}.stats{gap:40px}.passage{font-size:27px}.footer{margin-top:40px}}@media(max-width:540px){.wrap{width:calc(100% - 40px)}.header{height:72px}.brand{font-size:23px}nav{gap:24px}.stats{justify-content:space-between;gap:16px;padding:24px 0}.writing-area{padding-top:27px}.passage{font-size:25px;letter-spacing:-.8px;line-height:1.8;padding:32px 0 40px;gap:14px}input{font-size:15px}.footer{margin-top:35px;font-size:9px;line-height:1.7;flex-wrap:wrap;gap:8px}dialog{padding:32px 24px}dialog h2{font-size:27px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
/* Input feedback: monochrome for matches, red only for mistakes. */
.char.correct{color:var(--ink)}
.char.wrong{color:var(--error);background:#fce9e7;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;border-radius:2px}
.char.extra{text-decoration:line-through}
.char.composing{color:#555;background:#f0f0f0;border-bottom:1px solid #555}
.char.hit-correct{animation:correct-hit .24s ease-out}
.char.hit-wrong{animation:wrong-hit .22s ease-out}
.input-shell.has-error{border-bottom-color:var(--error)}
.input-shell.has-error input{caret-color:var(--error)}
@keyframes correct-hit{0%{background:#bcbcbc;color:#000;text-shadow:0 0 1px #171717}100%{background:transparent;color:var(--ink);text-shadow:none}}
@keyframes wrong-hit{0%{background:#e7a099;text-shadow:1px 0 currentColor}45%{text-shadow:-1px 0 currentColor}100%{background:#fce9e7;text-shadow:none}}
/* One reading and typing surface; native input remains for IME and mobile keyboards. */
.typing-surface{position:relative;cursor:text;border-bottom:1px solid var(--line);padding-bottom:20px;transition:border-color .15s}
.typing-surface.focused{border-bottom-color:#888}
.typing-surface.has-error{border-bottom-color:var(--error)}
.typing-surface.ready{border-bottom-color:var(--ink)}
.typing-surface #typing-input{position:absolute;width:2px;height:1.5em;padding:0;border:0;opacity:0;font-size:20px;pointer-events:none}
.typing-surface .passage{padding-bottom:35px;gap:32px}
.current{position:relative;line-height:2.15;overflow-wrap:anywhere}
.current .char{display:inline-block;min-width:.3em;white-space:pre;vertical-align:baseline;transform-origin:50% 75%;animation:none;letter-spacing:0}
.current .char.wrong:after{content:attr(data-expected);position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.2;letter-spacing:0;color:var(--error);white-space:nowrap;font-weight:500}
.current .char.wrong{line-height:1.5;text-decoration:none;box-shadow:inset 0 -2px var(--error)}
.current .char.extra{text-decoration:line-through}
.current .char.cursor:before{top:.35em;height:1.4em;width:2px}
.current.at-end:after{content:'';display:inline-block;width:2px;height:1.4em;vertical-align:middle;background:var(--ink);animation:blink 1.2s infinite}
.typing-surface:not(:focus-within) .cursor:before,.typing-surface:not(:focus-within) .current.at-end:after{opacity:.25;animation:none}
@media(prefers-reduced-motion:reduce){.current.at-end:after{animation:none}}
/* The passage is the only visible typing area. */
.typing-surface,.typing-surface.focused,.typing-surface.has-error,.typing-surface.ready{border:0;padding-bottom:0}
.typing-surface .passage{padding-bottom:12px}
/* Shared control scale and line icons. Typing geometry stays unchanged. */
:root{--icon-size:20px;}
.ui-icon{width:var(--icon-size);height:var(--icon-size);flex:none;display:inline-block;vertical-align:middle}
.brand{font-size:32px;letter-spacing:-1.8px}
.header{height:110px}
nav{gap:36px}
.stats{gap:80px;padding:32px 0}
kbd{display:inline-flex;align-items:center;gap:7px;font-size:12px;border:1px solid var(--line);padding:5px 8px;border-radius:4px}
kbd .ui-icon{width:14px;height:14px}
.footer{font-size:12px;padding-block:26px 32px}
dialog{max-width:600px;padding:48px}
dialog h2{font-size:36px}
dialog>p{font-size:15px}
@media(max-width:900px){.stats{gap:48px}}
@media(max-width:650px){:root{--icon-size:18px;}.header{height:88px}.brand{font-size:29px}nav{gap:24px}.stats{gap:14px;justify-content:space-between;padding:28px 0}.footer{font-size:11px}dialog{padding:32px 24px}dialog h2{font-size:30px}}
/* Quiet frame: the practice text carries the visual emphasis. */
.header{height:76px;border-bottom:0}
.brand{font-size:23px;letter-spacing:-1px;font-weight:600}
nav{gap:24px}
.practice{padding-top:50px}
.stats{padding:18px 0 24px;gap:48px;border-bottom:1px solid var(--line)}
.writing-area{padding-top:46px}
kbd{font-size:10px;padding:3px 5px;border:0;margin-right:0}
kbd .ui-icon{width:12px;height:12px}
.footer{font-size:10px;color:#929292;margin-top:75px;padding-block:20px;border-top:0}
dialog{max-width:520px;padding:36px}
dialog h2{font-size:28px}
dialog>p{font-size:13px}
@media(max-width:650px){.header{height:68px}.brand{font-size:22px}.practice{padding-top:24px}.stats{gap:16px;padding:17px 0 22px}.writing-area{padding-top:32px}.footer{margin-top:42px;font-size:10px}dialog{padding:30px 24px}}

/* Shared Korean, Latin and numeral typography. */
.brand{font-family:var(--font)}

/* One shared geometry for the symbol and three evenly spaced Hangul cells. */
@font-face{font-family:'Tajalab Round';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex-shrink:0;color:var(--ink);text-decoration:none;letter-spacing:normal}
@media(max-width:650px){.brand{gap:8px}}
/* A focused writing canvas with supporting controls below. */
.practice{padding-top:42px}
.writing-area{background:#f7f7f5;border:1px solid #ededE9;border-radius:18px;padding:30px 38px 24px;min-height:350px;display:flex;flex-direction:column}
.typing-surface{margin-block:auto}
.typing-surface .passage{padding-top:35px;padding-bottom:26px;font-size:clamp(28px,3vw,42px);gap:20px}
.writing-area .current{color:#9c9c98;line-height:1.95}
.footer{margin-top:40px}
@media(min-width:1500px){.writing-area{min-height:390px;padding:34px 46px 28px}}
@media(max-width:900px){.writing-area{padding-inline:28px}}
@media(max-width:650px){.practice{padding-top:22px}.writing-area{border-radius:14px;padding:22px 20px 18px;min-height:340px}.typing-surface .passage{font-size:27px;padding-block:30px 20px;gap:24px}.footer{margin-top:20px}}

/* Mixed-script wordmark with optically balanced Latin capitals. */
/* Optical alignment: match visible glyph centers, not just font line boxes. */
.brand{align-items:center}
/* tajalab — a quiet workspace built around the sentence. */
:root{--bg:#f6f6f4;--paper:#fff;--ink:#20211f;--muted:#81837d;--line:#e5e6e1;--surface-radius:22px;}
body{background:var(--bg)}
.wrap{max-width:1160px;width:calc(100% - 96px)}
.header{height:96px;border-bottom:1px solid var(--line)}
.header nav{gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#f0f0ed}
.practice{padding-top:54px}
.writing-area{min-height:400px;padding:28px 40px 24px;background:var(--paper);border:1px solid #e2e3dd;border-radius:var(--surface-radius);box-shadow:0 2px 4px #20211f02,0 12px 36px -24px #20211f22;transition:border-color .2s,box-shadow .2s}
.writing-area:focus-within{border-color:#c8cbc1;box-shadow:0 2px 4px #20211f03,0 12px 36px -24px #20211f28}
.typing-surface .passage{padding-top:36px;padding-bottom:28px}
.writing-area .current{color:#9b9e94}
.footer{border-top:1px solid var(--line);margin-top:40px;padding-block:21px 30px;font-size:10px;color:#9b9e94}
.footer>span:first-child{font-weight:600;letter-spacing:-.2px;color:#84897b}
dialog{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:0 24px 80px #20211f1a}
dialog::backdrop{background:#25292240;backdrop-filter:blur(5px)}
dialog h2{font-size:30px;font-weight:600;letter-spacing:-1px}
@media(min-width:1500px){.practice{padding-top:64px}.writing-area{min-height:420px;padding:30px 44px 26px}}
@media(max-width:1000px){.writing-area{padding-inline:30px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:80px}.practice{padding-top:30px}.writing-area{min-height:370px;padding:24px}.footer{margin-top:24px}}
@media(max-width:540px){.wrap{width:calc(100% - 32px)}.header{height:76px}.header nav{padding:3px;border-radius:10px}.writing-area{border-radius:16px;padding:20px;min-height:350px}.typing-surface .passage{padding-top:34px;padding-bottom:24px}.footer{font-size:9px}dialog{padding:32px 24px}}
@media(prefers-reduced-motion:reduce){.writing-area{transition:none}}

/* Single-page header: one unobtrusive history action. */
.header nav{padding:0;border:0;background:none}
/* Typesetting details: registration marks, line indices and a live reading rule. */
.writing-area{border-radius:12px;background:linear-gradient(110deg,#fff 70%,#fcfcfa);padding-inline:52px;box-shadow:0 1px 2px #20211f03,0 16px 36px -28px #20211f30}
.writing-area:before{content:'';position:absolute;top:-1px;left:52px;width:36px;height:3px;background:#30352b;border-radius:0 0 2px 2px}
.typing-surface .passage{padding-top:42px;padding-bottom:38px}
.current:before{content:attr(data-number);position:absolute;right:calc(100% + 18px);top:1.2em;font-family:var(--font);font-size:9px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.4px;color:#b2b8a7;pointer-events:none}
.footer>span:first-child:after{content:'';display:inline-block;width:4px;height:4px;margin-left:8px;border-radius:50%;background:#9fa98f;vertical-align:middle}
@media(max-width:760px){.writing-area{padding-inline:34px}.writing-area:before{left:34px}.current:before{right:calc(100% + 12px);font-size:8px}}
@media(max-width:540px){.writing-area{padding:22px 28px 20px;border-radius:12px}.writing-area:before{left:28px;width:28px}.typing-surface .passage{padding-top:34px;padding-bottom:34px}.current:before{right:calc(100% + 8px);font-size:7px}}
.current:before{top:50%;transform:translateY(-50%);width:20px;white-space:nowrap;text-align:right}
/* Quiet notebook: warm paper, a binding margin and ruled writing lines. */
:root{--bg:#eeede8;--paper:#fffef9;--ink:#292c28;--line:#ddded5}
body{background:var(--bg)}
.writing-area{background:linear-gradient(90deg,#f0efe6 0,#f9f8ef 11px,#fffef9 30px,#fffef9 100%);border:1px solid #dfded2;border-radius:5px 12px 12px 5px;box-shadow:0 3px 0 -1px #f8f7ef,0 4px 0 -1px #dcdacf,0 7px 0 -2px #f8f7ef,0 8px 0 -2px #dfddd2,0 18px 32px -23px #45473738;padding-left:64px;padding-right:42px}
.writing-area:focus-within{border-color:#cfcebf;box-shadow:0 3px 0 -1px #f8f7ef,0 4px 0 -1px #dcdacf,0 7px 0 -2px #f8f7ef,0 8px 0 -2px #dfddd2,0 18px 32px -23px #45473738}
.writing-area:before{top:0;bottom:0;left:44px;width:1px;height:auto;background:#d7c7bb;border-radius:0;opacity:.6}
.typing-surface .passage{gap:24px}
.writing-area .current{color:#a3a59a;padding-bottom:10px;background:linear-gradient(#e8e8dd,#e8e8dd) left bottom / 100% 1px no-repeat}
.current:before{right:calc(100% + 28px);color:#b1b3a2;font-size:8px}
.current .char.correct{color:#30382e}
.current .char.composing{background:#eeeee1;color:#505847;border-color:#7b846d}
.current .char.cursor:before,.current.at-end:after{background:#505b45}
.header{border-bottom-color:#ddded3}
.footer{border-top-color:#ddded3}
dialog{background:#fffef9}
@media(max-width:760px){.writing-area{padding-left:46px;padding-right:28px}.writing-area:before{left:29px}.current:before{right:calc(100% + 22px)}}
@media(max-width:540px){.writing-area{padding:22px 22px 20px 38px;border-radius:4px 10px 10px 4px}.writing-area:before{left:24px}.current:before{right:calc(100% + 18px);font-size:7px}.typing-surface .passage{gap:22px}}
/* Neutral paper palette, keeping the notebook construction. */
:root{--bg:#f3f3f3;--paper:#fff;--ink:#292929;--line:#dedede}
.writing-area{background:linear-gradient(90deg,#efefef 0,#fafafa 11px,#fff 30px,#fff 100%);border-color:#dfdfdf;box-shadow:0 3px 0 -1px #fafafa,0 4px 0 -1px #dcdcdc,0 7px 0 -2px #fafafa,0 8px 0 -2px #dfdfdf,0 18px 32px -23px #45454538}
.writing-area:focus-within{border-color:#cecece;box-shadow:0 3px 0 -1px #fafafa,0 4px 0 -1px #dcdcdc,0 7px 0 -2px #fafafa,0 8px 0 -2px #dfdfdf,0 18px 32px -23px #45454538}
.writing-area:before{background:#cecece}
.writing-area .current{color:#a3a3a3;background-image:linear-gradient(#e8e8e8,#e8e8e8)}
.current .char.correct{color:#303030}
.current .char.composing{background:#eee;color:#505050;border-color:#7d7d7d}
.current .char.cursor:before,.current.at-end:after{background:#555}
.current:before{color:#b2b2b2}
.header,.footer{border-color:#ddd}
.footer,.footer>span:first-child{color:#929292}.footer>span:first-child:after{background:#a3a3a3}
dialog{background:#fff}
/* Flat paper surface without the shaded binding edge. */
.writing-area{background:#fff}
/* Clear hierarchy between the active sentence and the next-line preview. */
/* Nanum Gothic for the notebook text; interface and branding keep their fonts. */
@font-face{font-family:'Tajalab Nanum Gothic';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumGothic/NanumGothic.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
.typing-surface .passage{font-family:'Tajalab Nanum Gothic',var(--font);font-weight:400}
/* Completion stays on the same notebook page. */
.typing-surface[hidden]{display:none}
/* A quiet place for personal typing preferences. */
.rhythm{display:inline-flex;align-items:center;gap:3px;height:16px;margin-right:12px;flex-shrink:0}.rhythm i{display:block;width:2px;height:14px;background:#555;transform:scaleY(.2);opacity:.18;border-radius:2px}
.rhythm[hidden]{display:none}
@media(max-width:800px){.rhythm{gap:2px;margin-right:8px}}
@media(max-width:540px){.rhythm{display:none}}

/* Small, readable introduction below the practice controls. */

/* An independent waveform floating below the notebook. */
.rhythm-panel .rhythm{display:flex;align-items:center;justify-content:center;gap:clamp(4px,.75vw,10px);width:min(100%,760px);height:112px;margin:24px auto 4px;padding:0 24px;flex-shrink:0;pointer-events:none}
.rhythm-panel .rhythm i{flex:1;max-width:7px;height:88px;background:#424242;transform:scaleY(.045);opacity:.16;border-radius:999px;transform-origin:center}
.rhythm-panel .rhythm[hidden],.practice:has(.writing-area.is-complete) > .rhythm{display:none}
@media(max-width:540px){.rhythm-panel .rhythm{height:88px;gap:4px;margin:18px auto 0;padding:0 12px}.rhythm-panel .rhythm i{height:68px;max-width:5px}}
@media(prefers-reduced-motion:reduce){.rhythm-panel .rhythm i{transform:scaleY(.045)}}

/* A quiet physical keyboard, separate from the paper. */
/* Unified practice layout: paper, rhythm, keyboard, then supporting controls. */
.wrap{width:calc(100% - 64px);max-width:1040px}
.header{height:76px;border-bottom:0}
.practice{padding-top:12px}
.writing-area{min-height:292px;padding:24px 36px 20px 56px;border-radius:4px 12px 12px 4px}
.writing-area:before{left:36px}
.typing-surface .passage{font-size:clamp(28px,2.7vw,36px);padding:22px 0;gap:18px;line-height:1.8}
.writing-area .current{line-height:1.8}
.rhythm-panel .rhythm{width:min(100%,680px);height:88px;margin:12px auto 0;padding:0 16px;gap:8px}
.rhythm-panel .rhythm i{height:72px;max-width:6px}
.footer{margin-top:28px;padding-top:18px;padding-bottom:24px}
@media(min-width:761px) and (min-height:900px){
  .header{height:92px}.practice{padding-top:24px}.writing-area{min-height:340px}
  .typing-surface .passage{padding-block:30px}.rhythm-panel .rhythm{height:112px;margin-top:18px}
  .rhythm-panel .rhythm i{height:88px}
}
@media(min-width:761px) and (max-height:760px){
  .header{height:64px}.practice{padding-top:8px}.writing-area{min-height:270px;padding-top:18px;padding-bottom:18px}
  .typing-surface .passage{padding-block:18px;gap:14px}
  .rhythm-panel .rhythm{height:76px;margin-top:10px}.rhythm-panel .rhythm i{height:62px}

}
@media(max-width:760px){
  .wrap{width:calc(100% - 36px)}.header{height:64px}.practice{padding-top:10px}
  .writing-area{min-height:300px;padding:22px 24px 18px 42px}.writing-area:before{left:26px}

  .typing-surface .passage{font-size:27px;padding-block:24px;gap:18px}
  .rhythm-panel .rhythm{height:80px;margin-top:10px;gap:5px}
  .rhythm-panel .rhythm i{height:64px}

}
@media(max-width:480px){
  .wrap{width:calc(100% - 24px)}.writing-area{padding:20px 18px 16px 32px;min-height:290px}
  .writing-area:before{left:20px}
  .typing-surface .passage{font-size:24px}

  .rhythm-panel .rhythm{height:72px;padding:0 12px;gap:4px}.rhythm-panel .rhythm i{height:56px}

}
/* Tajalab identity: deep teal ink, with restrained mint accents. */

body{background:#f3f5f4}
button:focus-visible,a:focus-visible{outline-color:var(--brand)}
.writing-area{border-color:#d8e2de;background:#fff}
.writing-area:focus-within{border-color:var(--brand-line)}
.writing-area:before{background:var(--brand-line)}
.current .char.cursor:before,.current.at-end:after{background:var(--brand)}
.current .char.correct{color:#254c45}
.current .char.composing{color:var(--brand-deep)}
.rhythm-panel .rhythm i{background:var(--brand)}
::selection{background:#cce6dc;color:#163d34}

/* Session metrics stay close to the sentence, above the notebook. */
@media(min-width:761px) and (max-height:760px){.header{height:56px}.practice{padding-top:4px}}
/* Crisp neutral surfaces and deeper teal accents. */

body{background:#f5f5f5;color:#202522}
.writing-area{background:#fff;border-color:#bdc5c1}
.writing-area:focus-within{border-color:#92aaa1}
.writing-area:before{background:#b3c4bc;opacity:1}
.writing-area .current{color:#777e79;background-image:linear-gradient(#dce1dd,#dce1dd)}
.current .char.correct{color:#183e33}
.rhythm-panel .rhythm i{background:var(--brand);opacity:.28}
.footer{color:#78847c}

/* Practice controls share the global header with history. */
.header{position:relative;z-index:5}
.header nav{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0}
@media(max-width:600px){.header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px;padding-block:10px}.header nav{gap:0;margin-left:auto}}
@media(max-width:380px){.header nav{width:100%;justify-content:flex-end}}
/* Home: an editorial introduction to the practice space. */
.home-nav{display:flex;align-items:center;gap:7px;padding:9px 12px;text-decoration:none;color:#56665e;font-size:12px}
.home-nav:hover{color:var(--brand)}
@media(max-width:600px){.home-nav{font-size:11px;padding:7px}}
/* Readable type sizes across home and practice. */
.home-nav{font-size:14px}
.footer{font-size:12px;line-height:1.7}
@media(max-width:600px){
 .home-nav{font-size:13px}

 body:not(.home-page) .header nav{flex-wrap:wrap}

 .footer{font-size:11px}
}
@media(max-width:480px){
 body:not(.home-page) .header nav{width:100%;justify-content:flex-end}

}

/* Lead the practice session with its rhythm, then keep paper and keys together. */
.rhythm-panel .rhythm{height:64px;margin:0 auto 12px}
.rhythm-panel .rhythm i{height:52px}
@media(max-width:760px){.rhythm-panel .rhythm{height:56px;margin-bottom:12px}.rhythm-panel .rhythm i{height:44px}}
/* One shared horizontal grid for the entire practice instrument. */
.practice{width:100%;max-width:none;margin-inline:auto}
.practice > .writing-area,.rhythm-panel .rhythm{width:100%;max-width:none}
.rhythm-panel .rhythm{padding-inline:0;gap:clamp(4px,.75vw,10px)}
.rhythm-panel .rhythm i{max-width:none}

/* Match the home illustration to the practice screen's rhythm-first layout. */
/* Light editorial details for the home page. */
.rhythm-panel .rhythm i{--rhythm-height:52px;height:3px;background:#087f70;opacity:.4;transform:none;border-radius:2px}
@media(max-width:760px){.rhythm-panel .rhythm i{--rhythm-height:44px}}