@font-face{font-family:'Mega Ubuntu';src:url('Ubuntu-L.ttf') format('truetype');font-weight:300;font-display:swap}@font-face{font-family:'Mega Ubuntu';src:url('../docs-ui/brand/Ubuntu-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Mega Ubuntu';src:url('Ubuntu-M.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:'Mega Ubuntu';src:url('../docs-ui/brand/Ubuntu-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
.typography-lab{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}.typography-preview-column{min-width:0;position:sticky;top:24px}.typography-controls{display:flex;flex-direction:column;gap:22px;min-width:0}.type-field{display:flex;flex-direction:column;gap:10px}.type-field>label{font-size:13px}.type-field textarea{width:100%;resize:vertical;min-height:115px;max-height:300px;font-size:15px;line-height:1.45;background:var(--field-bg);color:var(--text);padding:14px 16px;border:0;border-radius:14px}.type-field textarea:focus-visible{outline:2px solid #f27166;outline-offset:3px}.type-help{font-size:12px;color:var(--muted);line-height:1.5;margin:0}.type-views{display:flex;gap:4px;align-items:center}.type-views>button:not(.expand-preview){width:32px;height:32px;border:1px solid transparent;border-radius:50%;background:transparent;padding:6px}.type-views>button[aria-pressed=true]{border-color:var(--text)}.type-views button>span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px #80808025}.type-views .expand-preview{margin-left:6px}
.typography-scene{--type-size:72px;--type-leading:1.1;--type-tracking:0em;display:flex;flex-direction:column;justify-content:center;position:relative;aspect-ratio:1.5;min-height:380px;width:100%;padding:80px 48px;border-radius:20px;background:#f5f3f0;color:#0f1624;overflow:auto}.typography-scene[data-tone=dark]{background:#0f1624;color:#e4e2e2}.typography-scene[data-tone=coral]{background:#f27166;color:#0f1624}.typography-scene #type-sample{font-size:var(--type-size);line-height:var(--type-leading);letter-spacing:var(--type-tracking);text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;margin:0;font-synthesis:none}.typography-scene[data-align=center] #type-sample{text-align:center}.typography-scene[data-align=right] #type-sample{text-align:right}.type-scene-label,.type-scene-foot{position:absolute;left:48px;font-size:11px;letter-spacing:.04em;opacity:.6}.type-scene-label{top:30px}.type-scene-foot{bottom:30px}.type-advanced{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0}.type-advanced summary{cursor:pointer;list-style:none;font-size:13px;display:flex;justify-content:space-between;gap:12px}.type-advanced summary:after{content:'+'}.type-advanced[open] summary:after{content:'−'}.type-advanced .pattern-range-field{margin-top:24px}.type-align{display:flex;gap:8px;margin-top:20px}.type-align button{height:40px;width:48px;border:0;border-radius:12px;background:var(--field-bg);color:var(--muted)}.type-align button[aria-pressed=true]{color:#b84943;background:var(--selected-bg,#fceae7)}.type-align svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.typography-controls .button{width:100%!important}.typography-controls .pattern-reset{align-self:flex-start}
.type-example-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0 90px}.type-example-switch button{text-align:left;padding:20px 0;border:0;border-top:2px solid var(--border);background:transparent;color:var(--muted);font-size:16px}.type-example-switch button>span{font-size:11px;margin-right:12px}.type-example-switch button[aria-pressed=true]{border-color:#f27166;color:var(--text)}.type-weight-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;font-family:'Mega Ubuntu',Ubuntu,sans-serif;font-synthesis:none}.type-weight-grid>div{border-top:1px solid var(--border);padding-top:20px}.type-weight-grid span{font-family:Ubuntu,sans-serif;font-size:12px;font-weight:400;color:var(--muted)}.type-weight-grid p{font-size:clamp(22px,2.35vw,36px);line-height:1.18;margin:32px 0 24px;overflow-wrap:anywhere}.type-weight-grid small{font-size:13px;line-height:1.5;font-family:Ubuntu,sans-serif;font-weight:400;color:var(--muted)}.type-condensed{font-family:'Ubuntu Condensed',sans-serif!important;font-weight:400}.type-key-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:70px 0 0;border-block:1px solid var(--border);padding:32px 0}.type-key-rules strong{font-size:24px;font-weight:400}.type-key-rules p{font-size:16px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.type-paper{background:var(--surface);color:var(--text);border-radius:18px;padding:32px;overflow:hidden;font-family:'Mega Ubuntu',Ubuntu,sans-serif;font-synthesis:none}.type-demo-label{display:block;font-size:10px;letter-spacing:.08em;margin-bottom:36px;color:var(--muted);font-family:Ubuntu,sans-serif}.type-demo-foot{display:block;font-family:Ubuntu,sans-serif;font-size:11px;line-height:1.5;color:var(--muted);margin-top:32px}.type-weights-diagram p{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:clamp(24px,3vw,42px);line-height:1.2;padding:16px 0;margin:0;border-bottom:1px solid var(--border)}.type-weights-diagram p:last-child{border:0}.type-weights-diagram small{font-family:Ubuntu,sans-serif;font-weight:400;font-size:11px;color:var(--muted)}.type-layout-demo h4{font-size:clamp(32px,3.2vw,48px);line-height:1.1;font-weight:700;margin:0 0 28px;letter-spacing:-.02em}.type-layout-demo .type-demo-lead{font-weight:500;font-size:22px;line-height:1.3;margin-bottom:24px}.type-layout-demo>p:not(.type-demo-lead){font-size:17px;line-height:1.4;max-width:39ch;margin:0}.type-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}.type-comparison figure{min-width:0}.type-comparison .type-paper{padding:24px;min-height:280px}.type-comparison figcaption{font-size:13px!important;line-height:1.5;margin-top:14px}.type-leading-good p,.type-leading-bad p{font-size:24px;line-height:1.4;margin:0;overflow-wrap:anywhere}.type-leading-bad p{line-height:1}.type-leading-bad{border-top:3px solid #b84943}.type-alignment-examples h4{font-size:30px;font-weight:300;line-height:1.1;margin:0 0 24px}.type-alignment-examples p{font-size:16px;line-height:1.4;margin:0}.type-alignment-examples .type-paper{min-height:330px}.type-centered{text-align:center;background:#f27166;color:#0f1624}.type-centered .type-demo-label,.type-centered .type-demo-foot{color:#424050}.type-case-diagram,.type-clean-diagram{display:grid;gap:20px}.type-case-diagram p{font-size:24px;line-height:1.4;margin:0}.type-case-bad{border-left:3px solid #b84943}.type-clean-diagram p{font-size:56px;line-height:1.1;margin:0}.type-distorted p{transform:scaleX(1.3);transform-origin:left;text-shadow:3px 3px #f2716680}.type-distorted{border-left:3px solid #b84943}.type-font-source{font-size:11px;color:var(--muted);margin:32px 0;line-height:1.6}.type-font-source a{color:inherit;text-decoration:underline}
.mega-viewer-stage>#type-preview.typography-scene{display:flex;justify-content:safe center;align-items:stretch;text-align:initial;aspect-ratio:auto;width:100%;height:100%;max-width:none;min-height:0;padding:90px max(24px,8vw);border-radius:0;background:#f5f3f0;overflow:auto}.mega-viewer-stage>#type-preview[data-tone=dark]{background:#0f1624}.mega-viewer-stage>#type-preview[data-tone=coral]{background:#f27166}
@media(max-width:1180px){.typography-lab{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.typography-scene{padding-inline:32px}.type-scene-label,.type-scene-foot{left:32px}.type-weight-grid{gap:16px}.type-paper{padding:24px}.type-comparison{gap:12px}.type-comparison .type-paper{padding:20px}.type-leading-good p,.type-leading-bad p{font-size:21px}}
@media(max-width:980px){.typography-lab{grid-template-columns:1fr}.typography-preview-column{position:static}.typography-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--surface);padding:24px;border-radius:18px}.typography-controls>.type-field:first-child{grid-row:span 2}.type-advanced{grid-column:1/-1}.typography-controls .pattern-reset{align-self:center}.type-weight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.type-weight-grid p{font-size:30px}.type-example-switch{margin-bottom:64px}.type-key-rules{gap:24px}.type-key-rules strong{font-size:21px}.type-key-rules p{font-size:15px}.type-comparison .type-paper{padding:28px}.type-leading-good p,.type-leading-bad p{font-size:24px}}
@media(max-width:680px){.typography-scene{min-height:340px;aspect-ratio:auto;padding:70px 24px}.typography-scene #type-sample{font-size:min(var(--type-size),15vw)}.type-scene-label,.type-scene-foot{left:24px;font-size:10px}.typography-controls{padding:20px;grid-template-columns:1fr}.typography-controls>.type-field:first-child{grid-row:auto}.typography-controls .pattern-reset{justify-self:start}.type-views{gap:0}.type-example-switch{gap:16px;margin:20px 0 56px}.type-example-switch button{font-size:13px;padding:14px 0;line-height:1.4}.type-example-switch button>span{display:block;margin-bottom:8px}.type-weight-grid{grid-template-columns:1fr 1fr;gap:28px 20px}.type-weight-grid p{font-size:22px;margin:20px 0}.type-key-rules{grid-template-columns:1fr;gap:28px;margin-top:48px}.type-key-rules strong{font-size:24px}.type-key-rules p{margin-top:8px}.type-comparison{grid-template-columns:1fr}.type-comparison .type-paper{min-height:0}.type-demo-label{margin-bottom:24px}.type-clean-diagram p{font-size:42px}.type-weights-diagram p{font-size:26px}.mega-viewer-stage>#type-preview.typography-scene{padding:80px 24px}.mega-viewer-stage>#type-preview #type-sample{font-size:var(--type-size)}.pattern-preview-caption{flex-wrap:wrap;line-height:1.6}}
#type-preview.typography-scene{padding:80px 48px;min-height:380px;margin:0;line-height:normal;justify-content:safe center}.typography-controls input[type=range]{width:100%;height:24px;min-height:24px;padding:0;margin:0;background:transparent;border:0;accent-color:var(--action-primary);cursor:ew-resize}
@media(max-width:1180px){#type-preview.typography-scene{padding-inline:32px}}
@media(max-width:680px){#type-preview.typography-scene{padding:70px 24px;min-height:340px}.typography-scene #type-sample{font-size:var(--type-size)}}
.mega-viewer-stage>#type-preview.typography-scene{padding:90px max(24px,8vw);min-height:0}
@media(max-width:680px){.mega-viewer-stage>#type-preview.typography-scene{padding:80px 24px}}
#type-preview.typography-scene{max-height:720px}.mega-viewer-stage>#type-preview.typography-scene{max-height:none}
@media(max-width:680px){.type-weights-diagram p{flex-wrap:wrap;gap:8px;font-size:24px}}