.angle-tool{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:2rem;color:#172033}.angle-tool .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.angle-controls,.angle-board{min-width:0}.angle-tool .angle-degree-field{position:relative}.angle-tool #angle-degrees{font-size:2.25rem;font-variant-numeric:tabular-nums;padding:.65rem 2.5rem .65rem 1rem;border-radius:.65rem}.angle-degree-field>span{position:absolute;right:1rem;top:.75rem;font-size:1.75rem;color:#475569}.angle-tool #angle-slider{width:100%;accent-color:#1d4ed8;margin:1rem 0 .25rem;height:1.5rem;cursor:pointer}.angle-range-labels{display:flex;justify-content:space-between;font-size:.8rem;color:#475569;margin-bottom:1.5rem}.angle-tool select{padding:.65rem .8rem;font-size:1rem;border-radius:.65rem;margin-bottom:1rem}.angle-options{padding:0;border:0;margin:.5rem 0}.angle-tool .angle-options label{display:flex;align-items:center;gap:.6rem;margin:.75rem 0;font-weight:500;font-size:.95rem}.angle-options input{width:1.2rem;height:1.2rem;accent-color:#1d4ed8;flex-shrink:0}.angle-tool button{font:inherit;min-height:2.9rem;width:100%;border-radius:.65rem;padding:.65rem 1rem;font-weight:700;cursor:pointer}.angle-download{color:white;background:#1e3a8a;border:2px solid #1e3a8a}.angle-download:hover{background:#172554}.angle-reset{color:#334155;border:1px solid #94a3b8;background:transparent;margin-top:.65rem}.angle-tool button:disabled{opacity:.55;cursor:not-allowed}.angle-tool button:focus-visible,.angle-tool input:focus-visible,.angle-tool select:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.angle-board{padding:1.25rem;border:1px solid #cbd5e1;background:#f1f5f9;border-radius:.85rem;align-self:start}.angle-board-heading{display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.85rem;font-weight:700;color:#334155;margin-bottom:1rem}.angle-board-heading output{color:#1e3a8a;font-size:1.25rem;font-variant-numeric:tabular-nums}.angle-tool canvas{display:block;width:100%;height:auto;background:#fff;border:1px solid #cbd5e1;border-radius:.4rem;box-sizing:border-box}.angle-size{font-size:.8rem;text-align:end;color:#475569}.angle-tool #angle-hint{font-size:.9rem;line-height:1.8;color:#475569;margin:1rem 0 0}.angle-tool #angle-status{font-size:.9rem;color:#b91c1c;min-height:1.5rem;margin:.5rem 0}.angle-tool input[aria-invalid=true]{border-color:#b91c1c!important}
html[data-theme=dark] .angle-tool{color:#e2e8f0}html[data-theme=dark] .angle-board{background:#172033;border-color:#475569}html[data-theme=dark] .angle-board-heading,html[data-theme=dark] .angle-tool #angle-hint,html[data-theme=dark] .angle-range-labels,html[data-theme=dark] .angle-size,html[data-theme=dark] .angle-degree-field>span{color:#cbd5e1}html[data-theme=dark] .angle-board-heading output{color:#bfdbfe}html[data-theme=dark] .angle-reset{color:#e2e8f0;border-color:#64748b}html[data-theme=dark] .angle-tool #angle-status{color:#fca5a5}
@media(max-width:800px){.angle-tool{grid-template-columns:1fr;gap:1.5rem}.angle-board{order:-1}.angle-board{padding:.8rem}}