.home-view[hidden],.home-settings-backdrop[hidden]{display:none!important}
.home-view{position:fixed;inset:0;z-index:40;overflow:auto;color:#f3ecdf;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:radial-gradient(ellipse 78% 34% at 50% 110%,#d095bb 0%,transparent 77%),radial-gradient(ellipse at 78% 78%,rgba(115,72,140,.56),transparent 51%),linear-gradient(180deg,#1b1724 0%,#23192b 43%,#3d2a4f 100%)}
.home-view::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.23;background-image:radial-gradient(circle at 14% 28%,#f8e5dc 0 1px,transparent 2px),radial-gradient(circle at 76% 72%,#e2c5ec 0 1px,transparent 2px);background-size:270px 250px,410px 340px}
.home-header,.home-body{position:relative;z-index:2}.home-header{height:78px;padding:0 2.6%;display:flex;align-items:center;justify-content:space-between;gap:20px}.home-brand{display:flex;align-items:center;gap:13px}.home-emblem{width:49px;height:49px;display:grid;place-items:center;border:3px solid #c9b993;border-radius:50%;background:#efe6d2;color:#373b49;font-size:25px;box-shadow:inset 0 0 0 3px #aa9f97}.home-brand strong{display:block;font-size:20px;letter-spacing:.08em}.home-brand small{display:block;margin-top:3px;color:#bfb2bd;font-size:11px;letter-spacing:.12em}
.home-nav{display:flex;align-items:center;gap:22px}.home-icon,.home-return{display:grid;place-items:center;cursor:pointer}.home-icon{width:40px;height:40px;border:0;background:transparent;color:#f1e9da;font:700 30px Georgia,serif;text-shadow:0 2px 5px #110b1a}.home-icon:hover,.home-icon:focus-visible{color:#f6d887}.home-nav-divider{height:31px;width:1px;background:#837b83}.home-return{width:45px;height:45px;border:4px solid #aaa29a;border-radius:50%;color:#3b3d49;background:#f2ebdf;font-size:30px;line-height:1}.home-return:hover,.home-return:focus-visible{border-color:#f4d88a}
.home-body{padding:0 2.6% 45px}.home-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3%;height:clamp(270px,39vh,450px)}.home-featured{min-width:0;display:flex;flex-direction:column}.home-practice-banner{position:relative;display:flex;align-items:center;width:100%;height:clamp(58px,10vh,90px);min-height:58px;overflow:hidden;padding:0 20px;border:1px solid #d5c6ae55;border-radius:4px;color:#fff5e4;text-align:left;background:linear-gradient(110deg,#543129 0%,#9e6545 43%,#f1ddb1 44%,#efe6d2 100%);cursor:pointer}.home-practice-banner:hover{filter:brightness(1.08)}.banner-record{position:absolute;left:33%;top:-57px;width:190px;height:190px;display:grid;place-items:center;border:21px solid #241b20;border-radius:50%;background:radial-gradient(circle,#a33f2e 0 22%,#241b20 23% 31%,#514039 32% 33%,#241b20 34% 44%,#685347 45% 46%,#241b20 47%);color:#f8e6be;font:20px Georgia,serif;opacity:.78}.banner-copy{position:relative;z-index:1;text-shadow:0 2px 3px #2a1d20}.banner-copy strong{display:block;font-size:clamp(18px,1.5vw,27px);letter-spacing:.04em}.banner-copy small{display:block;margin-top:4px;font-size:12px;color:#f7e7d0}.banner-arrow{position:relative;z-index:1;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#856859;background:#c7b7a2aa;font-size:31px;line-height:1}
.home-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;border-left:3px solid #d4c5c7;padding-left:11px}.home-section-title h1,.home-section-title h2{margin:0;font-size:clamp(16px,1.25vw,23px);font-weight:700;letter-spacing:.03em}.home-section-title>span{font-size:12px;color:#bbaebc}.featured-list{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}.featured-song{display:flex;align-items:center;gap:13px;min-width:0;padding:3px 4px;border:0;color:#eae0dc;text-align:left;background:transparent;cursor:pointer}.featured-song:hover .featured-copy strong{color:#ffe7a8}.featured-picture{position:relative;display:grid;place-items:center;flex:none;width:clamp(45px,7vh,67px);aspect-ratio:1;overflow:hidden;border:2px solid #e6d8c6;border-radius:50%;background:#44344e;color:#eee2d3}.featured-picture img{width:100%;height:100%;object-fit:cover}.featured-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.featured-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(14px,1.05vw,19px)}.featured-level{display:flex;align-items:center;gap:8px;white-space:nowrap}.featured-keys{padding:2px 9px;border-radius:3px;color:#fff2e6;background:#a65d58;font-size:11px}.featured-stars{color:#ffc35b;font-size:clamp(13px,1.1vw,19px);letter-spacing:1px;text-shadow:0 2px #8c4e3b}.featured-diamonds{color:#81717f;font-size:8px;letter-spacing:4px}.featured-play{margin-left:auto;flex:none;display:grid;place-items:center;width:31px;height:31px;border:2px solid #a99a9f;border-radius:50%;color:#ddcfd1;font-size:13px}.featured-song:hover .featured-play{border-color:#f4dcac;color:#f7e4bc}
.home-hero{position:relative;min-width:0;min-height:0}.home-hero-cover{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;padding:0;border:1px solid #d2b8a344;border-radius:3px;background:#3c3442;cursor:pointer;text-align:left}.home-hero-cover>img{width:100%;height:100%;object-fit:cover;object-position:center 47%;transition:transform .25s ease}.home-hero-cover:hover>img{transform:scale(1.025)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,17,25,.06),transparent 45%,rgba(18,14,22,.4)),linear-gradient(0deg,rgba(18,14,23,.78),transparent 48%)}.home-hero-cover::after{content:"";position:absolute;right:-12%;top:-40%;width:27%;height:185%;border-left:5px solid #dccdb066;border-radius:50%;background:repeating-radial-gradient(ellipse at center,#1a1720 0 2px,#29202c 3px 5px)}.hero-copy{position:absolute;z-index:1;right:8%;bottom:12%;display:flex;flex-direction:column;align-items:flex-end;gap:7px;color:#fff9ec;text-align:right;text-shadow:0 2px 5px #1c1621}.hero-copy small{font-size:12px;letter-spacing:.12em;color:#f3dfc4}.hero-copy strong{font-size:clamp(22px,2.2vw,39px);letter-spacing:.025em}.hero-copy>span{font-size:13px;color:#f5e1bc}.hero-pagination{position:absolute;z-index:3;bottom:12px;left:50%;display:flex;gap:8px;transform:translateX(-50%)}.hero-dot{width:10px;height:10px;padding:0;border:1px solid #e5dacc;border-radius:50%;background:#8a7e83;cursor:pointer}.hero-dot[aria-pressed="true"]{background:#fff6dc;box-shadow:0 0 8px #fff6dc}
.home-albums{margin-top:20px}.album-heading{margin:0 0 14px}.album-heading button{display:flex;align-items:center;gap:8px;border:0;color:#f2e9e1;background:transparent;font:inherit;font-size:14px;cursor:pointer}.album-heading button span{display:grid;place-items:center;width:28px;height:28px;border:2px solid #b8abb2;border-radius:50%;font-size:20px;line-height:1}.album-records{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 2.5%}.album-records.collapsed>.album-record:nth-child(n+9){display:none}.album-record{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0;border:0;text-align:left;color:#f1e6de;background:transparent;cursor:pointer}.album-disc{position:absolute;z-index:0;top:7%;right:0;width:85%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#17151c 0 2px,#27232b 3px 4px,#1a171e 5px 6px);box-shadow:0 4px 8px #120e1b66}.album-sleeve{position:relative;z-index:1;display:grid;place-items:center;width:85%;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#4a414f;box-shadow:0 3px 8px #100b1a50;transition:transform .2s,box-shadow .2s}.album-sleeve img{width:100%;height:100%;object-fit:cover}.album-record:hover .album-sleeve,.album-record:focus-visible .album-sleeve{transform:translateY(-4px);box-shadow:0 0 0 2px #f4dea5,0 7px 15px #100b1a88}.album-sleeve.all{background:linear-gradient(145deg,#76615d,#604c56)}.album-sleeve.favorite{background:linear-gradient(145deg,#4e5a70,#414a63)}.album-symbol{color:#ded5c8;font-size:clamp(30px,4vw,55px);text-shadow:0 2px 3px #30273288}.album-sleeve.favorite .album-symbol{color:#f5bd55}.album-count{position:absolute;right:6px;bottom:6px;min-width:20px;padding:2px 5px;border-radius:12px;text-align:center;color:#f9ecd6;background:#292431b8;font-size:10px}.album-record-label{width:94%;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e6dbe0;font-size:12px}.home-loading{color:#d1c2cc;font-size:13px}
.home-bottom-lines{position:fixed;z-index:1;bottom:0;left:-2%;right:-2%;height:120px;overflow:hidden;pointer-events:none;opacity:.38}.home-bottom-lines i{position:absolute;width:120%;height:100px;left:-10%;border-top:1px solid #f3d2e7;border-radius:50%;transform:rotate(-3deg)}.home-bottom-lines i:nth-child(2){top:12px;transform:rotate(2deg)}.home-bottom-lines i:nth-child(3){top:21px;transform:rotate(-1deg)}
.home-settings-backdrop{position:fixed;z-index:90;inset:0;background:#0c0814a8}.tools-drawer.home-drawer{position:fixed;z-index:100;top:88px;right:4%;width:min(440px,92vw);max-height:calc(100vh - 110px)}.home-drawer .drawer-columns{display:block}.home-drawer .sidebar,.home-drawer .section-panel{display:none}.home-theme-setting{display:none}.home-drawer .home-theme-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(72,79,85,.16);color:#5a656c;font-size:13px}.home-theme-setting select{max-width:65%;padding:7px 10px;border:1px solid #c5c4b7;border-radius:4px;background:#fbfaf3;color:#46515b;font:inherit}.home-help{width:min(460px,calc(100vw - 48px));padding:20px 24px;border:1px solid #f5e8d4;border-radius:7px;color:#454d58;background:#efecde;box-shadow:0 18px 60px #100b1b88}.home-help::backdrop{background:#0c0814a8}.help-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #a39b8b66}.help-heading h2{font-size:20px;margin:0 0 12px}.help-heading button{border:0;background:none;color:#59606b;font-size:27px;cursor:pointer}.home-help p{font-size:14px;line-height:1.7}.home-help .help-note{font-size:12px;color:#827c75}
@media(max-height:800px) and (min-width:901px){.home-header{height:67px}.home-top{height:clamp(255px,39vh,310px)}.home-practice-banner{height:60px}.home-albums{margin-top:13px}.home-section-title{margin-top:8px;margin-bottom:6px}.album-heading{margin-top:0;margin-bottom:11px}.album-records{gap:12px 2.5%}.album-record-label{margin-top:4px;font-size:11px}}
@media(max-width:900px){.home-header{height:70px}.home-top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px}.album-records{grid-template-columns:repeat(6,minmax(0,1fr))}.album-records.collapsed>.album-record:nth-child(n+7){display:none}.featured-diamonds{display:none}.hero-copy strong{font-size:22px}}
@media(max-width:650px){.home-header{padding:0 5%}.home-body{padding:0 5% 30px}.home-brand strong{font-size:17px}.home-nav{gap:10px}.home-top{height:auto;display:flex;flex-direction:column-reverse}.home-hero{height:190px}.home-featured{height:300px}.home-section-title h1,.home-section-title h2{font-size:16px}.album-records{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 3%}.album-records.collapsed>.album-record:nth-child(n+7){display:none}.album-record-label{font-size:11px}.featured-picture{width:50px}.home-help{padding:17px}}

/* Full-screen settings, using the same controls as the practice drawer. */
.home-settings-nav,.home-theme-heading{display:none}
.tools-drawer.home-drawer{inset:0;width:100vw;height:100vh;max-height:none;border:0;border-radius:0;color:#f1f0ec;background:radial-gradient(ellipse at 48% 120%,#777e7d 0%,transparent 53%),radial-gradient(ellipse at 4% 30%,#454d5d 0%,transparent 36%),linear-gradient(180deg,#232738 0%,#343c4b 48%,#697277 100%);box-shadow:none}
.home-drawer .drawer-head{height:92px;min-height:92px;padding:0 6%;border:0;align-items:center}
.home-drawer .drawer-head>div{display:flex;align-items:center;gap:22px}.home-drawer .drawer-head>div::before{content:'⚙';font-size:39px;line-height:1;color:#dcc48e;text-shadow:0 1px 5px #1b1b28}.home-drawer .drawer-head span{display:none}.home-drawer .drawer-head h2{margin:0;color:#d9c398;font-size:20px;letter-spacing:.08em}.home-drawer .drawer-close{width:46px;height:46px;border:4px solid #a19e99;border-radius:50%;background:#eee9dc;color:#424957;font-size:31px;font-weight:700;line-height:1}.home-drawer .drawer-close:hover{border-color:#ebd392;background:#fff9e8}
.home-drawer .drawer-columns{flex:1;min-height:0;display:grid;grid-template-columns:minmax(150px,24%) minmax(0,1fr);overflow:hidden;padding:0 5.5% 3% 6%}.home-drawer .home-settings-nav{display:flex;flex-direction:column;gap:17px;padding:19px 25px 0 0}.settings-nav-item{position:relative;border:0;padding:4px 0 4px 26px;text-align:left;background:transparent;color:#b5b8bb;font-size:23px;font-weight:700;cursor:pointer}.settings-nav-item::before{content:'◆';position:absolute;left:0;top:10px;color:#aaaeb1;font-size:11px}.settings-nav-item[aria-current="true"]{color:#fffdf5;text-shadow:0 0 14px #fff7e4aa}.settings-nav-item[aria-current="true"]::before{content:'◇';top:5px;color:#f1e7d4;font-size:21px}.settings-nav-item[aria-current="true"]::after{content:'✦  ·  ✦';padding-left:12px;color:#d9d7cd;font-size:10px;letter-spacing:7px}
.home-drawer .control-column{min-width:0;overflow-y:auto;padding:16px 18px 30px 0;border:0;background:transparent;scrollbar-width:thin;scrollbar-color:#d8d4c9 #ffffff17}.home-drawer .controls-head{display:none}.home-drawer .home-theme-heading{display:block;margin:0 0 12px;color:#f8f8f3;font-size:19px;line-height:1.3}.home-drawer .home-theme-setting,.home-drawer .settings-row,.home-drawer .offset-row{min-height:53px;margin:0 0 10px;padding:9px 22px;border:0;border-radius:30px;background:linear-gradient(90deg,#d4d1ca,#e4e0d5 58%,#cfc6b4);box-shadow:0 1px 3px #1d212d55}
.home-drawer .home-theme-setting{color:#515c6e;font-size:15px;font-weight:700}.home-drawer .home-theme-setting select{width:38%;max-width:250px;border:0;background:transparent;color:#515c6e;text-align:right;font-weight:700;font-size:15px}.home-drawer .panel{padding:4px 0 11px;border:0}.home-drawer .panel-title{margin:7px 0 12px}.home-drawer .panel-title h3{color:#f8f8f3;font-size:19px}.home-drawer .panel-title>span{display:none}
.home-drawer .settings-row{display:flex;align-items:center;gap:22px}.home-drawer .settings-row .setting-label{flex:1;min-width:0;margin:0;color:#515c6e;font-size:15px;font-weight:700}.home-drawer .settings-row .setting-label strong{color:#515c6e;font-size:15px}.home-drawer .settings-row .segments{flex:0 0 40%;margin:0;gap:7px}.home-drawer .segments button{padding:6px 8px;border:1px solid #a59f95;color:#515c6e;background:#eee9de;font-size:13px}.home-drawer .segments button.selected{border-color:#c7a768;color:#404b5e;background:#e5c984}.home-drawer .settings-row input[type="range"]{flex:0 0 38%;width:38%;height:5px;margin:0;background:#878a87}.home-drawer .settings-row input[type="range"]::-webkit-slider-thumb{width:15px;height:15px;border:2px solid #f8f4e8;background:#c9b88f;box-shadow:0 0 0 1px #92928c}
.home-drawer .setting-help{margin:4px 0 17px;color:#f3f2ed;font-size:13px}.home-drawer .offset-row{display:flex;align-items:center;justify-content:space-between}.home-drawer .offset-row strong{color:#515c6e;font-size:15px}.home-drawer .offset-row small{color:#7d858d;font-size:11px}.home-drawer .offset-input{border:0;background:transparent;color:#515c6e;font-size:13px}.home-drawer .offset-input input{width:68px;color:#515c6e;font-size:16px;font-weight:700}.home-drawer .key-grid{gap:9px;padding:12px 20px;border-radius:30px;background:linear-gradient(90deg,#d4d1ca,#e5e1d7)}.home-drawer .key-grid button{height:36px;border:1px solid #a8a9a1;border-radius:5px;color:#505b6c;background:#f5f2e9;font-size:15px}.home-drawer .key-grid button.listening,.home-drawer .key-grid button:hover{border-color:#b69150;background:#ecd397}.home-drawer .key-help{padding-left:20px;color:#f2eee5;font-size:13px}

/* Help is a dark framed card over the unchanged home screen. */
.home-help{position:fixed;width:min(880px,84vw);max-width:90vw;height:min(630px,80vh);max-height:85vh;overflow:visible;margin:auto;padding:20px 35px 30px;border:2px solid #667084;border-radius:4px;color:#f6f4ed;background:linear-gradient(145deg,#3d485e,#374255 65%,#394659);box-shadow:0 0 0 6px #303b4ca6,0 18px 55px #0c0c16c9;font-family:"Microsoft YaHei","PingFang SC",sans-serif}
.home-help::backdrop{background:#090710b8}.help-heading{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px;border-bottom:1px solid #697488}.help-heading::before,.help-heading::after{content:'◆';position:absolute;bottom:-8px;color:#677386;font-size:12px}.help-heading::before{left:0}.help-heading::after{right:0}.help-heading h2{margin:0;color:#e8cea0;font-size:clamp(21px,2vw,31px);letter-spacing:.04em}.help-heading button{position:absolute;right:0;top:-8px;border:0;background:none;color:#dfca9d;font-size:42px;font-weight:700;line-height:1;cursor:pointer}.help-heading button:hover{color:#fff0c3}.help-body{height:calc(100% - 54px);overflow-y:auto;padding:18px 16px 12px;scrollbar-width:thin;scrollbar-color:#999fa5 transparent}.help-body section{margin-bottom:22px}.help-body h3{margin:0 0 4px;color:#e4c997;font-size:18px}.home-help .help-body p{margin:0;color:#f4f3ed;font-size:16px;font-weight:600;line-height:1.65}.home-help .help-body .help-note{margin-top:25px;color:#d0d3d5;font-size:14px;font-weight:400}.help-corner{position:absolute;z-index:2;width:24px;height:24px;color:#ffe1a0;filter:drop-shadow(0 0 5px #f0b85c)}.help-corner::before{content:'✦';position:absolute;inset:-8px;font-size:27px}.help-corner.top-left{top:0;left:0}.help-corner.top-right{top:0;right:0}.help-corner.bottom-left{bottom:0;left:0}.help-corner.bottom-right{bottom:0;right:0}
@media(max-width:850px){.home-drawer .drawer-columns{grid-template-columns:130px minmax(0,1fr);padding-left:4%;padding-right:4%}.settings-nav-item{font-size:18px}.home-drawer .drawer-head{padding:0 4%}.home-drawer .settings-row .segments{flex-basis:45%}}
@media(max-height:700px){.home-drawer .drawer-head{height:70px;min-height:70px}.home-drawer .control-column{padding-top:4px}.home-drawer .home-theme-setting,.home-drawer .settings-row,.home-drawer .offset-row{min-height:45px}.home-help{height:min(580px,86vh)}.help-body section{margin-bottom:14px}}