:root{ --ink:#2b2620; --muted:#8a8175; --cta:#3d6fb4; }
body[data-contrast="cream"]{ --bg:#faf6ec; --panel:#fffdf6; --ink:#2b2620; --muted:#8a8175; --hl:#ffe08a; --shl:#ffd166; }
body[data-contrast="dark"]{ --bg:#15171c; --panel:#1e2129; --ink:#e8eaf0; --muted:#9aa2b1; --hl:#3d5a94; --shl:#2c4a7c; }
body[data-contrast="hc"]{ --bg:#000; --panel:#000; --ink:#fff; --muted:#ddd; --hl:#ffff00; --shl:#00e0ff; }
body[data-contrast="hc"] mark, body[data-contrast="hc"] .sentence.active{ color:#000; }
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--ink); font-family:"Segoe UI",Verdana,sans-serif; min-height:100vh; display:flex; flex-direction:column;}
header{padding:18px 26px;}
.brand{display:flex; align-items:center; gap:12px;}
body[data-contrast="dark"] .brand svg, body[data-contrast="hc"] .brand svg{ stroke:#8ab4f8; }
h1{font-size:22px;}
.tagline{color:var(--muted); font-size:13px;}
main{flex:1; max-width:860px; margin:0 auto; padding:0 20px 24px; width:100%;}
.input-panel{background:var(--panel); border-radius:16px; padding:18px; box-shadow:0 1px 4px rgba(0,0,0,.08);}
.input-panel label{display:block; font-size:13px; color:var(--muted); margin-bottom:8px;}
textarea{width:100%; background:var(--bg); color:var(--ink); border:1px solid #c9c2b2; border-radius:12px; padding:12px; font-size:15px; font-family:inherit; resize:vertical;}
.row{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap;}
.cta{background:var(--cta); color:#fff; border:0; border-radius:10px; padding:11px 22px; font-size:14.5px; font-weight:700; cursor:pointer;}
.samples-label{color:var(--muted); font-size:12.5px; margin-left:8px;}
.sample{background:transparent; color:var(--cta); border:1px solid var(--cta); border-radius:999px; padding:7px 14px; font-size:12.5px; cursor:pointer;}
#reader{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel); border-radius:14px; padding:12px 16px;}
.toolbar button{background:#e8e2d2; color:#33302a; border:0; border-radius:9px; padding:9px 16px; font-size:13.5px; cursor:pointer;}
.toolbar button.cta{background:var(--cta); color:#fff;}
body[data-contrast="dark"] .toolbar button{background:#2b303c; color:var(--ink);}
body[data-contrast="dark"] .toolbar button.cta, body[data-contrast="hc"] .toolbar button.cta{background:var(--cta); color:#fff;}
.toolbar label{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.mode-note{font-size:12px; color:var(--muted); font-style:italic;}
.contrasts{display:flex; gap:6px;}
.contrasts button.on{outline:2px solid var(--cta);}
.page{background:var(--panel); border-radius:16px; padding:26px 30px; line-height:1.9; outline:none; min-height:200px;}
.page .sentence{border-radius:6px; padding:2px 3px; cursor:pointer; transition:background .15s;}
.page .sentence:hover{background:var(--hl);}
.page .sentence.active{background:var(--shl);}
mark{background:var(--hl); border-radius:4px; padding:1px 2px;}
.hint{font-size:12.5px; color:var(--muted); line-height:1.5;}
footer{padding:14px 26px; color:var(--muted); font-size:12px; text-align:center;}