/* The app is revealed only after local mode or an authenticated session is known. */
body.session-loading .shell,body.session-locked .shell{display:none}
/* A quiet, full-bleed sound sculpture; no panel around the form. */
#loginPage{--login-text:#f2effa;position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;background:#111016;color:var(--login-text);padding:48px clamp(28px,5vw,96px);display:flex;flex-direction:column;color-scheme:dark}
#loginPage[hidden]{display:none}
.login-atmosphere{position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 27% 46%,#36265770,transparent 54%),radial-gradient(ellipse at 94% 5%,#35234235,transparent 43%)}
.login-brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:650;letter-spacing:.16em;width:fit-content}
.login-brand .ico{color:#bcabff;width:30px;height:30px;stroke-width:1.5}
.login-layout{width:min(1440px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);align-items:center;gap:clamp(48px,7vw,120px);flex:1}
.login-art{position:relative;height:clamp(460px,66vh,760px);min-width:0;display:flex;align-items:flex-end;padding:0 0 24px 28px}
.login-ribbon{position:absolute;width:145%;max-width:none;height:120%;left:-24%;top:-16%;overflow:visible;pointer-events:none;animation:login-drift 4s ease-out both}
.login-art-wordmark{font-size:clamp(58px,6.4vw,100px);font-weight:500;letter-spacing:.13em;line-height:1.25;color:#eee8ff;z-index:1}
.login-art-wordmark>span{display:block;margin-top:21px;font-size:10px;letter-spacing:.36em;color:#a197b8;font-weight:400}
.login-entry{width:100%;max-width:360px;justify-self:center;padding:36px 0 16px;position:relative}
.login-heading{margin-bottom:42px;display:flex;align-items:center;gap:15px}
.login-heading h1{font-size:34px;font-weight:500;letter-spacing:.08em;margin:0;line-height:1.4}
.login-heading-mark{height:7px;width:7px;background:#bba5ff;border-radius:50%;box-shadow:0 0 18px #ad83ff65}
.login-form{display:grid;gap:27px}
.login-field{display:grid;gap:13px;font-size:12px;letter-spacing:.08em;color:#bdb6cd}
.login-field input{width:100%;min-width:0;min-height:48px;border:0;border-bottom:1px solid #6f637c;border-radius:0;background:transparent;padding:0 0 13px;color:var(--login-text);font:inherit;font-size:16px;letter-spacing:.02em;transition:border-color .2s,box-shadow .2s}
.login-field input::placeholder{color:#82798f;font-size:15px;letter-spacing:0}
.login-field input:focus{border-bottom-color:#c6b1ff;outline:0;box-shadow:0 1px 0 #c6b1ff}
.login-field:focus-within{color:#ded1ff}
.login-field input:-webkit-autofill{-webkit-text-fill-color:#f2effa;box-shadow:0 0 0 100px #191520 inset;caret-color:#f2effa}
.login-submit{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-top:13px;padding:0 22px;border:1px solid #ceb9ff;border-radius:12px;background:#d2c0ff;color:#25173e;font-size:14px;font-weight:650;letter-spacing:.06em;transition:background .2s,transform .2s,box-shadow .2s}
.login-submit .ico{height:20px;width:20px;transition:transform .2s}
.login-submit:hover{background:#e0d2ff;box-shadow:0 8px 30px #b58cf518}
.login-submit:hover .ico{transform:translateX(3px)}
.login-submit:active{transform:translateY(1px)}
.login-submit:disabled{opacity:.6}
.login-submit:focus-visible,.login-retry:focus-visible{outline:2px solid #dfccff;outline-offset:5px}
#loginStatus{margin:-5px 0 0;min-height:23px;line-height:1.7;font-size:13px;color:#bdb6cd;letter-spacing:0;overflow-wrap:anywhere}
#loginStatus.error-text{color:#ffaaa9}
.login-retry{padding:8px 0;border:0;background:none;color:#d2c0ff;font-size:13px;min-height:40px}
.login-retry[hidden]{display:none}
@keyframes login-drift{from{transform:translateY(12px) rotate(-2deg);opacity:.4}to{transform:translateY(0) rotate(0);opacity:1}}
@media(min-width:1800px){.login-entry{max-width:390px}.login-heading h1{font-size:38px}.login-art{height:700px}}
@media(max-width:900px){#loginPage{padding:30px 32px}.login-layout{gap:30px;grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}.login-art{padding-left:0}.login-ribbon{width:180%;left:-43%}.login-art-wordmark{font-size:62px}}
@media(max-width:640px){#loginPage{padding:26px 28px 32px}.login-brand{font-size:21px;gap:10px}.login-brand .ico{width:26px;height:26px}.login-layout{display:flex;flex-direction:column;gap:0;justify-content:center;margin:auto;width:100%;flex:1}.login-art{width:100%;height:172px;min-height:120px;flex:none;padding:0;overflow:hidden;margin:2px 0 0}.login-ribbon{width:125%;height:400px;left:-14%;top:-130px;opacity:.85}.login-art-wordmark{display:none}.login-entry{padding:10px 0 0;max-width:370px}.login-heading{margin-bottom:28px}.login-heading h1{font-size:30px}.login-form{gap:22px}.login-submit{margin-top:9px}.login-atmosphere{background:radial-gradient(ellipse at 30% 20%,#39245565,transparent 58%)}}
@media(max-height:700px) and (max-width:640px){.login-art{height:100px;min-height:80px}.login-ribbon{top:-159px}#loginPage{padding-top:22px;padding-bottom:20px}.login-heading{margin-bottom:20px}.login-form{gap:17px}}
@media(prefers-reduced-motion:reduce){.login-ribbon{animation:none}.login-field input,.login-submit,.login-submit .ico{transition:none}}
.account-form{display:grid;gap:17px;margin-top:24px}.account-form label{display:grid;gap:8px;font-size:14px;color:#494555}.account-form input,.account-form select{min-height:44px;padding:10px 12px;border:1px solid #dfdce8;border-radius:9px;background:#fff;color:#2e293b;font:inherit;width:100%;box-sizing:border-box}.account-form input:focus,.account-form select:focus{outline:2px solid #a497ef;outline-offset:1px}.account-form .btn{justify-content:center}.account-form p{margin:0;line-height:1.6}.account-card{max-width:550px;padding:28px}.account-card h2{margin-top:0}.account-privacy{max-width:740px;color:#817c90;font-size:13px;line-height:1.9;margin-top:24px}.account-users{display:grid;gap:12px}.account-user{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.account-user h2{font-size:17px;margin:0 0 8px}.account-user h2 small{font-size:12px;color:#8b80bb}.account-user p{font-size:13px;color:#858092;margin:0}.account-dialog{max-width:470px}.account-users .reference-actions{margin:0}.account-nav-label{overflow:hidden;text-overflow:ellipsis}.recording-scope{display:flex;gap:8px;margin-bottom:20px}.recording-scope a{padding:8px 14px;border-radius:9px;border:1px solid #e8e4ef;color:#766b91;font-size:13px}.recording-scope a.active{background:#eeeafa;border-color:#c4b9e9;color:#6958e8}.permission-note{padding:10px 14px;border-radius:10px;background:#f1eef8;color:#786c94;font-size:13px;line-height:1.6;margin:0 0 12px}.online-privacy{font-size:12px;color:#92899d;margin:12px 0 0;line-height:1.7}.readonly-practice .practice-savebar button,.readonly-practice .alignment-box,.readonly-practice #guideRecord,.readonly-practice #workbenchRegister,.readonly-practice #workbenchReview,.readonly-practice #editLyricsBtn,.readonly-practice #anchorLyric,.readonly-practice #clearAnchor,.readonly-practice .edit-tools,.readonly-practice #calculateComparison{display:none}
@media(max-width:700px){.account-user{align-items:flex-start;flex-direction:column}.account-card{padding:22px}.account-user .reference-actions{gap:12px}.recording-scope{flex-wrap:wrap}}