@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-vietnamese-wght-normal-CnvboYUG.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-ext-wght-normal-Ca2vKHc0.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-wght-normal-ukD16Tqj.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fraunces Variable;font-style:italic;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-vietnamese-wght-italic-BicUS2cM.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:italic;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-ext-wght-italic-BfTTTDIL.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces Variable;font-style:italic;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-wght-italic-Py8at3oI.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans Variable;font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/instrument-sans-latin-ext-wght-normal-B5bTHO_g.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans Variable;font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/instrument-sans-latin-wght-normal-BbzFLZTg.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{color-scheme:light;--paper: #f1f2ed;--surface: #fbfbf7;--sunken: #e6e8e0;--badge-c: #d14242;--badge-r: #446ba6;--badge-e: #3e8850;--header-bg: rgba(241, 242, 237, .88);--ink: #17211c;--ink-muted: #56625b;--line: #d8dcd2;--line-strong: #c2c9bb;--accent: #1c4f43;--accent-ink: #f6f7f0;--accent-soft: #dde7e0;--brass: #1c4f43;--danger: #8e2f2a;--danger-soft: #f6e2de;--font-content: "Fraunces Variable", Georgia, "Times New Roman", serif;--font-ui: "Instrument Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;--radius-sm: 6px;--radius: 10px;--radius-pill: 999px;--header-h: 60px;--safe-top: env(safe-area-inset-top, 0px);--content-max: 1040px;--dock-space: 0px;--shadow-raised: 0 1px 2px rgba(23, 33, 28, .06), 0 8px 24px rgba(23, 33, 28, .06)}:root[data-theme=dark]{color-scheme:dark;--paper: #0f1512;--surface: #161f1b;--sunken: #1e2925;--header-bg: rgba(15, 21, 18, .88);--ink: #e8ebe3;--ink-muted: #9aa79f;--line: #2a3731;--line-strong: #3a4a42;--accent: #8dc9b5;--accent-ink: #0c1712;--accent-soft: #1e332c;--brass: #8dc9b5;--danger: #f0a39b;--danger-soft: #3a211e;--shadow-raised: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35)}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + var(--safe-top) + 1rem);scroll-padding-bottom:10rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}button,a,select,input{touch-action:manipulation}::selection{background:var(--accent-soft);color:var(--ink)}h1,h2,h3{font-family:var(--font-content);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0;text-wrap:balance}p{margin:0}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}a{color:inherit;text-decoration:none}img,svg{display:block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:2.25rem max(1.5rem,env(safe-area-inset-left,0px)) calc(4rem + var(--dock-space)) max(1.5rem,env(safe-area-inset-right,0px))}.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:1rem;top:1rem;z-index:200;padding:.6rem 1rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-raised);font-weight:600;color:var(--accent)}.app-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--ink-muted)}.app-loading img{width:44px;height:44px;padding:5px;border-radius:11px;background:var(--ink)}.app-load-retry{min-height:42px;padding:.55rem 1rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-weight:600}.app-load-retry:hover,.app-load-retry:focus-visible{border-color:var(--accent);color:var(--accent)}.app-load-retry:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-route-loading{display:grid;min-height:40vh;place-items:center;color:var(--ink-muted)}:root[data-theme=dark] .app-loading-logo{padding:0;background:transparent}.app-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:calc(var(--header-h) + var(--safe-top));padding-top:var(--safe-top);padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px));background:var(--header-bg);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}.app-brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-family:var(--font-content);font-size:clamp(.875rem,1.2vw,1.0625rem);font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}.app-brand img{width:42px;height:42px;padding:4px;border-radius:11px;background:var(--ink);box-shadow:0 0 0 1px var(--line)}:root[data-theme=dark] .app-brand img{background:transparent}.app-nav{display:flex;align-items:center;gap:.25rem}.app-nav-link{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .75rem;border-radius:var(--radius-pill);font-size:.875rem;font-weight:500;color:var(--ink-muted);transition:background-color .12s ease,color .12s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.app-nav-tip{position:absolute;top:calc(100% + 8px);left:50%;z-index:120;transform:translate(-50%);padding:.35rem .6rem;border:1px solid var(--brass);border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);font-size:.75rem;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px #0000002e;animation:app-nav-tip-in .14s ease-out}.app-nav-tip:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-bottom-color:var(--brass)}.app-nav-tip:after{content:"";position:absolute;bottom:calc(100% - 1px);left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:var(--ink)}.app-nav>.app-nav-link:last-child .app-nav-tip{left:auto;right:0;transform:none}.app-nav>.app-nav-link:last-child .app-nav-tip:before{left:auto;right:14px;transform:none}.app-nav>.app-nav-link:last-child .app-nav-tip:after{left:auto;right:15px;transform:none}.tooltip-trigger{position:relative}.tooltip-trigger:before,.tooltip-trigger:after{position:absolute;z-index:140;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}.tooltip-trigger:before{content:attr(data-tooltip);bottom:calc(100% + 10px);left:50%;width:max-content;max-width:min(17rem,calc(100vw - 2rem));padding:.4rem .62rem;transform:translate(-50%,4px);border:1px solid var(--brass);border-radius:var(--radius-sm);background:var(--ink);box-shadow:var(--shadow-raised);color:var(--paper);font-size:.75rem;font-weight:500;line-height:1.3;text-align:center;white-space:normal}.tooltip-trigger:after{content:"";bottom:calc(100% + 1px);left:50%;transform:translate(-50%,4px);border:5px solid transparent;border-top-color:var(--brass)}@media (hover: hover){.tooltip-trigger:hover:not(:disabled):before,.tooltip-trigger:hover:not(:disabled):after{visibility:visible;opacity:1;transform:translate(-50%)}}.tooltip-trigger:focus-visible:not(:disabled):before,.tooltip-trigger:focus-visible:not(:disabled):after{visibility:visible;opacity:1;transform:translate(-50%)}.dock .tooltip-trigger:before{bottom:calc(100% + 10px);right:0;left:auto;transform:translateY(4px)}.dock .tooltip-trigger:after{right:15px;left:auto;transform:translateY(4px)}.dock .tooltip-trigger:hover:not(:disabled):before,.dock .tooltip-trigger:hover:not(:disabled):after,.dock .tooltip-trigger:focus-visible:not(:disabled):before,.dock .tooltip-trigger:focus-visible:not(:disabled):after{transform:translateY(0)}@media (hover: none),(pointer: coarse),(max-width: 480px){.tooltip-trigger:active:not(:disabled):before,.tooltip-trigger:active:not(:disabled):after{visibility:visible;opacity:1;transform:translate(-50%)}.hymn-action-buttons .tooltip-trigger:before{right:0;left:auto;transform:translateY(4px)}.hymn-action-buttons .tooltip-trigger:after{right:17px;left:auto;transform:translateY(4px)}.hymn-action-buttons .tooltip-trigger:active:not(:disabled):before,.hymn-action-buttons .tooltip-trigger:active:not(:disabled):after,.dock .tooltip-trigger:active:not(:disabled):before,.dock .tooltip-trigger:active:not(:disabled):after{transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tooltip-trigger:before,.tooltip-trigger:after{transition:none}}@keyframes app-nav-tip-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.app-nav-tip{animation:none}}.app-nav-link:hover{background:var(--sunken);color:var(--ink)}.app-nav-link[aria-current=page]{background:var(--accent-soft);color:var(--accent)}.hymn-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.hymn-row{border-bottom:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 60px}.hymn-link{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto auto;align-items:center;gap:.75rem;min-height:52px;padding:.7rem .5rem;color:inherit;transition:background-color .12s ease}.hymn-link:hover{background:var(--surface)}.hymn-link:active{background:var(--sunken)}.hymn-num{padding-top:.05rem;font-family:var(--font-content);font-size:1rem;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--brass);text-align:right}.hymn-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}.hymn-title{font-family:var(--font-content);font-size:1.0625rem;font-weight:500;line-height:1.25;letter-spacing:-.005em;overflow-wrap:anywhere}.hymn-topic{display:block;font-size:.8125rem;line-height:1.35;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hymn-chevron{align-self:center;color:var(--ink-muted);opacity:.55;transition:transform .12s ease,opacity .12s ease,color .12s ease}.hymn-link:hover .hymn-chevron{color:var(--accent);opacity:1;transform:translate(2px)}.empty-state{padding:3rem 1rem;text-align:center;color:var(--ink-muted);border:1px dashed var(--line-strong);border-radius:var(--radius)}.empty-state strong{display:block;margin-bottom:.25rem;font-family:var(--font-content);font-size:1.125rem;font-weight:600;color:var(--ink)}.chip-row{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.chip-row::-webkit-scrollbar{display:none}.navigation-reel{gap:.35rem;padding:.35rem;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);scroll-padding-inline:.35rem;scroll-snap-type:x proximity}.navigation-reel::-webkit-scrollbar{display:none}.chip{flex:none;min-height:36px;padding:0 .85rem;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.875rem;font-weight:500;color:var(--ink-muted);background:transparent;transition:background-color .12s ease,color .12s ease,border-color .12s ease}.chip:hover{border-color:var(--line-strong);color:var(--ink)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.field{width:100%;min-height:46px;padding:.6rem .9rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);transition:border-color .12s ease,box-shadow .12s ease}.field::placeholder{color:var(--ink-muted)}.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}select.field option{background:var(--surface);color:var(--ink)}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (max-width: 1100px){.app-brand span{display:none}.app-nav{gap:.15rem;margin-left:auto}.app-nav-link{justify-content:center;min-width:40px;min-height:40px;padding:0 .4rem}.app-nav-label{display:none}}@media (max-width: 640px){.app-header{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}.app-brand{display:none}.app-nav{width:100%;justify-content:space-between;margin-left:0}.app-main{padding-top:1.5rem;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px));padding-bottom:calc(3rem + var(--dock-space))}.hymn-link{grid-template-columns:2.75rem minmax(0,1fr) auto auto;gap:.6rem;padding:.7rem .25rem}}@media (max-width: 380px){.app-nav{gap:0}.app-nav-link{min-width:36px;padding:0}}.snackbar-layer{position:fixed;right:0;bottom:0;left:0;z-index:300;display:flex;justify-content:center;padding:0 1rem calc(1.25rem + env(safe-area-inset-bottom,0px) + var(--snackbar-offset, 0px));pointer-events:none}.snackbar{max-width:min(32rem,100%);padding:.7rem 1.15rem;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:.875rem;font-weight:500;line-height:1.35;text-align:center;box-shadow:var(--shadow-raised);animation:snackbar-in .18s cubic-bezier(.2,.7,.3,1) both}@keyframes snackbar-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.snackbar{animation:none}}
