*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f7fa;color:#1a1a2e;line-height:1.6;min-height:100vh}#root,.app{min-height:100vh;display:flex;flex-direction:column}header{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#fff;padding:2.5rem 2rem;text-align:center}header h1{font-size:2rem;font-weight:700;margin-bottom:.4rem}header .subtitle{font-size:1rem;opacity:.8}.tabs{display:flex;justify-content:center;gap:0;background:#fff;box-shadow:0 2px 8px #00000014;position:sticky;top:0;z-index:10}.tabs button{flex:1;max-width:300px;padding:1rem 1.5rem;border:none;background:#fff;font-size:1rem;font-weight:500;color:#666;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;display:flex;align-items:center;justify-content:center;gap:.5rem}.tabs button:hover{color:#0f3460;background:#f0f4ff}.tabs button.active{color:#0f3460;border-bottom-color:#0f3460;font-weight:600}.tab-icon{font-size:1.2rem}main{flex:1;max-width:800px;margin:0 auto;padding:2rem 1rem;width:100%}.guide-intro{text-align:center;margin-bottom:2rem}.guide-intro h2{font-size:1.6rem;color:#1a1a2e;margin-bottom:.75rem}.guide-intro p{font-size:1rem;color:#555;max-width:600px;margin:0 auto}.steps{display:flex;flex-direction:column;gap:1.5rem}.step{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px #0000000f;transition:box-shadow .2s}.step:hover{box-shadow:0 4px 20px #0000001a}.step-header{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem}.step-number{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0f3460,#16213e);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;margin-top:2px}.step-header h3{font-size:1.1rem;color:#1a1a2e;margin-bottom:.3rem}.step-header p{font-size:.9rem;color:#666;line-height:1.5}.step-img-wrapper{position:relative;cursor:pointer;border-top:1px solid #f0f0f0;overflow:hidden}.step-img-wrapper img{width:100%;display:block;transition:transform .3s}.step-img-wrapper:not(.expanded) img{max-height:300px;object-fit:cover;object-position:top}.step-img-wrapper.expanded img{max-height:none}.zoom-hint{position:absolute;bottom:12px;right:12px;background:#0009;color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem}.guide-note{margin-top:2rem;padding:1rem 1.25rem;background:#fff8e1;border-left:4px solid #ffc107;border-radius:0 8px 8px 0;font-size:.9rem;color:#5d4037;line-height:1.6}footer{text-align:center;padding:1.5rem;color:#999;font-size:.85rem;border-top:1px solid #eee;margin-top:3rem}@media(max-width:600px){header{padding:1.5rem 1rem}header h1{font-size:1.4rem}.tabs button{font-size:.85rem;padding:.8rem .5rem}main{padding:1rem .75rem}.step-header{padding:1rem}.step-number{width:30px;height:30px;font-size:.85rem}}