/* The Cantai plugin window (3.1.2), for the home page's "How it works": the plugin's own styles
   (CantAI-VST/web-ui/src/styles/theme.css), taken as rendered for the states the page shows and scoped to .plug.
   Regenerate rather than edit by hand when the plugin's look changes. */
.plug .pw {
  --base: #0b1120; --well: #080d19; --raised: #111a2e; --sheet: #141e34; --control: #1c2639; --control-h: #243048;
  --sel: #17223a; --hover: rgba(255,255,255,0.04); --scrim: rgba(4,7,14,0.66);
  --rule: rgba(160,180,220,0.08); --rule-strong: rgba(160,180,220,0.14); --edge: 0 0 0 1px rgba(160,180,220,0.12);
  --t1: #e3e8f2; --t2: #8e9ab2; --t3: #848ea3; --t4: #5f6b85;
  --t400: #6baea2; --t300: #84c2b6; --t500: #5a9d91; --ring: #84c2b6;
  --amber: #d8a657; --amber-wash: rgba(216,166,87,0.08); --amber-rule: rgba(216,166,87,0.3);
  --red: #e5484d; --red-text: #f08b8d; --red-wash: rgba(229,72,77,0.05); --red-rule: rgba(229,72,77,0.3);
  --radius-key: 3px; --radius-ctl: 4px; --radius-sheet: 8px; --radius-pill: 999px;
  --shadow-sheet: 0 0 0 1px rgba(160,180,220,0.12), 0 24px 64px rgba(0,0,0,0.55);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
/* The site styles .voice and .steps for its own pages (site.css); inside the window they start from nothing. */
.plug .pw .voice { height: auto; padding: 0; border: 0; border-radius: 0; background: none; gap: 0; }
.plug .pw .steps { border-top: 0; }
@property --br { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes pw-beat { 
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes pw-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes pw-live-ring { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.6); }
}
@keyframes pw-fade-in { 
  0% { opacity: 0; }
}
@keyframes pw-rise-in { 
  0% { opacity: 0; transform: translateY(8px); }
}
@keyframes pw-drop-in { 
  0% { opacity: 0; transform: translateY(-4px); }
}
@keyframes pw-swap-in { 
  0% { opacity: 0; transform: translateY(5px); }
}
@keyframes pw-breathe { 
  0%, 20% { --br: 0; }
  60% { --br: 1; }
  100% { --br: 0; }
}
.plug .pw { position: relative; width: 520px; height: 470px; overflow: hidden; background: var(--base); color: var(--t1); font: 400 13px/1.4 var(--sans); letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; text-align: left; }
.plug .pw * { box-sizing: border-box; }
.plug .pw { user-select: none; }
.plug .pw input { user-select: text; }
.plug :where(.pw) button { font: inherit; color: inherit; background: none; border: 0px; padding: 0px; cursor: pointer; letter-spacing: inherit; }
.plug .pw :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.plug .pw .num { font-variant-numeric: tabular-nums; }
.plug :where(.pw) .rendering { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); height: 18px; }
.plug :where(.pw) .rendering i { width: 6px; height: 6px; border-radius: 50%; background: var(--t400); animation: 1.8s ease-in-out 0s infinite normal none running pw-beat; }
.plug :where(.pw) .btn-pri { height: 24px; padding: 0px 10px; border-radius: var(--radius-ctl); background: var(--t400); font-size: 12px; font-weight: 600; color: var(--base) !important; }
.plug :where(.pw) .btn-pri:hover { background: var(--t300); }
.plug :where(.pw) .main { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0px 14px; }
.plug :where(.pw) .card { width: 384px; margin-top: 12px; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-sheet); padding: 16px 18px 14px; }
.plug :where(.pw) .voice { display: flex; justify-content: center; }
.plug :where(.pw) .voice-btn { display: flex; align-items: center; gap: 12px; border-radius: var(--radius-ctl); padding: 2px 6px 2px 2px; }
.plug :where(.pw) .portrait { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; }
.plug :where(.pw) .portrait img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule-strong); background: var(--control); display: grid; place-items: center; }
.plug :where(.pw) .portrait.singing::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--t400); animation: 1.8s ease-in-out 0s infinite normal none running pw-beat; }
.plug :where(.pw) .vtext { display: flex; flex-direction: column; align-items: flex-start; }
.plug :where(.pw) .vname { font-size: 15px; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 6px; line-height: 20px; }
.plug :where(.pw) .chev { color: var(--t2); }
.plug :where(.pw) .vname svg, .plug :where(.pw) .chev { color: var(--t2); }
.plug :where(.pw) .vsub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.plug :where(.pw) .part { font-size: 13px; color: var(--t2); }
.plug :where(.pw) .rule { height: 1px; background: var(--rule); margin: 14px 0px 12px; }
.plug :where(.pw) .row { display: flex; align-items: baseline; justify-content: space-between; }
.plug :where(.pw) .row-l { font-size: 13px; color: var(--t1); }
.plug :where(.pw) .row-v { font-size: 13px; color: var(--t1); font-variant-numeric: tabular-nums; }
.plug :where(.pw) .slider { position: relative; height: 24px; display: flex; align-items: center; margin-top: 2px; }
.plug :where(.pw) .slider .trk { position: absolute; left: 0px; right: 0px; height: 5px; border-radius: 3px; background: var(--well); }
.plug :where(.pw) .slider .fil { position: absolute; left: 0px; height: 5px; border-radius: 3px; background: var(--t400); }
.plug :where(.pw) .slider .thb { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--t400); transform: translateX(-50%); }
.plug :where(.pw) .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--t3); margin-top: 1px; }
.plug :where(.pw) .steps { width: 384px; margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.plug :where(.pw) .step-l { font-size: 13px; font-weight: 600; color: var(--t1); }
.plug :where(.pw) .step-h { font-size: 12px; color: var(--t2); margin: 2px 0px 7px; }
.plug :where(.pw) .select { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0px 12px 0px 14px; background: var(--control); border: 1px solid var(--rule); border-radius: var(--radius-ctl); font-size: 13px; color: var(--t1); }
.plug :where(.pw) .select:hover { background: var(--control-h); }
.plug :where(.pw) .select.ph { color: var(--t3); }
.plug :where(.pw) .menu { position: absolute; z-index: 45; background: var(--sheet); border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet); padding: 4px; }
.plug :where(.pw) .menu button { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0px 10px; border-radius: var(--radius-key); font-size: 13px; color: var(--t1); }
.plug :where(.pw) .menu button:hover { background: var(--hover); }
.plug :where(.pw) .menu .ck { color: var(--t400); }
.plug :where(.pw) .scrim { position: absolute; inset: 0px; background: var(--scrim); z-index: 44; }
.plug :where(.pw) .vsheet { position: absolute; inset: 8px; z-index: 46; background: var(--sheet); border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.plug :where(.pw) .vs-head { position: relative; padding: 12px 44px 10px 16px; border-bottom: 1px solid var(--rule); }
.plug :where(.pw) .vs-head h2 { margin: 0px; font: 500 20px/1.15 var(--display); letter-spacing: -0.02em; color: var(--t1); }
.plug :where(.pw) .vs-head p { margin: 2px 0px 0px; font-size: 12px; color: var(--t2); }
.plug :where(.pw) .vs-head .x { position: absolute; right: 10px; top: 12px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--t2); border-radius: var(--radius-key); }
.plug :where(.pw) .vs-body { display: grid; grid-template-columns: 136px 1fr; min-height: 0px; }
.plug :where(.pw) .vs-side { padding: 10px 8px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.plug :where(.pw) .vs-search { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0px 8px; margin-bottom: 6px; background: var(--well); border: 1px solid var(--rule-strong); border-radius: var(--radius-ctl); font-size: 12px; color: var(--t3); }
.plug :where(.pw) .vs-side button.cat { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0px 8px; border-radius: var(--radius-ctl); font-size: 12.5px; color: var(--t2); }
.plug :where(.pw) .vs-side button.cat span { color: var(--t3); font-size: 11px; }
.plug :where(.pw) .vs-side button.cat.on { background: var(--sel); color: var(--t1); box-shadow: inset 0 0 0 1px var(--rule); }
.plug :where(.pw) .vs-list { overflow: hidden; background: var(--well); padding: 4px 0px; }
.plug :where(.pw) .vrow { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0px 8px 0px 12px; font-size: 13px; color: var(--t1); cursor: pointer; }
.plug :where(.pw) .vrow:hover { background: var(--hover); }
.plug :where(.pw) .vrow.cur { background: var(--sel); }
.plug :where(.pw) .vrow img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule-strong); }
.plug :where(.pw) .vrow .nm { flex: 1 1 0%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plug :where(.pw) .vrow .pv { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--t2); background: var(--control); }
.plug :where(.pw) .vrow .pv:hover { color: var(--t1); background: var(--control-h); }
.plug :where(.pw) .vrow .nopv { width: 28px; }
@media (prefers-reduced-motion: reduce) { .plug .pw * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .plug :where(.pw) .portrait.singing::after { opacity: 1; } }
.plug :where(.pw) input { font: inherit; color: var(--t1); background: none; border: 0px; outline: none; padding: 0px; width: 100%; letter-spacing: inherit; }
.plug :where(.pw) input::placeholder { color: var(--t3); opacity: 1; }
.plug :where(.pw) .vs-search input { font-size: 12px; }
.plug :where(.pw) .vs-search:focus-within { box-shadow: inset 0 0 0 2px var(--ring); border-color: transparent; }
.plug :where(.pw) .vs-list { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
.plug :where(.pw) .vs-list::-webkit-scrollbar { width: 6px; }
.plug :where(.pw) .vs-list::-webkit-scrollbar-thumb { background: var(--control); border-radius: 3px; }
.plug :where(.pw) .main { padding-top: 88px; }
.plug :where(.pw) .sf04 .vrow .pv { border-radius: var(--radius-ctl); background: transparent; color: var(--t2); }
.plug :where(.pw) .sf04 .vrow .pv:hover { background: var(--hover); color: var(--t1); }
.plug :where(.pw) .work { position: relative; }
.plug :where(.pw) .mf07 .vs-head { display: flex; align-items: baseline; gap: 14px; padding: 13px 44px 11px 16px; }
.plug :where(.pw) .mf07 .vs-head h2 { font-size: 22px; line-height: 1.1; white-space: nowrap; }
.plug :where(.pw) .mf07 .vs-head p { margin: 0px; font-size: 12px; color: var(--t2); white-space: nowrap; }
.plug :where(.pw) .mf07 .vs-head .x { top: 11px; border-radius: var(--radius-ctl); }
.plug :where(.pw) .mf07 .vs-head .x:hover { background: var(--hover); color: var(--t1); }
.plug :where(.pw) .mf07 .vrow { height: 40px; }
.plug :where(.pw) .mf07 .vrow .nm { font-weight: 500; }
.plug :where(.pw) .mf07 .vs-search:focus-within { box-shadow: inset 0 0 0 1px var(--ring); border-color: transparent; }
.plug :where(.pw) .slider .rng { position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: pointer; appearance: none; }
.plug :where(.pw) .slider .rng:disabled { cursor: not-allowed; }
.plug :where(.pw) .slider:focus-within .thb { outline: 2px solid var(--ring); outline-offset: 2px; }
.plug :where(.pw) .voice-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.plug :where(.pw) .vs-search input:focus-visible { outline: none; }
.plug :where(.pw) .r611 .slider.dis .thb { display: none; }
.plug .pw header.bar { position: absolute; top: 8px; left: 8px; right: 8px; height: 40px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 0px 6px 0px 14px; border-radius: 14px; background-color: rgba(255, 255, 255, 0.024); backdrop-filter: blur(20px) saturate(180%); box-shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; }
.plug .pw .bar-logo { height: 20px; width: auto; display: block; margin-right: auto; }
.plug .pw .gear { height: 28px; display: flex; align-items: center; flex-direction: row-reverse; padding: 0px 6px; border-radius: 8px; color: var(--t2); transition: background-color 150ms ease-out, color 150ms ease-out; }
.plug .pw .gear svg { flex: 0 0 auto; }
.plug .pw .gear span { max-width: 0px; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 500; opacity: 0; transition: max-width 220ms cubic-bezier(0.2, 0, 0, 1), margin 220ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease-out; }
.plug .pw .gear:hover, .plug .pw .gear:focus-visible { background-color: rgba(255, 255, 255, 0.06); color: var(--t1); transition-duration: 0s; }
.plug .pw .gear:hover span, .plug .pw .gear:focus-visible span { max-width: 64px; margin-right: 6px; opacity: 1; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .plug .pw header.bar:not(.over) { background-color: rgb(19, 29, 48); backdrop-filter: none; } }
.plug .pw .main { justify-content: flex-start; padding: 48px 0px 0px; }
.plug .pw .main::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(34% 30% at 50% 40%, rgba(222, 232, 255, 0.075), transparent 72%), radial-gradient(46% 78% at 50% -6%, rgba(222, 232, 255, 0.06), transparent 66%); }
.plug .pw .main .work { align-self: stretch; flex: 1 1 0%; display: flex; flex-direction: column; }
.plug .pw .main .work:has(.steps:not([hidden])) { justify-content: center; padding-bottom: 60px; }
.plug .pw .main .steps { align-self: center; width: 440px; margin-top: 20px; }
.plug .pw .main .card { flex: 1 1 0%; width: 100%; margin: 0px; padding: 0px; background: none; border: 0px; border-radius: 0px; display: grid; grid-template-rows: 1fr auto; }
.plug .pw .card > * { position: relative; }
.plug .pw .card > .rule { display: none; }
.plug .pw .card .voice { grid-column: 1 / -1; align-self: center; justify-content: center; }
.plug .pw .voice-btn { flex-direction: column; gap: 12px; padding: 8px 22px 10px; border-radius: 14px; }
.plug .pw .voice-btn > * { animation: pw-swap-in 260ms var(--ease) backwards; }
.plug .pw .voice-btn > .vtext { animation-delay: 40ms; }
.plug .pw .portrait { width: 112px; height: 112px; }
.plug .pw .portrait img { width: 108px; height: 108px; border: 0px; box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 18px 36px; transition: transform 400ms var(--ease); }
.plug .pw .voice-btn:hover .portrait img { transform: scale(1.04); }
.plug .pw .vtext { align-items: center; flex: 0 0 auto; }
.plug .pw .vname { font: 500 38px/1 var(--display); letter-spacing: -0.005em; gap: 8px; }
.plug .pw .vname .chev { margin-top: 6px; transition: transform 200ms var(--ease), color 200ms var(--ease); }
.plug .pw .voice-btn:hover .vname .chev { color: var(--t1); transform: translateY(2px); }
.plug .pw .vsub { flex-direction: column; gap: 10px; margin-top: 4px; }
.plug .pw .vtext .part { font: italic 500 19px/1.2 var(--display); letter-spacing: 0px; color: var(--t300); }
.plug .pw .vtext .part em { font-style: inherit; }
.plug .pw .vtext .part .sings { color: var(--t2); }
.plug .pw .card .voice::before { content: ""; position: absolute; left: -40px; right: -40px; top: 18px; height: 116px; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='116'%3E%3Cg stroke='%2384c2b6' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M0 30h240M0 44h240M0 58h240M0 72h240M0 86h240'/%3E%3C/g%3E%3C/svg%3E") 0px 50% / 240px 116px repeat-x; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, transparent); }
.plug :where(.pw) .lang { position: relative; display: inline-flex; }
.plug :where(.pw) .lang-chip { height: 26px; display: inline-flex; align-items: center; gap: 7px; padding: 0px 10px 0px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 12px; font-weight: 500; color: var(--t1); white-space: nowrap; background: rgba(11, 17, 32, 0.35); }
.plug :where(.pw) .lang-chip:hover { background: rgba(255, 255, 255, 0.06); }
.plug :where(.pw) .lang-chip .chev { color: var(--t2); }
.plug .pw .lang-menu { position: absolute; left: calc(50% - 150px); z-index: 46; width: 300px; overflow-y: auto; scrollbar-width: thin; }
.plug .pw .lang-menu button { display: grid; grid-template-columns: minmax(0px, 1fr) 14px; gap: 10px; height: 30px; text-align: left; }
.plug .pw .lang-menu .ck { color: var(--t400); display: grid; place-items: center; }
.plug :where(.pw) .lang-name { display: flex; align-items: center; gap: 8px; min-width: 0px; }
.plug :where(.pw) .lang-tag { padding: 3px 7px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 11px; font-weight: 500; line-height: 1; color: var(--t3); white-space: nowrap; }
.plug .pw .rv-wrap, .plug .pw .vrow-wrap { background: var(--well); border-top: 1px solid rgba(160, 180, 220, 0.1); z-index: 1; }
.plug .pw .rv-wrap { padding: 15px 24px 16px; }
.plug .pw .main .card { grid-template-columns: 1fr 0fr; transition: grid-template-columns 220ms cubic-bezier(0.2, 0, 0, 1); }
.plug .pw .main .card.has-choir { grid-template-columns: 1fr 1fr; }
.plug .pw .vrow-wrap { min-width: 0px; overflow: hidden; margin-left: -1px; border-left: 1px solid transparent; }
.plug .pw .has-choir .vrow-wrap { border-left-color: rgba(160, 180, 220, 0.1); }
.plug .pw .vrow-in { width: 260px; padding: 15px 24px 16px; opacity: 0; transform: translateX(4px); transition: opacity 100ms ease-in, transform 100ms ease-in; }
.plug .pw .has-choir .vrow-in { opacity: 1; transform: none; transition: opacity 150ms ease-out 60ms, transform 220ms cubic-bezier(0.2, 0, 0, 1) 60ms; }
.plug .pw .slider { height: 22px; margin-top: 4px; }
.plug .pw .slider .trk { height: 4px; border-radius: 2px; background: rgba(160, 180, 220, 0.13); }
.plug .pw .slider .fil { height: 4px; border-radius: 2px; }
.plug .pw .slider .thb { width: 14px; height: 14px; background: rgb(230, 235, 243); box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.5) 0px 1px 3px; transition: scale 120ms var(--ease); }
.plug .pw .slider:hover .thb { scale: 1.1; }
.plug .pw .ends { font-size: 10.5px; color: var(--t4); margin-top: 2px; }
.plug .pw .vrow-wrap .slider::after { content: ""; position: absolute; left: 0px; right: 0px; top: calc(50% + 6px); height: 4px; pointer-events: none; background: linear-gradient(to right, rgba(160, 180, 220, 0.28) 1px, transparent 1px) 0px 0px / calc(14.2857% - 0.142857px) 100% repeat-x; }
.plug .pw .row-l { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
.plug .pw .row-v { font-size: 16px; font-weight: 500; color: var(--t1); }
.plug .pw .rendering { font-size: 12px; color: var(--t2); }
.plug .pw .rendering i { position: relative; animation: auto ease 0s 1 normal none running none; opacity: 1; width: 6px; height: 6px; }
.plug .pw .rendering i::after { content: ""; position: absolute; inset: 0px; border-radius: 50%; background: rgba(107, 174, 162, 0.5); animation: 1.4s ease-out 0s infinite normal none running pw-live-ring; }
.plug .pw .btn-pri { height: 28px; padding: 0px 14px; border-radius: 999px; }
.plug .pw .select { border-radius: 8px; background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.plug .pw .select:hover { background: rgba(255, 255, 255, 0.09); }
.plug .pw .menu { border-radius: 10px; padding: 5px; animation: pw-drop-in 120ms var(--ease); }
.plug .pw .menu button { border-radius: 6px; }
.plug .pw .vsheet { border-radius: 12px; animation: pw-rise-in 200ms var(--ease); }
.plug .pw .scrim { animation: 200ms ease-out 0s 1 normal none running pw-fade-in; }
.plug .pw .vs-side button.cat { border-radius: 6px; }
.plug .pw .vs-search { height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.plug .pw .vrow { margin: 0px 6px; padding: 0px 6px 0px 8px; border-radius: 6px; }
.plug .pw .vrow .pv { opacity: 0; transition: opacity 120ms; }
.plug .pw .vrow:hover .pv, .plug .pw .vrow.cur .pv, .plug .pw .vrow .pv:focus-visible { opacity: 1; }
.plug .pw header.bar { top: 0px; left: 0px; right: 0px; height: 44px; padding: 0px 10px 0px 18px; gap: 8px; border-radius: 0px; background: none; backdrop-filter: none; box-shadow: rgba(255, 255, 255, 0.06) 0px -1px 0px inset; }
.plug .pw .bar-logo { height: 17px; opacity: 0.92; }
.plug .pw .gear { height: 28px; padding: 0px 6px; border-radius: 6px; color: rgba(255, 255, 255, 0.55); transition: color 320ms cubic-bezier(0.4, 0, 0.6, 1), background-color 200ms ease-out; }
.plug .pw .gear:hover, .plug .pw .gear:focus-visible { color: rgba(255, 255, 255, 0.92); background-color: rgba(255, 255, 255, 0.06); transition-duration: 320ms, 200ms; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .plug .pw header.bar:not(.over) { background: var(--base); } }
.plug .pw header.bar .rendering { position: absolute; left: 50%; translate: -50%; gap: 7px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); animation: 300ms ease-out 0s 1 normal none running pw-fade-in; }
.plug .pw header.bar .rendering i { width: 11px; height: 11px; border-radius: 50%; background: none; box-shadow: none; border-width: 1.5px; border-style: solid; border-color: rgba(255, 255, 255, 0.62) rgba(255, 255, 255, 0.16) rgba(255, 255, 255, 0.16); border-image: initial; animation: 0.9s linear 0s infinite normal none running pw-spin; }
.plug .pw header.bar .rendering i::after { display: none; }
.plug .pw .voice-btn > .portrait { animation: pw-swap-in 260ms var(--ease) backwards, pw-breathe 4.8s cubic-bezier(.37,0,.63,1) infinite paused; }
.plug .pw .voice-btn > .portrait.singing { animation-play-state: running, running; }
.plug .pw .portrait::before, .plug .pw .portrait::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 700ms cubic-bezier(0.33, 0, 0.67, 1); }
.plug .pw .portrait::before { inset: 2px; scale: calc(1 + .025 * var(--br)); box-shadow: 0 0 0 1px rgb(232 240 255 / calc(.14 + .30 * var(--br))), 0 0 34px 6px rgb(222 232 255 / calc(.07 + .22 * var(--br))); }
.plug .pw .portrait::after { inset: 2px; border: 0px; animation: auto ease 0s 1 normal none running none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / calc(.06 + .18 * var(--br))), inset 0 0 26px rgb(232 240 255 / calc(.02 + .20 * var(--br))); }
.plug .pw .portrait.singing::before, .plug .pw .portrait.singing::after { opacity: 1; transition-duration: 400ms; }
@media (prefers-reduced-motion: reduce) { .plug .pw .portrait { --br: .6; } }
.plug .pw .vrow { height: 40px; }
.plug .pw .vrow.cur { background: none; }
.plug .pw .vrow.cur:hover, .plug .pw .vrow:hover { background: rgba(255, 255, 255, 0.05); }
.plug .pw .vrow:hover { background: rgba(255, 255, 255, 0.05); }
.plug .pw .vrow .av { position: relative; width: 28px; height: 28px; flex: 0 0 auto; }
.plug .pw .vrow .av img { display: block; border: 0px; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.plug .pw .vrow.cur .av img { outline: 1.5px solid var(--t300); outline-offset: 2px; }
.plug .pw .vrow .nm { font-weight: 400; color: rgba(227, 232, 242, 0.88); }
.plug .pw .vrow.cur .nm { font-weight: 600; color: rgb(244, 247, 251); }
.plug .pw .vrow .pv, .plug .pw .vrow:hover .pv, .plug .pw .vrow.cur .pv { opacity: 1; width: auto; height: 28px; padding: 0px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.72); }
.plug .pw .vrow .pv:hover { background: none; }
.plug .pw .vrow .pvl { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); opacity: 0; transition: opacity 150ms ease-out; }
.plug .pw .vrow:hover .pvl { opacity: 1; }
.plug .pw .vrow .pvc { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out; }
.plug .pw .vrow .pvc > svg:not(.arc) { margin-left: 1px; }
.plug .pw .vrow:hover .pvc { background: rgba(255, 255, 255, 0.92); color: var(--base); box-shadow: none; }
.plug .pw .vrow .pvc .arc { position: absolute; inset: -1px; width: 28px; height: 28px; rotate: -90deg; fill: none; stroke: var(--t300); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.plug .pw .vrow .pv:focus-visible { outline: none; }
.plug .pw .vrow .pv:focus-visible .pvc { box-shadow: 0 0 0 2px var(--ring); }
.plug .pw .vrow .nopv { width: 26px; }
.plug .pw .vrow-ph { margin: 0px 6px 2px; padding: 2px 4px 6px 46px; display: flex; align-items: center; gap: 10px; }
.plug .pw .vrow-ph .phx { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
.plug .pw .vrow-ph .phl { font-size: 13px; color: rgba(227, 232, 242, 0.88); }
.plug .pw .vrow-ph .phs { font-size: 11.5px; line-height: 1.3; color: var(--t3); }
.plug .pw .switch { position: relative; width: 30px; height: 18px; flex: 0 0 auto; border-radius: 999px; background: rgba(160, 180, 220, 0.13); transition: background-color 150ms ease-out; }
.plug .pw .switch[aria-checked="true"] { background: var(--t400); }
.plug .pw .switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgb(230, 235, 243); box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.5) 0px 1px 3px; transition: translate 150ms var(--ease); }
.plug .pw .switch[aria-checked="true"] i { translate: 12px; }
.plug .pw .switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.plug .pw .vtext .part .phr { color: var(--t2); }
.plug .pw .vs-head { padding: 14px 44px 10px 16px; border-bottom: 0px; }
.plug .pw .vs-head h2 { font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em; }
.plug .pw .vs-head p { font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }
.plug .pw .vs-head .x { top: 9px; }
.plug .pw .vs-side { padding: 0px 8px 10px 10px; border-right: 0px; }
.plug .pw .vs-side button.cat.on { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.plug .pw .vs-list { margin: 0px 10px 10px 0px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); }
.plug .pw .vrow { height: 52px; border-radius: 8px; }
.plug .pw .vrow .av, .plug .pw .vrow .av img { width: 36px; height: 36px; }
.plug .pw .vrow .vx { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px; }
.plug .pw .vrow .vx .nm { flex: 0 0 auto; font-weight: 500; line-height: 1.3; }
.plug .pw .vrow.cur .vx .nm { font-weight: 600; }
.plug .pw .vrow .vt { font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plug .pw .vrow-ph { padding-left: 54px; }
.plug .pw .vrow-done { margin: 0px 6px 8px; padding: 0px 4px; display: flex; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .plug .pw *, .plug .pw .main::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .plug .pw *, .plug .pw .main::before, .plug .pw .card .voice::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } }
.plug .pw [hidden] { display: none !important; }
.plug .pw img { max-width: none; }