.tool-card { padding:clamp(1.1rem,3vw,2rem); border:1px solid var(--cyan); border-radius:16px; background:linear-gradient(145deg,var(--surface-raised),var(--surface)); box-shadow:0 14px 42px color-mix(in srgb,var(--blue) 8%,transparent); } .tool-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.3rem; } .tool-toolbar h2 { margin:0; font-size:clamp(1.3rem,2.5vw,1.75rem); line-height:1.25; } .tool-toolbar .section-kicker { margin-bottom:.4rem; } .tool-controls,.tool-actions { display:flex; align-items:flex-end; flex-wrap:wrap; gap:.75rem; } .tool-actions { margin:1rem 0; } .tool-field { display:grid; gap:.35rem; color:var(--muted); font-size:.875rem; } .tool-field select { min-height:44px; padding:.6rem 2rem .6rem .75rem; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); font:inherit; max-width:100%; } .tool-page select:focus-visible,.tool-page textarea:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; } .tool-page button { cursor:pointer; } .tool-page button:disabled,.tool-page select:disabled,.tool-page input:disabled,.tool-page textarea:disabled { opacity:.55; cursor:not-allowed; } .tool-page button,.tool-page select,.tool-page input,.tool-page textarea { min-height:44px; } .tool-page .reset-button { width:auto; height:auto; min-height:44px; padding:.72rem 1rem; font-size:.875rem; white-space:normal; } .tool-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:1rem 0 1.25rem; gap:.75rem; } .tool-metrics>div { min-width:0; padding:1rem; border:1px solid var(--border-soft); border-radius:11px; background:var(--surface); } .tool-metrics dt { color:var(--muted); font-size:.8rem; } .tool-metrics dd { margin:.35rem 0 0; color:var(--cyan); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .tool-metrics dd small { color:var(--muted); font-size:.85rem; font-weight:400; } .tool-status { padding:.85rem 1rem; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface-soft); color:var(--text); min-height:3.25rem; margin:1rem 0; } .tool-status[data-tone='error'] { border-style:dashed; border-color:var(--purple); } .tool-status[data-tone='success'] { border-color:var(--green); } .tool-muted,.tool-hint { color:var(--muted); } .tool-hint { margin:.65rem 0; font-size:.875rem; line-height:1.65; } .tool-input-label { display:block; margin:.9rem 0 .45rem; font-weight:700; } .tool-textarea,.tool-letter-input { width:100%; padding:1rem; border:1px solid var(--border); border-radius:11px; background:var(--bg); color:var(--text); font:inherit; caret-color:var(--cyan); } .tool-textarea { display:block; resize:vertical; line-height:1.7; min-height:8rem; } .tool-textarea::placeholder { color:var(--muted); opacity:1; } .typing-reference { max-height:15rem; overflow-y:auto; overflow-wrap:anywhere; padding:1.25rem; border:1px solid var(--border-soft); border-radius:11px; background:var(--bg-deep); color:var(--muted); font-size:1.15rem; line-height:1.9; white-space:pre-wrap; scrollbar-color:var(--border) var(--surface); } .typing-reference p { margin:0; } .typing-char.is-correct { color:var(--green); } .typing-char.is-wrong { color:var(--text); background:color-mix(in srgb,var(--purple) 30%,var(--surface)); text-decoration:underline wavy var(--purple); text-underline-offset:.2em; } .typing-char.is-current { border-bottom:2px solid var(--cyan); background:color-mix(in srgb,var(--cyan) 15%,var(--surface)); } .tool-result { margin-top:1.2rem; padding:1.2rem; border:1px solid var(--green); border-radius:11px; background:color-mix(in srgb,var(--green) 5%,var(--surface)); } .tool-result h3 { margin:0 0 .6rem; font-size:1.2rem; } .tool-result p { color:var(--muted); margin:.45rem 0 0; } .tool-result p:first-of-type { color:var(--text); } .tool-noscript { padding:1rem; border:1px dashed var(--cyan); border-radius:9px; } .tool-explainer { margin-top:1.5rem; align-items:start; } .tool-explainer li { color:var(--muted); margin:.5rem 0; } .tool-explainer ol { padding-left:1.4rem; } .tool-progress-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 .5rem; font-size:.875rem; } .tool-progress-heading strong { color:var(--cyan); font-variant-numeric:tabular-nums; } .tool-progress { appearance:none; display:block; width:100%; height:.65rem; overflow:hidden; border:1px solid var(--border); border-radius:1rem; background:var(--bg); color:var(--cyan); accent-color:var(--cyan); } .tool-progress::-webkit-progress-bar { background:var(--bg); } .tool-progress::-webkit-progress-value { background:var(--cyan); } .tool-progress::-moz-progress-bar { background:var(--cyan); } .polish-workspace { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1rem,4vw,3rem); align-items:center; } .polish-prompt { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem; border:1px solid var(--border-soft); border-radius:13px; background:var(--bg); min-height:16rem; } .polish-target { display:block; color:var(--cyan); font-size:clamp(4.5rem,10vw,7rem); line-height:1.2; font-weight:900; } .polish-prompt p { margin:.65rem 0 0; color:var(--muted); max-width:22rem; font-size:.875rem; } .tool-letter-input { max-width:12rem; font-size:2rem; padding:.6rem 1rem; } .polish-feedback { display:flex; gap:2rem; margin:.75rem 0 0; } .polish-feedback dt { font-size:.8rem; color:var(--muted); } .polish-feedback dd { margin:.2rem 0 0; font-size:1.5rem; font-weight:700; overflow-wrap:anywhere; } .polish-checklist { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:.55rem; padding:0; margin:1rem 0 0; list-style:none; } .polish-checklist li { position:relative; display:grid; place-items:center; padding:.6rem .25rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--muted); font-size:1.4rem; font-weight:700; } .polish-checklist li.is-current { border:2px solid var(--cyan); color:var(--cyan); } .polish-checklist li.is-passed { border-color:var(--green); color:var(--green); } .polish-checklist li.is-passed::after { content:'✓'; position:absolute; top:.1rem; right:.2rem; font-size:.6rem; } .polish-checklist li.is-skipped { border-style:dashed; color:var(--muted); } .polish-checklist li.is-skipped::after { content:'—'; position:absolute; top:.1rem; right:.2rem; font-size:.6rem; } .double-capture { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; width:100%; min-height:12rem; padding:1.4rem; border:2px dashed var(--border); border-radius:13px; background:var(--bg); color:var(--text); text-align:center; } .double-capture:focus { border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 5%,var(--bg)); } .double-capture kbd { display:block; padding:.35rem 1rem; border:1px solid var(--border); border-bottom-width:4px; border-radius:9px; background:var(--surface-raised); color:var(--cyan); font:900 2.2rem/1.35 'Lato',sans-serif; max-width:100%; overflow-wrap:anywhere; } .double-capture>span:last-child { color:var(--muted); font-size:.875rem; } .double-log { margin-top:1.5rem; } .double-log h3 { font-size:1.1rem; margin:0 0 .75rem; } .tool-table-scroll { width:100%; overflow:auto; border:1px solid var(--border-soft); border-radius:10px; } .tool-table { width:100%; border-collapse:collapse; font-size:.875rem; text-align:left; } .tool-table caption { padding:.8rem 1rem; text-align:left; color:var(--muted); background:var(--surface-soft); } .tool-table th,.tool-table td { padding:.7rem .9rem; border-top:1px solid var(--border-soft); overflow-wrap:anywhere; } .tool-table th { color:var(--muted); font-weight:700; } .tool-table td:last-child { font-variant-numeric:tabular-nums; white-space:nowrap; } .tool-table tr.is-fast td { color:var(--purple); font-weight:700; } :root[data-contrast='high'] .tool-card,:root[data-contrast='high'] .tool-result,:root[data-contrast='high'] .double-capture:focus { background:#000; box-shadow:none; } :root[data-contrast='high'] .typing-char.is-wrong { color:#000!important; background-color:#ffff00!important; text-decoration-color:#000; } :root[data-contrast='high'] .typing-char.is-current { background:#000; outline:1px dashed #ffff00; } :root[data-contrast='high'] .typing-char.is-correct { text-decoration:underline; } :root[data-contrast='high'] .tool-page :disabled { opacity:1; border-style:dashed; } @media (max-width:700px) { .tool-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .polish-workspace { grid-template-columns:minmax(0,1fr); } .polish-prompt { min-height:0; padding:1rem; } .polish-checklist { grid-template-columns:repeat(6,minmax(0,1fr)); } .tool-toolbar { align-items:flex-start; } .tool-controls { width:100%; } .typing-reference { max-height:12rem; } } @media (max-width:420px) { .tool-actions { align-items:stretch; flex-direction:column; } .tool-actions button { width:100%; white-space:normal; } .tool-metrics>div { padding:.8rem; } .tool-table th,.tool-table td { padding:.6rem; } } @media (prefers-reduced-motion:reduce) { .tool-page * { scroll-behavior:auto; transition:none; } }