.tr-page{padding-top:1rem}.tr-page>nav{margin-bottom:.5rem}.tr-page>section:first-of-type{padding-bottom:1.5rem}.tr-page #tool-title+p{margin-top:.5rem}.tr-tool{padding:1rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}.tr-form{min-width:0}.tr-toolbar{display:grid;gap:.75rem;align-items:center}.tr-direction{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;border:0;padding:0;margin:0}.tr-direction label{position:relative;min-width:0;cursor:pointer}.tr-direction input{position:absolute;width:1px;height:1px;opacity:0}.tr-direction span{display:flex;align-items:center;justify-content:center;min-height:3rem;height:100%;padding:.375rem .5rem;border:1px solid var(--border);background:var(--surface-muted);font-size:.875rem;font-weight:600;line-height:1.25rem;text-align:center}.tr-direction label:first-of-type span{border-radius:.5rem 0 0 .5rem}.tr-direction label:last-of-type span{border-radius:0 .5rem .5rem 0;border-left:0}.tr-direction input:checked+span{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.tr-direction label:hover span{background:var(--surface-hover)}.tr-direction label:hover input:checked+span{background:var(--text-primary)}.tr-direction input:focus-visible+span{position:relative;z-index:1;outline:2px solid var(--focus);outline-offset:3px}.tr-scheme{display:flex;align-items:center;gap:.75rem;min-width:0;font-size:.875rem}.tr-scheme select{flex:1;min-width:0;min-height:2.75rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface-muted);color:var(--text-primary);font-size:1rem}.tr-scheme select:hover{border-color:var(--primary)}.tr-hint{margin:0;color:var(--text-muted);font-size:.8125rem;line-height:1.25rem}.tr-editors{display:grid;gap:1rem;margin-top:.75rem}.tr-editor{display:flex;flex-direction:column;min-width:0}.tr-field-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem;font-size:.875rem}.tr-field-heading label{font-weight:700}.tr-field-heading>span{color:var(--text-muted);font-size:.8125rem}.tr-clear{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:2.75rem;padding:.375rem .5rem;border-radius:.5rem;color:var(--text-muted);font-size:.875rem}.tr-clear:hover{background:var(--surface-hover);color:var(--text-primary)}.tr-clear:disabled{opacity:.5;cursor:default}.tr-editor textarea{display:block;min-width:0;width:100%;height:6rem;min-height:6rem;resize:vertical;border:1px solid var(--border);border-radius:.5rem;padding:.75rem;background:var(--surface);color:var(--text-primary);font-size:1rem;line-height:1.5rem}.tr-editor textarea:hover{border-color:var(--primary)}.tr-editor textarea::placeholder{color:var(--text-muted);opacity:1}.tr-result textarea{height:5rem;min-height:5rem;background:var(--primary-soft)}.tr-copy{width:100%;margin-top:.5rem;flex-shrink:0}.tr-copy-error,.tr-reverse-note{margin-top:.75rem;color:var(--text-muted);font-size:.875rem;line-height:1.5rem}.tr-alphabet{margin-top:1.25rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}.tr-alphabet summary{display:flex;align-items:center;gap:.75rem;padding:1rem;min-height:3.5rem;cursor:pointer;list-style:none;border-radius:.75rem}.tr-alphabet summary::-webkit-details-marker{display:none}.tr-alphabet summary:hover{background:var(--surface-hover)}.tr-alphabet h2{flex:1;min-width:0;font-size:.875rem;font-weight:700;line-height:1.5rem}.tr-alphabet summary>svg{flex-shrink:0}.tr-alphabet[open] .tr-disclosure-arrow{transform:rotate(180deg)}.tr-alphabet-body{padding:0 1rem 1rem}.tr-alphabet p{color:var(--text-muted);font-size:.875rem;line-height:1.5rem}.tr-alphabet table{margin-block:1rem;width:100%;table-layout:fixed;border-collapse:collapse}.tr-alphabet td{border:1px solid var(--border);padding:.5rem .25rem;text-align:center;font-size:.875rem}.tr-alphabet td span{display:block}.tr-alphabet td span:first-child{font-weight:700}.tr-alphabet td span:last-child{color:var(--text-muted)}.tr-instruction,.tr-uses{margin-top:2.5rem}.tr-steps,.tr-uses-grid{display:grid;gap:1.25rem;margin-top:1.25rem}.tr-steps li{display:flex;align-items:flex-start;gap:.75rem}.tr-step-number{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700}.tr-steps h3,.tr-uses h3{font-size:.875rem;font-weight:700;line-height:1.5rem}.tr-steps p,.tr-uses p{margin-top:.25rem;color:var(--text-muted);font-size:.875rem;line-height:1.5rem}@media(min-width:48rem){.tr-page{padding-top:1.5rem}.tr-tool{padding:1.5rem}.tr-toolbar{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 1.5rem}.tr-hint{grid-column:1 / -1}.tr-editors{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1rem}.tr-source{padding-right:1.5rem;border-right:1px solid var(--border)}.tr-source textarea{height:15rem;min-height:15rem}.tr-result textarea{height:11.75rem;min-height:11.75rem}.tr-scheme select{font-size:.875rem}.tr-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.tr-uses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-alphabet h2{font-size:1rem}}@media(min-width:80rem){.tr-toolbar{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr)}.tr-direction span{min-height:2.75rem}.tr-hint{grid-column:auto}.tr-scheme{border-left:1px solid var(--border);padding-left:1.5rem}}