*{box-sizing:border-box;margin:0;padding:0}:not(.copy-icon):not(.copy-icon *){transition:background-color .3s,color .3s,border-color .3s,fill .3s}body{font-family:var(--lexi-typography-family-sans);font-size:var(--lexi-typography-scale-base);-webkit-font-smoothing:antialiased;line-height:1.5}.experiment-content[data-theme=dark]{color:#fefefa;background:#151715}.experiment-content[data-theme=light]{color:#151715;background:#fefefa}.page{max-width:1200px;padding:var(--lexi-spacing-16) var(--lexi-spacing-8);background:inherit;min-height:100vh;margin:0 auto}.section{margin-bottom:var(--lexi-spacing-20)}.section-label{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--lexi-fg-muted);margin-bottom:var(--lexi-spacing-6);padding-bottom:var(--lexi-spacing-3);border-bottom:1px solid var(--lexi-border-subtle);font-weight:400}.section-label span{color:var(--lexi-accent)}.experiment-content[data-theme=light] .section-label span,.experiment-content[data-theme=light] .color-tag,.experiment-content[data-theme=light] .type-sample-code,.experiment-content[data-theme=light] .rule-card h4,.experiment-content[data-theme=light] .token-table .token-name{color:var(--lexi-fg)}.experiment-content[data-theme=light] .color-tag{background:color-mix(in srgb, var(--lexi-fg) 12%, transparent)}.experiment-content[data-theme=light] .theme-toggle button:hover,.experiment-content[data-theme=light] .theme-toggle button[aria-pressed=true]{color:var(--lexi-fg)}.experiment-content[data-theme=light] .color-info{background:var(--lexi-color-white)}.experiment-content[data-theme=light] .header-wordmark svg path{fill:var(--lexi-color-black)}.experiment-content[data-theme=light] .spacing-bar{background:var(--lexi-accent);opacity:.7}.experiment-content[data-theme=light] .rule-card a[href^=http]{color:var(--lexi-color-grey)}.header{margin-bottom:var(--lexi-spacing-20);padding-bottom:var(--lexi-spacing-10);border-bottom:1px solid var(--lexi-border-subtle);grid-template-columns:1fr 1fr 1fr;align-items:center;display:grid}.header-wordmark{justify-self:start}.header-wordmark svg{width:auto;height:28px;display:block}.header-title{font-size:var(--lexi-typography-scale-md);font-family:var(--lexi-typography-family-sans);letter-spacing:0;color:var(--lexi-fg);justify-self:center;font-weight:400;line-height:1.25}.header-meta{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg-muted);text-align:right;letter-spacing:.04em;justify-self:end}.color-grid{gap:var(--lexi-spacing-4);grid-template-columns:repeat(4,1fr);display:grid}.color-card{border-radius:var(--lexi-radius-md);border:1px solid var(--lexi-border-subtle);overflow:hidden}.color-swatch{height:120px;padding:var(--lexi-spacing-3);align-items:flex-end;display:flex;position:relative}.color-swatch.signal{background:var(--lexi-color-signal)}.color-swatch.black{background:var(--lexi-color-black);border-bottom:1px solid var(--lexi-border-subtle)}.color-swatch.grey{background:var(--lexi-color-grey)}.color-swatch.white{background:var(--lexi-color-white);border-bottom:1px solid var(--lexi-border-subtle)}.color-info{padding:var(--lexi-spacing-4);background:var(--lexi-color-black);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.color-name{font-weight:400;font-size:var(--lexi-typography-scale-sm);margin-bottom:var(--lexi-spacing-1)}.color-values{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg-muted);line-height:1.8}.color-values code{background:color-mix(in srgb, var(--lexi-accent) 8%, transparent);color:var(--lexi-fg);border-radius:3px;margin-right:4px;padding:1px 6px;display:inline-block}.copy-value{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;line-height:inherit;background:0 0;border:none;align-items:center;gap:6px;padding:0;display:flex}.copy-value .copy-icon{opacity:0;color:var(--lexi-fg-muted);align-items:center;transition:opacity .15s;display:flex;position:relative}.copy-value:hover .copy-icon{opacity:1}.copy-value .copy-icon:after{content:attr(data-tooltip);font-family:var(--lexi-typography-family-mono);letter-spacing:.04em;color:var(--lexi-fg-muted);white-space:nowrap;opacity:0;pointer-events:none;font-size:9px;transition:opacity .15s;position:absolute;top:50%;left:calc(100% + 6px);transform:translateY(-50%)}.copy-value:hover .copy-icon:after{opacity:1}.color-tag{font-family:var(--lexi-typography-family-mono);letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb, var(--lexi-accent) 12%, transparent);color:var(--lexi-accent);margin-top:var(--lexi-spacing-2);border-radius:3px;padding:2px 6px;font-size:9px;display:inline-block}.type-specimen{gap:var(--lexi-spacing-6);padding:var(--lexi-spacing-6) 0;border-bottom:1px solid var(--lexi-border-subtle);grid-template-columns:200px 1fr;align-items:start;display:grid}.type-meta{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg-muted);line-height:1.8}.type-meta strong{color:var(--lexi-fg);font-weight:400}.type-sample-display{font-size:var(--lexi-typography-scale-2xl);letter-spacing:-.02em;font-weight:300;line-height:1}.type-sample-h1{font-size:var(--lexi-typography-scale-xl);letter-spacing:-.02em;font-weight:300;line-height:1}.type-sample-h2{font-size:var(--lexi-typography-scale-lg);font-weight:300;line-height:1}.type-sample-h3{font-size:var(--lexi-typography-scale-md);font-weight:300;line-height:1}.type-sample-body-large{font-size:var(--lexi-typography-scale-md);max-width:560px;color:color-mix(in srgb, var(--lexi-fg) 85%, transparent);font-weight:400;line-height:1.3}.type-sample-body-medium{font-size:var(--lexi-typography-scale-base);max-width:560px;color:color-mix(in srgb, var(--lexi-fg) 85%, transparent);font-weight:400;line-height:1.3}.type-sample-body-small{font-size:var(--lexi-typography-scale-sm);color:var(--lexi-fg);font-weight:400;line-height:1.3}.type-sample-label{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--lexi-fg-muted);font-weight:400;line-height:1}.type-sample-code{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-sm);color:var(--lexi-accent);line-height:1.3}.logo-grid{gap:var(--lexi-spacing-4);grid-template-columns:repeat(2,1fr);display:grid}.logo-card{border-radius:var(--lexi-radius-md);padding:var(--lexi-spacing-10) var(--lexi-spacing-8);border:1px solid var(--lexi-border-subtle);flex-direction:column;justify-content:center;align-items:center;min-height:280px;display:flex;position:relative}.logo-card.bg-black{background:var(--lexi-color-black)}.logo-card.bg-signal{background:var(--lexi-color-signal)}.logo-card.bg-grey{background:var(--lexi-color-grey)}.logo-card.bg-white{background:var(--lexi-color-white)}.logo-card-label{top:var(--lexi-spacing-3);left:var(--lexi-spacing-3);font-family:var(--lexi-typography-family-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.5;font-size:9px;position:absolute}.logo-card-label.dark{color:var(--lexi-color-black)}.logo-card-label.light{color:var(--lexi-color-white)}.logo-svg{max-width:100%;height:auto}.logo-svg.wordmark-size{width:140px}.logo-svg.logomark-size{width:64px}.logo-svg.logomark-container-size{border-radius:var(--lexi-radius-md);width:80px}.visual-grid{gap:var(--lexi-spacing-4);grid-template-columns:1fr 1fr;display:grid}.visual-card{border-radius:var(--lexi-radius-md);border:1px solid var(--lexi-border-subtle);min-height:280px;position:relative;overflow:hidden}.visual-card-label{top:var(--lexi-spacing-3);left:var(--lexi-spacing-3);font-family:var(--lexi-typography-family-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lexi-fg-muted);z-index:2;background:color-mix(in srgb, var(--lexi-fg) 70%, transparent);border-radius:3px;padding:2px 8px;font-size:9px;position:absolute}.iso-grid-demo{background:var(--lexi-color-grey);width:100%;height:100%;position:relative}.iso-grid-demo svg{width:100%;height:100%;position:absolute;inset:0}.dot-cube-demo{background:var(--lexi-color-signal);justify-content:center;align-items:center;display:flex}.dot-cube-large{width:160px;height:180px;position:relative}.dot-cube-large .dot{background:var(--lexi-color-black);border-radius:50%;position:absolute}.dot-cube-large .line{background:var(--lexi-color-black);opacity:.25;transform-origin:0;position:absolute}.spacing-row{align-items:center;gap:var(--lexi-spacing-4);margin-bottom:var(--lexi-spacing-2);display:flex}.spacing-label{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg-muted);text-align:right;flex-shrink:0;width:80px}.spacing-bar{background:var(--lexi-accent);opacity:.7;border-radius:2px;height:40px;transition:opacity .2s}.spacing-bar:hover{opacity:1}.spacing-px{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg-muted);margin-left:var(--lexi-spacing-2);flex-shrink:0}.token-table{border-collapse:collapse;width:100%;font-size:var(--lexi-typography-scale-sm)}.token-table th{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--lexi-fg-muted);text-align:left;padding:var(--lexi-spacing-3) var(--lexi-spacing-4);border-bottom:1px solid var(--lexi-border-subtle);font-weight:400}.token-table td{padding:var(--lexi-spacing-3) var(--lexi-spacing-4);border-bottom:1px solid var(--lexi-surface-card);vertical-align:middle}.token-table .token-name{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-accent)}.token-table .token-value{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);color:var(--lexi-fg)}.token-table .token-preview{vertical-align:middle;border:1px solid var(--lexi-border-subtle);border-radius:4px;width:20px;height:20px;display:inline-block}.rules-grid{gap:var(--lexi-spacing-4);grid-template-columns:repeat(2,1fr);display:grid}.rule-card{background:var(--lexi-surface-card);border:1px solid var(--lexi-border-subtle);border-radius:var(--lexi-radius-md);padding:var(--lexi-spacing-6)}.rule-card h4{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--lexi-accent);margin-bottom:var(--lexi-spacing-3)}.rule-card p{font-size:var(--lexi-typography-scale-sm);color:color-mix(in srgb, var(--lexi-fg) 70%, transparent);line-height:1.6}.rule-card code{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);background:color-mix(in srgb, var(--lexi-accent) 8%, transparent);color:var(--lexi-fg);border-radius:3px;padding:1px 5px}.combo-grid{gap:var(--lexi-spacing-3);grid-template-columns:repeat(4,1fr);display:grid}.combo-card{border-radius:var(--lexi-radius-md);padding:var(--lexi-spacing-6) var(--lexi-spacing-4);text-align:center;justify-content:center;align-items:center;gap:var(--lexi-spacing-2);border:1px solid var(--lexi-border-subtle);flex-direction:column;min-height:100px;display:flex}.combo-card .combo-text{font-weight:400;font-size:var(--lexi-typography-scale-md)}.combo-card .combo-label{font-family:var(--lexi-typography-family-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.5;font-size:9px}.divider{background:var(--lexi-border-subtle);height:1px;margin:var(--lexi-spacing-8) 0}.theme-toggle{gap:var(--lexi-spacing-2);align-items:center;display:flex}.theme-toggle button{font-family:var(--lexi-typography-family-mono);font-size:var(--lexi-typography-scale-xs);padding:var(--lexi-spacing-2) var(--lexi-spacing-3);border-radius:var(--lexi-radius-sm);color:var(--lexi-fg-muted);cursor:pointer;background:0 0;border:none}.theme-toggle button:hover,.theme-toggle button[aria-pressed=true]{color:var(--lexi-accent)}.theme-toggle button{min-width:44px;min-height:44px}a:focus-visible,button:focus-visible{outline:2px solid var(--lexi-accent);outline-offset:2px}.experiment-content[data-theme=light] a:focus-visible,.experiment-content[data-theme=light] button:focus-visible{outline-color:var(--lexi-fg)}.skip-link{top:-100px;left:var(--lexi-spacing-4);padding:var(--lexi-spacing-3) var(--lexi-spacing-4);background:var(--lexi-bg);color:var(--lexi-fg);font-family:var(--lexi-typography-family-sans);font-size:var(--lexi-typography-scale-sm);border-radius:var(--lexi-radius-sm);z-index:100;text-decoration:none;transition:top .2s;position:absolute}.skip-link:focus{top:var(--lexi-spacing-4);outline:2px solid var(--lexi-accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visual-grid-3,.rules-grid-3{grid-template-columns:1fr 1fr 1fr}.visual-paired-grid{gap:var(--lexi-spacing-4);grid-template-columns:1fr 1fr 1fr;display:grid}.visual-pair{gap:var(--lexi-spacing-4);flex-direction:column;display:flex}.logomark-transparent-grid{gap:var(--lexi-spacing-3);grid-template-columns:repeat(2,1fr);display:grid}@media (max-width:768px){.page{padding:var(--lexi-spacing-8) var(--lexi-spacing-4)}.header{gap:var(--lexi-spacing-4);text-align:center;grid-template-columns:1fr}.header-wordmark{justify-self:center}.header-meta{text-align:center;justify-self:center}.color-grid,.combo-grid{grid-template-columns:repeat(2,1fr)}.type-specimen{gap:var(--lexi-spacing-3);grid-template-columns:1fr}.type-sample-display{font-size:var(--lexi-typography-scale-xl)}.type-sample-h1{font-size:var(--lexi-typography-scale-lg)}.logo-grid,.logomark-transparent-grid,.visual-grid,.visual-grid-3,.visual-paired-grid,.rules-grid,.rules-grid-3{grid-template-columns:1fr}.spacing-label{width:60px;font-size:10px}.token-table{font-size:var(--lexi-typography-scale-xs)}.token-table th,.token-table td{padding:var(--lexi-spacing-2) var(--lexi-spacing-2)}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
