.dof{--card:#141414;--gold2:#fde68a;--red:#e55a4e;--grn:#3aaa78;--line:#f5d0642e;background:var(--bg);border:1px solid var(--line);width:100%;color:var(--text);border-radius:14px;padding:24px;font-family:Inter,sans-serif}.dof *{box-sizing:border-box}.dof h1{letter-spacing:.5px;color:var(--gold2);margin:0;font-family:Cinzel,serif;font-size:18px}.dof .head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;margin-bottom:20px;padding-bottom:12px;display:flex}.dof .sub{color:var(--muted);font-family:Cormorant Garamond,serif;font-size:15px;font-style:italic}.dof .row2{grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:18px;display:grid}.dof label{letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:11px;display:block}.dof select{background:var(--card);width:100%;color:var(--text);border:1px solid #f5d06440;border-radius:8px;height:38px;padding:0 10px;font-family:Inter,sans-serif;font-size:14px}.dof select:focus{border-color:var(--gold);outline:none}.dof .field{margin-bottom:16px}.dof .ctl{align-items:center;gap:12px;display:flex}.dof input[type=range]{accent-color:var(--gold);cursor:pointer;flex:1;height:24px}.dof .spin{background:var(--card);border:1px solid #f5d06440;border-radius:8px;align-items:stretch;height:38px;display:inline-flex;overflow:hidden}.dof .spin:focus-within{border-color:var(--gold)}.dof .spin input[type=number]{appearance:textfield;width:64px;height:100%;color:var(--text);text-align:right;background:0 0;border:none;padding:0 10px;font-family:Inter,sans-serif;font-size:14px}.dof .spin input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.dof .spin input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.dof .spin input[type=number]:focus{outline:none}.dof .spin .btns{border-left:1px solid #f5d06424;flex-direction:column;width:24px;display:flex}.dof .spin .btns button{color:var(--gold2);cursor:pointer;background:0 0;border:none;flex:1;padding:0;font-family:Inter,sans-serif;font-size:8px;line-height:1}.dof .spin .btns button:hover{background:#f5d06426}.dof .spin .btns button:first-child{border-bottom:1px solid #f5d0641a}.dof .spin .btns button:active{background:var(--gold);color:#0c0c0c}.dof .unit-lbl{color:var(--muted);white-space:nowrap;font-size:13px}.dof .presets{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.dof .chip{color:var(--gold2);cursor:pointer;background:0 0;border:1px solid #f5d06447;border-radius:7px;padding:5px 10px;font-family:Inter,sans-serif;font-size:12px;transition:background .15s}.dof .chip:hover{background:#f5d0641f}.dof .chip.on{background:var(--gold);color:#0c0c0c;border-color:var(--gold)}.dof .stats{grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 10px;display:grid}@media (width<=500px){.dof .stats{grid-template-columns:1fr 1fr}}.dof .stat{background:var(--card);text-align:center;border:1px solid #f5d0641a;border-radius:10px;padding:14px 10px}.dof .stat .l{letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-size:11px}.dof .stat .n{color:var(--gold2);white-space:nowrap;text-overflow:ellipsis;margin-top:6px;font-family:Cinzel,serif;font-size:26px;overflow:hidden}.dof .stat-hero{background:#f5d0640f;border-color:#f5d06473;box-shadow:0 0 18px #f5d06414}.dof .stat-hero .l{color:var(--gold);font-size:12px}.dof .stat-hero .n{color:var(--gold);font-size:34px}.dof .stat .n.near-c{color:var(--red)}.dof .stat .n.far-c{color:var(--grn)}.dof .stat .n.hyp-c{color:#f5d06473}.dof .sep{border:none;border-top:1px solid #ffffff0f;margin:18px 0}.dof .viz-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;font-size:10px}.dof #topview-svg{width:100%;height:auto;display:block}.dof .coc-row{grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:16px;display:grid}.dof .coc-card{background:var(--card);border:1px solid #ffffff0f;border-radius:8px;padding:10px 13px}.dof .coc-card .cl{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px;font-size:9.5px}.dof .coc-card .cv{font-size:.9rem}.dof .coc-card .cu{color:var(--muted);margin-left:.15em;font-size:.7rem}.dof .coc-near{color:var(--red)}.dof .coc-far{color:var(--grn)}.dof .coc-hyp{color:#f5d06480}.dof .hint{color:var(--muted);min-height:20px;margin-top:10px;font-family:Cormorant Garamond,serif;font-size:15px;font-style:italic}