*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:DM Sans,system-ui,sans-serif;background-color:#f5f3f0;color:#1a1a1a;min-height:100vh}img{display:block;max-width:100%}button{cursor:pointer;font-family:inherit}:root{--crimson: #8B0000;--crimson-bright: #C8102E;--crimson-deep: #6B0000;--crimson-tint: #FDF0F0;--crimson-border: #EDBBBB;--bg-page: #F5F3F0;--bg-surface: #FFFFFF;--bg-subtle: #FAF9F7;--text-primary: #1A1A1A;--text-secondary: #555555;--text-muted: #909090;--text-muted-strong: #6D645D;--text-inverse: #FFFFFF;--border: #E4E0DB;--border-focus: #C8102E;--shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);--shadow-md: 0 4px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .12);--sidebar-width: 260px;--header-height: 72px;--content-max: 600px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--font-display: "Playfair Display", Georgia, "Times New Roman", serif;--font-body: "DM Sans", system-ui, -apple-system, sans-serif;--ease-out: cubic-bezier(.16, 1, .3, 1)}@keyframes intro-btn-glow{0%,to{box-shadow:0 4px 12px #8b00004d;transform:scale(1)}50%{box-shadow:0 6px 32px #c8102ebf,0 0 48px 10px #c8102e59;transform:scale(1.04)}}@keyframes intro-btn-shimmer{0%{background-position:-200% center}to{background-position:200% center}}.btn--intro-glow{animation:intro-btn-glow 1.6s ease-in-out infinite;background-image:linear-gradient(105deg,var(--crimson) 0%,var(--crimson-bright, #e8102e) 40%,#ff4060 50%,var(--crimson-bright, #e8102e) 60%,var(--crimson) 100%);background-size:200% auto;animation:intro-btn-glow 1.6s ease-in-out infinite,intro-btn-shimmer 2.4s linear infinite}.btn--intro-glow:hover{animation:none;background-image:none;background:var(--crimson-deep)}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-animate{animation:fadeSlideIn .4s var(--ease-out) both}.app{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)}.app-header{position:sticky;top:0;z-index:100;height:var(--header-height);background:var(--crimson);border-bottom:3px solid var(--crimson-deep);box-shadow:0 2px 16px #00000040}.app-header__inner{max-width:calc(var(--sidebar-width) + var(--content-max) + 80px);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between}.app-header__brand{display:flex;align-items:center;gap:18px}.app-header__wou{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-inverse);letter-spacing:.04em;line-height:1}.app-header__divider{width:1px;height:36px;background:#ffffff4d}.app-header__sup{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#ffffffa6;line-height:1;margin-bottom:4px}.app-header__title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-inverse);line-height:1}.app-header__badge{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#ffffffd1}.app-body{display:flex;flex:1;max-width:calc(var(--sidebar-width) + var(--content-max) + 80px);margin:0 auto;width:100%;padding:0 32px;gap:10px}.app-main{flex:1;padding:20px 0;min-width:0}.progress-sidebar{width:var(--sidebar-width);flex-shrink:0;padding:28px 0}.progress-sidebar__inner{position:sticky;top:calc(var(--header-height) + 32px)}.progress-sidebar__heading{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted-strong);margin-bottom:20px;padding-left:4px}.progress-track{list-style:none;position:relative}.progress-item{position:relative;padding-bottom:8px}.progress-item__line{position:absolute;left:15px;top:-8px;width:2px;height:8px;background:var(--border);transition:background .3s ease}.progress-item__line--done{background:var(--crimson)}.progress-item__row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);transition:background .2s ease}.progress-item--active .progress-item__row{background:var(--crimson-tint)}.progress-item__dot-wrap{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.progress-item__dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative}.progress-item--completed .progress-item__dot{background:var(--crimson);border-color:var(--crimson);color:#fff}.progress-item--completed .progress-item__dot svg{width:14px;height:14px}.progress-item--active .progress-item__dot{border-color:var(--crimson-bright);box-shadow:0 0 0 4px #c8102e1f}.progress-item__pulse{width:10px;height:10px;border-radius:50%;background:var(--crimson-bright)}.progress-item__label-wrap{display:flex;flex-direction:column;gap:2px;padding-top:3px}.progress-item__step-num{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);line-height:1}.progress-item--active .progress-item__step-num{color:var(--crimson)}.progress-item__label{font-size:13px;font-weight:500;color:var(--text-secondary);line-height:1.3}.progress-item--active .progress-item__label{color:var(--crimson-deep);font-weight:600}.progress-item--completed .progress-item__label,.progress-item--pending .progress-item__label{color:var(--text-muted)}.progress-item--pending .progress-item__dot{border-color:var(--border);background:var(--bg-subtle)}.progress-item__row--clickable{cursor:pointer}.progress-item--completed .progress-item__row--clickable:hover,.progress-item--pending .progress-item__row--clickable:hover{background:var(--bg-subtle)}.step-content{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-md);overflow:hidden}.step-content__header{display:flex;align-items:flex-start;gap:20px;padding:20px 44px 16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--crimson-tint) 0%,var(--bg-surface) 60%)}.step-badge{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--crimson);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #8b00004d;margin-top:2px}.step-badge__number{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-inverse);line-height:1}.step-content__title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:8px}.step-content__desc{font-size:15px;color:var(--text-secondary);line-height:1.6;font-weight:400}.step-instructions{list-style:none;padding:16px 44px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--border)}.step-instructions__item{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--text-primary);line-height:1.6}.step-instructions__bullet{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--crimson-tint);border:1.5px solid var(--crimson-border);color:var(--crimson);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.step-url-callout{padding:16px 20px;background:#1a1a1a;border-radius:var(--radius-md);display:flex;align-items:center;gap:16px}.step-url-callout--standalone{margin:0 44px 32px}.step-instructions__inline-block{padding:12px 0}.step-instructions__sub{display:flex;align-items:baseline;gap:10px;padding-left:40px;padding-top:6px;font-size:14px;color:var(--text-secondary);line-height:1.5}.step-instructions__sub-bullet{flex-shrink:0;color:var(--crimson);font-size:16px;line-height:1}.step-instructions__inline-image{padding-left:40px}.step-url-callout__label{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffffffc7;flex-shrink:0}.step-url-callout__link{font-family:Courier New,Courier,monospace;font-size:14px;color:#7dd3fc;text-decoration:none;word-break:break-all;transition:color .15s ease}.step-url-callout__link:hover{color:#bae6fd;text-decoration:underline}.step-content__image{display:flex;justify-content:center;padding:0 44px;margin-bottom:40px}.step-instructions~.step-content__image{padding-top:32px}.img-wrap{flex-shrink:0;max-width:100%}.step-screenshot{width:100%;display:block;border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.img-placeholder{width:100%;aspect-ratio:16 / 9;border:2px dashed var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.018) 10px,rgba(0,0,0,.018) 20px),var(--bg-subtle);display:flex;align-items:center;justify-content:center}.img-placeholder__inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;max-width:420px}.img-placeholder__icon{width:40px;height:40px;color:var(--text-muted);opacity:.6}.img-placeholder__label{font-size:13px;font-weight:500;color:var(--text-secondary);line-height:1.4}.img-placeholder__meta{display:flex;flex-direction:column;align-items:center;gap:6px}.img-placeholder__tag{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);background:var(--border);padding:2px 8px;border-radius:20px}.img-placeholder__filename{font-family:Courier New,Courier,monospace;font-size:11px;color:var(--text-muted);background:var(--bg-subtle);border:1px solid var(--border);padding:4px 10px;border-radius:var(--radius-sm)}.step-nav{display:flex;align-items:center;justify-content:space-between;padding:24px 44px 32px;border-top:1px solid var(--border)}.step-nav__left,.step-nav__right{display:flex;gap:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:600;border:none;transition:all .15s ease;line-height:1}.btn--primary{background:var(--crimson);color:var(--text-inverse);box-shadow:0 4px 12px #8b000040}.btn--primary:hover{background:var(--crimson-deep);box-shadow:0 6px 16px #8b000059;transform:translateY(-1px)}.btn--primary:active{transform:translateY(0)}.btn--finish{background:#2d6a2d;box-shadow:0 4px 12px #2d6a2d40}.btn--finish:hover{background:#245724}.btn--ghost{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border)}.btn--ghost:hover{background:var(--bg-subtle);border-color:var(--border-focus);color:var(--text-primary)}.btn--home{background:transparent;color:var(--crimson);border:1.5px solid var(--crimson-border)}.btn--home:hover{background:var(--crimson-tint);border-color:var(--crimson)}.branch-selector{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-md);overflow:hidden}.branch-selector__header{padding:40px 44px 32px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--crimson-tint) 0%,var(--bg-surface) 60%)}.branch-selector__title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.branch-selector__subtitle{font-size:15px;color:var(--text-secondary);line-height:1.5}.branch-selector__cards{padding:32px 44px;display:flex;flex-direction:column;gap:16px}.branch-card{display:flex;align-items:center;gap:20px;padding:24px 28px;background:var(--bg-subtle);border:2px solid var(--border);border-radius:var(--radius-md);text-align:left;transition:all .18s ease;cursor:pointer}.branch-card:hover{border-color:var(--crimson-bright);background:var(--crimson-tint);box-shadow:0 4px 20px #c8102e1f;transform:translateY(-2px)}.branch-card:active{transform:translateY(0)}.branch-card__icon-wrap{flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-md);background:var(--crimson);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .18s ease}.branch-card__icon-wrap svg{width:24px;height:24px}.branch-card:hover .branch-card__icon-wrap{background:var(--crimson-deep)}.branch-card__content{flex:1;display:flex;flex-direction:column;gap:4px}.branch-card__label{font-size:17px;font-weight:700;color:var(--text-primary);font-family:var(--font-display);line-height:1.2}.branch-card__desc{font-size:14px;color:var(--text-secondary);line-height:1.4}.branch-card__arrow{flex-shrink:0;width:20px;height:20px;color:var(--text-muted);transition:transform .18s ease,color .18s ease}.branch-card:hover .branch-card__arrow{transform:translate(4px);color:var(--crimson)}.branch-selector__back{padding:0 44px 32px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeSlideIn .2s var(--ease-out) both}.modal{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:520px;overflow:hidden}.modal__header{display:flex;align-items:center;gap:16px;padding:28px 32px 24px;background:linear-gradient(135deg,#fff5f5 0%,var(--bg-surface) 60%);border-bottom:1px solid var(--crimson-border)}.modal__icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--crimson);color:#fff;display:flex;align-items:center;justify-content:center}.modal__icon svg{width:22px;height:22px}.modal__title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--crimson-deep);line-height:1}.modal__image{padding:24px 32px 0}.modal__text{padding:20px 32px;font-size:15px;color:var(--text-primary);line-height:1.65}.modal__actions{padding:0 32px 28px;display:flex;justify-content:flex-end}.modal__ok{min-width:100px}@media (max-width: 860px){.progress-sidebar{display:none}.app-header__inner{padding:0 16px}.app-header__badge{display:none}.app-body{padding:0 16px}.step-content__header,.step-instructions,.step-nav,.step-content__image{padding-left:24px;padding-right:24px}.step-url-callout{margin-left:24px;margin-right:24px}.branch-selector__header,.branch-selector__cards,.branch-selector__back{padding-left:24px;padding-right:24px}}