.component-library{--lib-ink:#fff8f0;--lib-muted:#a3a7b3;--lib-line:#ffffff16;min-height:100svh;color:var(--lib-ink);background:#0a0a0b;font:14px/1.6 Inter,Arial,sans-serif}.component-library *{box-sizing:border-box}.component-library a{color:inherit;text-decoration:none}.component-library button,.component-library input,.component-library select{font:inherit}.component-library button{cursor:pointer}.component-library :focus-visible{outline-offset:5px;outline:2px solid #f5a05a}.library-header,.component-library main,.library-footer{width:min(1120px,100% - 80px);margin:auto}.library-header{border-bottom:1px solid var(--lib-line);justify-content:space-between;align-items:center;height:112px;display:flex}.library-header .animated-signature{width:180px}.library-back{align-items:center;gap:9px;font-size:12px;display:flex;color:var(--lib-muted)!important}.library-intro{padding:76px 0 52px}.library-eyebrow{letter-spacing:.13em;color:#b7b9c0;align-items:center;gap:10px;font:10px/1.6 JetBrains Mono,monospace;display:flex}.library-eyebrow>span:first-child{background:#f5a05a;border-radius:50%;width:6px;height:6px}.library-count{color:#f5a05a;margin-left:auto}.library-intro h1{letter-spacing:-.055em;margin:30px 0;font-family:Syne,Arial,sans-serif;font-size:clamp(46px,6.5vw,82px);font-weight:600;line-height:1.06}.library-intro h1 em{color:#f5a05a;font-family:Georgia,serif;font-weight:400}.library-intro-bottom{justify-content:space-between;align-items:end;gap:25px;display:flex}.library-intro-bottom p{max-width:440px;color:var(--lib-muted);margin:0;font-size:15px}.library-intro-bottom a{white-space:nowrap;border-bottom:1px solid #f5a05a60;align-items:center;gap:14px;padding-bottom:6px;font-size:12px;display:flex}.library-selector{border:1px solid var(--lib-line);background:#111114;border-radius:14px;gap:8px;margin-bottom:22px;padding:8px;display:flex}.library-selector button{color:var(--lib-muted);background:0 0;border:1px solid #0000;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:12px;padding:15px 20px;font-size:13px;display:flex}.library-selector button[aria-pressed=true]{color:var(--lib-ink);background:#1b1b20;border-color:#ffffff1c}.library-selector button>span:first-child{color:#f5a05a;font:10px JetBrains Mono,monospace}.library-tag{letter-spacing:.08em;border:1px solid #ffffff20;border-radius:4px;padding:2px 5px;font-size:8px}.library-workbench{border:1px solid var(--lib-line);background:#101012;border-radius:16px;grid-template-columns:290px minmax(0,1fr);display:grid;overflow:hidden}.library-controls{border-right:1px solid var(--lib-line);padding:28px}.library-controls-heading{justify-content:space-between;align-items:center;margin-bottom:26px;display:flex}.library-controls h2{margin:0;font-size:16px;font-weight:500}.library-controls-heading>span{color:#747783;letter-spacing:.1em;font:9px JetBrains Mono,monospace}.library-controls label{color:#bfc1ca;gap:8px;margin-bottom:18px;font-size:11px;display:grid}.library-controls label>span:not(.library-color-field){justify-content:space-between;display:flex}.library-controls output{color:#f5a05a;font-variant-numeric:tabular-nums}.library-controls input:not([type=range]):not([type=color]),.library-controls select{color:#eeedf0;background:#18181d;border:1px solid #ffffff1b;border-radius:7px;width:100%;min-width:0;padding:10px;font-size:12px}.library-controls input[type=range]{accent-color:#f5a05a;width:100%;min-height:24px}.library-color-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.library-color-field{color:#a3a7b3;align-items:center;gap:7px;font:10px JetBrains Mono,monospace;display:flex}.library-controls input[type=color]{cursor:pointer;background:0 0;border:1px solid #ffffff25;border-radius:5px;flex-shrink:0;width:28px;height:28px;padding:2px}.library-primary{color:#151515;background:#fff0e0;border:0;border-radius:7px;justify-content:center;align-items:center;gap:9px;width:100%;padding:13px;display:flex;font-size:12px!important;font-weight:600!important}.library-help{color:#8b8e99;margin:16px 0 0;font-size:10px;line-height:1.8}.library-stage-column{min-width:0}.library-preview-bar{border-bottom:1px solid var(--lib-line);color:#a3a7b3;justify-content:space-between;align-items:center;gap:12px;height:53px;padding:0 22px;font:10px JetBrains Mono,monospace;display:flex}.library-preview-bar>span:first-child{gap:5px;display:flex}.library-preview-bar i{background:#55545c;border-radius:50%;width:6px;height:6px}.library-preview-bar button{color:#b6b6bf;background:0 0;border:0;padding:8px;display:flex}.library-stage{justify-content:center;align-items:center;min-height:370px;display:flex;position:relative;overflow:hidden}.library-preview-label{color:currentColor;opacity:.55;letter-spacing:.12em;z-index:2;pointer-events:none;font:8px JetBrains Mono,monospace;position:absolute;bottom:20px;left:22px}.library-stage .hello-group{max-width:90%}.library-stage .animated-signature{max-width:85%}.library-replay{background:0 0;border:0;flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex;font-size:12px!important}.library-code-heading{border-top:1px solid var(--lib-line);border-bottom:1px solid var(--lib-line);color:#b6b6bf;justify-content:space-between;align-items:center;padding:18px 22px;font-size:11px;display:flex}.library-code-heading>span,.library-code-heading button{align-items:center;gap:8px;display:flex}.library-code-heading button{color:#f5a05a;background:0 0;border:0;padding:6px;font-size:10px}.library-stage-column pre{color:#d3d0cb;min-height:265px;margin:0;padding:22px;font:11px/1.9 JetBrains Mono,monospace;overflow:auto}.library-copy-status{color:#bfc1ca;min-height:17px;margin:0;padding:0 22px 14px;font-size:10px}.library-notes{grid-template-columns:1fr 1fr;gap:70px;padding:60px 0 72px;display:grid}.library-notes span{color:#f5a05a;letter-spacing:.1em;font:9px JetBrains Mono,monospace}.library-notes h2{letter-spacing:-.02em;margin:15px 0 10px;font-size:22px;font-weight:500}.library-notes p{color:var(--lib-muted);margin:0;font-size:12px;line-height:1.9}.library-footer{border-top:1px solid var(--lib-line);color:#8f929f;justify-content:space-between;align-items:center;padding:25px 0 35px;font-size:10px;display:flex}.library-footer a{color:#c5c3c0;align-items:center;gap:8px;display:flex}.library-skip{z-index:100;background:#fff0e0;padding:12px;position:fixed;top:8px;left:8px;transform:translateY(-150%);color:#111!important}.library-skip:focus{transform:none}@media (width<=800px){.library-header,.component-library main,.library-footer{width:calc(100% - 40px)}.library-workbench{grid-template-columns:240px minmax(0,1fr)}.library-controls{padding:20px}.library-color-row{grid-template-columns:1fr;gap:0}.library-stage{min-height:410px}.library-tag{display:none}}@media (width<=600px){.library-header{height:85px}.library-header .animated-signature{width:142px}.library-back{font-size:10px}.library-intro{padding:45px 0 35px}.library-intro-bottom{flex-direction:column;align-items:start}.library-intro-bottom p{font-size:13px}.library-selector button{gap:7px;padding:12px 6px;font-size:11px}.library-workbench{flex-direction:column;display:flex}.library-controls{border:0;border-bottom:1px solid var(--lib-line);grid-template-columns:1fr 1fr;gap:12px;display:grid}.library-controls-heading,.library-controls .library-color-row,.library-primary,.library-help{grid-column:1/-1}.library-controls-heading{margin-bottom:8px}.library-controls label{min-width:0;margin:0}.library-color-row{grid-template-columns:1fr 1fr;margin:5px 0}.library-stage{min-height:300px}.library-notes{grid-template-columns:1fr;gap:32px;padding:40px 0}.library-footer{flex-direction:column;align-items:start;gap:20px}}