:root { color-scheme:light; --paper:#f8f5f0;--ink:#332f2b;--muted:#776f65;--rule:#d9d1c6;--accent:#8d493e;font-family:Georgia,'Times New Roman',serif;background:var(--paper);color:var(--ink); }
* {box-sizing:border-box;}
body {margin:0;}
main {max-width:880px;margin:auto;padding:clamp(16px,3svh,32px) 32px 20px;}
h1 {margin:0;font-weight:400;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em;}
.byline {font-size:14px;font-style:italic;color:var(--muted);margin:8px 0 0;}
button,input {font:inherit;}
button {background:none;border:0;padding:10px 0;color:var(--muted);cursor:pointer;}
button:disabled {opacity:.4;cursor:default;}
button:hover {color:var(--accent);}
button:focus-visible,input:focus-visible {outline:1px solid var(--accent);outline-offset:4px;}
.texts {display:flex;flex-wrap:wrap;gap:0 24px;margin-top:clamp(12px,2svh,22px);font-size:13px;}
.texts button[aria-pressed="true"] {color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:6px;}
#stage {height:clamp(340px,calc(100svh - 270px),650px);position:relative;}
#letters {display:block;width:100%;height:100%;overflow:visible;}
#letters text {fill:var(--ink);font-family:var(--poem-font, Georgia,'Times New Roman',serif);font-kerning:none;font-variant-ligatures:none;}
.controls {max-width:640px;margin:8px auto 0;}
.endpoints {display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:20px;}
.endpoints span:last-child {text-align:right;}
input[type="range"] {display:block;width:100%;height:28px;margin:2px 0 0;appearance:none;background:transparent;cursor:ew-resize;}
input[type="range"]::-webkit-slider-runnable-track {height:1px;background:var(--rule);}
input[type="range"]::-webkit-slider-thumb {appearance:none;width:10px;height:10px;margin-top:-4.5px;border-radius:50%;background:var(--accent);}
input[type="range"]::-moz-range-track {height:1px;background:var(--rule);}
input[type="range"]::-moz-range-thumb {width:10px;height:10px;border:0;border-radius:50%;background:var(--accent);}
.actions {display:flex;align-items:center;justify-content:center;gap:32px;font-size:14px;}
#play {color:var(--ink);min-width:135px;}
.hint {color:var(--muted);font-size:12px;font-style:italic;text-align:left;margin:5px 0 0;line-height:1.5;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:pre;}
#error {color:var(--accent);}
@media(max-width:560px) {
 main {padding:18px 18px 14px;}
 h1 {font-size:22px;max-width:360px;}
 .texts {gap:20px;font-size:12px;margin-top:12px;}
 #stage {height:clamp(335px,calc(100svh - 290px),600px);}
 .actions {gap:20px;font-size:13px;}
 .hint {font-size:11px;}
}

/* Embedded editions inherit their title from the surrounding page. */
[data-embedded="true"] main>header{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-embedded="true"] main{padding:8px 18px 12px}
[data-embedded="true"] .texts{margin-top:0}
[data-embedded="true"] #stage{height:clamp(300px,calc(100svh - 175px),650px)}