.su{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border), 0 30px 60px -44px color-mix(in srgb, var(--accent) 60%, transparent);border-radius:28px;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);display:grid;overflow:hidden}.su-rail{background:var(--surface-alt);align-content:start;gap:22px;padding:26px 22px;display:grid}.su-progress{gap:4px;display:grid}.su-progress b{font-family:var(--font-display);color:var(--heading);font-size:19px}.su-progress small{color:var(--text-2);font-size:13.5px;font-weight:600}.su-bar{border-radius:var(--r-pill);background:var(--border);height:8px;margin-top:8px;overflow:hidden}.su-bar i{border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--success));height:100%;transition:width .45s var(--ease);display:block}.su-steps{gap:6px;margin:0;padding:0;list-style:none;display:grid;position:relative}.su-steps:before{content:"";background:var(--border);width:2px;position:absolute;top:24px;bottom:24px;left:25px}.su-steps li{position:relative}.su-steps button{width:100%;min-height:48px;font:inherit;text-align:left;cursor:pointer;transition:background .2s var(--ease);background:0 0;border:0;border-radius:16px;align-items:center;gap:12px;padding:6px 12px 6px 8px;display:flex}.su-steps button:hover{background:color-mix(in srgb, var(--tone) 8%, transparent)}.su-steps button[aria-current=step]{background:var(--surface);box-shadow:0 10px 20px -16px color-mix(in srgb, var(--heading) 60%, transparent), inset 0 0 0 1.5px var(--tone)}.su-steps button:focus-visible,.su-mark:focus-visible,.su-ghost:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.su-dot{z-index:1;background:var(--surface);width:36px;height:36px;box-shadow:inset 0 0 0 2px var(--border);color:var(--text-3);transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);border-radius:50%;flex:none;place-items:center;font-size:14px;font-weight:800;display:grid;position:relative}.su-steps button[aria-current=step] .su-dot{background:var(--tone);box-shadow:none;color:var(--surface)}.su-steps li[data-done] .su-dot{background:var(--success);box-shadow:none;color:var(--surface);animation:su-pop .4s var(--ease)}.su-step-title{color:var(--heading);font-size:15px;font-weight:700;line-height:1.3}.su-steps li[data-done] .su-step-title{color:var(--text-3)}.su-stage{animation:su-in .35s var(--ease) both;grid-template-columns:minmax(200px,.8fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(20px,3vw,36px);display:grid}.su-art{aspect-ratio:1;background:radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 72%), color-mix(in srgb, var(--tone) 10%, var(--surface));border-radius:24px;position:relative}.su-art img{object-fit:contain;padding:8%}.su-body{justify-items:start;gap:12px;display:grid}.su-kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--tone);font-size:12px;font-weight:800}.su-title{font-family:var(--font-display);color:var(--heading);font-size:clamp(22px,2.4vw,30px);line-height:1.15}.su-how{counter-reset:how;gap:10px;margin:4px 0 6px;padding:0;list-style:none;display:grid}.su-how li{color:var(--text-2);counter-increment:how;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.45;display:flex}.su-how li:before{content:counter(how);background:color-mix(in srgb, var(--tone) 12%, var(--surface));width:26px;height:26px;color:var(--tone);border-radius:8px;flex:none;place-items:center;font-size:13px;font-weight:800;display:grid}.su-actions{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.su-mark{border-radius:var(--r-pill);background:var(--heading);height:46px;font:inherit;color:var(--surface);cursor:pointer;transition:transform .15s var(--ease);border:0;align-items:center;gap:8px;padding:0 20px;font-size:15px;font-weight:700;display:inline-flex}.su-mark:hover{transform:translateY(-2px)}.su-done-chip{border-radius:var(--r-pill);background:var(--success-soft);height:40px;color:var(--success-ink);align-items:center;gap:6px;padding:0 16px;font-size:14.5px;font-weight:700;display:inline-flex}.su-ghost{border-radius:var(--r-pill);height:40px;font:inherit;color:var(--text-2);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:700;display:inline-flex}.su-ghost:hover{background:var(--surface-alt)}.su-link{min-height:40px;color:var(--tone,var(--accent));align-items:center;gap:6px;font-size:14.5px;font-weight:700;display:inline-flex}.su-stage.su-complete{text-align:center;background:radial-gradient(60% 70% at 50% 30%, var(--success-soft), transparent 70%);grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:10px;min-height:360px}.su-burst{background:var(--success);width:84px;height:84px;color:var(--surface);animation:su-pop .6s var(--ease);border-radius:50%;place-items:center;display:grid}.su-complete b{font-family:var(--font-display);color:var(--heading);font-size:clamp(24px,3vw,32px)}.su-complete p{max-width:42ch;color:var(--text-2);margin:0 0 6px;font-size:15.5px;line-height:1.5}.su-complete .su-actions{justify-content:center}@keyframes su-in{0%{opacity:0;transform:translateY(10px)}}@keyframes su-pop{50%{transform:scale(1.15)}}@media (max-width:900px){.su{grid-template-columns:minmax(0,1fr)}.su-rail{gap:16px;padding:18px 16px 14px}.su-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.su-steps:before{width:auto;height:2px;inset:24px 12% auto}.su-steps button{text-align:center;flex-direction:column;gap:6px;min-height:0;padding:6px 2px}.su-steps button[aria-current=step]{box-shadow:none;background:0 0}.su-step-title{font-size:12px}.su-stage{grid-template-columns:96px minmax(0,1fr);align-items:start;gap:16px;padding:18px 16px 20px}.su-art{border-radius:18px}.su-title{font-size:20px}.su-how li{font-size:14.5px}.su-stage.su-complete{min-height:0;padding-block:28px}}@media (max-width:560px){.su-step-title{display:none}.su-steps:before{top:23px}.su-stage{grid-template-columns:72px minmax(0,1fr)}.su-actions{width:100%}.su-mark{flex:1;justify-content:center}}@media (prefers-reduced-motion:reduce){.su-stage,.su-dot,.su-burst{animation:none!important}.su-bar i{transition:none}}