.wb-page,.wb-page *,.wb-page *::before,.wb-page *::after{box-sizing:border-box}.wb-page{width:100%;min-height:60vh;background:#f5f7f9;color:#242a30;font:16px/1.5 Arial,sans-serif}.wb-page a{color:#007f9e}.wb-page a:focus-visible,.wb-page input:focus-visible,.wb-page button:focus-visible,.wb-page select:focus-visible,.wb-page textarea:focus-visible{outline:3px solid #0c96b8;outline-offset:3px}.wb-main{max-width:1268px;margin:auto;padding:36px 24px}.wb-main h1{font-size:32px;line-height:1.2;margin:0 0 12px}.wb-lead{color:#5b6872;margin:0 0 28px}.wb-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}.wb-panel,.wb-code{background:#fff;border:1px solid #e0e7ec;border-radius:14px;padding:24px}.wb-panel h2,.wb-preview-panel h2{font-size:20px;margin:0 0 20px}.wb-panel label,.wb-code>label{display:block;font-size:14px;font-weight:600;margin:15px 0 6px}.wb-panel select,.wb-panel input[type=number],.wb-panel input[type=color]{width:100%;min-height:42px;border:1px solid #bbc7cf;border-radius:7px;background:#fff;color:#242a30;font:inherit;padding:8px}.wb-panel select:disabled{background:#f2f4f6;color:#6d7780}.wb-panel input[type=color]{padding:4px}.wb-layouts{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wb-layouts legend{font-size:14px;font-weight:600;margin-bottom:8px}.wb-layouts label{border:1px solid #c4d0d6;border-radius:8px;font-size:12px;padding:8px 4px;text-align:center;margin:0;cursor:pointer;overflow-wrap:anywhere}.wb-layouts label:has(input:checked){border-color:#007f9e;background:#edf8fa}.wb-layouts span{display:block;font-size:26px;color:#007f9e}.wb-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wb-hint{font-size:13px;color:#5a6871;margin:8px 0}.wb-panel .wb-checkbox{display:flex;align-items:start;gap:8px;font-weight:400;margin-top:20px}.wb-checkbox input{margin-top:5px;flex:none}.wb-preview-stage{background:#e9eef2;padding:20px;border-radius:14px;min-width:0}.wb-preview-stage>div{max-width:100%;margin:auto}.wb-preview-stage iframe{max-width:100%}.wb-code{margin-top:20px}.wb-code>label{margin-top:0}.wb-code textarea{width:100%;resize:vertical;font:12px/1.6 monospace;color:#36454f;background:#f5f7f9;border:1px solid #ccd5db;border-radius:8px;padding:12px;word-break:break-all}.wb-code button{border:0;border-radius:8px;background:#007f9e;color:#fff;padding:12px 20px;margin-top:12px;font:600 15px Arial,sans-serif;cursor:pointer}.wb-code button:disabled{opacity:.5;cursor:default}.wb-code p[role=status]{font-size:14px;min-height:21px;margin:8px 0}.wb-error{color:#a32020;font-size:14px}@media(max-width:800px){.wb-workspace{grid-template-columns:minmax(0,1fr)}.wb-main{padding:24px 16px}.wb-main h1{font-size:26px}.wb-panel,.wb-code{padding:18px}.wb-preview-stage{padding:12px}}
.wb-code-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:12px}.wb-code .wb-code-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;line-height:20px}.wb-code #widget-share-group{display:flex;margin:0}.wb-code #widget-share{gap:8px;background:#00b0dd;font-weight:400}.wb-code #widget-share svg{flex:none}
.wb-panel .wb-range-label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.wb-welcome{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;color:#34454f}.wb-welcome-icon{flex:none;color:#00b0dd}
.wb-lead{font-size:14px}
.wb-panel input[type=color],.wb-panel label[for=widget-color]{cursor:pointer}
.wb-width-title{margin:22px 0 6px;font-size:14px;font-weight:600}
#widget-preview-box{position:relative}
.wb-preview-loading{position:absolute;inset:0;z-index:5;background:rgba(255,255,255,.78);border-radius:20px;padding:32px 12px;cursor:wait}
.wb-preview-loading[hidden]{display:none}
.wb-preview-loader{position:sticky;top:24px;display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;font-size:14px}
.wb-preview-spinner{position:relative;display:grid;place-items:center;width:72px;height:72px;flex:none}
.wb-preview-spinner img{width:36px;height:36px;object-fit:contain}
.wb-preview-spinner::before{content:"";position:absolute;inset:0;border:3px solid #d7f2f9;border-top-color:#00b0dd;border-left-color:#00b0dd;border-radius:50%;animation:wb-preview-spin .8s linear infinite}
.wb-preview-failed{cursor:default}
.wb-preview-failed .wb-preview-spinner::before{animation:none;border-color:#d7f2f9}
@keyframes wb-preview-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wb-preview-spinner::before{animation:none}}
.wb-width-modes{padding:12px;border:1px solid #dbe5ea;border-radius:8px}
.wb-panel .wb-width-modes label{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-weight:400}
.wb-panel .wb-width-modes label+label{margin-top:10px}
.wb-width-modes input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:18px;height:18px;margin:0;flex:none;border:1.5px solid #a5afb5;border-radius:50%;background:#fff;cursor:pointer;box-shadow:none}
.wb-width-modes input:checked{border-color:#616c73}
.wb-width-modes input:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:#616c73}
.wb-code-actions button:focus:not(:focus-visible){outline:none;box-shadow:none}
.wb-code-actions button:focus-visible{outline:2px solid #78838b;outline-offset:3px;box-shadow:none}
.wb-width-modes input:focus{outline:none}
.wb-width-modes input:focus-visible{outline:2px solid #78838b;outline-offset:3px}
.wb-range-label span{min-width:0}
.wb-range-label output{flex:none;min-width:44px;text-align:center;padding:3px 8px;border-radius:6px;background:#edf8fb;color:#25333b;font-variant-numeric:tabular-nums}
.wb-panel input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:28px;margin:3px 0 0;background:transparent;cursor:pointer;accent-color:#00b0dd}
.wb-panel input[type=range]:disabled{opacity:.4;filter:grayscale(1);cursor:default}
.wb-panel input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#dbe5ea}
.wb-panel input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#dbe5ea}
.wb-panel input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border:2px solid #fff;border-radius:50%;background:#00b0dd;box-shadow:0 1px 4px #0003}
.wb-panel input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#00b0dd;box-shadow:0 1px 4px #0003}
.wb-panel .wb-checkbox{cursor:pointer;align-items:flex-start}
.wb-checkbox span{line-height:1.5}
.wb-checkbox input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:20px;height:20px;min-width:20px;margin:1px 0 0;border:1.5px solid #9aaeb9;border-radius:5px;background:#fff;cursor:pointer;transition:background .12s,border-color .12s}
.wb-checkbox input:checked{background:#00b0dd;border-color:#00b0dd}
.wb-checkbox input:checked::before{content:"";width:9px;height:5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(45deg)}
.wb-checkbox:hover input{border-color:#007f9e}
.wb-panel .wb-count-help{margin:4px 0 16px;color:#6b7780;font-size:12px;line-height:1.5}
@media(forced-colors:active){.wb-checkbox input{appearance:auto}.wb-checkbox input::before{display:none}}