.roman-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0}.roman-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}.roman-page button{cursor:pointer;font:600 13px Inter,sans-serif;min-height:44px}.roman-tabs button{background:none;border:0;color:var(--muted);padding:14px 20px;border-bottom:2px solid transparent}.roman-tabs button[aria-selected=true]{color:var(--ink);border-color:var(--orange)}.roman-page button:focus-visible,.roman-page input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.roman-page .save-tool{border:1px solid var(--line);border-radius:24px;padding:8px 15px;font-size:12px}.roman-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.roman-editor{border:1px solid var(--line);border-radius:16px;padding:32px;background:var(--surface,#fff);min-width:0}.roman-direction{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:30px}.roman-direction button{background:var(--paper);color:var(--muted);border:1px solid var(--line);border-radius:24px;padding:10px 16px}.roman-direction button[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}.roman-page label[for]{display:block;font-weight:600;font-size:13px;margin:12px 0}.roman-page input[type=text]{width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--control,#848C98);border-radius:10px;padding:18px;font:500 30px/1.5 Inter,sans-serif;min-width:0}.roman-page input[aria-invalid=true]{border-color:var(--orange)}#roman-input-help,.roman-scope,.roman-privacy{font-size:12px;line-height:1.8;color:var(--muted)}.roman-error{font-size:12px;line-height:1.8;color:var(--ink);min-height:22px;margin:16px 0}.roman-error:not(:empty){border-left:3px solid var(--orange);padding-left:12px}.roman-result{background:#141618;border:1px solid #3d444c;border-radius:16px;color:white;padding:32px;min-width:0}.roman-result h2{font:600 13px Inter,sans-serif;color:#b8bec7;letter-spacing:0;margin:0}.roman-result output{display:block;font:500 clamp(26px,3.5vw,48px)/1.5 Unbounded,sans-serif;overflow-wrap:anywhere;margin:20px 0 28px}.roman-result h3{font:600 12px Inter,sans-serif;letter-spacing:0;color:#b8bec7}.roman-result p{font-size:14px;line-height:1.8;color:#d3d7dc}.roman-copy{border-top:1px solid #3d444c;padding-top:20px;margin-top:24px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.roman-copy button{background:white;color:#141618;border:0;border-radius:8px;padding:10px 16px}.roman-copy span{font-size:12px}.roman-page button:disabled{opacity:.5;cursor:default}.roman-privacy{margin:24px 0 40px}.roman-page [role=tabpanel]>h2,.roman-reference>h2{font-size:26px;line-height:1.5}.roman-page [role=tabpanel]>p{color:var(--muted);font-size:14px;line-height:1.8}.roman-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}.roman-examples button{background:var(--surface,#fff);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:22px;text-align:left}.roman-examples button:hover{border-color:var(--orange)}.roman-examples strong{display:block;font:500 22px/1.6 Unbounded,sans-serif;overflow-wrap:anywhere}.roman-examples span{display:block;font:400 12px/1.8 Inter,sans-serif;color:var(--muted);margin-top:14px}.roman-reference{border-top:1px solid var(--line);padding-top:28px}.roman-reference table{width:100%;border-collapse:collapse;margin:20px 0 32px;min-width:480px}.roman-reference th,.roman-reference td{text-align:center;border-bottom:1px solid var(--line);padding:16px 10px;font-size:16px}.roman-reference th:first-child{text-align:left;font-size:12px;color:var(--muted)}.roman-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.roman-rules h3{font:600 16px/1.6 Inter,sans-serif;letter-spacing:0}.roman-rules p{font-size:13px;line-height:1.9;color:var(--muted)}.roman-page .converter-guide{margin-top:44px;max-width:850px}.practice-settings{display:grid;gap:22px;margin:26px 0}.practice-settings fieldset{border:0;padding:0;min-width:0}.practice-settings legend{font-size:12px;font-weight:600;margin-bottom:12px}.roman-levels{display:flex;gap:8px;flex-wrap:wrap}.roman-levels label{position:relative;cursor:pointer}.roman-levels input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.roman-levels span{display:block;padding:13px 17px;border:1px solid var(--line);border-radius:24px;font-size:12px;background:var(--surface,#fff);color:var(--muted)}.roman-levels input:checked+span{border-color:var(--ink);color:var(--paper);background:var(--ink)}.roman-levels input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}.roman-page .roman-primary{border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:var(--paper);padding:12px 20px}.practice-card{margin-top:26px;padding:30px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);max-width:800px}.practice-progress{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}#question-prompt{font-size:14px;color:var(--muted);line-height:1.8;margin-top:24px}.practice-value{font:500 clamp(26px,4vw,44px)/1.5 Unbounded,sans-serif;overflow-wrap:anywhere;margin:16px 0 24px}.practice-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.practice-actions button:not(.roman-primary){background:none;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:12px 16px}#practice-feedback{font-size:14px;line-height:1.8;margin:20px 0}#practice-feedback p,#practice-hint,#practice-settings-note,#complete-text{font-size:13px;line-height:1.9;color:var(--muted)}#practice-hint{padding:14px;border-left:3px solid var(--orange);background:var(--paper)}#practice-complete h3{font-size:24px}@media(max-width:760px){.roman-layout{grid-template-columns:minmax(0,1fr);gap:16px}.roman-editor,.roman-result,.practice-card{padding:22px}.roman-top{align-items:flex-start;flex-wrap:wrap;gap:14px}.roman-tabs{width:100%}.roman-tabs button{flex:1;padding:12px 10px}.roman-examples{grid-template-columns:repeat(2,minmax(0,1fr))}.roman-examples button{padding:16px}.roman-examples strong{font-size:18px}.roman-rules{grid-template-columns:minmax(0,1fr);gap:8px}.roman-reference>h2,.roman-page [role=tabpanel]>h2{font-size:23px}.roman-direction{margin-bottom:22px}.roman-direction button{font-size:11px;padding:10px 13px}.roman-levels span{font-size:11px;padding:12px}.practice-progress{font-size:11px}.roman-result output{font-size:28px}}