:root{--bg: #0d0b09;--surface: #15120f;--surface-2: #1c1814;--line: rgba(232, 196, 128, .14);--line-strong: rgba(232, 196, 128, .32);--text: #efe6d6;--muted: #a3978429;--muted-text: #a39784;--gold: #f4c770;--gold-deep: #c9973f;--t1: #ffcc61;--t2: #73db8c;--t3: #7aa8ff;--t4: #ff7566;--t5: #c9bfae;--font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;--font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--r: 14px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 22px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased}body{min-height:100dvh;background:radial-gradient(1200px 600px at 75% -10%,rgba(244,199,112,.07),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(122,168,255,.04),transparent 60%),var(--bg)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.muted{color:var(--muted-text)}.small{font-size:var(--text-sm)}.app{max-width:1280px;margin:0 auto;padding:20px 20px 32px}.top{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 18px}.brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--gold);letter-spacing:.08em}.brand-sub{color:var(--muted-text);font-size:var(--text-sm);letter-spacing:.04em}.layout{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}.panel{background:linear-gradient(180deg,var(--surface),#120f0c);border:1px solid var(--line);border-radius:var(--r);padding:18px}.composer{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}.tab{background:none;border:0;padding:8px 0;border-radius:8px;font-size:var(--text-sm);color:var(--muted-text)}.tab.is-on{background:var(--surface-2);color:var(--gold);box-shadow:inset 0 0 0 1px var(--line-strong)}.field{display:flex;flex-direction:column;gap:6px}textarea{width:100%;resize:vertical;min-height:120px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--font-display);font-size:18px;line-height:1.7;letter-spacing:.06em}textarea:focus{border-color:var(--line-strong);outline:none}.field-foot{display:flex;justify-content:space-between;gap:10px;font-size:var(--text-xs)}.counter{font-variant-numeric:tabular-nums;color:var(--muted-text)}.counter.over{color:var(--t4)}.examples{display:flex;flex-wrap:wrap;gap:6px}.chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:var(--text-xs);color:var(--muted-text)}.chip:hover{border-color:var(--line-strong);color:var(--text)}.styles{border:0;padding:0;margin:0}.styles legend{font-size:var(--text-xs);color:var(--muted-text);margin-bottom:8px;letter-spacing:.08em}.style-list{display:grid;gap:8px}.style{text-align:left;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}.style:hover{border-color:var(--line-strong)}.style.is-on{border-color:var(--gold-deep);background:linear-gradient(90deg,rgba(244,199,112,.09),transparent)}.style-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--bg);background:var(--gold);font-size:15px}.style:not(.is-on) .style-mark{background:var(--surface-2);color:var(--muted-text);box-shadow:inset 0 0 0 1px var(--line)}.style-name{font-size:var(--text-sm);font-weight:600}.style-desc{font-size:var(--text-xs);color:var(--muted-text);margin-top:2px}.btn-primary{border:0;border-radius:10px;padding:13px 16px;background:linear-gradient(180deg,#f6cf82,#e0ad52);color:#1b140a;font-weight:700;letter-spacing:.12em;font-size:var(--text-base)}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.status{min-height:20px;margin:-4px 0 0;font-size:var(--text-xs);color:var(--muted-text)}.status.err{color:var(--t4)}.stage{display:flex;flex-direction:column;gap:14px;min-width:0}.stage-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.stage-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold);letter-spacing:.1em;font-weight:700}.stage-head p{margin:4px 0 0}.transport{display:flex;align-items:center;gap:12px;flex-shrink:0}.btn-round{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--gold);display:grid;place-items:center}.btn-round:hover:not(:disabled){background:#251f19}.time{font-variant-numeric:tabular-nums;font-size:var(--text-sm);color:var(--muted-text);min-width:88px;text-align:right}.progress{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}.verse{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px}.vline{display:flex;flex-wrap:nowrap;gap:var(--gap, 6px);align-items:flex-end}.vch{position:relative;background:none;border:0;padding:4px 2px 2px;width:var(--cw, 58px);display:flex;flex-direction:column;align-items:center;border-radius:8px;transition:opacity .25s}.vch .c{font-family:var(--font-display);font-weight:700;font-size:var(--cs, 40px);line-height:1.15;color:var(--gold);transition:color .2s,text-shadow .2s,transform .2s}.vch .p{font-size:max(12px,calc(var(--cs, 40px) * .34));line-height:1.3}.vch .b{position:absolute;top:0;right:0;font-size:10px;line-height:1;padding:2px 3px;border-radius:4px;background:#ff756629;color:var(--t4)}.vch .b.e{background:#f4c77029;color:var(--gold);right:auto;left:0}.verse.playing .vch{opacity:.32}.verse.playing .vch.done{opacity:.85}.verse.playing .vch.now{opacity:1}.vch.now .c{color:#fff3d6;text-shadow:0 0 22px rgba(244,199,112,.75);transform:translateY(-2px)}.vch.sel{background:#f4c77014;box-shadow:inset 0 0 0 1px var(--line-strong)}.vch:hover .c{color:#ffe1a6}.punct{font-family:var(--font-display);color:var(--muted-text);font-size:calc(var(--cs, 40px) * .6);align-self:center;width:.6em}.roll-wrap{background:#0f0d0b;border:1px solid var(--line);border-radius:12px;padding:10px 10px 6px}.roll-caption{margin:0 0 6px 4px;font-size:var(--text-xs)}#roll{width:100%;height:230px;display:block}.card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;min-height:132px}.card-ch{font-family:var(--font-display);font-weight:700;font-size:72px;line-height:1;min-width:80px;text-align:center}.card-head{font-size:var(--text-lg);font-weight:600;margin-bottom:6px}.card-row{display:grid;grid-template-columns:44px 1fr;gap:10px;font-size:var(--text-sm);line-height:1.75}.card-row span:first-child{color:var(--muted-text)}.editor{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}.editor .lbl{font-size:var(--text-xs);color:var(--muted-text);margin-right:2px}.tbtn{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:4px 9px;font-size:var(--text-xs)}.tbtn.is-on{border-color:currentColor}.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--text-xs);color:var(--muted-text)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.downloads{display:flex;gap:8px;flex-wrap:wrap}.btn-ghost{background:transparent;border:1px solid var(--line-strong);border-radius:10px;padding:9px 14px;font-size:var(--text-sm);color:var(--text)}.btn-ghost:hover:not(:disabled){background:var(--surface-2)}.foot{padding:18px 4px 0;line-height:1.7}.foot p{margin:0}@media (max-width: 960px){.layout{grid-template-columns:1fr}.composer{position:static}}@media (max-width: 520px){.vch .b{font-size:0;width:6px;height:6px;padding:0;border-radius:50%;background:var(--t4);top:3px;right:1px}.vch .b.e{background:var(--gold);left:1px;right:auto}.app{padding:12px 12px 24px}.panel{padding:14px}#roll{height:190px}.card{grid-template-columns:1fr;gap:8px}.card-ch{font-size:52px;text-align:left}.stage-head{flex-direction:column}.transport{width:100%;justify-content:space-between}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}