.pw-demo{--panel-2: #0c121d;--border: rgba(130, 165, 210, .13);--border-strong: rgba(130, 165, 210, .26);--text: #e9eef7;--text-2: #97a4ba;--text-3: #5e6b80;--text-4: #465162;--accent: #a9d4ff;--accent-soft: rgba(120, 180, 255, .12);--accent-line: rgba(120, 180, 255, .42);--accent-glow: rgba(120, 180, 255, .5);--danger: #e8748a;--mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--disp: "Chakra Petch", "JetBrains Mono", monospace;--radius-sm: 7px;background:radial-gradient(700px 200px at 50% -80px,rgba(60,110,180,.12),transparent 70%),linear-gradient(180deg,#0a1018,#05070c 60%);border:1px solid var(--border);border-radius:11px;padding:22px;margin:.6rem 0 1.4rem;font-family:var(--mono);font-size:13px;color:var(--text)}.pw-demo *{box-sizing:border-box}.sl-markdown-content .pw-demo *{margin:0}.pw-demo .pw-chips{display:flex;flex-wrap:wrap;gap:7px}.pw-demo .pw-chip{appearance:none;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-2);background:#ffffff06;border:1px solid var(--border);border-radius:999px;padding:6px 13px;transition:.13s;display:inline-flex;align-items:center;gap:7px}.pw-demo .pw-chip:hover{border-color:var(--border-strong);color:var(--text)}.pw-demo .pw-chip[data-sel=true]{border-color:var(--oc, var(--accent));color:var(--oc, var(--accent));background:color-mix(in srgb,var(--oc, var(--accent)) 12%,transparent);box-shadow:0 0 18px -9px var(--oc, var(--accent))}.pw-demo .pw-chip .swatch{width:8px;height:8px;border-radius:50%;background:var(--oc, var(--text-3));flex:0 0 auto;opacity:.55}.pw-demo .pw-chip[data-sel=true] .swatch{opacity:1;box-shadow:0 0 7px var(--oc)}.pw-demo .pw-chip.ms .tick{display:block;box-sizing:border-box;width:13px;height:13px;border:1.5px solid currentColor;border-radius:3px;opacity:.45;position:relative;flex:0 0 auto;transition:.12s}.pw-demo .pw-chip.ms[data-sel=true] .tick{opacity:1;border-color:var(--oc, var(--accent));background:color-mix(in srgb,var(--oc, var(--accent)) 18%,transparent)}.pw-demo .pw-chip.ms[data-sel=true] .tick:before{content:"";position:absolute;left:3.5px;top:.5px;width:3px;height:7px;border:solid var(--oc, var(--accent));border-width:0 2px 2px 0;transform:rotate(42deg)}.pw-demo .pw-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#0000004d}.pw-demo .pw-seg-btn{appearance:none;cursor:pointer;padding:7px 14px;border:0;border-left:1px solid var(--border);background:none;color:var(--text-2);font-family:var(--mono);font-size:12px;transition:.12s}.pw-demo .pw-seg-btn:first-child{border-left:0}.pw-demo .pw-seg-btn:hover{background:var(--accent-soft);color:var(--text)}.pw-demo .pw-seg-btn[data-sel=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}.pw-demo .pw-check{display:inline-flex;align-items:center}.pw-demo .pw-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.pw-demo .pw-stepper{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#0000004d;max-width:220px}.pw-demo .pw-stepper button{flex:0 0 44px;border:0;background:none;cursor:pointer;color:var(--text-2);font-size:18px;line-height:1;display:grid;place-items:center;transition:.12s}.pw-demo .pw-stepper button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}.pw-demo .pw-stepper button:disabled{color:var(--text-4);cursor:default}.pw-demo .pw-stepper input{flex:1 1 auto;width:auto;min-width:0;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);background:none;text-align:center;font-family:var(--mono);font-size:14px;color:var(--text);padding:9px 0;-moz-appearance:textfield}.pw-demo .pw-stepper input::-webkit-inner-spin-button,.pw-demo .pw-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pw-demo .pw-stepper input:focus{outline:none}.pw-demo .pw-slider{display:flex;align-items:center;gap:16px}.pw-demo .pw-range{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:6px;border-radius:999px;background:#ffffff14;outline:none}.pw-demo .pw-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent}.pw-demo .pw-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-6px;background:var(--accent);border:2px solid #0a0f19;box-shadow:0 0 12px -2px var(--accent),0 0 0 1px var(--accent-line);cursor:pointer}.pw-demo .pw-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #0a0f19;box-shadow:0 0 12px -2px var(--accent);cursor:pointer}.pw-demo .pw-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}.pw-demo .pw-readout{font-family:var(--disp);font-size:16px;font-weight:700;color:var(--accent);min-width:54px;text-align:right;font-variant-numeric:tabular-nums}.pw-demo .pw-readout small{font-family:var(--mono);font-size:10px;color:var(--text-3);font-weight:400;margin-left:3px}.pw-demo .pw-ticks{display:flex;justify-content:space-between;margin-top:5px;padding-right:70px;font-family:var(--mono);font-size:10px;color:var(--text-4)}.pw-demo .pw-inputwrap{position:relative;max-width:360px}.pw-demo .pw-inputwrap input{width:100%;font-family:var(--mono);font-size:13px;color:var(--text);background:#0000004d;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;transition:.13s}.pw-demo .pw-inputwrap.has-unit input{padding-right:46px}.pw-demo .pw-inputwrap input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px #78b4ff1a}.pw-demo .pw-inputwrap input::placeholder{color:var(--text-4)}.pw-demo .pw-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--text-3);pointer-events:none}.pw-demo .pw-counter{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--text-4);pointer-events:none}.pw-demo .pw-counter.over{color:var(--danger)}.pw-demo .pw-toggle-row{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#0003;max-width:440px}.pw-demo .pw-toggle-row .tr-main{flex:1 1 auto}.pw-demo .pw-toggle-row .tr-name{font-size:13px;color:var(--text)}.pw-demo .pw-toggle-row .tr-sub{font-size:11px;color:var(--text-3);margin-top:2px}.pw-demo .pw-toggle-row .toggle{--w: 42px;--h: 24px;appearance:none;cursor:pointer;flex:0 0 auto;width:var(--w);height:var(--h);border-radius:999px;border:1px solid var(--border-strong);background:#00000059;position:relative;transition:background .15s,border-color .15s,box-shadow .15s;padding:0}.pw-demo .pw-toggle-row .toggle:after{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:left .15s,background .15s}.pw-demo .pw-toggle-row .toggle[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:0 0 12px -2px var(--accent-glow)}.pw-demo .pw-toggle-row .toggle[aria-checked=true]:after{left:calc(100% - 19px);background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.pw-demo .pw-combo{position:relative;max-width:360px}.pw-demo .pw-combo-field{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--text);background:#0000004d;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;transition:.13s}.pw-demo .pw-combo.open .pw-combo-field,.pw-demo .pw-combo-field:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px #78b4ff1a}.pw-demo .pw-combo-field input{flex:1 1 auto;border:0;background:none;color:var(--text);font:inherit;padding:0;min-width:0}.pw-demo .pw-combo-field input:focus{outline:none}.pw-demo .pw-combo-field input::placeholder{color:var(--text-4)}.pw-demo .pw-combo-value{flex:1 1 auto;min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pw-demo .pw-combo-value.ph{color:var(--text-4)}.pw-demo .pw-combo-field .car{width:7px;height:7px;border-right:1.6px solid var(--text-2);border-bottom:1.6px solid var(--text-2);transform:rotate(45deg);flex:0 0 auto}.pw-demo .pw-combo-pop{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;max-height:230px;overflow-y:auto;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:0 18px 44px -16px #000c;padding:5px;animation:pwpop .14s ease both}@keyframes pwpop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.pw-demo .pw-combo-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}.pw-demo .pw-combo-opt:hover{background:var(--accent-soft);color:var(--text)}.pw-demo .pw-combo-opt[data-sel=true]{color:var(--accent)}.pw-demo .pw-combo-none{padding:12px 10px;color:var(--text-4);font-size:12px;text-align:center}
