.cod-builder{--cod-blue:#1062a1;--cod-ink:#102f51;--cod-muted:#587086;--cod-line:#d5e1e9}.cod-builder__intro{max-width:760px;margin-bottom:26px}.cod-builder__intro h2{margin:.2rem 0 .55rem;color:var(--cod-ink);font-size:clamp(30px,5vw,48px);line-height:1.08}.cod-builder__intro p{color:var(--cod-muted)}.cod-builder__layout{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);gap:22px;align-items:start}.cod-builder__controls,.cod-builder__preview,.cod-builder__code,.cod-builder__notes{padding:22px;border:1px solid var(--cod-line);border-radius:14px;background:#fff}.cod-builder h3{margin:0 0 15px;color:var(--cod-ink)}.cod-builder__controls label{display:block;margin:0 0 15px;color:var(--cod-ink);font-size:13px;font-weight:750}.cod-builder__controls select,.cod-builder__controls input[type=color]{display:block;width:100%;min-height:42px;margin-top:6px;border:1px solid #bdceda;border-radius:8px;background:#fff}.cod-builder__controls input[type=range]{width:calc(100% - 50px);margin-top:10px}.cod-builder__controls output{display:inline-block;width:44px;text-align:right;color:var(--cod-muted)}.cod-builder__hint{margin:-9px 0 16px;padding:9px 10px;border-left:3px solid #86a94b;border-radius:0 7px 7px 0;background:#f2f7f0;color:var(--cod-muted);font-size:11px;line-height:1.45}.cod-builder__preview [data-cod-preview]{max-width:820px;margin:auto}.cod-builder__code{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:22px}.cod-builder__code h3{margin-bottom:3px}.cod-builder__code p{margin:0;color:var(--cod-muted);font-size:13px}.cod-builder__code textarea{grid-column:1/-1;width:100%;padding:14px;border:1px solid #bdceda;border-radius:9px;background:#f7fafc;color:#173b5c;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}.cod-builder__status{grid-column:1/-1}.cod-builder__notes{margin-top:22px}.cod-builder__notes ul{margin:0;padding-left:20px;color:var(--cod-muted)}.cod-builder__notes li{margin:7px 0}@media(max-width:760px){.cod-builder__layout{grid-template-columns:1fr}.cod-builder__code{grid-template-columns:1fr}.cod-builder__code .button{width:max-content}.cod-builder__code textarea{grid-column:1}}