:root{--demo-deep: #221c36;--demo-white: #ffffff;--demo-white-button-hover: #dbd3d3;--demo-bg: #f3f2f4;--demo-text: #565265;--demo-link: #565265;--demo-code-bg: #595568;--demo-btn-insert: #ffcc00;--demo-btn-insert-hover: #c9a30e;--demo-btn-remove: #e9e9eb;--demo-btn-remove-hover: #c3c3d1;--demo-icon-white: #ffffff;--demo-icon-deep: #221c36;--demo-text-white: #ffffff;--demo-transform-size: scale(1.01)}@font-face{font-family:DraftB;font-style:normal;font-weight:400;font-display:swap;src:local("DraftB Regular"),local("DraftB-Regular"),url(/assets/draftb-regular-BmuhwQVG.woff2) format("woff2"),url(/assets/draftb-regular-JZXqbN2r.woff) format("woff")}@font-face{font-family:DraftB;font-style:normal;font-weight:700;font-display:swap;src:local("DraftB Bold"),url(/assets/DraftB-Bold-sCGBadJ8.otf) format("opentype")}.demo{margin:0;background:var(--demo-bg);font-family:DraftB;color:var(--demo-text)}.demo__bar-logo{width:100%;background:#221c36}.demo__bar-logo-inner{max-width:100%;padding:1rem .75rem;display:flex;align-items:center;justify-content:flex-start}.demo__bar-logo-svg{height:2.5rem;width:auto;border:0}.demo__bar-title{width:100%;background:var(--demo-white)}.demo__bar-title-inner{max-width:100%;padding:.4rem .6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.375rem;box-shadow:0 .125rem .25rem #0000000d,0 .25rem .5rem #0000000a}.demo__title{margin:0;font-size:1.25rem;color:var(--demo-deep)}.demo__subline{margin:0;font-size:1rem;font-weight:bolder;color:var(--demo-text)}.demo__columns{width:calc(100% - 4.375rem);margin:2.5rem auto 1.25rem;display:grid;grid-template-columns:35% 64%;gap:1.875rem;box-sizing:border-box}.demo__left{padding:0}.demo__detail{margin:0 0 1.5rem;color:var(--demo-text)}.demo__detail--link{margin-top:2.1875rem;display:flex;align-items:center;gap:.5rem;justify-content:center;text-align:center;width:100%}.demo__detail--link .demo__link{justify-content:center}.demo__detail-muted{color:var(--demo-detail)}.demo__link{color:var(--demo-link);text-decoration:underline;display:flex;align-items:center}.demo__link-icon{display:inline-flex;align-items:center;justify-content:center;background:var(--demo-white);border-radius:50%;padding:.25rem;width:1.25rem;height:1.25rem}.demo__list-heading{margin:.5rem 0 .75rem;font-size:1rem;color:var(--demo-deep)}.demo__list{list-style:none;margin:0;padding:0}.demo__list-item{margin-bottom:.875rem}.demo__list-link{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--demo-white);padding:.75rem 1rem;border-radius:.5rem;width:100%;text-decoration:none;color:inherit;box-sizing:border-box;transition:transform .3s ease}.demo__list-link:hover{background-color:var(--demo-white-button-hover);transform:var(--demo-transform-size)}.demo__list-main{display:flex;align-items:center;gap:.75rem;min-width:0}.demo__list-icon{display:inline-grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:.375rem;font-size:.6875rem;color:var(--demo-icon-deep);flex:0 0 auto}.demo__list-icon,.demo__list-label{color:var(--demo-deep)}.demo__list-label{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo__right{padding:0}.demo__code-roof{background:var(--demo-deep);color:var(--demo-text-white);border-radius:.625rem .625rem 0 0;padding:.625rem .875rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.demo__code-roof-title-wrapper{display:flex;align-items:center;gap:.5rem}.demo__code-roof-title{margin:0;font-size:1rem;color:var(--demo-text-white)}.demo__code-roof-actions{display:flex;align-items:center;gap:.625rem}.demo__code-roof-icon{display:inline-grid;width:1.375rem;height:1.375rem;font-size:.625rem;color:var(--demo-icon-white)}.demo__button-row{display:flex;gap:.625rem}.demo__button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;border:none;border-radius:.5rem;cursor:pointer;white-space:nowrap;color:#1f1b2e}.demo__button:disabled{opacity:.5;cursor:not-allowed}.demo__button-icon{display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:.25rem;font-size:.625rem}.demo__button-label{font-weight:700}.demo__button--insert{background:var(--demo-btn-insert);transition:transform .3s ease}.demo__button--insert:hover{background:var(--demo-btn-insert-hover);transform:var(--demo-transform-size)}.demo__button--remove{background:var(--demo-btn-remove);transition:transform .3s ease}.demo__button--remove:hover{background:var(--demo-btn-remove-hover);transform:var(--demo-transform-size)}.demo__code-area{background:var(--demo-code-bg);padding:1.875rem;border-radius:0 0 .625rem .625rem;color:var(--demo-white);box-sizing:border-box}.demo__code-textarea{width:100%;min-height:20rem;padding:.75rem;box-sizing:border-box;font-family:DraftB;font-size:.875rem;border:0;border-radius:.5rem;background:var(--demo-code-bg);color:var(--demo-text-white);resize:vertical}.demo__code-textarea::placeholder{color:var(--demo-text-white);font-weight:700}#output{max-width:93.75rem;margin:2.5rem auto;padding:0 1.25rem;box-sizing:border-box}#output:empty{visibility:hidden}@media (max-width: 1400px){.demo__columns{grid-template-columns:1fr;width:calc(100% - 2rem)}}@media (max-width: 600px){#output{padding:0 .9375rem}}@media (max-width: 540px){.demo__button-row{flex-direction:column;align-items:stretch}.demo__button{width:100%;justify-content:center}.demo__detail--link{flex-wrap:wrap;justify-content:center;text-align:center}.demo__detail-muted{flex:1 0 100%;margin-bottom:.25rem}.demo__link{display:inline-flex;align-items:center;justify-content:center;gap:.375rem}}