.colour-palette-generator{display:grid;gap:var(--space-xl);grid-template-columns:32rem 1fr}@media only screen and (max-width:800px){.colour-palette-generator{grid-template-columns:1fr}}.colour-palette-generator__controls{background:var(--panel-background);border:1px solid var(--panel-border);border-radius:var(--border-radius);padding:var(--space-l)}.colour-palette-generator__wheel-wrapper{aspect-ratio:1/1;margin:0 auto var(--space-l);position:relative;width:26rem}#colour-wheel{border-radius:50%;cursor:crosshair;display:block;height:100%;width:100%}.colour-palette-generator__wheel-markers{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.colour-palette-generator__marker{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4);height:1.4rem;left:0;position:absolute;top:0;transform:translate(-50%,-50%);width:1.4rem}.colour-palette-generator__marker--base{height:1.8rem;width:1.8rem;z-index:1}#randomize{margin-top:var(--space-m);width:100%}.colour-palette-generator__button-icon{margin-left:var(--space-s)}.colour-palette-generator__output{display:flex;flex-direction:column;gap:var(--space-l)}.colour-palette-generator__swatches{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.colour-palette-generator__swatch{background:0 0;border:1px solid var(--panel-border);border-radius:var(--border-radius);cursor:pointer;display:flex;flex-direction:column;font:inherit;overflow:hidden;padding:0;position:relative;text-align:left}.colour-palette-generator__swatch-colour{min-height:12rem;width:100%}.colour-palette-generator__swatch-label{align-items:center;color:var(--text-primary);display:flex;font-family:var(--font-family-mono);font-size:var(--font-size-s);justify-content:space-between;padding:var(--space-s) var(--space-m)}.colour-palette-generator__swatch-remove{align-items:center;background:rgba(0,0,0,.55);border-radius:50%;color:#fff;display:flex;height:2.8rem;justify-content:center;position:absolute;right:var(--space-s);top:var(--space-s);width:2.8rem}.colour-palette-generator__swatch-remove:hover{background:var(--colour-error)}.colour-palette-generator__swatch-remove .bi{line-height:1}.colour-palette-generator__swatch-remove .bi::before{vertical-align:middle}.colour-palette-generator__swatch--ghost{align-items:center;background:0 0;border-style:dashed;color:var(--colour-neutral-350);gap:var(--space-s);justify-content:center;min-height:16rem}.colour-palette-generator__swatch--ghost:hover{border-color:var(--colour-accent);color:var(--text-primary)}.colour-palette-generator__swatch--ghost i{font-size:2rem}.colour-palette-generator__swatch--ghost span{font-size:var(--font-size-s)}.colour-palette-generator__preview-section{margin-top:var(--space-xl)}.colour-palette-generator__preview-title,.mock-browser__card strong{margin-bottom:var(--space-s)}.colour-palette-generator__preview-subtitle{color:var(--colour-neutral-350);margin-bottom:var(--space-l)}.mock-browser{background:#fff;border-radius:var(--border-radius);box-shadow:var(--box-shadow-button);color:#1a1a1a;overflow:hidden}.mock-browser__chrome{align-items:center;background:#e9e9ec;display:flex;gap:var(--space-s);padding:var(--space-s) var(--space-m)}.mock-browser__dot{background:#c9c9ce;border-radius:50%;height:1rem;width:1rem}.mock-browser__url{background:#fff;border-radius:999px;color:#888;flex:1;font-size:var(--font-size-s);margin-left:var(--space-m);padding:.5rem 1.4rem}.mock-browser__colour-bar{display:flex;height:.6rem}.mock-browser__colour-bar span{flex:1}.mock-browser__body{padding:var(--space-xl) var(--space-l)}.mock-browser__nav{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-l);margin-bottom:var(--space-xl)}.mock-browser__logo{align-items:center;display:flex;font-weight:700;gap:var(--space-s)}.mock-browser__logo-dot{border-radius:50%;display:inline-block;height:1.6rem;width:1.6rem}.mock-browser__nav-links{display:flex;flex:1;gap:var(--space-l)}.mock-browser__nav-links a{color:#666;text-decoration:none}.mock-browser__cta{border:0;border-radius:999px;cursor:default;font-family:inherit;font-weight:700;padding:.9rem 2rem}.mock-browser__hero{border-radius:var(--border-radius);margin-bottom:var(--space-xl);padding:var(--space-xl) var(--space-l)}.mock-browser__hero h3{font-size:3.2rem;margin-bottom:var(--space-m);max-width:48rem}.mock-browser__hero p{max-width:48rem;margin-bottom:var(--space-l)}.mock-browser__button{border:0;border-radius:999px;cursor:default;font-family:inherit;font-size:var(--font-size-m);font-weight:700;padding:1.1rem 2.6rem}.mock-browser__tags{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-bottom:var(--space-xl)}.mock-browser__tag{border-radius:999px;font-size:var(--font-size-s);font-weight:600;padding:.5rem 1.4rem}.mock-browser__cards{display:grid;gap:var(--space-l);grid-template-columns:repeat(3,1fr);margin-bottom:var(--space-xl)}@media only screen and (max-width:700px){.mock-browser__cards{grid-template-columns:1fr}}.mock-browser__card{background:#f7f7f9;border-radius:var(--border-radius);border-top:.4rem solid transparent;padding:var(--space-l)}.mock-browser__card-icon{border-radius:50%;display:block;height:3.2rem;margin-bottom:var(--space-m);width:3.2rem}.mock-browser__card strong{display:block}.mock-browser__card p,.mock-browser__footer{color:#777;font-size:var(--font-size-s)}.mock-browser__footer{border-top:.3rem solid transparent;color:#888;padding-top:var(--space-l)}