details.tool-help{margin: 0;padding: 0;min-width: 0;border: 0;border-top: 1px solid var(--line)}details.tool-help > summary{display: flex;align-items: baseline;gap: 10px;min-height: 48px;padding: 14px 0;color: var(--ink);font-size: 16px;font-weight: 600;line-height: 1.5;list-style: none;cursor: pointer;overflow-wrap: anywhere}details.tool-help > summary::-webkit-details-marker{display: none} details.tool-help > summary::before{content: "";flex: 0 0 auto;align-self: center;width: .5em;height: .5em;margin: 0 .35em 0 .25em;border-right: 2px solid var(--green,var(--accent));border-bottom: 2px solid var(--green,var(--accent));transform: rotate(-45deg);transition: transform 150ms ease-out}details.tool-help[open] > summary::before{transform: rotate(45deg);border-color: var(--ink)}@media (prefers-reduced-motion: reduce){details.tool-help > summary::before{transition: none}}details.tool-help > summary:hover{color: var(--green,var(--accent))}details.tool-help > summary:focus-visible{outline: 3px solid var(--accent);outline-offset: 3px;border-radius: 2px}details.tool-help > summary > :is(h2,h3){margin: 0;padding: 0;border: 0;color: inherit;font: inherit}details.tool-help .tool-help-body{padding: 0 0 16px;min-width: 0}details.tool-help .tool-help-body > :first-child{margin-top: 0}details.tool-help .tool-help-body > :last-child{margin-bottom: 0} details.tool-notes{min-width: 0;margin: 0 0 32px;padding: 0;border: 1px solid var(--line);border-radius: 4px;background: rgb(255 254 248 / 95%);font-size: 16px}details.tool-notes > summary{display: flex;align-items: center;gap: 10px;min-height: 56px;padding: 14px 20px;color: var(--ink);font-size: 16px;font-weight: 600;line-height: 1.5;list-style: none;cursor: pointer;overflow-wrap: anywhere;-webkit-tap-highlight-color: transparent;touch-action: manipulation}details.tool-notes > summary::-webkit-details-marker{display: none}details.tool-notes > summary::before{content: "";flex: 0 0 auto;width: .5em;height: .5em;margin: 0 .35em 0 .25em;border-right: 2px solid var(--green,var(--accent));border-bottom: 2px solid var(--green,var(--accent));transform: rotate(-45deg);transition: transform 150ms ease-out}details.tool-notes[open] > summary{border-bottom: 1px solid var(--line)}details.tool-notes[open] > summary::before{transform: rotate(45deg);border-color: var(--ink)}details.tool-notes > summary:hover{color: var(--green,var(--accent))}details.tool-notes > summary:focus-visible{outline: 3px solid var(--accent);outline-offset: -4px;border-radius: 4px} @media (max-width: 600px){details.tool-notes > summary{padding-inline: 16px}}@media (prefers-reduced-motion: reduce){details.tool-notes > summary::before{transition: none}} details.context-help{min-width: 0;max-width: 100%;margin: 2px 0 8px;padding: 0;border: 0} details.context-help > summary{display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;margin-inline-start: -11px;padding: 0;border: 0;border-radius: 50%;color: var(--muted,#536158);background: transparent;font-size: 0;line-height: 1;list-style: none;cursor: pointer;-webkit-tap-highlight-color: transparent;touch-action: manipulation}details.context-help > summary::-webkit-details-marker{display: none}details.context-help > summary::after{content: none}details.context-help > summary::before{content: "?";content: "?" / "";display: flex;align-items: center;justify-content: center;box-sizing: border-box;width: 22px;height: 22px;border: 1.5px solid currentColor;border-radius: 50%;font: 600 13px/1 var(--font,"IBM Plex Sans",sans-serif);opacity: .8;transition: background-color 120ms ease-out,color 120ms ease-out,opacity 120ms ease-out}details.context-help > summary:focus-visible{outline: 3px solid var(--accent);outline-offset: -4px}details.context-help[open] > summary{color: var(--ink)}details.context-help[open] > summary::before{opacity: 1;background: var(--selected,var(--soft,#e2ecd3))}@media (hover: hover) and (pointer: fine){details.context-help > summary:hover{color: var(--green,var(--accent))}details.context-help > summary:hover::before{opacity: 1}}@media (prefers-reduced-motion: reduce){details.context-help > summary::before{transition: none}}details.context-help > .tool-help-body{min-width: 0;margin: 0;padding: 10px 12px;border-inline-start: 2px solid var(--green,var(--accent));background: var(--paper,transparent);overflow-wrap: anywhere;font-size: 14px;line-height: 1.6}details.context-help > .tool-help-body > :first-child{margin-top: 0}details.context-help > .tool-help-body > :last-child{margin-bottom: 0}@media print{details.tool-help > summary::before,details.tool-notes > summary::before{content: ""}details.tool-notes{border: 0;background: transparent}details.tool-help,details.context-help{break-inside: avoid}details.context-help > summary{display: none}details.context-help > .tool-help-body{padding: 0;border: 0;background: transparent}} .build-example{margin-block: 28px;min-width: 0}.build-example-layout{display: grid;gap: 18px 24px;align-items: start;min-width: 0}.build-example-figure{margin: 0;min-width: 0}.build-example-figure img{display: block;width: 100%;max-width: 420px;height: auto;border: 1px solid var(--line);background: var(--paper)}.build-example-figure figcaption{margin-top: 10px;color: var(--muted);font-size: 13px;line-height: 1.5}.build-example-table{width: 100%;border-collapse: collapse;font-size: 14px;font-variant-numeric: tabular-nums}.build-example-table caption{text-align: start;font-weight: 600;color: var(--ink);margin-bottom: 8px}.build-example-table th,.build-example-table td{padding: 8px 6px;border-bottom: 1px solid var(--line);text-align: start;overflow-wrap: anywhere}.build-example-table tbody th{font-weight: 400}.build-example-table th:last-child,.build-example-table td:last-child{width: 4.5rem;text-align: end}.build-example-table code{display: inline-block;margin-inline-end: 5px;font-size: 12px}.build-example-table tfoot{color: var(--ink);font-weight: 600}.build-example-steps{padding-inline-start: 22px}.build-example-steps li{margin-block: 10px}.build-example-links{display: flex;flex-wrap: wrap;gap: 10px}.build-example-links .btn{max-width: 100%;white-space: normal;overflow-wrap: anywhere}.build-example-scope{color: var(--muted);font-size: 13px}@media (min-width: 680px){.build-example-layout{grid-template-columns: minmax(0,1fr) minmax(0,1fr)}}
