.demo .note{white-space:pre-wrap;word-break:normal;font-size:17px;line-height:1.6;position:absolute;top:118px;left:20px;right:20px}.demo .note .nt{white-space:normal;margin-bottom:8px;font-size:22px;font-weight:700;line-height:1.3;display:block}.demo .note .caret{vertical-align:-.2em;background:var(--ink);width:2px;height:1.1em;margin-left:1px;animation:1s steps(2,end) infinite nkCaret;display:inline-block}@keyframes nkCaret{to{opacity:0}}.demo .note .dict{background:var(--surface);height:28px;color:var(--rec);border-radius:14px;align-items:center;gap:3px;margin:6px 0 0;padding:0 10px;display:none}.demo .note .dict.in{display:inline-flex}.demo .note .dict svg{width:16px;height:18px;margin-right:3px}.demo .note .dict i{background:currentColor;border-radius:2px;width:3px;height:10px;animation:.5s ease-in-out infinite alternate nkBar;display:block}.demo .note .dict i:nth-child(3){animation-delay:.12s}.demo .note .dict i:nth-child(4){height:14px;animation-delay:.24s}.demo .note .dict i:nth-child(5){height:7px;animation-delay:60ms}.demo .subtitle{color:#fff;text-align:center;opacity:0;background:#37352fe0;border-radius:10px;padding:9px 14px;font-size:17px;font-weight:600;line-height:1.4;transition:opacity .2s,transform .2s;position:absolute;bottom:318px;left:16px;right:16px;transform:translateY(6px)}.demo .subtitle.in{opacity:1;transform:none}@keyframes nkBar{to{transform:scaleY(1.8)}}.demo .kbd{background:var(--hl);border-top:1px solid var(--line);height:302px;padding:8px 3px 0;position:absolute;bottom:0;left:0;right:0}.demo .kbd .r{justify-content:center;gap:6px;margin-bottom:11px;display:flex}.demo .kbd .k{background:var(--paper);width:33px;height:42px;box-shadow:0 1px 0 var(--line);border-radius:5px}.demo .kbd .k.fn{background:var(--scrim)}.demo .kbd .k.w2{width:87px}.demo .kbd .k.sp{width:190px}.demo .kbd .strip{justify-content:space-between;height:44px;padding:0 22px;display:flex;position:absolute;bottom:34px;left:0;right:0}.demo .kbd .strip>span{width:44px;height:44px;color:var(--sub);place-items:center;display:grid;position:relative}.demo .kbd .strip svg{width:24px;height:26px}.demo .kbd .mic-key.on{color:var(--rec)}.demo .set{z-index:2;background:var(--surface);transition:transform .35s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;transform:translate(100%)}.demo .set.root,.demo .set.in{transform:none}.demo .set .large{top:106px}.demo .set .bar{background:var(--surface);justify-content:flex-start;height:52px}.demo .set .bar .ttl{font-size:17px;font-weight:600;position:absolute;left:50%;transform:translate(-50%)}.demo .set .grp{background:var(--paper);border-radius:10px;position:absolute;left:16px;right:16px;overflow:hidden}.demo .set .srow{justify-content:space-between;align-items:center;height:44px;padding:0 16px;font-size:17px;display:flex;position:relative}.demo .set .srow+.srow:before{content:"";background:var(--line);height:1px;position:absolute;top:0;left:16px;right:0}.demo .set .srow svg{width:14px;height:14px;color:var(--tertiary)}.demo .set .srow.ph i{width:var(--w,120px);background:var(--hl);border-radius:5px;height:10px;display:block}.demo .toggle{transition:background-color .25s}.demo .toggle:after{transition:right .25s}.demo .toggle.off{background:var(--line)}.demo .toggle.off:after{right:22px}.demo .ntool{border-top:1px solid var(--line);background:var(--paper);height:50px;color:var(--sub);justify-content:space-around;align-items:center;padding:0 12px;display:flex;position:absolute;bottom:34px;left:0;right:0}.demo .ntool span{place-items:center;width:44px;height:44px;display:grid;position:relative}.demo .ntool span i{background:var(--hl);border-radius:5px;width:22px;height:22px;display:block}.demo .ntool svg{width:24px;height:24px}.demo .menu{background:var(--paper);opacity:0;pointer-events:none;border-radius:14px;transition:opacity .2s,transform .2s;position:absolute;bottom:96px;left:16px;right:16px;overflow:hidden;transform:translateY(8px);box-shadow:0 8px 30px #37352f2e}.demo .menu.in{opacity:1;transform:none}.demo .menu .srow{align-items:center;height:44px;padding:0 16px;font-size:17px;display:flex;position:relative}.demo .menu .srow+.srow:before{content:"";background:var(--line);height:1px;position:absolute;top:0;left:16px;right:0}.demo .menu .srow.ph i{width:var(--w,120px);background:var(--hl);border-radius:5px;height:10px;display:block}.demo .rec{background:var(--surface);opacity:0;border-radius:14px;margin-top:12px;padding:14px 16px 16px;transition:opacity .25s}.demo .rec.in{opacity:1}.demo .rec .tm{font-family:var(--ui);font-variant-numeric:tabular-nums;color:var(--sub);font-size:13px}.demo .rec .wave{align-items:center;gap:3px;height:36px;margin:8px 0 12px;display:flex}.demo .rec .wave i{width:3px;height:calc(var(--a,.3)*100%);background:var(--line);transform-origin:50%;border-radius:2px;display:block}.demo .rec.on .wave i{background:var(--rec);animation:.6s ease-in-out infinite alternate nkWave;animation-delay:calc(var(--i)*-.07s)}@keyframes nkWave{to{transform:scaleY(.35)}}.demo .rec .ctl{justify-content:space-between;align-items:center;display:flex}.demo .rec .btn-rec{background:var(--paper);border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:relative;box-shadow:0 1px 6px #37352f1f}.demo .rec .btn-rec:after{content:"";background:var(--rec);border-radius:50%;width:20px;height:20px;transition:border-radius .2s,transform .2s}.demo .rec.on .btn-rec:after{border-radius:4px;transform:scale(.8)}.demo .rec .btn-tr{background:var(--paper);height:32px;color:var(--sub);border-radius:16px;align-items:center;padding:0 14px;font-size:15px;font-weight:600;display:flex;position:relative;box-shadow:0 1px 6px #37352f1f}.demo .rec .btn-tr.on{color:var(--ink)}.demo .rec .tr{border-top:1px solid var(--line);white-space:pre-wrap;margin-top:12px;padding-top:12px;font-size:15px;line-height:1.6;display:none}.demo .rec .tr.in{display:block}