.logo-study-tabs{border-bottom:1px solid var(--border);gap:1.5rem;display:flex}.logo-study{gap:1rem;display:grid}.logo-study-stage{place-items:center;min-height:240px;display:grid}.logo-study-mark{aspect-ratio:16/23;width:112px;overflow:visible}.logo-study-guides{stroke:#512300;stroke-width:.15px;stroke-dasharray:.65 .65;transition:opacity var(--control-duration) var(--control-ease)}.logo-study-label{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.logo-study-label output{color:var(--muted-foreground);font-size:var(--type-small);font-variant-numeric:tabular-nums}.logo-study-range{gap:.5rem;display:grid}.logo-study-light{touch-action:pan-y}.logo-study .experiment-button[aria-pressed=true]{border-color:var(--foreground)}.logo-study-reset{cursor:pointer;min-height:48px;padding-inline:.5rem}@media (prefers-reduced-motion:reduce){.logo-study-guides{transition:none}}@media (forced-colors:active){.logo-study-mark path{stroke:canvastext;stroke-width:.2px}}
.logo-hero{gap:16px;display:grid}.logo-hero-stage{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);place-items:center;height:320px;display:grid;overflow:hidden}.logo-hero-canvas{cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.logo-hero-fallback{width:auto;height:240px;display:block}.logo-hero-modes{border:0;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;display:flex}.logo-hero-mode[aria-pressed=true]{color:var(--foreground);background-color:color-mix(in oklab, var(--foreground) 6%, transparent)}.logo-hero-note{min-height:16px;color:var(--muted-foreground);font-size:var(--type-small);margin-top:-8px}@media (forced-colors:active){.logo-hero-mode[aria-pressed=true]{outline:1px solid canvastext}}
.logo-heading{font-weight:var(--weight-emphasis)}.logo-figure{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);color:var(--muted-foreground);place-items:center;margin:0;padding:32px 24px;display:grid}.logo-diagram{width:auto;height:240px;display:block;overflow:visible}.logo-guides{stroke:currentColor;stroke-width:.08px;stroke-dasharray:.4 .4}.logo-guide-point{fill:currentColor}.logo-usage{grid-template-columns:auto auto;justify-content:space-evenly;gap:32px}.logo-clear-zone{fill:color-mix(in oklab, var(--foreground) 6%, transparent)}.logo-clear-edge{stroke:currentColor;stroke-width:.1px;stroke-dasharray:.4 .4}.logo-sizes{align-items:flex-end;gap:24px;margin:0;padding:0;list-style:none;display:flex}.logo-sizes li{justify-items:center;gap:8px;display:grid}.logo-size-frame{align-items:end;height:64px;display:grid}.logo-size-frame svg{width:auto;display:block}.logo-size-label{font-size:var(--type-small);font-variant-numeric:tabular-nums}.logo-files-note{color:var(--muted-foreground)}.logo-files-actions{flex-wrap:wrap;gap:16px;display:flex}.logo-files-status{min-height:16px;color:var(--muted-foreground);font-size:var(--type-small);display:block}.logo-files-status:empty{min-height:0;margin-top:0}@media (max-width:30rem){.logo-usage{grid-template-columns:minmax(0,1fr)}.logo-diagram{height:192px}}@media (forced-colors:active){.logo-figure path[fill=\#FF6900]{fill:canvastext}}