.fov-tool{padding-bottom:24px}.fov-tool .intro>p{max-width:680px;line-height:1.7}.fov-workbench{border:1px solid var(--line);background:var(--surface);border-radius:16px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);display:grid;overflow:hidden}.fov-controls,.fov-results{min-width:0;padding:28px}.fov-controls{border-right:1px solid var(--line)}.fov-results{background:var(--surface-soft)}.fov-workbench h2{font-size:18px;font-weight:600;line-height:1.4}.fov-heading{align-items:center;gap:12px;margin-bottom:24px;display:flex}.fov-heading svg{color:var(--tool-accent)}.fov-field{min-width:0}.fov-field label{margin-bottom:8px;font-size:14px;font-weight:600;display:block}.fov-field input,.fov-field select{border:1px solid var(--line);width:100%;min-width:0;min-height:48px;color:var(--text);background:var(--surface-soft);border-radius:8px;padding:10px 12px;font-size:16px}.fov-field input{font-family:var(--font-mono), monospace}.fov-tool :is(input,select,button,a,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px}.fov-field input[aria-invalid=true]{border-color:var(--error-line);background:var(--error-soft)}.fov-hint{color:var(--text-muted);margin-top:8px;font-size:13px;line-height:1.65}.fov-spaced{margin-top:20px}.fov-dimensions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px;display:grid}.fov-presets,.fov-actions,.fov-examples{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.fov-button,.fov-presets button{border:1px solid var(--line);background:var(--surface);min-width:44px;min-height:44px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:9px 12px;font-size:14px;line-height:1.5;display:inline-flex}.fov-button svg{flex-shrink:0}.fov-button:hover:not(:disabled),.fov-presets button:hover{background:var(--surface-soft);border-color:var(--tool-accent)}.fov-button:disabled{opacity:.5;cursor:not-allowed}.fov-presets button[aria-pressed=true]{color:var(--tool-accent);background:var(--tool-soft);border-color:var(--tool-accent);font-weight:700}.fov-values{gap:0;margin-top:12px;display:grid}.fov-values>div{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:12px 0;display:flex}.fov-values dt{color:var(--text-muted);font-size:14px}.fov-values dd{overflow-wrap:anywhere;min-width:0;font-family:var(--font-mono), monospace;color:var(--tool-accent);-webkit-user-select:all;user-select:all;font-size:clamp(22px,2.8vw,28px)}.fov-values small{font-size:18px}.fov-values .fov-ratio dd{color:var(--text);font-size:16px}.fov-diagram{margin-top:16px}.fov-diagram svg{width:100%;max-width:360px;margin:0 auto;display:block}.fov-sector-horizontal{fill:var(--tool-soft);stroke:var(--tool-accent);stroke-width:2px}.fov-sector-vertical{fill:none;stroke:var(--text);stroke-width:2px;stroke-dasharray:5 5}.fov-centerline{stroke:var(--text-muted);stroke-width:1px;stroke-dasharray:2 4}.fov-eye{fill:var(--text)}.fov-diagram figcaption{color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:16px;font-size:13px;display:flex}.fov-diagram figcaption span{align-items:center;gap:8px;display:inline-flex}.fov-diagram figcaption span:before{content:"";border-top:2px solid var(--tool-accent);width:24px}.fov-diagram figcaption .fov-key-vertical:before{border-top:2px dashed var(--text)}.fov-copy{width:100%;min-height:48px;color:var(--on-tool);background:var(--tool-accent);border-radius:8px;justify-content:center;align-items:center;gap:10px;margin-top:20px;padding:12px;font-size:14px;font-weight:600;display:flex}.fov-copy:hover{background:var(--tool-accent-hover)}.fov-empty{color:var(--text-muted);padding:48px 0;font-size:15px;line-height:1.8}.fov-error{border:1px solid var(--error-line);color:var(--error-text);background:var(--error-soft);border-radius:8px;margin-top:16px;padding:12px;font-size:14px;line-height:1.6}.fov-notice{min-height:24px;color:var(--text-muted);margin-top:12px;font-size:13px;line-height:1.6}.fov-examples{align-items:center}.fov-examples>span{color:var(--text-muted);font-size:14px}@media (max-width:760px){.fov-workbench{grid-template-columns:1fr}.fov-controls{border-right:0;border-bottom:1px solid var(--line)}.fov-controls,.fov-results{padding:24px}}@media (max-width:420px){.fov-controls,.fov-results{padding:20px}.fov-dimensions{grid-template-columns:1fr}}