.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.demo-card{display:block;background:var(--panel);color:var(--text-dark);border-radius:22px;padding:26px 24px;text-decoration:none;box-shadow:0 16px 48px #00000073;transition:transform .12s,box-shadow .12s}.demo-card:hover{transform:translateY(-3px);box-shadow:0 22px 60px #0000008c}.demo-icon{font-size:30px;margin-bottom:12px}.demo-card h3{margin:0 0 8px;font-size:17px;display:flex;align-items:center;justify-content:space-between}.demo-arrow{color:var(--subtle);font-weight:400;transition:color .12s}.demo-card:hover .demo-arrow{color:var(--yellow)}.demo-card p{margin:0 0 14px;color:var(--subtle);font-size:13px;line-height:1.6}.demo-tags{display:flex;gap:6px;flex-wrap:wrap}.tag{border:1px solid #ffec8a;background:var(--yellow-soft);color:#854d0e;font-size:11px;padding:2px 10px;border-radius:999px}.home-empty{color:var(--subtle-dark)}:root{--bg: #0a0a0a;--panel: #ffffff;--text-dark: #18181b;--text-on-black: #e4e4e7;--subtle: #71717a;--subtle-dark: #a1a1aa;--border: #e4e4e7;--field-bg: #f4f4f5;--yellow: #ffc700;--yellow-hover: #ffd41a;--yellow-soft: #fff9db;--danger: #dc2626;--ok-bg: #ecfdf5;--ok-text: #047857;--err-bg: #fef2f2;--err-text: #b91c1c;--info-bg: #fffbeb;--info-text: #854d0e}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(1200px 500px at 50% -200px,rgba(255,199,0,.08),transparent 60%),var(--bg);color:var(--text-on-black);font:15px/1.65 Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}.page{max-width:760px;margin:0 auto;padding:0 20px 56px}.page.wide{max-width:1080px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0}.brand{font-weight:600;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;color:var(--text-on-black);text-decoration:none}.brand-mark{color:var(--yellow);font-weight:800;font-size:18px}.topbar-links{display:flex;gap:10px}.pill-btn{display:inline-flex;align-items:center;font:inherit;border-radius:999px;padding:8px 18px;font-size:13px;text-decoration:none;cursor:pointer;border:1px solid transparent}.pill-btn.ghost{color:var(--text-on-black);border-color:#e4e4e34d;background:transparent;transition:border-color .15s,color .15s}.pill-btn.ghost:hover{border-color:var(--yellow);color:var(--yellow)}.hero{padding:44px 0 36px}.hero h1{margin:0 0 18px;font-size:40px;line-height:1.25;font-weight:700;letter-spacing:-.5px;color:#fff}.hero-sub{margin:0;max-width:620px;color:var(--subtle-dark);font-size:15px}.hero-sub a{color:var(--yellow)}.panel{background:var(--panel);color:var(--text-dark);border-radius:28px;padding:32px;box-shadow:0 24px 80px #0000008c}.step{padding:4px 0}.step-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.step-head h2{margin:0;font-size:17px;font-weight:600}.step-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--yellow);color:#111;font-size:13px;font-weight:700;flex:none}.divider{border:none;border-top:1px solid #f0f0f1;margin:26px 0}.note{color:var(--subtle);font-size:13px;margin:0 0 18px}.row{display:flex;gap:10px;flex-wrap:wrap}.row.space-between{justify-content:space-between;align-items:center}.field{margin-bottom:16px}.field>label{display:block;font-weight:500;font-size:14px;margin-bottom:7px}.req{color:var(--danger)}.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.label-row label{margin:0}.seg{display:inline-flex;background:var(--field-bg);border-radius:999px;padding:4px;margin-bottom:16px}.seg-item{cursor:pointer}.seg-item input{display:none}.seg-item span{display:inline-block;padding:7px 18px;border-radius:999px;font-size:13px;font-weight:500;color:var(--subtle);transition:all .15s}.seg-item input:checked+span{background:var(--yellow);color:#111}input[type=text],input[type=password],input[type=url],select,textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:12px;background:var(--field-bg);color:var(--text-dark);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}.row input[type=password],.row select{flex:1 1 220px;width:auto}input:focus,select:focus,textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px #ffc70038;background:#fff}textarea{resize:vertical}.check{display:flex;align-items:center;gap:7px;color:var(--subtle);font-size:13px;margin-top:10px;cursor:pointer;font-weight:400}.check input{accent-color:var(--yellow)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text-dark);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .05s}.btn:hover:not(:disabled){border-color:var(--yellow)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:600}.btn.primary:hover:not(:disabled){background:var(--yellow-hover);border-color:var(--yellow-hover)}.btn.ghost{border-color:var(--border);background:transparent}.btn.ghost:hover:not(:disabled){border-color:var(--yellow);background:var(--yellow-soft)}.btn.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:var(--err-bg)}.btn.small{padding:5px 14px;font-size:13px}.btn.big{width:100%;padding:13px;font-size:15px}.btn-sub{display:block;font-size:11px;font-weight:400;opacity:.75}.dropzone{border:1.5px dashed #d4d4d8;border-radius:16px;padding:26px 20px;text-align:center;margin-bottom:18px;transition:border-color .15s,background .15s;cursor:pointer}.dropzone:hover,.dropzone.dragover{border-color:var(--yellow);background:#fffdf2}.dropzone input[type=file]{display:none}.dz-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:999px;background:var(--yellow-soft);color:#854d0e;font-size:20px;line-height:44px}.dz-text{font-size:14px;color:var(--text-dark)}.dz-text strong{font-weight:600}.dz-hint{color:var(--subtle);font-size:12px;margin-top:4px}.dropzone .ref-player{text-align:left}.dropzone .hint{margin-top:8px}.ref-player,.result-player{width:100%;margin-top:12px;height:40px}.hint{color:var(--subtle);font-size:12px}.msg{margin-top:14px;padding:10px 14px;border-radius:12px;font-size:13px;word-break:break-all;white-space:pre-line}.msg.ok{background:var(--ok-bg);color:var(--ok-text)}.msg.err{background:var(--err-bg);color:var(--err-text)}.msg.info{background:var(--info-bg);color:var(--info-text)}.voice-hint-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:14px}.pill-label{flex:none;border:1px solid #ffec8a;background:var(--yellow-soft);border-radius:999px;padding:2px 12px;font-size:12px;color:#854d0e;font-weight:500}.saved-box{border-top:1px solid #f0f0f1;margin-top:22px;padding-top:16px}.saved-box summary{cursor:pointer;font-weight:500;font-size:14px;color:var(--subtle);list-style-position:inside}.saved-box summary:hover{color:var(--text-dark)}.saved-box[open] summary{color:var(--text-dark)}.saved-box .row{margin-top:14px}.result-head{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.result-head h3{margin:0;font-size:15px}.page-foot{color:#52525b;font-size:12px;text-align:center;margin-top:28px}.dlg-overlay{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.dlg-panel{background:var(--panel);color:var(--text-dark);border-radius:20px;padding:26px;max-width:460px;width:100%;box-shadow:0 24px 80px #0009}.dlg-title{margin:0 0 10px;font-size:16px}.dlg-message{font-size:14px;line-height:1.7;white-space:pre-line;word-break:break-all}.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.page-loading{text-align:center;color:var(--subtle-dark);padding:80px 0}@media(max-width:560px){.hero h1{font-size:30px}.panel{padding:22px;border-radius:22px}}