:root{--bg: #0f1412;--bg-card: #161d19;--bg-elevated: #1c2520;--fg: #f5f7f6;--fg-muted: #9ca89f;--fg-soft: #b8c4bb;--primary: #4ade80;--primary-dim: #22c55e;--accent: #86efac;--accent-dim: rgba(134, 239, 172, .15);--border: rgba(148, 163, 184, .12);--glow: rgba(74, 222, 128, .25);--radius: 1rem;--radius-lg: 1.5rem;--radius-xl: 2rem}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:Plus Jakarta Sans,system-ui,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}.how-to-page{position:relative;min-height:100vh}.how-to-bg{position:fixed;inset:0;z-index:0;background:var(--bg)}.how-to-bg:before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse 60% 40% at 80% 20%,var(--accent-dim) 0%,transparent 50%),radial-gradient(ellipse 40% 60% at 20% 80%,rgba(34,197,94,.08) 0%,transparent 50%);pointer-events:none}.how-to-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}.carousel-wrapper{position:relative;z-index:1;padding:.75rem;max-width:100%;width:100%;margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center}.how-to-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 16px 48px #0000004d;width:100%;max-width:min(1400px,98vw);margin:0 auto;display:flex;flex-direction:column}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--border);flex-shrink:0}.panel-title-block{flex:1;min-width:0}.how-to-title{font-family:Fraunces,serif;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;color:var(--fg);margin:0 0 .25rem}.how-to-subtitle{font-size:.8125rem;color:var(--fg-muted);margin:0}.fullscreen-btn{flex-shrink:0;width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);color:var(--fg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.fullscreen-btn:hover{color:var(--primary);border-color:#4ade804d}.fullscreen-btn svg{width:1.125rem;height:1.125rem}.carousel-layout{display:flex;flex-direction:column;gap:0;flex:1;min-height:0}.slide-container{flex:1;min-width:0;width:100%;overflow:visible;touch-action:pan-y pinch-zoom;display:flex;justify-content:center;align-items:center}.slides{position:relative;height:min(700px,80vh);aspect-ratio:9 / 19.5;width:auto;margin:0 auto;border-radius:2rem;overflow:hidden;background:#fff;border:1px solid var(--border);align-self:center;box-shadow:0 10px 40px #0006}.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translate(16px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility .5s}.slide.prev{transform:translate(-16px)}.slide.active{opacity:1;visibility:visible;transform:translate(0);z-index:1}.slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}.explainer-panel{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);flex-shrink:0}.explainer-header{padding:.75rem 1rem .5rem;border-bottom:1px solid var(--border)}.step-badge{display:block;font-size:.75rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:2px;transition:width .5s cubic-bezier(.22,1,.36,1)}.slide-explainer{padding:1rem 1rem .75rem;flex:1;display:flex;flex-direction:column;justify-content:center;animation:explainerIn .45s cubic-bezier(.22,1,.36,1)}@keyframes explainerIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.explainer-caption{font-family:Fraunces,serif;font-size:1.125rem;font-weight:600;color:var(--fg);margin:0 0 .5rem}.explainer-text{font-size:.9375rem;color:var(--fg-muted);line-height:1.65;margin:0}.carousel-controls{padding:.75rem 1rem 1rem;border-top:1px solid var(--border);display:flex;justify-content:center}.nav-labels{display:flex;justify-content:center;gap:1.5rem}.nav-label{font-size:.875rem;font-weight:500;color:var(--primary);background:none;border:none;cursor:pointer;padding:.375rem 0;transition:opacity .2s}.nav-label:hover:not(:disabled){text-decoration:underline}.nav-label:disabled{opacity:.35;cursor:not-allowed}@media(min-width:768px){.panel-header{padding:1rem 1.25rem .75rem}.how-to-title{font-size:1.5rem}.carousel-layout{flex-direction:row;align-items:stretch;gap:0}.carousel-image{flex:2;min-width:0;padding:3rem;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#0003}.explainer-panel{flex:1;min-width:0;border-top:none;border-left:none}.explainer-header{padding:.75rem 1.25rem}.slide-explainer{padding:1rem 1.25rem}.explainer-caption{font-size:1.25rem}.explainer-text{font-size:1rem}.carousel-controls{padding:.75rem 1.25rem 1rem}.slides{height:min(850px,90vh);aspect-ratio:9 / 19.5;width:auto}}.how-to-card:fullscreen,.how-to-card:-webkit-full-screen,.how-to-card:-moz-full-screen,.how-to-card:-ms-fullscreen{min-height:100vh;border-radius:0}.how-to-card:fullscreen .slides,.how-to-card:-webkit-full-screen .slides,.how-to-card:-moz-full-screen .slides,.how-to-card:-ms-fullscreen .slides{width:min(400px,90vw);aspect-ratio:9 / 19;height:auto}