.font-playground{background:#f4f4f1;padding:0 0 100px;color:#fff}
.font-playground>.container{width:calc(100% - 200px);max-width:none;margin-inline:100px;padding-inline:0}
.font-playground__canvas{border-radius:28px;background:#080808;padding:32px;min-width:0;text-align:center}
.font-playground__badge{display:inline-block;margin:0;padding:8px 16px;background:var(--red,#f12b21);border-radius:100px;font-size:14px;font-weight:600;letter-spacing:.02em;color:#fff}
.font-playground__hint{font-size:14px;color:#999;margin:14px 0 0}
.font-playground__stage{display:flex;align-items:center;min-height:360px;padding:40px 0}
.font-playground__text{display:block;width:100%;min-height:1.2em;max-height:280px;resize:none;border:0;background:transparent;color:#fff;text-align:center;font-family:'Nutty Index',serif;font-size:77px;letter-spacing:0;line-height:1.2;font-weight:400;font-synthesis:none;padding:0 12px;overflow:auto;overflow-wrap:anywhere;border-radius:12px;caret-color:var(--red,#f12b21)}
.font-playground__text:focus-visible{outline:1px solid #555;outline-offset:4px}
@media(max-width:600px){.font-playground__text{font-size:38px}}
.font-playground__controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.font-playground__controls label{display:flex;align-items:center;gap:9px;border-radius:100px;background:#f5f5f3;color:#111;padding:10px 14px;font-size:14px;font-weight:500;min-height:45px;box-sizing:border-box}
.font-playground__controls input[type=range]{appearance:none;-webkit-appearance:none;width:88px;min-width:40px;height:20px;background:transparent;border:0;padding:0;margin:0;cursor:pointer}
.font-playground__controls input[type=range]::-webkit-slider-runnable-track{height:1px;background:#111;border:0}
.font-playground__controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-5px;background:#f5f5f3;border:1px solid #111;border-radius:50%;box-shadow:none}
.font-playground__controls input[type=range]::-moz-range-track{height:1px;background:#111;border:0}
.font-playground__controls input[type=range]::-moz-range-progress{height:1px;background:#111}
.font-playground__controls input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#f5f5f3;border:1px solid #111;border-radius:50%;box-shadow:none}
.font-playground__controls output{min-width:40px;font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.font-playground__controls select{background:transparent;border:0;color:#111;font:inherit;cursor:pointer;max-width:130px}
.font-playground__reset{border:1px solid #666;border-radius:100px;background:transparent;color:#fff;padding:10px 16px;min-height:45px;box-sizing:border-box;font:inherit;font-size:14px;cursor:pointer}
.font-playground__reset:hover{background:#222}
.font-playground__controls :focus-visible{outline:2px solid #f12b21;outline-offset:4px}
@media(max-width:700px){.font-playground{padding-bottom:64px}.font-playground>.container{width:calc(100% - 48px);margin-inline:24px}.font-playground__canvas{padding:28px 18px;border-radius:24px}.font-playground__stage{min-height:290px;padding:26px 0}.font-playground__controls{display:grid;grid-template-columns:1fr;width:100%;max-width:420px;margin:auto}.font-playground__controls label{justify-content:space-between}.font-playground__controls input{flex:1;max-width:200px}.font-playground__hint{line-height:1.6}}