.App{position:relative;width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;box-sizing:border-box;overflow-x:hidden;--controls-offset: 0px;padding:calc(max(12px,env(safe-area-inset-top)) + var(--controls-offset)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at center,#141414,#0b0b0b 65%,#050505)}.container{flex:1;display:flex;justify-content:center;align-items:center;width:100%}.compass-wrapper{position:relative;width:min(68vmin,88vw,86dvh);height:min(68vmin,88vw,86dvh);padding-inline:clamp(14px,2.5vmin,26px);padding-block:clamp(16px,3.25vmin,28px);display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin:0 auto}.compass{width:100%;height:auto;max-width:400px;display:block;margin:0 auto;pointer-events:none;z-index:1}.note{position:absolute;left:50%;top:50%;transform-origin:center;width:clamp(30px,5.5vmin,52px);height:clamp(30px,5.5vmin,52px);background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#ffffffd9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:600;line-height:1;padding-top:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2;box-shadow:inset 0 1px #ffffff1f,0 2px 8px #00000080;transition:transform .25s ease,background .25s ease}.controls{position:fixed;top:max(env(safe-area-inset-top),12px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,2.5vw,.8rem);padding:clamp(.6rem,2.5vw,1rem) clamp(.8rem,4vw,1.5rem);border-radius:1rem;background:#111;box-shadow:0 8px 24px #0009,0 0 0 1px #ffffff0d;color:#fff;z-index:10}.controls .row{display:flex;align-items:center;gap:1rem}select{background:#111;color:#fff;border:1px solid #444;border-radius:.5rem;padding:.4rem .6rem;font-size:1rem;cursor:pointer;outline:none}.scale-display{font-weight:500;color:#ddd;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (max-width: 420px),(max-height: 700px){.controls{padding:.7rem 1rem;font-size:.9rem}.controls select{font-size:.9rem}}@media (max-height: 640px){.compass-wrapper{width:min(60vmin,84vw,82dvh);height:min(60vmin,84vw,82dvh)}.note{width:clamp(24px,4.6vmin,46px);height:clamp(24px,4.6vmin,46px)}.controls{transform:translate(-50%) scale(.92)}}html,body{margin:0;padding:0;width:100%;min-height:100dvh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#fff;background-color:#101010;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100dvh}a{color:inherit;text-decoration:none}button,select,input{font:inherit}*{box-sizing:border-box}