:root{--blue:#2a5f97;--blue-hi:#5a8fc7;--blue-deep:#1f4a78;--ink:#15171b;--gold:#c9a24e;--gold-deep:#8a6a22;--tile:#dcd8ce;--paper:#f4f1e8;--paper-2:#ebe6d8;--text:#1d1f24;--text-2:#4d5159;--serif:"Libre Baskerville", Baskerville, Georgia, serif;--sans:"Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--gutter:clamp(1rem, 4vw, 2.5rem);--max:72rem}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--text);font:400 1.0625rem/1.6 var(--sans);margin:0}img{max-width:100%;display:block}a{color:inherit}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{z-index:10;background:var(--ink);color:var(--paper);border-radius:8px;padding:.6rem 1rem;position:absolute;top:-4rem;left:1rem}.skip:focus{top:1rem}.hero{background:radial-gradient(120% 90% at 30% 0%, var(--blue-hi) 0%, var(--blue) 55%, var(--blue-deep) 100%);color:var(--paper)}.top{padding:1rem var(--gutter);color:var(--paper);z-index:2;align-items:center;gap:1.5rem;display:flex;position:absolute;inset:0 0 auto}.brand{font:700 1.2rem var(--serif);align-items:center;gap:.65rem;text-decoration:none;display:flex}.brand img{border-radius:8px}.top-nav{gap:1.25rem;margin-left:auto;font-size:.95rem;display:flex}.top-nav a{opacity:.88;text-decoration:none}.top-nav a:hover{opacity:1;text-underline-offset:4px;text-decoration:underline}.langs{background:#15171b47;border-radius:999px;padding:3px;display:flex}.langs a{border-radius:999px;padding:.3rem .7rem;font-size:.8rem;font-weight:600;text-decoration:none}.langs a[aria-current=true]{background:var(--paper);color:var(--blue-deep)}@media (width<=640px){.top-nav{display:none}.langs{margin-left:auto}}.hero{padding:clamp(6rem, 10vw, 8rem) max(var(--gutter), calc((100vw - var(--max)) / 2)) clamp(3rem, 8vw, 6rem);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,6vw,5rem);display:grid}@media (width<=860px){.hero{grid-template-columns:1fr}}h1,h2{font-family:var(--serif);letter-spacing:-.01em;text-wrap:balance;margin:0;font-weight:700;line-height:1.12}h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}.lead{opacity:.94;max-width:34rem;margin:1.25rem 0 2rem;font-size:1.25rem}.note{opacity:.8;max-width:30rem;margin:1.25rem 0 0;font-size:.9rem}.play{background:var(--ink);color:var(--paper);border:1.5px solid var(--gold);border-radius:14px;align-items:center;gap:.8rem;padding:.7rem 1.4rem .7rem 1.05rem;text-decoration:none;transition:transform .15s,background .15s;display:inline-flex}.play:hover{background:#000;transform:translateY(-2px)}.play span{flex-direction:column;line-height:1.15;display:flex}.play small{opacity:.8;font-size:.72rem}.play strong{font-size:1.1rem;font-weight:600}.board-wrap{justify-self:center;width:100%;max-width:26rem}.board{background:var(--ink);border-radius:22px;padding:1.1rem 1.1rem 1rem;box-shadow:0 24px 50px -20px #0000008c}.tiles{grid-template-columns:repeat(3,1fr);gap:.6rem;display:grid}.tile{aspect-ratio:3/4;background:var(--tile);color:var(--ink);font:700 clamp(3.4rem, 11vw, 4.8rem) / 1 var(--serif);opacity:.35;border-radius:10px;place-items:center;transition:opacity .2s;display:grid}.tile.on{opacity:1}.tile.on:not(:empty){animation:.28s ease-out flip}@keyframes flip{0%{transform:rotateX(70deg)}to{transform:none}}.readout{min-height:3.2rem;color:var(--tile);flex-direction:column;justify-content:center;gap:.1rem;margin:.9rem .2rem .1rem;font-size:.95rem;line-height:1.35;display:flex}.readout b{color:var(--gold);font-size:.85rem}.readout span{font-family:var(--serif);color:var(--paper);font-size:1.05rem}.readout.bad{color:#f0b3a8}.coll{gap:.5rem;margin:1rem 0 .7rem;display:flex}.coll button{cursor:pointer;background:0 0;border:1px solid #f4f1e880;border-radius:999px;padding:.35rem 1rem;font-size:.9rem}.coll button[aria-pressed=true]{background:var(--paper);color:var(--blue-deep);border-color:var(--paper);font-weight:600}.keypad{grid-template-columns:repeat(3,1fr);gap:.55rem;display:grid}.key{background:var(--paper);height:3.4rem;color:var(--ink);font:500 1.5rem var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-radius:999px;place-items:center;transition:transform 80ms,background .12s;display:grid}.key:hover{background:#fff}.key:active{transform:scale(.94)}.key.muted{color:var(--paper);background:#f4f1e838}.key.ghost{pointer-events:none;background:0 0}.hint{text-align:center;opacity:.85;margin:.8rem 0 0;font-size:.85rem}.features,.tabs,.offline,.final{padding:clamp(3.5rem, 8vw, 6.5rem) max(var(--gutter), calc((100vw - var(--max)) / 2))}.features h2{max-width:22ch}.features dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 3rem;margin:2.5rem 0 0;display:grid}@media (width<=900px){.features dl{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.features dl{grid-template-columns:1fr}}.feature{border-top:3px solid var(--gold);padding-top:1rem}.feature dt{font:700 1.2rem/1.3 var(--serif)}.feature dd{color:var(--text-2);max-width:34ch;margin:.5rem 0 0}.tabs{background:var(--paper-2);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,6vw,5rem);display:grid}@media (width<=780px){.tabs{grid-template-columns:1fr}}.tabs-copy>p{color:var(--text-2);max-width:34rem}.tablist{flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem;display:flex}.tablist button{border:1.5px solid var(--ink);cursor:pointer;background:0 0;border-radius:999px;padding:.45rem 1.1rem;transition:background .15s,color .15s}.tablist button[aria-selected=true]{background:var(--ink);color:var(--paper)}.tab-body{font:400 1.15rem/1.6 var(--serif);min-height:5.5em;color:var(--text)!important}.phone{background:var(--paper);border:9px solid var(--ink);border-radius:34px;justify-self:center;width:17rem;height:30rem;position:relative;overflow:hidden;box-shadow:0 24px 40px -22px #00000073}.screen{flex-direction:column;gap:.5rem;padding:1.3rem .9rem 0;display:none;position:absolute;inset:0 0 3.2rem}.phone[data-screen=keypad] .s-keypad,.phone[data-screen=hymns] .s-hymns,.phone[data-screen=search] .s-search,.phone[data-screen=favorites] .s-favorites,.phone[data-screen=settings] .s-settings{animation:.22s ease-out swap;display:flex}@keyframes swap{0%{opacity:0;transform:translateY(6px)}}.mini-tiles{background:var(--ink);border-radius:10px;gap:.35rem;padding:.5rem;display:flex}.mini-tiles i{background:var(--tile);height:3.6rem;font:700 2.4rem/3.6rem var(--serif);text-align:center;color:var(--ink);border-radius:5px;flex:1;font-style:normal}.mini-keys{grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.5rem;display:grid}.mini-keys i{text-align:center;background:#fff;border-radius:999px;font-size:1.1rem;font-style:normal;line-height:2.5rem}.row{border-bottom:1px solid #0000001f;align-items:baseline;gap:.6rem;padding:.5rem 0;font-size:.82rem;line-height:1.3;display:flex}.row b{width:1.8rem;font:400 1.1rem var(--serif);color:var(--blue);text-align:right;flex:none}.row em{color:var(--gold-deep);margin-left:auto;font-style:normal}.field{color:var(--text-2);background:#78788029;border-radius:10px;padding:.55rem .7rem;font-size:.8rem}.set{border-bottom:1px solid #0000001f;justify-content:space-between;align-items:center;padding:.85rem 0;display:flex}.set u{background:#bbb;border-radius:999px;width:2.4rem;height:1.4rem;text-decoration:none;position:relative}.set u.on{background:var(--blue)}.set s{background:#fff;border-radius:50%;width:1.05rem;height:1.05rem;position:absolute;top:3px;left:3px}.set u.on s{left:auto;right:3px}.phone-bar{background:#fff;border-top:1px solid #0000001f;grid-template-columns:repeat(5,1fr);align-items:center;height:3.2rem;display:grid;position:absolute;bottom:0;left:0;right:0}.phone-bar i{text-align:center;color:var(--text-2);text-overflow:ellipsis;padding:.5rem 0;font-size:.56rem;font-style:normal;overflow:hidden}.phone-bar i.on{color:var(--blue);box-shadow:inset 0 3px 0 var(--blue);font-weight:700}.offline{grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);display:grid}@media (width<=780px){.offline{grid-template-columns:1fr}}.offline p{color:var(--text-2);max-width:36rem;margin:1rem 0 0}.final{background:var(--ink);color:var(--paper);text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.final img{border-radius:20px}.final p{color:var(--tile);margin:0 0 .75rem}.foot{padding:1.5rem var(--gutter);color:var(--tile);background:#0e1013;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.9rem;display:flex}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}