*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#0b1026;color:#e6eefb}
main{max-width:800px;margin:0 auto;padding:16px}
main.rotated{transform:rotate(180deg);transform-origin:center center}
header{padding:12px 0 20px}
.subtitle{opacity:.8}
.card{background:#11193a;border:1px solid #24306a;border-radius:12px;padding:12px;margin:12px 0}
.banner{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px;margin:12px 0}
.banner.hidden{display:none}
.banner .banner-text{margin-bottom:8px}
.row{display:flex;gap:12px;align-items:center;margin:8px 0}
button{background:#1e3a8a;color:#fff;border:none;border-radius:8px;padding:10px 14px;font-size:16px}
button:disabled{opacity:.6}
.secondary{background:#334155}
select,input{background:#0f1533;color:#dfe8ff;border:1px solid #2a3875;border-radius:8px;padding:8px}
.hint{font-size:13px;opacity:.8}
.status{margin-top:6px;font-size:14px;color:#9ad5ff}
.guidance{display:flex;gap:18px;font-size:18px;flex-wrap:wrap}
.angles{display:flex;gap:18px;font-size:16px;flex-wrap:wrap}
.compass-container{display:flex;flex-direction:column;align-items:center;margin:16px 0}
.compass-status{margin-top:8px;font-size:24px;font-weight:bold}
.nudges-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;max-width:240px;margin:12px auto}
.nudge-btn{padding:12px 8px;font-size:20px;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nudge-btn span{font-size:11px;margin-top:4px}
pre{white-space:pre-wrap;background:#0f1533;border:1px solid #24306a;border-radius:8px;padding:10px;max-height:200px;overflow:auto}