:root{color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%}body{font-family:Trebuchet MS,ui-rounded,sans-serif;color:#e8e8e8}.page{position:relative;min-height:100%;padding:48px 16px 20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#111318,#1a1d24)}.backdrop-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.panel{position:relative;z-index:1;max-width:1080px;margin:auto;padding:28px 20px 12px;background:#111318c7;border-radius:16px;transition:padding .28s ease,border-radius .28s ease}.panel.collapsed{padding:16px 20px}.panel-head h1{margin:0;font-size:24px;font-weight:800;letter-spacing:.5px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel-head .head-copy{min-width:0}.head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.icon-btn{width:36px;height:36px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:inherit;cursor:pointer}.icon-btn:hover{background:#ffffff14}.lang-select{flex-shrink:0;height:36px;background:#ffffff0f;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:8px;padding:0 10px;font-size:13px;cursor:pointer}.lang-select option{color:#111}.panel-head .subtitle{margin:4px 0 22px;font-size:13px;opacity:.7;max-height:60px;overflow:hidden;transition:opacity .28s ease,max-height .28s ease,margin .28s ease}.panel.collapsed .subtitle{opacity:0;max-height:0;margin:0}.panel-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;overflow:hidden;max-height:1600px;opacity:1;transition:max-height .3s ease,opacity .3s ease}.panel-body.hidden{max-height:0;opacity:0}.col{display:flex;flex-direction:column;gap:14px;min-width:0}.col label{display:flex;flex-direction:column;gap:6px;font-size:13px;opacity:.95}.col.config{gap:12px}.cfg-row{display:flex;align-items:center;gap:12px;min-height:34px}.cfg-row.two{gap:28px;align-items:flex-end;min-width:0}.cfg-label{flex-shrink:0;font-size:12.5px;opacity:.9;white-space:nowrap}.cfg-label b{opacity:1;font-weight:600}.cfg-row .chip-row{flex:1}.cfg-row input[type=text]{flex:1;min-width:0}.cfg-row input[type=range]{flex:1}.range-wrap{display:flex;align-items:center;gap:8px;flex:1}.range-wrap input[type=range]{flex:1}.color-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.color-group .color-row{display:flex;align-items:center;gap:8px;min-width:0}.color-group .tiny{align-self:center}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip-row button{background:transparent;border:1px solid rgba(255,255,255,.25);color:inherit;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13px}.chip-row button.on{background:#ffffffe6;color:#111;border-color:transparent}input[type=range]{width:100%}input[type=text]{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#ffffff0f;color:inherit;font-size:13px}button.tiny{align-self:flex-start;background:transparent;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer}.color-row{display:flex;align-items:center;gap:10px}.color-row input[type=color]{flex:0 0 auto;width:46px;height:32px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:transparent;cursor:pointer}.color-row span{flex:1;font-size:12px;opacity:.85;font-family:ui-monospace,SFMono-Regular,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col.usage{gap:12px}.usage{position:sticky;top:0}.usage-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.usage-head span{font-size:13px;opacity:.95}.copy-btn{background:#ffffffe6;color:#111;border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}.copy-btn:hover{background:#fff}.code{margin:0;padding:16px 18px;background:#080a0ed9;border:1px solid rgba(255,255,255,.08);border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;color:#d7e3f4;white-space:pre-wrap;overflow-wrap:anywhere;overflow-y:auto}.col.usage .code:not(.code-install){flex:1;min-height:60px}.code-install{margin-bottom:0;padding:10px 14px;font-size:12px;opacity:.9;background:#080a0e99;height:auto;overflow:visible}.hint{margin:18px 0 0;font-size:12.5px;line-height:1.5;opacity:.7;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}@media (max-width: 900px){.panel-body{grid-template-columns:1fr}.panel{max-width:620px}}