:root{--paper:#fffdf8;--red:#c92124;--red-deep:#ac171b;--ink:#1b1916;--muted:#746d65;--line:#e9e2d7;--blue:#1686e8;--serif:"Songti SC","Noto Serif CJK SC","STSong","SimSun",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",sans-serif}*{box-sizing:border-box}html{background:#eee9e0;color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.52;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1779c4;outline-offset:4px}.app{width:100%;max-width:480px;min-height:100svh;background:var(--paper);margin:auto;position:relative;box-shadow:0 0 45px #45382410}.page{padding:0 16px 105px;min-height:100svh}.serif{font-family:var(--serif);font-weight:700}.page-head{height:112px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at 12% 90%,#dae0d6a0,transparent 36%),radial-gradient(ellipse at 80% 85%,#d8e3e380,transparent 36%);margin:0 -16px 2px;overflow:hidden}.page-head:before,.page-head:after{content:"";position:absolute;bottom:-30px;width:150px;height:80px;background:#c0cdc643;clip-path:polygon(0 100%,10% 60%,19% 66%,36% 8%,47% 44%,56% 27%,77% 73%,88% 52%,100% 100%)}.page-head:before{left:0}.page-head:after{right:-5px;transform:scaleX(-1);opacity:.7}.page-head h1{font:700 32px var(--serif);margin:18px 0 0;z-index:1;letter-spacing:3px}.search{height:50px;border:1px solid #b49b7e;border-radius:28px;display:flex;align-items:center;gap:10px;padding:0 17px;margin:2px 8px 18px;background:#ffffff75}.search svg{flex:0 0 23px;color:#59585a}.search input{min-width:0;width:100%;border:0;background:transparent;font-size:21px;outline:none;padding:9px 0}.search input::placeholder{color:#66666a}.cards{display:flex;flex-direction:column;gap:16px}.poem-card{height:184px;width:100%;padding:0;border:0;border-radius:13px;overflow:hidden;position:relative;display:block;background:#476158;text-align:left;color:white;box-shadow:0 2px 8px #2a241416}.poem-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.poem-card:after,.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#071a228c,transparent 66%),linear-gradient(180deg,#061a201f,transparent 70%)}.card-copy{position:absolute;top:21px;left:19px;right:12px;z-index:1;text-shadow:0 2px 6px #0008}.card-title{font:700 33px/1.3 var(--serif);letter-spacing:1px;margin:0;max-width:75%;overflow-wrap:anywhere}.card-author{font:700 21px var(--serif);margin-top:8px}.difficulty{position:absolute;bottom:14px;right:14px;z-index:2;display:flex;align-items:center;gap:4px;border-radius:18px;background:#25343888;padding:6px 10px;font-size:16px;backdrop-filter:blur(7px);line-height:1}.stars{font-size:21px;letter-spacing:1px;color:#ffdc70;white-space:nowrap}.poem-card.unavailable{filter:saturate(.7)}.unavailable-label{position:absolute;bottom:17px;left:18px;z-index:2;font-size:17px;background:#1f272eaa;border-radius:6px;padding:4px 9px}.bottom-nav{position:fixed;z-index:15;bottom:0;width:100%;max-width:480px;left:50%;transform:translateX(-50%);height:calc(83px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;background:#fffdf8f5;border-top:1px solid #ece5d8;backdrop-filter:blur(16px)}.nav-item{border:0;background:none;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font:700 21px var(--serif);color:#666;position:relative}.nav-item svg{width:29px;height:29px}.nav-item.selected{color:#191919}.nav-item.selected:after{content:"";position:absolute;width:35px;height:4px;background:var(--red);border-radius:4px;bottom:5px}.back{min-height:57px;display:flex;align-items:center;gap:5px;font:700 19px var(--serif);padding:10px 0;border:0;background:transparent}.back svg{width:20px}.practice{height:100svh;min-height:620px;display:flex;flex-direction:column;padding:0 14px max(16px,env(safe-area-inset-bottom));overflow:hidden}.hero{flex:none;position:relative;width:100%;aspect-ratio:2.06;border-radius:12px;overflow:hidden;background:#314e45;isolation:isolate}.hero video,.hero img{width:100%;height:100%;object-fit:cover}.hero-copy{z-index:2;position:absolute;top:13px;left:15px;color:white;text-shadow:0 2px 6px #0009}.hero-title{font:700 31px/1.18 var(--serif);margin:0;white-space:nowrap;letter-spacing:1px}.hero-author{font:700 19px var(--serif);margin-top:5px}.emotion{z-index:3;position:absolute;right:12px;top:13px;border:1px solid #ffffff40;border-radius:20px;background:#172023a0;color:white;font:700 18px var(--serif);padding:5px 12px}.graph-viewport{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;margin:10px -2px 8px;scrollbar-width:none;touch-action:pan-y}.graph-viewport::-webkit-scrollbar{display:none}.graph-lines{position:relative;padding:0 1px 65px}.graph-line{padding:6px 7px 0;position:relative;min-height:85px;border-bottom:1px solid #f1ebe2;border-radius:8px;transition:background .2s}.graph-line.active{background:#fbf0df}.line-text{font:700 36px/1.25 var(--serif);white-space:nowrap;letter-spacing:0;display:flex;align-items:baseline;justify-content:flex-start}.unit{display:inline-block;flex:none}.unit.character{width:1em;text-align:center}.unit.punctuation{width:.72em}.unit.pause_marker{width:.43em;color:var(--red);font-weight:400}.unit.stress{color:#e82b25}.curve{width:100%;height:27px;display:block;overflow:visible}.curve path{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.curve circle{fill:var(--paper);stroke:var(--blue);stroke-width:2.2}.player-panel{flex:none}.countdown{font:700 25px var(--serif);text-align:center;min-height:39px}.countdown strong{font-size:41px;color:#ec2424}.recording-label{display:flex;align-items:center;gap:8px;font:700 20px var(--serif)}.recording-dot{background:#ec2228;border-radius:50%;width:13px;height:13px;display:inline-block;animation:pulse 1.2s infinite}.time-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:17px;font-variant-numeric:tabular-nums;margin:8px 0}.timeline{width:100%;height:22px;accent-color:var(--red);margin:0 0 12px;cursor:pointer}.record-progress{height:8px;border-radius:8px;overflow:hidden;background:#e7e4e2;margin:11px 0 18px}.record-progress>span{display:block;height:100%;background:var(--red);transition:width .15s linear}.actions{display:flex;gap:10px}.btn{border-radius:32px;min-height:58px;padding:12px 16px;border:1.5px solid var(--red);color:var(--red);background:#fffdfa;font:700 23px var(--serif);flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}.btn.primary{background:linear-gradient(135deg,#d92723,#bd1c22);color:white;border-color:transparent;box-shadow:0 4px 12px #b61c1c14}.btn svg{width:24px;height:24px;flex:none}.btn.neutral{border-color:#b5a997;color:#554d42}.text-button{border:0;background:none;color:var(--red);font:700 22px var(--serif);padding:13px;text-decoration:underline;text-underline-offset:4px}.empty{text-align:center;padding:90px 16px 35px;display:flex;align-items:center;flex-direction:column;gap:20px;font:700 24px/1.5 var(--serif)}.empty p{margin:0}.empty .btn{min-width:220px;flex:none}.spinner{border:3px solid #e6dbd0;border-top-color:var(--red);height:40px;width:40px;border-radius:50%;display:inline-block;animation:spin 1s linear infinite}.spinner.small{height:21px;width:21px;border-width:2px}.result-page{padding:0 16px max(25px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}.video-frame{border-radius:12px;overflow:hidden;position:relative;background:#19352b;aspect-ratio:4/3;flex:none}.video-frame video{width:100%;height:100%;object-fit:contain;background:#192d25}.generation{height:100%;width:100%;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;padding:20px;gap:15px;background:linear-gradient(#193129b0,#101a14d9);font:700 25px var(--serif)}.generation p{font:500 20px/1.7 var(--serif);margin:0}.generation .spinner{border-color:#ffffff45;border-top-color:white}.generation .btn{flex:none}.result-score{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;background:#fcf6ed;border-radius:12px;padding:21px 0;text-align:center;font-family:var(--serif)}.score-half{padding:0 8px}.score-half+.score-half{border-left:1px solid #cfc9c1}.score-label{font-weight:700;font-size:20px;margin-bottom:9px}.score-value{font-size:55px;font-weight:700;color:#e92324;line-height:1.15}.score-value em{font-size:23px;font-style:normal;color:#24211c;margin-left:3px}.score-rank{font-size:30px;font-weight:700;padding:9px 0 0}.score-note{font-size:17px;color:#736e68}.score-pending{font:700 22px/1.5 var(--serif);padding:12px 5px}.result-spacer{flex:1;min-height:20px}.result-rerecord{text-align:center;margin:16px 0}.saved-message{font:700 22px/1.6 var(--serif);padding:21px 0 0;text-align:center}.saved-message svg{color:#138633;vertical-align:middle;width:26px;height:26px;margin-right:5px}.work-card{border:1px solid #eae1d4;background:white;border-radius:15px;overflow:hidden}.work-card .poem-card{border-radius:0;box-shadow:none}.work-meta{padding:14px 17px;display:flex;justify-content:space-between;gap:8px;font:700 19px var(--serif)}.work-meta .work-score{color:var(--red)}.pending-button{width:calc(100% - 28px);margin:0 14px 14px;border:1px solid #d9b1a7;border-radius:11px;min-height:55px;background:#fff3ec;color:#a32923;font:700 21px var(--serif);display:flex;align-items:center;justify-content:space-between;padding:11px 17px}.pending-button svg{height:19px}.work-card:has(>.pending-button:first-child){padding-top:14px}.draft-card{background:#fff4e7;border:1px solid #dec6a2;border-radius:12px;padding:18px;margin-bottom:18px;font:700 21px var(--serif)}.draft-card button{display:block;width:100%;margin-top:12px}.modal-backdrop{position:fixed;z-index:100;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}.modal{width:min(410px,100%);border-radius:23px;background:#fffefa;padding:27px 20px 21px;box-shadow:0 12px 50px #0002;text-align:center;max-height:90svh;overflow:auto}.modal h2{font:700 29px/1.4 var(--serif);margin:0 0 24px}.modal h3{font:700 28px var(--serif);margin:-14px 0 22px;overflow-wrap:anywhere}.modal .actions{gap:9px}.modal .btn{font-size:21px;min-height:54px;padding:11px 8px}.signature-input{width:100%;border:1px solid #cbbb9e;background:#fffcf6;border-radius:9px;font-size:26px;min-height:61px;text-align:center;padding:12px;margin:0 0 23px}.field-error{color:var(--red);font-size:19px;text-align:left;margin:-13px 0 16px;min-height:24px}.replace-scores{display:flex;justify-content:center;background:#faf4eb;border-radius:10px;padding:18px 0 13px;font:700 20px var(--serif)}.replace-score{width:50%;padding:0 6px}.replace-score+.replace-score{border-left:1px solid #cfc9bd}.replace-score strong{display:block;color:var(--red);font-size:44px;margin-top:8px}.replace-score .state{display:block;font-size:20px;margin-top:15px}.replace-note{font:700 21px/1.55 var(--serif);margin:10px 0 20px}.poster{max-width:100%;max-height:49svh;object-fit:contain;border-radius:10px;margin-bottom:18px}.share-link{display:block;overflow-wrap:anywhere;font-size:17px;color:#71665e;margin:16px 0}#toast{position:fixed;z-index:110;bottom:105px;left:50%;transform:translateX(-50%);background:#28221dea;color:#fff;padding:13px 20px;border-radius:12px;font-size:19px;max-width:90vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}.friend-page .graph-viewport{flex:none;height:auto;overflow:hidden;margin:16px 0 24px}.friend-page .graph-lines{padding-bottom:0}.friend-page .actions{margin-bottom:10px}.page-turn{animation:page-turn .32s ease-out;transform-origin:left center}.loading-inline{padding:26px;text-align:center;font-size:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.permission-note{font-size:21px;line-height:1.6;margin:0 0 21px}.draft-audio{width:100%;margin-bottom:18px}.error-code{color:#6b6258;font-size:18px;line-height:1.5;margin:12px 0 20px}.local-banner{font-size:17px;color:#645746;line-height:1.4;background:#f1e8d9;border-radius:9px;padding:10px 13px;margin:14px 0}.recording-meter{display:flex;gap:3px;align-items:center;height:15px;margin-left:auto}.recording-meter i{width:4px;background:#db292b;border-radius:3px;height:4px}.progress-main{width:100%;display:flex;justify-content:space-between;font-size:18px}.modal.busy .actions{display:none}.search-clear{border:0;background:none;font-size:27px;color:#666;padding:0 0 0 7px}.library-quiet-note{font-size:17px;color:#6b625a;margin:0 8px 15px;line-height:1.5}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes page-turn{from{opacity:.35;transform:perspective(1200px) rotateY(-12deg)}to{opacity:1;transform:none}}@media(min-width:480px){.app{border-left:1px solid #ddd3c3;border-right:1px solid #ddd3c3}.poem-card{height:211px}.card-title{font-size:37px}.hero-title{font-size:35px}.graph-line{min-height:91px}.line-text{font-size:40px}.practice{padding-left:19px;padding-right:19px}}@media(max-width:360px){.page{padding-left:12px;padding-right:12px}.practice{padding-left:10px;padding-right:10px}.line-text{font-size:32px}.graph-line{min-height:79px}.btn{font-size:20px;padding:12px 10px}.card-title{font-size:30px}.hero-title{font-size:28px}.score-rank{font-size:25px}.score-label{font-size:18px}.modal{padding:24px 16px 18px}.modal h2{font-size:25px}.modal .btn{font-size:19px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Keep the difficulty at the same upper-right position as the approved library. */
.difficulty{top:14px;bottom:auto;right:11px;font-size:14px;padding:6px 8px}.stars{font-size:18px;letter-spacing:0}.card-title{display:block;max-width:62%}.card-copy{top:20px}.hero .hero-title{padding-top:0}
/* Reserve the right corner on narrow cards instead of pushing long titles down. */
@media(max-width:419px){.difficulty{flex-direction:column;gap:3px}}

.work-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:78px;height:78px;padding:0;border:1px solid #ffffffb3;border-radius:50%;background:#fffefaed;color:#151715;box-shadow:0 3px 18px #0003;backdrop-filter:blur(3px)}.work-play svg{width:31px;height:31px;margin-left:4px}.video-frame.is-playing .work-play{display:none}.work-video:not([controls])::-webkit-media-controls{display:none!important}

.modal .actions.stacked{flex-direction:column}.modal .actions.stacked .btn{flex:none;width:100%}

/* Keep one clear action beside the title search field. */
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.practice .graph-viewport{user-select:none;-webkit-user-select:none;cursor:grab}
.practice .graph-viewport.dragging{cursor:grabbing}
.practice:has(.record-progress) .graph-viewport{cursor:default}

/* Draw elongation within its allotted space; the font's dash glyph is wider than .72em. */
.unit.intonation_marker{position:relative;color:transparent;font-weight:400}
.unit.intonation_marker:after{content:"";position:absolute;left:.1em;right:.1em;top:54%;border-top:max(2px,.055em) solid var(--red)}

/* These tall marks sit above the Han glyph bottoms on a shared font baseline. */
.unit.punctuation.terminal-mark{transform:translateY(.18em)}

/* Make the continuation visible even where the leading edge has little room. */
.curve path{stroke-width:3}