: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:960px;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:650px}h1,h2,h3{color:#0f172a}h1{margin:0 0 10px;font-size:clamp(2.3rem,7vw,4.25rem);line-height:.98}h2{letter-spacing:-.02em;margin:0;font-size:1rem}.package-name{letter-spacing:-.04em;display:inline-block}.description{color:#475569;max-width:650px;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;box-shadow:0 16px 40px #0f172a0f}.showcase-panel{gap:16px;min-width:0;padding:22px;display:grid}.panel-header{gap:6px;display:grid}.panel-description,.row-header p{color:#64748b;margin:0}.frame-meta{color:#111827;justify-content:space-between;align-items:center;gap:12px;font-weight:700;display:flex}.width-value{color:#64748b;font-size:.95rem;font-weight:600}.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:18px;width:100%;min-width:240px;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}.showcase-stack{gap:10px;display:grid}.showcase-row{background:#ffffffc7;border:1px solid #e5e7eb;border-radius:14px;gap:10px;min-width:0;padding:14px;display:grid}.showcase-row-featured{background:#fff;box-shadow:0 10px 24px #0f172a0a}.row-header{gap:3px;min-width:0;display:grid}.row-header p{font-size:.88rem;line-height:1.45}.fitlist,.breadcrumb-list,.recipient-list,.filter-list{width:100%}.tag,.more,.filter-chip,.default-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,.default-more{color:#111827;cursor:pointer;background:#fff;border:1px solid #d1d5db}.more:hover,.default-more:hover,.breadcrumb-disclosure:hover,.avatar-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}.breadcrumb-segment{color:#334155;align-items:center;gap:6px;font-size:.94rem;display:inline-flex}.breadcrumb-item:last-child .breadcrumb-segment{color:#0f172a;font-weight:650}.breadcrumb-disclosure{color:#475569;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:999px;place-items:center;width:34px;height:34px;font-weight:700;display:inline-grid}.avatar{color:#075985;background:#e0f2fe;border:2px solid #fff;border-radius:999px;place-items:center;width:42px;height:42px;font-size:.8rem;font-weight:800;display:inline-grid}.avatar-more{color:#0f172a;cursor:pointer;background:#fff}.filter-chip{color:#5b21b6;background:#f5f3ff;border:1px solid #c7d2fe}.default-more{font-weight:700}@media (width<=640px){.page{padding:28px 16px}.showcase-panel{padding:18px}h1{font-size:2.7rem}.example-frame{resize:none;min-width:0}}