.diagram-wrap{max-width:440px;margin:.4rem auto 1rem;overflow:hidden;border-radius:12px}.rule{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#eef5f5;color:#1a2744;border-left:4px solid var(--accent);padding:.55rem .85rem;margin:.55rem 0;font-size:.98rem}.grid-svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:12px}.grid-svg .minor{stroke:#ece7dc;stroke-width:1}.grid-svg .axis{stroke:#8a93a6;stroke-width:1.6}.grid-svg .poly{fill:#2c7a7b2e;stroke:#1a365d;stroke-width:2.4}.grid-svg .poly.image{fill:#b9282824;stroke:#b92828}.grid-svg .lab{font-size:12px;font-weight:700;fill:#1a365d}.grid-svg .lab.image{fill:#b92828}.note{color:var(--dim);font-size:.95rem}.const-svg,.diagram{width:100%;height:auto;display:block;touch-action:manipulation;background:#fff;border:1px solid var(--line);border-radius:12px}.const-svg .ink{stroke:var(--navy);fill:none;stroke-width:2.6;stroke-linecap:round}.const-svg .thin{stroke:var(--navy);fill:none;stroke-width:1.6}.const-svg .arc{stroke:var(--teal);fill:none;stroke-width:2}.const-svg .arc-bad{stroke:#b3372c;fill:none;stroke-width:2}.const-svg .dash{stroke-dasharray:5 4}.const-svg .pt{fill:var(--navy)}.const-svg .pt-teal{fill:var(--teal)}.const-svg text{font-size:13px;font-weight:700;fill:var(--navy);font-family:inherit}.const-svg .tick{fill:#b92828;font-size:15px}.id-grid{display:grid;gap:.55rem;margin:.7rem 0}.id-opt{text-align:left}.id-opt.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--panel2))}.id-opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--panel2))}.pair-btns{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1rem}.letter{font-weight:800;font-size:1.6rem;width:2.6rem;height:2.6rem;padding:0;border-radius:10px;border:2px solid var(--navy)}.letter.on{background:var(--teal);color:#fff;border-color:var(--teal)}.diagram line{stroke:var(--navy);stroke-width:5;stroke-linecap:round}.diagram .road{stroke-width:6}.diagram .bike{stroke-width:4}.diagram circle{fill:var(--navy)}.diagram .ang{font-weight:800;font-size:18px;fill:#b92828;pointer-events:none}.diagram .pt{font-size:14px;fill:var(--navy);font-weight:700;pointer-events:none}.wedge{fill:transparent;cursor:pointer}.wedge.lit{fill:#2c7a7b59}.city-hit{fill:transparent;cursor:pointer}.city-hit.lit{fill:#2c7a7b66}.reveal-row{display:grid;grid-template-columns:1.2fr .9fr;gap:.5rem;border:1px solid var(--line);border-radius:10px;padding:.7rem;margin:.45rem 0;background:var(--panel2)}.reveal-row .why{color:var(--teal);font-weight:700;font-size:.9rem}@media(max-width:540px){.reveal-row{grid-template-columns:1fr}}