:root{color-scheme:light;--bg:#f5f1e7;--bg-soft:#ece7da;--panel:rgba(255,255,255,.72);--panel-solid:#fbfaf5;--ink:#0b2a22;--muted:#52665f;--line:rgba(12,63,50,.18);--line-strong:rgba(12,63,50,.34);--emerald:#0f6a54;--emerald-bright:#16876a;--gold:#b98a28;--gold-bright:#d6ab4d;--shadow:0 24px 70px rgba(21,46,38,.12);--danger:#9c3f34;--success:#17735a;--radius:28px;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root[data-theme="dark"],:root[data-theme-mode="dark"]{color-scheme:dark;--bg:#061914;--bg-soft:#0a221b;--panel:rgba(13,43,34,.74);--panel-solid:#0d2b22;--ink:#eff5e9;--muted:#abc0b7;--line:rgba(152,201,179,.18);--line-strong:rgba(182,219,201,.34);--emerald:#5dc5a3;--emerald-bright:#7addba;--gold:#d7ad50;--gold-bright:#f0cc73;--shadow:0 28px 80px rgba(0,0,0,.34);--danger:#f19b8c;--success:#78d7b7}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#061914;--bg-soft:#0a221b;--panel:rgba(13,43,34,.74);--panel-solid:#0d2b22;--ink:#eff5e9;--muted:#abc0b7;--line:rgba(152,201,179,.18);--line-strong:rgba(182,219,201,.34);--emerald:#5dc5a3;--emerald-bright:#7addba;--gold:#d7ad50;--gold-bright:#f0cc73;--shadow:0 28px 80px rgba(0,0,0,.34)}}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 39%),linear-gradient(140deg,var(--bg),var(--bg-soft));color:var(--ink);font-family:var(--font);line-height:1.5;min-height:100vh}.qibla-app{width:min(1260px,calc(100% - 40px));margin:0 auto}.app-header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:800;letter-spacing:.02em}.brand-mark{color:var(--gold);font-size:14px}.header-actions,.locale-links,.theme-switcher{display:flex;align-items:center}.header-actions{gap:12px}.locale-links,.theme-switcher{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px}.locale-links a,.theme-switcher button{border:0;background:transparent;color:var(--muted);min-width:36px;height:32px;display:grid;place-items:center;border-radius:999px;font:inherit;font-size:12px;text-decoration:none;cursor:pointer}.locale-links a[aria-current="page"],.theme-switcher button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}main{padding:72px 0 32px}.hero{max-width:780px;margin:0 auto 48px;text-align:center}.eyebrow{margin:0 0 12px;color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.22em}.hero h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.055em;line-height:.98;margin:0}.hero>p:last-child{max-width:670px;margin:22px auto 0;color:var(--muted);font-size:18px}.finder-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);gap:20px;align-items:stretch}.compass-card,.controls-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.compass-card{min-height:680px;padding:28px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--emerald) 15%,transparent),transparent 47%),var(--panel)}.location-pill{display:flex;align-items:center;gap:8px;min-height:38px;max-width:100%;padding:8px 14px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:13px}.location-pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compass-wrap{width:min(440px,88vw);aspect-ratio:1;margin:18px auto 12px}.compass{position:relative;width:100%;height:100%;border:1px solid var(--line-strong);border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--line-strong) 0 1deg,transparent 1deg 10deg),radial-gradient(circle at center,transparent 0 66%,color-mix(in srgb,var(--bg) 70%,transparent) 66% 69%,transparent 69%);box-shadow:inset 0 0 0 14px color-mix(in srgb,var(--bg) 45%,transparent),inset 0 0 60px color-mix(in srgb,var(--emerald) 10%,transparent);transition:transform .18s ease-out}.compass::before,.compass::after{content:"";position:absolute;inset:10%;border:1px solid var(--line);border-radius:50%}.compass::after{inset:48%;background:var(--ink);border:5px solid var(--panel-solid);z-index:5}.tick-ring{position:absolute;inset:7%;border:1px dashed var(--line);border-radius:50%}.cardinal{position:absolute;font-size:13px;font-weight:900;color:var(--muted);z-index:2}.north{top:6%;left:50%;transform:translateX(-50%);color:var(--gold)}.south{bottom:6%;left:50%;transform:translateX(-50%)}.east{right:7%;top:50%;transform:translateY(-50%)}.west{left:7%;top:50%;transform:translateY(-50%)}.qibla-arrow{position:absolute;z-index:4;left:50%;top:9%;height:41%;width:42px;transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);transition:transform .24s cubic-bezier(.2,.8,.2,1)}.arrow-line{position:absolute;left:50%;top:25px;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(var(--gold-bright),var(--gold));box-shadow:0 0 18px color-mix(in srgb,var(--gold) 70%,transparent)}.arrow-tip{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:30px;color:var(--gold-bright);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 50%,transparent))}.kaaba{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:8px;background:#101712;border:1px solid #9f7c2f;display:grid;place-items:center}.kaaba span{display:block;width:100%;height:6px;background:#b58d34}.alignment{text-align:center;min-height:58px}.alignment strong{display:block;font-size:23px;letter-spacing:-.02em}.alignment span{display:block;color:var(--muted);font-size:13px;margin-top:3px}.alignment.aligned strong{color:var(--success)}button,input{font:inherit}.primary-button,.field-row button,.coordinates button{border:1px solid color-mix(in srgb,var(--emerald) 55%,var(--line));background:var(--ink);color:var(--bg);border-radius:14px;min-height:48px;padding:0 18px;font-weight:800;cursor:pointer;transition:transform .16s,background .16s}.primary-button:hover,.field-row button:hover,.coordinates button:hover{transform:translateY(-1px);background:var(--emerald)}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 60%,transparent);outline-offset:3px}.compass-button{margin-top:15px;display:none;align-items:center;gap:9px}.compass-button.is-supported{display:flex}.sensor-note{max-width:430px;color:var(--muted);font-size:12px;text-align:center;margin:12px 0 0}.controls-card{padding:30px}.controls-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.controls-heading h2{margin:0;font-size:28px;letter-spacing:-.035em}.privacy-badge{flex:none;border:1px solid var(--line);border-radius:99px;padding:6px 9px;color:var(--success);font-size:11px;font-weight:800}.location-button{width:100%;margin-top:24px}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:19px 0}.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}.field-group label,.coordinate-grid span{display:block;font-size:12px;font-weight:800;margin-bottom:7px}.field-row{display:grid;grid-template-columns:1fr auto;gap:8px}.field-row input,.coordinate-grid input{width:100%;min-height:48px;border:1px solid var(--line-strong);border-radius:13px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--ink);padding:0 13px}.field-row button,.coordinates button{min-height:48px}.field-help{margin:7px 0 0;color:var(--muted);font-size:11px}.coordinates{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0;padding:13px 0}.coordinates summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--muted)}.coordinates form{margin-top:14px}.coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coordinates button{width:100%;margin-top:9px}.results{display:grid;grid-template-columns:1fr 1fr;gap:10px}.results>div{min-height:105px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 52%,transparent);border-radius:16px;padding:13px}.results>div:first-child{grid-column:1/-1}.results span,.results small{display:block;color:var(--muted);font-size:11px}.results strong{display:block;margin:3px 0;font-size:26px;letter-spacing:-.03em}.status-box{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:14px;margin-top:18px;padding:12px;color:var(--muted);font-size:12px}.status-box>span{width:20px;height:20px;flex:none;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-weight:900}.status-box p{margin:1px 0 0}.status-box.error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}.status-box.success{color:var(--success)}.guidance{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.guidance article{display:flex;gap:14px;border:1px solid var(--line);border-radius:20px;padding:20px;background:color-mix(in srgb,var(--panel) 80%,transparent)}.guidance article>span{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold);font-size:12px;font-weight:900}.guidance h2,.method-note h2{font-size:15px;margin:1px 0 4px}.guidance p,.method-note p{margin:0;color:var(--muted);font-size:12px}.method-note{max-width:820px;margin:52px auto;padding:0 20px;text-align:center}.method-note h2{font-size:19px}.method-note p{margin-top:8px;line-height:1.75}footer{min-height:90px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}footer a{font-weight:800;text-decoration:none}.noscript{margin:20px;text-align:center}.is-loading{opacity:.65;pointer-events:none}
[dir="rtl"] .hero h1{letter-spacing:-.02em}[dir="rtl"] .eyebrow{letter-spacing:.08em}[dir="rtl"] .brand-mark{order:2}
@media(max-width:900px){.qibla-app{width:min(100% - 28px,680px)}.app-header{height:70px}.brand span:last-child{display:none}main{padding-top:46px}.hero{margin-bottom:30px}.finder-grid{grid-template-columns:1fr}.compass-card{min-height:0}.controls-card{order:-1}.guidance{grid-template-columns:1fr}.method-note{margin-top:38px}}
@media(max-width:560px){.qibla-app{width:100%}.app-header,main,footer{padding-left:16px;padding-right:16px}.app-header{border-bottom:0}.header-actions{gap:6px}.locale-links a,.theme-switcher button{min-width:31px}.hero{text-align:start}.hero h1{font-size:42px}.hero>p:last-child{font-size:15px;margin-top:15px}.finder-grid{gap:12px}.controls-card,.compass-card{border-radius:22px;padding:20px}.controls-heading{display:block}.privacy-badge{display:inline-block;margin-top:10px}.field-row{grid-template-columns:1fr}.compass-card{padding-top:18px}.compass-wrap{width:min(330px,82vw)}.results{grid-template-columns:1fr 1fr}.results>div{min-height:96px}.guidance{margin:12px 0}.method-note{padding:0 4px;text-align:start}footer{display:block;padding-top:24px;padding-bottom:24px}footer span{display:block;margin-top:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.compass,.qibla-arrow,.primary-button{transition:none}}

/* Simple-first finder flow: one primary action, with technical controls on demand. */
.location-lead{max-width:360px;margin:8px 0 0;color:var(--muted);font-size:13px}.location-button{min-height:58px;font-size:16px}.manual-fallback{margin:18px 0;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg) 42%,transparent);padding:0 14px}.manual-fallback>summary{cursor:pointer;padding:15px 2px;color:var(--muted);font-size:12px;font-weight:800}.manual-fallback[open]>summary{color:var(--ink);border-bottom:1px solid var(--line)}.manual-fallback .divider{margin:15px 0}.manual-fallback .coordinates{border-bottom:0;margin-bottom:4px}.plain-answer{display:none;margin:18px 0 12px;padding:20px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--emerald) 9%,transparent))}.plain-answer span{display:block;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.18em}.plain-answer strong{display:block;margin:5px 0 4px;font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:-.04em}.plain-answer p{margin:0;color:var(--muted);font-size:13px}.qibla-app[data-state="ready"] .plain-answer{display:block}.qibla-app[data-state="empty"] .results{display:none}.results>div:first-child{display:none}.results>div:nth-child(2),.results>div:nth-child(3){min-height:88px}.status-box{font-size:13px;line-height:1.45}.status-box.error{background:color-mix(in srgb,var(--danger) 7%,transparent)}
@media(max-width:560px){.location-button{min-height:60px}.plain-answer{padding:18px}.plain-answer strong{font-size:31px}.qibla-app[data-state="empty"] .compass-card{margin-top:0}.manual-fallback{margin-bottom:12px}}
.live-readout{display:none;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}.live-readout>div{padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 45%,transparent)}.live-readout span{font-size:9px;letter-spacing:.04em;color:var(--muted)}.live-readout strong{font-size:17px;letter-spacing:-.02em}.qibla-app[data-live="true"] .live-readout{display:grid}.plain-answer .compass-button{width:100%;justify-content:center;margin-top:16px}.qibla-app[data-live="true"] .plain-answer .compass-button{display:none}@media(max-width:560px){.live-readout strong{font-size:15px}.plain-answer .compass-button.is-supported{display:flex}}
.qibla-app[data-state="empty"] .manual-fallback:not([open]){margin-bottom:12px}.qibla-app[data-state="empty"] .status-box.error{margin-top:12px}.qibla-app[data-state="ready"] .controls-heading,.qibla-app[data-state="ready"] .location-button,.qibla-app[data-state="ready"] .manual-fallback{display:none}@media(max-width:560px){.qibla-app[data-state="ready"] .plain-answer{margin-top:0}}
.results,.live-readout,.plain-answer>span,.plain-answer>p,.guidance,.method-note{display:none!important}.plain-answer{border:0;background:transparent;padding:8px 0;text-align:center}.plain-answer strong{font-size:clamp(30px,7vw,48px)}.qibla-app[data-compass="requested"] .plain-answer .compass-button{display:none}.compass-wrap{margin-top:66px;overflow:visible}.compass{overflow:visible}.qibla-arrow{top:-7%;height:57%}.qibla-arrow .kaaba{position:absolute;top:-12px;left:50%;width:42px;height:42px;z-index:8;display:grid;place-items:center;transform:translateX(-50%)}.kaaba-label{position:absolute;top:-25px;left:50%;transform:translateX(-50%);color:var(--gold-bright);font-size:10px;font-weight:900;white-space:nowrap}.arrow-tip{top:42px;font-size:22px}.arrow-line{top:62px;bottom:0;width:4px}.user-marker{position:absolute;left:50%;top:50%;z-index:9;width:38px;height:38px;transform:translate(-50%,-50%);border:5px solid var(--panel-solid);border-radius:50%;background:var(--emerald-bright);box-shadow:0 0 0 1px var(--line-strong),0 0 22px color-mix(in srgb,var(--emerald) 40%,transparent)}.user-marker span{position:absolute;left:50%;top:-12px;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--emerald-bright)}.qibla-app[data-live="true"] .hero,.qibla-app[data-live="true"] .controls-card{display:none}.qibla-app[data-live="true"] .finder-grid{grid-template-columns:minmax(0,760px);justify-content:center}.qibla-app[data-live="true"] main{padding-top:30px}.qibla-app[data-live="true"] .compass-card{min-height:min(760px,calc(100vh - 130px))}.qibla-app[data-live="true"] .sensor-note{display:none}@media(max-width:560px){.compass-wrap{width:min(250px,68vw);margin-top:62px}.qibla-app[data-live="true"] .compass-card{min-height:calc(100vh - 105px);justify-content:center}.qibla-app[data-live="true"] .location-pill{position:absolute;top:18px}.qibla-app[data-live="true"] .alignment{margin-top:18px}}
.privacy-explainer{display:flex;gap:12px;align-items:flex-start;margin:22px 0 14px;padding:15px;border:1px solid color-mix(in srgb,var(--success) 42%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--success) 7%,transparent);color:var(--ink)}.privacy-explainer p{margin:0;font-size:13px;line-height:1.55}.privacy-icon{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--success);font-weight:900}.permission-hint{margin:10px 4px 0;text-align:center;color:var(--muted);font-size:11px;line-height:1.45}.controls-card .location-button{margin-top:0}.live-privacy{display:none;align-items:center;gap:7px;margin-bottom:10px;color:var(--success);font-size:11px;font-weight:800}.live-privacy>span:first-child{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}.qibla-app[data-started="true"] .hero,.qibla-app[data-started="true"] .controls-card{display:none}.qibla-app[data-started="true"] .finder-grid{grid-template-columns:minmax(0,760px);justify-content:center}.qibla-app[data-started="true"] main{padding-top:30px}.qibla-app[data-started="true"] .compass-card{min-height:min(760px,calc(100vh - 130px))}.qibla-app[data-started="true"] .live-privacy{display:flex}.qibla-app[data-started="true"] .sensor-note{display:none}@media(max-width:560px){.privacy-explainer{margin-top:18px;padding:14px}.qibla-app[data-started="true"] .compass-card{min-height:calc(100vh - 105px);justify-content:center}.qibla-app[data-started="true"] .location-pill{position:absolute;top:50px}.qibla-app[data-started="true"] .live-privacy{position:absolute;top:18px}.qibla-app[data-started="true"] .alignment{margin-top:18px}}
.qibla-app[data-state="empty"] .finder-grid{grid-template-columns:minmax(0,560px);justify-content:center}.qibla-app[data-state="empty"] .compass-card,.qibla-app[data-state="empty"] .privacy-badge,.qibla-app[data-state="empty"] .status-box:not(.error){display:none}
.qibla-app[data-started="true"]:not([data-live="true"]) .qibla-arrow{opacity:0}.qibla-arrow{transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .38s ease}.qibla-arrow.is-priming{transition:none!important}
@media(prefers-reduced-motion:reduce){.qibla-arrow{transition:none}}