/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.contents{display:contents}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}:root{--b1:#454c57;--b2:#1d2127;--edge:#0d0f12;--edge2:#5b6470;--well:#101317;--ink:#eef1f4;--dim:#4b5560;--acc:#ff7a3d;--k1:#59616c;--k2:#2f353d;--k3:#14171b;--lcd-bg:#0b2a33;--lcd-hi:#14485a;--lcd-ink:#86f4ff;--lcd-glow:#27d3ee;--page:#0b0d10;--sh:#0009;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--b1:#fbfbfc;--b2:#cfd4da;--edge:#aeb5bd;--edge2:#fff;--well:#b9bfc7;--ink:#252b32;--dim:#9aa3ad;--acc:#e8541c;--k1:#fdfdfe;--k2:#dde1e6;--k3:#a5acb5;--lcd-bg:#aec8a8;--lcd-hi:#cfe2c8;--lcd-ink:#1b2e19;--lcd-glow:#ffffffb3;--page:#e9ecef;--sh:#28323c59}}*{box-sizing:border-box}html,body{background:radial-gradient(90% 60% at 50% 0,var(--page),var(--page));min-height:100%;margin:0}@supports (color:color-mix(in lab,red,red)){html,body{background:radial-gradient(90% 60% at 50% 0,color-mix(in srgb,var(--page) 85%,#fff 15%),var(--page))}}html,body{color:var(--ink);font-family:Chakra Petch,Segoe UI,system-ui,sans-serif}body{min-height:100dvh;padding:18px 14px}.unit{-webkit-user-select:none;user-select:none;background:linear-gradient(155deg,var(--b1),var(--b2));width:min(100%,420px);box-shadow:0 40px 60px -24px var(--sh),0 0 0 1px var(--edge),inset 0 1.5px 0 var(--edge2),inset 0 -3px 6px #00000047;border-radius:40px;margin:auto;padding:20px 20px 26px}.brand{letter-spacing:.14em;color:var(--dim);align-items:center;gap:8px;margin:0 0 14px 6px;font-size:13px;font-weight:700;display:flex}.brand img{object-fit:contain;width:22px;height:22px;display:block}.display-wrap{position:relative}.display-tools{z-index:2;flex-direction:column;gap:8px;display:flex;position:absolute;top:50%;left:0;transform:translateY(-50%)}.tool-button{border:1px solid var(--edge2);width:28px;height:28px;color:var(--dim);background:linear-gradient(var(--b1),var(--b2));box-shadow:0 3px 7px var(--sh);cursor:pointer;border-radius:9px;place-items:center;padding:5px;display:grid}.tool-button:hover,.tool-button:focus-visible{color:var(--acc);border-color:var(--acc)}.tool-button:focus-visible,.panel-close:focus-visible,.choice:focus-visible,.panel select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.tool-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.panel-backdrop{z-index:10;background:#0000009e;place-items:center;padding:20px;display:grid;position:fixed;top:0;right:0;bottom:0;left:0}.panel{border:1px solid var(--edge2);width:min(100%,360px);max-height:min(90dvh,600px);color:var(--ink);background:linear-gradient(155deg,var(--b1),var(--b2));border-radius:20px;padding:24px;position:relative;overflow:auto;box-shadow:0 24px 64px #0000008c}.panel h2{margin:0 36px 20px 0;font-size:22px}.panel-close{width:32px;height:32px;color:var(--ink);background:var(--well);cursor:pointer;border:0;border-radius:9px;font-size:24px;line-height:1;position:absolute;top:12px;right:14px}.setting-label{flex-direction:column;gap:8px;margin:18px 0 0;font-size:14px;font-weight:700;display:flex}.choice-row{gap:8px;display:flex}.choice{border:1px solid var(--edge2);min-height:40px;color:var(--ink);background:var(--well);font:inherit;cursor:pointer;border-radius:10px;flex:1}.choice.selected{border-color:var(--acc);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}.panel select{border:1px solid var(--edge2);width:100%;min-height:40px;color:var(--ink);background:var(--well);font:inherit;border-radius:10px;padding:8px 10px}.setting-note{color:var(--dim);margin:10px 0 0;font-size:13px;line-height:1.5}.guide-intro{margin:0 0 12px}.guide-list{gap:12px;margin:0;padding-left:22px;line-height:1.45;display:grid}.guide-list strong{color:var(--acc)}.lcd{aspect-ratio:1;background:radial-gradient(120% 90% at 25% 5%,var(--lcd-hi),var(--lcd-bg));width:76%;color:var(--lcd-ink);text-shadow:0 0 .5em var(--lcd-glow);box-shadow:inset 0 0 0 2px #00000080,inset 0 8px 18px #00000080,0 0 0 7px var(--well),0 0 0 8px var(--edge2),0 16px 22px -10px var(--sh);border-radius:10px;grid-template-rows:auto 1fr auto;align-items:stretch;margin:0 auto;padding:4.18% 4.56%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.lcd>.top,.lcd>div{width:100%}.lcd>div:nth-child(2){align-self:center}.lcd:after{content:"";pointer-events:none;background:linear-gradient(118deg,#ffffff29,#0000 38%),repeating-linear-gradient(0deg,#00000024 0,#00000024 1px,#0000 1px,#0000 3px);position:absolute;top:0;right:0;bottom:0;left:0}.top{justify-content:space-between;align-items:center;font-size:6.2cqw;font-weight:700;display:flex}.eq{align-items:flex-end;gap:1cqw;height:6cqw;display:flex}.eq i{transform-origin:bottom;background:currentColor;width:1.6cqw;height:100%;animation:.9s ease-in-out infinite alternate paused eq;transform:scaleY(.25)}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-duration:.7s;animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-duration:1.1s;animation-delay:-.45s}.on-air .eq i{animation-play-state:running}@keyframes eq{to{transform:scaleY(1)}}.num{letter-spacing:-.02em;font-size:27cqw;font-weight:700;line-height:.9}.name{white-space:nowrap;margin-top:2cqw;font-size:9.5cqw;font-weight:700}.vs{margin-bottom:2.5cqw;font-size:6.5cqw;font-weight:500}.vs b{font-size:10cqw;font-weight:700}.seg{background:var(--lcd-ink);height:3.4cqw;-webkit-mask:repeating-linear-gradient(90deg,#000 0 2.2cqw,#0000 2.2cqw 3.3cqw);mask:repeating-linear-gradient(90deg,#000 0 2.2cqw,#0000 2.2cqw 3.3cqw)}@supports (color:color-mix(in lab,red,red)){.seg{background:color-mix(in srgb,var(--lcd-ink) 22%,transparent)}}.seg i{background:var(--lcd-ink);width:0;height:100%;transition:width .15s;display:block}.row{grid-template-columns:1fr 1fr;align-items:center;gap:20px;margin-top:34px;display:grid}.left{flex-direction:column;align-items:center;gap:7px;display:flex}.star{aspect-ratio:1;width:25%;filter:drop-shadow(0 0 7px var(--acc));cursor:pointer}.star i{background:linear-gradient(var(--acc),#ffc27d);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);height:100%;display:block}.pyramid{aspect-ratio:1;width:100%;position:relative}.tri{aspect-ratio:1;cursor:ns-resize;touch-action:none;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(var(--edge2),var(--edge));width:100%;position:relative}.surah-value{z-index:1;color:var(--acc);background:var(--well);text-shadow:0 0 5px var(--acc);border-radius:4px;padding:1px 4px;font-size:10px;font-weight:700;line-height:1.2;position:absolute;left:50%;transform:translate(-50%,-50%)}@supports (color:color-mix(in lab,red,red)){.surah-value{text-shadow:0 0 5px color-mix(in srgb,var(--acc) 55%,transparent)}}.surah-value{pointer-events:none}.tin{clip-path:polygon(0 0,100% 0,50% 100%);background:var(--well);position:absolute;top:3px;right:6px;bottom:9px;left:6px}.tk{flex-direction:column;padding:2px 0;display:flex;position:absolute;top:0;right:0;bottom:0;left:0}.tk i{background:var(--dim);opacity:.55;flex:1;margin:.5px 0}.tk i.on{background:var(--acc);opacity:1;box-shadow:0 0 6px var(--acc)}.th{height:3px;box-shadow:0 0 10px 2px var(--acc);background:#fff;transition:top 80ms;position:absolute;left:0;right:0;transform:translateY(-50%)}.dial{aspect-ratio:1;touch-action:none;cursor:grab;background:radial-gradient(circle,var(--well) 0 66%,var(--well) 67%);border-radius:50%;width:100%;position:relative;container-type:inline-size}@supports (color:color-mix(in lab,red,red)){.dial{background:radial-gradient(circle,var(--well) 0 66%,color-mix(in srgb,var(--well) 70%,#000) 67%)}}.dial{box-shadow:inset 0 5px 12px #0009,0 0 0 3px var(--edge),0 1.5px 0 3px var(--edge2),0 14px 20px -8px var(--sh)}.dial:active{cursor:grabbing}.d{background:var(--dim);width:1.7cqw;height:1.7cqw;transform:rotate(var(--t)) translateY(-43.5cqw);border-radius:50%;margin:-.85cqw;position:absolute;top:50%;left:50%}.dense .d{width:1cqw;height:1cqw;margin:-.5cqw}.d.f{width:1cqw;height:5.4cqw;transform:rotate(var(--t)) translateY(-41.5cqw);border-radius:1cqw;margin:-2.7cqw 0 0 -.5cqw}.d.on{background:var(--acc);box-shadow:0 0 1.6cqw var(--acc)}.knob{background:conic-gradient(from 20deg,#e9ecef,#8d959f,#f7f8fa,#6f7781,#dfe3e7,#8a929c,#e9ecef);border-radius:50%;place-items:center;display:grid;position:absolute;top:17%;right:17%;bottom:17%;left:17%;box-shadow:0 10px 18px #0000008c,inset 0 0 0 2px #fff6,inset 0 -3px 8px #00000059}.rot{background:repeating-radial-gradient(circle,#00000017 0,#00000017 1px,#0000 1px,#0000 4px),radial-gradient(circle at 35% 25%,#ffffff8c,#0000001f);border-radius:50%;transition:transform .1s;position:absolute;top:7%;right:7%;bottom:7%;left:7%}.rot:after{content:"";aspect-ratio:1;background:var(--acc);width:11%;box-shadow:0 0 8px var(--acc),inset 0 -2px 3px #0006;border-radius:50%;margin-left:-5.5%;position:absolute;top:5%;left:50%}.verse-marker-track{z-index:2;transform:rotate(var(--angle));pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.orbit-ring{aspect-ratio:1;border:1px solid var(--acc);width:76%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@supports (color:color-mix(in lab,red,red)){.orbit-ring{border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}}.orbit-ring{box-shadow:0 0 8px var(--acc);border-radius:50%}@supports (color:color-mix(in lab,red,red)){.orbit-ring{box-shadow:0 0 8px color-mix(in srgb,var(--acc) 12%,transparent)}}.verse-value{min-width:20px;height:20px;transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));border:1px solid var(--acc);place-items:center;padding:0 4px;display:grid;position:absolute;top:13%;left:50%}@supports (color:color-mix(in lab,red,red)){.verse-value{border:1px solid color-mix(in srgb,var(--acc) 75%,transparent)}}.verse-value{color:var(--acc);background:var(--well);text-shadow:0 0 6px var(--acc);border-radius:999px;font-size:10px;font-weight:700;line-height:1}@supports (color:color-mix(in lab,red,red)){.verse-value{text-shadow:0 0 6px color-mix(in srgb,var(--acc) 65%,transparent)}}.verse-value{white-space:nowrap;box-shadow:0 0 8px var(--acc)}@supports (color:color-mix(in lab,red,red)){.verse-value{box-shadow:0 0 8px color-mix(in srgb,var(--acc) 35%,transparent)}}.dial-star{z-index:3;color:#ffd16a;width:20px;height:20px;text-shadow:0 0 5px #ff9e35,0 0 12px var(--acc);place-items:center;font-size:17px;line-height:1;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@supports (color:color-mix(in lab,red,red)){.dial-star{text-shadow:0 0 5px #ff9e35,0 0 12px color-mix(in srgb,var(--acc) 75%,transparent)}}.dial-star{pointer-events:none}.foot{flex-direction:column;align-items:center;gap:14px;margin-top:30px;display:flex}.key{cursor:pointer;background:linear-gradient(var(--k1),var(--k2));width:88px;height:88px;box-shadow:0 7px 0 var(--k3),0 14px 18px -4px var(--sh),inset 0 1.5px #ffffff59;border:0;border-radius:16px;transition:transform 80ms,box-shadow 80ms;position:relative}.key:active{box-shadow:0 1px 0 var(--k3),0 4px 8px -2px var(--sh),inset 0 1.5px #ffffff40;transform:translateY(6px)}.key:before,.key:after{content:"";background:var(--ink);opacity:.85;border-radius:4px;width:48px;height:8px;margin:-4px 0 0 -24px;transition:background .2s,box-shadow .2s;position:absolute;top:50%;left:50%;transform:rotate(45deg)}.key:after{transform:rotate(-45deg)}.key[aria-pressed=true]:before,.key[aria-pressed=true]:after{background:var(--acc);opacity:1;box-shadow:0 0 14px var(--acc)}.key:focus-visible,.dial:focus-visible,.tri:focus-visible{outline:3px solid var(--acc);outline-offset:4px}.cap{letter-spacing:.06em;color:var(--dim);font-size:13px;font-weight:500}@media (prefers-reduced-motion:reduce){.eq i,.rot,.th,.key{transition:none!important;animation:none!important}}#root{justify-content:center;align-items:flex-start;width:100%;min-height:calc(100dvh - 36px);display:flex}.unit{margin:0 auto}@media (min-height:820px){#root{align-items:center}}.roll{animation:.18s ease-out roll}@keyframes roll{0%{opacity:0;transform:translateY(-35%)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}