:root{color-scheme:dark;--ink:#f9f7ff;--muted:#c9c2e2;--purple:#7559d9;--pink:#ff6fa9;--cyan:#53d8ff;--panel:rgba(25,20,58,.72)}
*{box-sizing:border-box}
html{min-height:100%;background:#09071b}
body{margin:0;min-height:100vh;font-family:Inter,"Noto Sans KR","Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 8%,#4b2a8d 0,transparent 34%),radial-gradient(circle at 90% 40%,#143e70 0,transparent 35%),linear-gradient(160deg,#0a081d,#171035 60%,#09071b);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(115deg,transparent 47%,rgba(255,255,255,.08) 49%,transparent 51%);background-size:80px 80px}
.app{width:min(100%,520px);margin:auto;padding:max(26px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));text-align:center}
header{margin-bottom:18px}.eyebrow{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.23);border-radius:99px;font-size:.67rem;letter-spacing:.17em;color:#ddd5ff;background:rgba(255,255,255,.05)}
h1{margin:13px 0 6px;font-size:clamp(2.4rem,12vw,4rem);line-height:.79;letter-spacing:-.06em;font-weight:900}h1 span{color:transparent;background:linear-gradient(90deg,#ff719f,#ffbf5c,#74e097,#5ad5ff,#a586ff);background-clip:text;-webkit-background-clip:text}header p{margin:14px 0;color:var(--muted);font-size:.9rem}
.compass-card{padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:0 24px 70px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.halo{width:min(74vw,340px);aspect-ratio:1;margin:auto;padding:10px;border-radius:50%;background:conic-gradient(from 30deg,#ff719f,#ffc95c,#6fdf8e,#59d8ff,#9674ff,#ff719f);box-shadow:0 0 38px rgba(151,116,255,.25);transition:filter .25s,box-shadow .25s}.halo.aligned{filter:saturate(1.35);box-shadow:0 0 32px #ff72a966,0 0 65px #67dbff55;animation:pulse 1.2s ease-in-out infinite alternate}
.compass{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#251b51 0 18%,#171237 19% 58%,#0c0920 59%);border:2px solid rgba(255,255,255,.75);box-shadow:inset 0 0 38px #0008}
.ticks{position:absolute;inset:7px;border-radius:50%;background:repeating-conic-gradient(from -1deg,rgba(255,255,255,.65) 0 1deg,transparent 1deg 10deg);mask:radial-gradient(circle,transparent 0 86%,#000 87%);-webkit-mask:radial-gradient(circle,transparent 0 86%,#000 87%)}
.cardinal{position:absolute;font-weight:800;color:#beb5dd}.n{top:18px;left:50%;transform:translateX(-50%);color:#ff759d}.s{bottom:18px;left:50%;transform:translateX(-50%)}.e{right:20px;top:50%;transform:translateY(-50%)}.w{left:20px;top:50%;transform:translateY(-50%)}
.target-arrow{position:absolute;inset:12%;transition:transform .13s linear;will-change:transform}.arrow-head{position:absolute;top:0;left:50%;width:0;height:0;transform:translateX(-50%);border-left:23px solid transparent;border-right:23px solid transparent;border-bottom:0;border-top:95px solid var(--pink);filter:drop-shadow(0 0 8px #ff6fa9)}.arrow-tail{position:absolute;bottom:7px;left:50%;width:22px;height:43%;transform:translateX(-50%);clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(#745dd5,#4d3d9d)}
.hub{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:46px;height:46px;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;background:#6f54cf;font-weight:900;box-shadow:0 4px 14px #0009}
.alignment{height:34px;margin-top:14px;font-weight:700;color:#ded8f3}.alignment.found{color:#fff;text-shadow:0 0 12px #ff75a5}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.readout div{min-width:0;padding:12px 4px;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:var(--panel)}.readout small,.readout span{display:block;color:var(--muted);font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.readout strong{display:block;margin:4px 0;font-size:1.25rem}
.start{width:100%;border:0;border-radius:17px;padding:16px;color:white;background:linear-gradient(100deg,#ee5f9d,#805bdd);font:inherit;font-weight:800;box-shadow:0 12px 32px #6f44bf55;cursor:pointer}.start:disabled{opacity:.65}.status{min-height:2.7em;margin:11px 5px;color:var(--muted);font-size:.78rem;line-height:1.5}
details{margin-top:12px;padding:13px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;text-align:left;background:rgba(10,8,30,.45)}summary{cursor:pointer;font-size:.82rem}details label{display:flex;justify-content:space-between;margin:15px 0 6px;color:var(--muted);font-size:.78rem}input[type=range]{width:100%;accent-color:var(--pink)}
footer{margin-top:24px;color:#918ba7;font-size:.68rem;line-height:1.55}footer a{color:#bcaaff;text-decoration:none}
@keyframes pulse{to{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}