.css-icon[data-v-717f653b]{color:#639;margin-right:.5rem}.tutorial-header[data-v-717f653b]{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)}.content[data-v-717f653b]{max-width:960px;margin:0 auto;padding:1rem}.mt-4[data-v-717f653b]{margin-top:1rem}.mt-6[data-v-717f653b]{margin-top:1.5rem}.box-model-diagram[data-v-717f653b]{display:flex;justify-content:center;background:#fff;padding:1rem;border-radius:8px;overflow-x:auto}.box-model-diagram svg[data-v-717f653b]{max-width:100%;height:auto}.layer-label[data-v-717f653b]{font-family:system-ui,-apple-system,sans-serif;font-size:14px;fill:#333}.margin-layer[data-v-717f653b]:hover,.border-layer[data-v-717f653b]:hover,.padding-layer[data-v-717f653b]:hover,.content-layer[data-v-717f653b]:hover{opacity:.8;cursor:pointer}@media (max-width: 768px){.box-model-diagram svg[data-v-717f653b]{width:100%;height:auto}}.components-grid[data-v-717f653b]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}.component-section[data-v-717f653b]{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 4px #0000001a}.component-info[data-v-717f653b]{margin-top:1rem}.component-label[data-v-717f653b]{font-family:system-ui,-apple-system,sans-serif;font-size:12px;fill:#333;text-anchor:middle}.interactive-demo[data-v-717f653b]{background:#fff;padding:1rem;border-radius:8px}.demo-box[data-v-717f653b]{width:100%;height:auto;max-width:400px;margin:0 auto;display:block}pre[data-v-717f653b]{background:#f5f5f5;padding:.5rem;border-radius:4px;margin-top:.5rem}code[data-v-717f653b]{font-family:monospace;color:#2c3e50}.demo-container[data-v-717f653b]{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px #0000001a}.demo-controls[data-v-717f653b]{margin-top:2rem}.control[data-v-717f653b]{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.control label[data-v-717f653b]{min-width:80px;font-weight:500}.control input[type=range][data-v-717f653b]{flex:1}.control span[data-v-717f653b]{min-width:50px;text-align:right}.measurements line[data-v-717f653b]{stroke-width:1}.measurements text[data-v-717f653b]{dominant-baseline:middle}.box-layers rect[data-v-717f653b]{transition:all .3s ease}.box-layers rect[data-v-717f653b]:hover{opacity:.8;cursor:pointer}.sizing-diagram[data-v-717f653b]{background:#fff;margin:1rem 0}.annotation[data-v-717f653b]{font-family:system-ui,-apple-system,sans-serif;font-size:12px;fill:#666}svg[data-v-717f653b]{overflow:visible}defs[data-v-717f653b]{position:absolute}marker[data-v-717f653b]{fill:#666}.example-container[data-v-717f653b]{background:#fff;padding:1.5rem;border-radius:8px;margin-top:1.5rem;overflow:hidden}.preview-container[data-v-717f653b]{border:2px solid #eee;border-radius:8px;padding:1rem;min-height:200px;background:#f8f9fa}.explanation[data-v-717f653b]{background:#f8f9fa;padding:1rem;border-radius:4px}.explanation ul[data-v-717f653b]{margin-left:1.5rem;margin-top:.5rem}.column[data-v-717f653b]{overflow:hidden}.next-tutorial-cta[data-v-717f653b]{margin:4rem 0;padding:2rem;background:var(--color-red-berry);border-radius:8px}.next-tutorial-cta .box[data-v-717f653b]{max-width:600px;margin:0 auto;padding:2rem;background:#fff;box-shadow:0 2px 8px #0000001a}.next-tutorial-cta .content ul[data-v-717f653b]{display:inline-block;text-align:left;margin:1rem 0}.next-tutorial-cta .button[data-v-717f653b]{margin-top:1rem}