@charset "UTF-8";.icon-usage__frame{margin:var(--space-md) 0 var(--space-xl) 0;padding:var(--space-md);border-radius:var(--radius-xl);border:1px solid var(--color-gray-300);background:var(--color-white-100);gap:var(--space-md)}@media(max-width:991px){.icon-usage__frame{display:flex;flex-direction:column-reverse}}@media(min-width:992px){.icon-usage__frame{display:grid;grid-template-columns:1fr 1fr;justify-content:space-between;align-items:stretch;align-self:stretch}}.icon-usage__steps{display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-width:300px}.icon-usage__step{display:flex;flex-direction:column;gap:var(--space-sm)}.icon-usage__step p{color:var(--color-gray-500);font-size:var(--font-size-md);line-height:28px;margin:0}.icon-usage__step-label{display:flex;align-items:center;gap:var(--space-xs);color:var(--color-navy-300);font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.icon-usage__step-label svg{flex-shrink:0;width:24px;height:24px}.icon-usage__step-code{display:block;background:var(--color-gray-200);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-xm);font-family:var(--font-family-code);font-size:var(--font-size-md);color:var(--color-gray-500);line-height:28px;white-space:pre;overflow-x:auto;margin:0}.icon-usage__viewer{--handle-size: 40px;display:block;border-radius:var(--radius-xl);position:relative;overflow:hidden}.icon-usage__viewer:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:1px 1px 5px 3px #0000000d inset;pointer-events:none;z-index:2}@media(max-width:991px){.icon-usage__viewer{aspect-ratio:1}}.icon-usage__viewer-bg{display:flex;justify-content:center;align-items:center;background:var(--color-white-100);overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid var(--color-gray-300);box-sizing:border-box;border-radius:inherit}.icon-usage__viewer-icon lord-icon,.icon-usage__viewer-icon img{display:block;width:300px;height:auto;aspect-ratio:1}.icon-usage__divider{position:absolute;top:0;left:var(--divider-x, 50%);transform:translate(-50%);height:100%;width:20px;z-index:3;cursor:col-resize;display:flex;align-items:center;justify-content:center}.icon-usage__divider:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:100%;background:#fff6;pointer-events:none}.icon-usage__divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--handle-size);height:var(--handle-size);border-radius:50%;background:var(--color-white-100);box-shadow:0 2px 8px #00000040;cursor:col-resize;z-index:3;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.icon-usage__code-preview{display:flex;align-items:center;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--divider-x, 50%)) 0 0);background:#333b4b;border-radius:var(--radius-xl) 0 0 var(--radius-xl);padding:var(--space-md)}.icon-usage__code-preview p{font-family:var(--font-family-code);font-size:var(--font-size-md);color:var(--color-white-100);margin:0}.icon-usage__code-preview .token-tag{color:var(--color-purple-100)}.icon-usage__code-preview .token-attr{color:var(--color-green-100)}.icon-usage__code-preview .token-val{color:var(--color-white-100)}.icon-usage__code-preview .color-name{display:inline;font-family:var(--font-family-code)}.icon-usage__code-preview .token-color{display:inline-flex;align-items:center;background:var(--swatch, var(--color-gray-500));border-radius:20px;padding:0 var(--space-sm);height:24px;color:var(--color-white-100);vertical-align:middle;cursor:pointer;transition:filter .15s ease;-webkit-user-select:none;user-select:none}.icon-usage__code-preview .token-color--light{color:var(--color-navy-300)}.icon-usage__code-preview .token-color:hover{filter:brightness(1.2)}.icon-usage__code-preview .token-stroke,.icon-usage__code-preview .token-state{display:inline-flex;align-items:center;background:var(--color-gray-500);border-radius:20px;padding:0 var(--space-sm);height:24px;color:var(--color-white-100);vertical-align:middle;cursor:pointer;transition:filter .15s ease;-webkit-user-select:none;user-select:none}.icon-usage__code-preview .token-stroke:hover,.icon-usage__code-preview .token-state:hover{filter:brightness(1.2)}