:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#fff 0%,#f8fafc 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-width:100%;min-height:100vh}body{margin:0}button,input{font:inherit}code{background:#eef2f7;border-radius:6px;padding:.12rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.page{place-items:center;width:100%;min-height:100vh;padding:40px 20px;display:grid}.content{width:100%;min-width:0;max-width:820px;margin:0 auto}.hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;display:flex}.hero-copy{max-width:620px}h1{margin:0 0 10px;font-size:clamp(2.3rem,7vw,4.25rem);line-height:.98}.package-name{letter-spacing:-.04em;display:inline-block}.description{color:#475569;max-width:620px;margin:0;font-size:1rem;line-height:1.65}.hero-actions{flex-wrap:wrap;gap:10px;display:flex}.link-pill{color:#0f172a;background:#ffffffe6;border:1px solid #e2e8f0;border-radius:999px;align-items:center;gap:8px;height:42px;padding:0 14px;font-weight:600;text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s;display:inline-flex;box-shadow:0 8px 24px #0f172a0d}.link-pill:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 12px 28px #0f172a14}.panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe0;border:1px solid #e5e7eb;border-radius:22px;gap:16px;min-width:0;padding:22px;display:grid;box-shadow:0 16px 40px #0f172a0f}.panel-header{gap:6px;display:grid}.panel-description{color:#64748b;margin:0}.frame-meta{color:#111827;justify-content:space-between;align-items:center;gap:12px;font-weight:600;display:flex}.width-value{color:#64748b;font-size:.95rem}.mobile-width-control{color:#475569;gap:8px;font-size:.95rem;font-weight:600;display:grid}.mobile-width-control input{width:100%}.example-frame-shell{width:100%;min-width:0;position:relative}.example-frame{resize:horizontal;background:linear-gradient(#fff 0%,#f8fafc 100%);border:1px dashed #d1d5db;border-radius:16px;width:100%;min-width:180px;max-width:100%;padding:14px;overflow:auto}.frame-toolbar{gap:6px;margin-bottom:14px;display:flex}.frame-toolbar span{background:#d1d5db;border-radius:999px;width:10px;height:10px}.fitlist{width:100%}.tag,.more{white-space:nowrap;border-radius:999px;align-items:center;height:34px;padding:0 12px;font-size:.95rem;display:inline-flex}.tag{color:#3730a3;background:#eef2ff;border:1px solid #dbe4ff}.more{color:#111827;cursor:pointer;background:#fff;border:1px solid #d1d5db}.more:hover{background:#f8fafc}.popover{z-index:10;background:#fff;border:1px solid #e5e7eb;border-radius:14px;max-width:min(320px,100vw - 16px);max-height:min(320px,100vh - 16px);padding:12px;position:absolute;overflow:auto;box-shadow:0 20px 40px #0f172a24}.popover-title{color:#475569;margin-bottom:10px;font-size:.82rem;font-weight:700}.popover-list{flex-wrap:wrap;gap:8px;min-width:0;display:flex}@media (width<=640px){.page{padding:28px 16px}.panel{padding:18px}h1{font-size:2.7rem}.example-frame{resize:none}}