.css-icon[data-v-e7c1a096]{color:#639;margin-right:.5rem}.tutorial-header[data-v-e7c1a096]{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)}.content[data-v-e7c1a096]{max-width:960px;margin:0 auto;padding:2rem}.demo-container[data-v-e7c1a096]{padding:1rem;background-color:#f5f5f5;border-radius:8px}.responsive-card[data-v-e7c1a096]{width:100%;max-width:350px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.responsive-card img[data-v-e7c1a096]{width:100%;height:auto;display:block}.responsive-card .card-content[data-v-e7c1a096]{padding:1rem}.pattern-demos[data-v-e7c1a096]{padding:1rem;background-color:#f5f5f5;border-radius:8px}.stack-to-row[data-v-e7c1a096]{display:flex;flex-direction:column;gap:1rem}@media (min-width: 768px){.stack-to-row[data-v-e7c1a096]{flex-direction:row;justify-content:space-between}}.demo-box[data-v-e7c1a096]{background-color:#3b82f6;color:#fff;padding:2rem;text-align:center;border-radius:4px;flex:1}.breakpoints-demo[data-v-e7c1a096]{padding:1rem;background-color:#f5f5f5;border-radius:8px}.responsive-element[data-v-e7c1a096]{background-color:#3b82f6;color:#fff;padding:2rem;text-align:center;border-radius:4px}.current-breakpoint[data-v-e7c1a096]:before{content:"Mobile"}@media (min-width: 576px){.current-breakpoint[data-v-e7c1a096]:before{content:"Small Tablet"}}@media (min-width: 768px){.current-breakpoint[data-v-e7c1a096]:before{content:"Tablet"}}@media (min-width: 1024px){.current-breakpoint[data-v-e7c1a096]:before{content:"Desktop"}}@media (min-width: 1280px){.current-breakpoint[data-v-e7c1a096]:before{content:"Large Desktop"}}.features-grid[data-v-e7c1a096]{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feature-card[data-v-e7c1a096]{background-color:#f8fafc;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a}.feature-card h5[data-v-e7c1a096]{margin:0 0 .5rem;color:#3b82f6}.feature-card p[data-v-e7c1a096]{margin:0;font-size:.9rem;color:#64748b}.units-table[data-v-e7c1a096]{margin-bottom:1rem;overflow-x:auto}.units-table table[data-v-e7c1a096]{width:100%;border-collapse:collapse}.units-table th[data-v-e7c1a096],.units-table td[data-v-e7c1a096]{padding:.5rem;text-align:left}.units-table th[data-v-e7c1a096]{background-color:#f8fafc}.units-table td[data-v-e7c1a096]:first-child{font-weight:700}.units-table td[data-v-e7c1a096]:last-child{text-align:right}.units-demo[data-v-e7c1a096]{display:grid;gap:2rem;padding:1rem;background-color:#f5f5f5;border-radius:8px}.em-example[data-v-e7c1a096],.rem-example[data-v-e7c1a096]{padding:1em;background-color:#3b82f6;color:#fff;border-radius:4px;font-size:1.2em}.em-example .nested[data-v-e7c1a096],.rem-example .nested[data-v-e7c1a096]{margin-top:1em;padding:1em;background-color:#1d4ed8;border-radius:4px}.rem-example[data-v-e7c1a096],.rem-example .nested[data-v-e7c1a096]{font-size:1.2rem}.viewport-demo[data-v-e7c1a096]{position:relative;height:60vh;background-color:#f5f5f5;border-radius:8px;overflow:hidden}.vw-element[data-v-e7c1a096]{width:50vw;padding:1rem;background-color:#3b82f6;color:#fff;text-align:center}.vh-element[data-v-e7c1a096]{height:50vh;width:100px;background-color:#1d4ed8;color:#fff;writing-mode:vertical-rl;text-align:center;padding:1rem}.typography-demo[data-v-e7c1a096]{padding:2rem;background-color:#f5f5f5;border-radius:8px}.fluid-title[data-v-e7c1a096]{font-size:clamp(2rem,5vw + 1rem,4rem);margin-bottom:1rem;color:#1d4ed8}.fluid-text[data-v-e7c1a096]{font-size:clamp(1rem,1rem + 1vw,1.5rem);line-height:1.5;color:#374151}.image-demos[data-v-e7c1a096]{display:grid;gap:2rem;padding:1rem;background-color:#f5f5f5;border-radius:8px}.demo-container[data-v-e7c1a096]{background-color:#fff;padding:1rem;border-radius:4px}.max-width-image[data-v-e7c1a096]{max-width:100%;height:auto;display:block}.image-wrapper[data-v-e7c1a096]{width:100%;height:200px;overflow:hidden}.object-fit-image[data-v-e7c1a096]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.art-direction-demo[data-v-e7c1a096]{background-color:#f5f5f5;padding:1rem;border-radius:8px}.art-directed-image[data-v-e7c1a096]{width:100%;height:auto;display:block;border-radius:4px}.lazy-image-container[data-v-e7c1a096]{position:relative;width:100%;height:0;padding-bottom:50%;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.lazy-image[data-v-e7c1a096]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .3s}.lazy-image.loaded[data-v-e7c1a096]{opacity:1}.placeholder[data-v-e7c1a096]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;font-size:.9rem}.demo-nav .nav-brand[data-v-e7c1a096]{font-weight:700;font-size:1.25rem;color:#3b82f6}.demo-nav .nav-toggle[data-v-e7c1a096]{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#3b82f6}.demo-nav .nav-menu[data-v-e7c1a096]{display:flex;gap:2rem;list-style:none;margin:0;padding:0}@media (max-width: 768px){.demo-nav .nav-toggle[data-v-e7c1a096]{display:block}.demo-nav .nav-menu[data-v-e7c1a096]{display:none;width:100%;margin-top:1rem}.demo-nav .nav-menu li[data-v-e7c1a096]{margin:1rem 0}}.patterns-demo[data-v-e7c1a096]{padding:1rem;background-color:#f5f5f5;border-radius:8px}.pattern-grid[data-v-e7c1a096]{display:grid;gap:1rem;grid-template-columns:1fr}@media (min-width: 768px){.pattern-grid[data-v-e7c1a096]{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pattern-grid[data-v-e7c1a096]{grid-template-columns:repeat(4,1fr)}}.pattern-item[data-v-e7c1a096]{background-color:#3b82f6;color:#fff;padding:2rem;text-align:center;border-radius:4px}.nav-demo[data-v-e7c1a096]{padding:1rem;background-color:#f5f5f5;border-radius:8px}.demo-nav[data-v-e7c1a096]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1rem;background-color:#fff;border-radius:4px}.nav-brand[data-v-e7c1a096]{font-weight:700;font-size:1.25rem;color:#3b82f6}.nav-toggle[data-v-e7c1a096]{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#3b82f6}.nav-menu[data-v-e7c1a096]{display:flex;gap:2rem;list-style:none;margin:0;padding:0}@media (max-width: 768px){.nav-toggle[data-v-e7c1a096]{display:block}.nav-menu[data-v-e7c1a096]{display:none;width:100%;margin-top:1rem}.nav-menu.active[data-v-e7c1a096]{display:block}.nav-menu li[data-v-e7c1a096]{margin:1rem 0}}