:root{--primary: #2C3E50;--secondary: #34495E;--accent: #E67E22;--bg-color: #ffffff;--text-primary: #2C3E50;--text-secondary: #7F8C8D;--border-color: #ECF0F1}html{color-scheme:light only}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;overflow-y:scroll}.index-page{background:#fff;color:var(--text-primary);min-height:100vh;overflow-x:hidden}.index-hero{align-items:center;display:grid;gap:1rem;grid-template-columns:1fr;min-height:0;padding:1.2rem 1rem .55rem}.index-hero-copy{max-width:680px}.index-kicker{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.14em;margin-bottom:.55rem;text-transform:uppercase}.index-hero h1,.index-section-heading h2{color:var(--text-primary);font-size:1.75rem;font-weight:700;letter-spacing:0;line-height:1;margin:0}.index-hero-copy>p:last-child{color:#4d626b;font-size:1.125rem;line-height:1.35;margin-top:.9rem;max-width:34rem}.index-scan-scene{align-items:center;display:none;justify-content:center;min-height:9rem;position:relative}.index-scan-scene:before{background:#f8f9fa;border:1px solid rgba(44,62,80,.08);content:"";height:8.8rem;position:absolute;transform:rotate(-7deg);width:min(72vw,13rem)}.index-label-card{aspect-ratio:1.56;background:#fff;border:1px solid rgba(44,62,80,.12);border-radius:16px;box-shadow:0 22px 60px #2c3e502e,inset 0 0 0 1px #ffffffe6;max-width:210px;overflow:hidden;padding:clamp(1rem,4vw,2rem);position:relative;transform:rotate(3deg);width:min(62vw,100%)}.index-label-top,.index-label-lines,.index-label-code{position:relative;z-index:1}.index-label-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:.65rem}.index-label-top span:first-child{background:var(--primary);border-radius:999px;height:.75rem;width:42%}.index-label-lines{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.75rem}.index-label-lines span{animation:index-line-pulse 1.8s ease-in-out infinite;background:#2c3e5029;border-radius:999px;height:.32rem}.index-label-lines span:nth-child(1){width:84%}.index-label-lines span:nth-child(2){animation-delay:.12s;width:54%}.index-label-lines span:nth-child(3){animation-delay:.24s;width:72%}.index-label-lines span:nth-child(4){animation-delay:.36s;width:46%}.index-label-code{display:grid;gap:.28rem;grid-template-columns:1.2fr .7fr 1fr .9fr 1.1fr}.index-label-code span{background:#e67e2257;border-radius:4px;height:.9rem}.index-label-code span:nth-child(2n){background:#2c3e502e}.index-label-chip{align-items:center;background:var(--text-primary);border-radius:999px;color:#fff;display:flex;font-size:.78rem;font-weight:700;height:1.8rem;justify-content:center;position:absolute;right:clamp(.72rem,3.2vw,1.55rem);top:clamp(.72rem,3.2vw,1.55rem);width:1.8rem;z-index:1}.index-label-scan{animation:index-label-scan 2.4s ease-in-out infinite;background:#e67e22e6;box-shadow:0 0 20px #e67e2285;height:3px;left:1rem;position:absolute;right:1rem;top:1rem;z-index:2}.index-samples{border-top:1px solid var(--border-color);padding:.65rem .625rem 2.5rem}.index-section-heading{margin:0 auto .75rem;max-width:820px;text-align:center}.index-section-heading h2{font-size:1.6rem}.index-section-heading>p:last-child{color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin:.5rem auto 0;max-width:42rem}.index-sample-grid{align-items:stretch;display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto;max-width:1180px}.index-sample-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;color:inherit;display:flex;flex-direction:column;height:100%;min-height:100%;overflow:hidden;position:relative;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.index-sample-main-link{border-radius:inherit;inset:0;position:absolute;z-index:2}.index-sample-main-link:focus-visible{border-color:#e67e228c;box-shadow:0 10px 28px #2c3e5024;outline:none}.index-sample-card:has(.index-sample-main-link:focus-visible){border-color:#e67e228c;box-shadow:0 10px 28px #2c3e5024;transform:translateY(-2px)}@media(hover:hover)and (pointer:fine){.index-sample-card:hover{border-color:#e67e228c;box-shadow:0 10px 28px #2c3e5024;transform:translateY(-2px)}}.index-sample-skeleton .index-sample-image,.index-sample-image-shell{aspect-ratio:1;background:#fff;box-shadow:inset 0 0 0 1px #dde6e36b;display:block;overflow:hidden;padding:.45rem;pointer-events:none;position:relative;width:100%;z-index:1}.index-sample-image-shell .index-sample-image{display:block;height:100%;object-fit:contain;opacity:1;position:relative;transform:translateY(4px) scale(.985);transition:opacity .56s ease,transform .62s cubic-bezier(.16,.84,.24,1);width:100%;z-index:2}.index-sample-image-placeholder{animation:index-image-icon-develop 4.6s ease-in-out infinite;color:#5f6f7033;display:block;height:50%;left:50%;opacity:.35;pointer-events:none;position:absolute;stroke-width:1.04;top:50%;transform:translate(-50%,-50%) scale(.995);transition:opacity .34s ease;width:50%;z-index:1}.index-sample-image-placeholder svg{display:block;fill:none;height:100%;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:100%}.index-sample-image-sun{animation:index-image-sun-bloom 4.6s ease-in-out infinite}.index-sample-image-mountain{animation:index-image-mountain-bloom 4.6s ease-in-out infinite}.index-sample-card:not(.is-image-ready) .index-sample-image-shell .index-sample-image{opacity:0}.index-sample-card.is-image-ready .index-sample-image-placeholder{animation:none;opacity:0}.index-sample-card.is-image-ready .index-sample-image-shell .index-sample-image{transform:translateY(0) scale(1)}.index-sample-body{display:flex;flex:1;flex-direction:column;gap:.32rem;padding:.56rem;pointer-events:none;position:relative;z-index:3}.index-sample-body h3{display:-webkit-box;font-size:.78rem;line-height:1.2;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.index-sample-color{color:#5f6f70;font-size:.72rem;font-weight:700;line-height:1.18}.index-sample-material{color:var(--text-secondary);font-size:.72rem;line-height:1.25}.index-sample-material{display:none}.index-sample-code-links{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:auto;padding-top:.12rem;pointer-events:auto}.index-sample-code-link{align-items:center;background:#f5f7f7;border:1px solid rgba(95,111,112,.24);border-radius:999px;color:#5f6f70;display:inline-flex;font-size:.62rem;font-weight:800;justify-content:center;letter-spacing:0;line-height:1;min-height:1.34rem;padding:.3rem .5rem;position:relative;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;z-index:4}.index-sample-code-link.is-default{background:#e9eeee;border-color:#5f6f7061;color:#2c3e50}.index-sample-code-link:focus-visible{border-color:#5f6f7094;outline:2px solid rgba(95,111,112,.16);outline-offset:2px}@media(hover:hover)and (pointer:fine){.index-sample-code-link:hover{background:#e9eeee;border-color:#5f6f707a;color:#2c3e50;transform:translateY(-1px)}}.index-sample-status{color:var(--text-secondary);grid-column:1 / -1;padding:2rem;text-align:center}.index-sample-skeleton{pointer-events:none}.index-sample-skeleton .index-sample-body span{animation:index-skeleton-shimmer 1.35s ease-in-out infinite;background:linear-gradient(90deg,#dde6e3b3,#f7f9f8,#dde6e3b3);background-size:220% 100%}.index-sample-skeleton .index-sample-image{background:#fff;box-shadow:inset 0 0 0 1px #dde6e36b}.index-sample-skeleton .index-sample-body{gap:.42rem}.index-sample-skeleton .index-sample-body span{border-radius:999px;display:block;height:.7rem}.index-sample-skeleton .index-sample-body span:first-child{width:88%}.index-sample-skeleton .index-sample-body span:last-child{width:56%}@media(max-width:719px){.index-sample-skeleton:nth-child(n+7){display:none}}@keyframes index-label-scan{0%,to{opacity:0;transform:translateY(0)}10%,88%{opacity:1}50%{transform:translateY(6.5rem)}}@keyframes index-line-pulse{0%,to{opacity:.42}50%{opacity:1}}@keyframes index-skeleton-shimmer{0%{background-position:180% 0}to{background-position:-40% 0}}@keyframes index-image-icon-develop{0%,12%,to{opacity:.35;transform:translate(-50%,-50%) scale(.995)}42%,84%{opacity:.7;transform:translate(-50%,-50%) scale(1)}}@keyframes index-image-sun-bloom{0%,30%,to{color:currentColor;stroke:currentColor}46%,84%{color:#e67e2294;stroke:currentColor}}@keyframes index-image-mountain-bloom{0%,34%,to{color:currentColor;stroke:currentColor}50%,86%{color:#2f7d6880;stroke:currentColor}}@media(prefers-reduced-motion:reduce){.index-sample-image-placeholder,.index-sample-image-sun,.index-sample-image-mountain,.index-sample-skeleton .index-sample-body span{animation:none}}@media(min-width:720px){.index-hero{gap:1rem;grid-template-columns:minmax(0,1fr) 240px;padding:1.6rem clamp(1rem,5vw,4rem) 1.2rem}.index-hero h1,.index-section-heading h2{font-size:2.35rem}.index-hero-copy>p:last-child{font-size:1.2rem}.index-scan-scene{display:flex;justify-self:stretch;min-height:10rem}.index-samples{padding:2rem clamp(1rem,5vw,4rem) clamp(2.5rem,6vw,5rem)}.index-section-heading{margin-bottom:1.5rem}.index-section-heading>p:last-child{font-size:1rem;line-height:1.55;margin-top:1rem}.index-sample-grid{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.index-label-card{max-width:210px;width:100%}.index-sample-image-shell{padding:.75rem}.index-sample-body{gap:.55rem;padding:.9rem}.index-sample-body h3{display:block;font-size:1rem;line-height:1.25;min-height:0;overflow:visible;-webkit-line-clamp:unset}.index-sample-color{font-size:.86rem;line-height:1.2}.index-sample-material{font-size:.86rem;line-height:1.35}.index-sample-code-links{gap:.36rem;padding-top:.18rem}.index-sample-code-link{font-size:.7rem;min-height:1.52rem;padding:.34rem .6rem}.index-sample-material{display:block}}@media(min-width:900px){.index-hero{gap:1.5rem;grid-template-columns:minmax(0,1fr) 260px;padding:1.75rem clamp(1rem,5vw,4rem) 1.25rem}.index-hero h1,.index-section-heading h2{font-size:2.8rem}.index-label-card{max-width:230px}}@media(prefers-reduced-motion:reduce){.index-label-scan,.index-label-lines span,.index-sample-image-shell,.index-sample-image,.index-sample-code-link,.index-sample-card{animation:none;transition:none}}