.wb{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:minmax(0,1fr);align-items:start}@media (min-width:960px){.wb{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}.wb-controls{gap:26px}.wb-controls,.wb-field{display:flex;flex-direction:column}.wb-field{gap:12px}.wb-label{margin:0;font-size:15px;font-weight:700;color:var(--fg)}.wb-chips{display:flex;flex-wrap:wrap;gap:8px}.wb-chip,.wb-seg button{height:38px;padding:0 16px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--fg-2);background:var(--glass-1);border:1px solid var(--line-subtle);transition:border-color .15s ease,background .15s ease,color .15s ease}.wb-chip:hover{border-color:var(--line-accent)}.wb-chip.on{color:#FFFFFF;background:var(--accent);border-color:var(--accent)}.wb-input{height:44px;padding:0 16px;border-radius:14px;font-size:14px;color:var(--fg);background:var(--glass-1);border:1px solid var(--line-subtle);outline:none}.wb-input:focus{border-color:var(--line-accent);box-shadow:0 0 0 3px var(--accent-soft)}.wb-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--glass-2);width:fit-content}.wb-seg button{border:none;background:transparent;height:34px}.wb-seg button.on{background:var(--surface-float);color:var(--fg);box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}.wb-code-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.wb-copy{height:34px;padding:0 16px;border-radius:999px;border:none;cursor:pointer;font-size:13px;font-weight:650;color:#FFFFFF;background:var(--accent);transition:background .2s ease}.wb-copy.done{background:#10B981}.wb-code{white-space:pre;font-size:12.5px}.wb-preview{display:flex;flex-direction:column;gap:12px}.wb-stage{border-radius:22px;overflow:hidden;border:1px solid var(--line)}.wb-stage.dark{background:#0B0E1A}.wb-stage.light{background:#F4F6FB}.wb-browser{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(127,127,127,.18)}.wb-browser>span:not(.wb-url){width:10px;height:10px;border-radius:50%;background:rgba(127,127,127,.35)}.wb-url{margin-left:10px;padding:3px 12px;border-radius:999px;font-size:11.5px;color:rgba(127,127,127,.9);background:rgba(127,127,127,.12)}.wb-page{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,3vw,32px)}.wb-line{height:9px;border-radius:999px;background:rgba(127,127,127,.18)}.w50{width:50%}.w60{width:60%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.wb-frame{max-width:100%;margin:10px 0;border-radius:14px;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}.wb-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg-4)}html.light .ct .wb-chip:not(.on),html.light .ct .wb-input{background:#FFFFFF;border-color:#DDE3F1}html.light .ct .wb-seg{background:#E6EBF7}html.light .ct .wb-stage{box-shadow:0 18px 40px -30px rgba(22,36,138,.5);border-color:#DDE3F1}