.platform-selector{width:100%;max-width:480px;margin:0 auto;padding:3rem 1.25rem 2.5rem;display:flex;flex-direction:column;gap:2rem;min-height:100dvh}.platform-selector-header{text-align:center}.platform-selector-header h1{font-size:1.6rem;font-weight:700;color:var(--color-text);line-height:1.25;margin-bottom:.6rem}.platform-selector-header p{color:var(--color-text-muted);font-size:.95rem}.platform-selector-prompt{display:block;padding:0;margin-bottom:1rem;font-weight:600;color:var(--color-text);text-align:center}.platform-options{display:flex;flex-direction:column;gap:1rem;border:none;padding:0;margin:0}.platform-option{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:1.25rem;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);cursor:pointer;text-align:left;transition:border-color .15s,transform .1s;color:var(--color-text)}.platform-option:hover,.platform-option:focus-visible{border-color:var(--color-accent);outline:none}.platform-option:active{transform:scale(.99)}.platform-option-label{font-size:1.1rem;font-weight:700}.platform-option-hint{font-size:.85rem;color:var(--color-text-muted)}.tutorial-page{display:flex;flex-direction:column;min-height:100dvh}.progress-bar-container{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.5rem 1rem;display:flex;align-items:center;gap:.75rem}.progress-bar{flex:1;height:6px;background:var(--color-accent);border-radius:3px;transition:width .4s ease}.progress-bar-container:before{content:"";position:absolute;left:1rem;right:5rem;height:6px;background:var(--color-border);border-radius:3px}.progress-label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap;min-width:4.5rem;text-align:right}.tutorial-main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:1.5rem 1rem 2rem}.tutorial-back-link{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;color:var(--color-accent);font-size:.9rem;font-weight:600;padding:.25rem 0;margin-bottom:.75rem;cursor:pointer}.tutorial-back-link:hover,.tutorial-back-link:focus-visible{text-decoration:underline;outline:none}.tutorial-header{margin-bottom:2rem;text-align:center}.tutorial-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem;line-height:1.3}.tutorial-description{font-size:.95rem;color:var(--color-text-muted);margin-bottom:.75rem}.tutorial-step-count{display:inline-block;background:var(--color-accent-light);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:999px}.step-list{list-style:none;display:flex;flex-direction:column;gap:var(--step-gap)}.step-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;scroll-margin-top:4rem}.step-number-badge{padding:.6rem 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);background:var(--color-accent-light);border-bottom:1px solid var(--color-border)}.step-screenshot-btn{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;transition:transform .25s ease}.step-screenshot-btn.zoomed{cursor:zoom-out;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:0}.step-screenshot-btn.zoomed .step-screenshot{max-width:100%;max-height:90dvh;width:auto;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:24px;box-shadow:0 24px 64px #0009}.step-screenshot{width:100%;height:auto;display:block;object-fit:contain;background:var(--color-border);aspect-ratio:375 / 667}.step-instruction{padding:1rem 1rem 1.2rem;font-size:1rem;font-weight:500;color:var(--color-text);line-height:1.5;background:#f1f5f9;border-bottom:1px solid var(--color-border)}.step-nav{display:flex;gap:.75rem;margin-top:2.5rem}.nav-btn{flex:1;padding:.8rem 1rem;border:2px solid var(--color-accent);border-radius:10px;background:none;color:var(--color-accent);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.nav-btn:hover:not(:disabled){background:var(--color-accent);color:#fff}.nav-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--color-border);color:var(--color-text-muted)}.tutorial-footer{text-align:center;padding:1.5rem 1rem 2.5rem;font-size:.875rem;color:var(--color-text-muted);border-top:1px solid var(--color-border)}@media (min-width: 640px){.tutorial-title{font-size:1.75rem}.tutorial-main{padding:2rem 1.5rem 3rem}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #cbd5e1;--color-surface: #ffffff;--color-text: #1a1a2e;--color-text-muted: #475569;--color-accent: #4f46e5;--color-accent-light: #e0e7ff;--color-border: #e5e7eb;--color-progress: #4f46e5;--radius: 16px;--step-gap: 2.5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@media (prefers-color-scheme: dark){:root{--color-bg: #0f0f14;--color-surface: #1c1c27;--color-text: #e5e7eb;--color-text-muted: #9ca3af;--color-accent: #818cf8;--color-accent-light: #1e1b4b;--color-border: #2d2d3d;--color-progress: #818cf8}}body{min-height:100dvh;background-color:var(--color-bg)}#root{min-height:100dvh}